@milaboratories/uikit 2.10.15 → 2.10.16

package/src/components/PlIcon16/index.ts

@@ -1 +1 @@
-export { default as PlIcon16 } from './PlIcon16.vue';
+export { default as PlIcon16 } from "./PlIcon16.vue";

package/src/components/PlIcon24/PlIcon24.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import type { MaskIconName24, Size } from '../../types';
-import { PlSvg } from '../PlSvg';
-import { computed } from 'vue';
+import type { MaskIconName24, Size } from "../../types";
+import { PlSvg } from "../PlSvg";
+import { computed } from "vue";
 
 const props = defineProps<{
   name: MaskIconName24;
@@ -11,10 +11,10 @@ const props = defineProps<{
 }>();
 
 const size = computed(() => {
-  if (typeof props.size === 'string') {
-    if (props.size === 'small') return 16;
-    if (props.size === 'medium') return 24;
-    if (props.size === 'large') return 32;
+  if (typeof props.size === "string") {
+    if (props.size === "small") return 16;
+    if (props.size === "medium") return 24;
+    if (props.size === "large") return 32;
   }
   return props.size ?? 24;
 });

package/src/components/PlIcon24/index.ts

@@ -1 +1 @@
-export { default as PlIcon24 } from './PlIcon24.vue';
+export { default as PlIcon24 } from "./PlIcon24.vue";

package/src/components/PlLoaderCircular/PlLoaderCircular.vue

@@ -1,15 +1,33 @@
 <script setup lang="ts">
-import './pl-loader-circular.scss';
+import "./pl-loader-circular.scss";
 
-withDefaults(defineProps<{
-  size?: '16' | '24' | '48' | string;
-}>(), { size: '16' });
+withDefaults(
+  defineProps<{
+    size?: "16" | "24" | "48" | string;
+  }>(),
+  { size: "16" },
+);
 </script>
 <template>
   <div class="pl-loader-circular">
-    <div :style="{height: `${size}px`, width: `${size}px`, '--main-color': `${+size < 48 ? 'var(--ic-01)' :'var(--ic-02)' }`}" class="pl-circle-loader__wrapper">
+    <div
+      :style="{
+        height: `${size}px`,
+        width: `${size}px`,
+        '--main-color': `${+size < 48 ? 'var(--ic-01)' : 'var(--ic-02)'}`,
+      }"
+      class="pl-circle-loader__wrapper"
+    >
       <svg class="pl-loader-circular__svg" viewBox="25 25 50 50">
-        <circle class="pl-loader-circular__svg-circle" cx="50" cy="50" r="20" fill="none" :stroke="`${+size < 48 ? 'var(--ic-01)' :'var(--ic-02)' }`" stroke-width="2" />
+        <circle
+          class="pl-loader-circular__svg-circle"
+          cx="50"
+          cy="50"
+          r="20"
+          fill="none"
+          :stroke="`${+size < 48 ? 'var(--ic-01)' : 'var(--ic-02)'}`"
+          stroke-width="2"
+        />
       </svg>
     </div>
   </div>

package/src/components/PlLoaderCircular/index.ts

@@ -1 +1 @@
-export { default as PlLoaderCircular } from './PlLoaderCircular.vue';
+export { default as PlLoaderCircular } from "./PlLoaderCircular.vue";

package/src/components/PlLoaderCircular/pl-loader-circular.scss

@@ -1,67 +1,71 @@
 .pl-loader-circular {
-    position: relative;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  position: relative;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-    &__svg {
-        -webkit-animation: rotate 2s linear infinite;
-        animation: rotate 2s linear infinite;
-        height: 100%;
-        width: 100%;
-        -webkit-transform-origin: center center;
-        -ms-transform-origin: center center;
-        transform-origin: center center;
-    }
+  &__svg {
+    -webkit-animation: rotate 2s linear infinite;
+    animation: rotate 2s linear infinite;
+    height: 100%;
+    width: 100%;
+    -webkit-transform-origin: center center;
+    -ms-transform-origin: center center;
+    transform-origin: center center;
+  }
 
-    &__svg-circle {
-        stroke-dasharray: 150, 200;
-        stroke-dashoffset: -10;
-        -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
-        animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
-        stroke-linecap: round;
-    }
+  &__svg-circle {
+    stroke-dasharray: 150, 200;
+    stroke-dashoffset: -10;
+    -webkit-animation:
+      dash 1.5s ease-in-out infinite,
+      color 6s ease-in-out infinite;
+    animation:
+      dash 1.5s ease-in-out infinite,
+      color 6s ease-in-out infinite;
+    stroke-linecap: round;
+  }
 }
 
 @keyframes rotate {
-    100% {
-        transform: rotate(360deg);
-    }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 @keyframes dash {
-    0% {
-        stroke-dasharray: 1, 200;
-        stroke-dashoffset: 0;
-    }
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
 
-    50% {
-        stroke-dasharray: 89, 200;
-        stroke-dashoffset: -35;
-    }
+  50% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -35;
+  }
 
-    100% {
-        stroke-dasharray: 89, 200;
-        stroke-dashoffset: -124;
-    }
+  100% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -124;
+  }
 }
 
 @keyframes color {
-    0% {
-        stroke: var(--ic-02);
-    }
+  0% {
+    stroke: var(--ic-02);
+  }
 
-    40% {
-        stroke: var(--ic-02);
-    }
+  40% {
+    stroke: var(--ic-02);
+  }
 
-    66% {
-        stroke: var(--ic-02);
-    }
+  66% {
+    stroke: var(--ic-02);
+  }
 
-    80%,
-    90% {
-        stroke: var(--ic-02);
-    }
-}
+  80%,
+  90% {
+    stroke: var(--ic-02);
+  }
+}

