@mantine/core 8.2.8 → 8.3.0

package/styles/Combobox.layer.css

@@ -33,7 +33,7 @@
   background-color: transparent;
   color: inherit;
   cursor: pointer;
-  word-break: break-word;
+  overflow-wrap: break-word;
 }
 
 .m_92253aa5:where([data-combobox-selected]) {

package/styles/Input.css

@@ -240,6 +240,10 @@
     --section-border-radius: var(--right-section-border-radius);
   }
 
+.m_82577fc2[data-position='right']:has([data-combined-clear-section]) {
+      --section-size: auto;
+    }
+
 .m_82577fc2[data-position='left'] {
     --section-pointer-events: var(--input-left-section-pointer-events);
     --section-start: var(--left-section-start);
@@ -263,7 +267,7 @@
 .m_8fdc1311 {
   display: inline-block;
   font-weight: 500;
-  word-break: break-word;
+  overflow-wrap: break-word;
   cursor: default;
   -webkit-tap-highlight-color: transparent;
   font-size: var(--input-label-size, var(--mantine-font-size-sm));

package/styles/Input.layer.css

@@ -240,6 +240,10 @@
     --section-border-radius: var(--right-section-border-radius);
   }
 
+.m_82577fc2[data-position='right']:has([data-combined-clear-section]) {
+      --section-size: auto;
+    }
+
 .m_82577fc2[data-position='left'] {
     --section-pointer-events: var(--input-left-section-pointer-events);
     --section-start: var(--left-section-start);
@@ -263,7 +267,7 @@
 .m_8fdc1311 {
   display: inline-block;
   font-weight: 500;
-  word-break: break-word;
+  overflow-wrap: break-word;
   cursor: default;
   -webkit-tap-highlight-color: transparent;
   font-size: var(--input-label-size, var(--mantine-font-size-sm));

package/styles/Progress.css

@@ -8,6 +8,16 @@
   }
 }
 
+@keyframes m_e0fb7a86 {
+  0% {
+    background-position: 0 0;
+  }
+
+  100% {
+    background-position: 0 40px;
+  }
+}
+
 .m_db6d6462 {
   --progress-radius: var(--mantine-radius-default);
   --progress-size: var(--progress-size-md);
@@ -33,10 +43,16 @@
     background-color: var(--mantine-color-dark-4);
 }
 
+.m_db6d6462:where([data-orientation='vertical']) {
+    height: auto;
+    width: var(--progress-size);
+    flex-direction: column-reverse;
+  }
+
 .m_2242eb65 {
   background-color: var(--progress-section-color);
   height: 100%;
-  width: var(--progress-section-width);
+  width: var(--progress-section-size);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -74,6 +90,41 @@
     border-end-start-radius: var(--progress-radius);
   }
 
+.m_db6d6462:where([data-orientation='vertical']) .m_2242eb65 {
+    width: 100%;
+    height: var(--progress-section-size);
+    transition: height var(--progress-transition-duration, 100ms) ease;
+  }
+
+.m_db6d6462:where([data-orientation='vertical']) .m_2242eb65:where([data-striped]) {
+      background-image: linear-gradient(
+        135deg,
+        rgba(255, 255, 255, 0.15) 25%,
+        transparent 25%,
+        transparent 50%,
+        rgba(255, 255, 255, 0.15) 50%,
+        rgba(255, 255, 255, 0.15) 75%,
+        transparent 75%,
+        transparent
+      );
+    }
+
+.m_db6d6462:where([data-orientation='vertical']) .m_2242eb65:where([data-animated]) {
+      animation: m_e0fb7a86 1s linear infinite;
+    }
+
+.m_db6d6462:where([data-orientation='vertical']) .m_2242eb65:where(:last-of-type) {
+      border-radius: 0;
+      border-start-start-radius: var(--progress-radius);
+      border-start-end-radius: var(--progress-radius);
+    }
+
+.m_db6d6462:where([data-orientation='vertical']) .m_2242eb65:where(:first-of-type) {
+      border-radius: 0;
+      border-end-start-radius: var(--progress-radius);
+      border-end-end-radius: var(--progress-radius);
+    }
+
 .m_91e40b74 {
   color: var(--progress-label-color, var(--mantine-color-white));
   font-weight: bold;
@@ -85,3 +136,7 @@
   line-height: 1;
   padding-inline: 4px;
 }
+
+.m_db6d6462:where([data-orientation='vertical']) .m_91e40b74 {
+    writing-mode: vertical-rl;
+  }

package/styles/Progress.layer.css

@@ -8,6 +8,16 @@
   }
 }
 
