@mozaic-ds/web-components 1.2.0 → 1.4.0

package/dist/components/fileuploader/FileUploader.svelte

@@ -0,0 +1,816 @@
+<svelte:options customElement={{ tag: 'm-file-uploader' }} />
+
+<script lang="ts">
+  import FileUploaderItem, {
+    type NormalizedFile,
+  } from '../fileuploaderitem/FileUploaderItem.svelte';
+  import { Upload24 } from '@mozaic-ds/icons-svelte';
+
+  type FilesValidationState = Record<
+    string,
+    { size: boolean; extension: boolean; customValidation: boolean }
+  >;
+
+  /**
+   * A file uploader allows users to upload one or multiple files by either dragging and dropping files into a dedicated area or selecting them manually through their local folders. It provides real-time feedback on upload progress and file status, including file name, size, and success or error indicators. File uploaders are commonly used in forms, content management systems, and document submission processes to facilitate seamless file handling.
+   *
+   * @slot name - Use this slot to display a custom file name.
+   * @slot information - Use this slot to display a custom information content.
+   * @slot errorMessage - Use this slot to display a custom error message.
+   * @event files-update {CustomEvent<NormalizedFile[]>} - Emits when files list changes.
+   * @event validation {CustomEvent<FilesValidationState>} - Emits files validation when files list changes.
+   */
+
+  interface Props {
+    /**
+     * Model binding for the selected files (`NormalizedFile`)
+     */
+    files: NormalizedFile[];
+    /**
+     * File types allowed by the uploader.
+     */
+    accept?: HTMLInputElement['accept'];
+    /**
+     * Enables selecting multiple files at once.
+     */
+    multiple?: boolean;
+    /**
+     * File extensions to validate.
+     */
+    allowedextensions?: string[];
+    /**
+     * Maximum file size allowed (in bytes).
+     */
+    maxsize?: number;
+    /**
+     * Custom validation rules applied to each file.
+     */
+    rules?: ((file: NormalizedFile) => boolean)[];
+    /**
+     * Layout format of the item.
+     */
+    format?: 'inline' | 'stacked';
+    /**
+     * Custom error message for the file.
+     */
+    errormessage?: string;
+    /**
+     * Label for the delete button.
+     */
+    deletebuttonlabel?: string;
+    /**
+     * Optional informational text displayed under the file name.
+     */
+    information?: string;
+    /**
+     * Enables drag & drop functionality.
+     */
+    hasdragdrop?: boolean;
+    /**
+     * Controls the display of the uploaded files list.
+     */
+    showfileslist?: boolean;
+    /**
+     * Disables the whole component.
+     */
+    disabled?: boolean;
+    /**
+     * Main drag & drop title.
+     */
+    title?: string;
+    /**
+     * Subtitle used in the drag & drop area.
+     */
+    subtitle?: string;
+    /**
+     * Label of the upload button.
+     */
+    uploadbuttonlabel?: string;
+    /**
+     * Callback to call when files validation is updated.
+     */
+    onvalidation?: (validationState: FilesValidationState) => void;
+    /**
+     * Callback to call when files are updates.
+     */
+    onfilesupdate?: (files: NormalizedFile[]) => void;
+  }
+
+  let {
+    files = $bindable(),
+    accept,
+    multiple,
+    allowedextensions,
+    maxsize,
+    rules,
+    hasdragdrop = true,
+    showfileslist = true,
+    disabled,
+    title = 'Drag & drop',
+    subtitle = 'or',
+    uploadbuttonlabel = 'Upload file(s)',
+    format = 'inline',
+    errormessage,
+    deletebuttonlabel,
+    information,
+    onvalidation,
+    onfilesupdate,
+  }: Props = $props();
+
+  let element: HTMLElement;
+
+  let filesValidationState = $derived(validateFiles(files));
+
+  let fileInput: HTMLInputElement;
+
+  let isDraggedOver = $state(false);
+  let dragCounter = $state(0);
+
+  function validateFiles(newFiles: NormalizedFile[] = []) {
+    const state: FilesValidationState = {};
+    newFiles.forEach((file) => {
+      const extension = file.name.split('.').pop()?.toLowerCase() || '';
+      state[file.name] = {
+        size: maxsize && file.size ? file.size <= maxsize : true,
+        extension: allowedextensions ? allowedextensions.includes(extension) : true,
+        customValidation: rules?.every((rule) => rule(file)) ?? true,
+      };
+    });
+    return state;
+  }
+
+  $effect(() => {
+    onfilesupdate?.(files);
+    const event = new CustomEvent('files-update', {
+      detail: files,
+      bubbles: true,
+      composed: true,
+    });
+    element.dispatchEvent(event);
+
+    if (files?.length > 0) {
+      onvalidation?.(filesValidationState);
+
+      const event = new CustomEvent('validation', {
+        detail: filesValidationState,
+        bubbles: true,
+        composed: true,
+      });
+      element.dispatchEvent(event);
+    }
+  });
+
+  function onDragEnter(e: Event) {
+    if (!hasdragdrop) return;
+
+    e.preventDefault();
+    dragCounter++;
+    isDraggedOver = true;
+  }
+
+  function onDragLeave(e: Event) {
+    if (!hasdragdrop) return;
+
+    e.preventDefault();
+    dragCounter--;
+    if (dragCounter === 0) isDraggedOver = false;
+  }
+
+  function filterExistingFile(file: NormalizedFile) {
+    return files?.every((item) => item.name !== file.name);
+  }
+
+  function onChange(e: Event) {
+    const input = e.target as HTMLInputElement;
+    const newFiles = Array.from(input.files || []).filter(filterExistingFile);
+
+    if (!newFiles.length) {
+      input.value = '';
+      return;
+    }
+
+    files = multiple ? [...files, ...newFiles] : newFiles.slice(0, 1);
+
+    input.value = '';
+  }
+
+  function onDragover(e: DragEvent) {
+    e.preventDefault();
+  }
+
+  function onDrop(e: DragEvent) {
+    if (!hasdragdrop) return;
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    dragCounter = 0;
+    isDraggedOver = false;
+    if (disabled) return;
+
+    const droppedFiles = Array.from(e.dataTransfer?.files || []).filter(filterExistingFile);
+    if (!droppedFiles.length) return;
+
+    files = multiple ? [...files, ...droppedFiles] : [droppedFiles[0]];
+  }
+
+  function onKeydown(e: KeyboardEvent) {
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault();
+      fileInput.click();
+    }
+  }
+
+  function onDelete(index: number) {
+    files = files?.filter((_, i) => i !== index);
+  }
+
+  function isFileValid(file: NormalizedFile) {
+    return Object.values(filesValidationState[file.name] ?? {}).every(Boolean);
+  }
+</script>
+
+<div
+  class={{
+    'mc-file-uploader': true,
+    'mc-file-uploader--draggable': hasdragdrop,
+  }}
+  bind:this={element}
+>
+  <div class="mc-file-uploader__container">
+    <input
+      bind:this={fileInput}
+      type="file"
+      aria-label="File input"
+      {accept}
+      {multiple}
+      class="mc-file-uploader__hidden-input"
+      {disabled}
+      aria-disabled={disabled}
+      onchange={onChange}
+    />
+
+    <div
+      class={{
+        'mc-file-uploader__input': true,
+        'mc-file-uploader__input--dragged': isDraggedOver,
+        'mc-file-uploader__input--disabled': disabled,
+      }}
+      tabindex="0"
+      role="button"
+      aria-disabled={disabled}
+      ondragover={onDragover}
+      ondrop={onDrop}
+      ondragenter={onDragEnter}
+      ondragleave={onDragLeave}
+      onclick={() => fileInput!.click()}
+      onkeydown={onKeydown}
+    >
+      {#if hasdragdrop}
+        <span class="mc-file-uploader__input-title">
+          {title}
+        </span>
+
+        <span class="mc-file-uploader__input-subtitle">
+          {subtitle}
+        </span>
+      {/if}
+
+      <div class="mc-button mc-button--outlined mc-file-uploader__button">
+        <Upload24 className="mc-button__icon" />
+        <span class="mc-button__label">
+          {uploadbuttonlabel}
+        </span>
+      </div>
+    </div>
+  </div>
+
+  {#if showfileslist}
+    <div class="mc-file-uploader__files-list">
+      {#each files as file, index (index)}
+        <FileUploaderItem
+          {file}
+          {format}
+          {errormessage}
+          {information}
+          {deletebuttonlabel}
+          valid={isFileValid(file)}
+          ondelete={() => onDelete(index)}
+        >
+          <slot slot="name" name="name" let:file {file}>
+            {file.name}
+          </slot>
+
+          <slot slot="information" name="information" let:file {file}>
+            {information}
+          </slot>
+
+          <slot
+            slot="errorMessage"
+            name="errorMessage"
+            validationState={filesValidationState[file.name]}
+          ></slot>
+        </FileUploaderItem>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-file-uploader {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 18rem;
+}
+.mc-file-uploader__files-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.mc-file-uploader__hidden-input {
+  clip-path: inset(100%);
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  padding: 0;
+  width: 1px;
+}
+.mc-file-uploader__input {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  line-height: var(--line-height-s, 1.3);
+  font-weight: var(--font-weight-semi-bold, 600);
+  border-radius: var(--border-radius-m, 0.5rem);
+  color: var(--file-uploader-color-drag-and-drop-text-default, #242938);
+}
+.mc-file-uploader__input .mc-file-uploader__button {
+  width: 100%;
+}
+.mc-file-uploader__input--disabled .mc-file-uploader__button.mc-button.mc-button--outlined {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-file-uploader__input-title {
+  height: 1.125rem;
+  font-size: var(--font-size-150, 1rem);
+}
+.mc-file-uploader__input-subtitle {
+  height: 1.125rem;
+  font-size: var(--font-size-100, 0.875rem);
+}
+.mc-file-uploader--draggable {
+  width: 25rem;
+}
+.mc-file-uploader--draggable .mc-file-uploader__input {
+  padding: 2rem;
+  outline: 0.125rem dashed var(--file-uploader-color-drag-and-drop-border-default, #464e63);
+  display: flex;
+}
+.mc-file-uploader--draggable .mc-file-uploader__input--disabled {
+  outline-color: var(--file-uploader-color-drag-and-drop-border-disabled, #b3b3b3);
+  color: var(--file-uploader-color-drag-and-drop-text-disabled, #b3b3b3);
+  cursor: not-allowed;
+}
+.mc-file-uploader--draggable .mc-file-uploader__input--dragged {
+  outline-width: 0.25rem;
+}
+
+.mc-file-uploader-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.mc-file-uploader-item__container {
+  border: 1px solid var(--file-uploader-color-file-item-border-default, #cccccc);
+  border-radius: var(--border-radius-m, 0.5rem);
+  padding: 0.75rem;
+}
+.mc-file-uploader-item__meta-row {
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+}
+.mc-file-uploader-item__meta-row--with-info {
+  align-items: start;
+}
+.mc-file-uploader-item__status-icon {
+  fill: var(--file-uploader-color-file-item-icon-valid, #3f9e10);
+}
+.mc-file-uploader-item__info-content {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  padding-left: 0.5rem;
+  padding-right: 1rem;
+}
+.mc-file-uploader-item__label {
+  color: var(--file-uploader-color-file-item-text-file-name, #000000);
+  font-size: var(--font-size-100, 0.875rem);
+  line-height: var(--line-height-s, 1.3);
+  font-weight: var(--font-weight-semi-bold, 600);
+}
+.mc-file-uploader-item__details {
+  color: var(--file-uploader-color-file-item-text-information, #666666);
+  font-size: var(--font-size-50, 0.75rem);
+  line-height: var(--line-height-s, 1.3);
+  font-weight: var(--font-weight-regular, 400);
+}
+.mc-file-uploader-item__error-message {
+  color: var(--field-color-validation-invalid, #c61112);
+  font-size: var(--font-size-100, 0.875rem);
+  line-height: var(--line-height-s, 1.3);
+  font-weight: var(--font-weight-regular, 400);
+}
+.mc-file-uploader-item__container--inline {
+  display: flex;
+  align-items: center;
+}
+.mc-file-uploader-item__container--stacked {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+.mc-file-uploader-item__delete-button-container {
+  padding-left: 0.25rem;
+  margin-left: 0.25rem;
+  border-left: 1px solid var(--divider-color-primary, #cccccc);
+}
+.mc-file-uploader-item__actions-container {
+  padding: 0 2rem;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  justify-content: center;
+}
+.mc-file-uploader-item__action {
+  padding: 0 0.75rem;
+  flex-grow: 1;
+}
+.mc-file-uploader-item--error .mc-file-uploader-item__container {
+  border-width: var(--border-width-m, 0.125rem);
+  border-color: var(--file-uploader-color-file-item-border-invalid, #ea302d);
+}
+.mc-file-uploader-item--error .mc-file-uploader-item__status-icon {
+  fill: var(--file-uploader-color-file-item-icon-invalid, #ea302d);
+}
+.mc-file-uploader-item--loading .mc-file-uploader-item__container {
+  gap: 1rem;
+  flex-direction: column;
+  align-items: normal;
+}
+.mc-file-uploader-item--loading .mc-file-uploader-item__status-icon {
+  fill: var(--color-standalone-disabled, #b3b3b3);
+}
+.mc-file-uploader-item--loading .mc-file-uploader-item__label,
+.mc-file-uploader-item--loading .mc-file-uploader-item__details {
+  color: var(--color-standalone-disabled, #b3b3b3);
+}
+
+.mc-button {
+  color: var(--button-color-filled-standard-font, #ffffff);
+  background-color: var(--button-color-filled-standard-background, #464e63);
+}
+.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 {
+  font-weight: var(--font-weight-semi-bold, 600);
+  padding: 0 calc(1rem - 0.125rem);
+  min-height: 3rem;
+  min-width: 3rem;
+}
+.mc-button .mc-button__label {
+  font-size: var(--font-size-150, 1rem);
+}
+.mc-button {
+  display: inline-flex;
+  justify-content: center;
+  vertical-align: middle;
+  text-align: center;
+  border: 2px solid transparent;
+  border-radius: var(--button-border-radius-s, 0.25rem);
+  transition: all ease 200ms;
+  transition: box-shadow 200ms ease;
+  align-items: center;
+  box-sizing: border-box;
+  font-family: inherit;
+  fill: currentcolor;
+  gap: 0.25rem;
+  cursor: pointer;
+}
+.mc-button__label {
+  font-size: var(--font-size-150, 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--s {
+  padding: 0 calc(0.75rem - 0.125rem);
+  min-height: 2rem;
+  min-width: 2rem;
+}
+.mc-button--s .mc-button__label {
+  font-size: var(--font-size-100, 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: var(--font-size-150, 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: var(--font-size-200, 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--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: var(--border-radius-full, 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;
+}</style>