@mantine/core 7.7.2 → 7.8.1-alpha.0

package/styles.css

@@ -29,7 +29,7 @@ body {
   -webkit-font-smoothing: var(--mantine-webkit-font-smoothing);
   -moz-osx-font-smoothing: var(--mantine-moz-font-smoothing);
 }
-@media screen and (max-device-width: 500px) {
+@media screen and (max-device-width: 31.25em) {
 body {
     -webkit-text-size-adjust: 100%
 }
@@ -51,12 +51,12 @@ body {
 }
 
 .mantine-focus-auto:focus-visible {
-    outline: calc(0.125rem * var(--mantine-scale)) solid var(--mantine-primary-color-filled);
+    outline: 2px solid var(--mantine-primary-color-filled);
     outline-offset: calc(0.125rem * var(--mantine-scale));
   }
 
 .mantine-focus-always:focus {
-    outline: calc(0.125rem * var(--mantine-scale)) solid var(--mantine-primary-color-filled);
+    outline: 2px solid var(--mantine-primary-color-filled);
     outline-offset: calc(0.125rem * var(--mantine-scale));
   }
 
@@ -759,9 +759,9 @@ body {
 .m_515a97f8 {
   border: 0;
   clip: rect(0 0 0 0);
-  height: 1px;
-  width: 1px;
-  margin: -1px;
+  height: calc(0.0625rem * var(--mantine-scale));
+  width: calc(0.0625rem * var(--mantine-scale));
+  margin: calc(-0.0625rem * var(--mantine-scale));
   overflow: hidden;
   padding: 0;
   position: absolute;
@@ -782,16 +782,16 @@ body {
 }
 
   :where([data-mantine-color-scheme='light']) .m_1b7284a3:where([data-with-border]) {
-      border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-gray-3);
+      border: 1px solid var(--mantine-color-gray-3);
 }
 
   :where([data-mantine-color-scheme='dark']) .m_1b7284a3:where([data-with-border]) {
-      border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-dark-4);
+      border: 1px solid var(--mantine-color-dark-4);
 }
 
 .m_38a85659 {
   position: absolute;
-  border: calc(0.0625rem * var(--mantine-scale)) solid var(--popover-border-color);
+  border: 1px solid var(--popover-border-color);
   padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);
   box-shadow: var(--popover-shadow, none);
   border-radius: var(--popover-radius, var(--mantine-radius-default));
@@ -813,7 +813,7 @@ body {
 
 .m_a31dc6c1 {
   background-color: inherit;
-  border: calc(0.0625rem * var(--mantine-scale)) solid var(--popover-border-color);
+  border: 1px solid var(--popover-border-color);
   z-index: 1;
 }
 
@@ -1381,7 +1381,7 @@ body {
 
   text-align: var(--input-text-align);
   color: var(--input-color);
-  border: calc(0.0625rem * var(--mantine-scale)) solid var(--input-bd);
+  border: 1px solid var(--input-bd);
   background-color: var(--input-bg);
   font-family: var(--input-font-family, var(--mantine-font-family));
   height: var(--input-size);
@@ -1674,11 +1674,11 @@ body {
 }
 
 .m_fe19b709 {
-  border-bottom: calc(0.0625rem * var(--mantine-scale)) solid var(--item-border-color);
+  border-bottom: 1px solid var(--item-border-color);
 }
 
 .m_1f921b3b {
-  border: calc(0.0625rem * var(--mantine-scale)) solid var(--item-border-color);
+  border: 1px solid var(--item-border-color);
   transition: background-color 150ms ease;
 }
 
@@ -1919,8 +1919,8 @@ body {
     --app-shell-transition-duration: 0ms !important;
   }
   .m_89ab340[data-disabled] {
-    --app-shell-header-offset: 0px !important;
-    --app-shell-navbar-offset: 0px !important;
+    --app-shell-header-offset: 0rem !important;
+    --app-shell-navbar-offset: 0rem !important;
   }
   [data-mantine-color-scheme='light'] .m_89ab340 {
     --app-shell-border-color: var(--mantine-color-gray-3);
@@ -1943,14 +1943,16 @@ body {
   position: fixed;
   display: flex;
   flex-direction: column;
-  top: var(--app-shell-header-offset, 0px);
-  height: calc(100dvh - var(--app-shell-header-offset, 0px) - var(--app-shell-footer-offset, 0px));
+  top: var(--app-shell-header-offset, 0rem);
+  height: calc(
+    100dvh - var(--app-shell-header-offset, 0rem) - var(--app-shell-footer-offset, 0rem)
+  );
   background-color: var(--mantine-color-body);
   transition-property: transform, top, height;
 }
 
 :where([data-layout='alt']) .m_45252eee, :where([data-layout='alt']) .m_9cdde9a {
-    top: 0px;
+    top: 0rem;
     height: 100dvh;
   }
 
@@ -1967,7 +1969,7 @@ body {
 }
 
 .m_45252eee:where([data-with-border]) {
-    border-inline-end: calc(0.0625rem * var(--mantine-scale)) solid var(--app-shell-border-color);
+    border-inline-end: 1px solid var(--app-shell-border-color);
   }
 
 .m_9cdde9a {
@@ -1982,14 +1984,14 @@ body {
 }
 
 .m_9cdde9a:where([data-with-border]) {
-    border-inline-start: calc(0.0625rem * var(--mantine-scale)) solid var(--app-shell-border-color);
+    border-inline-start: 1px solid var(--app-shell-border-color);
   }
 
 .m_8983817 {
-  padding-inline-start: calc(var(--app-shell-navbar-offset, 0px) + var(--app-shell-padding));
-  padding-inline-end: calc(var(--app-shell-aside-offset, 0px) + var(--app-shell-padding));
-  padding-top: calc(var(--app-shell-header-offset, 0px) + var(--app-shell-padding));
-  padding-bottom: calc(var(--app-shell-footer-offset, 0px) + var(--app-shell-padding));
+  padding-inline-start: calc(var(--app-shell-navbar-offset, 0rem) + var(--app-shell-padding));
+  padding-inline-end: calc(var(--app-shell-aside-offset, 0rem) + var(--app-shell-padding));
+  padding-top: calc(var(--app-shell-header-offset, 0rem) + var(--app-shell-padding));
+  padding-bottom: calc(var(--app-shell-footer-offset, 0rem) + var(--app-shell-padding));
   min-height: 100dvh;
   transition-property: padding;
 }
@@ -2003,8 +2005,8 @@ body {
 }
 
 :where([data-layout='alt']) .m_3b16f56b, :where([data-layout='alt']) .m_3840c879 {
-    inset-inline-start: var(--app-shell-navbar-offset, 0px);
-    inset-inline-end: var(--app-shell-aside-offset, 0px);
+    inset-inline-start: var(--app-shell-navbar-offset, 0rem);
+    inset-inline-end: var(--app-shell-aside-offset, 0rem);
   }
 
 .m_3b16f56b {
@@ -2016,7 +2018,7 @@ body {
 }
 
 .m_3b16f56b:where([data-with-border]) {
-    border-bottom: calc(0.0625rem * var(--mantine-scale)) solid var(--app-shell-border-color);
+    border-bottom: 1px solid var(--app-shell-border-color);
   }
 
 .m_3840c879 {
@@ -2028,7 +2030,7 @@ body {
 }
 
 .m_3840c879:where([data-with-border]) {
-    border-top: calc(0.0625rem * var(--mantine-scale)) solid var(--app-shell-border-color);
+    border-top: 1px solid var(--app-shell-border-color);
   }
 
 .m_6dcfc7c7 {
@@ -2041,32 +2043,12 @@ body {
 
 .m_71ac47fc {
   --ar-ratio: 1;
-
-  position: relative;
   max-width: 100%;
 }
 
-  .m_71ac47fc::before {
-    content: '';
-    height: 0;
-    display: block;
-    padding-bottom: calc((1 / var(--ar-ratio)) * 100%);
-  }
-
-  .m_71ac47fc::after {
-    content: '';
-    display: table;
-    clear: both;
-  }
-
   .m_71ac47fc > :where(*:not(style)) {
-    position: absolute;
-    inset: 0;
+    aspect-ratio: var(--ar-ratio);
     width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
   }
 
   .m_71ac47fc > :where(img, video) {
@@ -2496,7 +2478,7 @@ fieldset:disabled .m_d3ea56bb,
 }
 .m_f85678b6:where([data-within-group]) {
     margin-inline-start: var(--ag-offset);
-    border: calc(0.125rem * var(--mantine-scale)) solid var(--mantine-color-body);
+    border: 2px solid var(--mantine-color-body);
     background: var(--mantine-color-body);
   }
 
@@ -2646,7 +2628,7 @@ fieldset:disabled .m_d3ea56bb,
   }
 
 .m_ddec01c0 {
-  --blockquote-border: calc(0.1875rem * var(--mantine-scale)) solid var(--bq-bd);
+  --blockquote-border: 3px solid var(--bq-bd);
 
   position: relative;
   margin: 0;
@@ -3118,7 +3100,7 @@ fieldset:disabled .m_d3ea56bb,
   display: inline-flex;
   align-items: center;
   user-select: none;
-  border-radius: var(--chip-radius, calc(62.5rem * var(--mantine-scale)));
+  border-radius: var(--chip-radius, 1000rem);
   height: var(--chip-size);
   font-size: var(--chip-fz, var(--mantine-font-size-sm));
   line-height: calc(var(--chip-size) - calc(0.125rem * var(--mantine-scale)));
@@ -3150,12 +3132,12 @@ fieldset:disabled .m_d3ea56bb,
 
 :where([data-mantine-color-scheme='light']) .m_3904c1af:not([data-disabled]) {
     background-color: var(--mantine-color-white);
-    border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-gray-3);
+    border: 1px solid var(--mantine-color-gray-3);
 }
 
 :where([data-mantine-color-scheme='dark']) .m_3904c1af:not([data-disabled]) {
     background-color: var(--mantine-color-dark-6);
-    border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-dark-4);
+    border: 1px solid var(--mantine-color-dark-4);
 }
 
 @media (hover: hover) {
@@ -3276,14 +3258,14 @@ fieldset:disabled .m_d3ea56bb,
 }
 
 .m_bde07329:focus-visible + .m_be049a53 {
-    outline: calc(0.125rem * var(--mantine-scale)) solid var(--mantine-primary-color-filled);
+    outline: 2px solid var(--mantine-primary-color-filled);
     outline-offset: calc(0.125rem * var(--mantine-scale));
   }
 
 .m_b183c0a2 {
   font-family: var(--mantine-font-family-monospace);
   line-height: var(--mantine-line-height);
-  padding: calc(0.125rem * var(--mantine-scale)) calc(var(--mantine-spacing-xs) / 2);
+  padding: 2px calc(var(--mantine-spacing-xs) / 2);
   border-radius: var(--mantine-radius-sm);
   font-size: var(--mantine-font-size-xs);
   margin: 0;
@@ -3435,8 +3417,8 @@ fieldset:disabled .m_d3ea56bb,
 .m_40d572ba {
   overflow: hidden;
   position: absolute;
-  box-shadow: 0 0 calc(0.0625rem * var(--mantine-scale)) rgba(0, 0, 0, 0.6);
-  border: calc(0.125rem * var(--mantine-scale)) solid var(--mantine-color-white);
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0.6);
+  border: 2px solid var(--mantine-color-white);
   width: var(--cp-thumb-size);
   height: var(--cp-thumb-size);
   border-radius: var(--cp-thumb-size);
@@ -3477,11 +3459,11 @@ fieldset:disabled .m_d3ea56bb,
 }
 
 .m_202a296e:where([data-focus-ring='auto']):focus:focus-visible .m_40d572ba {
-        outline: calc(0.125rem * var(--mantine-scale)) solid var(--mantine-color-blue-filled);
+        outline: 2px solid var(--mantine-color-blue-filled);
       }
 
 .m_202a296e:where([data-focus-ring='always']):focus .m_40d572ba {
-        outline: calc(0.125rem * var(--mantine-scale)) solid var(--mantine-color-blue-filled);
+        outline: 2px solid var(--mantine-color-blue-filled);
       }
 
 .m_11b3db02 {
@@ -3509,11 +3491,11 @@ fieldset:disabled .m_d3ea56bb,
   }
 
 .m_d856d47d:where([data-focus-ring='auto']):focus:focus-visible .m_40d572ba {
-        outline: calc(0.125rem * var(--mantine-scale)) solid var(--mantine-color-blue-filled);
+        outline: 2px solid var(--mantine-color-blue-filled);
       }
 
 .m_d856d47d:where([data-focus-ring='always']):focus .m_40d572ba {
-        outline: calc(0.125rem * var(--mantine-scale)) solid var(--mantine-color-blue-filled);
+        outline: 2px solid var(--mantine-color-blue-filled);
       }
 
 :where([data-mantine-color-scheme='light']) .m_d856d47d {
@@ -3817,7 +3799,7 @@ fieldset:disabled .m_d3ea56bb,
   transform: translate(var(--indicator-translate-x), var(--indicator-translate-y));
   min-width: var(--indicator-size);
   height: var(--indicator-size);
-  border-radius: var(--indicator-radius, calc(62.5rem * var(--mantine-scale)));
+  border-radius: var(--indicator-radius, 1000rem);
   z-index: var(--indicator-z-index, 200);
   display: flex;
   align-items: center;
@@ -3833,7 +3815,7 @@ fieldset:disabled .m_d3ea56bb,
     position: absolute;
     inset: 0;
     background-color: var(--indicator-color);
-    border-radius: var(--indicator-radius, calc(62.5rem * var(--mantine-scale)));
+    border-radius: var(--indicator-radius, 1000rem);
     z-index: -1;
   }
 
@@ -3842,7 +3824,7 @@ fieldset:disabled .m_d3ea56bb,
   }
 
 .m_760d1fb1:where([data-with-border]) {
-    border: calc(0.125rem * var(--mantine-scale)) solid var(--mantine-color-body);
+    border: 2px solid var(--mantine-color-body);
   }
 
 .m_760d1fb1[data-processing]::before {
@@ -4104,7 +4086,7 @@ fieldset:disabled .m_d3ea56bb,
   padding-inline: 0.8em;
   display: inline-flex;
   align-items: center;
-  border-radius: var(--pill-radius, calc(62.5rem * var(--mantine-scale)));
+  border-radius: var(--pill-radius, 1000rem);
   line-height: 1;
   white-space: nowrap;
   user-select: none;
@@ -4252,7 +4234,7 @@ fieldset:disabled .m_d3ea56bb,
   display: flex;
   align-items: center;
   width: 100%;
-  padding: calc(0.5rem * var(--mantine-scale)) var(--mantine-spacing-sm);
+  padding: 8px var(--mantine-spacing-sm);
   user-select: none;
 }
 
@@ -4409,11 +4391,11 @@ fieldset:disabled .m_d3ea56bb,
     }
 
   :where([data-mantine-color-scheme='light']) .m_a513464:where([data-with-border]) {
-      border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-gray-3);
+      border: 1px solid var(--mantine-color-gray-3);
 }
 
   :where([data-mantine-color-scheme='dark']) .m_a513464:where([data-with-border]) {
-      border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-dark-4);
+      border: 1px solid var(--mantine-color-dark-4);
 }
 
 .m_a4ceffb {
@@ -4524,7 +4506,7 @@ fieldset:disabled .m_d3ea56bb,
 }
 
 .m_80b4b171 {
-  --control-border: calc(0.0625rem * var(--mantine-scale)) solid var(--input-bd);
+  --control-border: 1px solid var(--input-bd);
   --control-radius: calc(var(--input-radius) - calc(0.0625rem * var(--mantine-scale)));
 
   flex: 0 0 50%;
@@ -4584,7 +4566,7 @@ fieldset:disabled .m_d3ea56bb,
   }
 
 .m_80b4b171:last-of-type {
-    border-top: calc(0.0625rem * var(--mantine-scale)) solid var(--input-bd);
+    border-top: 1 solid var(--input-bd);
     border-radius: 0;
     border-end-end-radius: var(--control-radius);
   }
@@ -5026,7 +5008,7 @@ fieldset:disabled .m_d3ea56bb,
 }
 
 .m_211007ba:focus-visible + label {
-    outline: calc(0.125rem * var(--mantine-scale)) solid var(--mantine-primary-color-filled);
+    outline: 2px solid var(--mantine-primary-color-filled);
     outline-offset: calc(0.125rem * var(--mantine-scale));
   }
 
@@ -5136,8 +5118,8 @@ fieldset:disabled .m_d3ea56bb,
   width: auto;
   border-radius: var(--sc-radius, var(--mantine-radius-default));
   overflow: hidden;
-  padding: 4px;
-} /* px required for correct indicator calculations */
+  padding: calc(0.25rem * var(--mantine-scale));
+}
 
   .m_cf365364:where([data-full-width]) {
     display: flex;
@@ -5302,11 +5284,11 @@ fieldset:disabled .m_1738fcb2,
 }
 
 .m_1714d588[data-focus-ring='auto']:focus:focus-visible + .m_1738fcb2 {
-        --segmented-control-outline: calc(0.125rem * var(--mantine-scale)) solid var(--mantine-color-blue-filled);
+        --segmented-control-outline: 2px solid var(--mantine-color-blue-filled);
       }
 
 .m_1714d588[data-focus-ring='always']:focus + .m_1738fcb2 {
-        --segmented-control-outline: calc(0.125rem * var(--mantine-scale)) solid var(--mantine-color-blue-filled);
+        --segmented-control-outline: 2px solid var(--mantine-color-blue-filled);
       }
 
 .m_69686b9b {
@@ -5950,7 +5932,7 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
   position: relative;
   border-radius: var(--switch-radius);
   background-color: var(--switch-bg);
-  border: calc(0.0625rem * var(--mantine-scale)) solid var(--switch-bd);
+  border: 1px solid var(--switch-bd);
   height: var(--switch-height);
   min-width: var(--switch-width);
   margin: 0;
@@ -5970,7 +5952,7 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
 }
 
 .m_926b4011:focus-visible + .m_9307d992 {
-    outline: calc(0.125rem * var(--mantine-scale)) solid var(--mantine-primary-color-filled);
+    outline: 2px solid var(--mantine-primary-color-filled);
     outline-offset: calc(0.125rem * var(--mantine-scale));
   }
 
@@ -6017,7 +5999,7 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
   background-color: var(--switch-thumb-bg, var(--mantine-color-white));
   height: var(--switch-thumb-size);
   width: var(--switch-thumb-size);
-  border: calc(0.0625rem * var(--mantine-scale)) solid var(--switch-thumb-bd);
+  border: 1px solid var(--switch-thumb-bd);
   inset-inline-start: var(--switch-thumb-start, var(--switch-track-label-padding));
   transition: inset-inline-start 150ms ease;
 }