+@keyframes m_e0fb7a86 {
+  0% {
+    background-position: 0 0;
+  }
+
+  100% {
+    background-position: 0 40px;
+  }
+}
+
 .m_db6d6462 {
   --progress-radius: var(--mantine-radius-default);
   --progress-size: var(--progress-size-md);
@@ -33,10 +43,16 @@
     background-color: var(--mantine-color-dark-4);
 }
 
+.m_db6d6462:where([data-orientation='vertical']) {
+    height: auto;
+    width: var(--progress-size);
+    flex-direction: column-reverse;
+  }
+
 .m_2242eb65 {
   background-color: var(--progress-section-color);
   height: 100%;
-  width: var(--progress-section-width);
+  width: var(--progress-section-size);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -74,6 +90,41 @@
     border-end-start-radius: var(--progress-radius);
   }
 
+.m_db6d6462:where([data-orientation='vertical']) .m_2242eb65 {
+    width: 100%;
+    height: var(--progress-section-size);
+    transition: height var(--progress-transition-duration, 100ms) ease;
+  }
+
+.m_db6d6462:where([data-orientation='vertical']) .m_2242eb65:where([data-striped]) {
+      background-image: linear-gradient(
+        135deg,
+        rgba(255, 255, 255, 0.15) 25%,
+        transparent 25%,
+        transparent 50%,
+        rgba(255, 255, 255, 0.15) 50%,
+        rgba(255, 255, 255, 0.15) 75%,
+        transparent 75%,
+        transparent
+      );
+    }
+
+.m_db6d6462:where([data-orientation='vertical']) .m_2242eb65:where([data-animated]) {
+      animation: m_e0fb7a86 1s linear infinite;
+    }
+
+.m_db6d6462:where([data-orientation='vertical']) .m_2242eb65:where(:last-of-type) {
+      border-radius: 0;
+      border-start-start-radius: var(--progress-radius);
+      border-start-end-radius: var(--progress-radius);
+    }
+
+.m_db6d6462:where([data-orientation='vertical']) .m_2242eb65:where(:first-of-type) {
+      border-radius: 0;
+      border-end-start-radius: var(--progress-radius);
+      border-end-end-radius: var(--progress-radius);
+    }
+
 .m_91e40b74 {
   color: var(--progress-label-color, var(--mantine-color-white));
   font-weight: bold;
@@ -85,4 +136,8 @@
   line-height: 1;
   padding-inline: 4px;
 }
+
+.m_db6d6462:where([data-orientation='vertical']) .m_91e40b74 {
+    writing-mode: vertical-rl;
+  }
 }

package/styles/ScrollArea.css

@@ -23,36 +23,36 @@
   }
 
 .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='y']):where(
-        [data-offset-scrollbars='xy'],
-        [data-offset-scrollbars='y'],
-        [data-offset-scrollbars='present']
-      ):where([data-vertical-hidden]) {
+      [data-offset-scrollbars='xy'],
+      [data-offset-scrollbars='y'],
+      [data-offset-scrollbars='present']
+    ):where([data-vertical-hidden]) {
         padding-inline-end: 0;
         padding-inline-start: 0;
       }
 
 .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='y']):where(
-        [data-offset-scrollbars='xy'],
-        [data-offset-scrollbars='y'],
-        [data-offset-scrollbars='present']
-      ):not([data-vertical-hidden]) {
+      [data-offset-scrollbars='xy'],
+      [data-offset-scrollbars='y'],
+      [data-offset-scrollbars='present']
+    ):not([data-vertical-hidden]) {
         padding-inline-end: var(--scrollarea-scrollbar-size);
         padding-inline-start: unset;
       }
 
 .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='x']):where(
-        [data-offset-scrollbars='xy'],
-        [data-offset-scrollbars='x'],
-        [data-offset-scrollbars='present']
-      ):where([data-horizontal-hidden]) {
+      [data-offset-scrollbars='xy'],
+      [data-offset-scrollbars='x'],
+      [data-offset-scrollbars='present']
+    ):where([data-horizontal-hidden]) {
         padding-bottom: 0;
       }
 
 .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='x']):where(
-        [data-offset-scrollbars='xy'],
-        [data-offset-scrollbars='x'],
-        [data-offset-scrollbars='present']
-      ):not([data-horizontal-hidden]) {
+      [data-offset-scrollbars='xy'],
+      [data-offset-scrollbars='x'],
+      [data-offset-scrollbars='present']
+    ):not([data-horizontal-hidden]) {
         padding-bottom: var(--scrollarea-scrollbar-size);
       }
 

package/styles/ScrollArea.layer.css

