quasar-ui-sellmate-ui-kit 3.0.6 → 3.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-sellmate-ui-kit",
-  "version": "3.0.6",
+  "version": "3.1.1",
   "author": "Sellmate Dev Team <dev@sellmate.co.kr>",
   "description": "Sellmate UI Kit",
   "license": "MIT",
@@ -36,7 +36,7 @@
     "@types/node": "^20.11.6",
     "@typescript-eslint/eslint-plugin": "^6.19.1",
     "@typescript-eslint/parser": "^6.19.1",
-    "@vitejs/plugin-vue": "^5.0.3",
+    "@vitejs/plugin-vue": "2.3.3",
     "@vue/compiler-sfc": "^3.4.15",
     "autoprefixer": "^10.0.2",
     "chalk": "^4.1.0",
@@ -59,7 +59,7 @@
     "rtlcss": "^2.6.1",
     "typescript": "^5.3.3",
     "uglify-js": "^3.13.3",
-    "vite": "^5.0.12",
+    "vite": "2.9.15",
     "vite-plugin-eslint": "^1.8.1",
     "vue": "^3.4.15",
     "vue-router": "^4.0.0",

package/src/assets/icons.js

@@ -1,5 +1,9 @@
 export const helpOutlineIcon = 'M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3Z@@fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round&&M9 9.10227C9 8.19318 9.6 6.375 12 6.375C14.4 6.375 15 8.19318 15 9.10227C15 9.87055 14.5715 11.2881 12.9901 11.7088C12.4564 11.8508 12 12.2773 12 12.8295V13.875@@fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round&&M12 15.75C12.5523 15.75 13 16.1977 13 16.75C13 17.3023 12.5523 17.75 12 17.75C11.4477 17.75 11 17.3023 11 16.75C11 16.1977 11.4477 15.75 12 15.75Z@@fill:currentColor|0 0 24 24';
