@mozaic-ds/web-components 0.12.0-beta.0 → 0.12.0-beta.1

package/public/components/button/Button.nested.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button.nested.js","sources":["../../../src/components/button/Button.nested.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import { get_current_component } from 'svelte/internal';\n  import { createEventForwarder } from '../../utilities/EventForward';\n  import Loader from '../loader/Loader.nested.svelte';\n  import type {\n    ButtonIconMode,\n    ButtonSize,\n    ButtonTheme,\n    ButtonResponsiveSize,\n    ButtonResponsiveWidth,\n    ButtonType,\n    ButtonLoader,\n  } from './button.types';\n\n  export let bordered = false;\n  export let theme: ButtonTheme | undefined = undefined;\n  export let size: ButtonSize = 'm';\n  export let full = false;\n  export let label: string;\n  export let iconname: string | undefined;\n  export let iconmode: ButtonIconMode | undefined;\n  export let disabled = false;\n  export let responsivesize: ButtonResponsiveSize = undefined;\n  export let responsivewidth: ButtonResponsiveWidth = undefined;\n  export let type: ButtonType = 'button';\n  export let loader: string;\n\n  const forwardEvents = createEventForwarder(get_current_component());\n\n  $: loaderOpts = loader ? (JSON.parse(loader) as ButtonLoader) : undefined;\n  $: isLoading = loaderOpts?.enabled ?? false;\n  $: loaderPosition = loaderOpts?.position ?? 'left';\n  $: loaderTheme = loaderOpts?.theme ?? 'primary';\n  $: userClass = $$props.class;\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\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}\" class=\"no\"`;\n  }\n\n  function getAppearanceClass(theme: ButtonTheme, isBordered: boolean): string {\n    if (!isBordered && !theme) {\n      return '';\n    }\n\n    const type = isBordered ? 'bordered' : 'solid';\n\n    if (theme) {\n      return `mc-button--${type}-${theme}`;\n    }\n    return `mc-button--${type}`;\n  }\n\n  function getClasses(\n    theme: ButtonTheme,\n    isBordered: boolean,\n    size: ButtonSize,\n    isFull: boolean,\n  ): string {\n    const classes = ['mc-button'];\n\n    const appearanceClass = getAppearanceClass(theme, isBordered);\n    if (appearanceClass) {\n      classes.push(appearanceClass);\n    }\n\n    if (size) {\n      classes.push(`mc-button--${size}`);\n    }\n\n    if (isFull) {\n      classes.push(`mc-button--full`);\n    } else {\n      classes.push(`mc-button--fit`);\n    }\n\n    if (iconmode === 'only') {\n      classes.push('mc-button--square');\n    }\n\n    if (responsivesize) {\n      classes.push(`mc-button--${responsivesize}`);\n    }\n\n    if (responsivewidth) {\n      classes.push(`mc-button--${responsivewidth}`);\n    }\n\n    return classes.join(' ');\n  }\n</script>\n\n<button\n  use:forwardEvents\n  {type}\n  class=\"{getClasses(theme, bordered, size, full)} {userClass}\"\n  class:mc-button--square={iconmode}\n  {disabled}\n  {...attributes}\n>\n  {#if iconname && iconmode === 'left'}\n    <span class=\"mc-button__icon\">\n      {#if isLoading && loaderPosition === 'left'}\n        <Loader size=\"s\" theme={loaderTheme} text=\"TEST\" />\n      {:else}\n        {@html `<${generateIconName(size, iconmode, iconname)} />`}\n      {/if}\n    </span>\n  {/if}\n\n  {#if iconname && iconmode === 'only'}\n    <span class=\"mc-button__icon\">\n      {#if isLoading}\n        <Loader size=\"m\" theme={loaderTheme} text=\"\" />\n      {:else}\n        {@html `<${generateIconName(size, iconmode, iconname)} size=\"100%\" />`}\n      {/if}\n    </span>\n  {:else}\n    {#if isLoading && loaderPosition === 'left' && !iconname}\n      <span class=\"mc-button__icon\">\n        <Loader size=\"s\" theme={loaderTheme} text=\"\" />\n      </span>\n    {/if}\n    <span class=\"mc-button__label\">{label}</span>\n    {#if isLoading && loaderPosition === 'right' && !iconname}\n      <span class=\"mc-button__icon\">\n        <Loader size=\"s\" theme={loaderTheme} text=\"\" />\n      </span>\n    {/if}\n  {/if}\n\n  {#if iconname && iconmode === 'right'}\n    <span class=\"mc-button__icon\">\n      {#if isLoading && loaderPosition === 'right'}\n        <Loader size=\"s\" theme={loaderTheme} text=\"\" />\n      {:else}\n        {@html `<${generateIconName(size, iconmode, iconname)} />`}\n      {/if}\n    </span>\n  {/if}\n</button>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import '@mozaic-ds/styles/components/c.button';\n\n  .mc-button__icon {\n    pointer-events: none;\n  }\n</style>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;oBA4HW,GAAS,CAAA,EAAA,CAAA,uBAAI,GAAc,CAAA,EAAA,CAAA,KAAK,MAAM,EAAA,OAAA,CAAA,CAAA;;;;;;;;;;;;;;GAD7C,MAMM,CAAA,MAAA,EAAA,IAAA,EAAA,MAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAFS,CAAA,IAAA,SAAA,GAAA,CAAA,CAAA,EAAA,gBAAgB,UAAC,GAAI,CAAE,CAAA,CAAA,eAAA,GAAQ,kBAAE,GAAQ,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,EAAA,CAAA;;;;;;;;;;;;;;AAAzC,GAAA,IAAA,KAAA,gCAAA,GAAA,IAAA,SAAA,MAAA,SAAA,GAAA,CAAA,CAAA,EAAA,gBAAgB,UAAC,GAAI,CAAE,CAAA,CAAA,eAAA,GAAQ,kBAAE,GAAQ,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,EAAA,CAAA,EAAA,QAAA,CAAA,CAAA,CAAA,SAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;2BAF5B,GAAW,CAAA,EAAA,CAAA;;;;;;;;;;;;;;;8EAAX,GAAW,CAAA,EAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBlC,CAAA,IAAA,SAAA,iBAAA,GAAS,CAAI,EAAA,CAAA,uBAAA,GAAc,CAAK,EAAA,CAAA,KAAA,MAAM,kBAAK,GAAQ,CAAA,CAAA,CAAA,IAAA,iBAAA,CAAA,GAAA,CAAA,CAAA;AAMnD,CAAA,IAAA,SAAA,iBAAA,GAAS,CAAI,EAAA,CAAA,uBAAA,GAAc,CAAK,EAAA,CAAA,KAAA,OAAO,kBAAK,GAAQ,CAAA,CAAA,CAAA,IAAA,iBAAA,CAAA,GAAA,CAAA,CAAA;;;;;;;uBADzB,GAAK,CAAA,CAAA,CAAA,CAAA,CAAA;;;;;;;;;GAArC,MAA4C,CAAA,MAAA,EAAA,IAAA,EAAA,MAAA,CAAA,CAAA;;;;;;;;AALvC,GAAA,kBAAA,GAAS,CAAI,EAAA,CAAA,uBAAA,GAAc,CAAK,EAAA,CAAA,KAAA,MAAM,kBAAK,GAAQ,CAAA,CAAA,CAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;gEAKxB,GAAK,CAAA,CAAA,CAAA,CAAA,CAAA;;AAChC,GAAA,kBAAA,GAAS,CAAI,EAAA,CAAA,uBAAA,GAAc,CAAK,EAAA,CAAA,KAAA,OAAO,kBAAK,GAAQ,CAAA,CAAA,CAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAblD,GAAS,CAAA,EAAA,CAAA,EAAA,OAAA,CAAA,CAAA;;;;;;;;;;;;;;GADhB,MAMM,CAAA,MAAA,EAAA,IAAA,EAAA,MAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAIsB,GAAW,CAAA,EAAA,CAAA;;;;;;;;;;;;GADrC,MAEM,CAAA,MAAA,EAAA,IAAA,EAAA,MAAA,CAAA,CAAA;;;;;;8EADoB,GAAW,CAAA,EAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAMX,GAAW,CAAA,EAAA,CAAA;;;;;;;;;;;;GADrC,MAEM,CAAA,MAAA,EAAA,IAAA,EAAA,MAAA,CAAA,CAAA;;;;;;8EADoB,GAAW,CAAA,EAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;AAZxB,CAAA,IAAA,SAAA,GAAA,CAAA,CAAA,EAAA,gBAAgB,UAAC,GAAI,CAAE,CAAA,CAAA,eAAA,GAAQ,kBAAE,GAAQ,CAAA,CAAA,CAAA,CAAA,CAAA,eAAA,CAAA,GAAA,EAAA,CAAA;;;;;;;;;;;;;;AAAzC,GAAA,IAAA,KAAA,gCAAA,GAAA,IAAA,SAAA,MAAA,SAAA,GAAA,CAAA,CAAA,EAAA,gBAAgB,UAAC,GAAI,CAAE,CAAA,CAAA,eAAA,GAAQ,kBAAE,GAAQ,CAAA,CAAA,CAAA,CAAA,CAAA,eAAA,CAAA,GAAA,EAAA,CAAA,EAAA,QAAA,CAAA,CAAA,CAAA,SAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;2BAF5B,GAAW,CAAA,EAAA,CAAA;;;;;;;;;;;;;;;8EAAX,GAAW,CAAA,EAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAqBhC,GAAS,CAAA,EAAA,CAAA,uBAAI,GAAc,CAAA,EAAA,CAAA,KAAK,OAAO,EAAA,OAAA,CAAA,CAAA;;;;;;;;;;;;;;GAD9C,MAMM,CAAA,MAAA,EAAA,IAAA,EAAA,MAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAFS,CAAA,IAAA,SAAA,GAAA,CAAA,CAAA,EAAA,gBAAgB,UAAC,GAAI,CAAE,CAAA,CAAA,eAAA,GAAQ,kBAAE,GAAQ,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,EAAA,CAAA;;;;;;;;;;;;;;AAAzC,GAAA,IAAA,KAAA,gCAAA,GAAA,IAAA,SAAA,MAAA,SAAA,GAAA,CAAA,CAAA,EAAA,gBAAgB,UAAC,GAAI,CAAE,CAAA,CAAA,eAAA,GAAQ,kBAAE,GAAQ,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,EAAA,CAAA,EAAA,QAAA,CAAA,CAAA,CAAA,SAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;2BAF5B,GAAW,CAAA,EAAA,CAAA;;;;;;;;;;;;;;;8EAAX,GAAW,CAAA,EAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;8BAnCpC,GAAQ,CAAA,CAAA,CAAA,iBAAI,GAAQ,CAAA,CAAA,CAAA,KAAK,MAAM,IAAA,iBAAA,CAAA,GAAA,CAAA,CAAA;;;;;mBAU/B,GAAQ,CAAA,CAAA,CAAA,iBAAI,GAAQ,CAAA,CAAA,CAAA,KAAK,MAAM,EAAA,OAAA,CAAA,CAAA;;;;;;8BAsB/B,GAAQ,CAAA,CAAA,CAAA,iBAAI,GAAQ,CAAA,CAAA,CAAA,KAAK,OAAO,IAAA,eAAA,CAAA,GAAA,CAAA,CAAA;;;;;oDArC7B,GAAU,CAAA,EAAA,CAAA,WAAC,GAAK,CAAE,CAAA,CAAA,eAAA,GAAQ,cAAE,GAAI,CAAA,CAAA,CAAA,WAAE,GAAI,CAAA,CAAA,CAAA,CAAA,GAAA,GAAA,iBAAI,GAAS,CAAA,EAAA,CAAA,CAAA;;;iBAGvD,GAAU,CAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;0DAFW,GAAQ,CAAA,CAAA,CAAA,CAAA,CAAA;;;;GAJnC,MAiDQ,CAAA,MAAA,EAAA,MAAA,EAAA,MAAA,CAAA,CAAA;;;;;;;;;;;;;;;oBAzCD,GAAQ,CAAA,CAAA,CAAA,iBAAI,GAAQ,CAAA,CAAA,CAAA,KAAK,MAAM,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAgC/B,GAAQ,CAAA,CAAA,CAAA,iBAAI,GAAQ,CAAA,CAAA,CAAA,KAAK,OAAO,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;8IArC7B,GAAU,CAAA,EAAA,CAAA,WAAC,GAAK,CAAE,CAAA,CAAA,eAAA,GAAQ,cAAE,GAAI,CAAA,CAAA,CAAA,WAAE,GAAI,CAAA,CAAA,CAAA,CAAA,GAAA,GAAA,iBAAI,GAAS,CAAA,EAAA,CAAA,CAAA,CAAA,KAAA,EAAA,KAAA,EAAA,kBAAA,EAAA;;iDAGvD,GAAU,CAAA,CAAA,CAAA;;;0DAFW,GAAQ,CAAA,CAAA,CAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;AA/ExB,SAAA,gBAAgB,CACvB,IAAgB,EAChB,QAAwB,EACxB,QAAgB,EAAA;OAEV,UAAU,GAAG,QAAQ,KAAK,MAAM,CAAA;KAClC,QAAgB,CAAA;;SAEZ,IAAI;OACL,GAAG;AACN,GAAA,QAAQ,GAAG,MAAM,CAAA;;OAEd,GAAG;AACN,GAAA,QAAQ,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAA;;OAEpC,GAAG;AACN,GAAA,QAAQ,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAA;;;;AAIjC,CAAA,OAAA,CAAA,EAAA,QAAQ,UAAU,QAAQ,CAAA,YAAA,CAAA,CAAA;;;SAG7B,kBAAkB,CAAC,KAAkB,EAAE,UAAmB,EAAA;AAC5D,CAAA,IAAA,CAAA,UAAU,KAAK,KAAK,EAAA;SAChB,EAAE,CAAA;;;AAGL,CAAA,MAAA,IAAI,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAAA;;KAE1C,KAAK,EAAA;AACc,EAAA,OAAA,CAAA,WAAA,EAAA,IAAI,IAAI,KAAK,CAAA,CAAA,CAAA;;;sBAEf,IAAI,CAAA,CAAA,CAAA;;;;;;;;;;;;;;;;KAtEZ,EAAA,EAAA,EAAA,EAAA,EAAA,CAAA;AAcJ,CAAA,IAAA,EAAA,QAAQ,GAAG,KAAK,EAAA,GAAA,OAAA,CAAA;AAChB,CAAA,IAAA,EAAA,KAAK,GAA4B,SAAS,EAAA,GAAA,OAAA,CAAA;AAC1C,CAAA,IAAA,EAAA,IAAI,GAAe,GAAG,EAAA,GAAA,OAAA,CAAA;AACtB,CAAA,IAAA,EAAA,IAAI,GAAG,KAAK,EAAA,GAAA,OAAA,CAAA;OACZ,KAAa,EAAA,GAAA,OAAA,CAAA;OACb,QAA4B,EAAA,GAAA,OAAA,CAAA;OAC5B,QAAoC,EAAA,GAAA,OAAA,CAAA;AACpC,CAAA,IAAA,EAAA,QAAQ,GAAG,KAAK,EAAA,GAAA,OAAA,CAAA;AAChB,CAAA,IAAA,EAAA,cAAc,GAAyB,SAAS,EAAA,GAAA,OAAA,CAAA;AAChD,CAAA,IAAA,EAAA,eAAe,GAA0B,SAAS,EAAA,GAAA,OAAA,CAAA;AAClD,CAAA,IAAA,EAAA,IAAI,GAAe,QAAQ,EAAA,GAAA,OAAA,CAAA;OAC3B,MAAc,EAAA,GAAA,OAAA,CAAA;OAEnB,aAAa,GAAG,oBAAoB,CAAC,qBAAqB,EAAA,CAAA,CAAA;;AA8CvD,CAAA,SAAA,UAAU,CACjB,KAAkB,EAClB,UAAmB,EACnB,IAAgB,EAChB,MAAe,EAAA;AAET,EAAA,MAAA,OAAO,IAAI,WAAW,CAAA,CAAA;AAEtB,EAAA,MAAA,eAAe,GAAG,kBAAkB,CAAC,KAAK,EAAE,UAAU,CAAA,CAAA;;MACxD,eAAe,EAAA;GACjB,OAAO,CAAC,IAAI,CAAC,eAAe,CAAA,CAAA;;;MAG1B,IAAI,EAAA;GACN,OAAO,CAAC,IAAI,CAAA,CAAA,WAAA,EAAe,IAAI,CAAA,CAAA,CAAA,CAAA;;;MAG7B,MAAM,EAAA;AACR,GAAA,OAAO,CAAC,IAAI,CAAA,CAAA,eAAA,CAAA,CAAA,CAAA;;AAEZ,GAAA,OAAO,CAAC,IAAI,CAAA,CAAA,cAAA,CAAA,CAAA,CAAA;;;AAGV,EAAA,IAAA,QAAQ,KAAK,MAAM,EAAA;GACrB,OAAO,CAAC,IAAI,CAAC,mBAAmB,CAAA,CAAA;;;MAG9B,cAAc,EAAA;GAChB,OAAO,CAAC,IAAI,CAAA,CAAA,WAAA,EAAe,cAAc,CAAA,CAAA,CAAA,CAAA;;;MAGvC,eAAe,EAAA;GACjB,OAAO,CAAC,IAAI,CAAA,CAAA,WAAA,EAAe,eAAe,CAAA,CAAA,CAAA,CAAA;;;SAGrC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;GA/ExB,YAAA,CAAA,EAAA,EAAE,UAAU,GAAG,MAAM,GAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAA,GAAqB,SAAS,CAAA,CAAA;;;;GACxE,YAAA,CAAA,EAAA,EAAE,SAAS,GAAA,YAAA,CAAA,EAAA,EAAd,EAAA,GAAiB,UAAU,KAA3B,IAAA,IAAiB,UAAU,KAAA,KAA3B,CAAA;UAAA,CAAA;AAAiB,KAAA,UAAU,CAAE,OAAO,CAAA,KAApC,IAAA,IAAA,EAAA,UAAA,CAAA;KAAA,EAAA;KAAwC,KAAK,CAAA,CAAA;;;;GAC1C,YAAA,CAAA,EAAA,EAAE,cAAc,GAAA,YAAA,CAAA,EAAA,EAAnB,EAAA,GAAsB,UAAU,KAAhC,IAAA,IAAsB,UAAU,KAAA,KAAhC,CAAA;UAAA,CAAA;AAAsB,KAAA,UAAU,CAAE,QAAQ,CAAA,KAA1C,IAAA,IAAA,EAAA,UAAA,CAAA;KAAA,EAAA;KAA8C,MAAM,CAAA,CAAA;;;;GACjD,YAAA,CAAA,EAAA,EAAE,WAAW,GAAA,YAAA,CAAA,EAAA,EAAhB,EAAA,GAAmB,UAAU,KAA7B,IAAA,IAAmB,UAAU,KAAA,KAA7B,CAAA;UAAA,CAAA;AAAmB,KAAA,UAAU,CAAE,KAAK,CAAA,KAApC,IAAA,IAAA,EAAA,UAAA,CAAA;KAAA,EAAA;KAAwC,SAAS,CAAA,CAAA;;;AAC/C,EAAG,YAAA,CAAA,EAAA,EAAA,SAAS,GAAG,OAAO,CAAC,KAAK,CAAA,CAAA;AAC5B,kBAAG,UAAU,GAAf,MAAA,CAAA,MAAA,KAAuB,WAAW,CAAA,CAAA,CAAA;;;GAC/B,OAAS,UAAU,CAAC,KAAK,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/public/components/button/Button.nested.svelte

