@mantine/core 8.3.3 → 8.3.4

package/styles/Slider.layer.css

@@ -0,0 +1,210 @@
+@layer mantine {.m_dd36362e {
+  --slider-size-xs: 4px;
+  --slider-size-sm: 6px;
+  --slider-size-md: 8px;
+  --slider-size-lg: 10px;
+  --slider-size-xl: 12px;
+
+  --slider-size: var(--slider-size-md);
+  --slider-radius: 1000px;
+  --slider-color: var(--mantine-primary-color-filled);
+  --slider-track-disabled-bg: var(--mantine-color-disabled);
+
+  -webkit-tap-highlight-color: transparent;
+  outline: none;
+  height: calc(var(--slider-size) * 2);
+  padding-inline: var(--slider-size);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  touch-action: none;
+  position: relative;
+}
+
+  [data-mantine-color-scheme='light'] .m_dd36362e {
+    --slider-track-bg: var(--mantine-color-gray-2);
+}
+
+  [data-mantine-color-scheme='dark'] .m_dd36362e {
+    --slider-track-bg: var(--mantine-color-dark-4);
+}
+
+.m_c9357328 {
+  position: absolute;
+  top: -36px;
+  font-size: var(--mantine-font-size-xs);
+  color: var(--mantine-color-white);
+  padding: calc(var(--mantine-spacing-xs) / 2);
+  border-radius: var(--mantine-radius-sm);
+  white-space: nowrap;
+  pointer-events: none;
+  user-select: none;
+  touch-action: none;
+}
+
+:where([data-mantine-color-scheme='light']) .m_c9357328 {
+    background-color: var(--mantine-color-gray-9);
+}
+
+:where([data-mantine-color-scheme='dark']) .m_c9357328 {
+    background-color: var(--mantine-color-dark-4);
+}
+
+.m_c9a9a60a {
+  position: absolute;
+  display: flex;
+  height: var(--slider-thumb-size);
+  width: var(--slider-thumb-size);
+  border: 4px solid;
+  transform: translate(-50%, -50%);
+  top: 50%;
+  cursor: pointer;
+  border-radius: var(--slider-radius);
+  align-items: center;
+  justify-content: center;
+  transition:
+    box-shadow 100ms ease,
+    transform 100ms ease;
+  z-index: 3;
+  user-select: none;
+  touch-action: none;
+  outline-offset: 2px;
+  left: var(--slider-thumb-offset);
+}
+
+:where([dir="rtl"]) .m_c9a9a60a {
+    left: auto;
+    right: calc(var(--slider-thumb-offset) - var(--slider-thumb-size));
+}
+
+fieldset:disabled .m_c9a9a60a,
+  .m_c9a9a60a:where([data-disabled]) {
+    display: none;
+  }
+
+.m_c9a9a60a:where([data-dragging]) {
+    transform: translate(-50%, -50%) scale(1.05);
+    box-shadow: var(--mantine-shadow-sm);
+  }
+
+:where([data-mantine-color-scheme='light']) .m_c9a9a60a {
+    color: var(--slider-color);
+    border-color: var(--slider-color);
+    background-color: var(--mantine-color-white);
+}
+
+:where([data-mantine-color-scheme='dark']) .m_c9a9a60a {
+    color: var(--mantine-color-white);
+    border-color: var(--mantine-color-white);
+    background-color: var(--slider-color);
+}
+
+.m_a8645c2 {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: calc(var(--slider-size) * 2);
+  cursor: pointer;
+}
+
+fieldset:disabled .m_a8645c2,
+  .m_a8645c2:where([data-disabled]) {
+    cursor: not-allowed;
+  }
+
+.m_c9ade57f {
+  position: relative;
+  width: 100%;
+  height: var(--slider-size);
+}
+
+.m_c9ade57f:where([data-inverted]:not([data-disabled])) {
+    --track-bg: var(--slider-color);
+  }
+
+fieldset:disabled .m_c9ade57f:where([data-inverted]),
+  .m_c9ade57f:where([data-inverted][data-disabled]) {
+    --track-bg: var(--slider-track-disabled-bg);
+  }
+
+.m_c9ade57f::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    border-radius: var(--slider-radius);
+    inset-inline: calc(var(--slider-size) * -1);
+    background-color: var(--track-bg, var(--slider-track-bg));
+    z-index: 0;
+  }
+
+.m_38aeed47 {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  bottom: 0;
+  background-color: var(--slider-color);
+  border-radius: var(--slider-radius);
+  width: var(--slider-bar-width);
+  inset-inline-start: var(--slider-bar-offset);
+}
+
+.m_38aeed47:where([data-inverted]) {
+    background-color: var(--slider-track-bg);
+  }
+
+fieldset:disabled .m_38aeed47:where(:not([data-inverted])),
+  .m_38aeed47:where([data-disabled]:not([data-inverted])) {
+    background-color: var(--mantine-color-disabled-color);
+  }
+
+.m_b7b0423a {
+  position: absolute;
+  inset-inline-start: calc(var(--mark-offset) - var(--slider-size) / 2);
+  top: 0;
+  z-index: 2;
+  height: 0;
+  pointer-events: none;
+}
+
+.m_dd33bc19 {
+  border: 2px solid;
+  height: var(--slider-size);
+  width: var(--slider-size);
+  border-radius: 1000px;
+  background-color: var(--mantine-color-white);
+  pointer-events: none;
+}
+
+:where([data-mantine-color-scheme='light']) .m_dd33bc19 {
+    border-color: var(--mantine-color-gray-2);
+}
+
+:where([data-mantine-color-scheme='dark']) .m_dd33bc19 {
+    border-color: var(--mantine-color-dark-4);
+}
+
+.m_dd33bc19:where([data-filled]) {
+    border-color: var(--slider-color);
+  }
+
+.m_dd33bc19:where([data-filled]):where([data-disabled]) {
+      border-color: var(--mantine-color-disabled-border);
+    }
+
+.m_68c77a5b {
+  transform: translate(calc(-50% + var(--slider-size) / 2), calc(var(--mantine-spacing-xs) / 2));
+  font-size: var(--mantine-font-size-sm);
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+}
+
+:where([data-mantine-color-scheme='light']) .m_68c77a5b {
+    color: var(--mantine-color-gray-6);
+}
+
+:where([data-mantine-color-scheme='dark']) .m_68c77a5b {
+    color: var(--mantine-color-dark-2);
+}
+}