-export const cautionOutlineIcon = 'M17.1279 4.48262C16.6285 3.57252 15.3711 3.57253 14.8718 4.48262L2.97352 26.1675C2.48526 27.0574 3.08576 28.2001 4.10156 28.2001H27.8981C28.9139 28.2001 29.5144 27.0574 29.0261 26.1675L17.1279 4.48262ZM15.9998 7.37402L26.0782 25.7422H5.92142L15.9998 7.37402Z@@fill-rule:evenodd;clip-rule:evenodd;fill:currentColor;stroke-width:2&&M14.7554 14.3565C14.7554 13.6174 15.3126 13.0183 16.0001 13.0183C16.6875 13.0183 17.2447 13.6174 17.2447 14.3565V18.371C17.2447 19.1101 16.6875 19.7092 16.0001 19.7092C15.3126 19.7092 14.7554 19.1101 14.7554 18.371V14.3565Z@@fill:currentColor;stroke-width:2&&M14.7554 22.3274C14.7554 21.6044 15.3126 21.0183 16.0001 21.0183C16.6875 21.0183 17.2447 21.6044 17.2447 22.3274C17.2447 23.0504 16.6875 23.6365 16.0001 23.6365C15.3126 23.6365 14.7554 23.0504 14.7554 22.3274Z@@fill:currentColor;stroke-width:2|0 0 32 32';
+export const cautionOutlineIcon = `M12 3.5L3 20H21L12 3.5Z@@fill: white; stroke: white; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round
+&&M12 15.5C12.5523 15.5 13 15.9477 13 16.5C13 17.0523 12.5523 17.5 12 17.5C11.4477 17.5 11 17.0523 11 16.5C11 15.9477 11.4477 15.5 12 15.5Z@@fill: currentColor
+&&M12 9.25C12.4142 9.25 12.75 9.58579 12.75 10L12.75 14C12.75 14.4142 12.4142 14.75 12 14.75C11.5858 14.75 11.25 14.4142 11.25 14L11.25 10C11.25 9.58579 11.5858 9.25 12 9.25Z@@fill: currentColor
+|0 0 24 24
+`;
 export const infoOutlineIcon = 'M16 4C22.6274 4 28 9.37258 28 16C28 22.6274 22.6274 28 16 28C9.37258 28 4 22.6274 4 16C4 9.37258 9.37258 4 16 4Z@@fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round&&M16 17.5L16 9.5@@fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round&&M16 21C16.5523 21 17 21.4477 17 22C17 22.5523 16.5523 23 16 23C15.4477 23 15 22.5523 15 22C15 21.4477 15.4477 21 16 21Z@@fill:currentColor|0 0 32 32';
 export const warningOutlineIcon = 'M11.1939 2.69383C11.5521 2.06503 12.4479 2.06503 12.8061 2.69383L22.8739 20.363C23.2322 20.9918 22.7843 21.7778 22.0678 21.7778H1.93224C1.21567 21.7778 0.767815 20.9918 1.1261 20.363L11.1939 2.69383ZM12 4.63261L3.18623 20.101H20.8138L12 4.63261Z&&M10.9468 10.6607C10.9468 10.0585 11.4184 9.57037 12 9.57037C12.5817 9.57037 13.0532 10.0585 13.0532 10.6607V13.9319C13.0532 14.534 12.5817 15.0222 12 15.0222C11.4184 15.0222 10.9468 14.534 10.9468 13.9319V10.6607Z&&M10.9468 17.1556C10.9468 16.5665 11.4184 16.0889 12 16.0889C12.5817 16.0889 13.0532 16.5665 13.0532 17.1556C13.0532 17.7447 12.5817 18.2222 12 18.2222C11.4184 18.2222 10.9468 17.7447 10.9468 17.1556Z|0 0 24 24';
 export const attachFileIcon = 'M25.3345 15.7574L16.3189 24.773C13.6829 27.409 9.40901 27.409 6.77297 24.773V24.773C4.13693 22.1369 4.13693 17.8631 6.77297 15.227L17.0039 4.99608C18.8711 3.12888 21.8984 3.12888 23.7656 4.99608V4.99608C25.6328 6.86327 25.6328 9.89059 23.7656 11.7578L14.5806 20.9428C13.4823 22.0412 11.7015 22.0412 10.6031 20.9428V20.9428C9.50478 19.8445 9.50478 18.0637 10.6031 16.9653L19.3388 8.22962@@fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round|0 0 32 32';
@@ -11,7 +15,7 @@ export const editIcon = 'M7.33337 3.33337H4.33337C3.78109 3.33337 3.33337 3.7810
 export const selectDownArrowIcon = 'M1.5 0.75L6 5.25L10.5 0.75@@fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round|0 0 12 6';
 
 export const arrowUpIcon = 'M28 22L16 10L4 22@@fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round|0 0 32 32';
-export const arrowDownIcon = 'M4 10L16 22L28 10@@fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round|0 0 32 32';
+export const arrowDownIcon = 'M4 10L16 22L28 10@@fill:none;strok e:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round|0 0 32 32';
 export const arrowLeftIcon = 'M10.5 1L1.5 10L10.5 19@@fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round|0 0 12 20';
 export const arrowRightIcon = 'M1 19L10 10L1 1@@fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round|0 0 11 20';
 

package/src/components/SCaution.vue

@@ -2,45 +2,34 @@
   <q-banner
     dense
     rounded
-    class="text-Grey_Darken-4 col relative-position s-caution"
-    :class="{
-      's-caution__title': title,
-      's-caution__page bg-Caution_Bg': !useModal,
-      'bg-Red_Lighten-5': useModal,
-    }"
+    class="text-Grey_Darken-4 s-caution flex s-border-Red_Lighten-3 s-border-radius-sm bg-Red_Lighten-6"
   >
-    <div v-if="title" class="s-caution-title">{{ title }}</div>
-    <ul>
-      <slot />
-    </ul>
-    <q-icon
-      v-if="!useModal"
-      class="s-caution-icon"
-      size="240px"
-      :name="cautionOutlineIcon"
-    />
+    <template #avatar>
+      <q-icon
+        class="s-caution-icon"
+        size="24px"
+        color="Red_Lighten-1"
+        :name="cautionOutlineIcon"
+      />
+      <strong class="s-caution__icon--title text-white block font-16-700">{{ label }}</strong>
+    </template>
+    <template #default>
+      <div v-if="title" class="s-caution__content--title font-18-700 q-mb-md text-negative">
+        {{ title }}
+      </div>
+      <ul>
+        <slot />
+      </ul>
+    </template>
   </q-banner>
 </template>
