boreal-ui 0.0.46 → 0.0.48

package/dist/core/boreal-ui.css

@@ -1914,6 +1914,29 @@
  * $breakpoints map:
  *  Use this map to loop over breakpoints or access named values.
  */
+/**
+ * -----------------------------------------------------
+ * _mixins.scss
+ * -----------------------------------------------------
+ * This file defines global SCSS mixins used for layout
+ * and styling utilities across the project.
+ *
+ * === Mixin: respond ===
+ * A responsive media query mixin for cleaner breakpoint handling.
+ *
+ * Usage:
+ *   @include respond("md") {
+ *     // Styles applied at min-width: 768px and up
+ *   }
+ *
+ * @param {string} $breakpoint - One of the keys defined in the $breakpoints map
+ *                               (e.g., "xs", "sm", "md", "lg", "xl", "2xl").
+ * @content - The styles to apply inside the media query block.
+ *
+ * Requires:
+ *   - A `$breakpoints` map from the `breakpoints` module (alias: `bp`)
+ *   - `sass:map` module to access map values safely
+ */
 *, *::before, *::after {
   box-sizing: border-box;
 }
@@ -2197,17 +2220,6 @@ a:hover {
   white-space: nowrap;
   border: 0;
 }
-
-:global(.sr_only) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
 /**
  * ---------------------------------------------------------------------
  * theme.scss
@@ -2451,6 +2463,29 @@ a:hover {
     left: 100%;
   }
 }
+/**
+ * -----------------------------------------------------
+ * _mixins.scss
+ * -----------------------------------------------------
+ * This file defines global SCSS mixins used for layout
+ * and styling utilities across the project.
+ *
+ * === Mixin: respond ===
+ * A responsive media query mixin for cleaner breakpoint handling.
+ *
+ * Usage:
+ *   @include respond("md") {
+ *     // Styles applied at min-width: 768px and up
+ *   }
+ *
+ * @param {string} $breakpoint - One of the keys defined in the $breakpoints map
+ *                               (e.g., "xs", "sm", "md", "lg", "xl", "2xl").
+ * @content - The styles to apply inside the media query block.
+ *
+ * Requires:
+ *   - A `$breakpoints` map from the `breakpoints` module (alias: `bp`)
+ *   - `sass:map` module to access map values safely
+ */
 *, *::before, *::after {
   box-sizing: border-box;
 }
@@ -2735,17 +2770,6 @@ a:hover {
   border: 0;
 }
 