package/styles/Spoiler.css

@@ -0,0 +1,21 @@
+.m_559cce2d {
+  position: relative;
+}
+
+  .m_559cce2d:where([data-has-spoiler]) {
+    margin-bottom: 24px;
+  }
+
+.m_b912df4e {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  transition: max-height var(--spoiler-transition-duration, 200ms) ease;
+}
+
+.m_b9131032 {
+  position: absolute;
+  inset-inline-start: 0;
+  top: 100%;
+  height: 24px;
+}

package/styles/Spoiler.layer.css

@@ -0,0 +1,22 @@
+@layer mantine {.m_559cce2d {
+  position: relative;
+}
+
+  .m_559cce2d:where([data-has-spoiler]) {
+    margin-bottom: 24px;
+  }
+
+.m_b912df4e {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  transition: max-height var(--spoiler-transition-duration, 200ms) ease;
+}
+
+.m_b9131032 {
+  position: absolute;
+  inset-inline-start: 0;
+  top: 100%;
+  height: 24px;
+}
+}

package/styles/Stack.css

@@ -0,0 +1,7 @@
+.m_6d731127 {
+  display: flex;
+  flex-direction: column;
+  align-items: var(--stack-align, stretch);
+  justify-content: var(--stack-justify, flex-start);
+  gap: var(--stack-gap, var(--mantine-spacing-md));
+}

package/styles/Stack.layer.css

@@ -0,0 +1,8 @@
+@layer mantine {.m_6d731127 {
+  display: flex;
+  flex-direction: column;
+  align-items: var(--stack-align, stretch);
+  justify-content: var(--stack-justify, flex-start);
+  gap: var(--stack-gap, var(--mantine-spacing-md));
+}
+}

package/styles/Stepper.css