@@ -1,173 +0,0 @@
-<svelte:options tag={null} />
-
-<script lang="ts">
-  import { get_current_component } from 'svelte/internal';
-  import { createEventForwarder } from '../../utilities/EventForward';
-  import Loader from '../loader/Loader.nested.svelte';
-  import type {
-    ButtonIconMode,
-    ButtonSize,
-    ButtonTheme,
-    ButtonResponsiveSize,
-    ButtonResponsiveWidth,
-    ButtonType,
-    ButtonLoader,
-  } from './button.types';
-
-  export let bordered = false;
-  export let theme: ButtonTheme | undefined = undefined;
-  export let size: ButtonSize = 'm';
-  export let full = false;
-  export let label: string;
-  export let iconname: string | undefined;
-  export let iconmode: ButtonIconMode | undefined;
-  export let disabled = false;
-  export let responsivesize: ButtonResponsiveSize = undefined;
-  export let responsivewidth: ButtonResponsiveWidth = undefined;
-  export let type: ButtonType = 'button';
-  export let loader: string;
-
-  const forwardEvents = createEventForwarder(get_current_component());
-
-  $: loaderOpts = loader ? (JSON.parse(loader) as ButtonLoader) : undefined;
-  $: isLoading = loaderOpts?.enabled ?? false;
-  $: loaderPosition = loaderOpts?.position ?? 'left';
-  $: loaderTheme = loaderOpts?.theme ?? 'primary';
-  $: userClass = $$props.class;
-  $: attributes = { ...$$restProps };
-  $: delete attributes.class;
-
-  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}" class="no"`;
-  }
-
-  function getAppearanceClass(theme: ButtonTheme, isBordered: boolean): string {
-    if (!isBordered && !theme) {
-      return '';
-    }
-
-    const type = isBordered ? 'bordered' : 'solid';
-
-    if (theme) {
-      return `mc-button--${type}-${theme}`;
-    }
-    return `mc-button--${type}`;
-  }
-
-  function getClasses(
-    theme: ButtonTheme,
-    isBordered: boolean,
-    size: ButtonSize,
-    isFull: boolean,
-  ): string {
-    const classes = ['mc-button'];
-
-    const appearanceClass = getAppearanceClass(theme, isBordered);
-    if (appearanceClass) {
-      classes.push(appearanceClass);
-    }
-
-    if (size) {
-      classes.push(`mc-button--${size}`);
-    }
-
-    if (isFull) {
-      classes.push(`mc-button--full`);
-    } else {
-      classes.push(`mc-button--fit`);
-    }
-
-    if (iconmode === 'only') {
-      classes.push('mc-button--square');
-    }
-
-    if (responsivesize) {
-      classes.push(`mc-button--${responsivesize}`);
-    }
-
-    if (responsivewidth) {
-      classes.push(`mc-button--${responsivewidth}`);
-    }
-
-    return classes.join(' ');
-  }
-</script>
-
-<button
-  use:forwardEvents
-  {type}
-  class="{getClasses(theme, bordered, size, full)} {userClass}"
-  class:mc-button--square={iconmode}
-  {disabled}
-  {...attributes}
->
-  {#if iconname && iconmode === 'left'}
-    <span class="mc-button__icon">
-      {#if isLoading && loaderPosition === 'left'}
-        <Loader size="s" theme={loaderTheme} text="TEST" />
-      {:else}
-        {@html `<${generateIconName(size, iconmode, iconname)} />`}
-      {/if}
-    </span>
-  {/if}
-
-  {#if iconname && iconmode === 'only'}
-    <span class="mc-button__icon">
-      {#if isLoading}
-        <Loader size="m" theme={loaderTheme} text="" />
-      {:else}
-        {@html `<${generateIconName(size, iconmode, iconname)} size="100%" />`}
-      {/if}
-    </span>
-  {:else}
-    {#if isLoading && loaderPosition === 'left' && !iconname}
-      <span class="mc-button__icon">
-        <Loader size="s" theme={loaderTheme} text="" />
-      </span>
-    {/if}
-    <span class="mc-button__label">{label}</span>
-    {#if isLoading && loaderPosition === 'right' && !iconname}
-      <span class="mc-button__icon">
-        <Loader size="s" theme={loaderTheme} text="" />
-      </span>
-    {/if}
-  {/if}
-
-  {#if iconname && iconmode === 'right'}
-    <span class="mc-button__icon">
-      {#if isLoading && loaderPosition === 'right'}
-        <Loader size="s" theme={loaderTheme} text="" />
-      {:else}
-        {@html `<${generateIconName(size, iconmode, iconname)} />`}
-      {/if}
-    </span>
-  {/if}
-</button>
-
-<style lang="scss">
-  @import '@mozaic-ds/styles/settings-tools/_all-settings';
-  @import '@mozaic-ds/styles/components/c.button';
-
-  .mc-button__icon {
-    pointer-events: none;
-  }
-</style>