-:global(.sr_only) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 @media (prefers-reduced-motion: reduce) {
   .button {
     transition: none;
@@ -4651,6 +4675,29 @@ a:hover {
     left: 100%;
   }
 }
+/**
+ * -----------------------------------------------------
+ * _mixins.scss
+ * -----------------------------------------------------
+ * This file defines global SCSS mixins used for layout
+ * and styling utilities across the project.
+ *
+ * === Mixin: respond ===
+ * A responsive media query mixin for cleaner breakpoint handling.
+ *
+ * Usage:
+ *   @include respond("md") {
+ *     // Styles applied at min-width: 768px and up
+ *   }
+ *
+ * @param {string} $breakpoint - One of the keys defined in the $breakpoints map
+ *                               (e.g., "xs", "sm", "md", "lg", "xl", "2xl").
+ * @content - The styles to apply inside the media query block.
+ *
+ * Requires:
+ *   - A `$breakpoints` map from the `breakpoints` module (alias: `bp`)
+ *   - `sass:map` module to access map values safely
+ */
 *, *::before, *::after {
   box-sizing: border-box;
 }
@@ -4935,17 +4982,6 @@ a:hover {
   border: 0;
 }
 
-:global(.sr_only) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 .skeleton_loader {
   --skeleton-sheen: rgba(184, 184, 184, 0.8666666667);
   --skeleton-duration: 1.5s;
@@ -5274,6 +5310,29 @@ a:hover {
     left: 100%;
   }
 }
+/**
+ * -----------------------------------------------------
+ * _mixins.scss
+ * -----------------------------------------------------
+ * This file defines global SCSS mixins used for layout
+ * and styling utilities across the project.
+ *
+ * === Mixin: respond ===
+ * A responsive media query mixin for cleaner breakpoint handling.
+ *
+ * Usage:
+ *   @include respond("md") {
+ *     // Styles applied at min-width: 768px and up
+ *   }
+ *
+ * @param {string} $breakpoint - One of the keys defined in the $breakpoints map
+ *                               (e.g., "xs", "sm", "md", "lg", "xl", "2xl").
+ * @content - The styles to apply inside the media query block.
+ *
+ * Requires:
+ *   - A `$breakpoints` map from the `breakpoints` module (alias: `bp`)
+ *   - `sass:map` module to access map values safely
+ */
 *, *::before, *::after {
   box-sizing: border-box;
 }
@@ -5558,17 +5617,6 @@ a:hover {
   border: 0;
 }
 
-:global(.sr_only) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 .card {
   overflow: hidden;
   margin: 8px;
@@ -6485,6 +6533,29 @@ a:hover {
     left: 100%;
   }
 }
+/**
+ * -----------------------------------------------------
+ * _mixins.scss
+ * -----------------------------------------------------
+ * This file defines global SCSS mixins used for layout
+ * and styling utilities across the project.
+ *
+ * === Mixin: respond ===
+ * A responsive media query mixin for cleaner breakpoint handling.
+ *
+ * Usage:
+ *   @include respond("md") {
+ *     // Styles applied at min-width: 768px and up
+ *   }
+ *
+ * @param {string} $breakpoint - One of the keys defined in the $breakpoints map
+ *                               (e.g., "xs", "sm", "md", "lg", "xl", "2xl").
+ * @content - The styles to apply inside the media query block.
+ *
+ * Requires:
+ *   - A `$breakpoints` map from the `breakpoints` module (alias: `bp`)
+ *   - `sass:map` module to access map values safely
+ */
 *, *::before, *::after {
   box-sizing: border-box;
 }
@@ -6769,17 +6840,6 @@ a:hover {
   border: 0;
 }
 
-:global(.sr_only) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 .checkbox {
   display: inline-flex;
   align-items: center;
@@ -7560,6 +7620,29 @@ a:hover {
     left: 100%;
   }
 }
+/**
+ * -----------------------------------------------------
+ * _mixins.scss
+ * -----------------------------------------------------
+ * This file defines global SCSS mixins used for layout
+ * and styling utilities across the project.
+ *
+ * === Mixin: respond ===
+ * A responsive media query mixin for cleaner breakpoint handling.
+ *
+ * Usage:
+ *   @include respond("md") {
+ *     // Styles applied at min-width: 768px and up
+ *   }
+ *
+ * @param {string} $breakpoint - One of the keys defined in the $breakpoints map
+ *                               (e.g., "xs", "sm", "md", "lg", "xl", "2xl").
+ * @content - The styles to apply inside the media query block.
+ *
+ * Requires:
+ *   - A `$breakpoints` map from the `breakpoints` module (alias: `bp`)
+ *   - `sass:map` module to access map values safely
+ */
 *, *::before, *::after {
   box-sizing: border-box;
 }
@@ -7844,17 +7927,6 @@ a:hover {
   border: 0;
 }
 
-:global(.sr_only) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 .chip {
   position: relative;
   z-index: 9999;
@@ -8486,6 +8558,29 @@ a:hover {
     left: 100%;
   }
 }
+/**
+ * -----------------------------------------------------
+ * _mixins.scss
+ * -----------------------------------------------------
+ * This file defines global SCSS mixins used for layout
+ * and styling utilities across the project.
+ *
+ * === Mixin: respond ===
+ * A responsive media query mixin for cleaner breakpoint handling.
+ *
+ * Usage:
+ *   @include respond("md") {
+ *     // Styles applied at min-width: 768px and up
+ *   }
+ *
+ * @param {string} $breakpoint - One of the keys defined in the $breakpoints map
+ *                               (e.g., "xs", "sm", "md", "lg", "xl", "2xl").
+ * @content - The styles to apply inside the media query block.
+ *
+ * Requires:
+ *   - A `$breakpoints` map from the `breakpoints` module (alias: `bp`)
+ *   - `sass:map` module to access map values safely
+ */
 *, *::before, *::after {
   box-sizing: border-box;
 }
@@ -8770,17 +8865,6 @@ a:hover {
   border: 0;
 }
 
-:global(.sr_only) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 .circular_progress {
   display: flex;
   justify-content: center;
@@ -9317,6 +9401,29 @@ a:hover {
     left: 100%;
   }
 }
+/**
+ * -----------------------------------------------------
+ * _mixins.scss
+ * -----------------------------------------------------
+ * This file defines global SCSS mixins used for layout
+ * and styling utilities across the project.
+ *
+ * === Mixin: respond ===
+ * A responsive media query mixin for cleaner breakpoint handling.
+ *
+ * Usage:
+ *   @include respond("md") {
+ *     // Styles applied at min-width: 768px and up
+ *   }
+ *
+ * @param {string} $breakpoint - One of the keys defined in the $breakpoints map
+ *                               (e.g., "xs", "sm", "md", "lg", "xl", "2xl").
+ * @content - The styles to apply inside the media query block.
+ *
+ * Requires:
+ *   - A `$breakpoints` map from the `breakpoints` module (alias: `bp`)
+ *   - `sass:map` module to access map values safely
+ */
 *, *::before, *::after {
   box-sizing: border-box;
 }
@@ -9601,17 +9708,6 @@ a:hover {
   border: 0;
 }
 
-:global(.sr_only) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 .color_picker {
   border: none;
   padding: 8px;
@@ -10101,6 +10197,29 @@ a:hover {
     left: 100%;
   }
 }
+/**
+ * -----------------------------------------------------
+ * _mixins.scss
+ * -----------------------------------------------------
+ * This file defines global SCSS mixins used for layout
+ * and styling utilities across the project.
+ *
+ * === Mixin: respond ===
+ * A responsive media query mixin for cleaner breakpoint handling.
+ *
+ * Usage:
+ *   @include respond("md") {
+ *     // Styles applied at min-width: 768px and up
+ *   }
+ *
+ * @param {string} $breakpoint - One of the keys defined in the $breakpoints map
+ *                               (e.g., "xs", "sm", "md", "lg", "xl", "2xl").
+ * @content - The styles to apply inside the media query block.
+ *
+ * Requires:
+ *   - A `$breakpoints` map from the `breakpoints` module (alias: `bp`)
+ *   - `sass:map` module to access map values safely
+ */
 *, *::before, *::after {
   box-sizing: border-box;
 }
@@ -10385,17 +10504,6 @@ a:hover {
   border: 0;
 }
 
-:global(.sr_only) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 .textInput_container {
   display: inline-flex;
   justify-content: space-between;
@@ -10946,6 +11054,29 @@ a:hover {
     left: 100%;
   }
 }
+/**
+ * -----------------------------------------------------
+ * _mixins.scss
+ * -----------------------------------------------------
+ * This file defines global SCSS mixins used for layout
+ * and styling utilities across the project.
+ *
+ * === Mixin: respond ===
+ * A responsive media query mixin for cleaner breakpoint handling.
+ *
+ * Usage:
+ *   @include respond("md") {
+ *     // Styles applied at min-width: 768px and up
+ *   }
+ *
+ * @param {string} $breakpoint - One of the keys defined in the $breakpoints map
+ *                               (e.g., "xs", "sm", "md", "lg", "xl", "2xl").
+ * @content - The styles to apply inside the media query block.
+ *
+ * Requires:
+ *   - A `$breakpoints` map from the `breakpoints` module (alias: `bp`)
+ *   - `sass:map` module to access map values safely
+ */
 *, *::before, *::after {
   box-sizing: border-box;
 }
@@ -11230,17 +11361,6 @@ a:hover {
   border: 0;
 }
 
-:global(.sr_only) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 .command_palette_overlay {
   position: fixed;
   inset: 0;
@@ -11891,6 +12011,29 @@ a:hover {
     left: 100%;
   }
 }
+/**
+ * -----------------------------------------------------
+ * _mixins.scss
+ * -----------------------------------------------------
+ * This file defines global SCSS mixins used for layout
+ * and styling utilities across the project.
+ *
+ * === Mixin: respond ===
+ * A responsive media query mixin for cleaner breakpoint handling.
+ *
+ * Usage:
+ *   @include respond("md") {
+ *     // Styles applied at min-width: 768px and up
+ *   }
+ *
+ * @param {string} $breakpoint - One of the keys defined in the $breakpoints map
+ *                               (e.g., "xs", "sm", "md", "lg", "xl", "2xl").
+ * @content - The styles to apply inside the media query block.
+ *
+ * Requires:
+ *   - A `$breakpoints` map from the `breakpoints` module (alias: `bp`)
+ *   - `sass:map` module to access map values safely
+ */
 *, *::before, *::after {
   box-sizing: border-box;
 }
@@ -12175,17 +12318,6 @@ a:hover {
   border: 0;
 }
 
-:global(.sr_only) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 .data_table_wrapper {
   width: 100%;
   overflow-x: auto;
@@ -12758,6 +12890,29 @@ a:hover {
     left: 100%;
   }
 }
+/**
+ * -----------------------------------------------------
+ * _mixins.scss
+ * -----------------------------------------------------
+ * This file defines global SCSS mixins used for layout
+ * and styling utilities across the project.
+ *
+ * === Mixin: respond ===
+ * A responsive media query mixin for cleaner breakpoint handling.
+ *
+ * Usage:
+ *   @include respond("md") {
+ *     // Styles applied at min-width: 768px and up
+ *   }
+ *
+ * @param {string} $breakpoint - One of the keys defined in the $breakpoints map
+ *                               (e.g., "xs", "sm", "md", "lg", "xl", "2xl").
+ * @content - The styles to apply inside the media query block.
+ *
+ * Requires:
+ *   - A `$breakpoints` map from the `breakpoints` module (alias: `bp`)
+ *   - `sass:map` module to access map values safely
+ */
 *, *::before, *::after {
   box-sizing: border-box;
 }
@@ -13042,17 +13197,6 @@ a:hover {
   border: 0;
 }
 
-:global(.sr_only) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 .datetime_picker_wrapper {
   display: flex;
   flex-direction: column;
@@ -13661,6 +13805,29 @@ a:hover {
     left: 100%;
   }
 }
+/**
+ * -----------------------------------------------------
+ * _mixins.scss
+ * -----------------------------------------------------
+ * This file defines global SCSS mixins used for layout
+ * and styling utilities across the project.
+ *
+ * === Mixin: respond ===
+ * A responsive media query mixin for cleaner breakpoint handling.
+ *
+ * Usage:
+ *   @include respond("md") {
+ *     // Styles applied at min-width: 768px and up
+ *   }
+ *
+ * @param {string} $breakpoint - One of the keys defined in the $breakpoints map
+ *                               (e.g., "xs", "sm", "md", "lg", "xl", "2xl").
+ * @content - The styles to apply inside the media query block.
+ *
+ * Requires:
+ *   - A `$breakpoints` map from the `breakpoints` module (alias: `bp`)
+ *   - `sass:map` module to access map values safely
+ */
 *, *::before, *::after {
   box-sizing: border-box;
 }
@@ -13945,17 +14112,6 @@ a:hover {
   border: 0;
 }
 
-:global(.sr_only) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 .divider {
   display: block;
   margin: 0 auto;
@@ -14343,6 +14499,29 @@ a:hover {
     left: 100%;
   }
 }
+/**
+ * -----------------------------------------------------
+ * _mixins.scss
+ * -----------------------------------------------------
+ * This file defines global SCSS mixins used for layout
+ * and styling utilities across the project.
+ *
+ * === Mixin: respond ===
+ * A responsive media query mixin for cleaner breakpoint handling.
+ *
+ * Usage:
+ *   @include respond("md") {
+ *     // Styles applied at min-width: 768px and up
+ *   }
+ *
+ * @param {string} $breakpoint - One of the keys defined in the $breakpoints map
+ *                               (e.g., "xs", "sm", "md", "lg", "xl", "2xl").
+ * @content - The styles to apply inside the media query block.
+ *
+ * Requires:
+ *   - A `$breakpoints` map from the `breakpoints` module (alias: `bp`)
+ *   - `sass:map` module to access map values safely
+ */
 *, *::before, *::after {
   box-sizing: border-box;
 }
@@ -14627,17 +14806,6 @@ a:hover {
   border: 0;
 }
 
-:global(.sr_only) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 .dropdown {
   position: relative;
   display: inline-block;
@@ -15077,6 +15245,29 @@ a:hover {
     left: 100%;
   }
 }
+/**
+ * -----------------------------------------------------
+ * _mixins.scss
+ * -----------------------------------------------------
+ * This file defines global SCSS mixins used for layout
+ * and styling utilities across the project.
+ *
+ * === Mixin: respond ===
+ * A responsive media query mixin for cleaner breakpoint handling.
+ *
+ * Usage:
+ *   @include respond("md") {
+ *     // Styles applied at min-width: 768px and up
+ *   }
+ *
+ * @param {string} $breakpoint - One of the keys defined in the $breakpoints map
+ *                               (e.g., "xs", "sm", "md", "lg", "xl", "2xl").
+ * @content - The styles to apply inside the media query block.
+ *
+ * Requires:
+ *   - A `$breakpoints` map from the `breakpoints` module (alias: `bp`)
+ *   - `sass:map` module to access map values safely
+ */
 *, *::before, *::after {
   box-sizing: border-box;
 }
@@ -15361,17 +15552,6 @@ a:hover {
   border: 0;
 }
 
-:global(.sr_only) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 .empty_state {
   display: flex;
   flex-direction: column;
@@ -16021,6 +16201,29 @@ a:hover {
     left: 100%;
   }
 }
+/**
+ * -----------------------------------------------------
+ * _mixins.scss
+ * -----------------------------------------------------
+ * This file defines global SCSS mixins used for layout
+ * and styling utilities across the project.
+ *
+ * === Mixin: respond ===
+ * A responsive media query mixin for cleaner breakpoint handling.
+ *
+ * Usage:
+ *   @include respond("md") {
+ *     // Styles applied at min-width: 768px and up
+ *   }
+ *
+ * @param {string} $breakpoint - One of the keys defined in the $breakpoints map
+ *                               (e.g., "xs", "sm", "md", "lg", "xl", "2xl").
+ * @content - The styles to apply inside the media query block.
+ *
+ * Requires:
+ *   - A `$breakpoints` map from the `breakpoints` module (alias: `bp`)
+ *   - `sass:map` module to access map values safely
+ */
 *, *::before, *::after {
   box-sizing: border-box;
 }
@@ -16305,17 +16508,6 @@ a:hover {
   border: 0;
 }
 
-:global(.sr_only) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 .progress_container {
   width: 100%;
   min-width: 100px;
@@ -16771,6 +16963,29 @@ a:hover {
     left: 100%;
   }
 }
+/**
+ * -----------------------------------------------------
+ * _mixins.scss
+ * -----------------------------------------------------
+ * This file defines global SCSS mixins used for layout
+ * and styling utilities across the project.
+ *
+ * === Mixin: respond ===
+ * A responsive media query mixin for cleaner breakpoint handling.
+ *
+ * Usage:
+ *   @include respond("md") {
+ *     // Styles applied at min-width: 768px and up
+ *   }
+ *
+ * @param {string} $breakpoint - One of the keys defined in the $breakpoints map
+ *                               (e.g., "xs", "sm", "md", "lg", "xl", "2xl").
+ * @content - The styles to apply inside the media query block.
+ *
+ * Requires:
+ *   - A `$breakpoints` map from the `breakpoints` module (alias: `bp`)
+ *   - `sass:map` module to access map values safely
+ */
 *, *::before, *::after {
   box-sizing: border-box;
 }
@@ -17055,17 +17270,6 @@ a:hover {
   border: 0;
 }
 
-:global(.sr_only) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 .form_group {
   display: flex;
   flex-direction: column;
@@ -17503,6 +17707,29 @@ a:hover {
     left: 100%;
   }
 }
+/**
+ * -----------------------------------------------------
+ * _mixins.scss
+ * -----------------------------------------------------
+ * This file defines global SCSS mixins used for layout
+ * and styling utilities across the project.
+ *
+ * === Mixin: respond ===
+ * A responsive media query mixin for cleaner breakpoint handling.
+ *
+ * Usage:
+ *   @include respond("md") {
+ *     // Styles applied at min-width: 768px and up
+ *   }
+ *
+ * @param {string} $breakpoint - One of the keys defined in the $breakpoints map
+ *                               (e.g., "xs", "sm", "md", "lg", "xl", "2xl").
+ * @content - The styles to apply inside the media query block.
+ *
+ * Requires:
+ *   - A `$breakpoints` map from the `breakpoints` module (alias: `bp`)
+ *   - `sass:map` module to access map values safely
+ */
 *, *::before, *::after {
   box-sizing: border-box;
 }
@@ -17787,17 +18014,6 @@ a:hover {
   border: 0;
 }
 
-:global(.sr_only) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 .file_upload {
   display: flex;
   flex-direction: column;
@@ -18313,6 +18529,29 @@ a:hover {
     left: 100%;
   }
 }
+/**
+ * -----------------------------------------------------
+ * _mixins.scss
+ * -----------------------------------------------------
+ * This file defines global SCSS mixins used for layout
+ * and styling utilities across the project.
+ *
+ * === Mixin: respond ===
+ * A responsive media query mixin for cleaner breakpoint handling.
+ *
+ * Usage:
+ *   @include respond("md") {
+ *     // Styles applied at min-width: 768px and up
+ *   }
+ *
+ * @param {string} $breakpoint - One of the keys defined in the $breakpoints map
+ *                               (e.g., "xs", "sm", "md", "lg", "xl", "2xl").
+ * @content - The styles to apply inside the media query block.
+ *
+ * Requires:
+ *   - A `$breakpoints` map from the `breakpoints` module (alias: `bp`)
+ *   - `sass:map` module to access map values safely
+ */
 *, *::before, *::after {
   box-sizing: border-box;
 }
@@ -18597,17 +18836,6 @@ a:hover {
   border: 0;
 }
 
-:global(.sr_only) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 .select_wrapper {
   position: relative;
   display: inline-flex;
@@ -19142,6 +19370,29 @@ a:hover {
     left: 100%;
   }
 }
+/**
+ * -----------------------------------------------------
+ * _mixins.scss
+ * -----------------------------------------------------
+ * This file defines global SCSS mixins used for layout
+ * and styling utilities across the project.
+ *
+ * === Mixin: respond ===
+ * A responsive media query mixin for cleaner breakpoint handling.
+ *
+ * Usage:
+ *   @include respond("md") {
+ *     // Styles applied at min-width: 768px and up
+ *   }
+ *
+ * @param {string} $breakpoint - One of the keys defined in the $breakpoints map
+ *                               (e.g., "xs", "sm", "md", "lg", "xl", "2xl").
+ * @content - The styles to apply inside the media query block.
+ *
+ * Requires:
+ *   - A `$breakpoints` map from the `breakpoints` module (alias: `bp`)
+ *   - `sass:map` module to access map values safely
+ */
 *, *::before, *::after {
   box-sizing: border-box;
 }
@@ -19426,17 +19677,6 @@ a:hover {
   border: 0;
 }
 
-:global(.sr_only) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 .footer {
   display: flex;
   justify-content: center;
@@ -19957,6 +20197,29 @@ a:hover {
     left: 100%;
   }
 }
+/**
+ * -----------------------------------------------------
+ * _mixins.scss
+ * -----------------------------------------------------
+ * This file defines global SCSS mixins used for layout
+ * and styling utilities across the project.
+ *
+ * === Mixin: respond ===
+ * A responsive media query mixin for cleaner breakpoint handling.
+ *
+ * Usage:
+ *   @include respond("md") {
+ *     // Styles applied at min-width: 768px and up
+ *   }
+ *
+ * @param {string} $breakpoint - One of the keys defined in the $breakpoints map
+ *                               (e.g., "xs", "sm", "md", "lg", "xl", "2xl").
+ * @content - The styles to apply inside the media query block.
+ *
+ * Requires:
+ *   - A `$breakpoints` map from the `breakpoints` module (alias: `bp`)
+ *   - `sass:map` module to access map values safely
+ */
 *, *::before, *::after {
   box-sizing: border-box;
 }
@@ -20241,17 +20504,6 @@ a:hover {
   border: 0;
 }
 
-:global(.sr_only) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 .markdown {
   font-family: Inter, sans-serif;
   line-height: 1.6;
@@ -20722,6 +20974,29 @@ a:hover {
     left: 100%;
   }
 }
+/**
+ * -----------------------------------------------------
+ * _mixins.scss
+ * -----------------------------------------------------
+ * This file defines global SCSS mixins used for layout
+ * and styling utilities across the project.
+ *
+ * === Mixin: respond ===
+ * A responsive media query mixin for cleaner breakpoint handling.
+ *
+ * Usage:
+ *   @include respond("md") {
+ *     // Styles applied at min-width: 768px and up
+ *   }
+ *
+ * @param {string} $breakpoint - One of the keys defined in the $breakpoints map
+ *                               (e.g., "xs", "sm", "md", "lg", "xl", "2xl").
+ * @content - The styles to apply inside the media query block.
+ *
+ * Requires:
+ *   - A `$breakpoints` map from the `breakpoints` module (alias: `bp`)
+ *   - `sass:map` module to access map values safely
+ */
 *, *::before, *::after {
   box-sizing: border-box;
 }
@@ -21006,17 +21281,6 @@ a:hover {
   border: 0;
 }
 
-:global(.sr_only) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 .messagePopup {
   position: fixed;
   inset: 0;
@@ -21418,6 +21682,29 @@ a:hover {
     left: 100%;
   }
 }
+/**
+ * -----------------------------------------------------
+ * _mixins.scss
+ * -----------------------------------------------------
+ * This file defines global SCSS mixins used for layout
+ * and styling utilities across the project.
+ *
+ * === Mixin: respond ===
+ * A responsive media query mixin for cleaner breakpoint handling.
+ *
+ * Usage:
+ *   @include respond("md") {
+ *     // Styles applied at min-width: 768px and up
+ *   }
+ *
+ * @param {string} $breakpoint - One of the keys defined in the $breakpoints map
+ *                               (e.g., "xs", "sm", "md", "lg", "xl", "2xl").
+ * @content - The styles to apply inside the media query block.
+ *
+ * Requires:
+ *   - A `$breakpoints` map from the `breakpoints` module (alias: `bp`)
+ *   - `sass:map` module to access map values safely
+ */
 *, *::before, *::after {
   box-sizing: border-box;
 }
@@ -21702,17 +21989,6 @@ a:hover {
   border: 0;
 }
 
-:global(.sr_only) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 .metricBox {
   display: flex;
   flex-direction: column;
@@ -22321,6 +22597,29 @@ a:hover {
     left: 100%;
   }
 }
+/**
+ * -----------------------------------------------------
+ * _mixins.scss
+ * -----------------------------------------------------
+ * This file defines global SCSS mixins used for layout
+ * and styling utilities across the project.
+ *
+ * === Mixin: respond ===
+ * A responsive media query mixin for cleaner breakpoint handling.
+ *
+ * Usage:
+ *   @include respond("md") {
+ *     // Styles applied at min-width: 768px and up
+ *   }
+ *
+ * @param {string} $breakpoint - One of the keys defined in the $breakpoints map
+ *                               (e.g., "xs", "sm", "md", "lg", "xl", "2xl").
+ * @content - The styles to apply inside the media query block.
+ *
+ * Requires:
+ *   - A `$breakpoints` map from the `breakpoints` module (alias: `bp`)
+ *   - `sass:map` module to access map values safely
+ */
 *, *::before, *::after {
   box-sizing: border-box;
 }
@@ -22605,17 +22904,6 @@ a:hover {
   border: 0;
 }
 
-:global(.sr_only) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 .modal_overlay {
   position: fixed;
   inset: 0;
@@ -23011,6 +23299,29 @@ a:hover {
     left: 100%;
   }
 }
+/**
+ * -----------------------------------------------------
+ * _mixins.scss
+ * -----------------------------------------------------
+ * This file defines global SCSS mixins used for layout
+ * and styling utilities across the project.
+ *
+ * === Mixin: respond ===
+ * A responsive media query mixin for cleaner breakpoint handling.
+ *
+ * Usage:
+ *   @include respond("md") {
+ *     // Styles applied at min-width: 768px and up
+ *   }
+ *
+ * @param {string} $breakpoint - One of the keys defined in the $breakpoints map
+ *                               (e.g., "xs", "sm", "md", "lg", "xl", "2xl").
+ * @content - The styles to apply inside the media query block.
+ *
+ * Requires:
+ *   - A `$breakpoints` map from the `breakpoints` module (alias: `bp`)
+ *   - `sass:map` module to access map values safely
+ */
 *, *::before, *::after {
   box-sizing: border-box;
 }
@@ -23295,17 +23606,6 @@ a:hover {
   border: 0;
 }
 
-:global(.sr_only) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 .nav {
   position: fixed;
   transform: translateX(-45%);
@@ -23827,6 +24127,29 @@ a:hover {
     left: 100%;
   }
 }
+/**
+ * -----------------------------------------------------
+ * _mixins.scss
+ * -----------------------------------------------------
+ * This file defines global SCSS mixins used for layout
+ * and styling utilities across the project.
+ *
+ * === Mixin: respond ===
+ * A responsive media query mixin for cleaner breakpoint handling.
+ *
+ * Usage:
+ *   @include respond("md") {
+ *     // Styles applied at min-width: 768px and up
+ *   }
+ *
+ * @param {string} $breakpoint - One of the keys defined in the $breakpoints map
+ *                               (e.g., "xs", "sm", "md", "lg", "xl", "2xl").
+ * @content - The styles to apply inside the media query block.
+ *
+ * Requires:
+ *   - A `$breakpoints` map from the `breakpoints` module (alias: `bp`)
+ *   - `sass:map` module to access map values safely
+ */
 *, *::before, *::after {
   box-sizing: border-box;
 }
@@ -24111,17 +24434,6 @@ a:hover {
   border: 0;
 }
 
-:global(.sr_only) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 .notification_center {
   position: relative;
   width: fit-content;
@@ -24613,6 +24925,29 @@ a:hover {
     left: 100%;
   }
 }
+/**
+ * -----------------------------------------------------
+ * _mixins.scss
+ * -----------------------------------------------------
+ * This file defines global SCSS mixins used for layout
+ * and styling utilities across the project.
+ *
+ * === Mixin: respond ===
+ * A responsive media query mixin for cleaner breakpoint handling.
+ *
+ * Usage:
+ *   @include respond("md") {
+ *     // Styles applied at min-width: 768px and up
+ *   }
+ *
+ * @param {string} $breakpoint - One of the keys defined in the $breakpoints map
+ *                               (e.g., "xs", "sm", "md", "lg", "xl", "2xl").
+ * @content - The styles to apply inside the media query block.
+ *
+ * Requires:
+ *   - A `$breakpoints` map from the `breakpoints` module (alias: `bp`)
+ *   - `sass:map` module to access map values safely
+ */
 *, *::before, *::after {
   box-sizing: border-box;
 }
@@ -24897,17 +25232,6 @@ a:hover {
   border: 0;
 }
 
-:global(.sr_only) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 .pagination {
   display: flex;
   flex-wrap: nowrap;
@@ -25232,6 +25556,29 @@ a:hover {
     left: 100%;
   }
 }
+/**
+ * -----------------------------------------------------
+ * _mixins.scss
+ * -----------------------------------------------------
+ * This file defines global SCSS mixins used for layout
+ * and styling utilities across the project.
+ *
+ * === Mixin: respond ===
+ * A responsive media query mixin for cleaner breakpoint handling.
+ *
+ * Usage:
+ *   @include respond("md") {
+ *     // Styles applied at min-width: 768px and up
+ *   }
+ *
+ * @param {string} $breakpoint - One of the keys defined in the $breakpoints map
+ *                               (e.g., "xs", "sm", "md", "lg", "xl", "2xl").
+ * @content - The styles to apply inside the media query block.
+ *
+ * Requires:
+ *   - A `$breakpoints` map from the `breakpoints` module (alias: `bp`)
+ *   - `sass:map` module to access map values safely
+ */
 *, *::before, *::after {
   box-sizing: border-box;
 }
@@ -25516,17 +25863,6 @@ a:hover {
   border: 0;
 }
 
-:global(.sr_only) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 .popover_container {
   position: relative;
   display: inline-block;
@@ -25965,6 +26301,29 @@ a:hover {
     left: 100%;
   }
 }
+/**
+ * -----------------------------------------------------
+ * _mixins.scss
+ * -----------------------------------------------------
+ * This file defines global SCSS mixins used for layout
+ * and styling utilities across the project.
+ *
+ * === Mixin: respond ===
+ * A responsive media query mixin for cleaner breakpoint handling.
+ *
+ * Usage:
+ *   @include respond("md") {
+ *     // Styles applied at min-width: 768px and up
+ *   }
+ *
+ * @param {string} $breakpoint - One of the keys defined in the $breakpoints map
+ *                               (e.g., "xs", "sm", "md", "lg", "xl", "2xl").
+ * @content - The styles to apply inside the media query block.
+ *
+ * Requires:
+ *   - A `$breakpoints` map from the `breakpoints` module (alias: `bp`)
+ *   - `sass:map` module to access map values safely
+ */
 *, *::before, *::after {
   box-sizing: border-box;
 }
@@ -26249,17 +26608,6 @@ a:hover {
   border: 0;
 }
 
-:global(.sr_only) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 .radio_wrapper {
   display: inline-flex;
   align-items: center;
@@ -26745,6 +27093,29 @@ a:hover {
     left: 100%;
   }
 }
+/**
+ * -----------------------------------------------------
+ * _mixins.scss
+ * -----------------------------------------------------
+ * This file defines global SCSS mixins used for layout
+ * and styling utilities across the project.
+ *
+ * === Mixin: respond ===
+ * A responsive media query mixin for cleaner breakpoint handling.
+ *
+ * Usage:
+ *   @include respond("md") {
+ *     // Styles applied at min-width: 768px and up
+ *   }
+ *
+ * @param {string} $breakpoint - One of the keys defined in the $breakpoints map
+ *                               (e.g., "xs", "sm", "md", "lg", "xl", "2xl").
+ * @content - The styles to apply inside the media query block.
+ *
+ * Requires:
+ *   - A `$breakpoints` map from the `breakpoints` module (alias: `bp`)
+ *   - `sass:map` module to access map values safely
+ */
 *, *::before, *::after {
   box-sizing: border-box;
 }
@@ -27029,17 +27400,6 @@ a:hover {
   border: 0;
 }
 
-:global(.sr_only) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 .rating_container {
   display: flex;
   align-items: center;
@@ -27684,6 +28044,29 @@ a:hover {
     left: 100%;
   }
 }
+/**
+ * -----------------------------------------------------
+ * _mixins.scss
+ * -----------------------------------------------------
+ * This file defines global SCSS mixins used for layout
+ * and styling utilities across the project.
+ *
+ * === Mixin: respond ===
+ * A responsive media query mixin for cleaner breakpoint handling.
+ *
+ * Usage:
+ *   @include respond("md") {
+ *     // Styles applied at min-width: 768px and up
+ *   }
+ *
+ * @param {string} $breakpoint - One of the keys defined in the $breakpoints map
+ *                               (e.g., "xs", "sm", "md", "lg", "xl", "2xl").
+ * @content - The styles to apply inside the media query block.
+ *
+ * Requires:
+ *   - A `$breakpoints` map from the `breakpoints` module (alias: `bp`)
+ *   - `sass:map` module to access map values safely
+ */
 *, *::before, *::after {
   box-sizing: border-box;
 }
@@ -27968,17 +28351,6 @@ a:hover {
   border: 0;
 }
 
-:global(.sr_only) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 .sidebar {
   width: 240px;
   height: 100vh;
@@ -28604,6 +28976,29 @@ a:hover {
     left: 100%;
   }
 }
+/**
+ * -----------------------------------------------------
+ * _mixins.scss
+ * -----------------------------------------------------
+ * This file defines global SCSS mixins used for layout
+ * and styling utilities across the project.
+ *
+ * === Mixin: respond ===
+ * A responsive media query mixin for cleaner breakpoint handling.
+ *
+ * Usage:
+ *   @include respond("md") {
+ *     // Styles applied at min-width: 768px and up
+ *   }
+ *
+ * @param {string} $breakpoint - One of the keys defined in the $breakpoints map
+ *                               (e.g., "xs", "sm", "md", "lg", "xl", "2xl").
+ * @content - The styles to apply inside the media query block.
+ *
+ * Requires:
+ *   - A `$breakpoints` map from the `breakpoints` module (alias: `bp`)
+ *   - `sass:map` module to access map values safely
+ */
 *, *::before, *::after {
   box-sizing: border-box;
 }
@@ -28888,17 +29283,6 @@ a:hover {
   border: 0;
 }
 
-:global(.sr_only) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 .slider_container {
   display: flex;
   flex-direction: column;
@@ -29562,6 +29946,29 @@ a:hover {
     left: 100%;
   }
 }
+/**
+ * -----------------------------------------------------
+ * _mixins.scss
+ * -----------------------------------------------------
+ * This file defines global SCSS mixins used for layout
+ * and styling utilities across the project.
+ *
+ * === Mixin: respond ===
+ * A responsive media query mixin for cleaner breakpoint handling.
+ *
+ * Usage:
+ *   @include respond("md") {
+ *     // Styles applied at min-width: 768px and up
+ *   }
+ *
+ * @param {string} $breakpoint - One of the keys defined in the $breakpoints map
+ *                               (e.g., "xs", "sm", "md", "lg", "xl", "2xl").
+ * @content - The styles to apply inside the media query block.
+ *
+ * Requires:
+ *   - A `$breakpoints` map from the `breakpoints` module (alias: `bp`)
+ *   - `sass:map` module to access map values safely
+ */
 *, *::before, *::after {
   box-sizing: border-box;
 }
@@ -29846,17 +30253,6 @@ a:hover {
   border: 0;
 }
 
-:global(.sr_only) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 .spinner_wrapper {
   width: fit-content;
   display: inline-flex;
@@ -30267,6 +30663,29 @@ a:hover {
     left: 100%;
   }
 }
+/**
+ * -----------------------------------------------------
+ * _mixins.scss
+ * -----------------------------------------------------
+ * This file defines global SCSS mixins used for layout
+ * and styling utilities across the project.
+ *
+ * === Mixin: respond ===
+ * A responsive media query mixin for cleaner breakpoint handling.
+ *
+ * Usage:
+ *   @include respond("md") {
+ *     // Styles applied at min-width: 768px and up
+ *   }
+ *
+ * @param {string} $breakpoint - One of the keys defined in the $breakpoints map
+ *                               (e.g., "xs", "sm", "md", "lg", "xl", "2xl").
+ * @content - The styles to apply inside the media query block.
+ *
+ * Requires:
+ *   - A `$breakpoints` map from the `breakpoints` module (alias: `bp`)
+ *   - `sass:map` module to access map values safely
+ */
 *, *::before, *::after {
   box-sizing: border-box;
 }
@@ -30551,17 +30970,6 @@ a:hover {
   border: 0;
 }
 
-:global(.sr_only) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 .stepper {
   margin: 2px;
   display: flex;
@@ -30978,6 +31386,29 @@ a:hover {
     left: 100%;
   }
 }
+/**
+ * -----------------------------------------------------
+ * _mixins.scss
+ * -----------------------------------------------------
+ * This file defines global SCSS mixins used for layout
+ * and styling utilities across the project.
+ *
+ * === Mixin: respond ===
+ * A responsive media query mixin for cleaner breakpoint handling.
+ *
+ * Usage:
+ *   @include respond("md") {
+ *     // Styles applied at min-width: 768px and up
+ *   }
+ *
+ * @param {string} $breakpoint - One of the keys defined in the $breakpoints map
+ *                               (e.g., "xs", "sm", "md", "lg", "xl", "2xl").
+ * @content - The styles to apply inside the media query block.
+ *
+ * Requires:
+ *   - A `$breakpoints` map from the `breakpoints` module (alias: `bp`)
+ *   - `sass:map` module to access map values safely
+ */
 *, *::before, *::after {
   box-sizing: border-box;
 }
@@ -31262,17 +31693,6 @@ a:hover {
   border: 0;
 }
 
-:global(.sr_only) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 .tabs_container {
   width: 100%;
   background-color: transparent;
@@ -31822,6 +32242,29 @@ a:hover {
     left: 100%;
   }
 }
+/**
+ * -----------------------------------------------------
+ * _mixins.scss
+ * -----------------------------------------------------
+ * This file defines global SCSS mixins used for layout
+ * and styling utilities across the project.
+ *
+ * === Mixin: respond ===
+ * A responsive media query mixin for cleaner breakpoint handling.
+ *
+ * Usage:
+ *   @include respond("md") {
+ *     // Styles applied at min-width: 768px and up
+ *   }
+ *
+ * @param {string} $breakpoint - One of the keys defined in the $breakpoints map
+ *                               (e.g., "xs", "sm", "md", "lg", "xl", "2xl").
+ * @content - The styles to apply inside the media query block.
+ *
+ * Requires:
+ *   - A `$breakpoints` map from the `breakpoints` module (alias: `bp`)
+ *   - `sass:map` module to access map values safely
+ */
 *, *::before, *::after {
   box-sizing: border-box;
 }
@@ -32106,17 +32549,6 @@ a:hover {
   border: 0;
 }
 
-:global(.sr_only) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 .tag_input {
   display: flex;
   position: relative;
@@ -33818,6 +34250,29 @@ a:hover {
     left: 100%;
   }
 }
+/**
+ * -----------------------------------------------------
+ * _mixins.scss
+ * -----------------------------------------------------
+ * This file defines global SCSS mixins used for layout
+ * and styling utilities across the project.
+ *
+ * === Mixin: respond ===
+ * A responsive media query mixin for cleaner breakpoint handling.
+ *
+ * Usage:
+ *   @include respond("md") {
+ *     // Styles applied at min-width: 768px and up
+ *   }
+ *
+ * @param {string} $breakpoint - One of the keys defined in the $breakpoints map
+ *                               (e.g., "xs", "sm", "md", "lg", "xl", "2xl").
+ * @content - The styles to apply inside the media query block.
+ *
+ * Requires:
+ *   - A `$breakpoints` map from the `breakpoints` module (alias: `bp`)
+ *   - `sass:map` module to access map values safely
+ */
 *, *::before, *::after {
   box-sizing: border-box;
 }
@@ -34102,17 +34557,6 @@ a:hover {
   border: 0;
 }
 
-:global(.sr_only) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 .toolbar {
   display: flex;
   justify-content: space-between;
@@ -34509,6 +34953,29 @@ a:hover {
     left: 100%;
   }
 }
+/**
+ * -----------------------------------------------------
+ * _mixins.scss
+ * -----------------------------------------------------
+ * This file defines global SCSS mixins used for layout
+ * and styling utilities across the project.
+ *
+ * === Mixin: respond ===
+ * A responsive media query mixin for cleaner breakpoint handling.
+ *
+ * Usage:
+ *   @include respond("md") {
+ *     // Styles applied at min-width: 768px and up
+ *   }
+ *
+ * @param {string} $breakpoint - One of the keys defined in the $breakpoints map
+ *                               (e.g., "xs", "sm", "md", "lg", "xl", "2xl").
+ * @content - The styles to apply inside the media query block.
+ *
+ * Requires:
+ *   - A `$breakpoints` map from the `breakpoints` module (alias: `bp`)
+ *   - `sass:map` module to access map values safely
+ */
 *, *::before, *::after {
   box-sizing: border-box;
 }
@@ -34793,17 +35260,6 @@ a:hover {
   border: 0;
 }
 
-:global(.sr_only) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 .tooltip_container {
   position: relative;
   display: inline-block;
@@ -35406,6 +35862,29 @@ a:hover {
  * $breakpoints map:
  *  Use this map to loop over breakpoints or access named values.
  */
+/**
+ * -----------------------------------------------------
+ * _mixins.scss
+ * -----------------------------------------------------
+ * This file defines global SCSS mixins used for layout
+ * and styling utilities across the project.
+ *
+ * === Mixin: respond ===
+ * A responsive media query mixin for cleaner breakpoint handling.
+ *
+ * Usage:
+ *   @include respond("md") {
+ *     // Styles applied at min-width: 768px and up
+ *   }
+ *
+ * @param {string} $breakpoint - One of the keys defined in the $breakpoints map
+ *                               (e.g., "xs", "sm", "md", "lg", "xl", "2xl").
+ * @content - The styles to apply inside the media query block.
+ *
+ * Requires:
+ *   - A `$breakpoints` map from the `breakpoints` module (alias: `bp`)
+ *   - `sass:map` module to access map values safely
+ */
 *, *::before, *::after {
   box-sizing: border-box;
 }
@@ -35690,17 +36169,6 @@ a:hover {
   border: 0;
 }
 
-:global(.sr_only) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 .chip_group {
   position: fixed;
   z-index: 9998;