@mozaic-ds/web-components 1.0.0-alpha.4 → 1.0.0-alpha.5

package/dist/{components/badge → badge}/Badge.js

@@ -1,4 +1,4 @@
-import{c as g,p as b,a as u,b as d,t as m,f as v,k as h,B as p,j as w,e as x,g as k,h as y,i as n,r as z}from"../../custom-element.js";var _=m("<div> </div>");const j={hash:"svelte-1hwtfua",code:`/**
+import{c as g,p as b,a as u,b as d,t as m,f as v,k as h,B as p,j as w,e as x,g as k,h as y,i as n,r as z}from"../custom-element.js";var _=m("<div> </div>");const j={hash:"svelte-1hwtfua",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-badge.svelte-1hwtfua {color:var(--badge-color-text-standard, #ffffff);background-color:var(--badge-color-background-standard, #464e63);height:1rem;min-width:1rem;padding:0 0.125rem;font-size:0.625rem;border-radius:1rem;font-weight:600;display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;}.mc-badge--m.svelte-1hwtfua {height:1.5rem;min-width:1.5rem;padding:0 0.25rem;font-size:0.75rem;}.mc-badge--accent.svelte-1hwtfua {color:var(--badge-color-text-accent, #ffffff);background-color:var(--badge-color-background-accent, #117f03);}.mc-badge--danger.svelte-1hwtfua {color:var(--badge-color-text-danger, #ffffff);background-color:var(--badge-color-background-danger, #c61112);}.mc-badge--inverse.svelte-1hwtfua {color:var(--badge-color-text-inverse, #464e63);background-color:var(--badge-color-background-inverse, #ffffff);}`};function B(l,a){b(a,!0),u(l,j);let s=d(a,"label",7,""),o=d(a,"style",7,"standard"),t=d(a,"size",7,"s");function f(e){const c=["mc-badge"];return e&&c.push(`mc-badge--${e}`),t()&&c.push(`mc-badge--${t()}`),c.join(" ")}var r=_(),i=x(r,!0);return z(r),v(e=>{h(r,1,p(e),"svelte-1hwtfua"),w(i,s())},[()=>f(o())]),k(l,r),y({get label(){return s()},set label(e=""){s(e),n()},get style(){return o()},set style(e="standard"){o(e),n()},get size(){return t()},set size(e="s"){t(e),n()}})}customElements.define("m-badge",g(B,{label:{},style:{},size:{}},[],[],!1));
 //# sourceMappingURL=Badge.js.map

package/dist/badge/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sources":["../../src/components/badge/Badge.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-badge', shadow: 'none' }} />\n\n<script lang=\"ts\">\n  import type { BadgeStyle, BadgeSize } from './badge.types';\n  interface Props {\n    label: string;\n    style: BadgeStyle;\n    size: BadgeSize;\n  }\n\n  let { label = '', style = 'standard', size = 's' }: Props = $props();\n\n  function setClasses(style: BadgeStyle) {\n    const classes = ['mc-badge'];\n\n    if (style) {\n      classes.push(`mc-badge--${style}`);\n    }\n\n    if (size) {\n      classes.push(`mc-badge--${size}`);\n    }\n\n    return classes.join(' ');\n  }\n</script>\n\n<div class={setClasses(style)}>\n  {label}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/badge';\n</style>\n"],"names":["label","style","size","setClasses","classes"],"mappings":";;63BAUQ,IAAAA,gBAAQ,EAAE,EAAEC,gBAAQ,UAAU,EAAEC,eAAO,GAAG,WAEvCC,EAAWF,EAAmB,CAC/B,MAAAG,GAAW,UAAU,EAEvB,OAAAH,GACFG,EAAQ,KAAI,aAAcH,CAAK,EAAA,EAG7BC,EAAI,GACNE,EAAQ,KAAI,aAAcF,EAAI,CAAA,EAAA,EAGzBE,EAAQ,KAAK,GAAG,CACzB,wEAICJ,GAAK,GADI,CAAA,IAAAG,EAAWF,GAAK,CAAA,iDAjBZ,GAAE,+CAAU,WAAU,6CAAS,IAAG"}

package/dist/badge/Badge.svelte

