@wizco/fenixds-core 1.0.22 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +2 -3
  2. package/styles/core.css +136 -2
  3. package/styles/scss/chips.scss +1 -0
  4. package/styles/scss/forms.scss +178 -3
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@wizco/fenixds-core",
3
3
  "description": "Fenix design system é um produto da Wiz com ativos de design e código de front-end para ajudar as equipes na criação dos seus produtos.",
4
- "version": "1.0.22",
4
+ "version": "1.1.0",
5
5
  "private": false,
6
6
  "sideEffects": false,
7
7
  "author": "Raul Melo Fernandez",
@@ -11,8 +11,7 @@
11
11
  },
12
12
  "peerDependencies": {
13
13
  "@angular/common": ">=16.0.0",
14
- "@angular/core": ">=16.0.0",
15
- "node-sass": "^7.0.3"
14
+ "@angular/core": ">=16.0.0"
16
15
  },
17
16
  "dependencies": {
18
17
  "tslib": "^2.3.0"
package/styles/core.css CHANGED
@@ -901,11 +901,11 @@ a.btn {
901
901
  --wco-input-color-text: var(--wco-color-neutral-900, #C3C8CC);
902
902
  --wco-input-color-bg: var(--wco-color-neutral-50, #E9EBEC); }
903
903
  .wco-form-field.form-field--error:not(:placeholder-shown) ~ label,
904
- .wco-form-field.form--error:not(:placeholder-shown) ~ label, .wco-form-field.form-field--error, .wco-form-field:has(input:is(:placeholder-shown):invalid), .wco-form-field:has(.form-field--error), .wco-form-field.form--error,
904
+ .wco-form-field.form--error:not(:placeholder-shown) ~ label, .wco-form-field.form-field--error, .wco-form-field:has(input:invalid:not(:placeholder-shown)), .wco-form-field:has(.form-field--error), .wco-form-field.form--error,
905
905
  .form-field.form-field--error:not(:placeholder-shown) ~ label,
906
906
  .form-field.form--error:not(:placeholder-shown) ~ label,
907
907
  .form-field.form-field--error,
908
- .form-field:has(input:is(:placeholder-shown):invalid),
908
+ .form-field:has(input:invalid:not(:placeholder-shown)),
909
909
  .form-field:has(.form-field--error),
910
910
  .form-field.form--error {
911
911
  --wco-input-color-label: var(--wco-color-danger-600, #e00707);
@@ -1263,6 +1263,139 @@ label.form-check, .form-check {
1263
1263
  --wco-checkbox-default-color-iconunchecked: var(--wco-color-danger-600);
1264
1264
  --wco-checkbox-default-color-iconchecked: var(--wco-color-danger-600); }
1265
1265
 
1266
+ .wco-form-upload {
1267
+ --wco-attachment-default-color-border: var(--wco-color-neutral-500);
1268
+ --wco-attachment-default-color-bg: var(--wco-color-neutral-50);
1269
+ --wco-attachment-default-color-title: var(--wco-color-neutral-900);
1270
+ --wco-attachment-default-color-body: var(--wco-color-neutral-700);
1271
+ --wco-attachment-default-color-loading-elements: var(--wco-color-neutral-500);
1272
+ --wco-attachment-default-color-finalize-elements: var(--wco-color-neutral-600);
1273
+ --wco-attachment-hover-color-border: var(--wco-color-primary-600);
1274
+ --wco-attachment-hover-color-bg: var(--wco-color-primary-50);
1275
+ --color-button: var(--wco-color-primary-600);
1276
+ --color-button-hover: var(--wco-color-primary-700);
1277
+ border: 2px dashed var(--wco-attachment-default-color-border);
1278
+ border-radius: 10px;
1279
+ padding: var(--wco-spacing-xxs);
1280
+ display: flex;
1281
+ flex-direction: column;
1282
+ align-items: center;
1283
+ gap: var(--wco-spacing-nano);
1284
+ cursor: pointer;
1285
+ transition: all 0.3s;
1286
+ container-type: inline-size;
1287
+ overflow: hidden;
1288
+ min-width: min-content; }
1289
+ .wco-form-upload:has(input[type="file"]:not(:disabled)):not(.wco-form-disabled):hover {
1290
+ border-color: var(--wco-attachment-hover-color-border);
1291
+ background-color: var(--wco-attachment-hover-color-bg); }
1292
+ .wco-form-upload:has(input[type="file"]:not(:disabled)):not(.wco-form-disabled):hover .wco-form-upload__info > span + span {
1293
+ color: var(--wco-attachment-hover-color-bg);
1294
+ background-color: var(--wco-attachment-hover-color-border);
1295
+ box-shadow: 1px 4px 11px var(--wco-attachment-hover-color-border); }
1296
+ .wco-form-upload:has(input[type="file"]:disabled), .wco-form-upload.wco-form-disabled {
1297
+ background-color: var(--wco-color-neutral-100);
1298
+ color: var(--wco-color-neutral-300);
1299
+ opacity: 0.8;
1300
+ cursor: not-allowed; }
1301
+ .wco-form-upload:has(input[type="file"]:disabled) input, .wco-form-upload.wco-form-disabled input {
1302
+ pointer-events: none; }
1303
+ .wco-form-upload.form--error {
1304
+ border-color: var(--wco-color-danger-600); }
1305
+ .wco-form-upload.form--error .wco-form-upload__info > span + span {
1306
+ color: var(--wco-color-danger-600);
1307
+ background-color: var(--wco-color-danger-50);
1308
+ box-shadow: 1px 4px 11px var(--wco-color-danger-50); }
1309
+ .wco-form-upload > input[type="file"] {
1310
+ position: absolute;
1311
+ top: 0;
1312
+ left: 0;
1313
+ width: 100%;
1314
+ height: 100%;
1315
+ opacity: 0;
1316
+ cursor: pointer; }
1317
+ .wco-form-upload__info {
1318
+ display: inherit;
1319
+ justify-content: center;
1320
+ align-items: center;
1321
+ font-family: var(--wco-font-family);
1322
+ font-size: var(--wco-font-size-xs);
1323
+ font-weight: var(--wco-font-weight-regular);
1324
+ letter-spacing: 0.4px; }
1325
+ .wco-form-upload__info > span {
1326
+ color: var(--wco-attachment-default-color-title);
1327
+ font-family: var(--wco-font-family); }
1328
+ .wco-form-upload__info > span + span {
1329
+ color: var(--wco-attachment-hover-color-border);
1330
+ margin-left: var(--wco-spacing-quark);
1331
+ min-height: 32px;
1332
+ padding: var(--wco-spacing-quark) var(--wco-spacing-xxs);
1333
+ display: flex;
1334
+ align-items: center;
1335
+ justify-content: center;
1336
+ border-radius: var(--wco-spacing-quark);
1337
+ gap: var(--wco-spacing-nano);
1338
+ font-weight: 600;
1339
+ transform: scale(0.99);
1340
+ transition: box-shadow 0.3s ease-in-out;
1341
+ box-shadow: 0px 0px 0px var(--wco-attachment-hover-color-border); }
1342
+
1343
+ @container (width < 550px) {
1344
+ .wco-form-upload__info {
1345
+ flex-direction: column; } }
1346
+ .wco-form-upload p {
1347
+ font-family: var(--wco-font-family);
1348
+ font-size: var(--wco-font-size-xxs);
1349
+ font-weight: 300;
1350
+ color: var(--wco-attachment-default-color-body, #50555A);
1351
+ letter-spacing: 0.35px;
1352
+ padding-top: var(--wco-spacing-nano);
1353
+ text-align: center; }
1354
+ .wco-form-upload p strong {
1355
+ font-weight: 600; }
1356
+ .wco-form-upload .upload__info {
1357
+ font-size: var(--wco-font-size-xxs);
1358
+ font-weight: 300;
1359
+ color: var(--wco-attachment-default-color-body);
1360
+ letter-spacing: 0.45px;
1361
+ padding-top: var(--wco-spacing-nano);
1362
+ text-align: center; }
1363
+ .wco-form-upload .upload__button {
1364
+ display: inherit;
1365
+ justify-content: center;
1366
+ gap: 8px; }
1367
+ .wco-form-upload .upload__button span,
1368
+ .wco-form-upload .upload__button label {
1369
+ color: var(--color-button);
1370
+ cursor: pointer; }
1371
+
1372
+ .helper-text {
1373
+ display: flex;
1374
+ gap: var(--wco-spacing-nano);
1375
+ align-items: center;
1376
+ font-size: var(--wco-font-size-xxs);
1377
+ font-family: var(--wco-font-family);
1378
+ font-weight: 400;
1379
+ line-height: 170%;
1380
+ color: #080809; }
1381
+ .helper-text .icon {
1382
+ color: var(--wco-input-color-helptext);
1383
+ width: 20px;
1384
+ height: 20px;
1385
+ display: block;
1386
+ transform: translateY(-1px);
1387
+ background-position: center;
1388
+ background-repeat: no-repeat;
1389
+ background-size: contain; }
1390
+ .helper-text.error .icon {
1391
+ background-image: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.83335 13.4167H10.0834V13.1667V11.5V11.25H9.83335H8.16669H7.91669V11.5V13.1667V13.4167H8.16669H9.83335ZM0.916687 9C0.916687 4.53807 4.53809 0.916664 9.00002 0.916664C13.4619 0.916664 17.0834 4.53807 17.0834 9C17.0834 13.4619 13.4619 17.0833 9.00002 17.0833C4.53809 17.0833 0.916687 13.4619 0.916687 9ZM7.91669 9C7.91669 9.5964 8.40362 10.0833 9.00002 10.0833C9.59643 10.0833 10.0834 9.5964 10.0834 9V5.66666C10.0834 5.07026 9.59643 4.58333 9.00002 4.58333C8.40362 4.58333 7.91669 5.07026 7.91669 5.66666V9Z" fill="%239D0505" stroke="%23700404" stroke-width="1%" /></svg>'); }
1392
+ .helper-text.warning .icon {
1393
+ background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none"><path d="M17.5003 15.4586L17.5003 15.4586C18.0456 16.4005 17.3655 17.5833 16.275 17.5833H3.725C2.63452 17.5833 1.95438 16.4005 2.49969 15.4586L2.4997 15.4586L8.77469 4.61692C9.32006 3.67492 10.6799 3.67491 11.2253 4.6169C11.2253 4.61691 11.2253 4.61692 11.2253 4.61692L17.5003 15.4586ZM10.8333 15.5833H11.0833V15.3333V13.6667V13.4167H10.8333H9.16667H8.91667V13.6667V15.3333V15.5833H9.16667H10.8333ZM8.91667 11.1667C8.91667 11.7631 9.40359 12.25 10 12.25C10.5964 12.25 11.0833 11.7631 11.0833 11.1667V9.5C11.0833 8.90359 10.5964 8.41667 10 8.41667C9.40359 8.41667 8.91667 8.90359 8.91667 9.5V11.1667Z" fill="%23B06D08" stroke="%23754905" stroke-width="1%"/></svg>'); }
1394
+ .helper-text.success .icon {
1395
+ background-image: url('data:image/svg+xml,<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.33333 0C3.73333 0 0 3.73333 0 8.33333C0 12.9333 3.73333 16.6667 8.33333 16.6667C12.9333 16.6667 16.6667 12.9333 16.6667 8.33333C16.6667 3.73333 12.9333 0 8.33333 0ZM6.075 11.9083L3.08333 8.91667C2.75833 8.59167 2.75833 8.06667 3.08333 7.74167C3.40833 7.41667 3.93333 7.41667 4.25833 7.74167L6.66667 10.1417L12.4 4.40833C12.725 4.08333 13.25 4.08333 13.575 4.40833C13.9 4.73333 13.9 5.25833 13.575 5.58333L7.25 11.9083C6.93333 12.2333 6.4 12.2333 6.075 11.9083Z" fill="%23007019"/><path fill-rule="evenodd" clip-rule="evenodd" d="M8.33333 0.5C4.00948 0.5 0.5 4.00948 0.5 8.33333C0.5 12.6572 4.00948 16.1667 8.33333 16.1667C12.6572 16.1667 16.1667 12.6572 16.1667 8.33333C16.1667 4.00948 12.6572 0.5 8.33333 0.5ZM5.72145 12.2619L2.72978 9.27022C2.20952 8.74996 2.20952 7.90838 2.72978 7.38811C3.24991 6.86798 4.09121 6.86785 4.61151 7.38773L6.66605 9.43517L12.0464 4.05478C12.5667 3.53452 13.4083 3.53452 13.9286 4.05478C14.4488 4.57504 14.4488 5.41662 13.9286 5.93689L7.60556 12.2599C7.08986 12.7862 6.23828 12.7787 5.72145 12.2619ZM7.25 11.9083L13.575 5.58333C13.9 5.25833 13.9 4.73333 13.575 4.40833C13.25 4.08333 12.725 4.08333 12.4 4.40833L6.66667 10.1417L4.25833 7.74167C3.93333 7.41667 3.40833 7.41667 3.08333 7.74167C2.75833 8.06667 2.75833 8.59167 3.08333 8.91667L6.075 11.9083C6.4 12.2333 6.93333 12.2333 7.25 11.9083ZM0 8.33333C0 3.73333 3.73333 0 8.33333 0C12.9333 0 16.6667 3.73333 16.6667 8.33333C16.6667 12.9333 12.9333 16.6667 8.33333 16.6667C3.73333 16.6667 0 12.9333 0 8.33333Z" fill="%23005413"/></svg>'); }
1396
+ .helper-text.info .icon {
1397
+ background-image: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.83329 6.75H10.0833V6.5V4.83333V4.58333H9.83329H8.16663H7.91663V4.83333V6.5V6.75H8.16663H9.83329ZM0.916626 9C0.916626 4.53807 4.53803 0.916664 8.99996 0.916664C13.4619 0.916664 17.0833 4.53807 17.0833 9C17.0833 13.4619 13.4619 17.0833 8.99996 17.0833C4.53803 17.0833 0.916626 13.4619 0.916626 9ZM7.91663 12.3333C7.91663 12.9297 8.40356 13.4167 8.99996 13.4167C9.59636 13.4167 10.0833 12.9297 10.0833 12.3333V9C10.0833 8.40359 9.59636 7.91666 8.99996 7.91666C8.40356 7.91666 7.91663 8.40359 7.91663 9V12.3333Z" fill="%23175296" stroke="%23103A6B" stroke-width="0.5"/></svg>'); }
1398
+
1266
1399
  .wco-chip {
1267
1400
  --wco-chip-size: 21px;
1268
1401
  --wco-chip-spacing: var(--wco-spacing-none) var(--wco-spacing-nano);
@@ -1276,6 +1409,7 @@ label.form-check, .form-check {
1276
1409
  --wco-chip-icon-color: var(--wco-color-gray-800);
1277
1410
  font-size: var(--wco-chip-font-size, 14px);
1278
1411
  color: var(--wco-chip-color, #333);
1412
+ border: inherit;
1279
1413
  background-color: var(--wco-chip-background-color, #fff);
1280
1414
  border-radius: var(--wco-chip-border-radius, 4px);
1281
1415
  gap: var(--wco-chip-gap, 4px);
package/styles/scss/chips.scss CHANGED
@@ -11,6 +11,7 @@
11
11
  --wco-chip-icon-color: var(--wco-color-gray-800);
12
12
  font-size: var(--wco-chip-font-size, 14px);
13
13
  color: var(--wco-chip-color, #333);
14
+ border: inherit;
14
15
  background-color: var(--wco-chip-background-color, #fff);
15
16
  border-radius: var(--wco-chip-border-radius, 4px);
16
17
  gap: var(--wco-chip-gap, 4px);
package/styles/scss/forms.scss CHANGED
@@ -153,7 +153,7 @@
153
153
  &.form-field--error:not(:placeholder-shown) ~ label,
154
154
  &.form--error:not(:placeholder-shown) ~ label,
155
155
  &.form-field--error,
156
- &:has(input:is(:placeholder-shown):invalid),
156
+ &:has(input:invalid:not(:placeholder-shown)),
157
157
  &:has(.form-field--error),
158
158
  &.form--error {
159
159
  --wco-input-color-label: var(--wco-color-danger-600, #e00707);
@@ -442,8 +442,6 @@ label.form-check, .form-check {
442
442
  --wco-checkbox-checkbox-gap: 12px;
443
443
  --wco-checkbox-checkbox-radius: 4px;
444
444
 
445
-
446
-
447
445
  display: inline-flex;
448
446
  justify-content: center;
449
447
  align-items: center;
@@ -580,3 +578,180 @@ label.form-check, .form-check {
580
578
  }
581
579
  }
582
580
 
581
+
582
+ ///////////////
583
+ /// file upload
584
+ ///////////////
585
+ .wco-form-upload {
586
+ --wco-attachment-default-color-border: var(--wco-color-neutral-500);
587
+ --wco-attachment-default-color-bg: var(--wco-color-neutral-50);
588
+ --wco-attachment-default-color-title: var(--wco-color-neutral-900);
589
+ --wco-attachment-default-color-body: var(--wco-color-neutral-700);
590
+ --wco-attachment-default-color-loading-elements: var(--wco-color-neutral-500);
591
+ --wco-attachment-default-color-finalize-elements: var(--wco-color-neutral-600);
592
+ --wco-attachment-hover-color-border: var(--wco-color-primary-600);
593
+ --wco-attachment-hover-color-bg: var(--wco-color-primary-50);
594
+ --color-button: var(--wco-color-primary-600);
595
+ --color-button-hover: var(--wco-color-primary-700);
596
+ border: 2px dashed var(--wco-attachment-default-color-border);
597
+ border-radius: 10px;
598
+ padding: var(--wco-spacing-xxs);
599
+ display: flex;
600
+ flex-direction: column;
601
+ align-items: center;
602
+ gap: var(--wco-spacing-nano);
603
+ cursor: pointer;
604
+ transition: all 0.3s;
605
+ container-type: inline-size;
606
+ overflow: hidden;
607
+ min-width: min-content;
608
+ &:has(input[type="file"]:not(:disabled)) {
609
+ &:not(.wco-form-disabled) {
610
+ &:hover {
611
+ border-color: var(--wco-attachment-hover-color-border);
612
+ background-color: var(--wco-attachment-hover-color-bg);
613
+ .wco-form-upload__info > span + span {
614
+ color: var(--wco-attachment-hover-color-bg);
615
+ background-color: var(--wco-attachment-hover-color-border);
616
+ box-shadow: 1px 4px 11px var(--wco-attachment-hover-color-border);
617
+ }
618
+ }
619
+ }
620
+ }
621
+ &:has(input[type="file"]:disabled),
622
+ &.wco-form-disabled {
623
+ background-color: var(--wco-color-neutral-100);
624
+ color: var(--wco-color-neutral-300);
625
+ opacity: 0.8;
626
+ cursor: not-allowed;
627
+ input {
628
+ pointer-events: none;
629
+ }
630
+ }
631
+ //////////////////
632
+ //// STATUS
633
+ //////////////////
634
+ &.form--error {
635
+ border-color: var(--wco-color-danger-600);
636
+ .wco-form-upload__info > span + span {
637
+ color: var(--wco-color-danger-600);
638
+ background-color: var(--wco-color-danger-50);
639
+ box-shadow: 1px 4px 11px var(--wco-color-danger-50);
640
+ }
641
+ }
642
+ > input[type="file"] {
643
+ position: absolute;
644
+ top: 0;
645
+ left: 0;
646
+ width: 100%;
647
+ height: 100%;
648
+ opacity: 0;
649
+ cursor: pointer;
650
+ }
651
+ &__info {
652
+ display: inherit;
653
+ justify-content: center;
654
+ align-items: center;
655
+ font-family: var(--wco-font-family);
656
+ font-size: var(--wco-font-size-xs);
657
+ font-weight: var(--wco-font-weight-regular);
658
+ letter-spacing: 0.4px;
659
+ > span {
660
+ color: var(--wco-attachment-default-color-title);
661
+ font-family: var(--wco-font-family);
662
+ }
663
+ > span + span {
664
+ color: var(--wco-attachment-hover-color-border);
665
+ margin-left: var(--wco-spacing-quark);
666
+ min-height: 32px;
667
+ padding: var(--wco-spacing-quark) var(--wco-spacing-xxs);
668
+ display: flex;
669
+ align-items: center;
670
+ justify-content: center;
671
+ border-radius: var(--wco-spacing-quark);
672
+ gap: var(--wco-spacing-nano);
673
+ font-weight: 600;
674
+ transform: scale(0.99);
675
+ transition: box-shadow 0.3s ease-in-out;
676
+ box-shadow: 0px 0px 0px var(--wco-attachment-hover-color-border);
677
+ }
678
+
679
+ @container (width < 550px) {
680
+ & {
681
+ flex-direction: column;
682
+ }
683
+ }
684
+ }
685
+
686
+ p {
687
+ font-family: var(--wco-font-family);
688
+ font-size: var(--wco-font-size-xxs);
689
+ font-weight: 300;
690
+ color: var(--wco-attachment-default-color-body, #50555A);
691
+ letter-spacing: 0.35px;
692
+ padding-top: var(--wco-spacing-nano);
693
+ text-align: center;
694
+ strong {
695
+ font-weight: 600;
696
+
697
+ }
698
+
699
+ }
700
+
701
+
702
+ .upload__info {
703
+ font-size: var(--wco-font-size-xxs);
704
+ font-weight: 300;
705
+ color: var(--wco-attachment-default-color-body);
706
+ letter-spacing: 0.45px;
707
+ padding-top: var(--wco-spacing-nano);
708
+ text-align: center;
709
+ }
710
+
711
+ .upload__button {
712
+ display: inherit;
713
+ justify-content: center;
714
+ gap: 8px;
715
+ span,
716
+ label {
717
+ color: var(--color-button);
718
+ cursor: pointer;
719
+ }
720
+ }
721
+ }
722
+
723
+ ////////////////////
724
+ /// Helper message
725
+ ////////////////////
726
+ .helper-text {
727
+ display: flex;
728
+ gap: var(--wco-spacing-nano);
729
+ align-items: center;
730
+ font-size: var(--wco-font-size-xxs);
731
+ font-family: var(--wco-font-family);
732
+ font-weight: 400;
733
+ line-height: 170%;
734
+ color: #080809;
735
+ .icon {
736
+ color: var(--wco-input-color-helptext);
737
+ width: 20px;
738
+ height: 20px;
739
+ display: block;
740
+ transform: translateY(-1px);
741
+ background-position: center;
742
+ background-repeat: no-repeat;
743
+ background-size: contain;
744
+ }
745
+ &.error .icon{
746
+ background-image: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.83335 13.4167H10.0834V13.1667V11.5V11.25H9.83335H8.16669H7.91669V11.5V13.1667V13.4167H8.16669H9.83335ZM0.916687 9C0.916687 4.53807 4.53809 0.916664 9.00002 0.916664C13.4619 0.916664 17.0834 4.53807 17.0834 9C17.0834 13.4619 13.4619 17.0833 9.00002 17.0833C4.53809 17.0833 0.916687 13.4619 0.916687 9ZM7.91669 9C7.91669 9.5964 8.40362 10.0833 9.00002 10.0833C9.59643 10.0833 10.0834 9.5964 10.0834 9V5.66666C10.0834 5.07026 9.59643 4.58333 9.00002 4.58333C8.40362 4.58333 7.91669 5.07026 7.91669 5.66666V9Z" fill="%239D0505" stroke="%23700404" stroke-width="1%" /></svg>');
747
+ }
748
+ &.warning .icon {
749
+ background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none"><path d="M17.5003 15.4586L17.5003 15.4586C18.0456 16.4005 17.3655 17.5833 16.275 17.5833H3.725C2.63452 17.5833 1.95438 16.4005 2.49969 15.4586L2.4997 15.4586L8.77469 4.61692C9.32006 3.67492 10.6799 3.67491 11.2253 4.6169C11.2253 4.61691 11.2253 4.61692 11.2253 4.61692L17.5003 15.4586ZM10.8333 15.5833H11.0833V15.3333V13.6667V13.4167H10.8333H9.16667H8.91667V13.6667V15.3333V15.5833H9.16667H10.8333ZM8.91667 11.1667C8.91667 11.7631 9.40359 12.25 10 12.25C10.5964 12.25 11.0833 11.7631 11.0833 11.1667V9.5C11.0833 8.90359 10.5964 8.41667 10 8.41667C9.40359 8.41667 8.91667 8.90359 8.91667 9.5V11.1667Z" fill="%23B06D08" stroke="%23754905" stroke-width="1%"/></svg>');
750
+ }
751
+ &.success .icon{
752
+ background-image: url('data:image/svg+xml,<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.33333 0C3.73333 0 0 3.73333 0 8.33333C0 12.9333 3.73333 16.6667 8.33333 16.6667C12.9333 16.6667 16.6667 12.9333 16.6667 8.33333C16.6667 3.73333 12.9333 0 8.33333 0ZM6.075 11.9083L3.08333 8.91667C2.75833 8.59167 2.75833 8.06667 3.08333 7.74167C3.40833 7.41667 3.93333 7.41667 4.25833 7.74167L6.66667 10.1417L12.4 4.40833C12.725 4.08333 13.25 4.08333 13.575 4.40833C13.9 4.73333 13.9 5.25833 13.575 5.58333L7.25 11.9083C6.93333 12.2333 6.4 12.2333 6.075 11.9083Z" fill="%23007019"/><path fill-rule="evenodd" clip-rule="evenodd" d="M8.33333 0.5C4.00948 0.5 0.5 4.00948 0.5 8.33333C0.5 12.6572 4.00948 16.1667 8.33333 16.1667C12.6572 16.1667 16.1667 12.6572 16.1667 8.33333C16.1667 4.00948 12.6572 0.5 8.33333 0.5ZM5.72145 12.2619L2.72978 9.27022C2.20952 8.74996 2.20952 7.90838 2.72978 7.38811C3.24991 6.86798 4.09121 6.86785 4.61151 7.38773L6.66605 9.43517L12.0464 4.05478C12.5667 3.53452 13.4083 3.53452 13.9286 4.05478C14.4488 4.57504 14.4488 5.41662 13.9286 5.93689L7.60556 12.2599C7.08986 12.7862 6.23828 12.7787 5.72145 12.2619ZM7.25 11.9083L13.575 5.58333C13.9 5.25833 13.9 4.73333 13.575 4.40833C13.25 4.08333 12.725 4.08333 12.4 4.40833L6.66667 10.1417L4.25833 7.74167C3.93333 7.41667 3.40833 7.41667 3.08333 7.74167C2.75833 8.06667 2.75833 8.59167 3.08333 8.91667L6.075 11.9083C6.4 12.2333 6.93333 12.2333 7.25 11.9083ZM0 8.33333C0 3.73333 3.73333 0 8.33333 0C12.9333 0 16.6667 3.73333 16.6667 8.33333C16.6667 12.9333 12.9333 16.6667 8.33333 16.6667C3.73333 16.6667 0 12.9333 0 8.33333Z" fill="%23005413"/></svg>')
753
+ }
754
+ &.info .icon {
755
+ background-image: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.83329 6.75H10.0833V6.5V4.83333V4.58333H9.83329H8.16663H7.91663V4.83333V6.5V6.75H8.16663H9.83329ZM0.916626 9C0.916626 4.53807 4.53803 0.916664 8.99996 0.916664C13.4619 0.916664 17.0833 4.53807 17.0833 9C17.0833 13.4619 13.4619 17.0833 8.99996 17.0833C4.53803 17.0833 0.916626 13.4619 0.916626 9ZM7.91663 12.3333C7.91663 12.9297 8.40356 13.4167 8.99996 13.4167C9.59636 13.4167 10.0833 12.9297 10.0833 12.3333V9C10.0833 8.40359 9.59636 7.91666 8.99996 7.91666C8.40356 7.91666 7.91663 8.40359 7.91663 9V12.3333Z" fill="%23175296" stroke="%23103A6B" stroke-width="0.5"/></svg>')
756
+ }
757
+ }