beightone-ui-components 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/beightone-ui-components/b8-button.entry.js

@@ -0,0 +1,59 @@
+import { r as registerInstance, a as createEvent, h } from './index-B9cmM_jf.js';
+
+const b8ButtonCss = () => `:host{--neutral-primary-opacity-25:rgba(5, 5, 5, 0.25);--brand-primary-light-opacity-100:var(--brand-primary-light);}.b8-button{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;white-space:nowrap;border-radius:0.5rem;font-weight:500;transition:background-color 0.2s ease-in-out,     border-color 0.2s ease-in-out,     color 0.2s ease-in-out,     box-shadow 0.2s ease-in-out;border:1px solid transparent;cursor:pointer;outline:none;position:relative;text-decoration:none;}.b8-button:focus-visible{box-shadow:0 0 0 4px var(--brand-primary-light);border-color:transparent;}.b8-button svg:not([class*='size-']){width:1rem;height:1rem;flex-shrink:0;pointer-events:none;}.b8-button--primary{background-color:var(--brand-primary-medium);border-color:var(--brand-primary-medium);color:var(--neutral-primary);}.b8-button--primary:hover:not(:disabled){background-color:var(--brand-primary-light);border-color:var(--brand-primary-bold);}.b8-button--secondary{background-color:transparent;color:var(--brand-primary-bold);border-color:var(--brand-primary-bold);}.b8-button--secondary:hover:not(:disabled){background-color:var(--brand-primary-light);border-color:var(--brand-primary-bold);}.b8-button--tertiary{background-color:transparent;color:var(--brand-primary-bold);border-color:transparent;}.b8-button--tertiary:hover:not(:disabled){background-color:var(--brand-primary-light);border-color:var(--brand-primary-light);}.b8-button--link{background-color:transparent;color:var(--brand-primary-bold);border-color:transparent;padding:0;height:auto;gap:0.25rem;}.b8-button--link:hover:not(:disabled){text-decoration:underline}.b8-button--xs{height:2.25rem;gap:0.25rem;border-radius:0.5rem;padding:0 0.75rem;font-size:0.875rem;}.b8-button--sm{height:2.5rem;border-radius:0.5rem;gap:0.5rem;font-size:0.875rem;padding:0 0.75rem;}.b8-button--md{height:3rem;padding:0 1.25rem;font-size:1rem;}.b8-button--lg{height:3.5rem;border-radius:0.5rem;font-size:1rem;padding:0 1.25rem;}.b8-button--icon-xs{width:2.25rem;height:2.25rem;border-radius:0.375rem;padding:0;gap:0}.b8-button--icon-xs svg:not([class*='size-']){width:0.75rem;height:0.75rem;}.b8-button--icon-sm{width:2.5rem;height:2.5rem;padding:0;gap:0}.b8-button--icon-sm svg:not([class*='size-']){width:1rem;height:1rem;}.b8-button--icon-md{width:3rem;height:3rem;padding:0;gap:0}.b8-button--icon-md svg:not([class*='size-']){width:1rem;height:1rem;}.b8-button--icon-lg{width:3.5rem;height:3.5rem;padding:0;gap:0}.b8-button--icon-lg svg:not([class*='size-']){width:1.25rem;height:1.25rem;}.b8-button--disabled{pointer-events:none;cursor:not-allowed;border-color:transparent;color:var(--neutral-quartenary);font-weight:600;background-color:var(--neutral-quinary);}.b8-button--loading{pointer-events:none;cursor:wait;}.b8-button__loading-content{display:flex;align-items:center;gap:0.5rem;}.b8-button__spinner{animation:spin 1s linear infinite;width:1rem;height:1rem;flex-shrink:0}.b8-button__spinner-circle{opacity:0.25}.b8-button__spinner-path{opacity:0.75}`;
+
+const B8Button = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.b8Click = createEvent(this, "b8Click", 7);
+    }
+    variant = 'primary';
+    size = 'md';
+    isLoading = false;
+    loadingText = 'Aguarde...';
+    isDisabled = false;
+    b8Click;
+    handleClick = (event) => {
+        if (!this.isDisabled && !this.isLoading) {
+            this.b8Click.emit(event);
+        }
+    };
+    getSpinnerColors(variant) {
+        switch (variant) {
+            case 'primary':
+                return {
+                    circle: 'var(--neutral-primary-opacity-25)',
+                    path: 'var(--neutral-on-accent)',
+                };
+            case 'secondary':
+            case 'tertiary':
+            case 'link':
+                return {
+                    circle: 'var(--brand-primary-light-opacity-100)',
+                    path: 'var(--brand-primary-700)', // bold
+                };
+            default:
+                return {
+                    circle: 'var(--neutral-primary-opacity-25)',
+                    path: 'var(--neutral-on-accent)',
+                };
+        }
+    }
+    render() {
+        const isDisabledState = this.isDisabled || this.isLoading;
+        const spinnerColors = this.getSpinnerColors(this.variant);
+        return (h("button", { key: '197d06ff1a0af1ac2a9fa4fdc6d69fc2ad4787db', class: {
+                'b8-button': true,
+                [`b8-button--${this.variant}`]: true,
+                [`b8-button--${this.size}`]: true,
+                'b8-button--loading': this.isLoading,
+                'b8-button--disabled': isDisabledState,
+            }, disabled: isDisabledState, onClick: this.handleClick }, this.isLoading ? (h("span", { class: "b8-button__loading-content" }, h("svg", { class: "b8-button__spinner", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24" }, h("circle", { class: "b8-button__spinner-circle", style: { stroke: spinnerColors.circle }, cx: "12", cy: "12", r: "10", "stroke-width": "4" }), h("path", { class: "b8-button__spinner-path", style: { fill: spinnerColors.path }, d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })), this.loadingText)) : (h("slot", null))));
+    }
+};
+B8Button.style = b8ButtonCss();
+
+export { B8Button as b8_button };
+//# sourceMappingURL=b8-button.entry.esm.js.map
+
+//# sourceMappingURL=b8-button.entry.js.map

package/dist/beightone-ui-components/b8-button.entry.js.map

@@ -0,0 +1 @@
+{"file":"b8-button.entry.js","mappings":";;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC,u8FAAu8F,CAAC;;MCOt9F,QAAQ,GAAA,MAAA;;;;;IACX,OAAO,GAAG,SAAS;IACnB,IAAI,GAAG,IAAI;IACgB,SAAS,GAAY,KAAK;IACxB,WAAW,GAAW,YAAY;IACnC,UAAU,GAAY,KAAK;AACtD,IAAA,OAAO;AAER,IAAA,WAAW,GAAG,CAAC,KAAiB,KAAI;QAC1C,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;AACvC,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;;AAE5B,KAAC;AAEO,IAAA,gBAAgB,CAAC,OAAO,EAAA;QAC9B,QAAQ,OAAO;AACb,YAAA,KAAK,SAAS;gBACZ,OAAO;AACL,oBAAA,MAAM,EAAE,mCAAmC;AAC3C,oBAAA,IAAI,EAAE,0BAA0B;iBACjC;AACH,YAAA,KAAK,WAAW;AAChB,YAAA,KAAK,UAAU;AACf,YAAA,KAAK,MAAM;gBACT,OAAO;AACL,oBAAA,MAAM,EAAE,wCAAwC;oBAChD,IAAI,EAAE,0BAA0B;iBACjC;AACH,YAAA;gBACE,OAAO;AACL,oBAAA,MAAM,EAAE,mCAAmC;AAC3C,oBAAA,IAAI,EAAE,0BAA0B;iBACjC;;;IAIP,MAAM,GAAA;QACJ,MAAM,eAAe,GAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS;QACzD,MAAM,aAAa,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC;QAEzD,QACE,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACL,gBAAA,WAAW,EAAE,IAAI;AACjB,gBAAA,CAAC,cAAc,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AACpC,gBAAA,CAAC,cAAc,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;gBACjC,oBAAoB,EAAE,IAAI,CAAC,SAAS;AACpC,gBAAA,qBAAqB,EAAE,eAAe;AACvC,aAAA,EACD,QAAQ,EAAE,eAAe,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EAExB,IAAI,CAAC,SAAS,IACb,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,4BAA4B,EAAA,EACtC,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,oBAAoB,EAAC,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAA,EAChG,CAAQ,CAAA,QAAA,EAAA,EAAA,KAAK,EAAC,2BAA2B,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,aAAa,CAAC,MAAM,EAAE,EAAE,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAc,cAAA,EAAA,GAAG,EAAG,CAAA,EAC7H,CAAA,CAAA,MAAA,EAAA,EACE,KAAK,EAAC,yBAAyB,EAC/B,KAAK,EAAE,EAAE,IAAI,EAAE,aAAa,CAAC,IAAI,EAAE,EACnC,CAAC,EAAC,iHAAiH,GACnH,CACE,EACL,IAAI,CAAC,WAAW,CACZ,KAEP,CAAa,CAAA,MAAA,EAAA,IAAA,CAAA,CACd,CACM;;;;;;;","names":[],"sources":["src/components/b8-button/b8-button.css?tag=b8-button&encapsulation=shadow","src/components/b8-button/b8-button.tsx"],"sourcesContent":[":host {\n  --neutral-primary-opacity-25: rgba(5, 5, 5, 0.25); /* Cor original do spinner primary circle */\n  --brand-primary-light-opacity-100: var(--brand-primary-light); /* Cor original do spinner secondary/tertiary/link circle */\n}\n\n.b8-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem; /* 8px */\n  white-space: nowrap;\n  border-radius: 0.5rem; /* 8px */\n  font-weight: 500; /* medium */\n  transition:\n    background-color 0.2s ease-in-out,\n    border-color 0.2s ease-in-out,\n    color 0.2s ease-in-out,\n    box-shadow 0.2s ease-in-out;\n  border: 1px solid transparent; /* Base para borda */\n  cursor: pointer;\n  outline: none; /* Removido para customizar o focus-visible */\n  position: relative; /* Para o spinner */\n  text-decoration: none; /* Para variant link */\n}\n\n/* Focus-visible */\n.b8-button:focus-visible {\n  box-shadow: 0 0 0 4px var(--brand-primary-light); /* focus-visible:ring-brand-primary-light focus-visible:ring-[4px] */\n  border-color: transparent; /* Garante que a borda não mude */\n}\n\n/* Ícones SVG dentro do botão */\n.b8-button svg:not([class*='size-']) {\n  width: 1rem; /* size-4 */\n  height: 1rem; /* size-4 */\n  flex-shrink: 0;\n  pointer-events: none; /* Garante que o clique passe para o botão */\n}\n\n/* \n   VARIANTS\n    */\n\n/* Primary */\n.b8-button--primary {\n  background-color: var(--brand-primary-medium); /* bg-brand-primary-medium */\n  border-color: var(--brand-primary-medium); /* border-brand-primary-medium */\n  color: var(--neutral-primary); /* text-neutral-primary (ajustado para on-accent) */\n}\n\n.b8-button--primary:hover:not(:disabled) {\n  background-color: var(--brand-primary-light); /* hover:bg-brand-primary-light */\n  border-color: var(--brand-primary-bold); /* hover:border-brand-primary-bold */\n}\n\n/* Secondary */\n.b8-button--secondary {\n  background-color: transparent; /* bg-transparent */\n  color: var(--brand-primary-bold); /* text-brand-primary-bold */\n  border-color: var(--brand-primary-bold); /* border-brand-primary-bold */\n}\n\n.b8-button--secondary:hover:not(:disabled) {\n  background-color: var(--brand-primary-light); /* hover:bg-brand-primary-light */\n  border-color: var(--brand-primary-bold); /* Mantém a borda bold */\n}\n\n/* Tertiary */\n.b8-button--tertiary {\n  background-color: transparent; /* bg-transparent */\n  color: var(--brand-primary-bold); /* text-brand-primary-bold */\n  border-color: transparent; /* Sem borda */\n}\n\n.b8-button--tertiary:hover:not(:disabled) {\n  background-color: var(--brand-primary-light); /* hover:bg-brand-primary-light */\n  border-color: var(--brand-primary-light); /* hover:border-brand-primary-light */\n}\n\n/* Link */\n.b8-button--link {\n  background-color: transparent; /* bg-transparent */\n  color: var(--brand-primary-bold); /* text-brand-primary-bold */\n  border-color: transparent; /* Sem borda */\n  padding: 0; /* Links geralmente não têm padding padrão de botão */\n  height: auto; /* Links geralmente não têm altura fixa */\n  gap: 0.25rem; /* gap-1 */\n}\n\n.b8-button--link:hover:not(:disabled) {\n  text-decoration: underline;\n}\n\n/* \n   SIZES\n    */\n\n/* Extra Small */\n.b8-button--xs {\n  height: 2.25rem; /* h-9 */\n  gap: 0.25rem; /* gap-1 */\n  border-radius: 0.5rem; /* rounded-lg */\n  padding: 0 0.75rem; /* px-3 */\n  font-size: 0.875rem; /* text-sm */\n}\n\n/* Small */\n.b8-button--sm {\n  height: 2.5rem; /* h-10 */\n  border-radius: 0.5rem; /* rounded-lg */\n  gap: 0.5rem; /* gap-2 */\n  font-size: 0.875rem; /* text-sm */\n  padding: 0 0.75rem; /* px-3 */\n}\n\n/* Medium (Default) */\n.b8-button--md {\n  height: 3rem; /* h-12 */\n  padding: 0 1.25rem; /* px-5 */\n  font-size: 1rem; /* text-base */\n}\n\n/* Large */\n.b8-button--lg {\n  height: 3.5rem; /* h-14 */\n  border-radius: 0.5rem; /* rounded-lg */\n  font-size: 1rem; /* text-base */\n  padding: 0 1.25rem; /* px-5 */\n}\n\n/* Icon Sizes */\n.b8-button--icon-xs {\n  width: 2.25rem; /* size-9 */\n  height: 2.25rem; /* size-9 */\n  border-radius: 0.375rem; /* rounded-md */\n  padding: 0;\n  gap: 0;\n}\n.b8-button--icon-xs svg:not([class*='size-']) {\n  width: 0.75rem; /* size-3 */\n  height: 0.75rem; /* size-3 */\n}\n\n.b8-button--icon-sm {\n  width: 2.5rem; /* size-10 */\n  height: 2.5rem; /* size-10 */\n  padding: 0;\n  gap: 0;\n}\n.b8-button--icon-sm svg:not([class*='size-']) {\n  width: 1rem; /* size-4 */\n  height: 1rem; /* size-4 */\n}\n\n.b8-button--icon-md {\n  width: 3rem; /* size-12 */\n  height: 3rem; /* size-12 */\n  padding: 0;\n  gap: 0;\n}\n.b8-button--icon-md svg:not([class*='size-']) {\n  width: 1rem; /* size-4 */\n  height: 1rem; /* size-4 */\n}\n\n.b8-button--icon-lg {\n  width: 3.5rem; /* size-14 */\n  height: 3.5rem; /* size-14 */\n  padding: 0;\n  gap: 0;\n}\n.b8-button--icon-lg svg:not([class*='size-']) {\n  width: 1.25rem; /* size-5 */\n  height: 1.25rem; /* size-5 */\n}\n\n/* \n   STATES\n    */\n\n/* Disabled */\n.b8-button--disabled {\n  pointer-events: none;\n  cursor: not-allowed;\n  border-color: transparent;\n  color: var(--neutral-quartenary); /* text-neutral-quartenary */\n  font-weight: 600; /* font-semibold */\n  background-color: var(--neutral-quinary); /* bg-neutral-quinary */\n}\n\n/* Loading */\n.b8-button--loading {\n  pointer-events: none;\n  cursor: wait;\n  /* O texto e background são controlados via JS para o spinner */\n}\n\n.b8-button__loading-content {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem; /* gap-2 */\n}\n\n.b8-button__spinner {\n  animation: spin 1s linear infinite;\n  width: 1rem; /* size-4 */\n  height: 1rem; /* size-4 */\n  flex-shrink: 0;\n}\n\n.b8-button__spinner-circle {\n  opacity: 0.25;\n}\n\n.b8-button__spinner-path {\n  opacity: 0.75;\n}\n","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'b8-button',\n  styleUrl: 'b8-button.css',\n  shadow: true,\n})\nexport class B8Button {\n  @Prop() variant = 'primary';\n  @Prop() size = 'md';\n  @Prop({ attribute: 'is-loading' }) isLoading: boolean = false;\n  @Prop({ attribute: 'loading-text' }) loadingText: string = 'Aguarde...';\n  @Prop({ attribute: 'is-disabled' }) isDisabled: boolean = false;\n  @Event() b8Click: EventEmitter<MouseEvent>;\n\n  private handleClick = (event: MouseEvent) => {\n    if (!this.isDisabled && !this.isLoading) {\n      this.b8Click.emit(event);\n    }\n  };\n\n  private getSpinnerColors(variant) {\n    switch (variant) {\n      case 'primary':\n        return {\n          circle: 'var(--neutral-primary-opacity-25)',\n          path: 'var(--neutral-on-accent)',\n        };\n      case 'secondary':\n      case 'tertiary':\n      case 'link':\n        return {\n          circle: 'var(--brand-primary-light-opacity-100)',\n          path: 'var(--brand-primary-700)', // bold\n        };\n      default:\n        return {\n          circle: 'var(--neutral-primary-opacity-25)',\n          path: 'var(--neutral-on-accent)',\n        };\n    }\n  }\n\n  render() {\n    const isDisabledState = this.isDisabled || this.isLoading;\n    const spinnerColors = this.getSpinnerColors(this.variant);\n\n    return (\n      <button\n        class={{\n          'b8-button': true,\n          [`b8-button--${this.variant}`]: true,\n          [`b8-button--${this.size}`]: true,\n          'b8-button--loading': this.isLoading,\n          'b8-button--disabled': isDisabledState,\n        }}\n        disabled={isDisabledState}\n        onClick={this.handleClick}\n      >\n        {this.isLoading ? (\n          <span class=\"b8-button__loading-content\">\n            <svg class=\"b8-button__spinner\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n              <circle class=\"b8-button__spinner-circle\" style={{ stroke: spinnerColors.circle }} cx=\"12\" cy=\"12\" r=\"10\" stroke-width=\"4\" />\n              <path\n                class=\"b8-button__spinner-path\"\n                style={{ fill: spinnerColors.path }}\n                d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n              />\n            </svg>\n            {this.loadingText}\n          </span>\n        ) : (\n          <slot></slot>\n        )}\n      </button>\n    );\n  }\n}\n"],"version":3}

package/dist/beightone-ui-components/beightone-ui-components.css

@@ -0,0 +1,112 @@
+:host {
+  --brand-primary-50: #f7ffec;
+  --brand-primary-100: #e9ffc9;
+  --brand-primary-200: #dcffa7;
+  --brand-primary-300: #ceff84;
+  --brand-primary-400: #c0ff62;
+  --brand-primary-500: #b2ff3f;
+  --brand-primary-600: #97df2b;
+  --brand-primary-700: #7cbd19;
+  --brand-primary-800: #629b0c;
+  --brand-primary-900: #4a7902;
+  --brand-primary-950: #345700;
+  --brand-secondary-50: #f8f3ff;
+  --brand-secondary-100: #e2d0ff;
+  --brand-secondary-200: #ccadff;
+  --brand-secondary-300: #b68bff;
+  --brand-secondary-400: #a67bed;
+  --brand-secondary-500: #9168d3;
+  --brand-secondary-600: #7d57ba;
+  --brand-secondary-700: #6947a0;
+  --brand-secondary-800: #563987;
+  --brand-secondary-900: #442b6e;
+  --brand-secondary-950: #331f54;
+  --universal-amber-50: #fffbeb;
+  --universal-amber-100: #fef3c7;
+  --universal-amber-200: #fde68a;
+  --universal-amber-300: #fcd34d;
+  --universal-amber-400: #fbbf24;
+  --universal-amber-500: #f59e0b;
+  --universal-amber-600: #d97706;
+  --universal-amber-700: #b45309;
+  --universal-amber-800: #92400e;
+  --universal-amber-900: #78350f;
+  --universal-amber-950: #451a03;
+  --universal-blue-50: #eff6ff;
+  --universal-blue-100: #dbeafe;
+  --universal-blue-200: #bfdbfe;
+  --universal-blue-300: #93c5fd;
+  --universal-blue-400: #60a5fa;
+  --universal-blue-500: #3b82f6;
+  --universal-blue-600: #2563eb;
+  --universal-blue-700: #1d4ed8;
+  --universal-blue-800: #1e40af;
+  --universal-blue-900: #1e3a8a;
+  --universal-blue-950: #172554;
+  --universal-green-100: #dcfce7;
+  --universal-green-200: #bbf7d0;
+  --universal-green-300: #86efac;
+  --universal-green-400: #4ade80;
+  --universal-green-50: #f0fdf4;
+  --universal-green-500: #22c55e;
+  --universal-green-600: #16a34a;
+  --universal-green-700: #15803d;
+  --universal-green-800: #166534;
+  --universal-green-900: #14532d;
+  --universal-green-950: #052e16;
+  --universal-neutral-0: #ffffff;
+  --universal-neutral-100: #f5f5f5;
+  --universal-neutral-200: #e5e5e5;
+  --universal-neutral-300: #d4d4d4;
+  --universal-neutral-400: #a3a3a3;
+  --universal-neutral-50: #fafafa;
+  --universal-neutral-500: #737373;
+  --universal-neutral-600: #525252;
+  --universal-neutral-700: #404040;
+  --universal-neutral-800: #262626;
+  --universal-neutral-900: #171717;
+  --universal-neutral-950: #0a0a0a;
+  --universal-red-100: #fee2e2;
+  --universal-red-200: #fecaca;
+  --universal-red-300: #fca5a5;
+  --universal-red-400: #f87171;
+  --universal-red-50: #fef2f2;
+  --universal-red-500: #ef4444;
+  --universal-red-600: #dc2626;
+  --universal-red-700: #b91c1c;
+  --universal-red-800: #991b1b;
+  --universal-red-900: #7f1d1d;
+  --universal-red-950: #450a0a;
+
+  --neutral-primary: var(--universal-neutral-950);
+  --neutral-secondary: var(--universal-neutral-600);
+  --neutral-tertiary: var(--universal-neutral-500);
+  --neutral-quartenary: var(--universal-neutral-400);
+  --neutral-quinary: var(--universal-neutral-200);
+  --neutral-on-accent: var(--universal-neutral-0);
+
+  --brand-primary-bold: var(--brand-primary-900);
+  --brand-primary-medium: var(--brand-primary-600);
+  --brand-primary-light: var(--brand-primary-300);
+
+  --brand-secondary-bold: var(--brand-secondary-700);
+  --brand-secondary-light: var(--brand-secondary-300);
+
+  --feedback-positive-bold: var(--universal-green-800);
+  --feedback-positive-light: var(--universal-green-400);
+
+  --feedback-negative-bold: var(--universal-red-600);
+  --feedback-negative-light: var(--universal-red-400);
+
+  --feedback-attention-bold: var(--universal-green-700);
+  --feedback-attention-light: var(--universal-green-300);
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/dist/beightone-ui-components/beightone-ui-components.esm.js

@@ -0,0 +1,50 @@
+import { B as BUILD, c as consoleDevInfo, H, w as win, N as NAMESPACE, p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-B9cmM_jf.js';
+export { s as setNonce } from './index-B9cmM_jf.js';
+
+/*
+ Stencil Client Patch Browser v4.43.0 | MIT Licensed | https://stenciljs.com
+ */
+
+var patchBrowser = () => {
+  if (BUILD.isDev && !BUILD.isTesting) {
+    consoleDevInfo("Running in development mode.");
+  }
+  if (BUILD.cloneNodeFix) {
+    patchCloneNodeFix(H.prototype);
+  }
+  const scriptElm = BUILD.scriptDataOpts ? win.document && Array.from(win.document.querySelectorAll("script")).find(
+    (s) => new RegExp(`/${NAMESPACE}(\\.esm)?\\.js($|\\?|#)`).test(s.src) || s.getAttribute("data-stencil-namespace") === NAMESPACE
+  ) : null;
+  const importMeta = import.meta.url;
+  const opts = BUILD.scriptDataOpts ? (scriptElm || {})["data-opts"] || {} : {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return promiseResolve(opts);
+};
+var patchCloneNodeFix = (HTMLElementPrototype) => {
+  const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;
+  HTMLElementPrototype.cloneNode = function(deep) {
+    if (this.nodeName === "TEMPLATE") {
+      return nativeCloneNodeFn.call(this, deep);
+    }
+    const clonedNode = nativeCloneNodeFn.call(this, false);
+    const srcChildNodes = this.childNodes;
+    if (deep) {
+      for (let i = 0; i < srcChildNodes.length; i++) {
+        if (srcChildNodes[i].nodeType !== 2) {
+          clonedNode.appendChild(srcChildNodes[i].cloneNode(true));
+        }
+      }
+    }
+    return clonedNode;
+  };
+};
+
+patchBrowser().then(async (options) => {
+  await globalScripts();
+  return bootstrapLazy([["b8-button",[[769,"b8-button",{"variant":[1],"size":[1],"isLoading":[4,"is-loading"],"loadingText":[1,"loading-text"],"isDisabled":[4,"is-disabled"]}]]]], options);
+});
+//# sourceMappingURL=beightone-ui-components.esm.js.map
+
+//# sourceMappingURL=beightone-ui-components.esm.js.map

package/dist/beightone-ui-components/beightone-ui-components.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"beightone-ui-components.esm.js","sources":["../../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.43.0 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, H, promiseResolve, win } from \"@stencil/core\";\nvar patchBrowser = () => {\n  if (BUILD.isDev && !BUILD.isTesting) {\n    consoleDevInfo(\"Running in development mode.\");\n  }\n  if (BUILD.cloneNodeFix) {\n    patchCloneNodeFix(H.prototype);\n  }\n  const scriptElm = BUILD.scriptDataOpts ? win.document && Array.from(win.document.querySelectorAll(\"script\")).find(\n    (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n  ) : null;\n  const importMeta = import.meta.url;\n  const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n  if (importMeta !== \"\") {\n    opts.resourcesUrl = new URL(\".\", importMeta).href;\n  }\n  return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n  const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n  HTMLElementPrototype.cloneNode = function(deep) {\n    if (this.nodeName === \"TEMPLATE\") {\n      return nativeCloneNodeFn.call(this, deep);\n    }\n    const clonedNode = nativeCloneNodeFn.call(this, false);\n    const srcChildNodes = this.childNodes;\n    if (deep) {\n      for (let i = 0; i < srcChildNodes.length; i++) {\n        if (srcChildNodes[i].nodeType !== 2) {\n          clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n        }\n      }\n    }\n    return clonedNode;\n  };\n};\nexport {\n  patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"names":[],"mappings":";;;AAAA;AACA;AACA;;AAKA,IAAI,YAAY,GAAG,MAAM;AACzB,EAAE,IAAI,KAAK,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE;AACvC,IAAI,cAAc,CAAC,8BAA8B,CAAC;AAClD;AACA,EAAE,IAAI,KAAK,CAAC,YAAY,EAAE;AAC1B,IAAI,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC;AAClC;AACA,EAAE,MAAM,SAAS,GAAG,KAAK,CAAC,cAAc,GAAG,GAAG,CAAC,QAAQ,IAAI,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI;AACnH,IAAI,CAAC,CAAC,KAAK,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,uBAAuB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,YAAY,CAAC,wBAAwB,CAAC,KAAK;AAC1H,GAAG,GAAG,IAAI;AACV,EAAE,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG;AACpC,EAAE,MAAM,IAAI,GAAG,KAAK,CAAC,cAAc,GAAG,CAAC,SAAS,IAAI,EAAE,EAAE,WAAW,CAAC,IAAI,EAAE,GAAG,EAAE;AAC/E,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI;AACrD;AACA,EAAE,OAAO,cAAc,CAAC,IAAI,CAAC;AAC7B,CAAC;AACD,IAAI,iBAAiB,GAAG,CAAC,oBAAoB,KAAK;AAClD,EAAE,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,SAAS;AAC1D,EAAE,oBAAoB,CAAC,SAAS,GAAG,SAAS,IAAI,EAAE;AAClD,IAAI,IAAI,IAAI,CAAC,QAAQ,KAAK,UAAU,EAAE;AACtC,MAAM,OAAO,iBAAiB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC;AAC/C;AACA,IAAI,MAAM,UAAU,GAAG,iBAAiB,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC;AAC1D,IAAI,MAAM,aAAa,GAAG,IAAI,CAAC,UAAU;AACzC,IAAI,IAAI,IAAI,EAAE;AACd,MAAM,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AACrD,QAAQ,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,CAAC,EAAE;AAC7C,UAAU,UAAU,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;AAClE;AACA;AACA;AACA,IAAI,OAAO,UAAU;AACrB,GAAG;AACH,CAAC;;ACrCD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAM,aAAa,EAAE;AACvB,EAAE,OAAO,aAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D,CAAC,CAAC","x_google_ignoreList":[0]}