@yr3/ui 1.0.12 → 1.0.14

package/dist/components/Avatar/avatar.css

@@ -58,6 +58,12 @@
   border-radius: 0;
 }
 
+.yr3Avatar--bordered {
+  border: 2px solid var(--avatar-color);
+  background: transparent;
+  border-radius: 50%;
+}
+
 /* ===== COLORS (THEME DRIVEN) ===== */
 .yr3Avatar--color-primary {
   --avatar-bg: var(--color-primary);
@@ -107,8 +113,14 @@
   --avatar-color: var(--color-on-surface);
 }
 
-.yr3Avatar--bordered {
-  border: 1px solid var(--avatar-color);
+.yr3Avatar--color-common {
+  --avatar-bg: var(--color-white);
+  --avatar-shadow: var(--color-surface);
+  --avatar-color: var(--color-surface);
+}
+
+.yr3Avatar--border-active {
+  border: 2px solid var(--avatar-color);
 }
 
 .yr3Avatar--shadow-1 {

package/dist/components/Avatar/avatar.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/components/Avatar/avatar.scss"],"names":[],"mappings":"AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;AAEA;EAAiB;EAAa;EAAc;EAAiB;;;AAC7D;EAAiB;EAAa;EAAc;EAAiB;;;AAC7D;EAAiB;EAAa;EAAc;EAAiB;;;AAE7D;AAEA;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAEA;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAIF;EACE;;;AAGF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAIF;EACE;EACA;EACA;EACA","file":"avatar.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/components/Avatar/avatar.scss"],"names":[],"mappings":"AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;AAEA;EAAiB;EAAa;EAAc;EAAiB;;;AAC7D;EAAiB;EAAa;EAAc;EAAiB;;;AAC7D;EAAiB;EAAa;EAAc;EAAiB;;;AAE7D;AAEA;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;AAEA;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAIF;EACE;;;AAGF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAIF;EACE;EACA;EACA;EACA","file":"avatar.css"}

package/dist/components/Backdrop/backdrop.css

@@ -5,7 +5,7 @@
   right: 0;
   width: 100%;
   height: 100%;
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--color-backdrop, rgba(0, 0, 0, 0.5));
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.2s ease;

package/dist/components/Button/buttons.css

@@ -37,6 +37,7 @@
   color: var(--color-button);
 }
 .yr3Button--outlined.yr3Button--gradientBorder {
+  --border-radius: 4px;
   background: linear-gradient(129deg, #fdfdfd, #81e9f9, #fda6fe, var(--color-primary)) !important;
   background-clip: text !important;
   -webkit-background-clip: text !important;
@@ -111,6 +112,12 @@
   --color-button: var(--color-warning);
 }
 
+.yr3Button--color-common {
+  --bg-button: var(--color-white);
+  --border-button: var(--color-white);
+  --color-button: var(--color-white);
+}
+
 .yr3Button--animated {
   animation: glowPulse 1s infinite;
   background: linear-gradient(155deg, #4e90fa 0%, #9b41ee 50%, #fd58aa 100%) !important;
@@ -121,10 +128,6 @@
   opacity: 0.6;
 }
 
-.yr3Button:hover, .yr3Button:focus, .yr3Button:active {
-  background: none;
-}
-
 @keyframes glowPulse {
   0% {
     filter: drop-shadow(0 0 8px #d46ef3);

package/dist/components/Button/buttons.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/components/Button/buttons.scss","../../../src/styles/_mixins.scss"],"names":[],"mappings":"AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AACA;EACI;EACA;ECAF;EACA;EAOA;;;ADHH;AACD;EACE;EACA;EACA;;AACA;EC9BE;EAOA;EACA;EACA;EACA;EACA;;;ADwBJ;EACE;EACA;EACA;;AACA;ECPE;EAOA;EACA;EACA;;;ADKJ;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAKF;EACE;EACA;;;AASF;EACE;EACA;;;AAKF;EACE;;;AAIF;EACE;IAAK;;EACL;IAAM;;EACN;IAAO;;;AAGT;EACE;;;AAEF;EACE","file":"buttons.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/components/Button/buttons.scss","../../../src/styles/_mixins.scss"],"names":[],"mappings":"AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AACA;EACI;EACA;ECAF;EACA;EAOA;;;ADHH;AACD;EACE;EACA;EACA;;AACA;EACI;EC/BF;EAOA;EACA;EACA;EACA;EACA;;;ADyBJ;EACE;EACA;EACA;;AACA;ECRE;EAOA;EACA;EACA;;;ADMJ;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAKF;EACE;EACA;;;AASF;EACE;EACA;;;AAKF;EACE;IAAK;;EACL;IAAM;;EACN;IAAO;;;AAGT;EACE;;;AAEF;EACE","file":"buttons.css"}

package/dist/components/Checkbox/checkbox.css

@@ -18,76 +18,67 @@
   position: relative;
 }
 
-/* CHECKED */
-.yr3Checkbox-box--checked {
-  background: var(--checkbox-active);
-  border-color: var(--checkbox-active);
-}
-.yr3Checkbox-box--checked > .yr3Checkbox-label {
-  color: var(--checkbox-active);
-}
-
-/* ICON */
-.yr3Checkbox-box--checked::after {
-  content: "";
-  position: absolute;
-  left: 4px;
-  top: 1px;
-  width: 5px;
-  height: 10px;
-  border: solid var(--color-checkmark, #fff);
-  border-width: 0 2px 2px 0;
-  transform: rotate(45deg);
-}
-
 /* COLORS */
 .yr3Checkbox--color-primary {
   --checkbox-active: var(--color-primary);
-  --color-checkmark: var(--color-surface);
+  --checkbox-filled-active: var(--color-surface);
+  --color-checkmark: var(--color-primary);
 }
 
 .yr3Checkbox--color-secondary {
   --checkbox-active: var(--color-secondary);
+  --checkbox-filled-active: var(--color-surface);
   --color-checkmark: var(--color-secondary);
 }
 
 .yr3Checkbox--color-error {
   --checkbox-active: var(--color-error);
+  --checkbox-filled-active: var(--color-surface);
   --color-checkmark: var(--color-error);
 }
 
 .yr3Checkbox--color-success {
   --checkbox-active: var(--color-success);
+  --checkbox-filled-active: var(--color-surface);
   --color-checkmark: var(--color-success);
 }
 
 .yr3Checkbox--color-warning {
   --checkbox-active: var(--color-warning);
+  --checkbox-filled-active: var(--color-surface);
   --color-checkmark: var(--color-warning);
 }
 
 .yr3Checkbox--color-info {
   --checkbox-active: var(--color-info);
+  --checkbox-filled-active: var(--color-surface);
   --color-checkmark: var(--color-info);
 }
 
 .yr3Checkbox--color-disabled {
   --checkbox-active: var(--color-disabled);
+  --checkbox-filled-active: var(--color-surface);
   --color-checkmark: var(--color-disabled);
 }
 
 .yr3Checkbox--color-background {
   --checkbox-active: var(--color-surface);
+  --checkbox-filled-active: var(--color-surface);
   --color-checkmark: var(--color-surface);
 }
 
 .yr3Checkbox--color-text {
   --checkbox-active: var(--color-text);
+  --checkbox-filled-active: var(--color-surface);
   --color-checkmark: var(--color-text);
-  --checkbox-spacing: 1px;
 }
 
-/* DISABLED */
+.yr3Checkbox--color-common {
+  --checkbox-active: var(--color-white);
+  --checkbox-filled-active: var(--color-surface);
+  --color-checkmark: var(--color-white);
+}
+
 .yr3Checkbox--disabled {
   opacity: 0.5;
   pointer-events: none;
@@ -97,26 +88,59 @@
 .yr3Checkbox--variant-filled .yr3Checkbox-box {
   background: var(--checkbox-active);
   border-color: var(--checkbox-active);
+  color: var(--checkbox-active);
+}
+.yr3Checkbox--variant-filled .yr3Checkbox-box.yr3Checkbox-box--checked::after {
+  content: "";
+  position: absolute;
+  left: 4px;
+  top: 1px;
+  width: 5px;
+  height: 10px;
+  border: solid var(--checkbox-filled-active, #fff);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
 }
 
 .yr3Checkbox--variant-outlined .yr3Checkbox-box {
   background: transparent;
   border-color: var(--checkbox-active);
 }
+.yr3Checkbox--variant-outlined .yr3Checkbox-box.yr3Checkbox-box--checked::after {
+  content: "";
+  position: absolute;
+  left: 4px;
+  top: 1px;
+  width: 5px;
+  height: 10px;
+  border: solid var(--checkbox-active, #fff);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
 
 .yr3Checkbox--variant-text .yr3Checkbox-box {
   border-color: transparent;
   background: transparent;
   --checkbox-spacing: 1px;
 }
+.yr3Checkbox--variant-text .yr3Checkbox-box.yr3Checkbox-box--checked::after {
+  content: "";
+  position: absolute;
+  left: 4px;
+  top: 1px;
+  width: 5px;
+  height: 10px;
+  border: solid var(--checkbox-active, #fff);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
 
-/* LABEL */
-.yr3Checkbox-label {
-  font-size: 14px;
-  user-select: none;
+.yr3Checkbox--type-circle .yr3Checkbox-box {
+  border-radius: 50%;
 }
-.yr3Checkbox-label.yr3Checkbox-box--checked {
-  color: var(--checkbox-active);
+
+.yr3Checkbox--type-circle.yr3Checkbox--variant-filled .yr3Checkbox-box {
+  border-radius: 50%;
 }
 
 /*# sourceMappingURL=checkbox.css.map */

package/dist/components/Checkbox/checkbox.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/components/Checkbox/checkbox.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;;AACA;EACE;;;AAIJ;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;;AACA;EACE;;;AAIJ;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;EACC;;;AAKL;AACA;EACE;EACA;;;AAGF;AACA;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAGF;AACA;EACE;EACA;;AACA;EACE","file":"checkbox.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/components/Checkbox/checkbox.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;;AACA;EACE;;;AAIJ;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIF;AACA;EACI;EACD;EACC;;;AAEJ;EACI;EACF;EACE;;;AAEJ;EACI;EACD;EACC;;;AAEJ;EACI;EACA;EACA;;;AAEJ;EACI;EACD;EACC;;;AAEJ;EACI;EACA;EACA;;;AAEJ;EACI;EACA;EACA;;;AAEJ;EACI;EACA;EACA;;;AAEJ;EACI;EACA;EACA;;;AAEJ;EACI;EACA;EACA;;;AAGJ;EACE;EACA;;;AAGF;AACA;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACE;EACA;;AACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKJ;EACE;;;AAEF;EACE","file":"checkbox.css"}

package/dist/components/Chip/chip.css

@@ -72,6 +72,11 @@
   --badge-color: var(--color-surface);
   --badge-border: var(--color-text-primary);
 }
+.yr3Chip--filled.yr3Chip--common {
+  --badge-bg: var(--color-white);
+  --badge-color: var(--color-surface);
+  --badge-border: var(--color-white);
+}
 .yr3Chip--filled--rounded {
   border-radius: 16px;
 }
@@ -115,6 +120,10 @@
   --badge-border: var(--color-text-primary);
   --badge-color: var(--color-text-primary);
 }
+.yr3Chip--outlined.yr3Chip--common {
+  --badge-border: var(--color-white);
+  --badge-color: var(--color-white);
+}
 .yr3Chip--outlined .yr3Chip--rounded {
   border-radius: 16px;
 }

package/dist/components/Chip/chip.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/components/Chip/chip.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;;AAIR;EACI;;AACA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;;AAIR;EACI;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;;AACA;EACI","file":"chip.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/components/Chip/chip.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;;AAIR;EACI;;AACA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;;AAIR;EACI;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;;AACA;EACI","file":"chip.css"}

package/dist/components/Control/control.css

@@ -85,6 +85,18 @@
   --input-color: var(--color-text-primary);
 }
 
+.yr3Control--color-text {
+  --input-bg: var(--color-surface);
+  --input-border: var(--color-text);
+  --input-color: var(--color-text);
+}
+
+.yr3Control--color-common {
+  --input-bg: var(--color-white);
+  --input-border: var(--color-surface);
+  --input-color: var(--color-surface);
+}
+
 .yr3Control--label {
   height: 48px;
 }

package/dist/components/Control/control.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/components/Control/control.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAEF;EACE","file":"control.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/components/Control/control.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAIF;EACE;;;AAGF;EACE;;;AAEF;EACE","file":"control.css"}

package/dist/components/Divider/divider.css

@@ -80,4 +80,8 @@
   --color-divider: var(--color-text, var(--color-primary));
 }
 
+.yr3Divider--color-common {
+  --color-divider: var(--color-white, var(--color-surface));
+}
+
 /*# sourceMappingURL=divider.css.map */

package/dist/components/Divider/divider.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/components/Divider/divider.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;AAEA;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAIF;AAEA;EACE;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;;;AAGF;AAEA;EACE;EACA;EACA;EACA;;;AAGF;AAEA;EACE;;;AAGF;EACE;;;AAGF;AACA;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE","file":"divider.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/components/Divider/divider.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;AAEA;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAIF;AAEA;EACE;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;;;AAGF;AAEA;EACE;EACA;EACA;EACA;;;AAGF;AAEA;EACE;;;AAGF;EACE;;;AAGF;AACA;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE","file":"divider.css"}

package/dist/components/Group/group.css

@@ -21,11 +21,11 @@
   border-color: var(--group-border-color, var(--color-primary));
   background: var(--bg-group, var(--color-primary));
   --group-bg-item: var(--color-surface, #fff);
-  border-radius: 40px;
+  border-radius: var(--group-border-radius, 40px);
 }
 .yr3Group--filled .yr3Group--item {
   color: var(--color-surface, var(--color-surface));
-  border-radius: 40px;
+  border-radius: var(--group-border-radius, 40px);
 }
 .yr3Group--filled .yr3Group--item--active {
   background: var(--color-surface);
@@ -35,7 +35,7 @@
 .yr3Group--outlined {
   border: 1px solid;
   border-color: var(--group-border-color, var(--color-primary));
-  border-radius: 40px;
+  border-radius: var(--group-border-radius, 40px);
 }
 .yr3Group--outlined .yr3Group--item {
   background: var(--group-bg-item, transparent);
@@ -73,6 +73,13 @@
   --group-color-text: var(--color-secondary);
 }
 
+.yr3Group--color-success {
+  --group-active: var(--color-success);
+  --bg-group: var(--color-success);
+  --group-border-color: var(--color-success);
+  --group-color-text: var(--color-success);
+}
+
 .yr3Group--color-error {
   --group-active: var(--color-error);
   --bg-group: var(--color-error);
@@ -101,6 +108,13 @@
   --group-color-text: var(--color-disabled);
 }
 
+.yr3Group--color-background {
+  --group-active: var(--color-text-primary);
+  --bg-group: var(--color-surface);
+  --group-border-color: var(--color-surface);
+  --group-color-text: var(--color-text-primary);
+}
+
 .yr3Group--color-text {
   --group-active: var(--color-text);
   --bg-group: var(--color-text);
@@ -108,25 +122,19 @@
   --group-color-text: var(--color-text);
 }
 
-.yr3Group--color-background {
-  --group-active: var(--color-text-primary);
-  --bg-group: var(--color-surface);
-  --group-border-color: var(--color-surface);
-  --group-color-text: var(--color-text-primary);
+.yr3Group--color-common {
+  --group-active: var(--color-white);
+  --bg-group: var(--color-text);
+  --group-border-color: var(--color-text);
+  --group-color-text: var(--color-text);
 }
 
-.yr3Group--color-success {
-  --group-active: var(--color-success);
-  --bg-group: var(--color-success);
-  --group-border-color: var(--color-success);
-  --group-color-text: var(--color-success);
+.yr3Group--type-rounded {
+  --group-border-radius: 40px;
 }
 
-.yr3Group--color-text {
-  --group-active: var(--color-text-primary);
-  --bg-group: var(--color-text-primary);
-  --group-border-color: var(--color-text-primary);
-  --group-color-text: var(--color-text-primary);
+.yr3Group--type-square {
+  --group-border-radius: 0;
 }
 
 /*# sourceMappingURL=group.css.map */

package/dist/components/Group/group.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/components/Group/group.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;;AAGF;AAEA;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACA;EACE;EACA;;;AAKN;EACE;EACA;EACA;;AACA;EACE;EACA;;AACA;EACE;EACA;;;AAKN;EACE;;AACA;EACE;EACA;;AACA;EACE;EACA;;;AAON;AAEA;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA","file":"group.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/components/Group/group.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;;AAGF;AAEA;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACA;EACE;EACA;;;AAKN;EACE;EACA;EACA;;AACA;EACE;EACA;;AACA;EACE;EACA;;;AAKN;EACE;;AACA;EACE;EACA;;AACA;EACE;EACA;;;AAON;AAEA;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAKF;EACE;;;AAEF;EACE","file":"group.css"}

package/dist/components/Input/input.css

@@ -80,7 +80,11 @@ input::placeholder {
 }
 
 .yr3Input--color-text {
-  color: var(--color-text-primary);
+  color: var(--color-text);
+}
+
+.yr3Input--color-common {
+  color: var(--color-white);
 }
 
 .yr3Input--label {

package/dist/components/Input/input.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/components/Input/input.scss"],"names":[],"mappings":"AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACI;EACA;EACA;;;AAGJ;AAAA;EAEE;EACA;;;AAEF;EACI;EACA;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIF;AACA;EACE;;;AAIF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAEF;EACE","file":"input.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/components/Input/input.scss"],"names":[],"mappings":"AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACI;EACA;EACA;;;AAGJ;AAAA;EAEE;EACA;;;AAEF;EACI;EACA;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIF;AACA;EACE;;;AAIF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAEF;EACE","file":"input.css"}

package/dist/components/InputArea/inputArea.css

@@ -81,6 +81,11 @@
   color: var(--color-surface);
 }
 
+.yr3InputArea--color-common {
+  --border-color: var(--color-white);
+  color: var(--color-white);
+}
+
 .yr3InputArea--rounded {
   --border-radius: var(--radius-sm);
 }

package/dist/components/InputArea/inputArea.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/components/InputArea/inputArea.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;;;AAIJ;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAGF;EACE","file":"inputArea.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/components/InputArea/inputArea.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;;;AAIJ;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAGF;EACE","file":"inputArea.css"}

package/dist/components/Label/label.css

@@ -58,4 +58,8 @@
   --color-label: var(--color-text-primary);
 }
 
+.yr3Label--color-common {
+  --color-label: var(--color-white);
+}
+
 /*# sourceMappingURL=label.css.map */

package/dist/components/Label/label.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/components/Label/label.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;;AAIR;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI","file":"label.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/components/Label/label.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;;AAIR;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI","file":"label.css"}

package/dist/components/Loader/loader.css

@@ -0,0 +1,112 @@
+.yr3Loader {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--color-backdrop, rgba(0, 0, 0, 0.5));
+}
+
+.yr3Loader--spinner-default {
+  width: var(--spinner-width, 24px);
+  height: var(--spinner-height, 24px);
+  border: 3px solid transparent;
+  border-top-color: var(--spinner-color, var(--color-primary));
+  border-radius: 50%;
+  animation: yr3-spin 0.8s linear infinite;
+}
+
+@keyframes yr3-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.yr3Loader--spinner-size-sm {
+  --spinner-width: 16px;
+  --spinner-height: 16px;
+}
+
+.yr3Loader--spinner-size-md {
+  --spinner-width: 24px;
+  --spinner-height: 24px;
+}
+
+.yr3Loader--spinner-size-lg {
+  --spinner-width: 40px;
+  --spinner-height: 40px;
+}
+
+.yr3Loader--spinner-fancy {
+  width: var(--spinner-width, 24px);
+  height: var(--spinner-height, 24px);
+  border: 3px solid transparent;
+  border-top-color: var(--spinner-color, var(--color-primary));
+  border-radius: 50%;
+  animation: yr3-spin 0.8s linear infinite;
+  border: 3px solid rgba(255, 255, 255, 0.2);
+  border-top-color: var(--spinner-color, var(--color-primary));
+}
+
+.yr3Loader--spinner-color-primary {
+  --spinner-color: var(--color-primary);
+}
+
+.yr3Loader--spinner-color-secondary {
+  --spinner-color: var(--color-secondary);
+}
+
+.yr3Loader--spinner-color-success {
+  --spinner-color: var(--color-success);
+}
+
+.yr3Loader--spinner-color-error {
+  --spinner-color: var(--color-error);
+}
+
+.yr3Loader--spinner-color-disabled {
+  --spinner-color: var(--color-disabled);
+}
+
+.yr3Loader--spinner-color-text {
+  --spinner-color: var(--color-text);
+}
+
+.yr3Loader--spinner-color-background {
+  --spinner-color: var(--color-background);
+}
+
+.yr3Loader--spinner-color-common {
+  --spinner-color: var(--color-white);
+}
+
+.yr3Loader--spinner-dots {
+  display: flex;
+  gap: 6px;
+}
+
+.yr3Loader--spinner-dots span {
+  width: var(--spinner-width, 24px);
+  height: var(--spinner-height, 24px);
+  background: var(--spinner-color, var(--color-primary));
+  border-radius: 50%;
+  animation: yr3-bounce 1s infinite ease-in-out;
+}
+
+.yr3Loader--spinner-dots span:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.yr3Loader--spinner-dots span:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes yr3-bounce {
+  0%, 80%, 100% {
+    transform: scale(0);
+  }
+  40% {
+    transform: scale(1);
+  }
+}
+
+/*# sourceMappingURL=loader.css.map */

package/dist/components/Loader/loader.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../src/components/Loader/loader.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;IACE;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAEF;EACC;;;AAED;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAEF;EACE;;;AAGF;EACE;IAAgB;;EAChB;IAAM","file":"loader.css"}

package/dist/components/Notistack/notistack.css

@@ -164,6 +164,11 @@
   color: var(--color-on-surface);
 }
 
+.yr3Notistack--color-common {
+  background: var(--color-white);
+  color: var(--color-surface);
+}
+
 .yr3Notistack--bottom-right {
   bottom: 20px;
   right: 20px;

package/dist/components/Notistack/notistack.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/styles/aminations.scss","../../../src/components/Notistack/notistack.scss"],"names":[],"mappings":"AAAA;EACE;IAAO;;EACP;IAAK;;;AAGP;EACE;IAAO;IAAwB;;EAC/B;IAAK;IAAqB;;;AAG5B;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AAIJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AAIJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AAIJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AAIJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AAIJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;;ACrEJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AAKJ;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAmCF;EACE;EACA;EACA;;AACA;EACA;;;AAKF;EACE;EACA;EACA;;AACA;EACA;;;AAIF;EACE;EACA;EACA;;AACA;EACA;;;AAIF;EACE;EACA;EACA;;AACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;;AACA;EACG;;;AAKL;EACE;EACA;EACA;EACA;EACA;;AACA;EACE","file":"notistack.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/styles/aminations.scss","../../../src/components/Notistack/notistack.scss"],"names":[],"mappings":"AAAA;EACE;IAAO;;EACP;IAAK;;;AAGP;EACE;IAAO;IAAwB;;EAC/B;IAAK;IAAqB;;;AAG5B;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AAIJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AAIJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AAIJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AAIJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AAIJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;;ACrEJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AAKJ;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAkCF;EACE;EACA;EACA;;AACA;EACA;;;AAKF;EACE;EACA;EACA;;AACA;EACA;;;AAIF;EACE;EACA;EACA;;AACA;EACA;;;AAIF;EACE;EACA;EACA;;AACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;;AACA;EACG;;;AAKL;EACE;EACA;EACA;EACA;EACA;;AACA;EACE","file":"notistack.css"}

package/dist/components/Pending/pending.css

@@ -64,6 +64,10 @@
   --pending-surface: var(--bg-background);
 }
 
+.yr3Pending--color-common {
+  --pending-surface: var(--color-white);
+}
+
 @keyframes pulse {
   0% {
     opacity: 0.6;

package/dist/components/Pending/pending.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/components/Pending/pending.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EAMA;;;AAIF;AAEA;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAMF;EACE;IAAK;;EACL;IAAM;;EACN;IAAO","file":"pending.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/components/Pending/pending.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EAMA;;;AAIF;AAEA;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAKF;EACE;IAAK;;EACL;IAAM;;EACN;IAAO","file":"pending.css"}

package/dist/components/Radio/radio.css

@@ -93,4 +93,9 @@
   --color-border: var(--color-surface);
 }
 
+.yr3Radio--color-common {
+  --radio-active: var(--color-white);
+  --color-border: var(--color-white);
+}
+
 /*# sourceMappingURL=radio.css.map */

package/dist/components/Radio/radio.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/components/Radio/radio.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;AACA;EACE;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA","file":"radio.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/components/Radio/radio.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;AACA;EACE;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA","file":"radio.css"}