package/src/components/PlLoaderLogo.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, useCssModule } from 'vue';
+import { computed, useCssModule } from "vue";
 
 const props = defineProps<{
   size?: number | string;
@@ -10,26 +10,24 @@ const props = defineProps<{
 const styles = useCssModule();
 
 const size = computed(() =>
-  typeof props.size === 'number' ? CSS.px(props.size).toString() : props.size,
+  typeof props.size === "number" ? CSS.px(props.size).toString() : props.size,
 );
 
-const color = props.color ?? 'currentColor';
-const backgroundColor = props.backgroundColor ?? 'var(--color-div-bw)';
+const color = props.color ?? "currentColor";
+const backgroundColor = props.backgroundColor ?? "var(--color-div-bw)";
 </script>
 
 <template>
-  <svg
-    viewBox="0 0 64 64"
-    xmlns="http://www.w3.org/2000/svg"
-    :class="styles.root"
-  >
+  <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" :class="styles.root">
     <path d="m32 3 26 15H6z" />
     <path d="M32 18h26v28H32z" />
     <path d="M32 45.5h26L32 61z" />
     <path d="M6 39h26v22L6 46z" />
     <path d="M6 30h26v8H6z" />
     <path d="M6 18h26v12H6z" />
-    <path d="M28.816 1.834c.788-.423 1.357-.671 1.947-.796a6 6 0 0 1 2.474 0c.59.125 1.159.373 1.947.796.578.295 1.26.685 2.141 1.189l17.411 9.956a67 67 0 0 1 1.88 1.098c.853.511 1.397.896 1.83 1.375a6 6 0 0 1 1.258 2.167c.296.907.296 1.922.296 3.951v20.858c0 2.029 0 3.043-.296 3.95a6 6 0 0 1-1.258 2.168c-.433.479-.977.864-1.83 1.376-.504.31-1.116.66-1.88 1.097l-17.41 9.956c-.882.504-1.563.893-2.14 1.188-.79.424-1.358.672-1.949.796a6 6 0 0 1-2.474 0c-.59-.124-1.16-.372-1.948-.796-.578-.295-1.259-.684-2.14-1.188l-17.41-9.956a69 69 0 0 1-1.88-1.097c-.853-.512-1.397-.897-1.831-1.376a6 6 0 0 1-1.258-2.167C4 45.47 4 44.457 4 42.428V21.57c0-2.03 0-3.044.296-3.95a6 6 0 0 1 1.258-2.168c.434-.479.977-.864 1.83-1.375a68 68 0 0 1 1.88-1.098l17.411-9.956c.882-.504 1.563-.894 2.14-1.19M8 27.997V19.99h21.964v8.006zm0 8.005v-4.003h21.964v4.003zM29.964 58.33 8 45.722v-5.718h21.964zm22.051-10.32L34.037 58.33V48.01zM56 19.99v24.016H34.037V19.99zm-44.016-4L32 4.499l20.016 11.49z" />
+    <path
+      d="M28.816 1.834c.788-.423 1.357-.671 1.947-.796a6 6 0 0 1 2.474 0c.59.125 1.159.373 1.947.796.578.295 1.26.685 2.141 1.189l17.411 9.956a67 67 0 0 1 1.88 1.098c.853.511 1.397.896 1.83 1.375a6 6 0 0 1 1.258 2.167c.296.907.296 1.922.296 3.951v20.858c0 2.029 0 3.043-.296 3.95a6 6 0 0 1-1.258 2.168c-.433.479-.977.864-1.83 1.376-.504.31-1.116.66-1.88 1.097l-17.41 9.956c-.882.504-1.563.893-2.14 1.188-.79.424-1.358.672-1.949.796a6 6 0 0 1-2.474 0c-.59-.124-1.16-.372-1.948-.796-.578-.295-1.259-.684-2.14-1.188l-17.41-9.956a69 69 0 0 1-1.88-1.097c-.853-.512-1.397-.897-1.831-1.376a6 6 0 0 1-1.258-2.167C4 45.47 4 44.457 4 42.428V21.57c0-2.03 0-3.044.296-3.95a6 6 0 0 1 1.258-2.168c.434-.479.977-.864 1.83-1.375a68 68 0 0 1 1.88-1.098l17.411-9.956c.882-.504 1.563-.894 2.14-1.19M8 27.997V19.99h21.964v8.006zm0 8.005v-4.003h21.964v4.003zM29.964 58.33 8 45.722v-5.718h21.964zm22.051-10.32L34.037 58.33V48.01zM56 19.99v24.016H34.037V19.99zm-44.016-4L32 4.499l20.016 11.49z"
+    />
   </svg>
 </template>
 

package/src/components/PlLogView/PlLogView.vue

@@ -3,26 +3,26 @@
  * Log Viewer Component
  */
 export default {
-  name: 'PlLogView',
+  name: "PlLogView",
 };
 </script>
 
 <script lang="ts" setup>
-import { computed, ref, useSlots, watch } from 'vue';
-import { PlMaskIcon24 } from '../PlMaskIcon24';
-import './pl-log-view.scss';
-import { okOptional, tapIf } from '@milaboratories/helpers';
-import type { AnyLogHandle, OutputWithStatus, Platforma } from '@platforma-sdk/model';
-import { useLogHandle } from './useLogHandle';
-import { useLabelNotch } from '../../utils/useLabelNotch';
-import DoubleContour from '../../utils/DoubleContour.vue';
-import { PlTooltip } from '../PlTooltip';
-import { PlIcon24 } from '../PlIcon24';
-import { downloadContent } from '../../helpers/dom';
-
-const getOutputError = <T>(o?: OutputWithStatus<T>) => {
+import { computed, ref, useSlots, watch } from "vue";
+import { PlMaskIcon24 } from "../PlMaskIcon24";
+import "./pl-log-view.scss";
+import { okOptional, tapIf } from "@milaboratories/helpers";
+import type { AnyLogHandle, OutputWithStatus, Platforma } from "@platforma-sdk/model";
+import { useLogHandle } from "./useLogHandle";
+import { useLabelNotch } from "../../utils/useLabelNotch";
+import DoubleContour from "../../utils/DoubleContour.vue";
+import { PlTooltip } from "../PlTooltip";
+import { PlIcon24 } from "../PlIcon24";
+import { downloadContent } from "../../helpers/dom";
+
+const getOutputError = <T,>(o?: OutputWithStatus<T>) => {
   if (o && o.ok === false) {
-    return o.errors.join('\n');
+    return o.errors.join("\n");
   }
 };
 
@@ -83,15 +83,19 @@ const contentRef = ref<HTMLElement>();
 
 const root = ref<HTMLInputElement>();
 
-const computedError = computed(() => logState.value?.error ?? props.error ?? getOutputError(props.output));
+const computedError = computed(
+  () => logState.value?.error ?? props.error ?? getOutputError(props.output),
+);
 
-const computedValue = computed(() => logState.value?.lines ?? props.value ?? okOptional(props.output));
+const computedValue = computed(
+  () => logState.value?.lines ?? props.value ?? okOptional(props.output),
+);
 
 const computedValueToCopy = computed(() => {
   if (props.valueToCopy) {
     return props.valueToCopy;
   }
-  if (computedValue.value && typeof computedValue.value === 'string') {
+  if (computedValue.value && typeof computedValue.value === "string") {
     return computedValue.value;
   }
   return undefined;
@@ -101,7 +105,7 @@ const copyActive = ref(false);
 
 useLabelNotch(root);
 
-const iconName = computed(() => (copyActive.value ? 'clipboard-copied' : 'clipboard'));
+const iconName = computed(() => (copyActive.value ? "clipboard-copied" : "clipboard"));
 
 const onClickCopy = () => {
   copyActive.value = true;
@@ -120,7 +124,7 @@ const onClickDownload = (filename: string) => {
   const toDownload = computedValueToCopy.value;
 
   if (toDownload !== undefined) {
-    downloadContent([toDownload, 'text/plain'], filename);
+    downloadContent([toDownload, "text/plain"], filename);
   }
 };
 
@@ -166,7 +170,7 @@ const onContentScroll = (ev: Event) => {
     <div class="pl-log-view__copy">
       <PlTooltip :close-delay="800" position="top">
         <PlMaskIcon24 title="Copy content" :name="iconName" @click="onClickCopy" />
-        <template #tooltip>{{ copyActive ? 'copied' : 'copy' }}</template>
+        <template #tooltip>{{ copyActive ? "copied" : "copy" }}</template>
       </PlTooltip>
       <PlTooltip v-if="downloadFilename" :close-delay="800" position="top">
         <PlIcon24 name="download" @click="() => onClickDownload(downloadFilename!)" />
@@ -174,6 +178,8 @@ const onContentScroll = (ev: Event) => {
       </PlTooltip>
     </div>
     <div v-if="computedError" class="pl-log-view__error">{{ computedError }}</div>
-    <div v-else ref="contentRef" class="pl-log-view__content" @scroll="onContentScroll">{{ computedValue }}</div>
+    <div v-else ref="contentRef" class="pl-log-view__content" @scroll="onContentScroll">
+      {{ computedValue }}
+    </div>
   </div>
 </template>

package/src/components/PlLogView/index.ts

@@ -1 +1 @@
-export { default as PlLogView } from './PlLogView.vue';
+export { default as PlLogView } from "./PlLogView.vue";

package/src/components/PlLogView/pl-log-view.scss

@@ -38,7 +38,7 @@
   }
 
   &.has-error {
-    --log-background: linear-gradient(90deg, #FFEBEB 0%, #FFFFFF 100%);
+    --log-background: linear-gradient(90deg, #ffebeb 0%, #ffffff 100%);
     --border-color-log-view: var(--border-color-error);
   }
 
@@ -61,7 +61,10 @@
     max-width: 100%;
     flex: 1;
     color: var(--txt-01);
-    font-feature-settings: 'ss11' on, 'ss15' on, 'ss17' on;
+    font-feature-settings:
+      "ss11" on,
+      "ss15" on,
+      "ss17" on;
     font-family: var(--font-family-monospace);
     white-space: pre;
     font-size: 14px;
@@ -76,7 +79,10 @@
     max-width: 100%;
     flex: 1;
     color: var(--txt-01);
-    font-feature-settings: 'ss11' on, 'ss15' on, 'ss17' on;
+    font-feature-settings:
+      "ss11" on,
+      "ss15" on,
+      "ss17" on;
     font-family: var(--font-family-monospace);
     white-space: pre;
     font-size: 14px;
@@ -84,4 +90,4 @@
     line-height: 20px;
     @include scrollbar(true, true);
   }
-}
+}

package/src/components/PlLogView/useLogHandle.ts

@@ -1,6 +1,6 @@
-import { reactive, type Reactive, ref, watch } from 'vue';
-import { useTimeoutPoll, whenever } from '@vueuse/core';
-import { getRawPlatformaInstance, type AnyLogHandle, type Platforma } from '@platforma-sdk/model';
+import { reactive, type Reactive, ref, watch } from "vue";
+import { useTimeoutPoll, whenever } from "@vueuse/core";
+import { getRawPlatformaInstance, type AnyLogHandle, type Platforma } from "@platforma-sdk/model";
 
 type LogState = {
   logHandle: AnyLogHandle;
@@ -10,15 +10,20 @@ type LogState = {
   error: unknown;
 };
 
-const ProgressPrefixDefault = '[==PROGRESS==]'; // @TODO ?
+const ProgressPrefixDefault = "[==PROGRESS==]"; // @TODO ?
 
 // from here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions#escaping
 function escapeRegExp(str: string) {
-  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
 
 export function useLogHandle(
-  props: Reactive<{ logHandle: AnyLogHandle | undefined; maxRetries?: number; mockPlatforma?: Platforma; progressPrefix?: string }>,
+  props: Reactive<{
+    logHandle: AnyLogHandle | undefined;
+    maxRetries?: number;
+    mockPlatforma?: Platforma;
+    progressPrefix?: string;
+  }>,
 ) {
   const logState = ref<LogState>();
 
@@ -35,12 +40,16 @@ export function useLogHandle(
     const platforma = props.mockPlatforma ?? getRawPlatformaInstance();
 
     if (!platforma) {
-      console.warn('Platforma API is not available');
+      console.warn("Platforma API is not available");
       return;
     }
 
     while (true) {
-      const result = await platforma.logDriver.readText(currentLogState.logHandle, 100, currentLogState.lastOffset);
+      const result = await platforma.logDriver.readText(
+        currentLogState.logHandle,
+        100,
+        currentLogState.lastOffset,
+      );
 
       currentLogState.error = undefined;
 
@@ -54,7 +63,9 @@ export function useLogHandle(
 
       const progressPrefix = props.progressPrefix ?? ProgressPrefixDefault;
 
-      const newLines = new TextDecoder().decode(result.data).replace(new RegExp(`${escapeRegExp(progressPrefix)}`, 'g'), '');
+      const newLines = new TextDecoder()
+        .decode(result.data)
+        .replace(new RegExp(`${escapeRegExp(progressPrefix)}`, "g"), "");
 
       // We simply change it in a mutable way: if logHandle has been changed, it points to the new object
       currentLogState = Object.assign(currentLogState, {
@@ -74,13 +85,16 @@ export function useLogHandle(
         if (data.errorCount > (props.maxRetries ?? 3)) {
           logState.value.error = err;
         } else {
-          console.warn('skip error:', err, 'retry...');
+          console.warn("skip error:", err, "retry...");
         }
       }
     });
 
   // Only trigger after last fetch is done
-  const timeoutPoll = useTimeoutPoll(fetchAndCatch, 1500, { immediate: false, immediateCallback: true });
+  const timeoutPoll = useTimeoutPoll(fetchAndCatch, 1500, {
+    immediate: false,
+    immediateCallback: true,
+  });
 
   whenever(
     () => logState?.value?.finished,
@@ -94,7 +108,13 @@ export function useLogHandle(
         logState.value = undefined;
         timeoutPoll.pause();
       } else if (lh !== logState.value?.logHandle) {
-        logState.value = { logHandle: lh, lastOffset: 0, lines: '', finished: false, error: undefined };
+        logState.value = {
+          logHandle: lh,
+          lastOffset: 0,
+          lines: "",
+          finished: false,
+          error: undefined,
+        };
         data.errorCount = 0;
         timeoutPoll.resume();
       }

package/src/components/PlMaskIcon16/index.ts

@@ -1,4 +1,4 @@
 /**
  * @deprecated use PlIcon16, color can be setted with the css variable `--svg-fill-0` or component prop `color`
  */
-export { default as PlMaskIcon16 } from '../PlIcon16/PlIcon16.vue';
+export { default as PlMaskIcon16 } from "../PlIcon16/PlIcon16.vue";

package/src/components/PlMaskIcon24/index.ts

@@ -1,4 +1,4 @@
 /**
  * @deprecated use PlIcon24, color can be setted with the css variable `--svg-fill-0` or component prop `color`
  */
-export { default as PlMaskIcon24 } from '../PlIcon24/PlIcon24.vue';
+export { default as PlMaskIcon24 } from "../PlIcon24/PlIcon24.vue";

package/src/components/PlNotificationAlert/PlNotificationAlert.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import { PlBtnGhost } from '../PlBtnGhost';
-import './pl-notification-alert.scss';
+import { PlBtnGhost } from "../PlBtnGhost";
+import "./pl-notification-alert.scss";
 
 const props = withDefaults(
   defineProps<{
-    type?: 'success' | 'error' | 'warning' | 'neutral';
+    type?: "success" | "error" | "warning" | "neutral";
     width?: string;
     closable?: boolean;
   }>(),
-  { type: 'neutral', width: '256px' },
+  { type: "neutral", width: "256px" },
 );
 
 const model = defineModel({ type: Boolean, default: true });
@@ -21,7 +21,12 @@ function closeAlert() {
 </script>
 
 <template>
-  <div v-if="model" :class="type" :style="{ width: `${width}` }" class="pl-notification-alert d-flex flex-column gap-16">
+  <div
+    v-if="model"
+    :class="type"
+    :style="{ width: `${width}` }"
+    class="pl-notification-alert d-flex flex-column gap-16"
+  >
     <div class="pl-notification-alert__wrapper d-flex text-s">
       <div class="pl-notification-alert__content flex-grow-1">
         <slot />

package/src/components/PlNotificationAlert/index.ts

@@ -1 +1 @@
-export { default as PlNotificationAlert } from './PlNotificationAlert.vue';
+export { default as PlNotificationAlert } from "./PlNotificationAlert.vue";

package/src/components/PlNotificationAlert/pl-notification-alert.scss

@@ -1,51 +1,50 @@
 .pl-notification-alert {
-    padding: 12px;
-    position: relative;
-    border-radius: 6px;
-    border: 1px solid var(--border-color-default);
-    min-height: 40px;
-    width: 256px;
-    max-height: 100%;
-    overflow: auto;
-
-    .ui-btn-ghost {
-        position: absolute;
-        right: 0;
-        top: 0;
-    }
-
-    &__close {
-        width: 32px;
-        min-width: 28px;
-
-        .pl-btn-ghost {
-            position: absolute;
-            top: 0;
-            right: 0;
-            width: 40px !important;
-            height: 40px !important;
-        }
-    }
-
-    &__wrapper {
-        flex-grow: 1;
-        overflow: auto;
+  padding: 12px;
+  position: relative;
+  border-radius: 6px;
+  border: 1px solid var(--border-color-default);
+  min-height: 40px;
+  width: 256px;
+  max-height: 100%;
+  overflow: auto;
+
+  .ui-btn-ghost {
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
+  &__close {
+    width: 32px;
+    min-width: 28px;
+
+    .pl-btn-ghost {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 40px !important;
+      height: 40px !important;
     }
+  }
 
-    &.neutral {
-        background: var(--notification-neutral);
-    }
+  &__wrapper {
+    flex-grow: 1;
+    overflow: auto;
+  }
 
-    &.error {
-        background: var(--notification-error);
-    }
+  &.neutral {
+    background: var(--notification-neutral);
+  }
 
-    &.success {
-        background: var(--notification-success);
-    }
+  &.error {
+    background: var(--notification-error);
+  }
 
-    &.warning {
-        background: var(--notification-warning);
-    }
+  &.success {
+    background: var(--notification-success);
+  }
 
-}
+  &.warning {
+    background: var(--notification-warning);
+  }
+}