@mantine/core 7.7.1 → 7.8.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));
   }
 
@@ -681,8 +681,8 @@ body {
     height: var(--scrollarea-scrollbar-size);
     flex-direction: column;
     bottom: 0;
-    inset-inline-end: 0;
-    inset-inline-start: var(--sa-corner-height);
+    inset-inline-start: 0;
+    inset-inline-end: var(--sa-corner-width);
   }
 
 .m_d8b5e363 {
@@ -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;
 }
 
@@ -1123,22 +1123,28 @@ body {
     color: var(--mantine-color-dark-1);
 }
 
+  .m_86a44da5[data-disabled],
+  .m_86a44da5:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
 @media (hover: hover) {
-    :where([data-mantine-color-scheme='light']) .m_220c80f2:hover {
+    :where([data-mantine-color-scheme='light']) .m_220c80f2:not([data-disabled], :disabled):hover {
       background-color: var(--mantine-color-gray-0);
   }
 
-    :where([data-mantine-color-scheme='dark']) .m_220c80f2:hover {
+    :where([data-mantine-color-scheme='dark']) .m_220c80f2:not([data-disabled], :disabled):hover {
       background-color: var(--mantine-color-dark-6);
   }
 }
 
 @media (hover: none) {
-    :where([data-mantine-color-scheme='light']) .m_220c80f2:active {
+    :where([data-mantine-color-scheme='light']) .m_220c80f2:not([data-disabled], :disabled):active {
       background-color: var(--mantine-color-gray-0);
   }
 
-    :where([data-mantine-color-scheme='dark']) .m_220c80f2:active {
+    :where([data-mantine-color-scheme='dark']) .m_220c80f2:not([data-disabled], :disabled):active {
       background-color: var(--mantine-color-dark-6);
   }
 }
@@ -1375,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);
@@ -1668,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;
 }
 
@@ -1913,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);
@@ -1937,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;
   }
 
@@ -1961,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 {
@@ -1976,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;
 }
@@ -1997,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 {
@@ -2010,18 +2018,19 @@ 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 {
-  bottom: env(safe-area-inset-bottom);
-  height: var(--app-shell-footer-height);
+  bottom: 0;
+  height: calc(var(--app-shell-footer-height) + env(safe-area-inset-bottom));
+  padding-bottom: env(safe-area-inset-bottom);
   transform: var(--app-shell-footer-transform);
   z-index: var(--app-shell-footer-z-index);
 }
 
 .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 {
@@ -2489,7 +2498,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);
   }
 
@@ -2639,7 +2648,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;
@@ -3111,7 +3120,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)));
@@ -3143,12 +3152,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) {
@@ -3269,14 +3278,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;
@@ -3428,8 +3437,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);
@@ -3470,11 +3479,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 {
@@ -3502,11 +3511,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 {
@@ -3810,7 +3819,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;
@@ -3826,7 +3835,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;
   }
 
@@ -3835,7 +3844,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 {
@@ -4097,7 +4106,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;
@@ -4245,7 +4254,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;
 }
 
@@ -4402,11 +4411,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 {
@@ -4517,7 +4526,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%;
@@ -4577,7 +4586,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);
   }
@@ -5019,7 +5028,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));
   }
 
@@ -5129,8 +5138,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;
@@ -5295,11 +5304,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 {
@@ -5943,7 +5952,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;
@@ -5963,7 +5972,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));
   }
 
@@ -6010,7 +6019,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;
 }
@@ -6078,7 +6087,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 {
@@ -6107,7 +6116,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,
@@ -6116,7 +6125,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) {
@@ -6586,7 +6595,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 {