@mantine/core 9.0.0-alpha.4 → 9.0.0-alpha.6

package/styles.css

@@ -2695,7 +2695,32 @@ fieldset:disabled .m_8ee546b8,
   padding-inline-end: var(--label-offset-end);
 }
 
-.m_bf2d988c {
+.m_26775b0a {
+  --card-radius: var(--mantine-radius-default);
+
+  display: block;
+  width: 100%;
+  border-radius: var(--card-radius);
+  cursor: pointer;
+}
+
+  .m_26775b0a :where(*) {
+    cursor: inherit;
+  }
+
+  .m_26775b0a:where([data-with-border]) {
+    border: calc(0.0625rem * var(--mantine-scale)) solid transparent;
+  }
+
+  :where([data-mantine-color-scheme='light']) .m_26775b0a:where([data-with-border]) {
+      border-color: var(--mantine-color-gray-3);
+}
+
+  :where([data-mantine-color-scheme='dark']) .m_26775b0a:where([data-with-border]) {
+      border-color: var(--mantine-color-dark-4);
+}
+
+.m_5e5256ee {
   --checkbox-size-xs: calc(1rem * var(--mantine-scale));
   --checkbox-size-sm: calc(1.25rem * var(--mantine-scale));
   --checkbox-size-md: calc(1.5rem * var(--mantine-scale));
@@ -2706,132 +2731,94 @@ fieldset:disabled .m_8ee546b8,
   --checkbox-color: var(--mantine-primary-color-filled);
 }
 
-  .m_bf2d988c:where([data-variant='filled']) {
+  .m_5e5256ee:where([data-variant='filled']) {
     --checkbox-icon-color: var(--mantine-color-white);
   }
 
-  .m_bf2d988c:where([data-variant='outline']) {
+  .m_5e5256ee:where([data-variant='outline']) {
     --checkbox-icon-color: var(--checkbox-color);
   }
 
-.m_26062bec {
-  position: relative;
-  width: var(--checkbox-size);
-  height: var(--checkbox-size);
-  order: 1;
-}
-
-.m_26062bec:where([data-label-position='left']) {
-    order: 2;
-  }
+  .m_5e5256ee {
 
-.m_26063560 {
-  appearance: none;
+  position: relative;
   border: calc(0.0625rem * var(--mantine-scale)) solid transparent;
   width: var(--checkbox-size);
+  min-width: var(--checkbox-size);
   height: var(--checkbox-size);
+  min-height: var(--checkbox-size);
   border-radius: var(--checkbox-radius, var(--mantine-radius-default));
-  padding: 0;
-  display: block;
-  margin: 0;
   transition:
     border-color 100ms ease,
     background-color 100ms ease;
   cursor: var(--mantine-cursor-type);
   -webkit-tap-highlight-color: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-:where([data-mantine-color-scheme='light']) .m_26063560 {
+  :where([data-mantine-color-scheme='light']) .m_5e5256ee {
     background-color: var(--mantine-color-white);
     border-color: var(--mantine-color-gray-4);
 }
 
-:where([data-mantine-color-scheme='dark']) .m_26063560 {
+  :where([data-mantine-color-scheme='dark']) .m_5e5256ee {
     background-color: var(--mantine-color-dark-6);
     border-color: var(--mantine-color-dark-4);
 }
 
-.m_26063560:where([data-with-error-styles][data-error]) {
-    border-color: var(--mantine-color-error);
-  }
-
-.m_26063560[data-indeterminate],
-  .m_26063560:checked {
+  .m_5e5256ee[data-indeterminate],
+  .m_5e5256ee[data-checked] {
     background-color: var(--checkbox-color);
     border-color: var(--checkbox-color);
   }
 
-.m_26063560[data-indeterminate] + .m_bf295423, .m_26063560:checked + .m_bf295423 {
+  .m_5e5256ee[data-indeterminate] > .m_1b1c543a, .m_5e5256ee[data-checked] > .m_1b1c543a {
       opacity: 1;
       transform: none;
+      color: var(--checkbox-icon-color);
     }
 
-.m_26063560:disabled {
+  .m_5e5256ee[data-disabled] {
     cursor: not-allowed;
     border-color: var(--mantine-color-disabled-border);
     background-color: var(--mantine-color-disabled);
   }
 
-.m_26063560:disabled + .m_bf295423 {
-      color: var(--mantine-color-disabled-color);
-    }
+  [data-mantine-color-scheme='light'] .m_5e5256ee[data-disabled][data-checked] > .m_1b1c543a {
+        color: var(--mantine-color-gray-5);
+}
 
-.m_215c4542 + .m_bf295423 {
-    color: var(--checkbox-color);
-  }
+  [data-mantine-color-scheme='dark'] .m_5e5256ee[data-disabled][data-checked] > .m_1b1c543a {
+        color: var(--mantine-color-dark-3);
+}
 
-.m_215c4542[data-indeterminate]:not(:disabled),
-  .m_215c4542:checked:not(:disabled) {
+.m_76e20374[data-indeterminate]:not([data-disabled]),
+  .m_76e20374[data-checked]:not([data-disabled]) {
     background-color: transparent;
     border-color: var(--checkbox-color);
   }
 
-.m_215c4542[data-indeterminate]:not(:disabled) + .m_bf295423, .m_215c4542:checked:not(:disabled) + .m_bf295423 {
+.m_76e20374[data-indeterminate]:not([data-disabled]) > .m_1b1c543a, .m_76e20374[data-checked]:not([data-disabled]) > .m_1b1c543a {
       color: var(--checkbox-icon-color);
       opacity: 1;
       transform: none;
     }
 
-.m_bf295423 {
-  position: absolute;
-  inset: 0;
+.m_1b1c543a {
+  display: block;
   width: 60%;
-  margin: auto;
-  color: var(--checkbox-icon-color);
+  color: transparent;
   pointer-events: none;
   transform: translateY(calc(0.3125rem * var(--mantine-scale))) scale(0.5);
-  opacity: 0;
+  opacity: 1;
   transition:
     transform 100ms ease,
     opacity 100ms ease;
 }
 
-.m_26775b0a {
-  --card-radius: var(--mantine-radius-default);
-
-  display: block;
-  width: 100%;
-  border-radius: var(--card-radius);
-  cursor: pointer;
-}
-
-  .m_26775b0a :where(*) {
-    cursor: inherit;
-  }
-
-  .m_26775b0a:where([data-with-border]) {
-    border: calc(0.0625rem * var(--mantine-scale)) solid transparent;
-  }
-
-  :where([data-mantine-color-scheme='light']) .m_26775b0a:where([data-with-border]) {
-      border-color: var(--mantine-color-gray-3);
-}
-
-  :where([data-mantine-color-scheme='dark']) .m_26775b0a:where([data-with-border]) {
-      border-color: var(--mantine-color-dark-4);
-}
-
-.m_5e5256ee {
+.m_bf2d988c {
   --checkbox-size-xs: calc(1rem * var(--mantine-scale));
   --checkbox-size-sm: calc(1.25rem * var(--mantine-scale));
   --checkbox-size-md: calc(1.5rem * var(--mantine-scale));
@@ -2842,88 +2829,101 @@ fieldset:disabled .m_8ee546b8,
   --checkbox-color: var(--mantine-primary-color-filled);
 }
 
-  .m_5e5256ee:where([data-variant='filled']) {
+  .m_bf2d988c:where([data-variant='filled']) {
     --checkbox-icon-color: var(--mantine-color-white);
   }
 
-  .m_5e5256ee:where([data-variant='outline']) {
+  .m_bf2d988c:where([data-variant='outline']) {
     --checkbox-icon-color: var(--checkbox-color);
   }
 
-  .m_5e5256ee {
-
+.m_26062bec {
   position: relative;
+  width: var(--checkbox-size);
+  height: var(--checkbox-size);
+  order: 1;
+}
+
+.m_26062bec:where([data-label-position='left']) {
+    order: 2;
+  }
+
+.m_26063560 {
+  appearance: none;
   border: calc(0.0625rem * var(--mantine-scale)) solid transparent;
   width: var(--checkbox-size);
-  min-width: var(--checkbox-size);
   height: var(--checkbox-size);
-  min-height: var(--checkbox-size);
   border-radius: var(--checkbox-radius, var(--mantine-radius-default));
+  padding: 0;
+  display: block;
+  margin: 0;
   transition:
     border-color 100ms ease,
     background-color 100ms ease;
   cursor: var(--mantine-cursor-type);
   -webkit-tap-highlight-color: transparent;
-  display: flex;
-  align-items: center;
-  justify-content: center;
 }
 
-  :where([data-mantine-color-scheme='light']) .m_5e5256ee {
+:where([data-mantine-color-scheme='light']) .m_26063560 {
     background-color: var(--mantine-color-white);
     border-color: var(--mantine-color-gray-4);
 }
 
-  :where([data-mantine-color-scheme='dark']) .m_5e5256ee {
+:where([data-mantine-color-scheme='dark']) .m_26063560 {
     background-color: var(--mantine-color-dark-6);
     border-color: var(--mantine-color-dark-4);
 }
 
-  .m_5e5256ee[data-indeterminate],
-  .m_5e5256ee[data-checked] {
+.m_26063560:where([data-with-error-styles][data-error]) {
+    border-color: var(--mantine-color-error);
+  }
+
+.m_26063560[data-indeterminate],
+  .m_26063560:checked {
     background-color: var(--checkbox-color);
     border-color: var(--checkbox-color);
   }
 
-  .m_5e5256ee[data-indeterminate] > .m_1b1c543a, .m_5e5256ee[data-checked] > .m_1b1c543a {
+.m_26063560[data-indeterminate] + .m_bf295423, .m_26063560:checked + .m_bf295423 {
       opacity: 1;
       transform: none;
-      color: var(--checkbox-icon-color);
     }
 
-  .m_5e5256ee[data-disabled] {
+.m_26063560:disabled {
     cursor: not-allowed;
     border-color: var(--mantine-color-disabled-border);
     background-color: var(--mantine-color-disabled);
   }
 
-  [data-mantine-color-scheme='light'] .m_5e5256ee[data-disabled][data-checked] > .m_1b1c543a {
-        color: var(--mantine-color-gray-5);
-}
+.m_26063560:disabled + .m_bf295423 {
+      color: var(--mantine-color-disabled-color);
+    }
 
-  [data-mantine-color-scheme='dark'] .m_5e5256ee[data-disabled][data-checked] > .m_1b1c543a {
-        color: var(--mantine-color-dark-3);
-}
+.m_215c4542 + .m_bf295423 {
+    color: var(--checkbox-color);
+  }
 
-.m_76e20374[data-indeterminate]:not([data-disabled]),
-  .m_76e20374[data-checked]:not([data-disabled]) {
+.m_215c4542[data-indeterminate]:not(:disabled),
+  .m_215c4542:checked:not(:disabled) {
     background-color: transparent;
     border-color: var(--checkbox-color);
   }
 
-.m_76e20374[data-indeterminate]:not([data-disabled]) > .m_1b1c543a, .m_76e20374[data-checked]:not([data-disabled]) > .m_1b1c543a {
+.m_215c4542[data-indeterminate]:not(:disabled) + .m_bf295423, .m_215c4542:checked:not(:disabled) + .m_bf295423 {
       color: var(--checkbox-icon-color);
       opacity: 1;
       transform: none;
     }
 
-.m_1b1c543a {
-  display: block;
+.m_bf295423 {
+  position: absolute;
+  inset: 0;
   width: 60%;
-  color: transparent;
+  margin: auto;
+  color: var(--checkbox-icon-color);
   pointer-events: none;
   transform: translateY(calc(0.3125rem * var(--mantine-scale))) scale(0.5);
-  opacity: 1;
+  opacity: 0;
   transition:
     transform 100ms ease,
     opacity 100ms ease;
@@ -5671,116 +5671,6 @@ fieldset:disabled .m_8ee546b8,
     writing-mode: vertical-rl;
   }
 
-.m_f3f1af94 {
-  --radio-size-xs: calc(1rem * var(--mantine-scale));
-  --radio-size-sm: calc(1.25rem * var(--mantine-scale));
-  --radio-size-md: calc(1.5rem * var(--mantine-scale));
-  --radio-size-lg: calc(1.875rem * var(--mantine-scale));
-  --radio-size-xl: calc(2.25rem * var(--mantine-scale));
-  --radio-size: var(--radio-size-sm);
-
-  --radio-icon-size-xs: calc(0.375rem * var(--mantine-scale));
-  --radio-icon-size-sm: calc(0.5rem * var(--mantine-scale));
-  --radio-icon-size-md: calc(0.625rem * var(--mantine-scale));
-  --radio-icon-size-lg: calc(0.875rem * var(--mantine-scale));
-  --radio-icon-size-xl: calc(1rem * var(--mantine-scale));
-  --radio-icon-size: var(--radio-icon-size-sm);
-  --radio-icon-color: var(--mantine-color-white);
-}
-
-.m_89c4f5e4 {
-  position: relative;
-  width: var(--radio-size);
-  height: var(--radio-size);
-  order: 1;
-}
-
-.m_89c4f5e4:where([data-label-position='left']) {
-    order: 2;
-  }
-
-.m_f3ed6b2b {
-  color: var(--radio-icon-color);
-  opacity: var(--radio-icon-opacity, 0);
-  transform: var(--radio-icon-transform, scale(0.2) translateY(calc(0.625rem * var(--mantine-scale))));
-  transition:
-    opacity 100ms ease,
-    transform 200ms ease;
-  pointer-events: none;
-  width: var(--radio-icon-size);
-  height: var(--radio-icon-size);
-  position: absolute;
-  top: calc(50% - var(--radio-icon-size) / 2);
-  left: calc(50% - var(--radio-icon-size) / 2);
-}
-
-.m_8a3dbb89 {
-  border: calc(0.0625rem * var(--mantine-scale)) solid;
-  position: relative;
-  appearance: none;
-  width: var(--radio-size);
-  height: var(--radio-size);
-  border-radius: var(--radio-radius, var(--radio-size));
-  margin: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition-property: background-color, border-color;
-  transition-timing-function: ease;
-  transition-duration: 100ms;
-  cursor: var(--mantine-cursor-type);
-  -webkit-tap-highlight-color: transparent;
-}
-
-:where([data-mantine-color-scheme='light']) .m_8a3dbb89 {
-    background-color: var(--mantine-color-white);
-    border-color: var(--mantine-color-gray-4);
-}
-
-:where([data-mantine-color-scheme='dark']) .m_8a3dbb89 {
-    background-color: var(--mantine-color-dark-6);
-    border-color: var(--mantine-color-dark-4);
-}
-
-.m_8a3dbb89:checked {
-    background-color: var(--radio-color, var(--mantine-primary-color-filled));
-    border-color: var(--radio-color, var(--mantine-primary-color-filled));
-  }
-
-.m_8a3dbb89:checked + .m_f3ed6b2b {
-      --radio-icon-opacity: 1;
-      --radio-icon-transform: scale(1);
-    }
-
-.m_8a3dbb89:disabled {
-    cursor: not-allowed;
-    background-color: var(--mantine-color-disabled);
-    border-color: var(--mantine-color-disabled-border);
-  }
-
-.m_8a3dbb89:disabled + .m_f3ed6b2b {
-      --radio-icon-color: var(--mantine-color-disabled-color);
-    }
-
-.m_8a3dbb89:where([data-with-error-styles][data-error]) {
-    border-color: var(--mantine-color-error);
-  }
-
-.m_1bfe9d39 + .m_f3ed6b2b {
-    --radio-icon-color: var(--radio-color);
-  }
-
-.m_1bfe9d39:checked:not(:disabled) {
-    background-color: transparent;
-    border-color: var(--radio-color);
-  }
-
-.m_1bfe9d39:checked:not(:disabled) + .m_f3ed6b2b {
-      --radio-icon-color: var(--radio-color);
-      --radio-icon-opacity: 1;
-      --radio-icon-transform: none;
-    }
-
 .m_9dc8ae12 {
   --card-radius: var(--mantine-radius-default);
 
@@ -5896,6 +5786,116 @@ fieldset:disabled .m_8ee546b8,
     opacity 100ms ease;
 }
 
+.m_f3f1af94 {
+  --radio-size-xs: calc(1rem * var(--mantine-scale));
+  --radio-size-sm: calc(1.25rem * var(--mantine-scale));
+  --radio-size-md: calc(1.5rem * var(--mantine-scale));
+  --radio-size-lg: calc(1.875rem * var(--mantine-scale));
+  --radio-size-xl: calc(2.25rem * var(--mantine-scale));
+  --radio-size: var(--radio-size-sm);
+
+  --radio-icon-size-xs: calc(0.375rem * var(--mantine-scale));
+  --radio-icon-size-sm: calc(0.5rem * var(--mantine-scale));
+  --radio-icon-size-md: calc(0.625rem * var(--mantine-scale));
+  --radio-icon-size-lg: calc(0.875rem * var(--mantine-scale));
+  --radio-icon-size-xl: calc(1rem * var(--mantine-scale));
+  --radio-icon-size: var(--radio-icon-size-sm);
+  --radio-icon-color: var(--mantine-color-white);
+}
+
+.m_89c4f5e4 {
+  position: relative;
+  width: var(--radio-size);
+  height: var(--radio-size);
+  order: 1;
+}
+
+.m_89c4f5e4:where([data-label-position='left']) {
+    order: 2;
+  }
+
+.m_f3ed6b2b {
+  color: var(--radio-icon-color);
+  opacity: var(--radio-icon-opacity, 0);
+  transform: var(--radio-icon-transform, scale(0.2) translateY(calc(0.625rem * var(--mantine-scale))));
+  transition:
+    opacity 100ms ease,
+    transform 200ms ease;
+  pointer-events: none;
+  width: var(--radio-icon-size);
+  height: var(--radio-icon-size);
+  position: absolute;
+  top: calc(50% - var(--radio-icon-size) / 2);
+  left: calc(50% - var(--radio-icon-size) / 2);
+}
+
+.m_8a3dbb89 {
+  border: calc(0.0625rem * var(--mantine-scale)) solid;
+  position: relative;
+  appearance: none;
+  width: var(--radio-size);
+  height: var(--radio-size);
+  border-radius: var(--radio-radius, var(--radio-size));
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition-property: background-color, border-color;
+  transition-timing-function: ease;
+  transition-duration: 100ms;
+  cursor: var(--mantine-cursor-type);
+  -webkit-tap-highlight-color: transparent;
+}
+
+:where([data-mantine-color-scheme='light']) .m_8a3dbb89 {
+    background-color: var(--mantine-color-white);
+    border-color: var(--mantine-color-gray-4);
+}
+
+:where([data-mantine-color-scheme='dark']) .m_8a3dbb89 {
+    background-color: var(--mantine-color-dark-6);
+    border-color: var(--mantine-color-dark-4);
+}
+
+.m_8a3dbb89:checked {
+    background-color: var(--radio-color, var(--mantine-primary-color-filled));
+    border-color: var(--radio-color, var(--mantine-primary-color-filled));
+  }
+
+.m_8a3dbb89:checked + .m_f3ed6b2b {
+      --radio-icon-opacity: 1;
+      --radio-icon-transform: scale(1);
+    }
+
+.m_8a3dbb89:disabled {
+    cursor: not-allowed;
+    background-color: var(--mantine-color-disabled);
+    border-color: var(--mantine-color-disabled-border);
+  }
+
+.m_8a3dbb89:disabled + .m_f3ed6b2b {
+      --radio-icon-color: var(--mantine-color-disabled-color);
+    }
+
+.m_8a3dbb89:where([data-with-error-styles][data-error]) {
+    border-color: var(--mantine-color-error);
+  }
+
+.m_1bfe9d39 + .m_f3ed6b2b {
+    --radio-icon-color: var(--radio-color);
+  }
+
+.m_1bfe9d39:checked:not(:disabled) {
+    background-color: transparent;
+    border-color: var(--radio-color);
+  }
+
+.m_1bfe9d39:checked:not(:disabled) + .m_f3ed6b2b {
+      --radio-icon-color: var(--radio-color);
+      --radio-icon-opacity: 1;
+      --radio-icon-transform: none;
+    }
+
 .m_f8d312f2 {
   --rating-size-xs: calc(0.875rem * var(--mantine-scale));
   --rating-size-sm: calc(1.125rem * var(--mantine-scale));
@@ -6062,6 +6062,7 @@ fieldset:disabled .m_8ee546b8,
   align-items: center;
   position: relative;
   overflow: hidden;
+  max-width: 100%;
 }
 
 .m_ee44dece {