@@ -0,0 +1,204 @@
+.m_cbb4ea7e {
+  --stepper-icon-size-xs: 34px;
+  --stepper-icon-size-sm: 36px;
+  --stepper-icon-size-md: 42px;
+  --stepper-icon-size-lg: 48px;
+  --stepper-icon-size-xl: 52px;
+
+  --stepper-icon-size: var(--stepper-icon-size-md);
+  --stepper-color: var(--mantine-primary-color-filled);
+  --stepper-content-padding: var(--mantine-spacing-md);
+  --stepper-spacing: var(--mantine-spacing-md);
+  --stepper-radius: 1000px;
+  --stepper-fz: var(--mantine-font-size-md);
+  --stepper-outline-thickness: 2px;
+}
+
+  [data-mantine-color-scheme='light'] .m_cbb4ea7e {
+    --stepper-outline-color: var(--mantine-color-gray-2);
+}
+
+  [data-mantine-color-scheme='dark'] .m_cbb4ea7e {
+    --stepper-outline-color: var(--mantine-color-dark-5);
+}
+
+.m_aaf89d0b {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+
+.m_aaf89d0b:where([data-wrap]) {
+    flex-wrap: wrap;
+    gap: var(--mantine-spacing-md) 0;
+  }
+
+.m_aaf89d0b:where([data-orientation='vertical']) {
+    flex-direction: column;
+  }
+
+.m_aaf89d0b:where([data-orientation='vertical']):where([data-icon-position='left']) {
+      align-items: flex-start;
+    }
+
+.m_aaf89d0b:where([data-orientation='vertical']):where([data-icon-position='right']) {
+      align-items: flex-end;
+    }
+
+.m_aaf89d0b:where([data-orientation='horizontal']) {
+    flex-direction: row;
+  }
+
+.m_2a371ac9 {
+  transition: background-color 150ms ease;
+  flex: 1;
+  height: var(--stepper-outline-thickness);
+  margin-inline: var(--mantine-spacing-md);
+  background-color: var(--stepper-outline-color);
+}
+
+.m_2a371ac9:where([data-active]) {
+    background-color: var(--stepper-color);
+  }
+
+.m_78da155d {
+  padding-top: var(--stepper-content-padding);
+}
+
+.m_cbb57068 {
+  --step-color: var(--stepper-color);
+
+  display: flex;
+  cursor: default;
+}
+
+.m_cbb57068:where([data-allow-click]) {
+    cursor: pointer;
+  }
+
+.m_cbb57068:where([data-icon-position='left']) {
+    flex-direction: row;
+  }
+
+.m_cbb57068:where([data-icon-position='right']) {
+    flex-direction: row-reverse;
+  }
+
+.m_f56b1e2c {
+  align-items: center;
+}
+
+.m_833edb7e {
+  --separator-spacing: calc(var(--mantine-spacing-xs) / 2);
+
+  justify-content: flex-start;
+  min-height: calc(var(--stepper-icon-size) + var(--mantine-spacing-xl) + var(--separator-spacing));
+  margin-top: var(--separator-spacing);
+  overflow: hidden;
+}
+
+.m_833edb7e:where(:first-of-type) {
+    margin-top: 0;
+  }
+
+.m_833edb7e:where(:last-of-type) {
+    min-height: auto;
+  }
+
+.m_833edb7e:where(:last-of-type) .m_6496b3f3 {
+      display: none;
+    }
+
+.m_818e70b {
+  position: relative;
+}
+
+.m_6496b3f3 {
+  top: calc(var(--stepper-icon-size) + var(--separator-spacing));
+  inset-inline-start: calc(var(--stepper-icon-size) / 2);
+  height: 100vh;
+  position: absolute;
+  border-inline-start: var(--stepper-outline-thickness) solid var(--stepper-outline-color);
+}
+
+.m_6496b3f3:where([data-active]) {
+    border-color: var(--stepper-color);
+  }
+
+.m_1959ad01 {
+  height: var(--stepper-icon-size);
+  width: var(--stepper-icon-size);
+  min-height: var(--stepper-icon-size);
+  min-width: var(--stepper-icon-size);
+  border-radius: var(--stepper-radius);
+  font-size: var(--stepper-fz);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  font-weight: bold;
+  transition:
+    background-color 150ms ease,
+    border-color 150ms ease;
+  border: var(--stepper-outline-thickness) solid var(--stepper-outline-color);
+  background-color: var(--stepper-outline-color);
+}
+
+:where([data-mantine-color-scheme='light']) .m_1959ad01 {
+    color: var(--mantine-color-gray-7);
+}
+
+:where([data-mantine-color-scheme='dark']) .m_1959ad01 {
+    color: var(--mantine-color-dark-1);
+}
+
+.m_1959ad01:where([data-progress]) {
+    border-color: var(--step-color);
+  }
+
+.m_1959ad01:where([data-completed]) {
+    color: var(--stepper-icon-color, var(--mantine-color-white));
+    background-color: var(--step-color);
+    border-color: var(--step-color);
+  }
+
+.m_a79331dc {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--stepper-icon-color, var(--mantine-color-white));
+}
+
+.m_1956aa2a {
+  display: flex;
+  flex-direction: column;
+}
+
+.m_1956aa2a:where([data-icon-position='left']) {
+    margin-inline-start: var(--mantine-spacing-sm);
+  }
+
+.m_1956aa2a:where([data-icon-position='right']) {
+    text-align: right;
+    margin-inline-end: var(--mantine-spacing-sm);
+  }
+
+:where([dir="rtl"]) .m_1956aa2a:where([data-icon-position='right']) {
+      text-align: left;
+}
+
+.m_12051f6c {
+  font-weight: 500;
+  font-size: var(--stepper-fz);
+  line-height: 1;
+}
+
+.m_164eea74 {
+  margin-top: calc(var(--stepper-spacing) / 3);
+  margin-bottom: calc(var(--stepper-spacing) / 3);
+  font-size: calc(var(--stepper-fz) - calc(0.125rem * var(--mantine-scale)));
+  line-height: 1;
+  color: var(--mantine-color-dimmed);
+}