-<script>
-import { defineComponent } from 'vue';
-import { QBanner, QIcon } from 'quasar';
-import { cautionOutlineIcon } from '../assets/icons.js';
+<script setup>
+import { QBanner } from 'quasar';
+import { cautionOutlineIcon } from '../assets/icons';
 
-export default defineComponent({
-  name: 'SCaution',
-  components: {
-    QBanner,
-    QIcon,
-  },
-  props: {
-    title: { type: String, default: '' },
-    useModal: { type: Boolean, default: false },
-  },
-  setup() {
-    return {
-      cautionOutlineIcon,
-    };
-  },
+defineProps({
+  title: { type: String, default: '' },
+  label: { type: String, default: '주의사항' },
 });
 </script>
 
@@ -48,54 +37,43 @@ export default defineComponent({
 @import "../css/quasar.variables.scss";
 
 .s-caution {
-  padding: 20px 0;
-  border-radius: 4px;
+  padding: 0;
   overflow: hidden;
   max: {
     height: 100%;
     width: 100%;
   }
-  ul {
-    margin: 0;
-    padding: 0;
-    margin-left: $caution-margin-left;
-    li {
-      list-style: none;
-      font-size: $default-font;
-      line-height: $double-line-height;
-      &:before {
-        content: "-";
-        font-size: 14px;
-        line-height: 20px;
-        margin-right: 12px;
-      }
-    }
-  }
-  .s-caution-icon {
-    position: absolute;
-    right: -41px;
-    bottom: -34px;
-    color: $Caution_Icon;
-    opacity: 0.24;
+  .q-banner__avatar {
+    flex-direction: column;
+    min-width: 104px !important;
+    max-width: 104px !important;
+    margin: 0 !important;
+    background-color: $Red_Lighten-1;
+    padding: 0 24px;
+    line-height: 26px;
+    align-self: stretch;
+    justify-content: center;
   }
-}
-.s-caution__page {
-  border: 1px solid $Red_Lighten-3;
-}
-.s-caution__title {
-  border-left: 8px solid $Red_Lighten-1;
-  .s-caution-title {
-    width: 100%;
-    height: 30px;
-    line-height: 30px;
-    color: $Red_Default;
-    font: {
-      size: 18px;
-      weight: 700;
-    }
-    margin: {
-      left: $caution-margin-left;
-      bottom: 16px;
+
+  .q-banner__content {
+    padding: 0 !important;
+    margin: 20px 32px;
+    ul {
+      padding: 0;
+      margin: 0;
+
+      li {
+        list-style: none;
+        font-size: $default-font;
+        // NOTE: 현재(2024-02-16) 디자인팀에서 line-height px 단위로 일괄 조절 진행중. 차후 공통으로 % 적용된 부분 일괄 변경 필요.
+        line-height: 22px;
+        &:before {
+          content: '-';
+          font-size: $default-font;
+          line-height: 22px;
+          margin-right: 12px;
+        }
+      }
     }
   }
 }

package/src/components/SChip.vue

@@ -28,7 +28,7 @@
 <script>
 import { defineComponent, ref, watch } from 'vue';
 import { QChip } from 'quasar';
-import { chipRemoveIcon } from '../assets/icons.js';
+import { chipRemoveIcon } from '../assets/icons';
 
 export default defineComponent({
   name: 'SChip',

package/src/components/SDate.vue

@@ -76,7 +76,7 @@
               </q-menu>
             </template>
           </q-input>
-          <span class="q-mx-xs text-Grey_Darken-4">~</span>
+          <span class="q-mx-sm text-Grey_Darken-4">~</span>
           <q-input
             v-model="dateModel.to"
             dense

package/src/components/SDateAutoRangePicker.vue

@@ -89,7 +89,7 @@
   // @ts-check
   import { defineComponent, ref, computed, watch } from 'vue';
   import { QInput, QBtn, QDate, QMenu, QIcon, QSeparator, date } from 'quasar';
-  import { dateRangeIcon, closeIcon } from '../assets/icons.js';
+  import { dateRangeIcon, closeIcon } from '../assets/icons';
 
   const locale = {
     ko: {
@@ -282,7 +282,7 @@
         display: none;
       }
       .date-str {
-        min-width: fit-content;
+        min-width: 66px;
         line-height: $default-height;
         font-size: $default-font;
         display: block;

package/src/components/SDatePicker.vue

@@ -89,7 +89,7 @@
 <script>
   import { defineComponent, ref, watch } from 'vue';
   import { QInput, QBtn, QDate, QMenu, QIcon, date } from 'quasar';
-  import { dateRangeIcon, closeIcon } from '../assets/icons.js';
+  import { dateRangeIcon, closeIcon } from '../assets/icons';
 
   export default defineComponent({
     name: 'SDatePicker',

package/src/components/SDateRange.vue

@@ -70,7 +70,7 @@
             </q-menu>
           </template>
         </q-input>
-        <span class="q-mx-xs">~</span>
+        <span class="q-mx-sm">~</span>
         <q-input
           v-model="dateModel.to"
           dense

package/src/components/SDateRangePicker.vue

@@ -81,7 +81,7 @@
         <span v-else class="text-center text-Grey_Darken-4 date-str">{{
           dateValue.from
         }}</span>
-        <span class="q-mx-xs" style="min-width: 0">~</span>
+        <span class="q-mx-sm" style="min-width: 0">~</span>
         <q-input
           v-if="useInput"
           dense
@@ -177,7 +177,7 @@
   };
   import { defineComponent, ref, watch } from 'vue';
   import { QInput, QBtn, QDate, QMenu, QIcon, QSeparator, date } from 'quasar';
-  import { dateRangeIcon, closeIcon } from '../assets/icons.js';
+  import { dateRangeIcon, closeIcon } from '../assets/icons';
   import { useModelBinder } from '../composables/modelBinder';
 
   export default defineComponent({
@@ -405,7 +405,7 @@
           display: flex;
           justify-content: center;
           height: $default-content-height;
-          margin-left: 8px;
+          margin-left: 12px;
           margin-right: 16px;
 
           .q-field__native {
@@ -435,7 +435,7 @@
     .inner-input {
       > .q-field__inner {
         > .q-field__control {
-          width: fix-content;
+          width: 70px;
           padding: 0px !important;
 
           &::before,
@@ -455,7 +455,7 @@
     }
 
     .date-str {
-      width: fix-content;
+      width: 70px;
       line-height: $default-content-height;
       justify-content: center;
     }
@@ -499,7 +499,7 @@
 
               > span {
                 display: inline-flex;
-                min-width: fix-content;
+                min-width: 70px;
                 font-size: 12px !important;
               }
             }

package/src/components/SDialog.vue

@@ -88,7 +88,7 @@ import {
   infoOutlineIcon,
   warningOutlineIcon,
   closeIcon,
-} from '../assets/icons.js';
+} from '../assets/icons';
 
 export default defineComponent({
   name: 'SConfirm',

package/src/components/SDropdown.vue

@@ -43,7 +43,7 @@
 <script>
   import { QBtn, QItem, QItemLabel, QItemSection, QMenu } from 'quasar';
   import { defineComponent, ref } from 'vue';
-  import { arrowDownIcon } from '../assets/icons.js';
+  import { arrowDownIcon } from '../assets/icons';
 
   export default defineComponent({
     name: 'SDropdown',

package/src/components/SFilePicker.vue

@@ -35,7 +35,7 @@
 <script>
   import { defineComponent, ref, computed } from 'vue';
   import { QFile, QIcon } from 'quasar';
-  import { attachFileIcon, closeIcon } from '../assets/icons.js';
+  import { attachFileIcon, closeIcon } from '../assets/icons';
 
   export default defineComponent({
     name: 'SFilePicker',

package/src/components/SHelp.vue

@@ -40,7 +40,7 @@
 <script>
 import { defineComponent, ref } from 'vue';
 import { QBtn, QPopupProxy, QIcon } from 'quasar';
-import { helpOutlineIcon, closeIcon } from '../assets/icons.js';
+import { helpOutlineIcon, closeIcon } from '../assets/icons';
 
 export default defineComponent({
   name: 'SHelp',

package/src/components/SInputNumber.vue

@@ -38,7 +38,7 @@
 <script>
   import { QBtn, QInput } from 'quasar';
   import { defineComponent, ref, watch } from 'vue';
-  import { minusIcon, plusIcon } from '../assets/icons.js';
+  import { minusIcon, plusIcon } from '../assets/icons';
 
   export default defineComponent({
     name: 'SInputNumber',

package/src/components/SPagination.vue

@@ -90,7 +90,7 @@
     paginationLastIcon,
     paginationLeftIcon,
     paginationRightIcon,
-  } from '../assets/icons.js';
+  } from '../assets/icons';
 
   export default defineComponent({
     name: 'SPagination',

package/src/components/SSelect.vue

@@ -68,7 +68,7 @@
 <script>
   import { computed, defineComponent, ref, watch } from 'vue';
   import { QSelect, QItem, QItemSection, QItemLabel } from 'quasar';
-  import { selectDownArrowIcon } from '../assets/icons.js';
+  import { selectDownArrowIcon } from '../assets/icons';
 
   export default defineComponent({
     name: 'SSelect',

package/src/components/SSelectCheckbox.vue

@@ -51,7 +51,7 @@
 <script>
   import { defineComponent, onBeforeMount, ref, nextTick, watch } from 'vue';
   import { QSelect, QItem, QItemSection, QImg } from 'quasar';
-  import { selectDownArrowIcon } from '../assets/icons.js';
+  import { selectDownArrowIcon } from '../assets/icons';
 
   export default defineComponent({
     name: 'SSelectCheckbox',

package/src/components/SSelectCustom.vue

@@ -75,7 +75,7 @@ import { defineComponent, ref, watch, computed } from 'vue';
 import {
   QSelect, QItem, QItemSection, QIcon,
 } from 'quasar';
-import { selectDownArrowIcon } from '../assets/icons.js';
+import { selectDownArrowIcon } from '../assets/icons';
 
 export default defineComponent({
   name: 'SSelectCustom',

package/src/components/SSelectGroupCheckbox.vue

@@ -68,7 +68,7 @@
 <script>
   import { defineComponent, onBeforeMount, ref, nextTick, watch } from 'vue';
   import { QSelect, QItem, QItemSection, QImg } from 'quasar';
-  import { selectDownArrowIcon } from '../assets/icons.js';
+  import { selectDownArrowIcon } from '../assets/icons';
 
   export default defineComponent({
     name: 'SSelectGroupCheckbox',

package/src/components/SSelectSearch.vue

@@ -69,7 +69,7 @@
 <script>
   import { defineComponent, ref } from 'vue';
   import { QSelect, QItem, debounce } from 'quasar';
-  import { selectDownArrowIcon, searchIcon } from '../assets/icons.js';
+  import { selectDownArrowIcon, searchIcon } from '../assets/icons';
   import SelectItem from './SelelctItem.vue';
 
   export default defineComponent({

package/src/components/SSelectSearchAutoComplete.vue

@@ -55,7 +55,7 @@
 <script>
   import { defineComponent, ref, watch, nextTick } from 'vue';
   import { QIcon, QSelect, QItem, QItemSection, QItemLabel } from 'quasar';
-  import { searchIcon } from '../assets/icons.js';
+  import { searchIcon } from '../assets/icons';
   import SInput from './SInput.vue';
 
   export default defineComponent({

package/src/components/SSelectSearchCheckbox.vue

@@ -106,7 +106,7 @@ QIcon, QImg, QItem, QItemSection, QSelect, debounce,
 import {
 defineComponent, nextTick, onBeforeMount, ref, watch,
 } from 'vue';
-import { searchIcon, selectDownArrowIcon } from '../assets/icons.js';
+import { searchIcon, selectDownArrowIcon } from '../assets/icons';
 
 export default defineComponent({
   name: 'SSelectSearchCheckbox',

package/src/components/STableTree.vue

@@ -157,7 +157,6 @@ visibleProduct.value,
 
     function handleVisibleOption(id) {
       visibleOption.value[id] = !visibleOption.value[id];
-      console.log(visibleOption.value);
     }
     return {
       stateColor,

package/src/components/STimePicker.vue

@@ -24,7 +24,7 @@
             />
           </q-menu>
         </span>
-        <span class="q-mx-xs">~</span>
+        <span class="q-mx-sm">~</span>
         <span class="cursor-pointer">
           {{ timeFormat(model.to) }}
           <q-menu v-if="!disabled" :offset="[0, 10]" class="time-picker-menu">
@@ -55,7 +55,7 @@
 <script>
   import { defineComponent, ref } from 'vue';
   import { QIcon, QMenu, date } from 'quasar';
-  import { clockIcon } from '../assets/icons.js';
+  import { clockIcon } from '../assets/icons';
   import TimePickerCard from './TimePickerCard.vue';
 
   export default defineComponent({

package/src/components/STooltip.vue

@@ -70,7 +70,7 @@ import { defineComponent, ref } from 'vue';
 import {
   QTooltip, QBtn, QMenu, QIcon,
 } from 'quasar';
-import { closeIcon } from '../assets/icons.js';
+import { closeIcon } from '../assets/icons';
 
 export default defineComponent({
   name: 'STooptip',

package/src/components/TimePickerCard.vue

@@ -47,7 +47,7 @@
           @click="onClickDown('hh')"
         />
       </div>
-      <div class="q-mx-xs">:</div>
+      <div class="q-mx-sm">:</div>
       <div class="flex column flex-center">
         <s-button
           flat
@@ -78,7 +78,7 @@
           @click="onClickDown('mm')"
         />
       </div>
-      <div class="q-mx-xs" v-if="useSecond">:</div>
+      <div class="q-mx-sm" v-if="useSecond">:</div>
       <div class="flex column flex-center" v-if="useSecond">
         <s-button
           flat

package/src/composables/table/use-navigator.js

@@ -1,6 +1,6 @@
 import { computed, ref, watch } from 'vue';
 import { copyToClipboard } from 'quasar';
-import { editIcon } from '../../assets/icons.js';
+import { editIcon } from '../../assets/icons';
 
 export function useNavigator(props, attrs, emit) {
   const focusedModel = ref(props.focused || {});

package/src/css/app.scss

@@ -2,6 +2,22 @@
 @import './quasar.variables.scss';
 @import './default.scss';
 
+/*
+Copyright (c) 2021 Kil Hyung-jin, with Reserved Font Name Pretendard.
+https://github.com/orioncactus/pretendard
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+*/
+
+@font-face {
+  font-family: 'Pretendard';
+  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
+}
+
 .q-field {
   font-size: $body-font-size;
   &--outlined {

package/src/css/default.scss

@@ -492,7 +492,6 @@ $colorList: (
   'Red_Lighten-4': '#FFD3D3',
   'Red_Lighten-5': '#FCE6E6',
   'Red_Lighten-6': '#FCEFEF',
-  'Caution_Bg': '#FEF1F1',
   'Caution_Icon': '#fd9595',
   'Orange_Darken-5': '#2F1100',
   'Orange_Darken-4': '#4D1B00',

package/src/css/quasar.variables.scss

@@ -19,7 +19,6 @@ $Red_Lighten-3: #ffb5b5;
 $Red_Lighten-4: #ffd3d3;
 $Red_Lighten-5: #fce6e6;
 $Red_Lighten-6: #fcefef;
-$Caution_Bg: #FEF1F1;
 $Caution_Icon: #fd9595;
 
 $Orange_Darken-5: #2f1100;