@@ -0,0 +1,66 @@
+<svelte:options customElement={{ tag: 'm-badge', shadow: 'none' }} />
+
+<script lang="ts">
+  import type { BadgeStyle, BadgeSize } from './badge.types';
+  interface Props {
+    label: string;
+    style: BadgeStyle;
+    size: BadgeSize;
+  }
+
+  let { label = '', style = 'standard', size = 's' }: Props = $props();
+
+  function setClasses(style: BadgeStyle) {
+    const classes = ['mc-badge'];
+
+    if (style) {
+      classes.push(`mc-badge--${style}`);
+    }
+
+    if (size) {
+      classes.push(`mc-badge--${size}`);
+    }
+
+    return classes.join(' ');
+  }
+</script>
+
+<div class={setClasses(style)}>
+  {label}
+</div>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-badge {
+  color: var(--badge-color-text-standard, #ffffff);
+  background-color: var(--badge-color-background-standard, #464e63);
+  height: 1rem;
+  min-width: 1rem;
+  padding: 0 0.125rem;
+  font-size: 0.625rem;
+  border-radius: 1rem;
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  justify-content: center;
+}
+.mc-badge--m {
+  height: 1.5rem;
+  min-width: 1.5rem;
+  padding: 0 0.25rem;
+  font-size: 0.75rem;
+}
+.mc-badge--accent {
+  color: var(--badge-color-text-accent, #ffffff);
+  background-color: var(--badge-color-background-accent, #117f03);
+}
+.mc-badge--danger {
+  color: var(--badge-color-text-danger, #ffffff);
+  background-color: var(--badge-color-background-danger, #c61112);
+}
+.mc-badge--inverse {
+  color: var(--badge-color-text-inverse, #464e63);
+  background-color: var(--badge-color-background-inverse, #ffffff);
+}</style>

package/dist/badge/Badge.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { BadgeStyle, BadgeSize } from './badge.types';
+interface Props {
+    label: string;
+    style: BadgeStyle;
+    size: BadgeSize;
+}
+declare const Badge: import("svelte").Component<Props, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;
+//# sourceMappingURL=Badge.svelte.d.ts.map

package/dist/badge/Badge.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.svelte.d.ts","sourceRoot":"","sources":["../../src/components/badge/Badge.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAEzD,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,UAAU,CAAC;IAClB,IAAI,EAAE,SAAS,CAAC;CACjB;AAgCH,QAAA,MAAM,KAAK,2CAAsC,CAAC;AAClD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/badge/badge.types.d.ts

@@ -0,0 +1,3 @@
+export type BadgeStyle = 'danger' | 'accent' | 'inverse' | 'standard';
+export type BadgeSize = 's' | 'm';
+//# sourceMappingURL=badge.types.d.ts.map

package/dist/badge/badge.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.types.d.ts","sourceRoot":"","sources":["../../src/components/badge/badge.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;AACtE,MAAM,MAAM,SAAS,GAAG,GAAG,GAAG,GAAG,CAAC"}

package/dist/badge/badge.types.js

@@ -0,0 +1 @@
+export {};

package/dist/bundle.js

@@ -0,0 +1,31 @@
+
+import Button from './components/button/Button.js';
+import IconButton from './components/button/IconButton.js';
+
+import Checkbox from './components/checkbox/Checkbox.js';
+import CheckboxGroup from './components/checkboxgroup/checkboxGroup.js';
+import Textarea from './components/textarea/Textarea.js';
+import Select from './components/select/Select.js';
+
+import Toggle from './components/toggle/Toggle.js';
+
+import Field from './components/field/Field.js';
+
+import Link from './components/link/Link.js';
+
+import Loader from './components/loader/Loader.js';
+
+import Textinput from './components/textinput/Textinput.js';
+
+import Overlay from './components/overlay/Overlay.js';
+import OverlayLoader from './components/overlay/OverlayLoader.js';
+
+import Radio from './components/radio/Radio.js';
+import RadioGroup from './components/radiogroup/RadioGroup.js';
+
+import QuantitySelector from './components/quantityselector/QuantitySelector.js';
+
+import Badge from './components/badge/Badge.js';
+import StatusBadge from './components/statusbadge/StatusBadge.js';
+import StatusDot from './components/statusbadge/StatusDot.js';
+

package/dist/{components/button → button}/Button.js

@@ -1,4 +1,4 @@
-import{c as W,p as X,a as Y,b as g,t as x,s as N,e as y,f as K,g as d,h as Z,i as m,r as z,k as $,o as oo,al as h,am as _}from"../../custom-element.js";import{i}from"../../if.js";import{h as O}from"../../html.js";import{s as to,a as L}from"../../slot.js";import{b as eo,C as ro}from"../../attributes.js";import{L as no}from"../loader/Loader.js";var ao=x('<span class="mc-button__icon svelte-jolktj"><!></span>'),lo=x('<span class="mc-button__icon svelte-jolktj"><!></span>'),co=x("<span><!></span>"),so=x('<span class="mc-button__icon svelte-jolktj"><!></span>'),bo=x("<button><!> <!> <!> <!></button>");const uo={hash:"svelte-jolktj",code:`/**
+import{c as W,p as X,a as Y,b as g,t as x,s as N,e as y,f as K,g as d,h as Z,i as m,r as z,k as $,o as oo,al as h,am as _}from"../custom-element.js";import{i}from"../if.js";import{h as O}from"../html.js";import{s as to,a as L}from"../slot.js";import{b as eo,C as ro}from"../attributes.js";import{L as no}from"../loader/Loader.js";var ao=x('<span class="mc-button__icon svelte-jolktj"><!></span>'),lo=x('<span class="mc-button__icon svelte-jolktj"><!></span>'),co=x("<span><!></span>"),so=x('<span class="mc-button__icon svelte-jolktj"><!></span>'),bo=x("<button><!> <!> <!> <!></button>");const uo={hash:"svelte-jolktj",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-button.svelte-jolktj {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);font-weight:600;padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:0.25rem;transition:all ease 200ms;transition:box-shadow 200ms ease;align-items:center;box-sizing:border-box;fill:currentcolor;gap:0.25rem;cursor:pointer;}.mc-button.svelte-jolktj:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-jolktj:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-jolktj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-jolktj .mc-button__label:where(.svelte-jolktj) {font-size:1rem;}.mc-button--s.svelte-jolktj {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--s.svelte-jolktj .mc-button__label:where(.svelte-jolktj) {font-size:0.875rem;}.mc-button--s.svelte-jolktj .mc-button__icon:where(.svelte-jolktj) {width:1.25rem;height:1.25rem;}.mc-button--s.svelte-jolktj .mc-button__icon:where(.svelte-jolktj):only-child {width:1.25rem;height:1.25rem;}.mc-button--m.svelte-jolktj {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button--m.svelte-jolktj .mc-button__label:where(.svelte-jolktj) {font-size:1rem;}.mc-button--m.svelte-jolktj .mc-button__icon:where(.svelte-jolktj) {width:1.5rem;height:1.5rem;}.mc-button--m.svelte-jolktj .mc-button__icon:where(.svelte-jolktj):only-child {width:1.5rem;height:1.5rem;}.mc-button--l.svelte-jolktj {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;}.mc-button--l.svelte-jolktj .mc-button__label:where(.svelte-jolktj) {font-size:1.125rem;}.mc-button--l.svelte-jolktj .mc-button__icon:where(.svelte-jolktj) {width:2rem;height:2rem;}.mc-button--l.svelte-jolktj .mc-button__icon:where(.svelte-jolktj):only-child {width:2rem;height:2rem;}.mc-button__label.svelte-jolktj {font-size:1rem;}.mc-button__icon.svelte-jolktj {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-jolktj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-jolktj:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-button--icon-only.svelte-jolktj {padding:0.25rem;}.mc-button--outlined.svelte-jolktj {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.svelte-jolktj:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-jolktj:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-jolktj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.svelte-jolktj {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.svelte-jolktj:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-jolktj:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-jolktj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--accent.svelte-jolktj {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-jolktj:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-jolktj:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.svelte-jolktj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--danger.svelte-jolktj {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-jolktj:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-jolktj:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.svelte-jolktj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--inverse.svelte-jolktj {--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff);}.mc-button--inverse.svelte-jolktj:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-jolktj:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.svelte-jolktj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--icon-button.svelte-jolktj {border-radius:100%;padding:0;}.mc-button--loading.svelte-jolktj .mc-button__label:where(.svelte-jolktj),
 .mc-button--loading.svelte-jolktj .mc-button__icon:where(.svelte-jolktj) {visibility:hidden;}.mc-button--outlined.mc-button--standard.svelte-jolktj {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.mc-button--standard.svelte-jolktj:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-jolktj:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-jolktj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--accent.svelte-jolktj {color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff);}.mc-button--outlined.mc-button--accent.svelte-jolktj:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-jolktj:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-jolktj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--danger.svelte-jolktj {color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff);}.mc-button--outlined.mc-button--danger.svelte-jolktj:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-jolktj:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-jolktj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--inverse.svelte-jolktj {color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--outlined.mc-button--inverse.svelte-jolktj:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-jolktj:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-jolktj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--standard.svelte-jolktj {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--standard.svelte-jolktj:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-jolktj:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-jolktj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--accent.svelte-jolktj {color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--accent.svelte-jolktj:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-jolktj:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-jolktj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--danger.svelte-jolktj {color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--danger.svelte-jolktj:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-jolktj:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-jolktj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--inverse.svelte-jolktj {color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--inverse.svelte-jolktj:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-jolktj:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-jolktj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button__icon.svelte-jolktj {pointer-events:none;}.hidden.svelte-jolktj {visibility:hidden;}.loader-style.svelte-jolktj {color:currentColor;position:absolute;}`};function io(q,r){const f=to(r);X(r,!0),Y(q,uo);let C=g(r,"appearance",7,"standard"),j=g(r,"size",7,"m"),I=g(r,"ghost",7,!1),A=g(r,"outlined",7,!1),a=g(r,"iconname",7),v=g(r,"iconmode",7),B=g(r,"disabled",7,!1),D=g(r,"type",7,"button"),p=g(r,"isloading",7,!1),M=oo(r,["$$slots","$$events","$$legacy","$$host","appearance","size","ghost","outlined","iconname","iconmode","disabled","type","isloading"]);function E(o,e,s){const b=e==="only";let u;switch(o){case"s":u="24px";break;case"m":u=b?"32px":"24px";break;case"l":u=b?"100%":"32px";break}return`${s} size="${u}" `}var S=bo();let F;var G=y(S);{var P=o=>{no(o,{theme:"standard",style:"color: currentColor; position: absolute;",size:"m",text:""})};i(G,o=>{p()&&o(P)})}var H=N(G,2);{var Q=o=>{var e=ao(),s=y(e);{var b=t=>{var n=h(),l=_(n);L(l,r,"icon",{}),d(t,n)},u=(t,n)=>{{var l=c=>{var k=h(),w=_(k);O(w,()=>`<${E(j(),v(),a())} />`),d(c,k)};i(t,c=>{a()&&c(l)},n)}};i(s,t=>{f.icon?t(b):t(u,!1)})}z(e),d(o,e)};i(H,o=>{(a()||f.icon)&&v()==="left"&&o(Q)})}var J=N(H,2);{var R=o=>{var e=lo(),s=y(e);{var b=t=>{var n=h(),l=_(n);L(l,r,"icon",{}),d(t,n)},u=(t,n)=>{{var l=c=>{var k=h(),w=_(k);O(w,()=>`<${E(j(),v(),a())} />`),d(c,k)};i(t,c=>{a()&&c(l)},n)}};i(s,t=>{f.icon?t(b):t(u,!1)})}z(e),d(o,e)},T=o=>{var e=co();let s;var b=y(e);L(b,r,"default",{}),z(e),K(()=>s=$(e,1,"mc-button__label svelte-jolktj",null,s,{hidden:p()})),d(o,e)};i(J,o=>{(a()||f.icon)&&v()==="only"?o(R):o(T,!1)})}var U=N(J,2);{var V=o=>{var e=so(),s=y(e);{var b=t=>{var n=h(),l=_(n);L(l,r,"icon",{}),d(t,n)},u=(t,n)=>{{var l=c=>{var k=h(),w=_(k);O(w,()=>`<${E(j(),v(),a())} />`),d(c,k)};i(t,c=>{a()&&c(l)},n)}};i(s,t=>{f.icon?t(b):t(u,!1)})}z(e),d(o,e)};i(U,o=>{(a()||f.icon)&&v()==="right"&&o(V)})}return z(S),K(()=>F=eo(S,F,{class:`mc-button ${(j()?`mc-button--${j()}`:"")??""} ${(C()?`mc-button--${C()}`:"")??""}`,disabled:B(),type:D(),...M,[ro]:{"mc-button--ghost":I(),"mc-button--outlined":A(),"mc-button--icon-only":v()=="only","mc-button--loading":p()}},"svelte-jolktj")),d(q,S),Z({get appearance(){return C()},set appearance(o="standard"){C(o),m()},get size(){return j()},set size(o="m"){j(o),m()},get ghost(){return I()},set ghost(o=!1){I(o),m()},get outlined(){return A()},set outlined(o=!1){A(o),m()},get iconname(){return a()},set iconname(o){a(o),m()},get iconmode(){return v()},set iconmode(o){v(o),m()},get disabled(){return B()},set disabled(o=!1){B(o),m()},get type(){return D()},set type(o="button"){D(o),m()},get isloading(){return p()},set isloading(o=!1){p(o),m()}})}customElements.define("m-button",W(io,{appearance:{},size:{},ghost:{},outlined:{},iconname:{},iconmode:{},disabled:{},type:{},isloading:{}},["icon","default"],[],!0));

package/dist/button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sources":["../../src/components/button/Button.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-button' }} />\n\n<script lang=\"ts\">\n  import type {\n    ButtonIconMode,\n    ButtonSize,\n    ButtonStyle,\n    ButtonType,\n  } from './button.types';\n\n  import Loader from '../loader/Loader.svelte';\n\n  interface Props {\n    appearance?: ButtonStyle | undefined;\n    size?: ButtonSize;\n    ghost?: boolean;\n    outlined?: boolean;\n    iconname: string | undefined;\n    iconmode: ButtonIconMode | undefined;\n    disabled?: boolean;\n    type?: ButtonType;\n    isloading?: boolean;\n    [key: string]: any;\n  }\n\n  let {\n    appearance = 'standard',\n    size = 'm',\n    ghost = false,\n    outlined = false,\n    iconname,\n    iconmode,\n    disabled = false,\n    type = 'button',\n    isloading = false,\n    ...events\n  }: Props = $props();\n\n  function generateIconName(\n    size: ButtonSize,\n    iconMode: ButtonIconMode,\n    iconName: string,\n  ): string {\n    const isIconOnly = iconMode === 'only';\n    let iconSize: string;\n\n    switch (size) {\n      case 's':\n        iconSize = '24px';\n        break;\n      case 'm':\n        iconSize = isIconOnly ? '32px' : '24px';\n        break;\n      case 'l':\n        iconSize = isIconOnly ? '100%' : '32px';\n        break;\n    }\n\n    return `${iconName} size=\"${iconSize}\" `;\n  }\n</script>\n\n<button\n  class=\"mc-button {size ? `mc-button--${size}` : ''} {appearance\n    ? `mc-button--${appearance}`\n    : ''}\"\n  class:mc-button--ghost={ghost}\n  class:mc-button--outlined={outlined}\n  class:mc-button--icon-only={iconmode == 'only'}\n  class:mc-button--loading={isloading}\n  {disabled}\n  {type}\n  {...events}\n>\n  {#if isloading}\n    <Loader\n      theme=\"standard\"\n      style=\"color: currentColor; position: absolute;\"\n      size=\"m\"\n      text=\"\"\n    />\n  {/if}\n  {#if (iconname || $$slots.icon) && iconmode === 'left'}\n    <span class=\"mc-button__icon\">\n      {#if $$slots.icon}\n        <slot name=\"icon\" />\n      {:else if iconname}\n        {@html `<${generateIconName(size, iconmode, iconname)} />`}\n      {/if}\n    </span>\n  {/if}\n\n  {#if (iconname || $$slots.icon) && iconmode === 'only'}\n    <span class=\"mc-button__icon\">\n      {#if $$slots.icon}\n        <slot name=\"icon\" />\n      {:else if iconname}\n        {@html `<${generateIconName(size, iconmode, iconname)} />`}\n      {/if}\n    </span>\n  {:else}\n    <span class=\"mc-button__label\" class:hidden={isloading}>\n      <slot />\n    </span>\n  {/if}\n\n  {#if (iconname || $$slots.icon) && iconmode === 'right'}\n    <span class=\"mc-button__icon\">\n      {#if $$slots.icon}\n        <slot name=\"icon\" />\n      {:else if iconname}\n        {@html `<${generateIconName(size, iconmode, iconname)} />`}\n      {/if}\n    </span>\n  {/if}\n</button>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/button';\n\n  .mc-button__icon {\n    pointer-events: none;\n  }\n\n  .hidden {\n    visibility: hidden;\n  }\n\n  .loader-style {\n    color: currentColor;\n    position: absolute;\n  }\n</style>\n"],"names":["appearance","size","ghost","outlined","iconname","$.prop","$$props","iconmode","disabled","type","isloading","events","$.rest_props","generateIconName","iconMode","iconName","isIconOnly","iconSize","$$render","consequent","$.html","node_4","consequent_2","$$slots","consequent_1","alternate","consequent_3","node_8","consequent_5","consequent_4","alternate_1","consequent_6","alternate_2","node_13","consequent_8","consequent_7","alternate_3","consequent_9"],"mappings":";;;4oMA0BI,IAAAA,qBAAa,UAAU,EACvBC,eAAO,GAAG,EACVC,gBAAQ,EAAK,EACbC,mBAAW,EAAK,EAChBC,EAAQC,EAAAC,EAAA,WAAA,CAAA,EACRC,EAAQF,EAAAC,EAAA,WAAA,CAAA,EACRE,mBAAW,EAAK,EAChBC,eAAO,QAAQ,EACfC,oBAAY,EAAK,EACdC,EAAAC,GAAAN,EAAA,uIAGI,SAAAO,EACPZ,EACAa,EACAC,EACQ,OACFC,EAAaF,IAAa,WAC5BG,SAEIhB,EAAI,KACL,IACHgB,EAAW,iBAER,IACHA,EAAWD,EAAa,OAAS,iBAE9B,IACHC,EAAWD,EAAa,OAAS,aAI3B,MAAA,GAAAD,CAAQ,UAAUE,CAAQ,IACtC,4IAeKP,EAAS,GAAAQ,EAAAC,CAAA,yIAaGC,EAAAC,EAAA,IAAA,IAAAR,EAAiBZ,IAAMM,IAAUH,GAAQ,CAAA,KAAA,kBAD5CA,EAAQ,GAAAc,EAAAI,CAAA,gBAFbC,EAAQ,KAAIL,EAAAM,CAAA,EAAAN,EAAAO,EAAA,EAAA,0BAFfrB,KAAYmB,EAAQ,OAAShB,MAAa,QAAMW,EAAAQ,CAAA,yIAerCN,EAAAO,EAAA,IAAA,IAAAd,EAAiBZ,IAAMM,IAAUH,GAAQ,CAAA,KAAA,kBAD5CA,EAAQ,GAAAc,EAAAU,CAAA,gBAFbL,EAAQ,KAAIL,EAAAW,CAAA,EAAAX,EAAAY,EAAA,EAAA,0IAO0BpB,EAAS,CAAA,CAAA,CAAA,mBATlDN,KAAYmB,EAAQ,OAAShB,MAAa,OAAMW,EAAAa,CAAA,EAAAb,EAAAc,EAAA,EAAA,yIAmBrCZ,EAAAa,EAAA,IAAA,IAAApB,EAAiBZ,IAAMM,IAAUH,GAAQ,CAAA,KAAA,kBAD5CA,EAAQ,GAAAc,EAAAgB,CAAA,gBAFbX,EAAQ,KAAIL,EAAAiB,CAAA,EAAAjB,EAAAkB,EAAA,EAAA,0BAFfhC,KAAYmB,EAAQ,OAAShB,MAAa,SAAOW,EAAAmB,CAAA,oDA3CrCpC,EAAI,EAAA,cAAiBA,GAAS,GAAA,YAAKD,EACnC,EAAA,cAAAA,EAAU,IACxB,KAAE,EAAA,4BAOFW,2BANoBT,EAAK,wBACFC,EAAQ,EACP,uBAAAI,EAAQ,GAAI,4BACdG,EAAS,8EA3CpB,WAAU,6CAChB,IAAG,+CACF,GAAK,qDACF,GAAK,+JAGL,GAAK,6CACT,SAAQ,uDACH,GAAK"}

package/dist/button/Button.svelte

@@ -0,0 +1,466 @@
+<svelte:options customElement={{ tag: 'm-button' }} />
+
+<script lang="ts">
+  import type {
+    ButtonIconMode,
+    ButtonSize,
+    ButtonStyle,
+    ButtonType,
+  } from './button.types';
+
+  import Loader from '../loader/Loader.svelte';
+
+  interface Props {
+    appearance?: ButtonStyle | undefined;
+    size?: ButtonSize;
+    ghost?: boolean;
+    outlined?: boolean;
+    iconname: string | undefined;
+    iconmode: ButtonIconMode | undefined;
+    disabled?: boolean;
+    type?: ButtonType;
+    isloading?: boolean;
+    [key: string]: any;
+  }
+
+  let {
+    appearance = 'standard',
+    size = 'm',
+    ghost = false,
+    outlined = false,
+    iconname,
+    iconmode,
+    disabled = false,
+    type = 'button',
+    isloading = false,
+    ...events
+  }: Props = $props();
+
+  function generateIconName(
+    size: ButtonSize,
+    iconMode: ButtonIconMode,
+    iconName: string,
+  ): string {
+    const isIconOnly = iconMode === 'only';
+    let iconSize: string;
+
+    switch (size) {
+      case 's':
+        iconSize = '24px';
+        break;
+      case 'm':
+        iconSize = isIconOnly ? '32px' : '24px';
+        break;
+      case 'l':
+        iconSize = isIconOnly ? '100%' : '32px';
+        break;
+    }
+
+    return `${iconName} size="${iconSize}" `;
+  }
+</script>
+
+<button
+  class="mc-button {size ? `mc-button--${size}` : ''} {appearance
+    ? `mc-button--${appearance}`
+    : ''}"
+  class:mc-button--ghost={ghost}
+  class:mc-button--outlined={outlined}
+  class:mc-button--icon-only={iconmode == 'only'}
+  class:mc-button--loading={isloading}
+  {disabled}
+  {type}
+  {...events}
+>
+  {#if isloading}
+    <Loader
+      theme="standard"
+      style="color: currentColor; position: absolute;"
+      size="m"
+      text=""
+    />
+  {/if}
+  {#if (iconname || $$slots.icon) && iconmode === 'left'}
+    <span class="mc-button__icon">
+      {#if $$slots.icon}
+        <slot name="icon" />
+      {:else if iconname}
+        {@html `<${generateIconName(size, iconmode, iconname)} />`}
+      {/if}
+    </span>
+  {/if}
+
+  {#if (iconname || $$slots.icon) && iconmode === 'only'}
+    <span class="mc-button__icon">
+      {#if $$slots.icon}
+        <slot name="icon" />
+      {:else if iconname}
+        {@html `<${generateIconName(size, iconmode, iconname)} />`}
+      {/if}
+    </span>
+  {:else}
+    <span class="mc-button__label" class:hidden={isloading}>
+      <slot />
+    </span>
+  {/if}
+
+  {#if (iconname || $$slots.icon) && iconmode === 'right'}
+    <span class="mc-button__icon">
+      {#if $$slots.icon}
+        <slot name="icon" />
+      {:else if iconname}
+        {@html `<${generateIconName(size, iconmode, iconname)} />`}
+      {/if}
+    </span>
+  {/if}
+</button>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-button {
+  color: var(--button-color-filled-standard-font, #ffffff);
+  background-color: var(--button-color-filled-standard-background, #464e63);
+  font-weight: 600;
+  padding: 0 calc(1rem - 0.125rem);
+  min-height: 3rem;
+  min-width: 3rem;
+  display: inline-flex;
+  justify-content: center;
+  vertical-align: middle;
+  text-align: center;
+  border: 2px solid transparent;
+  border-radius: 0.25rem;
+  transition: all ease 200ms;
+  transition: box-shadow 200ms ease;
+  align-items: center;
+  box-sizing: border-box;
+  fill: currentcolor;
+  gap: 0.25rem;
+  cursor: pointer;
+}
+.mc-button:hover {
+  background-color: var(--button-color-filled-standard-hover-background, #343b4c);
+}
+.mc-button:active {
+  background-color: var(--button-color-filled-standard-active-background, #242938);
+}
+.mc-button:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button .mc-button__label {
+  font-size: 1rem;
+}
+.mc-button--s {
+  padding: 0 calc(0.75rem - 0.125rem);
+  min-height: 2rem;
+  min-width: 2rem;
+}
+.mc-button--s .mc-button__label {
+  font-size: 0.875rem;
+}
+.mc-button--s .mc-button__icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.mc-button--s .mc-button__icon:only-child {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.mc-button--m {
+  padding: 0 calc(1rem - 0.125rem);
+  min-height: 3rem;
+  min-width: 3rem;
+}
+.mc-button--m .mc-button__label {
+  font-size: 1rem;
+}
+.mc-button--m .mc-button__icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.mc-button--m .mc-button__icon:only-child {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.mc-button--l {
+  padding: 0 calc(1.25rem - 0.125rem);
+  min-height: 4rem;
+  min-width: 4rem;
+}
+.mc-button--l .mc-button__label {
+  font-size: 1.125rem;
+}
+.mc-button--l .mc-button__icon {
+  width: 2rem;
+  height: 2rem;
+}
+.mc-button--l .mc-button__icon:only-child {
+  width: 2rem;
+  height: 2rem;
+}
+.mc-button__label {
+  font-size: 1rem;
+}
+.mc-button__icon {
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.mc-button:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button:focus-visible {
+  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
+  outline: 0.125rem solid transparent;
+  outline-offset: 0.125rem;
+}
+.mc-button--icon-only {
+  padding: 0.25rem;
+}
+.mc-button--outlined {
+  color: var(--button-color-outlined-standard-font, #242938);
+  border-color: var(--button-color-outlined-standard-border, #8891aa);
+  background-color: var(--button-color-outlined-standard-background, #ffffff);
+}
+.mc-button--outlined:hover {
+  background-color: var(--button-color-outlined-standard-hover-background, #eff1f6);
+}
+.mc-button--outlined:active {
+  background-color: var(--button-color-outlined-standard-active-background, #c9d0de);
+}
+.mc-button--outlined:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--ghost {
+  color: var(--button-color-ghost-standard-font, #242938);
+  background-color: var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--ghost:hover {
+  background-color: var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));
+}
+.mc-button--ghost:active {
+  background-color: var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));
+}
+.mc-button--ghost:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--accent {
+  color: var(--button-color-filled-accent-font, #ffffff);
+  background-color: var(--button-color-filled-accent-background, #117f03);
+}
+.mc-button--accent:hover {
+  background-color: var(--button-color-filled-accent-hover-background, #006902);
+}
+.mc-button--accent:active {
+  background-color: var(--button-color-filled-accent-active-background, #035010);
+}
+.mc-button--accent:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--danger {
+  color: var(--button-color-filled-danger-font, #ffffff);
+  background-color: var(--button-color-filled-danger-background, #c61112);
+}
+.mc-button--danger:hover {
+  background-color: var(--button-color-filled-danger-hover-background, #8c0003);
+}
+.mc-button--danger:active {
+  background-color: var(--button-color-filled-danger-active-background, #530000);
+}
+.mc-button--danger:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--inverse {
+  --focus-color-mid: var(--focus-color-outline-outer, #000000);
+  --focus-color-outer: var(--focus-color-outline-mid, #ffffff);
+  color: var(--button-color-filled-inverse-font, #242938);
+  background-color: var(--button-color-filled-inverse-background, #ffffff);
+}
+.mc-button--inverse:hover {
+  background-color: var(--button-color-filled-inverse-hover-background, #e6e6e6);
+}
+.mc-button--inverse:active {
+  background-color: var(--button-color-filled-inverse-active-background, #cccccc);
+}
+.mc-button--inverse:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--icon-button {
+  border-radius: 100%;
+  padding: 0;
+}
+.mc-button--loading .mc-button__loader {
+  position: absolute;
+  color: currentcolor;
+}
+.mc-button--loading .mc-button__label,
+.mc-button--loading .mc-button__icon {
+  visibility: hidden;
+}
+.mc-button--outlined.mc-button--standard {
+  color: var(--button-color-outlined-standard-font, #242938);
+  border-color: var(--button-color-outlined-standard-border, #8891aa);
+  background-color: var(--button-color-outlined-standard-background, #ffffff);
+}
+.mc-button--outlined.mc-button--standard:hover {
+  background-color: var(--button-color-outlined-standard-hover-background, #eff1f6);
+}
+.mc-button--outlined.mc-button--standard:active {
+  background-color: var(--button-color-outlined-standard-active-background, #c9d0de);
+}
+.mc-button--outlined.mc-button--standard:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--outlined.mc-button--accent {
+  color: var(--button-color-outlined-accent-font, #117f03);
+  border-color: var(--button-color-outlined-accent-border, #78be20);
+  background-color: var(--button-color-outlined-accent-background, #ffffff);
+}
+.mc-button--outlined.mc-button--accent:hover {
+  background-color: var(--button-color-outlined-accent-hover-background, #ebf5de);
+}
+.mc-button--outlined.mc-button--accent:active {
+  background-color: var(--button-color-outlined-accent-active-background, #c5e39e);
+}
+.mc-button--outlined.mc-button--accent:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--outlined.mc-button--danger {
+  color: var(--button-color-outlined-danger-font, #c61112);
+  border-color: var(--button-color-outlined-danger-border, #ef5f5c);
+  background-color: var(--button-color-outlined-danger-background, #ffffff);
+}
+.mc-button--outlined.mc-button--danger:hover {
+  background-color: var(--button-color-outlined-danger-hover-background, #fdeaea);
+}
+.mc-button--outlined.mc-button--danger:active {
+  background-color: var(--button-color-outlined-danger-active-background, #f8bcbb);
+}
+.mc-button--outlined.mc-button--danger:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--outlined.mc-button--inverse {
+  color: var(--button-color-outlined-inverse-font, #ffffff);
+  border-color: var(--button-color-outlined-inverse-border, #ffffff);
+  background-color: var(--button-color-outlined-inverse-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--outlined.mc-button--inverse:hover {
+  background-color: var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));
+}
+.mc-button--outlined.mc-button--inverse:active {
+  background-color: var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));
+}
+.mc-button--outlined.mc-button--inverse:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--ghost.mc-button--standard {
+  color: var(--button-color-ghost-standard-font, #242938);
+  background-color: var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--ghost.mc-button--standard:hover {
+  background-color: var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));
+}
+.mc-button--ghost.mc-button--standard:active {
+  background-color: var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));
+}
+.mc-button--ghost.mc-button--standard:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--ghost.mc-button--accent {
+  color: var(--button-color-ghost-accent-font, #117f03);
+  background-color: var(--button-color-ghost-accent-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--ghost.mc-button--accent:hover {
+  background-color: var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));
+}
+.mc-button--ghost.mc-button--accent:active {
+  background-color: var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));
+}
+.mc-button--ghost.mc-button--accent:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--ghost.mc-button--danger {
+  color: var(--button-color-ghost-danger-font, #c61112);
+  background-color: var(--button-color-ghost-danger-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--ghost.mc-button--danger:hover {
+  background-color: var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));
+}
+.mc-button--ghost.mc-button--danger:active {
+  background-color: var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));
+}
+.mc-button--ghost.mc-button--danger:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--ghost.mc-button--inverse {
+  color: var(--button-color-ghost-inverse-font, #ffffff);
+  background-color: var(--button-color-ghost-inverse-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--ghost.mc-button--inverse:hover {
+  background-color: var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));
+}
+.mc-button--ghost.mc-button--inverse:active {
+  background-color: var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));
+}
+.mc-button--ghost.mc-button--inverse:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+
+.mc-button__icon {
+  pointer-events: none;
+}
+
+.hidden {
+  visibility: hidden;
+}
+
+.loader-style {
+  color: currentColor;
+  position: absolute;
+}</style>