@massimo-cassandro/minimo 1.16.1 → 1.17.0

package/src/components/modal-alert/modal-alert.js

@@ -1,170 +1,297 @@
-import { marks as default_marks } from './marks.js';
-import {defaults} from './defaults.js';
-
-// https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement
+import * as styles from './modal-alert.module.css';
+import { domBuilder } from '../../utilities/dom-builder/dom-builder.js';
+import { classnames } from '../../utilities/classnames.js';
+
+import successIcon from './svg/success.svg?inline';
+import infoIcon from './svg/info.svg?inline';
+import confirmIcon from './svg/confirm.svg?inline';
+import warningIcon from './svg/warning.svg?inline';
+import errorIcon from './svg/error.svg?inline';
+import dangerIcon from './svg/danger.svg?inline';
+
+// backward compatibility: legacy snake_case param names mapped to their camelCase equivalent
+const legacyParamNames = {
+  extra_class: 'extraClass',
+  heading_class: 'headingClass',
+  text_class: 'textClass',
+  extra_btn: 'extraBtn',
+  extra_btn_focus: 'extraBtnFocus',
+  ok_btn_text: 'okBtnText',
+  ok_btn_class: 'okBtnClass',
+  cancel_btn_text: 'cancelBtnText',
+  cancel_btn_class: 'cancelBtnClass',
+  cancel_focus: 'cancelBtnFocus',
+  use_warning_icon: 'useAltIcon'
+};
+
+const defaults = {
+
+  // settings applied to all dialog types; can be overridden per type
+  globals: {
+    extraClass: null,
+    onOpen: null,
+    onClose: null,
+    animation: true,
+    showMarks: true,
+    callback: null,
+    timer: null,
+    title: null,
+    mes: null,
+    headingClass: null,
+    textClass: null,
+    icon: null,
+    altIcon: null,
+    useAltIcon: false,
+    type: null,
+
+    // extra btn markup, ignored on confirm
+    extraBtn: null,
+    extraBtnFocus: true
+  },
+
+  success: {
+    type: 'success',
+    title: 'Operazione completata',
+    okBtnText: 'OK',
+    okBtnClass: 'btn',
+    timer: 4000, // ms
+    icon: successIcon
+  },
+  error: {
+    type: 'error',
+    title: 'Si è verificato un errore',
+    okBtnText: 'OK',
+    okBtnClass: 'btn',
+    icon: errorIcon
+  },
+  warning: {
+    type: 'warning',
+    title: 'Attenzione!',
+    okBtnText: 'OK',
+    okBtnClass: 'btn',
+    icon: warningIcon,
+    altIcon: dangerIcon,
+    useAltIcon: false // when true, uses altIcon (danger) instead of the default warning icon
+  },
+  info: {
+    type: 'info',
+    title: null,
+    okBtnText: 'OK',
+    okBtnClass: 'btn',
+    icon: infoIcon
+  },
+  confirm: {
+    type: 'confirm',
+    title: 'Confermi?',
+    okBtnText: 'OK',
+    cancelBtnText: 'Annulla',
+    cancelBtnFocus: true, // false to give focus to the ok button
+    okBtnClass: 'btn btn-outline',
+    cancelBtnClass: 'btn',
+    icon: confirmIcon,
+    altIcon: warningIcon,
+    useAltIcon: false // when true, uses altIcon (warning) instead of the default confirm icon
+  }
 
-// TODO rewrite as async
-// TODO refactor entirely, rewrite using domBuilder
+};
 
 /**
  * @typedef {Object} ModalAlertParams
- * @property {string} type - Dialog type: `success`, `error`, `warning`, `info`, or `confirm`.
- * @property {string | null} [extra_class]
- * @property {(() => void) | null} [onOpen]
- * @property {(() => void) | null} [onClose]
- * @property {string | null} [cssFile]
- * @property {boolean} [animation]
- * @property {boolean} [showMarks]
- * @property {((arg?: *) => void) | null} [callback]
- * @property {number | null} [timer]
- * @property {string | null} [mes]
- * @property {string | null} [heading_class]
- * @property {string | null} [text_class]
- * @property {string | null} [extra_btn]
- * @property {string | null} [extra_btn_selector]
- * @property {boolean} [extra_btn_focus]
- * @property {string | null} [title]
- * @property {string} [ok_btn_text]
- * @property {string} [ok_btn_class]
- * @property {string} [cancel_btn_text]
- * @property {string} [cancel_btn_class]
- * @property {boolean} [cancel_focus]
- * @property {boolean} [use_warning_icon]
- */
-
-/**
+ * @property {string} [type] - Dialog type: `success`, `error`, `warning`, `info`, or `confirm`.
+ * @property {string | null} [extraClass] - optional dialog extra class
+ * @property {(() => void) | null} [onOpen] - optional callback on dialog open
+ * @property {(() => void) | null} [onClose] - optional callback on dialog close
+ * @property {boolean} [animation] - if true, dialog will be animated
+ * @property {boolean} [showMarks] - if true, mark iconswill be showed
+ * @property {((arg?: *) => void) | null} [callback] - optional callback dialog after user choice
+ * @property {number | null} [timer] - timer for autoclose (ms). `null` for disable
+ * @property {string | null} [title] - title text
+ * @property {string | null} [mes] - text message (plain or html)
+ * @property {string | null} [headingClass] - optional extra class for heading
+ * @property {string | null} [textClass] - optional extra class for text
+ * @property {string | null} [icon] - Icon markup used for the dialog; defaults to the type's icon.
+ * @property {string | null} [altIcon] - Alternate icon markup, used instead of `icon` when `useAltIcon` is `true`.
+ * @property {boolean} [useAltIcon] - When `true`, uses `altIcon` instead of `icon` (e.g. the `danger` icon on a `warning` dialog, or the `warning` icon on a `confirm` dialog).
+ * @property {DomBuilderItem | null} [extraBtn] - optional extra button (as domBuilder object)
+ * @property {boolean} [extraBtnFocus] - true if the extra button should be focused when the dialog box opens (overrides any focus assigned to the 'cancel' button)
+ * @property {string} [okBtnText] - text for 'ok' button
+ * @property {string} [okBtnClass] - alternative class for 'ok' button. It replaces the default one
+ * @property {string} [cancelBtnText] - text for 'cancel' button
+ * @property {string} [cancelBtnClass] - alternative class for 'cancel' button. It replaces the default one
+ * @property {boolean} [cancelBtnFocus] - true if the cancel button should be focused when the dialog box opens. It has no effect if an extraBtn is set
+ *
  * Renders and opens a modal alert dialog.
+ *
+ * Backward compatibility: legacy snake_case parameter names (`extra_class`, `heading_class`,
+ * `text_class`, `extra_btn`, `extra_btn_selector`, `extra_btn_focus`, `ok_btn_text`,
+ * `ok_btn_class`, `cancel_btn_text`, `cancel_btn_class`, `cancel_focus`, `use_warning_icon`)
+ * are still accepted and internally mapped to their camelCase equivalent, see `legacyParamNames`.
+ *
  * @param {ModalAlertParams} params - Dialog parameters (merged with defaults by type).
- * @param {Record<string, any>} [custom_defaults={}] - Per-project overrides for the default settings.
- * @param {Record<string, string>} [marks=default_marks] - SVG icon map keyed by dialog type.
- * @returns {void}
+ * @returns {Promise<string | boolean | undefined>} Resolves when the dialog closes. If the
+ *   dismissing button has a `data-malert-result` attribute, that string is used; otherwise, for
+ *   `confirm` dialogs, resolves `true`/`false` for the OK/Cancel button; otherwise `undefined`.
  */