@@ -23,36 +23,36 @@
   }
 
 .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='y']):where(
-        [data-offset-scrollbars='xy'],
-        [data-offset-scrollbars='y'],
-        [data-offset-scrollbars='present']
-      ):where([data-vertical-hidden]) {
+      [data-offset-scrollbars='xy'],
+      [data-offset-scrollbars='y'],
+      [data-offset-scrollbars='present']
+    ):where([data-vertical-hidden]) {
         padding-inline-end: 0;
         padding-inline-start: 0;
       }
 
 .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='y']):where(
-        [data-offset-scrollbars='xy'],
-        [data-offset-scrollbars='y'],
-        [data-offset-scrollbars='present']
-      ):not([data-vertical-hidden]) {
+      [data-offset-scrollbars='xy'],
+      [data-offset-scrollbars='y'],
+      [data-offset-scrollbars='present']
+    ):not([data-vertical-hidden]) {
         padding-inline-end: var(--scrollarea-scrollbar-size);
         padding-inline-start: unset;
       }
 
 .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='x']):where(
-        [data-offset-scrollbars='xy'],
-        [data-offset-scrollbars='x'],
-        [data-offset-scrollbars='present']
-      ):where([data-horizontal-hidden]) {
+      [data-offset-scrollbars='xy'],
+      [data-offset-scrollbars='x'],
+      [data-offset-scrollbars='present']
+    ):where([data-horizontal-hidden]) {
         padding-bottom: 0;
       }
 
 .m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='x']):where(
-        [data-offset-scrollbars='xy'],
-        [data-offset-scrollbars='x'],
-        [data-offset-scrollbars='present']
-      ):not([data-horizontal-hidden]) {
+      [data-offset-scrollbars='xy'],
+      [data-offset-scrollbars='x'],
+      [data-offset-scrollbars='present']
+    ):not([data-horizontal-hidden]) {
         padding-bottom: var(--scrollarea-scrollbar-size);
       }
 

package/styles/default-css-variables.css

@@ -12,12 +12,14 @@
   --mantine-color-white: #fff;
   --mantine-color-black: #000;
   --mantine-line-height: 1.55;
-  --mantine-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial,
-    sans-serif, Apple Color Emoji, Segoe UI Emoji;
-  --mantine-font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-    Liberation Mono, Courier New, monospace;
-  --mantine-font-family-headings: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica,
-    Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
+  --mantine-font-family:
+    -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif,
+    Apple Color Emoji, Segoe UI Emoji;
+  --mantine-font-family-monospace:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
+  --mantine-font-family-headings:
+    -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif,
+    Apple Color Emoji, Segoe UI Emoji;
   --mantine-heading-font-weight: 700;
   --mantine-heading-text-wrap: wrap;
   --mantine-radius-default: calc(0.25rem * var(--mantine-scale));
@@ -46,30 +48,35 @@
   --mantine-line-height-md: 1.55;
   --mantine-line-height-lg: 1.6;
   --mantine-line-height-xl: 1.65;
-  --mantine-shadow-xs: 0 calc(0.0625rem * var(--mantine-scale))
-      calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05),
+  --mantine-shadow-xs:
+    0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale))
+      rgba(0, 0, 0, 0.05),
     0 calc(0.0625rem * var(--mantine-scale)) calc(0.125rem * var(--mantine-scale))
       rgba(0, 0, 0, 0.1);
-  --mantine-shadow-sm: 0 calc(0.0625rem * var(--mantine-scale))
-      calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05),
+  --mantine-shadow-sm:
+    0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale))
+      rgba(0, 0, 0, 0.05),
     rgba(0, 0, 0, 0.05) 0 calc(0.625rem * var(--mantine-scale))
       calc(0.9375rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale)),
     rgba(0, 0, 0, 0.04) 0 calc(0.4375rem * var(--mantine-scale))
       calc(0.4375rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale));
-  --mantine-shadow-md: 0 calc(0.0625rem * var(--mantine-scale))
-      calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05),
+  --mantine-shadow-md:
+    0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale))
+      rgba(0, 0, 0, 0.05),
     rgba(0, 0, 0, 0.05) 0 calc(1.25rem * var(--mantine-scale))
       calc(1.5625rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale)),
     rgba(0, 0, 0, 0.04) 0 calc(0.625rem * var(--mantine-scale))
       calc(0.625rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale));
