npm - @sula-tech/webcomponents - Versions diffs - 0.3.3 → 0.4.0 - Mend

@sula-tech/webcomponents 0.3.3 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (190) hide show

package/dist/components/p-DJGFqp8r.js ADDED Viewed

@@ -0,0 +1,44 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+const sulaMenuSelectListCss = "*,:after,:before{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/:after,:before{--tw-content:\"\"}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.block{display:block}:host{display:block}.sula-menu-select-list{box-shadow:0 8px 16px 0 rgba(0,0,0,.039)}:root{--color-green-50:#f1f9f4;--color-green-100:#e6f4ed;--color-green-200:#cae7d8;--color-green-300:#a0d4b8;--color-green-400:#68bb8e;--color-green-500:#04843f;--color-green-600:#037236;--color-green-700:#03632f;--color-green-800:#035428;--color-green-900:#024521;--color-green-950:#02361a;--color-red-50:#fef6f6;--color-red-100:#fde8e8;--color-red-200:#fad1d1;--color-red-300:#f7abab;--color-red-400:#f17474;--color-red-500:#c80505;--color-red-600:#b30404;--color-red-700:#9f0404;--color-red-800:#860303;--color-red-900:#6d0303;--color-red-950:#500202;--color-yellow-50:#fdf4e7;--color-yellow-100:#fcedd9;--color-yellow-200:#fae0bd;--color-yellow-300:#f6c788;--color-yellow-400:#f3b159;--color-yellow-500:#ef9928;--color-yellow-600:#e49226;--color-yellow-700:#d17e10;--color-yellow-800:#b46d0e;--color-yellow-900:#93590b;--color-yellow-950:#683f08;--color-orange-50:#fef4f1;--color-orange-100:#fde8e2;--color-orange-200:#fbd2c6;--color-orange-300:#f8b4a0;--color-orange-400:#f58e70;--color-orange-500:#f05223;--color-orange-600:#ea4210;--color-orange-700:#d23b0e;--color-orange-800:#b5330c;--color-orange-900:#942a0a;--color-orange-950:#691e07;--color-blue-50:#ecf0f9;--color-blue-100:#dde3f4;--color-blue-200:#b2c2e5;--color-blue-300:#7994d2;--color-blue-400:#4066bf;--color-blue-500:#001e64;--color-blue-600:#001c5c;--color-blue-700:#00174c;--color-blue-800:#00123d;--color-blue-900:#000f33;--color-blue-950:#000d2b;--color-ambar-50:#fff6eb;--color-ambar-100:#ffefdc;--color-ambar-200:#fedfb9;--color-ambar-300:#fdca8b;--color-ambar-400:#fdb359;--color-ambar-500:#fc9c26;--color-ambar-600:#ec8403;--color-ambar-700:#d87803;--color-ambar-800:#ba6803;--color-ambar-900:#975402;--color-ambar-950:#6a3b01;--color-gray-50:#fff;--color-gray-100:#f4f4f4;--color-gray-200:#e6e6e6;--color-gray-300:#c3c3c3;--color-gray-400:#b9b9b9;--color-gray-500:#949494;--color-gray-600:#737373;--color-gray-700:#5c5c5c;--color-gray-800:#323232;--color-gray-900:#292929;--color-gray-950:#141414;--color-white-opacity-50:#ffffff0d;--color-white-opacity-100:#ffffff1a;--color-white-opacity-200:#ffffff26;--color-white-opacity-300:#ffffff45;--color-white-opacity-400:#ffffff5c;--color-white-opacity-500:#ffffff80;--color-white-opacity-600:#ffffff8c;--color-white-opacity-700:#ffffffa3;--color-white-opacity-800:#ffffffba;--color-white-opacity-900:#fffc;--color-white-opacity-950:#ffffffe8;--color-ciano-50:#f1f6fe;--color-ciano-100:#dfeafc;--color-ciano-200:#c3d9f9;--color-ciano-300:#90b9f4;--color-ciano-400:#5d98ee;--color-ciano-500:#1769e0;--color-ciano-600:#155fcb;--color-ciano-700:#1355b4;--color-ciano-800:#104899;--color-ciano-900:#0d3b7d;--color-ciano-950:#0a2e61;--color-extra-color-blue-light:#e7f0f4;--color-extra-color-blue-dark:#162931;--color-black-opacity-50:#14141405;--color-black-opacity-100:#1414141a;--color-black-opacity-200:#14141426;--color-black-opacity-300:#14141445;--color-black-opacity-400:#1414145c;--color-black-opacity-500:#14141480;--color-black-opacity-600:#1414148c;--color-black-opacity-700:#141414a3;--color-black-opacity-800:#141414ba;--color-black-opacity-900:#141414cc;--color-black-opacity-950:#141414e8;--color-feedback-success:#04843f;--color-feedback-error:#c80505;--color-feedback-informational:#1355b4;--color-feedback-alert:#ef9928;--color-brand-primary:#f05223;--color-brand-secondary:#001c5c;--color-brand-tertiary-1:#1769e0;--color-brand-tertiary-2:#fc9c26;--color-surface-body:#fff;--color-surface-on-body:#f4f4f4;--color-surface-on-body-blue:#e7f0f4;--color-surface-on-body-brand:#fff6eb;--color-surface-on-body-feedback-success:#e6f4ed;--color-surface-on-body-feedback-error:#fde8e8;--color-surface-on-body-feedback-alert:#fdf4e7;--color-surface-on-body-feedback-info:#dfeafc;--color-text-brand:#f05223;--color-text-primary:#323232;--color-text-secondary:#5c5c5c;--color-text-disabled:#949494;--color-text-link:#1355b4;--color-states-empty-bg-hover:#1414141a;--color-states-empty-bg-pressed:#14141426;--color-states-bg-disabled:#14141405;--color-states-bg-focus:#1355b4;--color-states-primary-hover:#ea4210;--color-states-primary-pressed:#d23b0e;--color-states-danger-hover:#b30404;--color-states-danger-pressed:#9f0404;--color-states-negative-hover:#e6e6e6;--color-states-negative-pressed:#c3c3c3;--color-icon-primary:#5c5c5c;--color-icon-secondary:#fff;--color-icon-tertiary:#b30404;--color-icon-disabled:#b9b9b9;--color-neutral-neutral-1:#fff;--color-neutral-neutral-2:#f4f4f4;--color-neutral-neutral-3:#b9b9b9;--color-neutral-neutral-4:#949494;--color-neutral-neutral-5:#737373;--color-neutral-neutral-6:#5c5c5c;--color-neutral-neutral-7:#323232;--color-neutral-neutral-8:#292929;--color-negative-negative-1:#fff;--color-negative-negative-2:#323232;--color-opacity-body:#fffc;--color-opacity-on-body:#14141405;--color-opacity-overlay:#1414148c;--color-opacity-on-overlay:#ffffff1a;--color-line-input:#949494;--color-line-general-strong:#c3c3c3;--color-line-general:#e6e6e6}.static{position:static}.absolute{position:absolute}.relative{position:relative}.left-0{left:0}.top-40{top:2.5rem}.z-50{z-index:50}.ml-8{margin-left:.5rem}.flex{display:flex}.min-h-40{min-height:2.5rem}.w-fit{width:fit-content}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-xxl{border-radius:18.75rem}.border{border-width:1px}.border-line-input{border-color:var(--color-line-input)}.bg-negative-negative-1{background-color:var(--color-negative-negative-1)}.bg-states-bg-disabled{background-color:var(--color-states-bg-disabled)}.bg-states-empty-bg-pressed{background-color:var(--color-states-empty-bg-pressed)}.bg-states-negative-pressed{background-color:var(--color-states-negative-pressed)}.bg-surface-on-body{background-color:var(--color-surface-on-body)}.px-16{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:.125rem;padding-top:.125rem}.text-base{font-size:1rem;line-height:1.5rem}.font-bold{font-weight:700}.leading-4{line-height:1rem}.text-negative-negative-2{color:var(--color-negative-negative-2)}.text-text-disabled{color:var(--color-text-disabled)}.text-text-primary{color:var(--color-text-primary)}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.hover\\:bg-states-empty-bg-hover:hover{background-color:var(--color-states-empty-bg-hover)}.hover\\:bg-states-negative-hover:hover{background-color:var(--color-states-negative-hover)}.active\\:bg-states-empty-bg-pressed:active{background-color:var(--color-states-empty-bg-pressed)}.active\\:bg-states-negative-pressed:active{background-color:var(--color-states-negative-pressed)}.w-300{width:18.75rem}.w-full{width:100%}.rounded-sm{border-radius:.75rem}.border-line-general{border-color:var(--color-line-general)}.bg-surface-body{background-color:var(--color-surface-body)}.px-24{padding-left:1.5rem;padding-right:1.5rem}.py-12{padding-bottom:.75rem;padding-top:.75rem}.py-16{padding-bottom:1rem;padding-top:1rem}";
+const SulaMenuSelectList = /*@__PURE__*/ proxyCustomElement(class SulaMenuSelectList extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.itemSelected = createEvent(this, "itemSelected");
+        /**
+         * Items for list
+         */
+        this.items = [];
+        this.handleClick = (item) => {
+            this.itemSelected.emit(item);
+        };
+    }
+    render() {
+        return (h(Host, { key: '9550239407a0abc760f5cf21585a91af3aba6b5b' }, h("ul", { key: '799b609636f923dc607ace2bc7edcd4d7cda83f4', class: "bg-surface-body border border-line-general sula-menu-select-list w-300 rounded-sm py-12" }, this.items.map(item => (h("li", { class: "w-full px-24 py-16 text-base leading-4 text-text-primary hover:bg-states-empty-bg-hover cursor-pointer", key: item.id, onClick: () => this.handleClick(item) }, item.title))))));
+    }
+    static get style() { return sulaMenuSelectListCss; }
+}, [1, "sula-menu-select-list", {
+        "items": [1040]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["sula-menu-select-list"];
+    components.forEach(tagName => { switch (tagName) {
+        case "sula-menu-select-list":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SulaMenuSelectList);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+export { SulaMenuSelectList as S, defineCustomElement as d };
+//# sourceMappingURL=p-DJGFqp8r.js.map
+//# sourceMappingURL=p-DJGFqp8r.js.map

package/dist/components/p-DJGFqp8r.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-DJGFqp8r.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,i0UAAi0U;;MCQl1U,kBAAkB,iBAAAA,kBAAA,CAAA,MAAA,kBAAA,SAAAC,CAAA,CAAA;AAL/B,IAAA,WAAA,GAAA;;;;;AAME;;AAEG;AAEH,QAAA,IAAK,CAAA,KAAA,GAAuB,EAAE;AAQ9B,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,IAAsB,KAAI;AACvC,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;AAC9B,SAAC;AAeF;IAbC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yFAAyF,EAAA,EAChG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,KAClB,CAAA,CAAA,IAAA,EAAA,EAAI,KAAK,EAAC,wGAAwG,EAAC,GAAG,EAAE,IAAI,CAAC,EAAE,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EACnK,EAAA,IAAI,CAAC,KAAK,CACR,CACN,CAAC,CACC,CACA;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sula-menu-select-list/sula-menu-select-list.scss?tag=sula-menu-select-list&encapsulation=shadow","src/components/sula-menu-select-list/sula-menu-select-list.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.sula-menu-select-list {\n box-shadow: 0px 8px 16px 0px #0000000a;\n}\n","import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\nimport { SulaMenuListItem } from './model/sula-menu-select-list.model';\n\n@Component({\n tag: 'sula-menu-select-list',\n styleUrl: 'sula-menu-select-list.scss',\n shadow: true,\n})\nexport class SulaMenuSelectList {\n /**\n * Items for list\n */\n @Prop({ mutable: true })\n items: SulaMenuListItem[] = [];\n\n /**\n * Event emitted when item is selected\n */\n @Event()\n itemSelected: EventEmitter<SulaMenuListItem>;\n\n handleClick = (item: SulaMenuListItem) => {\n this.itemSelected.emit(item);\n };\n\n render() {\n return (\n <Host>\n <ul class=\"bg-surface-body border border-line-general sula-menu-select-list w-300 rounded-sm py-12\">\n {this.items.map(item => (\n <li class=\"w-full px-24 py-16 text-base leading-4 text-text-primary hover:bg-states-empty-bg-hover cursor-pointer\" key={item.id} onClick={() => this.handleClick(item)}>\n {item.title}\n </li>\n ))}\n </ul>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/sula-avatar.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-881c6b35.js';
-import { d as defineCustomElement$2 } from './p-b0d1214f.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { d as defineCustomElement$2 } from './p-CEU3PNQs.js';
 var SulaAvatarSize;
 (function (SulaAvatarSize) {
@@ -9,8 +9,7 @@ var SulaAvatarSize;
     SulaAvatarSize["Display"] = "display";
 })(SulaAvatarSize || (SulaAvatarSize = {}));
-const sulaAvatarCss = "*,:after,:before{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/:after,:before{--tw-content:\"\"}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.block{display:block}:host{display:block}:root{--color-green-50:#f1f9f4;--color-green-100:#e6f4ed;--color-green-200:#cae7d8;--color-green-300:#a0d4b8;--color-green-400:#68bb8e;--color-green-500:#04843f;--color-green-600:#037236;--color-green-700:#03632f;--color-green-800:#035428;--color-green-900:#024521;--color-green-950:#02361a;--color-red-50:#fef6f6;--color-red-100:#fde8e8;--color-red-200:#fad1d1;--color-red-300:#f7abab;--color-red-400:#f17474;--color-red-500:#c80505;--color-red-600:#b30404;--color-red-700:#9f0404;--color-red-800:#860303;--color-red-900:#6d0303;--color-red-950:#500202;--color-yellow-50:#fdf4e7;--color-yellow-100:#fcedd9;--color-yellow-200:#fae0bd;--color-yellow-300:#f6c788;--color-yellow-400:#f3b159;--color-yellow-500:#ef9928;--color-yellow-600:#e49226;--color-yellow-700:#d17e10;--color-yellow-800:#b46d0e;--color-yellow-900:#93590b;--color-yellow-950:#683f08;--color-orange-50:#fef4f1;--color-orange-100:#fde8e2;--color-orange-200:#fbd2c6;--color-orange-300:#f8b4a0;--color-orange-400:#f58e70;--color-orange-500:#f05223;--color-orange-600:#ea4210;--color-orange-700:#d23b0e;--color-orange-800:#b5330c;--color-orange-900:#942a0a;--color-orange-950:#691e07;--color-blue-50:#ecf0f9;--color-blue-100:#dde3f4;--color-blue-200:#b2c2e5;--color-blue-300:#7994d2;--color-blue-400:#4066bf;--color-blue-500:#001e64;--color-blue-600:#001c5c;--color-blue-700:#00174c;--color-blue-800:#00123d;--color-blue-900:#000f33;--color-blue-950:#000d2b;--color-ambar-50:#fff6eb;--color-ambar-100:#ffefdc;--color-ambar-200:#fedfb9;--color-ambar-300:#fdca8b;--color-ambar-400:#fdb359;--color-ambar-500:#fc9c26;--color-ambar-600:#ec8403;--color-ambar-700:#d87803;--color-ambar-800:#ba6803;--color-ambar-900:#975402;--color-ambar-950:#6a3b01;--color-gray-50:#fff;--color-gray-100:#f4f4f4;--color-gray-200:#e6e6e6;--color-gray-300:#c3c3c3;--color-gray-400:#b9b9b9;--color-gray-500:#949494;--color-gray-600:#737373;--color-gray-700:#5c5c5c;--color-gray-800:#323232;--color-gray-900:#292929;--color-gray-950:#141414;--color-white-opacity-50:#ffffff0d;--color-white-opacity-100:#ffffff1a;--color-white-opacity-200:#ffffff26;--color-white-opacity-300:#ffffff45;--color-white-opacity-400:#ffffff5c;--color-white-opacity-500:#ffffff80;--color-white-opacity-600:#ffffff8c;--color-white-opacity-700:#ffffffa3;--color-white-opacity-800:#ffffffba;--color-white-opacity-900:#fffc;--color-white-opacity-950:#ffffffe8;--color-ciano-50:#f1f6fe;--color-ciano-100:#dfeafc;--color-ciano-200:#c3d9f9;--color-ciano-300:#90b9f4;--color-ciano-400:#5d98ee;--color-ciano-500:#1769e0;--color-ciano-600:#155fcb;--color-ciano-700:#1355b4;--color-ciano-800:#104899;--color-ciano-900:#0d3b7d;--color-ciano-950:#0a2e61;--color-extra-color-blue-light:#e7f0f4;--color-extra-color-blue-dark:#162931;--color-black-opacity-50:#14141405;--color-black-opacity-100:#1414141a;--color-black-opacity-200:#14141426;--color-black-opacity-300:#14141445;--color-black-opacity-400:#1414145c;--color-black-opacity-500:#14141480;--color-black-opacity-600:#1414148c;--color-black-opacity-700:#141414a3;--color-black-opacity-800:#141414ba;--color-black-opacity-900:#141414cc;--color-black-opacity-950:#141414e8;--color-feedback-success:#04843f;--color-feedback-error:#c80505;--color-feedback-informational:#1355b4;--color-feedback-alert:#ef9928;--color-brand-primary:#f05223;--color-brand-secondary:#001c5c;--color-brand-tertiary-1:#1769e0;--color-brand-tertiary-2:#fc9c26;--color-surface-body:#fff;--color-surface-on-body:#f4f4f4;--color-surface-on-body-blue:#e7f0f4;--color-surface-on-body-brand:#fff6eb;--color-surface-on-body-feedback-success:#e6f4ed;--color-surface-on-body-feedback-error:#fde8e8;--color-surface-on-body-feedback-alert:#fdf4e7;--color-surface-on-body-feedback-info:#dfeafc;--color-text-brand:#f05223;--color-text-primary:#323232;--color-text-secondary:#5c5c5c;--color-text-disabled:#949494;--color-text-link:#1355b4;--color-states-empty-bg-hover:#1414141a;--color-states-empty-bg-pressed:#14141426;--color-states-bg-disabled:#14141405;--color-states-bg-focus:#1355b4;--color-states-primary-hover:#ea4210;--color-states-primary-pressed:#d23b0e;--color-states-danger-hover:#b30404;--color-states-danger-pressed:#9f0404;--color-states-negative-hover:#e6e6e6;--color-states-negative-pressed:#c3c3c3;--color-icon-primary:#5c5c5c;--color-icon-secondary:#fff;--color-icon-disabled:#b9b9b9;--color-neutral-neutral-1:#fff;--color-neutral-neutral-2:#f4f4f4;--color-neutral-neutral-3:#b9b9b9;--color-neutral-neutral-4:#949494;--color-neutral-neutral-5:#737373;--color-neutral-neutral-6:#5c5c5c;--color-neutral-neutral-7:#323232;--color-neutral-neutral-8:#292929;--color-negative-negative-1:#fff;--color-negative-negative-2:#323232;--color-opacity-body:#fffc;--color-opacity-on-body:#14141405;--color-opacity-overlay:#1414148c;--color-opacity-on-overlay:#ffffff1a;--color-line-input:#949494;--color-line-general-strong:#c3c3c3;--color-line-general:#e6e6e6}.static{position:static}.flex{display:flex}.h-\\[240px\\]{height:240px}.h-\\[44px\\]{height:44px}.h-\\[56px\\]{height:56px}.h-\\[96px\\]{height:96px}.w-\\[240px\\]{width:240px}.w-\\[44px\\]{width:44px}.w-\\[56px\\]{width:56px}.w-\\[96px\\]{width:96px}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-full{border-radius:9999px}.rounded-xxl{border-radius:18.75rem}.bg-surface-on-body{background-color:var(--color-surface-on-body)}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-5xl{font-size:3rem;line-height:1}.font-bold{font-weight:700}.text-text-primary{color:var(--color-text-primary)}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";
-const SulaAvatarStyle0 = sulaAvatarCss;
+const sulaAvatarCss = "*,:after,:before{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/:after,:before{--tw-content:\"\"}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.block{display:block}:host{display:block}:root{--color-green-50:#f1f9f4;--color-green-100:#e6f4ed;--color-green-200:#cae7d8;--color-green-300:#a0d4b8;--color-green-400:#68bb8e;--color-green-500:#04843f;--color-green-600:#037236;--color-green-700:#03632f;--color-green-800:#035428;--color-green-900:#024521;--color-green-950:#02361a;--color-red-50:#fef6f6;--color-red-100:#fde8e8;--color-red-200:#fad1d1;--color-red-300:#f7abab;--color-red-400:#f17474;--color-red-500:#c80505;--color-red-600:#b30404;--color-red-700:#9f0404;--color-red-800:#860303;--color-red-900:#6d0303;--color-red-950:#500202;--color-yellow-50:#fdf4e7;--color-yellow-100:#fcedd9;--color-yellow-200:#fae0bd;--color-yellow-300:#f6c788;--color-yellow-400:#f3b159;--color-yellow-500:#ef9928;--color-yellow-600:#e49226;--color-yellow-700:#d17e10;--color-yellow-800:#b46d0e;--color-yellow-900:#93590b;--color-yellow-950:#683f08;--color-orange-50:#fef4f1;--color-orange-100:#fde8e2;--color-orange-200:#fbd2c6;--color-orange-300:#f8b4a0;--color-orange-400:#f58e70;--color-orange-500:#f05223;--color-orange-600:#ea4210;--color-orange-700:#d23b0e;--color-orange-800:#b5330c;--color-orange-900:#942a0a;--color-orange-950:#691e07;--color-blue-50:#ecf0f9;--color-blue-100:#dde3f4;--color-blue-200:#b2c2e5;--color-blue-300:#7994d2;--color-blue-400:#4066bf;--color-blue-500:#001e64;--color-blue-600:#001c5c;--color-blue-700:#00174c;--color-blue-800:#00123d;--color-blue-900:#000f33;--color-blue-950:#000d2b;--color-ambar-50:#fff6eb;--color-ambar-100:#ffefdc;--color-ambar-200:#fedfb9;--color-ambar-300:#fdca8b;--color-ambar-400:#fdb359;--color-ambar-500:#fc9c26;--color-ambar-600:#ec8403;--color-ambar-700:#d87803;--color-ambar-800:#ba6803;--color-ambar-900:#975402;--color-ambar-950:#6a3b01;--color-gray-50:#fff;--color-gray-100:#f4f4f4;--color-gray-200:#e6e6e6;--color-gray-300:#c3c3c3;--color-gray-400:#b9b9b9;--color-gray-500:#949494;--color-gray-600:#737373;--color-gray-700:#5c5c5c;--color-gray-800:#323232;--color-gray-900:#292929;--color-gray-950:#141414;--color-white-opacity-50:#ffffff0d;--color-white-opacity-100:#ffffff1a;--color-white-opacity-200:#ffffff26;--color-white-opacity-300:#ffffff45;--color-white-opacity-400:#ffffff5c;--color-white-opacity-500:#ffffff80;--color-white-opacity-600:#ffffff8c;--color-white-opacity-700:#ffffffa3;--color-white-opacity-800:#ffffffba;--color-white-opacity-900:#fffc;--color-white-opacity-950:#ffffffe8;--color-ciano-50:#f1f6fe;--color-ciano-100:#dfeafc;--color-ciano-200:#c3d9f9;--color-ciano-300:#90b9f4;--color-ciano-400:#5d98ee;--color-ciano-500:#1769e0;--color-ciano-600:#155fcb;--color-ciano-700:#1355b4;--color-ciano-800:#104899;--color-ciano-900:#0d3b7d;--color-ciano-950:#0a2e61;--color-extra-color-blue-light:#e7f0f4;--color-extra-color-blue-dark:#162931;--color-black-opacity-50:#14141405;--color-black-opacity-100:#1414141a;--color-black-opacity-200:#14141426;--color-black-opacity-300:#14141445;--color-black-opacity-400:#1414145c;--color-black-opacity-500:#14141480;--color-black-opacity-600:#1414148c;--color-black-opacity-700:#141414a3;--color-black-opacity-800:#141414ba;--color-black-opacity-900:#141414cc;--color-black-opacity-950:#141414e8;--color-feedback-success:#04843f;--color-feedback-error:#c80505;--color-feedback-informational:#1355b4;--color-feedback-alert:#ef9928;--color-brand-primary:#f05223;--color-brand-secondary:#001c5c;--color-brand-tertiary-1:#1769e0;--color-brand-tertiary-2:#fc9c26;--color-surface-body:#fff;--color-surface-on-body:#f4f4f4;--color-surface-on-body-blue:#e7f0f4;--color-surface-on-body-brand:#fff6eb;--color-surface-on-body-feedback-success:#e6f4ed;--color-surface-on-body-feedback-error:#fde8e8;--color-surface-on-body-feedback-alert:#fdf4e7;--color-surface-on-body-feedback-info:#dfeafc;--color-text-brand:#f05223;--color-text-primary:#323232;--color-text-secondary:#5c5c5c;--color-text-disabled:#949494;--color-text-link:#1355b4;--color-states-empty-bg-hover:#1414141a;--color-states-empty-bg-pressed:#14141426;--color-states-bg-disabled:#14141405;--color-states-bg-focus:#1355b4;--color-states-primary-hover:#ea4210;--color-states-primary-pressed:#d23b0e;--color-states-danger-hover:#b30404;--color-states-danger-pressed:#9f0404;--color-states-negative-hover:#e6e6e6;--color-states-negative-pressed:#c3c3c3;--color-icon-primary:#5c5c5c;--color-icon-secondary:#fff;--color-icon-tertiary:#b30404;--color-icon-disabled:#b9b9b9;--color-neutral-neutral-1:#fff;--color-neutral-neutral-2:#f4f4f4;--color-neutral-neutral-3:#b9b9b9;--color-neutral-neutral-4:#949494;--color-neutral-neutral-5:#737373;--color-neutral-neutral-6:#5c5c5c;--color-neutral-neutral-7:#323232;--color-neutral-neutral-8:#292929;--color-negative-negative-1:#fff;--color-negative-negative-2:#323232;--color-opacity-body:#fffc;--color-opacity-on-body:#14141405;--color-opacity-overlay:#1414148c;--color-opacity-on-overlay:#ffffff1a;--color-line-input:#949494;--color-line-general-strong:#c3c3c3;--color-line-general:#e6e6e6}.static{position:static}.flex{display:flex}.h-\\[240px\\]{height:240px}.h-\\[44px\\]{height:44px}.h-\\[56px\\]{height:56px}.h-\\[96px\\]{height:96px}.w-\\[240px\\]{width:240px}.w-\\[44px\\]{width:44px}.w-\\[56px\\]{width:56px}.w-\\[96px\\]{width:96px}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-full{border-radius:9999px}.rounded-xxl{border-radius:18.75rem}.bg-surface-on-body{background-color:var(--color-surface-on-body)}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-5xl{font-size:3rem;line-height:1}.font-bold{font-weight:700}.text-text-primary{color:var(--color-text-primary)}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";
 const SulaAvatar$1 = /*@__PURE__*/ proxyCustomElement(class SulaAvatar extends H {
     constructor() {
@@ -31,7 +30,7 @@ const SulaAvatar$1 = /*@__PURE__*/ proxyCustomElement(class SulaAvatar extends H
                 'w-[240px] h-[240px] text-5xl': this.size === SulaAvatarSize.Display,
             } }, h("div", { key: '31ada4445c02941bde050b363b235a4a2efae932' }, this.imageUrl && h("img", { key: '583d6f48956bae64ba204ad25f82a5d04384812b', class: "rounded-full", src: this.imageUrl, alt: this.text })), h("div", { key: '7a3c501172205d61012c47a900a9a8032be03e09' }, this.icon && !this.imageUrl && h("sula-icon", { key: 'b03307fe2986405dd8617e88632702bae007f93b', icon: this.icon })), h("div", { key: '79e836b8ea66585c13b806198f4b81322ddbf952' }, this.text && !this.imageUrl && !this.icon && h("span", { key: 'e7f47e2a205545c42a168bd76d4838c06426731b' }, this.text)))));
     }
-    static get style() { return SulaAvatarStyle0; }
+    static get style() { return sulaAvatarCss; }
 }, [1, "sula-avatar", {
         "size": [1],
         "imageUrl": [1, "image-url"],
@@ -62,5 +61,6 @@ const SulaAvatar = SulaAvatar$1;
 const defineCustomElement = defineCustomElement$1;
 export { SulaAvatar, defineCustomElement };
+//# sourceMappingURL=sula-avatar.js.map
 //# sourceMappingURL=sula-avatar.js.map

package/dist/components/sula-avatar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"sula-avatar.js","mappings":";;;AAAA,IAAY,cAKX;AALD,~~WAAY~~,cAAc;~~IACxB~~,~~iCAAe~~,CAAA;~~IACf~~,~~mCAAiB~~,CAAA;~~IACjB~~,~~iCAAe~~,CAAA;~~IACf~~,~~qCAAmB~~,CAAA;AACrB,CAAC,EALW,cAAc,KAAd,cAAc;;~~ACA1B~~,MAAM,aAAa,GAAG,~~g7RAAg7R~~,~~CAAC~~;~~AACv8R~~,~~yBAAe~~,~~aAAa~~;;~~MCOfA,YAAU~~;~~IALvB;;;;;;;QAUE~~,~~SAAI~~,GAAmB,cAAc,CAAC,MAAM~~,CAAC~~;~~KAuC9C~~;IAnBC,MAAM;QACJ,QACE,EAAC,IAAI,~~uDACH~~,~~4DACE~~,KAAK,EAAE;~~gBACL~~,6FAA6F,EAAE,IAAI;~~gBACnG~~,4BAA4B,EAAE,IAAI,CAAC,IAAI,KAAK,cAAc,CAAC,KAAK;~~gBAChE~~,4BAA4B,EAAE,IAAI,CAAC,IAAI,KAAK,cAAc,CAAC,MAAM;~~gBACjE~~,4BAA4B,EAAE,IAAI,CAAC,IAAI,KAAK,cAAc,CAAC,KAAK;~~gBAChE~~,8BAA8B,EAAE,IAAI,CAAC,IAAI,KAAK,cAAc,CAAC,OAAO;aACrE,~~IAED~~,~~8DAAM~~,IAAI,CAAC,QAAQ,IAAI,4DAAK,KAAK,EAAC,cAAc,EAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,IAAI,~~GAAI~~,CAAO,EAC9F,~~8DAAM~~,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,~~kEAAW~~,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CAAO,EAC1E,~~8DAAM~~,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI~~,+DAAO~~,IAAI,CAAC,IAAI,CAAQ,CAAO,CAC9E,CACD~~,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["SulaAvatar"],"sources":["src/components/sula-avatar/model/sula-avatar.model.ts","src/components/sula-avatar/sula-avatar.scss?tag=sula-avatar&encapsulation=shadow","src/components/sula-avatar/sula-avatar.tsx"],"sourcesContent":["export enum SulaAvatarSize {\n Small = 'small',\n Medium = 'medium',\n Large = 'large',\n Display = 'display',\n}\n",":host {\n display: block;\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { SulaAvatarSize } from './model/sula-avatar.model';\n\n@Component({\n tag: 'sula-avatar',\n styleUrl: 'sula-avatar.scss',\n shadow: true,\n})\nexport class SulaAvatar {\n /*\n Avatar size\n /\n @Prop()\n size: SulaAvatarSize = SulaAvatarSize.Medium;\n\n /\n Avatar image url\n /\n @Prop()\n imageUrl?: string;\n\n /\n Text to display when image is not available\n /\n @Prop()\n text?: string;\n\n /\n Icon to displaywhen image is not set\n */\n @Prop()\n icon?: string;\n\n render() {\n return (\n <Host>\n <div\n class={{\n 'flex justify-center items-center rounded-xxl bg-surface-on-body font-bold text-text-primary': true,\n 'w-[44px] h-[44px] text-2xl': this.size === SulaAvatarSize.Small,\n 'w-[56px] h-[56px] text-3xl': this.size === SulaAvatarSize.Medium,\n 'w-[96px] h-[96px] text-5xl': this.size === SulaAvatarSize.Large,\n 'w-[240px] h-[240px] text-5xl': this.size === SulaAvatarSize.Display,\n }}\n >\n <div>{this.imageUrl && <img class=\"rounded-full\" src={this.imageUrl} alt={this.text} />}</div>\n <div>{this.icon && !this.imageUrl && <sula-icon icon={this.icon} />}</div>\n <div>{this.text && !this.imageUrl && !this.icon && <span>{this.text}</span>}</div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"sula-avatar.js","mappings":";;;AAAA,IAAY,cAKX;AALD,CAAA,UAAY,cAAc,EAAA;AACxB,IAAA,cAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,cAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACjB,IAAA,cAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,cAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACrB,CAAC,EALW,cAAc,KAAd,cAAc,GAKzB,EAAA,CAAA,CAAA;;ACLD,MAAM,aAAa,GAAG,88RAA88R;;MCQv9RA,YAAU,iBAAAC,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AALvB,IAAA,WAAA,GAAA;;;;AAME;;AAEG;AAEH,QAAA,IAAA,CAAA,IAAI,GAAmB,cAAc,CAAC,MAAM;AAuC7C;IAnBC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,6FAA6F,EAAE,IAAI;AACnG,gBAAA,4BAA4B,EAAE,IAAI,CAAC,IAAI,KAAK,cAAc,CAAC,KAAK;AAChE,gBAAA,4BAA4B,EAAE,IAAI,CAAC,IAAI,KAAK,cAAc,CAAC,MAAM;AACjE,gBAAA,4BAA4B,EAAE,IAAI,CAAC,IAAI,KAAK,cAAc,CAAC,KAAK;AAChE,gBAAA,8BAA8B,EAAE,IAAI,CAAC,IAAI,KAAK,cAAc,CAAC,OAAO;aACrE,EAAA,EAED,CAAM,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,QAAQ,IAAI,4DAAK,KAAK,EAAC,cAAc,EAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,IAAI,EAAA,CAAI,CAAO,EAC9F,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAM,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAA,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAW,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CAAO,EAC1E,CAAM,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAO,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,IAAI,CAAQ,CAAO,CAC9E,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SulaAvatar","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sula-avatar/model/sula-avatar.model.ts","src/components/sula-avatar/sula-avatar.scss?tag=sula-avatar&encapsulation=shadow","src/components/sula-avatar/sula-avatar.tsx"],"sourcesContent":["export enum SulaAvatarSize {\n Small = 'small',\n Medium = 'medium',\n Large = 'large',\n Display = 'display',\n}\n",":host {\n display: block;\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { SulaAvatarSize } from './model/sula-avatar.model';\n\n@Component({\n tag: 'sula-avatar',\n styleUrl: 'sula-avatar.scss',\n shadow: true,\n})\nexport class SulaAvatar {\n /*\n Avatar size\n /\n @Prop()\n size: SulaAvatarSize = SulaAvatarSize.Medium;\n\n /\n Avatar image url\n /\n @Prop()\n imageUrl?: string;\n\n /\n Text to display when image is not available\n /\n @Prop()\n text?: string;\n\n /\n Icon to displaywhen image is not set\n */\n @Prop()\n icon?: string;\n\n render() {\n return (\n <Host>\n <div\n class={{\n 'flex justify-center items-center rounded-xxl bg-surface-on-body font-bold text-text-primary': true,\n 'w-[44px] h-[44px] text-2xl': this.size === SulaAvatarSize.Small,\n 'w-[56px] h-[56px] text-3xl': this.size === SulaAvatarSize.Medium,\n 'w-[96px] h-[96px] text-5xl': this.size === SulaAvatarSize.Large,\n 'w-[240px] h-[240px] text-5xl': this.size === SulaAvatarSize.Display,\n }}\n >\n <div>{this.imageUrl && <img class=\"rounded-full\" src={this.imageUrl} alt={this.text} />}</div>\n <div>{this.icon && !this.imageUrl && <sula-icon icon={this.icon} />}</div>\n <div>{this.text && !this.imageUrl && !this.icon && <span>{this.text}</span>}</div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/sula-badge.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-881c6b35.js';
-import { d as defineCustomElement$2 } from './p-b0d1214f.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { d as defineCustomElement$2 } from './p-CEU3PNQs.js';
 var SulaBadgeStatus;
 (function (SulaBadgeStatus) {
@@ -24,8 +24,7 @@ var SulaBadgeType;
     SulaBadgeType["Dot"] = "dot";
 })(SulaBadgeType || (SulaBadgeType = {}));
-const sulaBadgeCss = "*,:after,:before{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/:after,:before{--tw-content:\"\"}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.block{display:block}:host{display:block}:root{--color-green-50:#f1f9f4;--color-green-100:#e6f4ed;--color-green-200:#cae7d8;--color-green-300:#a0d4b8;--color-green-400:#68bb8e;--color-green-500:#04843f;--color-green-600:#037236;--color-green-700:#03632f;--color-green-800:#035428;--color-green-900:#024521;--color-green-950:#02361a;--color-red-50:#fef6f6;--color-red-100:#fde8e8;--color-red-200:#fad1d1;--color-red-300:#f7abab;--color-red-400:#f17474;--color-red-500:#c80505;--color-red-600:#b30404;--color-red-700:#9f0404;--color-red-800:#860303;--color-red-900:#6d0303;--color-red-950:#500202;--color-yellow-50:#fdf4e7;--color-yellow-100:#fcedd9;--color-yellow-200:#fae0bd;--color-yellow-300:#f6c788;--color-yellow-400:#f3b159;--color-yellow-500:#ef9928;--color-yellow-600:#e49226;--color-yellow-700:#d17e10;--color-yellow-800:#b46d0e;--color-yellow-900:#93590b;--color-yellow-950:#683f08;--color-orange-50:#fef4f1;--color-orange-100:#fde8e2;--color-orange-200:#fbd2c6;--color-orange-300:#f8b4a0;--color-orange-400:#f58e70;--color-orange-500:#f05223;--color-orange-600:#ea4210;--color-orange-700:#d23b0e;--color-orange-800:#b5330c;--color-orange-900:#942a0a;--color-orange-950:#691e07;--color-blue-50:#ecf0f9;--color-blue-100:#dde3f4;--color-blue-200:#b2c2e5;--color-blue-300:#7994d2;--color-blue-400:#4066bf;--color-blue-500:#001e64;--color-blue-600:#001c5c;--color-blue-700:#00174c;--color-blue-800:#00123d;--color-blue-900:#000f33;--color-blue-950:#000d2b;--color-ambar-50:#fff6eb;--color-ambar-100:#ffefdc;--color-ambar-200:#fedfb9;--color-ambar-300:#fdca8b;--color-ambar-400:#fdb359;--color-ambar-500:#fc9c26;--color-ambar-600:#ec8403;--color-ambar-700:#d87803;--color-ambar-800:#ba6803;--color-ambar-900:#975402;--color-ambar-950:#6a3b01;--color-gray-50:#fff;--color-gray-100:#f4f4f4;--color-gray-200:#e6e6e6;--color-gray-300:#c3c3c3;--color-gray-400:#b9b9b9;--color-gray-500:#949494;--color-gray-600:#737373;--color-gray-700:#5c5c5c;--color-gray-800:#323232;--color-gray-900:#292929;--color-gray-950:#141414;--color-white-opacity-50:#ffffff0d;--color-white-opacity-100:#ffffff1a;--color-white-opacity-200:#ffffff26;--color-white-opacity-300:#ffffff45;--color-white-opacity-400:#ffffff5c;--color-white-opacity-500:#ffffff80;--color-white-opacity-600:#ffffff8c;--color-white-opacity-700:#ffffffa3;--color-white-opacity-800:#ffffffba;--color-white-opacity-900:#fffc;--color-white-opacity-950:#ffffffe8;--color-ciano-50:#f1f6fe;--color-ciano-100:#dfeafc;--color-ciano-200:#c3d9f9;--color-ciano-300:#90b9f4;--color-ciano-400:#5d98ee;--color-ciano-500:#1769e0;--color-ciano-600:#155fcb;--color-ciano-700:#1355b4;--color-ciano-800:#104899;--color-ciano-900:#0d3b7d;--color-ciano-950:#0a2e61;--color-extra-color-blue-light:#e7f0f4;--color-extra-color-blue-dark:#162931;--color-black-opacity-50:#14141405;--color-black-opacity-100:#1414141a;--color-black-opacity-200:#14141426;--color-black-opacity-300:#14141445;--color-black-opacity-400:#1414145c;--color-black-opacity-500:#14141480;--color-black-opacity-600:#1414148c;--color-black-opacity-700:#141414a3;--color-black-opacity-800:#141414ba;--color-black-opacity-900:#141414cc;--color-black-opacity-950:#141414e8;--color-feedback-success:#04843f;--color-feedback-error:#c80505;--color-feedback-informational:#1355b4;--color-feedback-alert:#ef9928;--color-brand-primary:#f05223;--color-brand-secondary:#001c5c;--color-brand-tertiary-1:#1769e0;--color-brand-tertiary-2:#fc9c26;--color-surface-body:#fff;--color-surface-on-body:#f4f4f4;--color-surface-on-body-blue:#e7f0f4;--color-surface-on-body-brand:#fff6eb;--color-surface-on-body-feedback-success:#e6f4ed;--color-surface-on-body-feedback-error:#fde8e8;--color-surface-on-body-feedback-alert:#fdf4e7;--color-surface-on-body-feedback-info:#dfeafc;--color-text-brand:#f05223;--color-text-primary:#323232;--color-text-secondary:#5c5c5c;--color-text-disabled:#949494;--color-text-link:#1355b4;--color-states-empty-bg-hover:#1414141a;--color-states-empty-bg-pressed:#14141426;--color-states-bg-disabled:#14141405;--color-states-bg-focus:#1355b4;--color-states-primary-hover:#ea4210;--color-states-primary-pressed:#d23b0e;--color-states-danger-hover:#b30404;--color-states-danger-pressed:#9f0404;--color-states-negative-hover:#e6e6e6;--color-states-negative-pressed:#c3c3c3;--color-icon-primary:#5c5c5c;--color-icon-secondary:#fff;--color-icon-disabled:#b9b9b9;--color-neutral-neutral-1:#fff;--color-neutral-neutral-2:#f4f4f4;--color-neutral-neutral-3:#b9b9b9;--color-neutral-neutral-4:#949494;--color-neutral-neutral-5:#737373;--color-neutral-neutral-6:#5c5c5c;--color-neutral-neutral-7:#323232;--color-neutral-neutral-8:#292929;--color-negative-negative-1:#fff;--color-negative-negative-2:#323232;--color-opacity-body:#fffc;--color-opacity-on-body:#14141405;--color-opacity-overlay:#1414148c;--color-opacity-on-overlay:#ffffff1a;--color-line-input:#949494;--color-line-general-strong:#c3c3c3;--color-line-general:#e6e6e6}.static{position:static}.absolute{position:absolute}.relative{position:relative}.bottom-\\[-8px\\]{bottom:-8px}.right-0{right:0}.top-0{top:0}.flex{display:flex}.h-12{height:.75rem}.h-\\[20px\\]{height:20px}.h-\\[24px\\]{height:24px}.h-\\[32px\\]{height:32px}.w-fit{width:fit-content}.w-full{width:100%}.min-w-12{min-width:.75rem}.min-w-\\[20px\\]{min-width:20px}.min-w-\\[24px\\]{min-width:24px}.min-w-\\[32px\\]{min-width:32px}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-full{border-radius:9999px}.bg-brand-primary{background-color:var(--color-brand-primary)}.bg-feedback-alert{background-color:var(--color-feedback-alert)}.bg-feedback-error{background-color:var(--color-feedback-error)}.bg-feedback-informational{background-color:var(--color-feedback-informational)}.bg-feedback-success{background-color:var(--color-feedback-success)}.p-0{padding:0}.p-4{padding:.25rem}.px-8{padding-left:.5rem;padding-right:.5rem}.py-2{padding-bottom:.125rem;padding-top:.125rem}.text-base{font-size:1rem;line-height:1.5rem}.font-bold{font-weight:700}.leading-4{line-height:1rem}.text-negative-negative-1{color:var(--color-negative-negative-1)}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";
-const SulaBadgeStyle0 = sulaBadgeCss;
+const sulaBadgeCss = "*,:after,:before{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/:after,:before{--tw-content:\"\"}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.block{display:block}:host{display:block}:root{--color-green-50:#f1f9f4;--color-green-100:#e6f4ed;--color-green-200:#cae7d8;--color-green-300:#a0d4b8;--color-green-400:#68bb8e;--color-green-500:#04843f;--color-green-600:#037236;--color-green-700:#03632f;--color-green-800:#035428;--color-green-900:#024521;--color-green-950:#02361a;--color-red-50:#fef6f6;--color-red-100:#fde8e8;--color-red-200:#fad1d1;--color-red-300:#f7abab;--color-red-400:#f17474;--color-red-500:#c80505;--color-red-600:#b30404;--color-red-700:#9f0404;--color-red-800:#860303;--color-red-900:#6d0303;--color-red-950:#500202;--color-yellow-50:#fdf4e7;--color-yellow-100:#fcedd9;--color-yellow-200:#fae0bd;--color-yellow-300:#f6c788;--color-yellow-400:#f3b159;--color-yellow-500:#ef9928;--color-yellow-600:#e49226;--color-yellow-700:#d17e10;--color-yellow-800:#b46d0e;--color-yellow-900:#93590b;--color-yellow-950:#683f08;--color-orange-50:#fef4f1;--color-orange-100:#fde8e2;--color-orange-200:#fbd2c6;--color-orange-300:#f8b4a0;--color-orange-400:#f58e70;--color-orange-500:#f05223;--color-orange-600:#ea4210;--color-orange-700:#d23b0e;--color-orange-800:#b5330c;--color-orange-900:#942a0a;--color-orange-950:#691e07;--color-blue-50:#ecf0f9;--color-blue-100:#dde3f4;--color-blue-200:#b2c2e5;--color-blue-300:#7994d2;--color-blue-400:#4066bf;--color-blue-500:#001e64;--color-blue-600:#001c5c;--color-blue-700:#00174c;--color-blue-800:#00123d;--color-blue-900:#000f33;--color-blue-950:#000d2b;--color-ambar-50:#fff6eb;--color-ambar-100:#ffefdc;--color-ambar-200:#fedfb9;--color-ambar-300:#fdca8b;--color-ambar-400:#fdb359;--color-ambar-500:#fc9c26;--color-ambar-600:#ec8403;--color-ambar-700:#d87803;--color-ambar-800:#ba6803;--color-ambar-900:#975402;--color-ambar-950:#6a3b01;--color-gray-50:#fff;--color-gray-100:#f4f4f4;--color-gray-200:#e6e6e6;--color-gray-300:#c3c3c3;--color-gray-400:#b9b9b9;--color-gray-500:#949494;--color-gray-600:#737373;--color-gray-700:#5c5c5c;--color-gray-800:#323232;--color-gray-900:#292929;--color-gray-950:#141414;--color-white-opacity-50:#ffffff0d;--color-white-opacity-100:#ffffff1a;--color-white-opacity-200:#ffffff26;--color-white-opacity-300:#ffffff45;--color-white-opacity-400:#ffffff5c;--color-white-opacity-500:#ffffff80;--color-white-opacity-600:#ffffff8c;--color-white-opacity-700:#ffffffa3;--color-white-opacity-800:#ffffffba;--color-white-opacity-900:#fffc;--color-white-opacity-950:#ffffffe8;--color-ciano-50:#f1f6fe;--color-ciano-100:#dfeafc;--color-ciano-200:#c3d9f9;--color-ciano-300:#90b9f4;--color-ciano-400:#5d98ee;--color-ciano-500:#1769e0;--color-ciano-600:#155fcb;--color-ciano-700:#1355b4;--color-ciano-800:#104899;--color-ciano-900:#0d3b7d;--color-ciano-950:#0a2e61;--color-extra-color-blue-light:#e7f0f4;--color-extra-color-blue-dark:#162931;--color-black-opacity-50:#14141405;--color-black-opacity-100:#1414141a;--color-black-opacity-200:#14141426;--color-black-opacity-300:#14141445;--color-black-opacity-400:#1414145c;--color-black-opacity-500:#14141480;--color-black-opacity-600:#1414148c;--color-black-opacity-700:#141414a3;--color-black-opacity-800:#141414ba;--color-black-opacity-900:#141414cc;--color-black-opacity-950:#141414e8;--color-feedback-success:#04843f;--color-feedback-error:#c80505;--color-feedback-informational:#1355b4;--color-feedback-alert:#ef9928;--color-brand-primary:#f05223;--color-brand-secondary:#001c5c;--color-brand-tertiary-1:#1769e0;--color-brand-tertiary-2:#fc9c26;--color-surface-body:#fff;--color-surface-on-body:#f4f4f4;--color-surface-on-body-blue:#e7f0f4;--color-surface-on-body-brand:#fff6eb;--color-surface-on-body-feedback-success:#e6f4ed;--color-surface-on-body-feedback-error:#fde8e8;--color-surface-on-body-feedback-alert:#fdf4e7;--color-surface-on-body-feedback-info:#dfeafc;--color-text-brand:#f05223;--color-text-primary:#323232;--color-text-secondary:#5c5c5c;--color-text-disabled:#949494;--color-text-link:#1355b4;--color-states-empty-bg-hover:#1414141a;--color-states-empty-bg-pressed:#14141426;--color-states-bg-disabled:#14141405;--color-states-bg-focus:#1355b4;--color-states-primary-hover:#ea4210;--color-states-primary-pressed:#d23b0e;--color-states-danger-hover:#b30404;--color-states-danger-pressed:#9f0404;--color-states-negative-hover:#e6e6e6;--color-states-negative-pressed:#c3c3c3;--color-icon-primary:#5c5c5c;--color-icon-secondary:#fff;--color-icon-tertiary:#b30404;--color-icon-disabled:#b9b9b9;--color-neutral-neutral-1:#fff;--color-neutral-neutral-2:#f4f4f4;--color-neutral-neutral-3:#b9b9b9;--color-neutral-neutral-4:#949494;--color-neutral-neutral-5:#737373;--color-neutral-neutral-6:#5c5c5c;--color-neutral-neutral-7:#323232;--color-neutral-neutral-8:#292929;--color-negative-negative-1:#fff;--color-negative-negative-2:#323232;--color-opacity-body:#fffc;--color-opacity-on-body:#14141405;--color-opacity-overlay:#1414148c;--color-opacity-on-overlay:#ffffff1a;--color-line-input:#949494;--color-line-general-strong:#c3c3c3;--color-line-general:#e6e6e6}.static{position:static}.absolute{position:absolute}.relative{position:relative}.bottom-\\[-8px\\]{bottom:-8px}.right-0{right:0}.top-0{top:0}.flex{display:flex}.h-12{height:.75rem}.h-\\[20px\\]{height:20px}.h-\\[24px\\]{height:24px}.h-\\[32px\\]{height:32px}.w-fit{width:fit-content}.w-full{width:100%}.min-w-12{min-width:.75rem}.min-w-\\[20px\\]{min-width:20px}.min-w-\\[24px\\]{min-width:24px}.min-w-\\[32px\\]{min-width:32px}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-full{border-radius:9999px}.bg-brand-primary{background-color:var(--color-brand-primary)}.bg-feedback-alert{background-color:var(--color-feedback-alert)}.bg-feedback-error{background-color:var(--color-feedback-error)}.bg-feedback-informational{background-color:var(--color-feedback-informational)}.bg-feedback-success{background-color:var(--color-feedback-success)}.p-0{padding:0}.p-4{padding:.25rem}.px-8{padding-left:.5rem;padding-right:.5rem}.py-2{padding-bottom:.125rem;padding-top:.125rem}.text-base{font-size:1rem;line-height:1.5rem}.font-bold{font-weight:700}.leading-4{line-height:1rem}.text-negative-negative-1{color:var(--color-negative-negative-1)}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";
 const SulaBadge$1 = /*@__PURE__*/ proxyCustomElement(class SulaBadge extends H {
     constructor() {
@@ -117,7 +116,7 @@ const SulaBadge$1 = /*@__PURE__*/ proxyCustomElement(class SulaBadge extends H {
             } }, this.icon && h("sula-icon", { key: 'cde6ab5506774e2a12e5cbfaeb0950eb7f57dd00', icon: this.icon, customClass: "text-base text-negative-negative-1" }), this.text && h("div", { key: '0ee0126995714eb03a37554c6726e11f942c084f', class: "font-bold text-base leading-4 text-negative-negative-1" }, this.text))), h("slot", { key: 'fa357b2a05a7d8f7a27274637f2b5e30deeb9699', ref: el => (this.slotRef = el) }))));
     }
     get hostElement() { return this; }
-    static get style() { return SulaBadgeStyle0; }
+    static get style() { return sulaBadgeCss; }
 }, [1, "sula-badge", {
         "status": [1025],
         "size": [1025],
@@ -150,5 +149,6 @@ const SulaBadge = SulaBadge$1;
 const defineCustomElement = defineCustomElement$1;
 export { SulaBadge, defineCustomElement };
+//# sourceMappingURL=sula-badge.js.map
 //# sourceMappingURL=sula-badge.js.map

package/dist/components/sula-badge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"sula-badge.js","mappings":";;;AAAA,IAAY,eAOX;AAPD,~~WAAY~~,eAAe;~~IACzB~~,~~sCAAmB~~,CAAA;~~IACnB~~,~~kCAAe~~,CAAA;~~IACf~~,~~gCAAa~~,CAAA;~~IACb~~,~~kCAAe~~,CAAA;~~IACf~~,~~sCAAmB~~,CAAA;~~IACnB~~,~~sCAAmB~~,CAAA;AACrB,CAAC,EAPW,eAAe,KAAf,eAAe,~~QAO1B~~;AAED,IAAY,aAKX;AALD,~~WAAY~~,aAAa;~~IACvB~~,~~gCAAe~~,CAAA;~~IACf~~,~~kCAAiB~~,CAAA;~~IACjB~~,~~gCAAe~~,CAAA;~~IACf~~,~~oCAAmB~~,CAAA;AACrB,CAAC,EALW,aAAa,KAAb,aAAa,~~QAKxB~~;AAED,IAAY,aAIX;AAJD,~~WAAY~~,aAAa;~~IACvB~~,~~8BAAa~~,CAAA;~~IACb~~,~~8BAAa~~,CAAA;~~IACb~~,~~4BAAW~~,CAAA;AACb,CAAC,EAJW,aAAa,KAAb,aAAa;;~~AChBzB~~,MAAM,YAAY,GAAG,~~i6SAAi6S~~,~~CAAC~~;~~AACv7S~~,~~wBAAe~~,~~YAAY~~;;~~MCOdA,WAAS~~;~~IALtB;;;;;;;QAW2B~~,~~WAAM~~,GAAoB,eAAe,CAAC,OAAO,~~CAAC;;;;QAKlD~~,~~SAAI~~,GAAkB,aAAa,CAAC,MAAM,~~CAAC;;;;QAK3C~~,~~SAAI~~,GAAkB,aAAa,CAAC,IAAI,~~CAAC;;;;QAKzC~~,~~SAAI~~,GAAW,EAAE,~~CAAC;;;;QAKlB~~,~~SAAI~~,GAAW,EAAE~~,CAAC~~;~~QAK3C~~,~~mBAAc~~,GAAY,KAAK~~,CAAC~~;~~KA2FjC~~;IAzFC,gBAAgB;QACd,IAAI,CAAC,gBAAgB,EAAE,~~CAAC;KACzB;IAED~~,~~gBAAgB~~;~~QACd~~,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,EAAE~~,CAAC~~;~~YAEnD~~,MAAM,UAAU,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI;~~gBACxC~~,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,EAAE;oBACpC,OAAO,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,EAAE,~~CAAC;iBACvC;gBACD~~,OAAO,IAAI~~,CAAC~~;~~aACb~~,~~CAAC~~,CAAC;~~YAEH~~,IAAI,CAAC,cAAc,GAAG,UAAU,~~CAAC;SAClC;KACF;IAED~~,~~YAAY~~;~~QACV~~,MAAM,UAAU,GAAG;~~YACjB~~,CAAC,aAAa,CAAC,KAAK,GAAG,eAAe;~~YACtC~~,CAAC,aAAa,CAAC,MAAM,GAAG,uBAAuB;~~YAC~~/C,CAAC,aAAa,CAAC,KAAK,GAAG,uBAAuB;~~YAC9C~~,CAAC,aAAa,CAAC,OAAO,GAAG,uBAAuB;SACjD~~,CAAC~~;~~QAEF~~,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,~~CAAC;KAC9B;IAED~~,~~gBAAgB~~;~~QACd~~,MAAM,aAAa,GAAG;~~YACpB~~,CAAC,aAAa,CAAC,GAAG,GAAG,KAAK;YAC1B,CAAC,aAAa,CAAC,IAAI,GAAG,IAAI,CAAC,oBAAoB,EAAE;~~YACjD~~,CAAC,aAAa,CAAC,IAAI,GAAG,KAAK;SAC5B~~,CAAC~~;~~QACF~~,OAAO,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,~~CAAC;KACjC;IAED~~,~~oBAAoB~~;~~QAClB~~,MAAM,aAAa,GAAG;~~YACpB~~,CAAC,aAAa,CAAC,KAAK,GAAG,KAAK;~~YAC5B~~,CAAC,aAAa,CAAC,MAAM,GAAG,KAAK;~~YAC7B~~,CAAC,aAAa,CAAC,KAAK,GAAG,WAAW;~~YAClC~~,CAAC,aAAa,CAAC,OAAO,GAAG,WAAW;SACrC~~,CAAC~~;~~QAEF~~,OAAO,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,~~CAAC;KACjC;IAED~~,~~cAAc~~;~~QACZ~~,MAAM,YAAY,GAAG;~~YACnB~~,CAAC,eAAe,CAAC,OAAO,GAAG,kBAAkB;~~YAC7C~~,CAAC,eAAe,CAAC,KAAK,GAAG,mBAAmB;~~YAC5C~~,CAAC,eAAe,CAAC,IAAI,GAAG,2BAA2B;~~YACnD~~,CAAC,eAAe,CAAC,OAAO,GAAG,qBAAqB;~~YAChD~~,CAAC,eAAe,CAAC,OAAO,GAAG,mBAAmB;SAC/C~~,CAAC~~;~~QAEF~~,OAAO,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,~~CAAC;KAClC;IAED~~,~~MAAM~~;~~QACJ~~,QACE,EAAC,IAAI,~~uDACH~~,~~4DAAK~~,KAAK,EAAC,qBAAqB,~~IAC9B~~,~~4DACE~~,KAAK,EAAE;gBACL,wBAAwB,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,aAAa,CAAC,GAAG,IAAI,IAAI,CAAC,IAAI,KAAK,aAAa,CAAC,IAAI,KAAK,IAAI,CAAC,cAAc;gBACtH,gEAAgE,EAAE,IAAI,CAAC,IAAI,KAAK,aAAa,CAAC,IAAI,IAAI,IAAI,CAAC,cAAc;aAC1H,~~IAED~~,~~4DACE~~,KAAK,EAAE;~~gBACL~~,CAAC,IAAI,CAAC,YAAY,EAAE,GAAG,IAAI;~~gBAC3B~~,CAAC,IAAI,CAAC,cAAc,EAAE,GAAG,IAAI;~~gBAC7B~~,CAAC,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI;~~gBAC~~/B,+CAA+C,EAAE,IAAI;~~aACtD~~,~~IAEA~~,IAAI,CAAC,IAAI,IAAI,~~kEAAW~~,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,WAAW,EAAC,oCAAoC,~~GAAa~~,EACtG,IAAI,CAAC,IAAI,IAAI,~~4DAAK~~,KAAK,EAAC,wDAAwD,~~IAAE~~,IAAI,CAAC,IAAI,CAAO,CAC/F,CACF,EACN,~~6DAAM~~,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAqB,CAAC,GAAS,CAC5D,CACD~~,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["SulaBadge"],"sources":["src/components/sula-badge/model/sula-badge.model.ts","src/components/sula-badge/sula-badge.scss?tag=sula-badge&encapsulation=shadow","src/components/sula-badge/sula-badge.tsx"],"sourcesContent":["export enum SulaBadgeStatus {\n Default = 'default',\n Money = 'money',\n Info = 'info',\n Error = 'error',\n Success = 'success',\n Warning = 'warning',\n}\n\nexport enum SulaBadgeSize {\n Small = 'small',\n Medium = 'medium',\n Large = 'large',\n Display = 'display',\n} \n\nexport enum SulaBadgeType {\n Text = 'text',\n Icon = 'icon',\n Dot = 'dot',\n}\n ",":host {\n display: block;\n}\n","import { Component, Host, Prop, h, Element, State } from '@stencil/core';\nimport { SulaBadgeSize, SulaBadgeStatus, SulaBadgeType } from './model/sula-badge.model';\n\n@Component({\n tag: 'sula-badge',\n styleUrl: 'sula-badge.scss',\n shadow: true,\n})\nexport class SulaBadge {\n @Element() hostElement: HTMLElement;\n\n /*\n Badge status\n /\n @Prop({ mutable: true }) status: SulaBadgeStatus = SulaBadgeStatus.Default;\n\n /\n Badge size\n /\n @Prop({ mutable: true }) size: SulaBadgeSize = SulaBadgeSize.Medium;\n\n /\n Badge type\n /\n @Prop({ mutable: true }) type: SulaBadgeType = SulaBadgeType.Text;\n\n /\n Badge text\n /\n @Prop({ mutable: true }) text: string = '';\n\n /\n Badge icon\n */\n @Prop({ mutable: true }) icon: string = '';\n\n slotRef?: HTMLSlotElement;\n\n @State()\n hasSlotContent: boolean = false;\n\n componentDidLoad() {\n this.checkSlotContent();\n }\n\n checkSlotContent() {\n if (this.slotRef) {\n const assignedNodes = this.slotRef.assignedNodes();\n\n const hasContent = assignedNodes.some(node => {\n if (node.nodeType === Node.TEXT_NODE) {\n return node.textContent.trim() !== '';\n }\n return true;\n });\n\n this.hasSlotContent = hasContent;\n }\n }\n\n getSizeClass() {\n const sizeStyles = {\n [SulaBadgeSize.Small]: 'min-w-12 h-12',\n [SulaBadgeSize.Medium]: 'min-w-[20px] h-[20px]',\n [SulaBadgeSize.Large]: 'min-w-[24px] h-[24px]',\n [SulaBadgeSize.Display]: 'min-w-[32px] h-[32px]',\n };\n\n return sizeStyles[this.size];\n }\n\n getPaddingByType() {\n const paddingStyles = {\n [SulaBadgeType.Dot]: 'p-0',\n [SulaBadgeType.Text]: this.getTextPaddingBySize(),\n [SulaBadgeType.Icon]: 'p-4',\n };\n return paddingStyles[this.type];\n }\n\n getTextPaddingBySize() {\n const paddingStyles = {\n [SulaBadgeSize.Small]: 'p-4',\n [SulaBadgeSize.Medium]: 'p-4',\n [SulaBadgeSize.Large]: 'px-8 py-2',\n [SulaBadgeSize.Display]: 'px-8 py-2',\n };\n\n return paddingStyles[this.size];\n }\n\n getStatusClass() {\n const statusStyles = {\n [SulaBadgeStatus.Default]: 'bg-brand-primary',\n [SulaBadgeStatus.Error]: 'bg-feedback-error',\n [SulaBadgeStatus.Info]: 'bg-feedback-informational',\n [SulaBadgeStatus.Success]: 'bg-feedback-success',\n [SulaBadgeStatus.Warning]: 'bg-feedback-alert',\n };\n\n return statusStyles[this.status];\n }\n\n render() {\n return (\n <Host>\n <div class=\"relative flex w-fit\">\n <div\n class={{\n 'absolute top-0 right-0': (this.type === SulaBadgeType.Dot \|\| this.type === SulaBadgeType.Icon) && this.hasSlotContent,\n 'absolute bottom-[-8px] flex w-full justify-center items-center': this.type === SulaBadgeType.Text && this.hasSlotContent,\n }}\n >\n <div\n class={{\n [this.getSizeClass()]: true,\n [this.getStatusClass()]: true,\n [this.getPaddingByType()]: true,\n 'rounded-full flex justify-center items-center': true,\n }}\n >\n {this.icon && <sula-icon icon={this.icon} customClass=\"text-base text-negative-negative-1\"></sula-icon>}\n {this.text && <div class=\"font-bold text-base leading-4 text-negative-negative-1\">{this.text}</div>}\n </div>\n </div>\n <slot ref={el => (this.slotRef = el as HTMLSlotElement)}></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"sula-badge.js","mappings":"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","names":["SulaBadge","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sula-badge/model/sula-badge.model.ts","src/components/sula-badge/sula-badge.scss?tag=sula-badge&encapsulation=shadow","src/components/sula-badge/sula-badge.tsx"],"sourcesContent":["export enum SulaBadgeStatus {\n Default = 'default',\n Money = 'money',\n Info = 'info',\n Error = 'error',\n Success = 'success',\n Warning = 'warning',\n}\n\nexport enum SulaBadgeSize {\n Small = 'small',\n Medium = 'medium',\n Large = 'large',\n Display = 'display',\n} \n\nexport enum SulaBadgeType {\n Text = 'text',\n Icon = 'icon',\n Dot = 'dot',\n}\n ",":host {\n display: block;\n}\n","import { Component, Host, Prop, h, Element, State } from '@stencil/core';\nimport { SulaBadgeSize, SulaBadgeStatus, SulaBadgeType } from './model/sula-badge.model';\n\n@Component({\n tag: 'sula-badge',\n styleUrl: 'sula-badge.scss',\n shadow: true,\n})\nexport class SulaBadge {\n @Element() hostElement: HTMLElement;\n\n /*\n Badge status\n /\n @Prop({ mutable: true }) status: SulaBadgeStatus = SulaBadgeStatus.Default;\n\n /\n Badge size\n /\n @Prop({ mutable: true }) size: SulaBadgeSize = SulaBadgeSize.Medium;\n\n /\n Badge type\n /\n @Prop({ mutable: true }) type: SulaBadgeType = SulaBadgeType.Text;\n\n /\n Badge text\n /\n @Prop({ mutable: true }) text: string = '';\n\n /\n Badge icon\n */\n @Prop({ mutable: true }) icon: string = '';\n\n slotRef?: HTMLSlotElement;\n\n @State()\n hasSlotContent: boolean = false;\n\n componentDidLoad() {\n this.checkSlotContent();\n }\n\n checkSlotContent() {\n if (this.slotRef) {\n const assignedNodes = this.slotRef.assignedNodes();\n\n const hasContent = assignedNodes.some(node => {\n if (node.nodeType === Node.TEXT_NODE) {\n return node.textContent.trim() !== '';\n }\n return true;\n });\n\n this.hasSlotContent = hasContent;\n }\n }\n\n getSizeClass() {\n const sizeStyles = {\n [SulaBadgeSize.Small]: 'min-w-12 h-12',\n [SulaBadgeSize.Medium]: 'min-w-[20px] h-[20px]',\n [SulaBadgeSize.Large]: 'min-w-[24px] h-[24px]',\n [SulaBadgeSize.Display]: 'min-w-[32px] h-[32px]',\n };\n\n return sizeStyles[this.size];\n }\n\n getPaddingByType() {\n const paddingStyles = {\n [SulaBadgeType.Dot]: 'p-0',\n [SulaBadgeType.Text]: this.getTextPaddingBySize(),\n [SulaBadgeType.Icon]: 'p-4',\n };\n return paddingStyles[this.type];\n }\n\n getTextPaddingBySize() {\n const paddingStyles = {\n [SulaBadgeSize.Small]: 'p-4',\n [SulaBadgeSize.Medium]: 'p-4',\n [SulaBadgeSize.Large]: 'px-8 py-2',\n [SulaBadgeSize.Display]: 'px-8 py-2',\n };\n\n return paddingStyles[this.size];\n }\n\n getStatusClass() {\n const statusStyles = {\n [SulaBadgeStatus.Default]: 'bg-brand-primary',\n [SulaBadgeStatus.Error]: 'bg-feedback-error',\n [SulaBadgeStatus.Info]: 'bg-feedback-informational',\n [SulaBadgeStatus.Success]: 'bg-feedback-success',\n [SulaBadgeStatus.Warning]: 'bg-feedback-alert',\n };\n\n return statusStyles[this.status];\n }\n\n render() {\n return (\n <Host>\n <div class=\"relative flex w-fit\">\n <div\n class={{\n 'absolute top-0 right-0': (this.type === SulaBadgeType.Dot \|\| this.type === SulaBadgeType.Icon) && this.hasSlotContent,\n 'absolute bottom-[-8px] flex w-full justify-center items-center': this.type === SulaBadgeType.Text && this.hasSlotContent,\n }}\n >\n <div\n class={{\n [this.getSizeClass()]: true,\n [this.getStatusClass()]: true,\n [this.getPaddingByType()]: true,\n 'rounded-full flex justify-center items-center': true,\n }}\n >\n {this.icon && <sula-icon icon={this.icon} customClass=\"text-base text-negative-negative-1\"></sula-icon>}\n {this.text && <div class=\"font-bold text-base leading-4 text-negative-negative-1\">{this.text}</div>}\n </div>\n </div>\n <slot ref={el => (this.slotRef = el as HTMLSlotElement)}></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/sula-button.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-881c6b35.js';
-import { d as defineCustomElement$2 } from './p-b0d1214f.js';
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+import { d as defineCustomElement$2 } from './p-CEU3PNQs.js';
 var SulaButtonAppearance;
 (function (SulaButtonAppearance) {
@@ -25,15 +25,14 @@ var SulaButtonType;
     SulaButtonType["Text"] = "text";
 })(SulaButtonType || (SulaButtonType = {}));
-const sulaButtonCss = "*,:after,:before{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/:after,:before{--tw-content:\"\"}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.block{display:block}.outline{outline-style:solid}:host{display:block}button:focus{outline:2px solid var(--color-feedback-informational)!important;outline-offset:2px!important}:root{--color-green-50:#f1f9f4;--color-green-100:#e6f4ed;--color-green-200:#cae7d8;--color-green-300:#a0d4b8;--color-green-400:#68bb8e;--color-green-500:#04843f;--color-green-600:#037236;--color-green-700:#03632f;--color-green-800:#035428;--color-green-900:#024521;--color-green-950:#02361a;--color-red-50:#fef6f6;--color-red-100:#fde8e8;--color-red-200:#fad1d1;--color-red-300:#f7abab;--color-red-400:#f17474;--color-red-500:#c80505;--color-red-600:#b30404;--color-red-700:#9f0404;--color-red-800:#860303;--color-red-900:#6d0303;--color-red-950:#500202;--color-yellow-50:#fdf4e7;--color-yellow-100:#fcedd9;--color-yellow-200:#fae0bd;--color-yellow-300:#f6c788;--color-yellow-400:#f3b159;--color-yellow-500:#ef9928;--color-yellow-600:#e49226;--color-yellow-700:#d17e10;--color-yellow-800:#b46d0e;--color-yellow-900:#93590b;--color-yellow-950:#683f08;--color-orange-50:#fef4f1;--color-orange-100:#fde8e2;--color-orange-200:#fbd2c6;--color-orange-300:#f8b4a0;--color-orange-400:#f58e70;--color-orange-500:#f05223;--color-orange-600:#ea4210;--color-orange-700:#d23b0e;--color-orange-800:#b5330c;--color-orange-900:#942a0a;--color-orange-950:#691e07;--color-blue-50:#ecf0f9;--color-blue-100:#dde3f4;--color-blue-200:#b2c2e5;--color-blue-300:#7994d2;--color-blue-400:#4066bf;--color-blue-500:#001e64;--color-blue-600:#001c5c;--color-blue-700:#00174c;--color-blue-800:#00123d;--color-blue-900:#000f33;--color-blue-950:#000d2b;--color-ambar-50:#fff6eb;--color-ambar-100:#ffefdc;--color-ambar-200:#fedfb9;--color-ambar-300:#fdca8b;--color-ambar-400:#fdb359;--color-ambar-500:#fc9c26;--color-ambar-600:#ec8403;--color-ambar-700:#d87803;--color-ambar-800:#ba6803;--color-ambar-900:#975402;--color-ambar-950:#6a3b01;--color-gray-50:#fff;--color-gray-100:#f4f4f4;--color-gray-200:#e6e6e6;--color-gray-300:#c3c3c3;--color-gray-400:#b9b9b9;--color-gray-500:#949494;--color-gray-600:#737373;--color-gray-700:#5c5c5c;--color-gray-800:#323232;--color-gray-900:#292929;--color-gray-950:#141414;--color-white-opacity-50:#ffffff0d;--color-white-opacity-100:#ffffff1a;--color-white-opacity-200:#ffffff26;--color-white-opacity-300:#ffffff45;--color-white-opacity-400:#ffffff5c;--color-white-opacity-500:#ffffff80;--color-white-opacity-600:#ffffff8c;--color-white-opacity-700:#ffffffa3;--color-white-opacity-800:#ffffffba;--color-white-opacity-900:#fffc;--color-white-opacity-950:#ffffffe8;--color-ciano-50:#f1f6fe;--color-ciano-100:#dfeafc;--color-ciano-200:#c3d9f9;--color-ciano-300:#90b9f4;--color-ciano-400:#5d98ee;--color-ciano-500:#1769e0;--color-ciano-600:#155fcb;--color-ciano-700:#1355b4;--color-ciano-800:#104899;--color-ciano-900:#0d3b7d;--color-ciano-950:#0a2e61;--color-extra-color-blue-light:#e7f0f4;--color-extra-color-blue-dark:#162931;--color-black-opacity-50:#14141405;--color-black-opacity-100:#1414141a;--color-black-opacity-200:#14141426;--color-black-opacity-300:#14141445;--color-black-opacity-400:#1414145c;--color-black-opacity-500:#14141480;--color-black-opacity-600:#1414148c;--color-black-opacity-700:#141414a3;--color-black-opacity-800:#141414ba;--color-black-opacity-900:#141414cc;--color-black-opacity-950:#141414e8;--color-feedback-success:#04843f;--color-feedback-error:#c80505;--color-feedback-informational:#1355b4;--color-feedback-alert:#ef9928;--color-brand-primary:#f05223;--color-brand-secondary:#001c5c;--color-brand-tertiary-1:#1769e0;--color-brand-tertiary-2:#fc9c26;--color-surface-body:#fff;--color-surface-on-body:#f4f4f4;--color-surface-on-body-blue:#e7f0f4;--color-surface-on-body-brand:#fff6eb;--color-surface-on-body-feedback-success:#e6f4ed;--color-surface-on-body-feedback-error:#fde8e8;--color-surface-on-body-feedback-alert:#fdf4e7;--color-surface-on-body-feedback-info:#dfeafc;--color-text-brand:#f05223;--color-text-primary:#323232;--color-text-secondary:#5c5c5c;--color-text-disabled:#949494;--color-text-link:#1355b4;--color-states-empty-bg-hover:#1414141a;--color-states-empty-bg-pressed:#14141426;--color-states-bg-disabled:#14141405;--color-states-bg-focus:#1355b4;--color-states-primary-hover:#ea4210;--color-states-primary-pressed:#d23b0e;--color-states-danger-hover:#b30404;--color-states-danger-pressed:#9f0404;--color-states-negative-hover:#e6e6e6;--color-states-negative-pressed:#c3c3c3;--color-icon-primary:#5c5c5c;--color-icon-secondary:#fff;--color-icon-disabled:#b9b9b9;--color-neutral-neutral-1:#fff;--color-neutral-neutral-2:#f4f4f4;--color-neutral-neutral-3:#b9b9b9;--color-neutral-neutral-4:#949494;--color-neutral-neutral-5:#737373;--color-neutral-neutral-6:#5c5c5c;--color-neutral-neutral-7:#323232;--color-neutral-neutral-8:#292929;--color-negative-negative-1:#fff;--color-negative-negative-2:#323232;--color-opacity-body:#fffc;--color-opacity-on-body:#14141405;--color-opacity-overlay:#1414148c;--color-opacity-on-overlay:#ffffff1a;--color-line-input:#949494;--color-line-general-strong:#c3c3c3;--color-line-general:#e6e6e6}.static{position:static}.flex{display:flex}.h-24{height:1.5rem}.h-\\[40px\\]{height:40px}.h-\\[56px\\]{height:56px}.w-24{width:1.5rem}.min-w-\\[120px\\]{min-width:120px}.min-w-\\[40px\\]{min-width:40px}.min-w-\\[56px\\]{min-width:56px}.items-center{align-items:center}.justify-center{justify-content:center}.space-x-8>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.5rem*var(--tw-space-x-reverse))}.rounded-xs{border-radius:.5rem}.rounded-xxl{border-radius:18.75rem}.border{border-width:1px}.border-none{border-style:none}.border-brand-primary{border-color:var(--color-brand-primary)}.border-feedback-error{border-color:var(--color-feedback-error)}.border-negative-negative-1{border-color:var(--color-negative-negative-1)}.bg-brand-primary{background-color:var(--color-brand-primary)}.bg-feedback-error{background-color:var(--color-feedback-error)}.bg-negative-negative-1{background-color:var(--color-negative-negative-1)}.bg-states-bg-disabled{background-color:var(--color-states-bg-disabled)}.bg-states-empty-bg-hover{background-color:var(--color-states-empty-bg-hover)}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.p-16{padding:1rem}.p-8{padding:.5rem}.px-16{padding-left:1rem;padding-right:1rem}.py-4{padding-bottom:.25rem;padding-top:.25rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.font-bold{font-weight:700}.text-brand-primary{color:var(--color-brand-primary)}.text-feedback-error{color:var(--color-feedback-error)}.text-icon-disabled{color:var(--color-icon-disabled)}.text-icon-primary{color:var(--color-icon-primary)}.text-negative-negative-1{color:var(--color-negative-negative-1)}.text-negative-negative-2{color:var(--color-negative-negative-2)}.text-text-disabled{color:var(--color-text-disabled)}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\\:bg-states-danger-hover:hover{background-color:var(--color-states-danger-hover)}.hover\\:bg-states-empty-bg-hover:hover{background-color:var(--color-states-empty-bg-hover)}.hover\\:bg-states-negative-hover:hover{background-color:var(--color-states-negative-hover)}.hover\\:bg-states-primary-hover:hover{background-color:var(--color-states-primary-hover)}.focus\\:bg-states-empty-bg-hover:focus{background-color:var(--color-states-empty-bg-hover)}.active\\:bg-states-danger-pressed:active{background-color:var(--color-states-danger-pressed)}.active\\:bg-states-empty-bg-pressed:active{background-color:var(--color-states-empty-bg-pressed)}.active\\:bg-states-negative-pressed:active{background-color:var(--color-states-negative-pressed)}.active\\:bg-states-primary-pressed:active{background-color:var(--color-states-primary-pressed)}.active\\:bg-opacity-85:active{--tw-bg-opacity:0.85}.group:hover .group-hover\\:bg-states-empty-bg-hover{background-color:var(--color-states-empty-bg-hover)}";
-const SulaButtonStyle0 = sulaButtonCss;
+const sulaButtonCss = "*,:after,:before{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/:after,:before{--tw-content:\"\"}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.block{display:block}.outline{outline-style:solid}:host{display:block}button:focus{outline:2px solid var(--color-feedback-informational)!important;outline-offset:2px!important}:root{--color-green-50:#f1f9f4;--color-green-100:#e6f4ed;--color-green-200:#cae7d8;--color-green-300:#a0d4b8;--color-green-400:#68bb8e;--color-green-500:#04843f;--color-green-600:#037236;--color-green-700:#03632f;--color-green-800:#035428;--color-green-900:#024521;--color-green-950:#02361a;--color-red-50:#fef6f6;--color-red-100:#fde8e8;--color-red-200:#fad1d1;--color-red-300:#f7abab;--color-red-400:#f17474;--color-red-500:#c80505;--color-red-600:#b30404;--color-red-700:#9f0404;--color-red-800:#860303;--color-red-900:#6d0303;--color-red-950:#500202;--color-yellow-50:#fdf4e7;--color-yellow-100:#fcedd9;--color-yellow-200:#fae0bd;--color-yellow-300:#f6c788;--color-yellow-400:#f3b159;--color-yellow-500:#ef9928;--color-yellow-600:#e49226;--color-yellow-700:#d17e10;--color-yellow-800:#b46d0e;--color-yellow-900:#93590b;--color-yellow-950:#683f08;--color-orange-50:#fef4f1;--color-orange-100:#fde8e2;--color-orange-200:#fbd2c6;--color-orange-300:#f8b4a0;--color-orange-400:#f58e70;--color-orange-500:#f05223;--color-orange-600:#ea4210;--color-orange-700:#d23b0e;--color-orange-800:#b5330c;--color-orange-900:#942a0a;--color-orange-950:#691e07;--color-blue-50:#ecf0f9;--color-blue-100:#dde3f4;--color-blue-200:#b2c2e5;--color-blue-300:#7994d2;--color-blue-400:#4066bf;--color-blue-500:#001e64;--color-blue-600:#001c5c;--color-blue-700:#00174c;--color-blue-800:#00123d;--color-blue-900:#000f33;--color-blue-950:#000d2b;--color-ambar-50:#fff6eb;--color-ambar-100:#ffefdc;--color-ambar-200:#fedfb9;--color-ambar-300:#fdca8b;--color-ambar-400:#fdb359;--color-ambar-500:#fc9c26;--color-ambar-600:#ec8403;--color-ambar-700:#d87803;--color-ambar-800:#ba6803;--color-ambar-900:#975402;--color-ambar-950:#6a3b01;--color-gray-50:#fff;--color-gray-100:#f4f4f4;--color-gray-200:#e6e6e6;--color-gray-300:#c3c3c3;--color-gray-400:#b9b9b9;--color-gray-500:#949494;--color-gray-600:#737373;--color-gray-700:#5c5c5c;--color-gray-800:#323232;--color-gray-900:#292929;--color-gray-950:#141414;--color-white-opacity-50:#ffffff0d;--color-white-opacity-100:#ffffff1a;--color-white-opacity-200:#ffffff26;--color-white-opacity-300:#ffffff45;--color-white-opacity-400:#ffffff5c;--color-white-opacity-500:#ffffff80;--color-white-opacity-600:#ffffff8c;--color-white-opacity-700:#ffffffa3;--color-white-opacity-800:#ffffffba;--color-white-opacity-900:#fffc;--color-white-opacity-950:#ffffffe8;--color-ciano-50:#f1f6fe;--color-ciano-100:#dfeafc;--color-ciano-200:#c3d9f9;--color-ciano-300:#90b9f4;--color-ciano-400:#5d98ee;--color-ciano-500:#1769e0;--color-ciano-600:#155fcb;--color-ciano-700:#1355b4;--color-ciano-800:#104899;--color-ciano-900:#0d3b7d;--color-ciano-950:#0a2e61;--color-extra-color-blue-light:#e7f0f4;--color-extra-color-blue-dark:#162931;--color-black-opacity-50:#14141405;--color-black-opacity-100:#1414141a;--color-black-opacity-200:#14141426;--color-black-opacity-300:#14141445;--color-black-opacity-400:#1414145c;--color-black-opacity-500:#14141480;--color-black-opacity-600:#1414148c;--color-black-opacity-700:#141414a3;--color-black-opacity-800:#141414ba;--color-black-opacity-900:#141414cc;--color-black-opacity-950:#141414e8;--color-feedback-success:#04843f;--color-feedback-error:#c80505;--color-feedback-informational:#1355b4;--color-feedback-alert:#ef9928;--color-brand-primary:#f05223;--color-brand-secondary:#001c5c;--color-brand-tertiary-1:#1769e0;--color-brand-tertiary-2:#fc9c26;--color-surface-body:#fff;--color-surface-on-body:#f4f4f4;--color-surface-on-body-blue:#e7f0f4;--color-surface-on-body-brand:#fff6eb;--color-surface-on-body-feedback-success:#e6f4ed;--color-surface-on-body-feedback-error:#fde8e8;--color-surface-on-body-feedback-alert:#fdf4e7;--color-surface-on-body-feedback-info:#dfeafc;--color-text-brand:#f05223;--color-text-primary:#323232;--color-text-secondary:#5c5c5c;--color-text-disabled:#949494;--color-text-link:#1355b4;--color-states-empty-bg-hover:#1414141a;--color-states-empty-bg-pressed:#14141426;--color-states-bg-disabled:#14141405;--color-states-bg-focus:#1355b4;--color-states-primary-hover:#ea4210;--color-states-primary-pressed:#d23b0e;--color-states-danger-hover:#b30404;--color-states-danger-pressed:#9f0404;--color-states-negative-hover:#e6e6e6;--color-states-negative-pressed:#c3c3c3;--color-icon-primary:#5c5c5c;--color-icon-secondary:#fff;--color-icon-tertiary:#b30404;--color-icon-disabled:#b9b9b9;--color-neutral-neutral-1:#fff;--color-neutral-neutral-2:#f4f4f4;--color-neutral-neutral-3:#b9b9b9;--color-neutral-neutral-4:#949494;--color-neutral-neutral-5:#737373;--color-neutral-neutral-6:#5c5c5c;--color-neutral-neutral-7:#323232;--color-neutral-neutral-8:#292929;--color-negative-negative-1:#fff;--color-negative-negative-2:#323232;--color-opacity-body:#fffc;--color-opacity-on-body:#14141405;--color-opacity-overlay:#1414148c;--color-opacity-on-overlay:#ffffff1a;--color-line-input:#949494;--color-line-general-strong:#c3c3c3;--color-line-general:#e6e6e6}.static{position:static}.flex{display:flex}.h-24{height:1.5rem}.h-\\[40px\\]{height:40px}.h-\\[56px\\]{height:56px}.w-24{width:1.5rem}.min-w-\\[120px\\]{min-width:120px}.min-w-\\[40px\\]{min-width:40px}.min-w-\\[56px\\]{min-width:56px}.items-center{align-items:center}.justify-center{justify-content:center}.space-x-8>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.5rem*var(--tw-space-x-reverse))}.rounded-xs{border-radius:.5rem}.rounded-xxl{border-radius:18.75rem}.border{border-width:1px}.border-none{border-style:none}.border-brand-primary{border-color:var(--color-brand-primary)}.border-feedback-error{border-color:var(--color-feedback-error)}.border-negative-negative-1{border-color:var(--color-negative-negative-1)}.bg-brand-primary{background-color:var(--color-brand-primary)}.bg-feedback-error{background-color:var(--color-feedback-error)}.bg-negative-negative-1{background-color:var(--color-negative-negative-1)}.bg-states-bg-disabled{background-color:var(--color-states-bg-disabled)}.bg-states-empty-bg-hover{background-color:var(--color-states-empty-bg-hover)}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.p-16{padding:1rem}.p-8{padding:.5rem}.px-16{padding-left:1rem;padding-right:1rem}.py-4{padding-bottom:.25rem;padding-top:.25rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.font-bold{font-weight:700}.text-brand-primary{color:var(--color-brand-primary)}.text-feedback-error{color:var(--color-feedback-error)}.text-icon-disabled{color:var(--color-icon-disabled)}.text-icon-primary{color:var(--color-icon-primary)}.text-negative-negative-1{color:var(--color-negative-negative-1)}.text-negative-negative-2{color:var(--color-negative-negative-2)}.text-text-disabled{color:var(--color-text-disabled)}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\\:bg-states-danger-hover:hover{background-color:var(--color-states-danger-hover)}.hover\\:bg-states-empty-bg-hover:hover{background-color:var(--color-states-empty-bg-hover)}.hover\\:bg-states-negative-hover:hover{background-color:var(--color-states-negative-hover)}.hover\\:bg-states-primary-hover:hover{background-color:var(--color-states-primary-hover)}.focus\\:bg-states-empty-bg-hover:focus{background-color:var(--color-states-empty-bg-hover)}.active\\:bg-states-danger-pressed:active{background-color:var(--color-states-danger-pressed)}.active\\:bg-states-empty-bg-pressed:active{background-color:var(--color-states-empty-bg-pressed)}.active\\:bg-states-negative-pressed:active{background-color:var(--color-states-negative-pressed)}.active\\:bg-states-primary-pressed:active{background-color:var(--color-states-primary-pressed)}.active\\:bg-opacity-85:active{--tw-bg-opacity:0.85}.group:hover .group-hover\\:bg-states-empty-bg-hover{background-color:var(--color-states-empty-bg-hover)}";
 const SulaButton$1 = /*@__PURE__*/ proxyCustomElement(class SulaButton extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.buttonClicked = createEvent(this, "buttonClicked", 7);
+        this.buttonClicked = createEvent(this, "buttonClicked");
         /**
          * Button appearance
          */
@@ -161,7 +160,7 @@ const SulaButton$1 = /*@__PURE__*/ proxyCustomElement(class SulaButton extends H
     render() {
         return (h(Host, { key: 'ea13a693900493e45523edff3350a052d4e62772' }, h("button", { key: 'c3d37cc6fec9348c2dfe8d0b518f0191d460bbe5', id: "button-container", class: this.getBaseButtonClass(), disabled: this.buttonDisabled, onClick: this.handleClick }, this.renderIconContent(), this.renderTextContent(), this.renderArrowIcon())));
     }
-    static get style() { return SulaButtonStyle0; }
+    static get style() { return sulaButtonCss; }
 }, [1, "sula-button", {
         "text": [1025],
         "icon": [1025],
@@ -196,5 +195,6 @@ const SulaButton = SulaButton$1;
 const defineCustomElement = defineCustomElement$1;
 export { SulaButton, defineCustomElement };
+//# sourceMappingURL=sula-button.js.map
 //# sourceMappingURL=sula-button.js.map

package/dist/components/sula-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"sula-button.js","mappings":"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","names":["SulaButton"],"sources":["src/components/sula-button/model/sula-button.model.ts","src/components/sula-button/sula-button.scss?tag=sula-button&encapsulation=shadow","src/components/sula-button/sula-button.tsx"],"sourcesContent":["export enum SulaButtonAppearance {\n Default = 'default',\n Secondary = 'secondary',\n Text = 'text',\n}\n\nexport enum SulaButtonSize {\n Large = 'large',\n Default = 'default',\n Cta = 'cta',\n}\n\nexport enum SulaButtonStatus {\n Primary = 'primary',\n Danger = 'danger',\n Negative = 'negative',\n}\n\nexport enum SulaButtonType {\n Icon = 'icon',\n Text = 'text',\n}\n",":host {\n display: block;\n}\n\nbutton {\n &:focus {\n outline: 2px solid var(--color-feedback-informational) !important;\n outline-offset: 2px !important;\n }\n}\n","import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\nimport { SulaButtonAppearance, SulaButtonSize, SulaButtonStatus, SulaButtonType } from './model/sula-button.model';\n\n@Component({\n tag: 'sula-button',\n styleUrl: 'sula-button.scss',\n shadow: true,\n})\nexport class SulaButton {\n /*\n Button text when is text type\n /\n @Prop({ mutable: true }) text: string;\n\n /\n Button icon when is Icon type\n /\n @Prop({ mutable: true }) icon: string;\n\n /\n Button appearance\n /\n @Prop({ mutable: true }) appearance: SulaButtonAppearance = SulaButtonAppearance.Default;\n\n /\n Button type\n /\n @Prop({ mutable: true }) type: SulaButtonType = SulaButtonType.Text;\n\n /\n Button size\n /\n @Prop({ mutable: true }) size: SulaButtonSize = SulaButtonSize.Default;\n\n /\n Button status\n /\n @Prop({ mutable: true }) status: SulaButtonStatus = SulaButtonStatus.Primary;\n\n /\n Is button loading\n /\n @Prop({ mutable: true }) loading: boolean = false;\n\n /\n Is button disabled\n /\n @Prop({ mutable: true }) buttonDisabled: boolean = false;\n\n /\n Event emitted when button is clicked.\n * @note If button is disabled event won't be emitted\n */\n @Event()\n buttonClicked: EventEmitter<void>;\n\n private getAppearanceClass() {\n const appearanceStyles = {\n [SulaButtonAppearance.Default]: this.getDefaultButtonStyles(),\n [SulaButtonAppearance.Secondary]: `border ${this.getSecondaryButtonStyles()}`,\n [SulaButtonAppearance.Text]: `flex items-center space-x-8 ${this.getTextButtonStyles()}`,\n };\n\n return appearanceStyles[this.appearance];\n }\n\n private getButtonDisabledClass() {\n return this.appearance === SulaButtonAppearance.Text ? 'text-text-disabled' : 'bg-states-bg-disabled text-text-disabled border-none';\n }\n\n private getDefaultButtonStyles() {\n if (this.buttonDisabled) {\n return this.getButtonDisabledClass();\n }\n\n const statusStyles = {\n [SulaButtonStatus.Primary]: 'bg-brand-primary text-white hover:bg-states-primary-hover active:bg-states-primary-pressed',\n [SulaButtonStatus.Danger]: 'bg-feedback-error text-white hover:bg-states-danger-hover active:bg-opacity-85 active:bg-states-danger-pressed',\n [SulaButtonStatus.Negative]: 'bg-negative-negative-1 text-negative-negative-2 hover:bg-states-negative-hover active:bg-states-negative-pressed',\n };\n\n return statusStyles[this.status];\n }\n\n private getSecondaryButtonStyles() {\n if (this.buttonDisabled) {\n return this.getButtonDisabledClass();\n }\n\n const statusStyles = {\n [SulaButtonStatus.Primary]: 'border-brand-primary text-brand-primary hover:bg-states-empty-bg-hover bg-white active:bg-states-empty-bg-pressed',\n [SulaButtonStatus.Danger]: 'border-feedback-error text-feedback-error hover:bg-states-empty-bg-hover bg-white active:bg-states-empty-bg-pressed',\n [SulaButtonStatus.Negative]: 'border-negative-negative-1 text-negative-negative-1 bg-transparent hover:bg-states-empty-bg-hover active:bg-states-empty-bg-pressed',\n };\n\n return statusStyles[this.status];\n }\n\n private getTextButtonStyles() {\n if (this.buttonDisabled) {\n return this.getButtonDisabledClass();\n }\n\n const statusStyles = {\n [SulaButtonStatus.Primary]: 'text-brand-primary',\n [SulaButtonStatus.Danger]: 'text-feedback-error',\n [SulaButtonStatus.Negative]: 'text-negative-negative-1',\n };\n\n return statusStyles[this.status];\n }\n\n private getTextTypeSizeClass() {\n const sizeClasses = {\n [SulaButtonSize.Default]: 'py-4 h-[40px]',\n [SulaButtonSize.Large]: 'py-4 h-[56px]',\n };\n\n return sizeClasses[this.size];\n }\n\n private getButtonSizeByTypeClass() {\n if (this.type === SulaButtonType.Text) {\n return this.appearance === SulaButtonAppearance.Text\n ? { [this.getTextTypeSizeClass()]: true }\n : {\n ['px-16 py-4 min-w-[120px] h-[40px]']: this.size === SulaButtonSize.Default,\n ['px-16 py-4 min-w-[120px] h-[56px]']: this.size === SulaButtonSize.Large,\n };\n }\n\n return {\n 'flex justify-center items-center': true,\n ['p-8 h-[40px] min-w-[40px]']: this.size === SulaButtonSize.Default,\n ['p-16 py-4 min-w-[56px] h-[56px]']: this.size === SulaButtonSize.Large,\n };\n }\n\n private getIconContainerClass() {\n return {\n 'flex items-center justify-center w-24 h-24 rounded-xxl': true,\n 'text-icon-primary group-hover:bg-states-empty-bg-hover': !this.buttonDisabled,\n 'text-icon-disabled': this.buttonDisabled,\n };\n }\n\n private getBaseButtonClass() {\n return {\n [this.getAppearanceClass()]: true,\n ...this.getButtonSizeByTypeClass(),\n 'rounded-xxl': this.appearance !== SulaButtonAppearance.Text,\n 'rounded-xs focus:bg-states-empty-bg-hover': this.appearance === SulaButtonAppearance.Text,\n 'font-bold text-base group': true,\n 'disabled': this.buttonDisabled,\n };\n }\n\n private renderIconContent() {\n if (this.type === SulaButtonType.Icon) {\n return <sula-icon id=\"button-icon\" icon={this.icon}></sula-icon>;\n }\n return null;\n }\n\n private renderTextContent() {\n if (this.text && this.type === SulaButtonType.Text) {\n return <div id=\"button-text\">{this.text}</div>;\n }\n return null;\n }\n\n private renderArrowIcon() {\n if (this.appearance === SulaButtonAppearance.Text) {\n return (\n <div class={this.getIconContainerClass()}>\n <sula-icon icon=\"ph-bold ph-caret-right\" customClass=\"text-lg\"></sula-icon>\n </div>\n );\n }\n return null;\n }\n\n handleClick = () => {\n if (!this.buttonDisabled) {\n this.buttonClicked.emit();\n }\n };\n\n render() {\n return (\n <Host>\n <button id=\"button-container\" class={this.getBaseButtonClass()} disabled={this.buttonDisabled} onClick={this.handleClick}>\n {this.renderIconContent()}\n {this.renderTextContent()}\n {this.renderArrowIcon()}\n </button>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"sula-button.js","mappings":"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","names":["SulaButton","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sula-button/model/sula-button.model.ts","src/components/sula-button/sula-button.scss?tag=sula-button&encapsulation=shadow","src/components/sula-button/sula-button.tsx"],"sourcesContent":["export enum SulaButtonAppearance {\n Default = 'default',\n Secondary = 'secondary',\n Text = 'text',\n}\n\nexport enum SulaButtonSize {\n Large = 'large',\n Default = 'default',\n Cta = 'cta',\n}\n\nexport enum SulaButtonStatus {\n Primary = 'primary',\n Danger = 'danger',\n Negative = 'negative',\n}\n\nexport enum SulaButtonType {\n Icon = 'icon',\n Text = 'text',\n}\n",":host {\n display: block;\n}\n\nbutton {\n &:focus {\n outline: 2px solid var(--color-feedback-informational) !important;\n outline-offset: 2px !important;\n }\n}\n","import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\nimport { SulaButtonAppearance, SulaButtonSize, SulaButtonStatus, SulaButtonType } from './model/sula-button.model';\n\n@Component({\n tag: 'sula-button',\n styleUrl: 'sula-button.scss',\n shadow: true,\n})\nexport class SulaButton {\n /*\n Button text when is text type\n /\n @Prop({ mutable: true }) text: string;\n\n /\n Button icon when is Icon type\n /\n @Prop({ mutable: true }) icon: string;\n\n /\n Button appearance\n /\n @Prop({ mutable: true }) appearance: SulaButtonAppearance = SulaButtonAppearance.Default;\n\n /\n Button type\n /\n @Prop({ mutable: true }) type: SulaButtonType = SulaButtonType.Text;\n\n /\n Button size\n /\n @Prop({ mutable: true }) size: SulaButtonSize = SulaButtonSize.Default;\n\n /\n Button status\n /\n @Prop({ mutable: true }) status: SulaButtonStatus = SulaButtonStatus.Primary;\n\n /\n Is button loading\n /\n @Prop({ mutable: true }) loading: boolean = false;\n\n /\n Is button disabled\n /\n @Prop({ mutable: true }) buttonDisabled: boolean = false;\n\n /\n Event emitted when button is clicked.\n * @note If button is disabled event won't be emitted\n */\n @Event()\n buttonClicked: EventEmitter<void>;\n\n private getAppearanceClass() {\n const appearanceStyles = {\n [SulaButtonAppearance.Default]: this.getDefaultButtonStyles(),\n [SulaButtonAppearance.Secondary]: `border ${this.getSecondaryButtonStyles()}`,\n [SulaButtonAppearance.Text]: `flex items-center space-x-8 ${this.getTextButtonStyles()}`,\n };\n\n return appearanceStyles[this.appearance];\n }\n\n private getButtonDisabledClass() {\n return this.appearance === SulaButtonAppearance.Text ? 'text-text-disabled' : 'bg-states-bg-disabled text-text-disabled border-none';\n }\n\n private getDefaultButtonStyles() {\n if (this.buttonDisabled) {\n return this.getButtonDisabledClass();\n }\n\n const statusStyles = {\n [SulaButtonStatus.Primary]: 'bg-brand-primary text-white hover:bg-states-primary-hover active:bg-states-primary-pressed',\n [SulaButtonStatus.Danger]: 'bg-feedback-error text-white hover:bg-states-danger-hover active:bg-opacity-85 active:bg-states-danger-pressed',\n [SulaButtonStatus.Negative]: 'bg-negative-negative-1 text-negative-negative-2 hover:bg-states-negative-hover active:bg-states-negative-pressed',\n };\n\n return statusStyles[this.status];\n }\n\n private getSecondaryButtonStyles() {\n if (this.buttonDisabled) {\n return this.getButtonDisabledClass();\n }\n\n const statusStyles = {\n [SulaButtonStatus.Primary]: 'border-brand-primary text-brand-primary hover:bg-states-empty-bg-hover bg-white active:bg-states-empty-bg-pressed',\n [SulaButtonStatus.Danger]: 'border-feedback-error text-feedback-error hover:bg-states-empty-bg-hover bg-white active:bg-states-empty-bg-pressed',\n [SulaButtonStatus.Negative]: 'border-negative-negative-1 text-negative-negative-1 bg-transparent hover:bg-states-empty-bg-hover active:bg-states-empty-bg-pressed',\n };\n\n return statusStyles[this.status];\n }\n\n private getTextButtonStyles() {\n if (this.buttonDisabled) {\n return this.getButtonDisabledClass();\n }\n\n const statusStyles = {\n [SulaButtonStatus.Primary]: 'text-brand-primary',\n [SulaButtonStatus.Danger]: 'text-feedback-error',\n [SulaButtonStatus.Negative]: 'text-negative-negative-1',\n };\n\n return statusStyles[this.status];\n }\n\n private getTextTypeSizeClass() {\n const sizeClasses = {\n [SulaButtonSize.Default]: 'py-4 h-[40px]',\n [SulaButtonSize.Large]: 'py-4 h-[56px]',\n };\n\n return sizeClasses[this.size];\n }\n\n private getButtonSizeByTypeClass() {\n if (this.type === SulaButtonType.Text) {\n return this.appearance === SulaButtonAppearance.Text\n ? { [this.getTextTypeSizeClass()]: true }\n : {\n ['px-16 py-4 min-w-[120px] h-[40px]']: this.size === SulaButtonSize.Default,\n ['px-16 py-4 min-w-[120px] h-[56px]']: this.size === SulaButtonSize.Large,\n };\n }\n\n return {\n 'flex justify-center items-center': true,\n ['p-8 h-[40px] min-w-[40px]']: this.size === SulaButtonSize.Default,\n ['p-16 py-4 min-w-[56px] h-[56px]']: this.size === SulaButtonSize.Large,\n };\n }\n\n private getIconContainerClass() {\n return {\n 'flex items-center justify-center w-24 h-24 rounded-xxl': true,\n 'text-icon-primary group-hover:bg-states-empty-bg-hover': !this.buttonDisabled,\n 'text-icon-disabled': this.buttonDisabled,\n };\n }\n\n private getBaseButtonClass() {\n return {\n [this.getAppearanceClass()]: true,\n ...this.getButtonSizeByTypeClass(),\n 'rounded-xxl': this.appearance !== SulaButtonAppearance.Text,\n 'rounded-xs focus:bg-states-empty-bg-hover': this.appearance === SulaButtonAppearance.Text,\n 'font-bold text-base group': true,\n 'disabled': this.buttonDisabled,\n };\n }\n\n private renderIconContent() {\n if (this.type === SulaButtonType.Icon) {\n return <sula-icon id=\"button-icon\" icon={this.icon}></sula-icon>;\n }\n return null;\n }\n\n private renderTextContent() {\n if (this.text && this.type === SulaButtonType.Text) {\n return <div id=\"button-text\">{this.text}</div>;\n }\n return null;\n }\n\n private renderArrowIcon() {\n if (this.appearance === SulaButtonAppearance.Text) {\n return (\n <div class={this.getIconContainerClass()}>\n <sula-icon icon=\"ph-bold ph-caret-right\" customClass=\"text-lg\"></sula-icon>\n </div>\n );\n }\n return null;\n }\n\n handleClick = () => {\n if (!this.buttonDisabled) {\n this.buttonClicked.emit();\n }\n };\n\n render() {\n return (\n <Host>\n <button id=\"button-container\" class={this.getBaseButtonClass()} disabled={this.buttonDisabled} onClick={this.handleClick}>\n {this.renderIconContent()}\n {this.renderTextContent()}\n {this.renderArrowIcon()}\n </button>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/sula-checkbox.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-881c6b35.js';
-import { d as defineCustomElement$2 } from './p-b0d1214f.js';
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+import { d as defineCustomElement$2 } from './p-CEU3PNQs.js';
 var SulaCheckboxType;
 (function (SulaCheckboxType) {
@@ -7,17 +7,16 @@ var SulaCheckboxType;
     SulaCheckboxType["List"] = "list";
 })(SulaCheckboxType || (SulaCheckboxType = {}));
-const sulaCheckboxCss = "*,:after,:before{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/:after,:before{--tw-content:\"\"}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.block{display:block}.outline{outline-style:solid}:host{display:block}.checkbox-focus,.container-focus{outline:2px solid var(--color-feedback-informational)!important;outline-offset:2px!important}:root{--color-green-50:#f1f9f4;--color-green-100:#e6f4ed;--color-green-200:#cae7d8;--color-green-300:#a0d4b8;--color-green-400:#68bb8e;--color-green-500:#04843f;--color-green-600:#037236;--color-green-700:#03632f;--color-green-800:#035428;--color-green-900:#024521;--color-green-950:#02361a;--color-red-50:#fef6f6;--color-red-100:#fde8e8;--color-red-200:#fad1d1;--color-red-300:#f7abab;--color-red-400:#f17474;--color-red-500:#c80505;--color-red-600:#b30404;--color-red-700:#9f0404;--color-red-800:#860303;--color-red-900:#6d0303;--color-red-950:#500202;--color-yellow-50:#fdf4e7;--color-yellow-100:#fcedd9;--color-yellow-200:#fae0bd;--color-yellow-300:#f6c788;--color-yellow-400:#f3b159;--color-yellow-500:#ef9928;--color-yellow-600:#e49226;--color-yellow-700:#d17e10;--color-yellow-800:#b46d0e;--color-yellow-900:#93590b;--color-yellow-950:#683f08;--color-orange-50:#fef4f1;--color-orange-100:#fde8e2;--color-orange-200:#fbd2c6;--color-orange-300:#f8b4a0;--color-orange-400:#f58e70;--color-orange-500:#f05223;--color-orange-600:#ea4210;--color-orange-700:#d23b0e;--color-orange-800:#b5330c;--color-orange-900:#942a0a;--color-orange-950:#691e07;--color-blue-50:#ecf0f9;--color-blue-100:#dde3f4;--color-blue-200:#b2c2e5;--color-blue-300:#7994d2;--color-blue-400:#4066bf;--color-blue-500:#001e64;--color-blue-600:#001c5c;--color-blue-700:#00174c;--color-blue-800:#00123d;--color-blue-900:#000f33;--color-blue-950:#000d2b;--color-ambar-50:#fff6eb;--color-ambar-100:#ffefdc;--color-ambar-200:#fedfb9;--color-ambar-300:#fdca8b;--color-ambar-400:#fdb359;--color-ambar-500:#fc9c26;--color-ambar-600:#ec8403;--color-ambar-700:#d87803;--color-ambar-800:#ba6803;--color-ambar-900:#975402;--color-ambar-950:#6a3b01;--color-gray-50:#fff;--color-gray-100:#f4f4f4;--color-gray-200:#e6e6e6;--color-gray-300:#c3c3c3;--color-gray-400:#b9b9b9;--color-gray-500:#949494;--color-gray-600:#737373;--color-gray-700:#5c5c5c;--color-gray-800:#323232;--color-gray-900:#292929;--color-gray-950:#141414;--color-white-opacity-50:#ffffff0d;--color-white-opacity-100:#ffffff1a;--color-white-opacity-200:#ffffff26;--color-white-opacity-300:#ffffff45;--color-white-opacity-400:#ffffff5c;--color-white-opacity-500:#ffffff80;--color-white-opacity-600:#ffffff8c;--color-white-opacity-700:#ffffffa3;--color-white-opacity-800:#ffffffba;--color-white-opacity-900:#fffc;--color-white-opacity-950:#ffffffe8;--color-ciano-50:#f1f6fe;--color-ciano-100:#dfeafc;--color-ciano-200:#c3d9f9;--color-ciano-300:#90b9f4;--color-ciano-400:#5d98ee;--color-ciano-500:#1769e0;--color-ciano-600:#155fcb;--color-ciano-700:#1355b4;--color-ciano-800:#104899;--color-ciano-900:#0d3b7d;--color-ciano-950:#0a2e61;--color-extra-color-blue-light:#e7f0f4;--color-extra-color-blue-dark:#162931;--color-black-opacity-50:#14141405;--color-black-opacity-100:#1414141a;--color-black-opacity-200:#14141426;--color-black-opacity-300:#14141445;--color-black-opacity-400:#1414145c;--color-black-opacity-500:#14141480;--color-black-opacity-600:#1414148c;--color-black-opacity-700:#141414a3;--color-black-opacity-800:#141414ba;--color-black-opacity-900:#141414cc;--color-black-opacity-950:#141414e8;--color-feedback-success:#04843f;--color-feedback-error:#c80505;--color-feedback-informational:#1355b4;--color-feedback-alert:#ef9928;--color-brand-primary:#f05223;--color-brand-secondary:#001c5c;--color-brand-tertiary-1:#1769e0;--color-brand-tertiary-2:#fc9c26;--color-surface-body:#fff;--color-surface-on-body:#f4f4f4;--color-surface-on-body-blue:#e7f0f4;--color-surface-on-body-brand:#fff6eb;--color-surface-on-body-feedback-success:#e6f4ed;--color-surface-on-body-feedback-error:#fde8e8;--color-surface-on-body-feedback-alert:#fdf4e7;--color-surface-on-body-feedback-info:#dfeafc;--color-text-brand:#f05223;--color-text-primary:#323232;--color-text-secondary:#5c5c5c;--color-text-disabled:#949494;--color-text-link:#1355b4;--color-states-empty-bg-hover:#1414141a;--color-states-empty-bg-pressed:#14141426;--color-states-bg-disabled:#14141405;--color-states-bg-focus:#1355b4;--color-states-primary-hover:#ea4210;--color-states-primary-pressed:#d23b0e;--color-states-danger-hover:#b30404;--color-states-danger-pressed:#9f0404;--color-states-negative-hover:#e6e6e6;--color-states-negative-pressed:#c3c3c3;--color-icon-primary:#5c5c5c;--color-icon-secondary:#fff;--color-icon-disabled:#b9b9b9;--color-neutral-neutral-1:#fff;--color-neutral-neutral-2:#f4f4f4;--color-neutral-neutral-3:#b9b9b9;--color-neutral-neutral-4:#949494;--color-neutral-neutral-5:#737373;--color-neutral-neutral-6:#5c5c5c;--color-neutral-neutral-7:#323232;--color-neutral-neutral-8:#292929;--color-negative-negative-1:#fff;--color-negative-negative-2:#323232;--color-opacity-body:#fffc;--color-opacity-on-body:#14141405;--color-opacity-overlay:#1414148c;--color-opacity-on-overlay:#ffffff1a;--color-line-input:#949494;--color-line-general-strong:#c3c3c3;--color-line-general:#e6e6e6}.static{position:static}.mr-16{margin-right:1rem}.flex{display:flex}.h-\\[27px\\]{height:27px}.min-h-\\[85px\\]{min-height:85px}.w-\\[27px\\]{width:27px}.w-\\[280px\\]{width:280px}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.space-x-12>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.75rem*var(--tw-space-x-reverse))}.overflow-hidden{overflow:hidden}.break-words{overflow-wrap:break-word}.rounded-md{border-radius:1.25rem}.rounded-xs{border-radius:.5rem}.border{border-width:1px}.border-brand-primary{border-color:var(--color-brand-primary)}.border-line-input{border-color:var(--color-line-input)}.border-states-bg-disabled{border-color:var(--color-states-bg-disabled)}.bg-brand-primary{background-color:var(--color-brand-primary)}.bg-states-bg-disabled{background-color:var(--color-states-bg-disabled)}.bg-states-empty-bg-pressed{background-color:var(--color-states-empty-bg-pressed)}.bg-surface-body{background-color:var(--color-surface-body)}.bg-surface-on-body{background-color:var(--color-surface-on-body)}.px-24{padding-left:1.5rem;padding-right:1.5rem}.py-16{padding-bottom:1rem;padding-top:1rem}.text-base{font-size:1rem;line-height:1.5rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.text-icon-disabled{color:var(--color-icon-disabled)}.text-negative-negative-1{color:var(--color-negative-negative-1)}.text-text-primary{color:var(--color-text-primary)}.text-text-secondary{color:var(--color-text-secondary)}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.hover\\:bg-states-empty-bg-hover:hover{background-color:var(--color-states-empty-bg-hover)}.active\\:bg-states-empty-bg-pressed:active{background-color:var(--color-states-empty-bg-pressed)}";
-const SulaCheckboxStyle0 = sulaCheckboxCss;
+const sulaCheckboxCss = "*,:after,:before{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/:after,:before{--tw-content:\"\"}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.block{display:block}.outline{outline-style:solid}:host{display:block}.checkbox-focus,.container-focus{outline:2px solid var(--color-feedback-informational)!important;outline-offset:2px!important}:root{--color-green-50:#f1f9f4;--color-green-100:#e6f4ed;--color-green-200:#cae7d8;--color-green-300:#a0d4b8;--color-green-400:#68bb8e;--color-green-500:#04843f;--color-green-600:#037236;--color-green-700:#03632f;--color-green-800:#035428;--color-green-900:#024521;--color-green-950:#02361a;--color-red-50:#fef6f6;--color-red-100:#fde8e8;--color-red-200:#fad1d1;--color-red-300:#f7abab;--color-red-400:#f17474;--color-red-500:#c80505;--color-red-600:#b30404;--color-red-700:#9f0404;--color-red-800:#860303;--color-red-900:#6d0303;--color-red-950:#500202;--color-yellow-50:#fdf4e7;--color-yellow-100:#fcedd9;--color-yellow-200:#fae0bd;--color-yellow-300:#f6c788;--color-yellow-400:#f3b159;--color-yellow-500:#ef9928;--color-yellow-600:#e49226;--color-yellow-700:#d17e10;--color-yellow-800:#b46d0e;--color-yellow-900:#93590b;--color-yellow-950:#683f08;--color-orange-50:#fef4f1;--color-orange-100:#fde8e2;--color-orange-200:#fbd2c6;--color-orange-300:#f8b4a0;--color-orange-400:#f58e70;--color-orange-500:#f05223;--color-orange-600:#ea4210;--color-orange-700:#d23b0e;--color-orange-800:#b5330c;--color-orange-900:#942a0a;--color-orange-950:#691e07;--color-blue-50:#ecf0f9;--color-blue-100:#dde3f4;--color-blue-200:#b2c2e5;--color-blue-300:#7994d2;--color-blue-400:#4066bf;--color-blue-500:#001e64;--color-blue-600:#001c5c;--color-blue-700:#00174c;--color-blue-800:#00123d;--color-blue-900:#000f33;--color-blue-950:#000d2b;--color-ambar-50:#fff6eb;--color-ambar-100:#ffefdc;--color-ambar-200:#fedfb9;--color-ambar-300:#fdca8b;--color-ambar-400:#fdb359;--color-ambar-500:#fc9c26;--color-ambar-600:#ec8403;--color-ambar-700:#d87803;--color-ambar-800:#ba6803;--color-ambar-900:#975402;--color-ambar-950:#6a3b01;--color-gray-50:#fff;--color-gray-100:#f4f4f4;--color-gray-200:#e6e6e6;--color-gray-300:#c3c3c3;--color-gray-400:#b9b9b9;--color-gray-500:#949494;--color-gray-600:#737373;--color-gray-700:#5c5c5c;--color-gray-800:#323232;--color-gray-900:#292929;--color-gray-950:#141414;--color-white-opacity-50:#ffffff0d;--color-white-opacity-100:#ffffff1a;--color-white-opacity-200:#ffffff26;--color-white-opacity-300:#ffffff45;--color-white-opacity-400:#ffffff5c;--color-white-opacity-500:#ffffff80;--color-white-opacity-600:#ffffff8c;--color-white-opacity-700:#ffffffa3;--color-white-opacity-800:#ffffffba;--color-white-opacity-900:#fffc;--color-white-opacity-950:#ffffffe8;--color-ciano-50:#f1f6fe;--color-ciano-100:#dfeafc;--color-ciano-200:#c3d9f9;--color-ciano-300:#90b9f4;--color-ciano-400:#5d98ee;--color-ciano-500:#1769e0;--color-ciano-600:#155fcb;--color-ciano-700:#1355b4;--color-ciano-800:#104899;--color-ciano-900:#0d3b7d;--color-ciano-950:#0a2e61;--color-extra-color-blue-light:#e7f0f4;--color-extra-color-blue-dark:#162931;--color-black-opacity-50:#14141405;--color-black-opacity-100:#1414141a;--color-black-opacity-200:#14141426;--color-black-opacity-300:#14141445;--color-black-opacity-400:#1414145c;--color-black-opacity-500:#14141480;--color-black-opacity-600:#1414148c;--color-black-opacity-700:#141414a3;--color-black-opacity-800:#141414ba;--color-black-opacity-900:#141414cc;--color-black-opacity-950:#141414e8;--color-feedback-success:#04843f;--color-feedback-error:#c80505;--color-feedback-informational:#1355b4;--color-feedback-alert:#ef9928;--color-brand-primary:#f05223;--color-brand-secondary:#001c5c;--color-brand-tertiary-1:#1769e0;--color-brand-tertiary-2:#fc9c26;--color-surface-body:#fff;--color-surface-on-body:#f4f4f4;--color-surface-on-body-blue:#e7f0f4;--color-surface-on-body-brand:#fff6eb;--color-surface-on-body-feedback-success:#e6f4ed;--color-surface-on-body-feedback-error:#fde8e8;--color-surface-on-body-feedback-alert:#fdf4e7;--color-surface-on-body-feedback-info:#dfeafc;--color-text-brand:#f05223;--color-text-primary:#323232;--color-text-secondary:#5c5c5c;--color-text-disabled:#949494;--color-text-link:#1355b4;--color-states-empty-bg-hover:#1414141a;--color-states-empty-bg-pressed:#14141426;--color-states-bg-disabled:#14141405;--color-states-bg-focus:#1355b4;--color-states-primary-hover:#ea4210;--color-states-primary-pressed:#d23b0e;--color-states-danger-hover:#b30404;--color-states-danger-pressed:#9f0404;--color-states-negative-hover:#e6e6e6;--color-states-negative-pressed:#c3c3c3;--color-icon-primary:#5c5c5c;--color-icon-secondary:#fff;--color-icon-tertiary:#b30404;--color-icon-disabled:#b9b9b9;--color-neutral-neutral-1:#fff;--color-neutral-neutral-2:#f4f4f4;--color-neutral-neutral-3:#b9b9b9;--color-neutral-neutral-4:#949494;--color-neutral-neutral-5:#737373;--color-neutral-neutral-6:#5c5c5c;--color-neutral-neutral-7:#323232;--color-neutral-neutral-8:#292929;--color-negative-negative-1:#fff;--color-negative-negative-2:#323232;--color-opacity-body:#fffc;--color-opacity-on-body:#14141405;--color-opacity-overlay:#1414148c;--color-opacity-on-overlay:#ffffff1a;--color-line-input:#949494;--color-line-general-strong:#c3c3c3;--color-line-general:#e6e6e6}.static{position:static}.mr-16{margin-right:1rem}.flex{display:flex}.h-\\[27px\\]{height:27px}.min-h-\\[85px\\]{min-height:85px}.w-\\[27px\\]{width:27px}.w-\\[280px\\]{width:280px}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.space-x-12>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.75rem*var(--tw-space-x-reverse))}.overflow-hidden{overflow:hidden}.break-words{overflow-wrap:break-word}.rounded-md{border-radius:1.25rem}.rounded-xs{border-radius:.5rem}.border{border-width:1px}.border-brand-primary{border-color:var(--color-brand-primary)}.border-line-input{border-color:var(--color-line-input)}.border-states-bg-disabled{border-color:var(--color-states-bg-disabled)}.bg-brand-primary{background-color:var(--color-brand-primary)}.bg-states-bg-disabled{background-color:var(--color-states-bg-disabled)}.bg-states-empty-bg-pressed{background-color:var(--color-states-empty-bg-pressed)}.bg-surface-body{background-color:var(--color-surface-body)}.bg-surface-on-body{background-color:var(--color-surface-on-body)}.px-24{padding-left:1.5rem;padding-right:1.5rem}.py-16{padding-bottom:1rem;padding-top:1rem}.text-base{font-size:1rem;line-height:1.5rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.text-icon-disabled{color:var(--color-icon-disabled)}.text-negative-negative-1{color:var(--color-negative-negative-1)}.text-text-primary{color:var(--color-text-primary)}.text-text-secondary{color:var(--color-text-secondary)}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.hover\\:bg-states-empty-bg-hover:hover{background-color:var(--color-states-empty-bg-hover)}.active\\:bg-states-empty-bg-pressed:active{background-color:var(--color-states-empty-bg-pressed)}";
 const SulaCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class SulaCheckbox extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.valueChanged = createEvent(this, "valueChanged", 7);
-        this.focusedOn = createEvent(this, "focusedOn", 7);
-        this.focusedOut = createEvent(this, "focusedOut", 7);
+        this.valueChanged = createEvent(this, "valueChanged");
+        this.focusedOn = createEvent(this, "focusedOn");
+        this.focusedOut = createEvent(this, "focusedOut");
         /**
          * Checkbox type
          */
@@ -72,7 +71,7 @@ const SulaCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class SulaCheckbox exten
                 'bg-surface-body border-line-input': !this.checked,
             }, onFocus: this.handleFocus, onBlur: this.handleBlur }, this.checked && (h("div", { key: 'ede285c57a75d7a12a4477b31b9c195cd42efca1', class: "flex justify-center items-center" }, h("sula-icon", { key: '5546613a4121659fadb2061e4701ab831dd3bbc6', icon: "ph-bold ph-check", customClass: `${this.getIconColor()} text-xl` })))), !!this.label && this.type === SulaCheckboxType.Default && h("label", { key: '5f1fa7508c159f4b486dad0d4392706e2ca704f1', class: "text-text-secondary text-base cursor-pointer break-words" }, this.label))));
     }
-    static get style() { return SulaCheckboxStyle0; }
+    static get style() { return sulaCheckboxCss; }
 }, [1, "sula-checkbox", {
         "type": [1025],
         "label": [1025],
@@ -105,5 +104,6 @@ const SulaCheckbox = SulaCheckbox$1;
 const defineCustomElement = defineCustomElement$1;
 export { SulaCheckbox, defineCustomElement };
+//# sourceMappingURL=sula-checkbox.js.map
 //# sourceMappingURL=sula-checkbox.js.map

package/dist/components/sula-checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"sula-checkbox.js","mappings":";;;AAAA,IAAY,gBAGX;AAHD,~~WAAY~~,gBAAgB;~~IAC1B~~,~~uCAAmB~~,CAAA;~~IACnB~~,~~iCAAa~~,CAAA;AACf,CAAC,EAHW,gBAAgB,KAAhB,gBAAgB;;~~ACA5B~~,MAAM,eAAe,GAAG,~~41UAA41U~~,~~CAAC~~;~~AACr3U~~,~~2BAAe~~,~~eAAe~~;;~~MCOjBA,cAAY~~;~~IALzB;;;;;;;;;;QAS2B~~,~~SAAI~~,GAAqB,gBAAgB,CAAC,OAAO,~~CAAC;;;;QAelD~~,~~aAAQ~~,GAAY,KAAK,~~CAAC;;;;QAK1B~~,~~YAAO~~,GAAY,KAAK~~,CAAC~~;~~QAqBlD~~,~~YAAO~~,GAAY,KAAK~~,CAAC~~;~~QAEzB~~,~~WAAM~~,GAAG;~~YACP~~,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;~~gBAClB~~,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO~~,CAAC~~;~~gBAC7B~~,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,~~CAAC~~;~~aACtC;SACF~~,~~CAAC;QAEF~~,~~gBAAW~~,GAAG;~~YACZ~~,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;~~gBAClB~~,IAAI,CAAC,OAAO,GAAG,IAAI~~,CAAC~~;~~gBACpB~~,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,~~CAAC~~;~~aACvB;SACF~~,~~CAAC;QAEF~~,~~eAAU~~,GAAG;~~YACX~~,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;~~gBAClB~~,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE~~,CAAC~~;~~gBACvB~~,IAAI,CAAC,OAAO,GAAG,KAAK,~~CAAC~~;~~aACtB~~;~~SACF,CAAC;KAyDH;~~IAvDC,YAAY;~~QACV~~,IAAI,IAAI,CAAC,QAAQ,EAAE;~~YACjB~~,OAAO,oBAAoB,~~CAAC;SAC7B;QAED~~,OAAO,0BAA0B,~~CAAC;KACnC;IAED~~,~~MAAM~~;QACJ,QACE,EAAC,IAAI,~~uDACH~~,~~4DACE~~,KAAK,EAAE;~~gBACL~~,cAAc,EAAE,IAAI;~~gBACpB~~,8BAA8B,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,KAAK,gBAAgB,CAAC,OAAO;~~gBACtF~~,oGAAoG,EAAE,IAAI,CAAC,IAAI,KAAK,gBAAgB,CAAC,IAAI;~~gBACzI~~,iFAAiF,EAAE,IAAI,CAAC,IAAI,KAAK,gBAAgB,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ;gBACxI,iBAAiB,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,KAAK,gBAAgB,CAAC,IAAI;aACvE,EACD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,QAAQ,EAAE,CAAC,~~IAEV~~,IAAI,CAAC,IAAI,KAAK,gBAAgB,CAAC,IAAI,KAClC,~~4DAAK~~,KAAK,EAAC,4CAA4C,~~IACpD~~,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,~~8DAAO~~,KAAK,EAAC,kEAAkE,~~IAAE~~,IAAI,CAAC,KAAK,CAAS,EACpH,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,~~6DAAM~~,KAAK,EAAC,2CAA2C,IAAE,IAAI,CAAC,QAAQ,CAAQ,CAC9F,CACP,EAED,~~4DACE~~,QAAQ,EAAE,CAAC,EACX,KAAK,EAAE;~~gBACL~~,iGAAiG,EAAE,IAAI;gBACvG,gBAAgB,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,KAAK,gBAAgB,CAAC,OAAO;~~gBACxE~~,kDAAkD,EAAE,CAAC,IAAI,CAAC,QAAQ;gBAClE,iDAAiD,EAAE,IAAI,CAAC,QAAQ;gBAChE,uCAAuC,EAAE,IAAI,CAAC,OAAO;~~gBACrD~~,mCAAmC,EAAE,CAAC,IAAI,CAAC,OAAO;aACnD,EACD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,UAAU,~~IAEtB~~,IAAI,CAAC,OAAO,KACX,~~4DAAK~~,KAAK,EAAC,kCAAkC,~~IAC3C~~,~~kEAAW~~,IAAI,EAAC,kBAAkB,EAAC,WAAW,EAAE,GAAG,IAAI,CAAC,YAAY,EAAE,~~UAAU~~,~~GAAc~~,CAC1F,CACP,CACG,EACL,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,KAAK,gBAAgB,CAAC,OAAO,IAAI,~~8DAAO~~,KAAK,EAAC,0DAA0D,~~IAAE~~,IAAI,CAAC,KAAK,CAAS,CACnJ,CACD~~,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["SulaCheckbox"],"sources":["src/components/sula-checkbox/model/sula-checkbox.model.ts","src/components/sula-checkbox/sula-checkbox.scss?tag=sula-checkbox&encapsulation=shadow","src/components/sula-checkbox/sula-checkbox.tsx"],"sourcesContent":["export enum SulaCheckboxType {\n Default = 'default',\n List = 'list',\n}\n",":host {\n display: block;\n}\n\n.checkbox-focus {\n outline: 2px solid var(--color-feedback-informational) !important;\n outline-offset: 2px !important;\n}\n\n.container-focus {\n outline: 2px solid var(--color-feedback-informational) !important;\n outline-offset: 2px !important;\n}\n","import { Component, Event, EventEmitter, Host, Prop, State, h } from '@stencil/core';\nimport { SulaCheckboxType } from './model/sula-checkbox.model';\n\n@Component({\n tag: 'sula-checkbox',\n styleUrl: 'sula-checkbox.scss',\n shadow: true,\n})\nexport class SulaCheckbox {\n /*\n Checkbox type\n /\n @Prop({ mutable: true }) type: SulaCheckboxType = SulaCheckboxType.Default;\n\n /\n Checkbox label\n /\n @Prop({ mutable: true }) label?: string;\n\n /\n Checkbox sub title (avaible when is `list` type)\n /\n @Prop({ mutable: true }) subTitle?: string;\n\n /\n Is checbox disabled\n /\n @Prop({ mutable: true }) disabled: boolean = false;\n\n /\n Is checkbox checked\n /\n @Prop({ mutable: true }) checked: boolean = false;\n\n /\n Event emitted when checkbox value changes.\n /\n @Event()\n valueChanged: EventEmitter<boolean>;\n\n /\n Event emitted when checkbox is focused.\n /\n @Event()\n focusedOn: EventEmitter<void>;\n\n /\n Event emitted when checkbox is focused out.\n */\n @Event()\n focusedOut: EventEmitter<void>;\n\n @State()\n isFocus: boolean = false;\n\n toggle = () => {\n if (!this.disabled) {\n this.checked = !this.checked;\n this.valueChanged.emit(this.checked);\n }\n };\n\n handleFocus = () => {\n if (!this.disabled) {\n this.isFocus = true;\n this.focusedOn.emit();\n }\n };\n\n handleBlur = () => {\n if (!this.disabled) {\n this.focusedOut.emit();\n this.isFocus = false;\n }\n };\n\n getIconColor() {\n if (this.disabled) {\n return 'text-icon-disabled';\n }\n\n return 'text-negative-negative-1';\n }\n\n render() {\n return (\n <Host>\n <div\n class={{\n 'outline-none': true,\n 'flex items-center space-x-12': !!this.label && this.type === SulaCheckboxType.Default,\n 'flex items-center justify-between bg-surface-on-body rounded-md w-[280px] min-h-[85px] px-24 py-16': this.type === SulaCheckboxType.List,\n 'hover:bg-states-empty-bg-hover active:bg-states-empty-bg-pressed cursor-pointer': this.type === SulaCheckboxType.List && !this.disabled,\n 'container-focus': this.isFocus && this.type === SulaCheckboxType.List,\n }}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n onClick={this.toggle}\n tabIndex={0}\n >\n {this.type === SulaCheckboxType.List && (\n <div class=\"flex flex-col flex-1 mr-16 overflow-hidden\">\n {!!this.label && <label class=\"text-text-primary font-bold text-base cursor-pointer break-words\">{this.label}</label>}\n {!!this.subTitle && <span class=\"text-text-secondary text-base break-words\">{this.subTitle}</span>}\n </div>\n )}\n\n <div\n tabIndex={0}\n class={{\n 'flex justify-center items-center rounded-xs w-[27px] h-[27px] border outline-none flex-shrink-0': true,\n 'checkbox-focus': this.isFocus && this.type === SulaCheckboxType.Default,\n 'cursor-pointer active:bg-states-empty-bg-pressed': !this.disabled,\n 'bg-states-bg-disabled border-states-bg-disabled': this.disabled,\n 'bg-brand-primary border-brand-primary': this.checked,\n 'bg-surface-body border-line-input': !this.checked,\n }}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n >\n {this.checked && (\n <div class=\"flex justify-center items-center\">\n <sula-icon icon=\"ph-bold ph-check\" customClass={`${this.getIconColor()} text-xl`}></sula-icon>\n </div>\n )}\n </div>\n {!!this.label && this.type === SulaCheckboxType.Default && <label class=\"text-text-secondary text-base cursor-pointer break-words\">{this.label}</label>}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"sula-checkbox.js","mappings":"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","names":["SulaCheckbox","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sula-checkbox/model/sula-checkbox.model.ts","src/components/sula-checkbox/sula-checkbox.scss?tag=sula-checkbox&encapsulation=shadow","src/components/sula-checkbox/sula-checkbox.tsx"],"sourcesContent":["export enum SulaCheckboxType {\n Default = 'default',\n List = 'list',\n}\n",":host {\n display: block;\n}\n\n.checkbox-focus {\n outline: 2px solid var(--color-feedback-informational) !important;\n outline-offset: 2px !important;\n}\n\n.container-focus {\n outline: 2px solid var(--color-feedback-informational) !important;\n outline-offset: 2px !important;\n}\n","import { Component, Event, EventEmitter, Host, Prop, State, h } from '@stencil/core';\nimport { SulaCheckboxType } from './model/sula-checkbox.model';\n\n@Component({\n tag: 'sula-checkbox',\n styleUrl: 'sula-checkbox.scss',\n shadow: true,\n})\nexport class SulaCheckbox {\n /*\n Checkbox type\n /\n @Prop({ mutable: true }) type: SulaCheckboxType = SulaCheckboxType.Default;\n\n /\n Checkbox label\n /\n @Prop({ mutable: true }) label?: string;\n\n /\n Checkbox sub title (avaible when is `list` type)\n /\n @Prop({ mutable: true }) subTitle?: string;\n\n /\n Is checbox disabled\n /\n @Prop({ mutable: true }) disabled: boolean = false;\n\n /\n Is checkbox checked\n /\n @Prop({ mutable: true }) checked: boolean = false;\n\n /\n Event emitted when checkbox value changes.\n /\n @Event()\n valueChanged: EventEmitter<boolean>;\n\n /\n Event emitted when checkbox is focused.\n /\n @Event()\n focusedOn: EventEmitter<void>;\n\n /\n Event emitted when checkbox is focused out.\n */\n @Event()\n focusedOut: EventEmitter<void>;\n\n @State()\n isFocus: boolean = false;\n\n toggle = () => {\n if (!this.disabled) {\n this.checked = !this.checked;\n this.valueChanged.emit(this.checked);\n }\n };\n\n handleFocus = () => {\n if (!this.disabled) {\n this.isFocus = true;\n this.focusedOn.emit();\n }\n };\n\n handleBlur = () => {\n if (!this.disabled) {\n this.focusedOut.emit();\n this.isFocus = false;\n }\n };\n\n getIconColor() {\n if (this.disabled) {\n return 'text-icon-disabled';\n }\n\n return 'text-negative-negative-1';\n }\n\n render() {\n return (\n <Host>\n <div\n class={{\n 'outline-none': true,\n 'flex items-center space-x-12': !!this.label && this.type === SulaCheckboxType.Default,\n 'flex items-center justify-between bg-surface-on-body rounded-md w-[280px] min-h-[85px] px-24 py-16': this.type === SulaCheckboxType.List,\n 'hover:bg-states-empty-bg-hover active:bg-states-empty-bg-pressed cursor-pointer': this.type === SulaCheckboxType.List && !this.disabled,\n 'container-focus': this.isFocus && this.type === SulaCheckboxType.List,\n }}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n onClick={this.toggle}\n tabIndex={0}\n >\n {this.type === SulaCheckboxType.List && (\n <div class=\"flex flex-col flex-1 mr-16 overflow-hidden\">\n {!!this.label && <label class=\"text-text-primary font-bold text-base cursor-pointer break-words\">{this.label}</label>}\n {!!this.subTitle && <span class=\"text-text-secondary text-base break-words\">{this.subTitle}</span>}\n </div>\n )}\n\n <div\n tabIndex={0}\n class={{\n 'flex justify-center items-center rounded-xs w-[27px] h-[27px] border outline-none flex-shrink-0': true,\n 'checkbox-focus': this.isFocus && this.type === SulaCheckboxType.Default,\n 'cursor-pointer active:bg-states-empty-bg-pressed': !this.disabled,\n 'bg-states-bg-disabled border-states-bg-disabled': this.disabled,\n 'bg-brand-primary border-brand-primary': this.checked,\n 'bg-surface-body border-line-input': !this.checked,\n }}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n >\n {this.checked && (\n <div class=\"flex justify-center items-center\">\n <sula-icon icon=\"ph-bold ph-check\" customClass={`${this.getIconColor()} text-xl`}></sula-icon>\n </div>\n )}\n </div>\n {!!this.label && this.type === SulaCheckboxType.Default && <label class=\"text-text-secondary text-base cursor-pointer break-words\">{this.label}</label>}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}