+export function modalAlert(params = {}) {
 
-//TODO refactoring
+  return new Promise((resolve) => {
 
-export function modalAlert(params, custom_defaults = {}, marks = default_marks) {
+    try {
 
-  try {
+      // garbage collection
+      document.querySelector('.modal-alert')?.remove();
 
-    // garbage collection
-    document.querySelector('.modal-alert')?.remove();
-
-    const typedDefaults = /** @type {Record<string, any>} */ (defaults);
+      // backward compatibility: map legacy snake_case keys to their camelCase equivalent
+      const rawParams = /** @type {Record<string, any>} */ (params);
+      Object.entries(legacyParamNames).forEach(([legacyKey, newKey]) => {
+        if(legacyKey in rawParams && !(newKey in rawParams)) {
+          rawParams[newKey] = rawParams[legacyKey];
+        }
+      });
 
-    params = /** @type {ModalAlertParams} */ ({
-      ...(typedDefaults.globals ?? {}),
-      ...(custom_defaults.globals ?? {}),
-      ...(typedDefaults[params.type] ?? {}),
-      ...(custom_defaults[params.type] ?? {}),
-      ...params
-    });
+      const typedDefaults = /** @type {Record<string, any>} */ (defaults);
 
-    // backwards compatibility: 'danger' is an alias for 'error'
-    if(params.type === 'danger') {
-      params.type = 'error';
-    }
+      params = /** @type {ModalAlertParams} */ ({
+        ...(typedDefaults.globals ?? {}),
+        ...(typedDefaults[params.type ?? ''] ?? {}),
+        ...params
+      });
 
-    if(!params.type || Object.keys(defaults).filter(item => item !== 'global').indexOf(params.type) === -1) {
-      throw 'Missing or incorrect `type` parameter';
-    }
+      // backwards compatibility: 'danger' is an alias for 'error'
+      if(params.type === 'danger') {
+        params.type = 'error';
+      }
 
-    if(params.callback && typeof params.callback !== 'function') {
-      throw 'Incorrect `callback` parameter';
-    }
-    if(params.onOpen && typeof params.onOpen !== 'function') {
-      throw 'Incorrect `onOpen` parameter';
-    }
-    if(params.onClose && typeof params.onClose !== 'function') {
-      throw 'Incorrect `onClose` parameter';
-    }
-    if(params.extra_btn && !params.extra_btn_selector) {
-      throw 'Incorrect `extra_btn` parameter: missing `extra_btn_selector`';
-    }
+      if(!params.type || Object.keys(defaults).filter(item => item !== 'globals').indexOf(params.type) === -1) {
+        throw 'Missing or incorrect `type` parameter';
+      }
 
-    if(params.cssFile && !document.querySelector(`link[href='${params.cssFile}']`)) {
-      document.head.insertAdjacentHTML('beforeend',
-        `<link rel="stylesheet" href="${params.cssFile}" type="text/css">`
-      );
-    }
+      if(params.callback && typeof params.callback !== 'function') {
+        throw 'Incorrect `callback` parameter';
+      }
+      if(params.onOpen && typeof params.onOpen !== 'function') {
+        throw 'Incorrect `onOpen` parameter';
+      }
+      if(params.onClose && typeof params.onClose !== 'function') {
+        throw 'Incorrect `onClose` parameter';
+      }
 
-    // confirm type can optionally use the warning icon instead of the confirm icon
-    let icon = marks[params.type];
-    if(params.type === 'confirm' && params.use_warning_icon) {
-      icon = marks.warning;
-    }
+      /** @type {HTMLElement | undefined} */
+      let okBtn;
+      /** @type {HTMLElement | undefined} */
+      let cancelBtn;
+      /** @type {HTMLElement | undefined} */
+      let extraBtn;
+
+      const focusTarget =  (params.extraBtn != null && params.extraBtnFocus)
+        ? 'extra'
+        : (params.type === 'confirm' && params.cancelBtnFocus)
+          ? 'cancel'
+          : 'ok';
+
+      const dialog = /** @type {HTMLDialogElement} */ (domBuilder([
+        {
+          tag: 'dialog',
+          className: classnames(
+            styles.malert,
+            styles[params.type],
+            params.animation && styles.mAnimated,
+            params.extraClass
+          ),
+          attrs: {
+            closedBy: ['success', 'info'].includes(params.type)? 'any' : null
+          },
+          children: [
+            {
+              className: styles.innerWrapper,
+              children: [
+                {
+                  condition: params.showMarks,
+                  className: styles.mMark,
+                  content: (params.useAltIcon && params.altIcon)? params.altIcon : params.icon
+                },
+                {
+                  className: styles.mBody,
+                  children: [
+                    {
+                      condition: !!params.title,
+                      className: classnames(styles.mHeading, params.headingClass),
+                      content: params.title
+                    },
+                    {
+                      className: classnames(styles.mText, params.textClass),
+                      content: params.mes
+                    },
+                    {
+                      className: styles.mBtns,
+                      children: [
+                        {
+                          tag: 'button',
+                          className: params.okBtnClass? params.okBtnClass : 'btn btn-secondary',
+                          attrs: {
+                            type: 'button',
+                            autofocus: focusTarget === 'ok'
+                          },
+                          callback: el => okBtn = el
+                        },
+                        {
+                          condition: params.type === 'confirm',
+                          tag: 'button',
+                          className: params.cancelBtnClass? params.cancelBtnClass : 'btn btn-secondary btn-hollow',
+                          attrs: {
+                            type: 'button',
+                            autofocus: focusTarget === 'cancel'
+                          },
+                          callback: el => cancelBtn = el
+                        },
+                        {
+                          ...(params.extraBtn?? {}),
+                          condition: params.extraBtn != null,
+                          callback: el => {
+                            extraBtn = el;
+                            if(typeof params.extraBtn?.callback === 'function') {
+                              params.extraBtn.callback(el);
+                            }
+                          },
+                          attrs: {
+                            ...(params.extraBtn?.attrs?? {}),
+                            autofocus: focusTarget === 'extra'
+                          }
+                        },
+                      ]
+                    },
+                  ]
+                }
+              ]
+            }
+          ]
 
+        }
+      ], document.body));
 
-    // if(!params.title) {
-    //   throw '`title` parameter not present';
-    // }
-    const closedByAny = ['success', 'info'].indexOf(params.type) !== -1? ' closedBy="any"' : '';
-
-    document.body.insertAdjacentHTML('beforeend',
-      `<dialog class="modal-alert modal-alert-${params.type}${params.animation? ' modal-alert-animated' : ''} ${params.extra_class??''}"${closedByAny}>
-        <div class="malert-inner">
-          ${params.showMarks? `<div class="malert-mark">${icon}</div>` : ''}
-          <div class="malert-body">
-            ${params.title? `<div class="malert-heading ${params.heading_class?? ''}">${params.title}</div>` : ''}
-            <div class="malert-text ${params.text_class?? ''}">${params.mes?? ''}</div>
-            <div class="malert-btns">
-              <button type="button" class="malert-ok ${params.ok_btn_class}">
-                ${params.ok_btn_text}
-              </button>
-              ${params.type === 'confirm'?
-                `<button type="button" class="malert-cancel ${params.cancel_btn_class}">
-                  ${params.cancel_btn_text}
-                </button>`
-              : ''}
-              ${params.extra_btn?? ''}
-            </div>
-          </div>
-        </div>
-      </dialog>`
-    );
-
-    const dialog = /** @type {HTMLDialogElement} */ (document.querySelector('.modal-alert'));
-
-    dialog.showModal();
-
-    // button focus
-    const ok_btn = /** @type {HTMLElement | null} */ (dialog.querySelector('.malert-ok')),
-      cancel_btn = /** @type {HTMLElement | null} */ (dialog.querySelector('.malert-cancel')),
-      extra_btn = /** @type {HTMLElement | null} */ (
-        (params.extra_btn && params.extra_btn_selector)? dialog.querySelector(params.extra_btn_selector) : null
-      );
-
-    if(extra_btn && params.extra_btn_focus) {
-      extra_btn.focus();
-
-    } else if(cancel_btn && params.cancel_focus) { // confirm
-      cancel_btn.focus();
-
-    } else {
-      ok_btn?.focus();
-    }
+      dialog.showModal();
 
-    if(params.onOpen && typeof params.onOpen === 'function') {
-      params.onOpen();
-    }
+      if(params.onOpen && typeof params.onOpen === 'function') {
+        params.onOpen();
+      }
 
-    /** @type {number | undefined} */
-    let timeoutID;
+      /** @type {number | undefined} */
+      let timeoutID;
 
-    /**
-     * @param {HTMLElement | null} [btn]
-     * @returns {void}
-     */
-    const dialogDismiss = (btn = null) => {
-      dialog.remove();
+      /**
+       * @param {HTMLElement | null} [btn]
+       * @returns {void}
+       */
+      const dialogDismiss = (btn = null) => {
+        dialog.remove();
 
-      if(params.onClose && typeof params.onClose === 'function') {
-        params.onClose();
-      }
+        if(params.onClose && typeof params.onClose === 'function') {
+          params.onClose();
+        }
 
-      // If present, the callback argument is `btn.dataset.malertResult`
-      // Otherwise, if the modal type is `confirm`, it is `true` for the OK button, `false` for the Cancel button
-      // Otherwise, for all other modal types, it is `undefined`
-      if(params.callback && typeof params.callback === 'function') {
+        // If present, the resolved/callback argument is `btn.dataset.malertResult`
+        // Otherwise, if the modal type is `confirm`, it is `true` for the OK button, `false` for the Cancel button
+        // Otherwise, for all other modal types, it is `undefined`
         let arg;
         if(btn) {
           if(btn.dataset?.malertResult) {
@@ -173,39 +300,42 @@ export function modalAlert(params, custom_defaults = {}, marks = default_marks)
           } else if(params.type === 'confirm') {
             arg = btn.classList.contains('malert-ok');
           }
-        } else {
-          arg = undefined;
         }
 
-        params.callback(arg);
-      }
+        if(params.callback && typeof params.callback === 'function') {
+          params.callback(arg);
+        }
+        resolve(arg);
+
+        if(timeoutID) {
+          window.clearTimeout(timeoutID);
+        }
+      };
 
-      if(timeoutID) {
-        window.clearTimeout(timeoutID);
+      if( params.timer != null && params.type !== 'confirm') {
+        timeoutID = window.setTimeout( function() {
+          dialogDismiss();
+        }, params.timer);
       }
-    };
 
-    if( params.timer && params.type !== 'confirm') {
-      timeoutID = window.setTimeout( function() {
+      dialog.addEventListener('close', () => {
         dialogDismiss();
-      }, params.timer);
-    }
+      }, false);
 
-    dialog.addEventListener('close', () => {
-      dialogDismiss();
-    }, false);
+      [okBtn, cancelBtn, ...(extraBtn? [extraBtn] : [])].forEach(btn => {
 
-    [ok_btn, cancel_btn, ...(extra_btn? [extra_btn] : [])].forEach(btn => {
+        btn?.addEventListener('click', () => {
+          dialogDismiss(btn);
+        }, false);
 
-      btn?.addEventListener('click', () => {
-        dialogDismiss(btn);
-      }, false);
+      });
 
-    });
 
+    } catch(e) {
+      console.error( '[modal-alert] ' + e ); // eslint-disable-line
+      resolve(undefined);
+    }
 
-  } catch(e) {
-    console.error( e ); // eslint-disable-line
-  }
+  });
 
 }

package/src/components/modal-alert/modal-alert.module.css

@@ -0,0 +1,145 @@
+.malert {
+  width: 600px;
+  max-width: 90vw;
+  padding: 0;
+  background-color: var(--malert-background-color);
+  border: none;
+  border-radius: var(--malert-border-radius);
+  box-shadow: var(--malert-box-shadow, var(--default-box-shadow));
+  /* box-shadow: 2px 2px 12px #000; */
+
+  &::backdrop {
+    overscroll-behavior: contain;
+    background-color: var(--malert-backdrop);
+  }
+
+  &, * {
+    box-sizing: border-box;
+  }
+}
+
+.success {
+  --_malert-color: var(--malert-success-bg);
+  --_malert-color-fg: var(--malert-success-fg);
+}
+.info {
+  --_malert-color: var(--malert-info-bg);
+  --_malert-color-fg: var(--malert-info-fg);
+}
+.warning {
+  --_malert-color: var(--malert-warning-bg);
+  --_malert-color-fg: var(--malert-warning-fg);
+}
+.error {
+  --_malert-color: var(--malert-error-bg);
+  --_malert-color-fg: var(--malert-error-fg);
+}
+.confirm {
+  --_malert-color: var(--malert-confirm-bg);
+  --_malert-color-fg: var(--malert-confirm-fg);
+}
+
+
+.innerWrapper{
+  display: flex;
+  flex-flow: column nowrap;
+  /* gap: .7rem; */
+  align-items: stretch;
+  justify-content: flex-start;
+
+  @media screen and (min-width: 600px) {
+    flex-direction: row;
+  }
+}
+
+
+.mMark {
+  display: flex;
+  flex: 0;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: .4rem;
+  background-color: var(--_malert-color-bg);
+
+  svg {
+    width: 100px;
+    aspect-ratio: 1;
+    fill: var(--_malert-color-fg);
+  }
+
+  @media screen and (min-width: 600px) {
+    flex-direction: row;
+    align-items: flex-start;
+    width: auto;
+    padding: 1rem;
+    /* svg {
+      width: 100px;
+    } */
+  }
+}
+
+.mBody {
+  display: flex;
+  flex: 1;
+  flex-flow: column nowrap;
+  gap: .5rem;
+  align-items: stretch;
+  justify-content: flex-start;
+  padding: .5rem;
+
+  text-align: center;
+
+  @media screen and (min-width: 600px) {
+    padding: 1rem;
+    text-align: left;
+  }
+}
+
+.mHeading {
+  font-family: var(--malert-heading-font-family);
+  font-size: var(--malert-heading-font-size);
+  font-weight: var(--malert-heading-font-weight);
+  line-height: var(--malert-heading-line-height);
+}
+.mText {
+  font-family: var(--malert-text-font-family);
+  font-size: var(--malert-text-font-size);
+}
+
+.mBtns {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 1rem;
+  align-items: center;
+  justify-content: flex-start;
+
+  padding-top: 1rem;
+  margin-top: auto;
+
+  @media screen and (min-width: 600px) {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+
+
+.mAnimated {
+  transform: translateY(-500%);
+  animation: dialog-in .3s ease-out;
+
+  &[open] {
+    transform: none;
+  }
+}
+
+@keyframes dialog-in {
+  from {
+    opacity: 0;
+    transform: translateY(-50%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/src/components/modal-alert/svg/confirm.svg

@@ -1 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 132"><circle cx="66" cy="66" r="63"/><path d="M44 48a21.928 21.928 0 0 1 6.443-15.556A21.931 21.931 0 0 1 66 26c12.15 0 22 9.85 22 22 0 6.14-2.668 11.543-6.573 15.683-6.514 6.91-15.363 4.47-15.363 16.065v7.935M66 105.816v-6.975"/></svg>
+<svg width="134" height="134" viewBox="0 0 134 134" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M126.5 67C126.5 34.1391 99.8609 7.5 67 7.5C34.1391 7.5 7.5 34.1391 7.5 67C7.5 99.8609 34.1391 126.5 67 126.5C99.8609 126.5 126.5 99.8609 126.5 67ZM133.5 67C133.5 103.727 103.727 133.5 67 133.5C30.2731 133.5 0.5 103.727 0.5 67C0.5 30.2731 30.2731 0.5 67 0.5C103.727 0.5 133.5 30.2731 133.5 67Z" fill="#8720C5"/>
+<path d="M66.2711 92.088C70.854 92.0881 74.5417 95.761 74.569 100.238C74.5416 104.716 70.8539 108.389 66.2711 108.389C55.2711 107.989 55.2711 92.488 66.2711 92.088ZM74.5709 100.288C74.5709 100.272 74.5691 100.255 74.569 100.238C74.5691 100.222 74.5709 100.205 74.5709 100.189V100.288ZM43.4703 35.2882C52.9703 22.6882 80.7705 23.0887 90.1705 35.3887L90.4703 35.2882C94.4703 40.1882 95.2711 49.7885 92.2711 55.6885C91.0711 58.1885 89.4705 60.288 87.6705 62.088C84.2705 65.488 79.7707 68.0884 75.8707 70.4884C74.0708 71.5883 72.6705 72.6884 71.6705 73.9884C69.4707 77.0883 69.2711 80.1883 69.2711 84.2882H63.4703C60.9704 75.8883 61.6711 68.8887 69.0709 63.8887C75.2709 59.3887 82.8707 54.9882 82.3707 46.2882C82.4707 42.8883 81.6708 40.1883 80.0709 37.9884C78.5709 35.7884 76.4707 34.1885 73.8707 33.1885C68.7709 30.9886 61.5711 30.9881 56.2711 33.088C51.5712 34.7879 47.8706 38.1881 46.6705 43.088C48.9705 43.088 50.8707 43.4887 52.3707 44.3887C55.5705 46.1888 55.6707 50.9881 53.0709 53.2882C50.4709 55.5882 45.1703 55.2885 42.4703 52.6885C38.0705 48.5885 40.2704 39.2882 43.4703 35.2882Z" fill="#8720C5"/>
+</svg>

package/src/components/modal-alert/svg/danger.svg

@@ -0,0 +1,4 @@
+<svg width="134" height="134" viewBox="0 0 134 134" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M61.16 100.44C61.16 98.7867 61.72 97.4 62.84 96.28C63.96 95.16 65.32 94.6 66.92 94.6C68.5733 94.6 69.96 95.16 71.08 96.28C72.2 97.4 72.76 98.7867 72.76 100.44C72.76 102.04 72.2 103.4 71.08 104.52C69.96 105.64 68.5733 106.2 66.92 106.2C65.32 106.2 63.96 105.667 62.84 104.6C61.72 103.48 61.16 102.093 61.16 100.44ZM69.16 88.84H64.68C64.68 85.8533 64.6267 83.1867 64.52 80.84C64.4667 78.44 64.3333 76.3333 64.12 74.52C63.96 72.6533 63.7733 70.9467 63.56 69.4C63.3467 67.8 63.1333 66.2533 62.92 64.76C62.5467 62.6267 62.2267 60.7867 61.96 59.24C61.6933 57.64 61.4533 56.0933 61.24 54.6C61.08 53.1067 61 51.4267 61 49.56C61 47.48 61.5067 45.88 62.52 44.76C63.5333 43.5867 65 43 66.92 43C68.84 43 70.3067 43.5867 71.32 44.76C72.3333 45.88 72.84 47.48 72.84 49.56C72.84 51.3733 72.7333 53.0267 72.52 54.52C72.36 56.0133 72.1467 57.5867 71.88 59.24C71.6133 60.84 71.2933 62.7333 70.92 64.92C70.6533 66.3067 70.4133 67.8 70.2 69.4C69.9867 70.9467 69.8 72.6533 69.64 74.52C69.48 76.3867 69.3467 78.4933 69.24 80.84C69.1867 83.1333 69.16 85.8 69.16 88.84Z" fill="#CC0000"/>
+<path d="M62.8659 12.5C64.7904 9.16666 69.6015 9.16668 71.526 12.5L131.715 116.75C133.639 120.083 131.233 124.25 127.384 124.25H7.00747L6.65102 124.238C3.01218 123.991 0.812961 119.979 2.67739 116.75L62.8659 12.5ZM10.4713 117.25H123.921L67.1959 19L10.4713 117.25Z" fill="#CC0000"/>
+</svg>

package/src/components/modal-alert/svg/error.svg

@@ -1 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 132"><circle cx="66" cy="66" r="63"/><path d="M35 39l61.4 54.4m0-54.4L35 93.2"/></svg>
+<svg width="134" height="134" viewBox="0 0 134 134" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M126.5 67C126.5 34.1391 99.8609 7.5 67 7.5C34.1391 7.5 7.5 34.1391 7.5 67C7.5 99.8609 34.1391 126.5 67 126.5C99.8609 126.5 126.5 99.8609 126.5 67ZM133.5 67C133.5 103.727 103.727 133.5 67 133.5C30.2731 133.5 0.5 103.727 0.5 67C0.5 30.2731 30.2731 0.5 67 0.5C103.727 0.5 133.5 30.2731 133.5 67Z" fill="#CC0000"/>
+<path d="M33.3795 37.6783C34.6613 36.2317 36.8741 36.0981 38.3209 37.3795L66.6471 62.4762L95.0836 37.3756C96.5327 36.0967 98.7448 36.2345 100.024 37.6832C101.303 39.1324 101.165 41.3445 99.7155 42.6237L71.9264 67.1539L99.7203 91.7799C101.167 93.0617 101.301 95.2735 100.019 96.7203C98.7373 98.1672 96.5256 98.301 95.0787 97.0192L66.6383 71.8219L38.316 96.8239C36.8669 98.103 34.6548 97.9652 33.3756 96.5162C32.0968 95.0671 32.2344 92.8549 33.6832 91.5758L61.359 67.1442L33.6783 42.6198C32.2319 41.3379 32.0978 39.125 33.3795 37.6783Z" fill="#CC0000"/>
+</svg>