-  --mantine-shadow-lg: 0 calc(0.0625rem * var(--mantine-scale))
-      calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05),
+  --mantine-shadow-lg:
+    0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale))
+      rgba(0, 0, 0, 0.05),
     rgba(0, 0, 0, 0.05) 0 calc(1.75rem * var(--mantine-scale))
       calc(1.4375rem * var(--mantine-scale)) calc(-0.4375rem * var(--mantine-scale)),
     rgba(0, 0, 0, 0.04) 0 calc(0.75rem * var(--mantine-scale)) calc(0.75rem * var(--mantine-scale))
       calc(-0.4375rem * var(--mantine-scale));
-  --mantine-shadow-xl: 0 calc(0.0625rem * var(--mantine-scale))
-      calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05),
+  --mantine-shadow-xl:
+    0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale))
+      rgba(0, 0, 0, 0.05),
     rgba(0, 0, 0, 0.05) 0 calc(2.25rem * var(--mantine-scale)) calc(1.75rem * var(--mantine-scale))
       calc(-0.4375rem * var(--mantine-scale)),
     rgba(0, 0, 0, 0.04) 0 calc(1.0625rem * var(--mantine-scale))

package/styles/default-css-variables.layer.css

@@ -12,12 +12,14 @@
   --mantine-color-white: #fff;
   --mantine-color-black: #000;
   --mantine-line-height: 1.55;
-  --mantine-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial,
-    sans-serif, Apple Color Emoji, Segoe UI Emoji;
-  --mantine-font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-    Liberation Mono, Courier New, monospace;
-  --mantine-font-family-headings: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica,
-    Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
+  --mantine-font-family:
+    -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif,
+    Apple Color Emoji, Segoe UI Emoji;
+  --mantine-font-family-monospace:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
+  --mantine-font-family-headings:
+    -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif,
+    Apple Color Emoji, Segoe UI Emoji;
   --mantine-heading-font-weight: 700;
   --mantine-heading-text-wrap: wrap;
   --mantine-radius-default: calc(0.25rem * var(--mantine-scale));
@@ -46,30 +48,35 @@
   --mantine-line-height-md: 1.55;
   --mantine-line-height-lg: 1.6;
   --mantine-line-height-xl: 1.65;
-  --mantine-shadow-xs: 0 calc(0.0625rem * var(--mantine-scale))
-      calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05),
+  --mantine-shadow-xs:
+    0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale))
+      rgba(0, 0, 0, 0.05),
     0 calc(0.0625rem * var(--mantine-scale)) calc(0.125rem * var(--mantine-scale))
       rgba(0, 0, 0, 0.1);
-  --mantine-shadow-sm: 0 calc(0.0625rem * var(--mantine-scale))
-      calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05),
+  --mantine-shadow-sm:
+    0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale))
+      rgba(0, 0, 0, 0.05),
     rgba(0, 0, 0, 0.05) 0 calc(0.625rem * var(--mantine-scale))
       calc(0.9375rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale)),
     rgba(0, 0, 0, 0.04) 0 calc(0.4375rem * var(--mantine-scale))
       calc(0.4375rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale));
-  --mantine-shadow-md: 0 calc(0.0625rem * var(--mantine-scale))
-      calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05),
+  --mantine-shadow-md:
+    0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale))
+      rgba(0, 0, 0, 0.05),
     rgba(0, 0, 0, 0.05) 0 calc(1.25rem * var(--mantine-scale))
       calc(1.5625rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale)),
     rgba(0, 0, 0, 0.04) 0 calc(0.625rem * var(--mantine-scale))
       calc(0.625rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale));
-  --mantine-shadow-lg: 0 calc(0.0625rem * var(--mantine-scale))
-      calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05),
+  --mantine-shadow-lg:
+    0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale))
+      rgba(0, 0, 0, 0.05),
     rgba(0, 0, 0, 0.05) 0 calc(1.75rem * var(--mantine-scale))
       calc(1.4375rem * var(--mantine-scale)) calc(-0.4375rem * var(--mantine-scale)),
     rgba(0, 0, 0, 0.04) 0 calc(0.75rem * var(--mantine-scale)) calc(0.75rem * var(--mantine-scale))
       calc(-0.4375rem * var(--mantine-scale));
-  --mantine-shadow-xl: 0 calc(0.0625rem * var(--mantine-scale))
-      calc(0.1875rem * var(--mantine-scale)) rgba(0, 0, 0, 0.05),
+  --mantine-shadow-xl:
+    0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale))
+      rgba(0, 0, 0, 0.05),
     rgba(0, 0, 0, 0.05) 0 calc(2.25rem * var(--mantine-scale)) calc(1.75rem * var(--mantine-scale))
       calc(-0.4375rem * var(--mantine-scale)),
     rgba(0, 0, 0, 0.04) 0 calc(1.0625rem * var(--mantine-scale))