@@ -6085,7 +6067,7 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
 }
 
   .m_b23fa0ef:where([data-with-table-border]) {
-    border: calc(0.0625rem * var(--mantine-scale)) solid var(--table-border-color);
+    border: 1px solid var(--table-border-color);
   }
 
 .m_4e7aa4f3 {
@@ -6114,7 +6096,7 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
 }
 
 .m_4e7aa4fd:where([data-with-row-border]) {
-    border-bottom: calc(0.0625rem * var(--mantine-scale)) solid var(--table-border-color);
+    border-bottom: 1px solid var(--table-border-color);
   }
 
 .m_4e7aa4ef,
@@ -6123,7 +6105,7 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
 }
 
 .m_4e7aa4ef:where([data-with-column-border]:not(:last-child)), .m_4e7aa4f3:where([data-with-column-border]:not(:last-child)) {
-    border-inline-end: calc(0.0625rem * var(--mantine-scale)) solid var(--table-border-color);
+    border-inline-end: 1px solid var(--table-border-color);
   }
 
 .m_b2404537 :where(tr):where([data-with-row-border]:last-of-type) {
@@ -6181,7 +6163,7 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
   --tabs-panel-grow: unset;
   --tabs-display: block;
   --tabs-flex-direction: row;
-  --tabs-list-border-width: 0rem;
+  --tabs-list-border-width: 0;
   --tabs-list-border-size: 0 0 var(--tabs-list-border-width) 0;
   --tabs-list-gap: unset;
 
@@ -6593,7 +6575,7 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
   border-radius: var(--ti-radius, var(--mantine-radius-default));
   background: var(--ti-bg, var(--mantine-primary-color-filled));
   color: var(--ti-color, var(--mantine-color-white));
-  border: var(--ti-bd, calc(0.0625rem * var(--mantine-scale)) solid transparent);
+  border: var(--ti-bd, 1px solid transparent);
 }
 
 .m_43657ece {
@@ -6787,6 +6769,43 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
     -webkit-box-orient: vertical;
   }
 
+.m_f698e191 {
+  --level-offset: var(--mantine-spacing-lg);
+  margin: 0;
+  padding: 0;
+  user-select: none;
+}
+
+.m_75f3ecf {
+  margin: 0;
+  padding: 0;
+}
+
+.m_f6970eb1 {
+  cursor: pointer;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  outline: 0;
+}
+
+.m_f6970eb1:focus-visible > .m_dc283425 {
+      outline: 2px solid var(--mantine-primary-color-filled);
+      outline-offset: calc(0.125rem * var(--mantine-scale));
+    }
+
+.m_dc283425 {
+  padding-inline-start: var(--label-offset);
+}
+
+:where([data-mantine-color-scheme='light']) .m_dc283425:where([data-selected]) {
+      background-color: var(--mantine-color-gray-1);
+}
+
+:where([data-mantine-color-scheme='dark']) .m_dc283425:where([data-selected]) {
+      background-color: var(--mantine-color-dark-5);
+}
+
 .m_d6493fad :first-child {
     margin-top: 0;
   }