polpo 0.1.12 → 0.1.13

package/dist/components.css

@@ -1,26 +1,26 @@
 /* src/components/line/line.styles.css */
-.line_styles_custom-line {
+.custom-line {
   --color: attr(data-color, "currentColor");
   --size: attr(data-size, 1px);
   --spacing: attr(data-spacing, 1px);
   --dashSize: attr(data-dash-size, 1px);
-  &.line_styles_horizontal,
-  &.line_styles_vertical {
+  &.horizontal,
+  &.vertical {
     background: var(--color);
     display: inline-block;
     border-radius: 100px;
   }
-  &.line_styles_horizontal {
+  &.horizontal {
     width: 100%;
     height: var(--size);
-    &.line_styles_dotted {
+    &.dotted {
       background:
         radial-gradient(
           calc(var(--size) / 2) calc(var(--size) / 2),
           var(--color) 100%,
           transparent) 0 0 / calc(var(--spacing) + var(--size)) 100%;
     }
-    &.line_styles_dashed {
+    &.dashed {
       background:
         repeating-linear-gradient(
           90deg,
@@ -30,17 +30,17 @@
           transparent calc(var(--spacing) + var(--dashSize)));
     }
   }
-  &.line_styles_vertical {
+  &.vertical {
     height: 100%;
     width: var(--size);
-    &.line_styles_dotted {
+    &.dotted {
       background:
         radial-gradient(
           calc(var(--size) / 2) calc(var(--size) / 2),
           var(--color) 100%,
           transparent) 0 0 / 100% calc(var(--spacing) + var(--size));
     }
-    &.line_styles_dashed {
+    &.dashed {
       background:
         repeating-linear-gradient(
           0deg,
@@ -53,13 +53,13 @@
 }
 
 /* src/components/accordion/accordion.styles.css */
-.accordion_styles_accordion {
+.accordion {
   display: grid;
 }
-.accordion_styles_accordion-item {
+.accordion-item {
   display: grid;
   position: relative;
-  .accordion_styles_accordion-header {
+  .accordion-header {
     display: grid;
     grid-template-columns: 1fr auto;
     align-items: center;
@@ -68,40 +68,40 @@
     position: sticky;
     top: 0;
     padding: 20px 0;
-    &.accordion_styles_has-start-content {
+    &.has-start-content {
       grid-template-columns: auto 1fr auto;
     }
   }
-  .accordion_styles_accordion-header-content {
+  .accordion-header-content {
     display: grid;
   }
-  .accordion_styles_accordion-toggle-icon {
+  .accordion-toggle-icon {
     transition: all 300ms ease;
-    &.accordion_styles_isOpen {
+    &.isOpen {
       transform: rotate(-90deg);
     }
   }
-  .accordion_styles_accordion-body {
+  .accordion-body {
     padding: 10px 0 20px;
   }
 }
 
 /* src/components/cards/flip-card/flip-card.styles.css */
-.flip_card_styles_flip-card {
+.flip-card {
   --cardZIndex: attr(data-zIndex);
   --flipSpeed: attr(data-flipSpeed, 500ms);
   --frontRotate: attr(data-frontRotate);
   --backRotate: attr(data-backRotate);
   perspective: 1000px;
   z-index: var(--cardZIndex);
-  .flip_card_styles_flipper {
+  .flipper {
     height: 100%;
     position: relative;
     width: 100%;
     transform-style: preserve-3d;
   }
-  .flip_card_styles_front,
-  .flip_card_styles_back {
+  .front,
+  .back {
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
     transform-style: preserve-3d;
@@ -111,30 +111,30 @@
     top: 0;
     width: 100%;
   }
-  .flip_card_styles_front {
+  .front {
     position: relative;
     transform: var(--frontRotate);
     z-index: 2;
   }
-  .flip_card_styles_back {
+  .back {
     position: absolute;
     transform: var(--backRotate);
   }
-  .flip_card_styles_is-flipped {
-    .flip_card_styles_front {
+  .is-flipped {
+    .front {
       position: absolute;
     }
-    .flip_card_styles_back {
+    .back {
       position: relative;
     }
   }
 }
 
 /* src/components/cards/hover-card/hover-card.styles.css */
-.hover_card_styles_hover-card {
+.hover-card {
   display: inline-block;
   transition: all 300ms ease;
-  .hover_card_styles_card-hover-layer {
+  .card-hover-layer {
     transition: all 100ms ease;
     width: 100%;
     height: 100%;
@@ -143,118 +143,118 @@
 }
 
 /* src/components/typography/typography.styles.css */
-.typography_styles_typography {
+.typography {
   margin: 0;
   padding: 0.5em 0 0.4em;
-  &.typography_styles_primary {
+  &.primary {
     color: var(--primary-500);
   }
-  &.typography_styles_secondary {
+  &.secondary {
     color: var(--secondary-500);
   }
-  &.typography_styles_tertiary {
+  &.tertiary {
     color: var(--tertiary-500);
   }
-  &.typography_styles_active {
+  &.active {
     color: var(--active-500);
   }
-  &.typography_styles_alert {
+  &.alert {
     color: var(--alert-500);
   }
-  &.typography_styles_warning {
+  &.warning {
     color: var(--warning-500);
   }
-  &.typography_styles_info {
+  &.info {
     color: var(--info-500);
   }
-  &.typography_styles_recommended-width {
+  &.recommended-width {
     max-width: 70ch;
   }
-  &.typography_styles_code-family {
+  &.code-family {
     font-family: monospace;
   }
-  &.typography_styles_no-padding {
+  &.no-padding {
     padding: 0;
   }
-  &.typography_styles_nowrap {
+  &.nowrap {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-  &.typography_styles_nowrap-max-lines {
+  &.nowrap-max-lines {
     overflow: hidden;
     display: -webkit-box;
     -webkit-box-orient: vertical;
   }
-  &.typography_styles_nowrap-max-lines-2 {
+  &.nowrap-max-lines-2 {
     -webkit-line-clamp: 2;
     line-clamp: 2;
   }
-  &.typography_styles_nowrap-max-lines-3 {
+  &.nowrap-max-lines-3 {
     -webkit-line-clamp: 3;
     line-clamp: 3;
   }
-  &.typography_styles_nowrap-max-lines-4 {
+  &.nowrap-max-lines-4 {
     -webkit-line-clamp: 4;
     line-clamp: 4;
   }
-  &.typography_styles_nowrap-max-lines-5 {
+  &.nowrap-max-lines-5 {
     -webkit-line-clamp: 5;
     line-clamp: 5;
   }
-  &.typography_styles_hero {
+  &.hero {
     font-size: var(--typography-size-hero);
     line-height: var(--typography-line-height-header);
     font-weight: 700;
   }
-  &.typography_styles_header1 {
+  &.header1 {
     font-size: var(--typography-size-header1);
     line-height: var(--typography-line-height-header);
     font-weight: 700;
   }
-  &.typography_styles_header2 {
+  &.header2 {
     font-size: var(--typography-size-header2);
     line-height: var(--typography-line-height-header);
     font-weight: 700;
   }
-  &.typography_styles_header3 {
+  &.header3 {
     font-size: var(--typography-size-header3);
     line-height: var(--typography-line-height-header);
     font-weight: 700;
   }
-  &.typography_styles_header4 {
+  &.header4 {
     font-size: var(--typography-size-header4);
     line-height: var(--typography-line-height-header);
     font-weight: 700;
   }
-  &.typography_styles_body {
+  &.body {
     font-size: var(--typography-size-body);
     line-height: var(--typography-line-height-common);
     font-weight: 400;
   }
-  &.typography_styles_label {
+  &.label {
     font-size: var(--typography-size-label);
     line-height: var(--typography-line-height-common);
     font-weight: 400;
   }
-  &.typography_styles_small {
+  &.small {
     font-size: var(--typography-size-small);
     line-height: var(--typography-line-height-common);
     font-weight: 400;
   }
-  &.typography_styles_bold {
+  &.bold {
     font-weight: 700;
   }
-  &.typography_styles_regular {
+  &.regular {
     font-weight: 400;
   }
-  &.typography_styles_light {
+  &.light {
     font-weight: 300;
   }
 }
 
 /* src/components/ripple/ripple.styles.css */
-.ripple_styles_ripple {
+.ripple {
   position: absolute;
   display: block;
   top: 0;
@@ -264,18 +264,18 @@
   overflow: hidden;
   border-radius: inherit;
   z-index: 1;
-  .ripple_styles_ripple-effect {
+  .ripple-effect {
     position: absolute;
     transform: translate(-50%, -50%);
     border-radius: 50%;
     width: 0;
     height: 0;
     pointer-events: none;
-    animation: ripple_styles_ripple-effect infinite;
+    animation: ripple-effect infinite;
     opacity: 0.4;
   }
 }
-@keyframes ripple_styles_ripple-effect {
+@keyframes ripple-effect {
   to {
     width: 300px;
     height: 300px;
@@ -285,7 +285,7 @@
 }
 
 /* src/components/button/button.styles.css */
-.button_styles_button {
+.button {
   --button-blur: 2px;
   --color: var(--neutral-800);
   --solid-background: var(--neutral-900);
@@ -315,39 +315,39 @@
   outline: none;
   transition: all 150ms ease;
   user-select: none;
-  &.button_styles_icon {
+  &.icon {
     padding: 0.625em;
   }
-  &.button_styles_full {
+  &.full {
     width: 100%;
   }
-  &.button_styles_no-wrap {
+  &.no-wrap {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
-  &.button_styles_size-small {
+  &.size-small {
     font-size: var(--typography-size-small);
   }
-  &.button_styles_size-regular {
+  &.size-regular {
     font-size: var(--typography-size-label);
   }
-  &.button_styles_size-large {
+  &.size-large {
     font-size: var(--typography-size-body);
   }
-  &.button_styles_radius-none {
+  &.radius-none {
     border-radius: 0;
   }
-  &.button_styles_radius-small {
+  &.radius-small {
     border-radius: 0.25em;
   }
-  &.button_styles_radius-medium {
+  &.radius-medium {
     border-radius: 0.5em;
   }
-  &.button_styles_radius-large {
+  &.radius-large {
     border-radius: 1em;
   }
-  &.button_styles_radius-full {
+  &.radius-full {
     border-radius: 100rem;
   }
   &:not(:disabled) {
@@ -366,14 +366,14 @@
     }
   }
   color: var(--color);
-  .button_styles_ripple-effect {
+  .ripple-effect {
     background: var(--color);
   }
-  &.button_styles_solid {
+  &.solid {
     background: var(--solid-background);
     color: var(--solid-text);
     backdrop-filter: blur(var(--button-blur));
-    .button_styles_ripple-effect {
+    .ripple-effect {
       background: var(--solid-text);
     }
     &:focus-visible {
@@ -387,7 +387,7 @@
       background: var(--solid-active-background);
     }
   }
-  &.button_styles_flat {
+  &.flat {
     background: var(--flat-background);
     backdrop-filter: blur(var(--button-blur));
     &:hover {
@@ -397,7 +397,7 @@
       background: var(--flat-active-background);
     }
   }
-  &.button_styles_outlined {
+  &.outlined {
     background: transparent;
     border: 1px solid;
     &:hover {
@@ -407,7 +407,7 @@
       background: var(--outlined-active-background);
     }
   }
-  &.button_styles_text {
+  &.text {
     background: transparent;
     &:hover {
       background: var(--text-hover-background);
@@ -420,7 +420,7 @@
     box-shadow: 0 0 0 0.3125em var(--shadow-color);
     background: var(--focus-background);
   }
-  &.button_styles_primary {
+  &.primary {
     --color: var(--primary-500);
     --solid-background: var(--primary-500);
     --solid-text: var(--primary-50);
@@ -436,7 +436,7 @@
     --shadow-color: hsl(from var(--primary-500) h s l / 20%);
     --focus-background: hsl(from var(--primary-100) h s l / 20%);
   }
-  &.button_styles_secondary {
+  &.secondary {
     --color: var(--secondary-500);
     --solid-background: var(--secondary-500);
     --solid-text: var(--secondary-50);
@@ -452,7 +452,7 @@
     --shadow-color: hsl(from var(--secondary-500) h s l / 20%);
     --focus-background: hsl(from var(--secondary-100) h s l / 20%);
   }
-  &.button_styles_tertiary {
+  &.tertiary {
     --color: var(--tertiary-500);
     --solid-background: var(--tertiary-500);
     --solid-text: var(--tertiary-50);
@@ -468,7 +468,7 @@
     --shadow-color: hsl(from var(--tertiary-500) h s l / 20%);
     --focus-background: hsl(from var(--tertiary-100) h s l / 20%);
   }
-  &.button_styles_active {
+  &.active {
     --color: var(--active-500);
     --solid-background: var(--active-500);
     --solid-text: var(--active-50);
@@ -484,7 +484,7 @@
     --shadow-color: hsl(from var(--active-500) h s l / 20%);
     --focus-background: hsl(from var(--active-100) h s l / 20%);
   }
-  &.button_styles_warning {
+  &.warning {
     --color: var(--warning-500);
     --solid-background: var(--warning-500);
     --solid-text: var(--warning-50);
@@ -500,7 +500,7 @@
     --shadow-color: hsl(from var(--warning-500) h s l / 20%);
     --focus-background: hsl(from var(--warning-100) h s l / 20%);
   }
-  &.button_styles_alert {
+  &.alert {
     --color: var(--alert-500);
     --solid-background: var(--alert-500);
     --solid-text: var(--alert-50);
@@ -516,7 +516,7 @@
     --shadow-color: hsl(from var(--alert-500) h s l / 20%);
     --focus-background: hsl(from var(--alert-100) h s l / 20%);
   }
-  &.button_styles_info {
+  &.info {
     --color: var(--info-500);
     --solid-background: var(--info-500);
     --solid-text: var(--info-50);
@@ -536,21 +536,21 @@
     color: var(--neutral-200);
     pointer-events: none;
   }
-  &.button_styles_solid:disabled {
+  &.solid:disabled {
     background: var(--neutral-200);
     color: var(--neutral-50);
   }
-  &.button_styles_flat:disabled {
+  &.flat:disabled {
     background: hsl(from var(--neutral-50) h s l / 80%);
   }
-  &.button_styles_outlined:disabled,
-  &.button_styles_text:disabled {
+  &.outlined:disabled,
+  &.text:disabled {
     background: transparent;
   }
 }
 
 /* src/components/cursor/cursor.styles.css */
-.cursor_styles_cursor-overlay {
+.cursor-overlay {
   position: fixed;
   top: 0;
   left: 0;
@@ -559,7 +559,7 @@
   cursor: none;
   pointer-events: none;
 }
-.cursor_styles_cursor {
+.cursor {
   position: fixed;
   border-radius: 50%;
   z-index: 99999999;
@@ -568,7 +568,7 @@
   @media (any-pointer: coarse) {
     display: none;
   }
-  &.cursor_styles_outer-circle {
+  &.outer-circle {
     margin-left: -15px;
     margin-top: -15px;
     width: 30px;
@@ -583,7 +583,7 @@
       height 0.3s ease-in-out,
       margin 0.3s ease-in-out,
       opacity 0.3s ease-in-out;
-    &.cursor_styles_cursor-hover {
+    &.cursor-hover {
       margin-left: -40px;
       margin-top: -40px;
       width: 80px;
@@ -591,7 +591,7 @@
       background-color: var(--primary-500);
       opacity: 0.3;
     }
-    &.cursor_styles_cursor-text {
+    &.cursor-text {
       margin-left: -2px;
       margin-top: -40px;
       width: 4px;
@@ -600,7 +600,7 @@
       opacity: 0.3;
     }
   }
-  &.cursor_styles_inner-circle {
+  &.inner-circle {
     margin-left: -3px;
     margin-top: -3px;
     width: 6px;
@@ -609,14 +609,14 @@
     background-color: var(--primary-500);
     transition: opacity 0.3s ease-in-out;
     opacity: 1;
-    &.cursor_styles_cursor-hover {
+    &.cursor-hover {
       opacity: 0;
     }
   }
 }
 
 /* src/components/form/checkbox/checkbox.styles.css */
-.checkbox_styles_checkbox {
+.checkbox {
   border-radius: 40%;
   background: var(--background-paper);
   transition: all 300ms ease;
@@ -626,7 +626,7 @@
   outline: 1px solid;
   display: flex;
   position: relative;
-  .checkbox_styles_checkbox-input {
+  .checkbox-input {
     position: absolute;
     top: 0;
     left: 0;
@@ -636,17 +636,17 @@
     opacity: 0;
     z-index: 2;
   }
-  &.checkbox_styles_size-small {
+  &.size-small {
     font-size: 1em;
   }
-  &.checkbox_styles_size-regular {
+  &.size-regular {
     font-size: 1.2em;
   }
-  &.checkbox_styles_size-large {
+  &.size-large {
     font-size: 1.4em;
   }
 }
-.checkbox_styles_checkbox-fill {
+.checkbox-fill {
   transition: all 200ms ease-out;
   border-radius: inherit;
   margin: auto;
@@ -657,14 +657,14 @@
   display: grid;
   place-content: center;
   place-items: center;
-  .checkbox_styles_checkbox-icon {
+  .checkbox-icon {
     font-size: 0.7em;
     z-index: 1;
     opacity: 0;
     transition: opacity 300ms ease;
   }
 }
-.checkbox_styles_checkbox-container {
+.checkbox-container {
   --color: var(--neutral-800);
   --color-icon: var(--neutral-50);
   --color-hover: hsl(from var(--neutral-800) h s l / 50%);
@@ -674,37 +674,37 @@
   align-items: center;
   gap: 0.5em;
   width: fit-content;
-  .checkbox_styles_checkbox-label {
+  .checkbox-label {
     cursor: pointer;
     user-select: none;
     width: 100%;
   }
-  .checkbox_styles_checkbox {
+  .checkbox {
     color: var(--color);
-    &.checkbox_styles_is-checked {
-      .checkbox_styles_checkbox-fill {
+    &.is-checked {
+      .checkbox-fill {
         width: 100%;
         height: 100%;
         background: var(--color);
         color: var(--color-icon);
       }
-      .checkbox_styles_checkbox-icon {
+      .checkbox-icon {
         opacity: 1;
       }
     }
   }
-  .checkbox_styles_checkbox:hover,
-  &:has(.checkbox_styles_checkbox-label:hover) .checkbox_styles_checkbox {
+  .checkbox:hover,
+  &:has(.checkbox-label:hover) .checkbox {
     box-shadow: 0 0 0 0.3em var(--color-hover);
-    .checkbox_styles_checkbox-fill {
+    .checkbox-fill {
       width: 20%;
       height: 20%;
       border-radius: 20%;
       background: var(--color-hover);
       color: var(--color-icon);
     }
-    &:is(.checkbox_styles_is-checked) {
-      .checkbox_styles_checkbox-fill {
+    &:is(.is-checked) {
+      .checkbox-fill {
         width: 100%;
         height: 100%;
         border-radius: inherit;
@@ -712,42 +712,42 @@
       }
     }
   }
-  .checkbox_styles_checkbox:focus,
-  &:has(.checkbox_styles_checkbox-input:focus) .checkbox_styles_checkbox,
-  &:has(.checkbox_styles_checkbox-label:focus) .checkbox_styles_checkbox {
+  .checkbox:focus,
+  &:has(.checkbox-input:focus) .checkbox,
+  &:has(.checkbox-label:focus) .checkbox {
     box-shadow: 0 0 0 0.3em var(--color-hover);
   }
-  &.checkbox_styles_color-primary {
+  &.color-primary {
     --color: var(--primary-500);
     --color-icon: var(--primary-50);
     --color-hover: hsl(from var(--primary-500) h s l / 50%);
   }
-  &.checkbox_styles_color-secondary {
+  &.color-secondary {
     --color: var(--secondary-500);
     --color-icon: var(--secondary-50);
     --color-hover: hsl(from var(--secondary-500) h s l / 50%);
   }
-  &.checkbox_styles_color-tertiary {
+  &.color-tertiary {
     --color: var(--tertiary-500);
     --color-icon: var(--tertiary-50);
     --color-hover: hsl(from var(--tertiary-500) h s l / 50%);
   }
-  &.checkbox_styles_color-active {
+  &.color-active {
     --color: var(--active-500);
     --color-icon: var(--active-50);
     --color-hover: hsl(from var(--active-500) h s l / 50%);
   }
-  &.checkbox_styles_color-warning {
+  &.color-warning {
     --color: var(--warning-500);
     --color-icon: var(--warning-50);
     --color-hover: hsl(from var(--warning-500) h s l / 50%);
   }
-  &.checkbox_styles_color-alert {
+  &.color-alert {
     --color: var(--alert-500);
     --color-icon: var(--alert-50);
     --color-hover: hsl(from var(--alert-500) h s l / 50%);
   }
-  &.checkbox_styles_color-info {
+  &.color-info {
     --color: var(--info-500);
     --color-icon: var(--info-50);
     --color-hover: hsl(from var(--info-500) h s l / 50%);
@@ -755,129 +755,129 @@
 }
 
 /* src/components/form/field/field.styles.css */
-.field_styles_form-field {
+.form-field {
   display: grid;
   grid-auto-columns: auto;
   gap: 0.5em;
   transition: all 200ms ease;
-  .field_styles_field-content {
+  .field-content {
     display: grid;
     grid-template-columns: auto 1fr auto;
     align-items: center;
   }
-  .field_styles_field-left-icon,
-  .field_styles_field-right-icon {
+  .field-left-icon,
+  .field-right-icon {
     font-size: 1em;
   }
-  .field_styles_field-left-icon {
+  .field-left-icon {
     margin-right: 1em;
   }
-  .field_styles_field-right-icon {
+  .field-right-icon {
     margin-left: 1em;
   }
-  .field_styles_field-message {
+  .field-message {
     display: grid;
     grid-auto-flow: column;
     gap: 5px;
     align-items: center;
     justify-content: start;
   }
-  &.field_styles_variant-content-border {
-    .field_styles_field-content {
+  &.variant-content-border {
+    .field-content {
       border: 1px solid var(--border);
       border-radius: 4px;
       padding: 1em;
       background: var(--background);
     }
   }
-  &.field_styles_variant-content-line {
-    .field_styles_field-content {
+  &.variant-content-line {
+    .field-content {
       border-bottom: 1px solid;
       padding: 0.5em 0;
     }
   }
-  &.field_styles_variant-full-border {
+  &.variant-full-border {
     border: 1px solid var(--border);
     border-radius: 4px;
     padding: 0.5em 0;
     background: var(--background);
-    .field_styles_field-label,
-    .field_styles_field-content,
-    .field_styles_field-message {
+    .field-label,
+    .field-content,
+    .field-message {
       padding: 0 1em;
     }
   }
-  &.field_styles_variant-inline {
+  &.variant-inline {
     grid-auto-flow: column;
     padding: 0.5em 0;
     align-items: center;
-    .field_styles_field-label {
+    .field-label {
       width: auto;
     }
   }
-  &.field_styles_error {
+  &.error {
     color: var(--alert-500);
     border-color: var(--alert-500);
   }
-  &.field_styles_focus {
+  &.focus {
     color: var(--info-500);
     border-color: var(--info-500);
   }
-  &.field_styles_error,
-  &.field_styles_focus {
-    .field_styles_field-left-icon,
-    .field_styles_field-right-icon,
-    .field_styles_field-children {
+  &.error,
+  &.focus {
+    .field-left-icon,
+    .field-right-icon,
+    .field-children {
       color: var(--foreground);
       border-color: var(--foreground);
     }
   }
-  .field_styles_field-children > * {
+  .field-children > * {
     width: 100%;
   }
 }
 
 /* src/components/modals/modal/modal.styles.css */
-.modal_styles_modal {
+.modal {
   position: fixed;
   z-index: 1001;
   pointer-events: none;
 }
-.modal_styles_modal-content {
+.modal-content {
   background: var(--background-paper);
   pointer-events: initial;
-  &.modal_styles_animation-fade-down {
-    animation: modal_styles_fadeInDown 200ms ease;
-    &.modal_styles_modal-close {
-      animation: modal_styles_fadeOutUp 200ms ease;
+  &.animation-fade-down {
+    animation: fadeInDown 200ms ease;
+    &.modal-close {
+      animation: fadeOutUp 200ms ease;
       transform: translateY(-10px);
       opacity: 0;
     }
   }
-  &.modal_styles_animation-bounce {
-    animation: modal_styles_bounceIn 500ms ease;
-    &.modal_styles_modal-close {
-      animation: modal_styles_bounceOut 500ms ease;
+  &.animation-bounce {
+    animation: bounceIn 500ms ease;
+    &.modal-close {
+      animation: bounceOut 500ms ease;
       transform: scale3d(0.3, 0.3, 0.3);
       opacity: 0;
     }
   }
 }
-.modal_styles_modal-backdrop {
+.modal-backdrop {
   position: fixed;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   z-index: 1000;
-  animation: modal_styles_backdropOpen 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
-  &.modal_styles_backdrop-close {
-    animation: modal_styles_backdropClose 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  animation: backdropOpen 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  &.backdrop-close {
+    animation: backdropClose 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
     opacity: 0;
     transform: translateY(-10px);
   }
 }
-@keyframes modal_styles_backdropOpen {
+@keyframes backdropOpen {
   from {
     opacity: 0;
     transform: translateY(-10px);
@@ -887,7 +887,7 @@
     transform: translateY(0);
   }
 }
-@keyframes modal_styles_backdropClose {
+@keyframes backdropClose {
   from {
     opacity: 1;
     transform: translateY(0);
@@ -899,35 +899,35 @@
 }
 
 /* src/components/modals/action-modal/action-modal.styles.css */
-.action_modal_styles_action-modal {
+.action-modal {
   background: transparent;
-  .action_modal_styles_modal-content {
-    &.action_modal_styles_shake-animation {
-      animation: action_modal_styles_headShake 600ms linear;
+  .modal-content {
+    &.shake-animation {
+      animation: headShake 600ms linear;
     }
   }
 }
-.action_modal_styles_action-modal-content {
+.action-modal-content {
   position: relative;
-  .action_modal_styles_action-modal-body {
+  .action-modal-body {
     box-shadow: 0 0 10px -5px;
     border-radius: 10px;
     overflow: hidden;
     display: grid;
   }
-  .action_modal_styles_action-modal-content {
+  .action-modal-content {
     background: var(--background);
     padding: 3em 4em 2em;
     display: grid;
     gap: 1em;
   }
-  &.action_modal_styles_no-padding .action_modal_styles_action-modal-content {
+  &.no-padding .action-modal-content {
     padding: 2em 0 0;
   }
-  &:has(.action_modal_styles_action-modal-icon) .action_modal_styles_action-modal-content {
+  &:has(.action-modal-icon) .action-modal-content {
     padding-top: 4em;
   }
-  &.action_modal_styles_back-card {
+  &.back-card {
     &::before {
       content: "";
       position: absolute;
@@ -943,7 +943,7 @@
       transition: top 300ms cubic-bezier(0.81, -0.52, 0.42, 2.5);
     }
   }
-  .action_modal_styles_action-modal-icon {
+  .action-modal-icon {
     position: absolute;
     top: 0;
     left: 50%;
@@ -964,7 +964,7 @@
       0 0 0 0 hsl(from var(--primary-500) h s l / 27%),
       0 0 0 0 hsl(from var(--primary-500) h s l / 14%);
   }
-  .action_modal_styles_close-modal-button {
+  .close-modal-button {
     width: 1em;
     height: 1em;
     border-radius: 50%;
@@ -978,20 +978,20 @@
     transition: opacity 300ms ease;
     z-index: 1;
   }
-  &.action_modal_styles_line-on-top {
-    .action_modal_styles_action-modal-content {
+  &.line-on-top {
+    .action-modal-content {
       border-top: 5px solid var(--primary-500);
     }
   }
   &:hover {
-    .action_modal_styles_action-modal-icon {
+    .action-modal-icon {
       box-shadow:
         0 0 0 7px hsl(from var(--primary-500) h s l / 53%),
         0 0 0 14px hsl(from var(--primary-500) h s l / 40%),
         0 0 0 21px hsl(from var(--primary-500) h s l / 27%),
         0 0 0 28px hsl(from var(--primary-500) h s l / 14%);
     }
-    .action_modal_styles_close-modal-button {
+    .close-modal-button {
       opacity: 1;
     }
     &::before {
@@ -1001,14 +1001,14 @@
 }
 
 /* src/components/modals/aside-modal/aside-modal.styles.css */
-.aside_modal_styles_aside-modal {
+.aside-modal {
   color: var(--foreground);
   overflow: auto;
   height: 100%;
-  .aside_modal_styles_aside-modal-content {
+  .aside-modal-content {
     padding: 2em;
   }
-  .aside_modal_styles_close-modal-button {
+  .close-modal-button {
     border-radius: 50%;
     cursor: pointer;
     display: grid;
@@ -1018,53 +1018,53 @@
     position: absolute;
     padding: 0.5em;
   }
-  &.aside_modal_styles_left {
+  &.left {
     border-right: 4px solid var(--primary-500);
-    animation: aside_modal_styles_slideIn-left 300ms ease;
-    &.aside_modal_styles_modal-close {
-      animation: aside_modal_styles_slideOut-left 300ms ease;
+    animation: slideIn-left 300ms ease;
+    &.modal-close {
+      animation: slideOut-left 300ms ease;
       transform: translateX(-100%);
     }
-    .aside_modal_styles_close-modal-button {
+    .close-modal-button {
       top: 2em;
       left: 100%;
       transform: translate(calc(-50% + 2px));
     }
   }
-  &.aside_modal_styles_right {
+  &.right {
     border-left: 4px solid var(--primary-500);
-    animation: aside_modal_styles_slideIn-right 300ms ease;
-    &.aside_modal_styles_modal-close {
-      animation: aside_modal_styles_slideOut-right 300ms ease;
+    animation: slideIn-right 300ms ease;
+    &.modal-close {
+      animation: slideOut-right 300ms ease;
       transform: translateX(100%);
     }
-    .aside_modal_styles_close-modal-button {
+    .close-modal-button {
       top: 2em;
       right: 100%;
       transform: translate(calc(50% - 2px));
     }
   }
-  &.aside_modal_styles_top {
+  &.top {
     border-bottom: 4px solid var(--primary-500);
-    animation: aside_modal_styles_slideIn-top 300ms ease;
-    &.aside_modal_styles_modal-close {
-      animation: aside_modal_styles_slideOut-top 300ms ease;
+    animation: slideIn-top 300ms ease;
+    &.modal-close {
+      animation: slideOut-top 300ms ease;
       transform: translateY(-100%);
     }
-    .aside_modal_styles_close-modal-button {
+    .close-modal-button {
       bottom: 0;
       right: 2em;
       transform: translate(0, calc(50% - 2px));
     }
   }
-  &.aside_modal_styles_bottom {
+  &.bottom {
     border-top: 4px solid var(--primary-500);
-    animation: aside_modal_styles_slideIn-bottom 300ms ease;
-    &.aside_modal_styles_modal-close {
-      animation: aside_modal_styles_slideOut-bottom 300ms ease;
+    animation: slideIn-bottom 300ms ease;
+    &.modal-close {
+      animation: slideOut-bottom 300ms ease;
       transform: translateY(100%);
     }
-    .aside_modal_styles_close-modal-button {
+    .close-modal-button {
       top: 0;
       right: 2em;
       transform: translate(0, calc(-50% + 2px));
@@ -1073,14 +1073,14 @@
 }
 
 /* src/components/modals/confirmation-modal/confirmation-modal.styles.css */
-.confirmation_modal_styles_confirmation-modal {
+.confirmation-modal {
   display: grid;
   max-width: 450px;
   gap: 1em;
   place-content: center;
   justify-items: center;
   text-align: center;
-  .confirmation_modal_styles_confirmation-modal-actions {
+  .confirmation-modal-actions {
     display: grid;
     grid-auto-flow: column;
     justify-content: center;
@@ -1089,7 +1089,7 @@
 }
 
 /* src/components/modals/menu/menu.styles.css */
-.menu_styles_menu-modal {
+.menu-modal {
   border-radius: 0.5em;
   border: 1px solid var(--border);
   background: var(--background);
@@ -1097,7 +1097,7 @@
   user-select: none;
   position: relative;
   overflow-y: auto;
-  .menu_styles_menu-content {
+  .menu-content {
     display: grid;
     gap: 0.2em;
     padding: 0;
@@ -1108,12 +1108,12 @@
     position: relative;
     overflow-y: auto;
   }
-  .menu_styles_divider {
+  .divider {
     margin: 0.4em 0;
     color: var(--border);
   }
 }
-.menu_styles_menu-label {
+.menu-label {
   background: var(--background);
   color: var(--foreground);
   font-weight: lighter;
@@ -1123,7 +1123,7 @@
   z-index: 10;
   pointer-events: none;
 }
-.menu_styles_menu-option {
+.menu-option {
   padding: 0.2em 1em;
   border-radius: 0.3em;
   transition: all 300ms ease;
@@ -1133,19 +1133,19 @@
   outline: 0;
   margin: 0 0.2em;
   position: relative;
-  .menu_styles_ripple-effect {
+  .ripple-effect {
     background: hsl(from var(--foreground) h s l / 31%);
   }
   &:first-child {
     margin-top: 5px;
   }
-  .menu_styles_option-icon {
+  .option-icon {
     margin-right: 0.5em;
   }
-  .menu_styles_menu-checkbox {
+  .menu-checkbox {
     width: 100%;
   }
-  &.menu_styles_is-disabled {
+  &.is-disabled {
     opacity: 0.4;
     pointer-events: none;
     cursor: default;
@@ -1154,7 +1154,7 @@
   &:hover {
     background: hsl(from var(--background-paper) h s l / 25%);
   }
-  &.menu_styles_is-selected {
+  &.is-selected {
     background: var(--background-paper);
     &:focus,
     &:hover {
@@ -1162,9 +1162,9 @@
     }
   }
 }
-.menu_styles_menu-group {
+.menu-group {
   position: relative;
-  .menu_styles_menu-group-content {
+  .menu-group-content {
     display: grid;
     gap: 0.2em;
     padding: 0;
@@ -1176,16 +1176,16 @@
 }
 
 /* src/components/form/input-color/input-color.styles.css */
-.input_color_styles_input-color {
+.input-color {
   display: grid;
   grid-auto-flow: column;
   align-items: center;
   justify-content: start;
   gap: 0.5em;
-  .input_color_styles_input-color-value {
+  .input-color-value {
     margin-left: 10px;
   }
-  .input_color_styles_color-input {
+  .color-input {
     padding-right: 1em;
     border-radius: inherit;
     width: 100%;
@@ -1193,7 +1193,7 @@
     font-family: var(--typography-family-main) sans-serif;
   }
 }
-.input_color_styles_input-color-box {
+.input-color-box {
   background: white;
   border-radius: 5px;
   border: 2px solid;
@@ -1213,7 +1213,7 @@
     z-index: -1;
   }
 }
-.input_color_styles_input-color-selector {
+.input-color-selector {
   display: grid;
   gap: 10px;
   background: var(--background);
@@ -1222,19 +1222,19 @@
   border-radius: 0 18px 18px 18px;
   border: 1px solid;
   box-shadow: 0 5px 30px -5px var(--neutral-900);
-  .input_color_styles_react-colorful__pointer {
+  .react-colorful__pointer {
     width: 1em;
     height: 1em;
     border-radius: 50%;
   }
-  .input_color_styles_react-colorful__hue-pointer,
-  .input_color_styles_react-colorful__alpha-pointer {
+  .react-colorful__hue-pointer,
+  .react-colorful__alpha-pointer {
     width: 8px;
     height: 100%;
     border-radius: 4px;
     border-width: 2px;
   }
-  .input_color_styles_color-input-container {
+  .color-input-container {
     display: grid;
     grid-template-columns: 16px 1fr 16px;
     align-items: center;
@@ -1245,7 +1245,7 @@
     width: 100%;
     max-width: 200px;
   }
-  .input_color_styles_color-input {
+  .color-input {
     padding: 0;
     border-radius: inherit;
     background: var(--background);
@@ -1259,15 +1259,15 @@
 }
 
 /* src/layouts/grid/grid.styles.css */
-.grid_styles_grida {
+.grida {
   display: grid;
 }
 
 /* src/components/form/input-file/input-file.styles.css */
-.input_file_styles_input-file-container {
+.input-file-container {
   display: grid;
   gap: 10px;
-  .input_file_styles_input-file--box {
+  .input-file--box {
     border: 1px solid;
     border-radius: 5px;
     position: relative;
@@ -1279,7 +1279,7 @@
     background: var(--secondary-500);
     color: var(--secondary-50);
     align-items: center;
-    .input_file_styles_input-file--box--icon {
+    .input-file--box--icon {
       width: 32px;
       height: 32px;
       border-radius: 5px;
@@ -1300,32 +1300,32 @@
     &:hover {
       background: var(--primary-50);
       color: var(--primary-500);
-      .input_file_styles_input-file--box--icon {
+      .input-file--box--icon {
         background: var(--primary-500);
         color: var(--primary-50);
       }
     }
   }
-  .input_file_styles_input-file--files {
+  .input-file--files {
     max-height: 280px;
     overflow-y: auto;
     border: 1px solid;
     border-radius: 5px;
-    .input_file_styles_input-file--files--content {
+    .input-file--files--content {
       display: grid;
     }
   }
-  .input_file_styles_error {
+  .error {
     color: tomato;
   }
-  .input_file_styles_total-info {
+  .total-info {
     font-size: 1em;
     display: grid;
     grid-auto-flow: column;
     justify-content: end;
     align-items: center;
     gap: 0.5em;
-    .input_file_styles_total-info--delete {
+    .total-info--delete {
       display: grid;
       place-content: center;
       height: 100%;
@@ -1343,7 +1343,7 @@
     }
   }
 }
-.input_file_styles_input-file-card {
+.input-file-card {
   display: grid;
   grid-template-columns: 35px 1fr 35px;
   gap: 1em;
@@ -1354,11 +1354,11 @@
     border-bottom: 1px dashed;
   }
   &:hover {
-    .input_file_styles_file-card--delete {
+    .file-card--delete {
       color: var(--primary-500);
     }
   }
-  .input_file_styles_file-card--image {
+  .file-card--image {
     background: var(--primary-500);
     color: var(--primary-50);
     width: 32px;
@@ -1368,12 +1368,12 @@
     place-content: center;
     border: 1px solid;
   }
-  .input_file_styles_file-card--data {
+  .file-card--data {
     display: grid;
     font-size: 0.7em;
     justify-content: start;
   }
-  .input_file_styles_file-card--delete {
+  .file-card--delete {
     border-radius: 5px;
     display: grid;
     place-content: center;
@@ -1389,7 +1389,7 @@
 }
 
 /* src/components/form/radio/radio.styles.css */
-.radio_styles_radio {
+.radio {
   border-radius: 50%;
   background: var(--background-paper);
   transition: all 300ms ease;
@@ -1399,7 +1399,7 @@
   display: flex;
   position: relative;
   padding: 2px;
-  .radio_styles_radio-input {
+  .radio-input {
     position: absolute;
     top: 0;
     left: 0;
@@ -1409,98 +1409,98 @@
     opacity: 0;
     z-index: 1;
   }
-  &.radio_styles_size-small {
+  &.size-small {
     font-size: 1em;
   }
-  &.radio_styles_size-regular {
+  &.size-regular {
     font-size: 1.2em;
   }
-  &.radio_styles_size-large {
+  &.size-large {
     font-size: 1.4em;
   }
 }
-.radio_styles_radio-fill {
+.radio-fill {
   transition: all 200ms ease-out;
   border-radius: inherit;
   margin: auto;
   width: 0;
   height: 0;
 }
-.radio_styles_radio-container {
+.radio-container {
   --color: var(--neutral-800);
   display: flex;
   align-items: center;
   gap: 1em;
   width: fit-content;
-  .radio_styles_radio-label {
+  .radio-label {
     cursor: pointer;
     user-select: none;
   }
-  .radio_styles_radio {
+  .radio {
     color: var(--color);
-    &.radio_styles_is-checked {
-      .radio_styles_radio-fill {
+    &.is-checked {
+      .radio-fill {
         width: 100%;
         height: 100%;
         background: var(--color);
       }
     }
   }
-  .radio_styles_radio:hover,
-  &:has(.radio_styles_radio-label:hover) .radio_styles_radio {
+  .radio:hover,
+  &:has(.radio-label:hover) .radio {
     box-shadow: 0 0 0 0.4em hsl(from var(--color) h s l / 50%);
-    .radio_styles_radio-fill {
+    .radio-fill {
       width: 20%;
       height: 20%;
       background: hsl(from var(--color) h s l / 50%);
     }
-    &:is(.radio_styles_is-checked) {
-      .radio_styles_radio-fill {
+    &:is(.is-checked) {
+      .radio-fill {
         width: 80%;
         height: 80%;
         background: var(--color);
       }
     }
   }
-  &.radio_styles_color-primary {
+  &.color-primary {
     --color: var(--primary-500);
   }
-  &.radio_styles_color-secondary {
+  &.color-secondary {
     --color: var(--secondary-500);
   }
-  &.radio_styles_color-tertiary {
+  &.color-tertiary {
     --color: var(--tertiary-500);
   }
-  &.radio_styles_color-active {
+  &.color-active {
     --color: var(--active-500);
   }
-  &.radio_styles_color-warning {
+  &.color-warning {
     --color: var(--warning-500);
   }
-  &.radio_styles_color-alert {
+  &.color-alert {
     --color: var(--alert-500);
   }
-  &.radio_styles_color-info {
+  &.color-info {
     --color: var(--info-500);
   }
 }
 
 /* src/components/infinity-scroll/infinity-scroll.styles.css */
-.infinity_scroll_styles_infinity-scroll {
+.infinity-scroll {
   display: grid;
   place-content: start center;
   place-items: start center;
-  .infinity_scroll_styles_loading {
+  .loading {
     width: 100%;
     height: 30px;
     display: grid;
     place-content: center;
-    .infinity_scroll_styles_loading--icon {
-      animation: infinity_scroll_styles_spin 0.5s linear infinite;
+    .loading--icon {
+      animation: spin 0.5s linear infinite;
       font-size: 20px;
     }
   }
-  .infinity_scroll_styles_empty-message {
+  .empty-message {
     font-size: 0.8em;
     text-align: center;
     color: #a6a6a6;
@@ -1508,9 +1508,9 @@
 }
 
 /* src/components/form/select/select.styles.css */
-.select_styles_select {
+.select {
   cursor: pointer;
-  .select_styles_icon-close {
+  .icon-close {
     display: grid;
     place-content: center;
     align-self: center;
@@ -1522,7 +1522,7 @@
       background: hsl(from var(--foreground) h s l / 33%);
     }
   }
-  .select_styles_select-container {
+  .select-container {
     display: grid;
     grid-template-columns: 1fr auto;
     gap: 0.5em;
@@ -1531,11 +1531,11 @@
     position: relative;
     cursor: pointer;
     user-select: none;
-    &.select_styles_three-columns {
+    &.three-columns {
       grid-template-columns: 1fr auto auto;
     }
   }
-  .select_styles_input-button {
+  .input-button {
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
@@ -1554,39 +1554,39 @@
     -webkit-tap-highlight-color: transparent;
     padding: 0;
     grid-template-columns: 1fr auto;
-    &.select_styles_placeholder {
+    &.placeholder {
       color: #919191;
     }
   }
-  .select_styles_select-caret-icon {
+  .select-caret-icon {
     transition: transform 200ms ease;
-    &.select_styles_is-select-open {
+    &.is-select-open {
       transform: rotate(180deg);
     }
   }
 }
-.select_styles_select-options-menu {
-  .select_styles_select-menu-content {
+.select-options-menu {
+  .select-menu-content {
     gap: 0;
     display: block;
     height: auto;
     overflow: initial;
   }
 }
-.select_styles_select-options {
+.select-options {
   gap: 0;
   display: grid;
   grid-template-rows: 1fr;
   height: 100%;
   overflow: auto;
-  &.select_styles_with-search-query {
+  &.with-search-query {
     grid-template-rows: auto 1fr;
   }
-  .select_styles_select-options-list-container {
+  .select-options-list-container {
     height: 100%;
     overflow: auto;
   }
-  .select_styles_select-options-list {
+  .select-options-list {
     display: grid;
     gap: 0.2em;
     padding: 0;
@@ -1595,11 +1595,11 @@
     align-content: start;
   }
 }
-.select_styles_select-options-header {
+.select-options-header {
   background: var(--background);
   padding: 2px 5px;
   border-bottom: 1px solid var(--border);
-  .select_styles_input-search {
+  .input-search {
     outline: none;
     padding: 0.8em 5px;
     font-size: var(--typography-size-label);
@@ -1608,12 +1608,12 @@
 }
 
 /* src/components/form/slider/slider.styles.css */
-.slider_styles_input-slider {
+.input-slider {
   display: grid;
   grid-template-columns: 1fr 50px;
   align-items: center;
   gap: 10px;
-  .slider_styles_slider {
+  .slider {
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
@@ -1659,12 +1659,12 @@
       }
     }
   }
-  &:has(.slider_styles_slider-number:focus) .slider_styles_slider::-webkit-slider-thumb,
-  &:has(.slider_styles_slider-number:hover) .slider_styles_slider::-webkit-slider-thumb {
+  &:has(.slider-number:focus) .slider::-webkit-slider-thumb,
+  &:has(.slider-number:hover) .slider::-webkit-slider-thumb {
     background: var(--primary-500);
     box-shadow: 0 0 0 6px hsl(from var(--primary-500) h s l / 31%);
   }
-  .slider_styles_slider-number {
+  .slider-number {
     transition: all 300ms ease;
     border: 1px solid;
     border-radius: 5px;
@@ -1683,22 +1683,22 @@
       margin: 0;
     }
   }
-  &.slider_styles_is-focus {
-    .slider_styles_slider-number {
+  &.is-focus {
+    .slider-number {
       color: var(--primary-500);
     }
   }
 }
 
 /* src/components/form/textarea/textarea.styles.css */
-.textarea_styles_textarea {
+.textarea {
   border: 0;
   outline: 0;
   field-sizing: content;
 }
 
 /* src/components/tooltips/tooltip/tooltip.styles.css */
-.tooltip_styles_tooltip {
+.tooltip {
   color: var(--foreground);
   font-size: var(--typography-size-small);
   line-height: 1em;
@@ -1721,10 +1721,10 @@
     border-bottom: 1px solid var(--foreground);
     border-radius: 0 0 3px 0;
   }
-  &.tooltip_styles_left {
-    animation: tooltip_styles_fadeInRight 250ms ease-out;
-    &.tooltip_styles_close-animation {
-      animation: tooltip_styles_fadeOutLeft 250ms ease-out;
+  &.left {
+    animation: fadeInRight 250ms ease-out;
+    &.close-animation {
+      animation: fadeOutLeft 250ms ease-out;
       transform: translateX(-10px);
       opacity: 0;
     }
@@ -1734,10 +1734,10 @@
       transform: translate(-50%, -50%) rotate(-45deg);
     }
   }
-  &.tooltip_styles_right {
-    animation: tooltip_styles_fadeInLeft 250ms ease-out;
-    &.tooltip_styles_close-animation {
-      animation: tooltip_styles_fadeOutRight 250ms ease-out;
+  &.right {
+    animation: fadeInLeft 250ms ease-out;
+    &.close-animation {
+      animation: fadeOutRight 250ms ease-out;
       transform: translateX(10px);
       opacity: 0;
     }
@@ -1747,10 +1747,10 @@
       transform: translate(50%, -50%) rotate(135deg);
     }
   }
-  &.tooltip_styles_top {
-    animation: tooltip_styles_fadeInDown 250ms ease-out;
-    &.tooltip_styles_close-animation {
-      animation: tooltip_styles_fadeOutUp 250ms ease-out;
+  &.top {
+    animation: fadeInDown 250ms ease-out;
+    &.close-animation {
+      animation: fadeOutUp 250ms ease-out;
       transform: translateY(-10px);
       opacity: 0;
     }
@@ -1760,10 +1760,10 @@
       transform: translate(-50%, -50%) rotate(45deg);
     }
   }
-  &.tooltip_styles_bottom {
-    animation: tooltip_styles_fadeInUp 250ms ease-out;
-    &.tooltip_styles_close-animation {
-      animation: tooltip_styles_fadeOutDown 250ms ease-out;
+  &.bottom {
+    animation: fadeInUp 250ms ease-out;
+    &.close-animation {
+      animation: fadeOutDown 250ms ease-out;
       transform: translateY(10px);
       opacity: 0;
     }
@@ -1776,7 +1776,7 @@
 }
 
 /* src/components/form/switch/switch.styles.css */
-.switch_styles_switch-container {
+.switch-container {
   --width: attr(data-width);
   --dot-size: attr(data-dot-size);
   --dot-hover-size: attr(data-dot-hover-size);
@@ -1788,14 +1788,14 @@
   align-items: center;
   gap: 0.5em;
   width: fit-content;
-  .switch_styles_switch {
+  .switch {
     width: calc(var(--width) + var(--padding) * 2);
     border-radius: 100em;
     background: var(--background-paper);
     padding: var(--padding);
     transition: all 300ms ease;
     position: relative;
-    .switch_styles_switch-dot {
+    .switch-dot {
       width: var(--dot-size);
       height: var(--dot-size);
       border-radius: 100em;
@@ -1806,12 +1806,12 @@
       position: relative;
       z-index: 1;
     }
-    .switch_styles_switch-icon {
+    .switch-icon {
       cursor: pointer;
       display: block;
     }
-    .switch_styles_switch-internal-left-icon,
-    .switch_styles_switch-internal-right-icon {
+    .switch-internal-left-icon,
+    .switch-internal-right-icon {
       width: var(--dot-size);
       height: var(--dot-size);
       position: absolute;
@@ -1821,33 +1821,33 @@
       color: var(--color-contrast);
       transition: all 300ms ease;
     }
-    .switch_styles_switch-internal-left-icon {
+    .switch-internal-left-icon {
       left: var(--padding);
     }
-    .switch_styles_switch-internal-right-icon {
+    .switch-internal-right-icon {
       right: var(--padding);
     }
-    &.switch_styles_is-checked {
+    &.is-checked {
       background: var(--color);
-      .switch_styles_switch-dot {
+      .switch-dot {
         margin-left: calc(var(--width) - var(--dot-size));
         background: color-mix(in hsl, var(--color), var(--color-contrast) 75%);
       }
     }
-    &:not(.switch_styles_is-readonly):has(input:disabled) {
+    &:not(.is-readonly):has(input:disabled) {
       background: var(--background-disabled);
-      .switch_styles_switch-dot {
+      .switch-dot {
         background: var(--foreground-disabled);
       }
-      .switch_styles_switch-internal-left-icon,
-      .switch_styles_switch-internal-right-icon {
+      .switch-internal-left-icon,
+      .switch-internal-right-icon {
         color: var(--foreground-disabled);
       }
-      &.switch_styles_is-checked {
+      &.is-checked {
         background: var(--color-dark);
       }
     }
-    .switch_styles_switch-checkbox {
+    .switch-checkbox {
       position: absolute;
       top: 0;
       left: 0;
@@ -1858,57 +1858,57 @@
       z-index: 3;
     }
   }
-  .switch_styles_switch-label {
+  .switch-label {
     cursor: pointer;
     user-select: none;
     padding: 0 0.5em;
   }
-  .switch_styles_switch:not(:has(.switch_styles_is-readonly, input:disabled)):hover .switch_styles_switch-dot,
-  &:has(.switch_styles_switch-icon:hover) .switch_styles_switch:not(:has(.switch_styles_is-readonly, input:disabled)) .switch_styles_switch-dot,
-  &:has(.switch_styles_switch-label:hover) .switch_styles_switch:not(:has(.switch_styles_is-readonly, input:disabled)) .switch_styles_switch-dot {
+  .switch:not(:has(.is-readonly, input:disabled)):hover .switch-dot,
+  &:has(.switch-icon:hover) .switch:not(:has(.is-readonly, input:disabled)) .switch-dot,
+  &:has(.switch-label:hover) .switch:not(:has(.is-readonly, input:disabled)) .switch-dot {
     box-shadow: 0 0 0 calc(0.3 * var(--dot-size)) color-mix(in hsl, var(--color) 50%, var(--color-contrast));
   }
-  .switch_styles_switch:not(:has(.switch_styles_is-readonly, input:disabled)):active .switch_styles_switch-dot,
-  &:has(.switch_styles_switch-icon:active) .switch_styles_switch:not(:has(.switch_styles_is-readonly, input:disabled)) .switch_styles_switch-dot,
-  &:has(.switch_styles_switch-label:active) .switch_styles_switch:not(:has(.switch_styles_is-readonly, input:disabled)) .switch_styles_switch-dot {
+  .switch:not(:has(.is-readonly, input:disabled)):active .switch-dot,
+  &:has(.switch-icon:active) .switch:not(:has(.is-readonly, input:disabled)) .switch-dot,
+  &:has(.switch-label:active) .switch:not(:has(.is-readonly, input:disabled)) .switch-dot {
     width: var(--dot-hover-size);
   }
-  .switch_styles_switch:not(:has(.switch_styles_is-readonly, input:disabled)).switch_styles_is-checked:active .switch_styles_switch-dot,
-  &:has(.switch_styles_switch-icon:active) .switch_styles_switch:not(:has(.switch_styles_is-readonly, input:disabled)).switch_styles_is-checked .switch_styles_switch-dot,
-  &:has(.switch_styles_switch-label:active) .switch_styles_switch:not(:has(.switch_styles_is-readonly, input:disabled)).switch_styles_is-checked .switch_styles_switch-dot {
+  .switch:not(:has(.is-readonly, input:disabled)).is-checked:active .switch-dot,
+  &:has(.switch-icon:active) .switch:not(:has(.is-readonly, input:disabled)).is-checked .switch-dot,
+  &:has(.switch-label:active) .switch:not(:has(.is-readonly, input:disabled)).is-checked .switch-dot {
     margin-left: calc(var(--width) - var(--dot-hover-size));
   }
-  &.switch_styles_color-primary {
+  &.color-primary {
     --color: var(--primary-500);
     --color-dark: var(--primary-700);
     --color-contrast: var(--primary-50);
   }
-  &.switch_styles_color-secondary {
+  &.color-secondary {
     --color: var(--secondary-500);
     --color-dark: var(--secondary-700);
     --color-contrast: var(--secondary-50);
   }
-  &.switch_styles_color-tertiary {
+  &.color-tertiary {
     --color: var(--tertiary-500);
     --color-dark: var(--tertiary-700);
     --color-contrast: var(--tertiary-50);
   }
-  &.switch_styles_color-active {
+  &.color-active {
     --color: var(--active-500);
     --color-dark: var(--active-700);
     --color-contrast: var(--active-50);
   }
-  &.switch_styles_color-warning {
+  &.color-warning {
     --color: var(--warning-500);
     --color-dark: var(--warning-700);
     --color-contrast: var(--warning-50);
   }
-  &.switch_styles_color-alert {
+  &.color-alert {
     --color: var(--alert-500);
     --color-dark: var(--alert-700);
     --color-contrast: var(--alert-50);
   }
-  &.switch_styles_color-info {
+  &.color-info {
     --color: var(--info-500);
     --color-dark: var(--info-700);
     --color-contrast: var(--info-50);
@@ -1916,7 +1916,7 @@
 }
 
 /* src/components/smart-table/smart-table.styles.css */
-.smart_table_styles_smart-table-container {
+.smart-table-container {
   border: 0 solid var(--primary-500);
   border-radius: 5px;
   overflow: auto;
@@ -1924,14 +1924,14 @@
   width: 100%;
   margin: auto;
 }
-.smart_table_styles_smart-table {
+.smart-table {
   border-collapse: collapse;
   position: relative;
   width: 100%;
-  &.smart_table_styles_layout-fixed {
+  &.layout-fixed {
     table-layout: fixed;
   }
-  &.smart_table_styles_layout-scrollable {
+  &.layout-scrollable {
     table-layout: auto;
   }
   thead {
@@ -1949,11 +1949,11 @@
     tr {
       box-shadow: inset 0 0 0 0 var(--primary-500);
       transition: box-shadow 300ms ease;
-      &.smart_table_styles_row-selected,
+      &.row-selected,
       &:hover {
         background: var(--background-paper);
       }
-      &.smart_table_styles_row-selected {
+      &.row-selected {
         box-shadow: inset 10px 0 0 -5px var(--primary-500);
       }
       &:not(:last-child) {
@@ -1964,15 +1964,15 @@
   th {
     padding: 0.8em 1.2em;
     user-select: none;
-    &.smart_table_styles_sort-on-click {
+    &.sort-on-click {
       cursor: pointer;
     }
-    .smart_table_styles_sort-icon {
+    .sort-icon {
       width: 1em;
       display: block;
     }
     svg {
-      animation: smart_table_styles_fadeIn 300ms ease;
+      animation: fadeIn 300ms ease;
     }
     path {
       transition: all 300ms ease;
@@ -1997,12 +1997,12 @@
 }
 
 /* src/components/tabs/tabs.styles.css */
-.tabs_styles_tab {
+.tab {
   cursor: pointer;
   user-select: none;
   transition: all 300ms ease;
 }
-.tabs_styles_tab-list {
+.tab-list {
   --color: var(--neutral-900);
   --color-contrast: var(--neutral-50);
   --inner-radius: 0;
@@ -2014,123 +2014,123 @@
   position: relative;
   font-size: var(--typography-size-label);
   border-radius: var(--outer-radius);
-  .tabs_styles_tab,
-  .tabs_styles_tabs-selector {
+  .tab,
+  .tabs-selector {
     border-radius: var(--inner-radius);
   }
-  &.tabs_styles_size-small {
+  &.size-small {
     font-size: var(--typography-size-small);
   }
-  &.tabs_styles_size-medium {
+  &.size-medium {
     font-size: var(--typography-size-label);
   }
-  &.tabs_styles_size-large {
+  &.size-large {
     font-size: var(--typography-size-body);
   }
-  .tabs_styles_tabs-selector {
+  .tabs-selector {
     position: absolute;
     background: var(--color);
     color: var(--color-contrast);
     border-radius: 1.5em;
-    &.tabs_styles_active {
+    &.active {
       transition: all 300ms ease;
     }
   }
-  .tabs_styles_tab {
+  .tab {
     border-radius: 1.5em;
     padding: 0.5em 1em;
     z-index: 1;
     text-align: center;
-    &.tabs_styles_is-open {
+    &.is-open {
       color: var(--color-contrast);
     }
-    &:not(.tabs_styles_is-open):hover {
+    &:not(.is-open):hover {
       color: var(--neutral-900);
     }
   }
-  &.tabs_styles_radius-none {
+  &.radius-none {
     --outer-radius: 0;
     --inner-radius: 0;
   }
-  &.tabs_styles_radius-small {
+  &.radius-small {
     --outer-radius: 0.5em;
     --inner-radius: 0.5em;
   }
-  &.tabs_styles_radius-medium {
+  &.radius-medium {
     --outer-radius: 1em;
     --inner-radius: 0.8em;
   }
-  &.tabs_styles_radius-large {
+  &.radius-large {
     --outer-radius: 1.5em;
     --inner-radius: 1.3em;
   }
-  &.tabs_styles_radius-full {
+  &.radius-full {
     --outer-radius: 1.8em;
     --inner-radius: 1.6em;
   }
-  &.tabs_styles_vertical-direction {
+  &.vertical-direction {
     grid-auto-flow: row;
     align-items: unset;
     align-content: start;
   }
-  &.tabs_styles_variant-solid {
+  &.variant-solid {
     background: var(--background-paper);
     color: var(--foreground);
     padding: 0.5em;
   }
-  &.tabs_styles_variant-ghost {
+  &.variant-ghost {
     border: 1px solid var(--color);
     padding: 0.5em;
   }
-  &.tabs_styles_variant-flat {
+  &.variant-flat {
   }
-  &.tabs_styles_variant-line {
+  &.variant-line {
     border-radius: 0;
-    &:not(.tabs_styles_vertical-direction) {
+    &:not(.vertical-direction) {
       border-bottom: 2px solid var(--border);
     }
-    .tabs_styles_tabs-selector {
+    .tabs-selector {
       border-radius: 0;
     }
-    .tabs_styles_tab {
+    .tab {
       border-radius: 0;
-      &.tabs_styles_is-open {
+      &.is-open {
         color: var(--color);
       }
     }
   }
-  &.tabs_styles_color-primary {
+  &.color-primary {
     --color: var(--primary-500);
     --color-contrast: var(--primary-50);
   }
-  &.tabs_styles_color-secondary {
+  &.color-secondary {
     --color: var(--secondary-500);
     --color-contrast: var(--secondary-50);
   }
-  &.tabs_styles_color-tertiary {
+  &.color-tertiary {
     --color: var(--tertiary-500);
     --color-contrast: var(--tertiary-50);
   }
-  &.tabs_styles_color-active {
+  &.color-active {
     --color: var(--active-500);
     --color-contrast: var(--active-50);
   }
-  &.tabs_styles_color-warning {
+  &.color-warning {
     --color: var(--warning-500);
     --color-contrast: var(--warning-50);
   }
-  &.tabs_styles_color-alert {
+  &.color-alert {
     --color: var(--alert-500);
     --color-contrast: var(--alert-50);
   }
-  &.tabs_styles_color-info {
+  &.color-info {
     --color: var(--info-500);
     --color-contrast: var(--info-50);
   }
 }
 
 /* src/components/tag/tag.styles.css */
-.tag_styles_tag {
+.tag {
   --background: attr(data-background, var(--primary-500));
   --text: attr(data-text, var(--primary-50));
   --background-selected: attr(data-background-selected, var(--primary-700));
@@ -2144,28 +2144,28 @@
   display: inline-block;
   font-size: var(--typography-size-label);
   user-select: none;
-  &.tag_styles_no-wrap {
+  &.no-wrap {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
-  &.tag_styles_rounded-none {
+  &.rounded-none {
     border-radius: 0;
   }
-  &.tag_styles_rounded-small {
+  &.rounded-small {
     border-radius: 0.25em;
   }
-  &.tag_styles_rounded-medium {
+  &.rounded-medium {
     border-radius: 0.5em;
   }
-  &.tag_styles_rounded-large {
+  &.rounded-large {
     border-radius: 1em;
   }
-  &.tag_styles_rounded-full {
+  &.rounded-full {
     border-radius: 100rem;
   }
   &:hover,
-  &.tag_styles_is-selected {
+  &.is-selected {
     background: var(--background-selected);
     color: var(--text-selected);
   }