package/styles/Stepper.layer.css

@@ -0,0 +1,205 @@
+@layer mantine {.m_cbb4ea7e {
+  --stepper-icon-size-xs: 34px;
+  --stepper-icon-size-sm: 36px;
+  --stepper-icon-size-md: 42px;
+  --stepper-icon-size-lg: 48px;
+  --stepper-icon-size-xl: 52px;
+
+  --stepper-icon-size: var(--stepper-icon-size-md);
+  --stepper-color: var(--mantine-primary-color-filled);
+  --stepper-content-padding: var(--mantine-spacing-md);
+  --stepper-spacing: var(--mantine-spacing-md);
+  --stepper-radius: 1000px;
+  --stepper-fz: var(--mantine-font-size-md);
+  --stepper-outline-thickness: 2px;
+}
+
+  [data-mantine-color-scheme='light'] .m_cbb4ea7e {
+    --stepper-outline-color: var(--mantine-color-gray-2);
+}
+
+  [data-mantine-color-scheme='dark'] .m_cbb4ea7e {
+    --stepper-outline-color: var(--mantine-color-dark-5);
+}
+
+.m_aaf89d0b {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+
+.m_aaf89d0b:where([data-wrap]) {
+    flex-wrap: wrap;
+    gap: var(--mantine-spacing-md) 0;
+  }
+
+.m_aaf89d0b:where([data-orientation='vertical']) {
+    flex-direction: column;
+  }
+
+.m_aaf89d0b:where([data-orientation='vertical']):where([data-icon-position='left']) {
+      align-items: flex-start;
+    }
+
+.m_aaf89d0b:where([data-orientation='vertical']):where([data-icon-position='right']) {
+      align-items: flex-end;
+    }
+
+.m_aaf89d0b:where([data-orientation='horizontal']) {
+    flex-direction: row;
+  }
+
+.m_2a371ac9 {
+  transition: background-color 150ms ease;
+  flex: 1;
+  height: var(--stepper-outline-thickness);
+  margin-inline: var(--mantine-spacing-md);
+  background-color: var(--stepper-outline-color);
+}
+
+.m_2a371ac9:where([data-active]) {
+    background-color: var(--stepper-color);
+  }
+
+.m_78da155d {
+  padding-top: var(--stepper-content-padding);
+}
+
+.m_cbb57068 {
+  --step-color: var(--stepper-color);
+
+  display: flex;
+  cursor: default;
+}
+
+.m_cbb57068:where([data-allow-click]) {
+    cursor: pointer;
+  }
+
+.m_cbb57068:where([data-icon-position='left']) {
+    flex-direction: row;
+  }
+
+.m_cbb57068:where([data-icon-position='right']) {
+    flex-direction: row-reverse;
+  }
+
+.m_f56b1e2c {
+  align-items: center;
+}
+
+.m_833edb7e {
+  --separator-spacing: calc(var(--mantine-spacing-xs) / 2);
+
+  justify-content: flex-start;
+  min-height: calc(var(--stepper-icon-size) + var(--mantine-spacing-xl) + var(--separator-spacing));
+  margin-top: var(--separator-spacing);
+  overflow: hidden;
+}
+
+.m_833edb7e:where(:first-of-type) {
+    margin-top: 0;
+  }
+
+.m_833edb7e:where(:last-of-type) {
+    min-height: auto;
+  }
+
+.m_833edb7e:where(:last-of-type) .m_6496b3f3 {
+      display: none;
+    }
+
+.m_818e70b {
+  position: relative;
+}
+
+.m_6496b3f3 {
+  top: calc(var(--stepper-icon-size) + var(--separator-spacing));
+  inset-inline-start: calc(var(--stepper-icon-size) / 2);
+  height: 100vh;
+  position: absolute;
+  border-inline-start: var(--stepper-outline-thickness) solid var(--stepper-outline-color);
+}
+
+.m_6496b3f3:where([data-active]) {
+    border-color: var(--stepper-color);
+  }
+
+.m_1959ad01 {
+  height: var(--stepper-icon-size);
+  width: var(--stepper-icon-size);
+  min-height: var(--stepper-icon-size);
+  min-width: var(--stepper-icon-size);
+  border-radius: var(--stepper-radius);
+  font-size: var(--stepper-fz);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  font-weight: bold;
+  transition:
+    background-color 150ms ease,
+    border-color 150ms ease;
+  border: var(--stepper-outline-thickness) solid var(--stepper-outline-color);
+  background-color: var(--stepper-outline-color);
+}
+
+:where([data-mantine-color-scheme='light']) .m_1959ad01 {
+    color: var(--mantine-color-gray-7);
+}
+
+:where([data-mantine-color-scheme='dark']) .m_1959ad01 {
+    color: var(--mantine-color-dark-1);
+}
+
+.m_1959ad01:where([data-progress]) {
+    border-color: var(--step-color);
+  }
+
+.m_1959ad01:where([data-completed]) {
+    color: var(--stepper-icon-color, var(--mantine-color-white));
+    background-color: var(--step-color);
+    border-color: var(--step-color);
+  }
+
+.m_a79331dc {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--stepper-icon-color, var(--mantine-color-white));
+}
+
+.m_1956aa2a {
+  display: flex;
+  flex-direction: column;
+}
+
+.m_1956aa2a:where([data-icon-position='left']) {
+    margin-inline-start: var(--mantine-spacing-sm);
+  }
+
+.m_1956aa2a:where([data-icon-position='right']) {
+    text-align: right;
+    margin-inline-end: var(--mantine-spacing-sm);
+  }
+
+:where([dir="rtl"]) .m_1956aa2a:where([data-icon-position='right']) {
+      text-align: left;
+}
+
+.m_12051f6c {
+  font-weight: 500;
+  font-size: var(--stepper-fz);
+  line-height: 1;
+}
+
+.m_164eea74 {
+  margin-top: calc(var(--stepper-spacing) / 3);
+  margin-bottom: calc(var(--stepper-spacing) / 3);
+  font-size: calc(var(--stepper-fz) - calc(0.125rem * var(--mantine-scale)));
+  line-height: 1;
+  color: var(--mantine-color-dimmed);
+}
+}