@mantine/core 8.3.3 → 8.3.4

package/styles/ColorPicker.layer.css

@@ -0,0 +1,161 @@
+@layer mantine {.m_fee9c77 {
+  --cp-width-xs: 180px;
+  --cp-width-sm: 200px;
+  --cp-width-md: 240px;
+  --cp-width-lg: 280px;
+  --cp-width-xl: 320px;
+
+  --cp-preview-size-xs: 26px;
+  --cp-preview-size-sm: 34px;
+  --cp-preview-size-md: 42px;
+  --cp-preview-size-lg: 50px;
+  --cp-preview-size-xl: 54px;
+
+  --cp-thumb-size-xs: 8px;
+  --cp-thumb-size-sm: 12px;
+  --cp-thumb-size-md: 16px;
+  --cp-thumb-size-lg: 20px;
+  --cp-thumb-size-xl: 22px;
+
+  --cp-saturation-height-xs: 100px;
+  --cp-saturation-height-sm: 110px;
+  --cp-saturation-height-md: 120px;
+  --cp-saturation-height-lg: 140px;
+  --cp-saturation-height-xl: 160px;
+
+  --cp-preview-size: var(--cp-preview-size-sm);
+  --cp-thumb-size: var(--cp-thumb-size-sm);
+  --cp-saturation-height: var(--cp-saturation-height-sm);
+  --cp-width: var(--cp-width-sm);
+  --cp-body-spacing: var(--mantine-spacing-sm);
+
+  width: var(--cp-width);
+  padding: 1px;
+}
+
+  .m_fee9c77:where([data-full-width]) {
+    width: 100%;
+  }
+
+.m_9dddfbac {
+  width: var(--cp-preview-size);
+  height: var(--cp-preview-size);
+}
+
+.m_bffecc3e {
+  display: flex;
+  padding-top: calc(var(--cp-body-spacing) / 2);
+}
+
+.m_3283bb96 {
+  flex: 1;
+}
+
+.m_3283bb96:not(:only-child) {
+    margin-inline-end: var(--mantine-spacing-xs);
+  }
+
+.m_40d572ba {
+  overflow: hidden;
+  position: absolute;
+  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);
+  left: calc(var(--thumb-x-offset) - var(--cp-thumb-size) / 2);
+  top: calc(var(--thumb-y-offset) - var(--cp-thumb-size) / 2);
+}
+
+.m_d8ee6fd8 {
+  height: unset !important;
+  width: unset !important;
+  min-width: 0 !important;
+  min-height: 0 !important;
+  margin: 2px;
+  cursor: pointer;
+  padding-bottom: calc(var(--cp-swatch-size) - calc(0.25rem * var(--mantine-scale)));
+  flex: 0 0 calc(var(--cp-swatch-size) - calc(0.25rem * var(--mantine-scale)));
+}
+
+.m_5711e686 {
+  margin-top: 5px;
+  margin-inline: -2px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.m_5711e686:only-child {
+    margin-top: 0;
+  }
+
+.m_202a296e {
+  --cp-thumb-size-xs: 8px;
+  --cp-thumb-size-sm: 12px;
+  --cp-thumb-size-md: 16px;
+  --cp-thumb-size-lg: 20px;
+  --cp-thumb-size-xl: 22px;
+
+  -webkit-tap-highlight-color: transparent;
+  position: relative;
+  height: var(--cp-saturation-height);
+  border-radius: var(--mantine-radius-sm);
+  margin: calc(var(--cp-thumb-size) / 2);
+}
+
+.m_202a296e:where([data-focus-ring='auto']):focus:focus-visible .m_40d572ba {
+        outline: 2px solid var(--mantine-color-blue-filled);
+      }
+
+.m_202a296e:where([data-focus-ring='always']):focus .m_40d572ba {
+        outline: 2px solid var(--mantine-color-blue-filled);
+      }
+
+.m_11b3db02 {
+  position: absolute;
+  border-radius: var(--mantine-radius-sm);
+  inset: calc(var(--cp-thumb-size) * -1 / 2 - calc(0.0625rem * var(--mantine-scale)));
+}
+
+.m_d856d47d {
+  --cp-thumb-size-xs: 8px;
+  --cp-thumb-size-sm: 12px;
+  --cp-thumb-size-md: 16px;
+  --cp-thumb-size-lg: 20px;
+  --cp-thumb-size-xl: 22px;
+  --cp-thumb-size: var(--cp-thumb-size, calc(0.75rem * var(--mantine-scale)));
+
+  position: relative;
+  height: calc(var(--cp-thumb-size) + calc(0.125rem * var(--mantine-scale)));
+  margin-inline: calc(var(--cp-thumb-size) / 2);
+  outline: none;
+}
+
+.m_d856d47d + .m_d856d47d {
+    margin-top: 6px;
+  }
+
+.m_d856d47d:where([data-focus-ring='auto']):focus:focus-visible .m_40d572ba {
+        outline: 2px solid var(--mantine-color-blue-filled);
+      }
+
+.m_d856d47d:where([data-focus-ring='always']):focus .m_40d572ba {
+        outline: 2px solid var(--mantine-color-blue-filled);
+      }
+
+:where([data-mantine-color-scheme='light']) .m_d856d47d {
+    --slider-checkers: var(--mantine-color-gray-3);
+}
+
+:where([data-mantine-color-scheme='dark']) .m_d856d47d {
+    --slider-checkers: var(--mantine-color-dark-4);
+}
+
+.m_8f327113 {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  inset-inline: calc(var(--cp-thumb-size) * -1 / 2 - calc(0.0625rem * var(--mantine-scale)));
+  border-radius: 10000rem;
+}
+}

package/styles/ColorSwatch.css

@@ -0,0 +1,71 @@
+.m_de3d2490 {
+  --cs-size: 28px;
+  --cs-radius: 1000px;
+
+  -webkit-tap-highlight-color: transparent;
+  border: none;
+  appearance: none;
+  display: block;
+  line-height: 1;
+  position: relative;
+  width: var(--cs-size);
+  height: var(--cs-size);
+  min-width: var(--cs-size);
+  min-height: var(--cs-size);
+  border-radius: var(--cs-radius);
+  color: inherit;
+  text-decoration: none;
+}
+
+  [data-mantine-color-scheme='light'] .m_de3d2490 {
+    --alpha-overlay-color: var(--mantine-color-gray-3);
+    --alpha-overlay-bg: var(--mantine-color-white);
+}
+
+  [data-mantine-color-scheme='dark'] .m_de3d2490 {
+    --alpha-overlay-color: var(--mantine-color-dark-4);
+    --alpha-overlay-bg: var(--mantine-color-dark-7);
+}
+
+.m_862f3d1b {
+  position: absolute;
+  inset: 0;
+  border-radius: var(--cs-radius);
+}
+
+.m_98ae7f22 {
+  position: absolute;
+  inset: 0;
+  border-radius: var(--cs-radius);
+  z-index: 1;
+  box-shadow:
+    rgba(0, 0, 0, 0.1) 0 0 0 calc(0.0625rem * var(--mantine-scale)) inset,
+    rgb(0, 0, 0, 0.15) 0 0 calc(0.25rem * var(--mantine-scale)) inset;
+}
+
+.m_95709ac0 {
+  position: absolute;
+  inset: 0;
+  border-radius: var(--cs-radius);
+  background-size: 8px 8px;
+  background-position:
+    0 0,
+    0 4px,
+    4px -4px,
+    -4px 0;
+  background-image:
+    linear-gradient(45deg, var(--alpha-overlay-color) 25%, transparent 25%),
+    linear-gradient(-45deg, var(--alpha-overlay-color) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, var(--alpha-overlay-color) 75%),
+    linear-gradient(-45deg, var(--alpha-overlay-bg) 75%, var(--alpha-overlay-color) 75%);
+}
+
+.m_93e74e3 {
+  position: absolute;
+  inset: 0;
+  border-radius: var(--cs-radius);
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/styles/ColorSwatch.layer.css

@@ -0,0 +1,72 @@
+@layer mantine {.m_de3d2490 {
+  --cs-size: 28px;
+  --cs-radius: 1000px;
+
+  -webkit-tap-highlight-color: transparent;
+  border: none;
+  appearance: none;
+  display: block;
+  line-height: 1;
+  position: relative;
+  width: var(--cs-size);
+  height: var(--cs-size);
+  min-width: var(--cs-size);
+  min-height: var(--cs-size);
+  border-radius: var(--cs-radius);
+  color: inherit;
+  text-decoration: none;
+}
+
+  [data-mantine-color-scheme='light'] .m_de3d2490 {
+    --alpha-overlay-color: var(--mantine-color-gray-3);
+    --alpha-overlay-bg: var(--mantine-color-white);
+}
+
+  [data-mantine-color-scheme='dark'] .m_de3d2490 {
+    --alpha-overlay-color: var(--mantine-color-dark-4);
+    --alpha-overlay-bg: var(--mantine-color-dark-7);
+}
+
+.m_862f3d1b {
+  position: absolute;
+  inset: 0;
+  border-radius: var(--cs-radius);
+}
+
+.m_98ae7f22 {
+  position: absolute;
+  inset: 0;
+  border-radius: var(--cs-radius);
+  z-index: 1;
+  box-shadow:
+    rgba(0, 0, 0, 0.1) 0 0 0 calc(0.0625rem * var(--mantine-scale)) inset,
+    rgb(0, 0, 0, 0.15) 0 0 calc(0.25rem * var(--mantine-scale)) inset;
+}
+
+.m_95709ac0 {
+  position: absolute;
+  inset: 0;
+  border-radius: var(--cs-radius);
+  background-size: 8px 8px;
+  background-position:
+    0 0,
+    0 4px,
+    4px -4px,
+    -4px 0;
+  background-image:
+    linear-gradient(45deg, var(--alpha-overlay-color) 25%, transparent 25%),
+    linear-gradient(-45deg, var(--alpha-overlay-color) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, var(--alpha-overlay-color) 75%),
+    linear-gradient(-45deg, var(--alpha-overlay-bg) 75%, var(--alpha-overlay-color) 75%);
+}
+
+.m_93e74e3 {
+  position: absolute;
+  inset: 0;
+  border-radius: var(--cs-radius);
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+}

package/styles/Combobox.css

@@ -0,0 +1,210 @@
+.m_88b62a41 {
+  --combobox-padding: 4px;
+  padding: var(--combobox-padding);
+}
+
+  .m_88b62a41:has([data-mantine-scrollbar]) .m_985517d8 {
+      max-width: calc(100% + var(--combobox-padding));
+    }
+
+  .m_88b62a41[data-composed] {
+    padding-inline-end: 0;
+  }
+
+  .m_88b62a41[data-hidden] {
+    display: none;
+  }
+
+/* Variables must be both on dropdown and options to support usage of Combobox.Options without Combobox.Dropdown */
+.m_88b62a41,
+.m_b2821a6e {
+  --combobox-option-padding-xs: 4px 8px;
+  --combobox-option-padding-sm: 6px 10px;
+  --combobox-option-padding-md: 8px 12px;
+  --combobox-option-padding-lg: 10px 16px;
+  --combobox-option-padding-xl: 14px 20px;
+  --combobox-option-padding: var(--combobox-option-padding-sm);
+}
+
+.m_92253aa5 {
+  padding: var(--combobox-option-padding);
+  font-size: var(--combobox-option-fz, var(--mantine-font-size-sm));
+  border-radius: var(--mantine-radius-default);
+  background-color: transparent;
+  color: inherit;
+  cursor: pointer;
+  overflow-wrap: break-word;
+}
+
+.m_92253aa5:where([data-combobox-selected]) {
+    background-color: var(--mantine-primary-color-filled);
+    color: var(--mantine-color-white);
+  }
+
+.m_92253aa5:where([data-combobox-disabled]) {
+    cursor: not-allowed;
+    opacity: 0.35;
+  }
+
+@media (hover: hover) {
+      :where([data-mantine-color-scheme='light']) .m_92253aa5:hover:where(:not([data-combobox-selected], [data-combobox-disabled])) {
+        background-color: var(--mantine-color-gray-0);
+  }
+
+      :where([data-mantine-color-scheme='dark']) .m_92253aa5:hover:where(:not([data-combobox-selected], [data-combobox-disabled])) {
+        background-color: var(--mantine-color-dark-7);
+  }
+}
+
+@media (hover: none) {
+      :where([data-mantine-color-scheme='light']) .m_92253aa5:active:where(:not([data-combobox-selected], [data-combobox-disabled])) {
+        background-color: var(--mantine-color-gray-0);
+  }
+
+      :where([data-mantine-color-scheme='dark']) .m_92253aa5:active:where(:not([data-combobox-selected], [data-combobox-disabled])) {
+        background-color: var(--mantine-color-dark-7);
+  }
+}
+
+.m_985517d8 {
+  margin-inline: calc(var(--combobox-padding) * -1);
+  margin-top: calc(var(--combobox-padding) * -1);
+  width: calc(100% + var(--combobox-padding) * 2);
+  border-top-width: 0;
+  border-inline-width: 0;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+  margin-bottom: var(--combobox-padding);
+  position: relative;
+}
+
+:where([data-mantine-color-scheme='light']) .m_985517d8, :where([data-mantine-color-scheme='light']) .m_985517d8:focus {
+      border-color: var(--mantine-color-gray-2);
+}
+
+:where([data-mantine-color-scheme='dark']) .m_985517d8, :where([data-mantine-color-scheme='dark']) .m_985517d8:focus {
+      border-color: var(--mantine-color-dark-4);
+}
+
+:where([data-mantine-color-scheme='light']) .m_985517d8 {
+    background-color: var(--mantine-color-white);
+}
+
+:where([data-mantine-color-scheme='dark']) .m_985517d8 {
+    background-color: var(--mantine-color-dark-7);
+}
+
+.m_2530cd1d {
+  font-size: var(--combobox-option-fz, var(--mantine-font-size-sm));
+  text-align: center;
+  padding: var(--combobox-option-padding);
+  color: var(--mantine-color-dimmed);
+}
+
+.m_858f94bd,
+.m_82b967cb {
+  font-size: var(--combobox-option-fz, var(--mantine-font-size-sm));
+  border: 0 solid transparent;
+  margin-inline: calc(var(--combobox-padding) * -1);
+  padding: var(--combobox-option-padding);
+}
+
+:where([data-mantine-color-scheme='light']) .m_858f94bd, :where([data-mantine-color-scheme='light']) .m_82b967cb {
+    border-color: var(--mantine-color-gray-2);
+}
+
+:where([data-mantine-color-scheme='dark']) .m_858f94bd, :where([data-mantine-color-scheme='dark']) .m_82b967cb {
+    border-color: var(--mantine-color-dark-4);
+}
+
+.m_82b967cb {
+  border-top-width: 1px;
+  margin-top: var(--combobox-padding);
+  margin-bottom: calc(var(--combobox-padding) * -1);
+}
+
+.m_858f94bd {
+  border-bottom-width: 1px;
+  margin-bottom: var(--combobox-padding);
+  margin-top: calc(var(--combobox-padding) * -1);
+}
+
+.m_254f3e4f:has(.m_2bb2e9e5:only-child) {
+    display: none;
+  }
+
+.m_2bb2e9e5 {
+  color: var(--mantine-color-dimmed);
+  font-size: calc(var(--combobox-option-fz, var(--mantine-font-size-sm)) * 0.85);
+  padding: var(--combobox-option-padding);
+  font-weight: 500;
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.m_2bb2e9e5::after {
+    content: '';
+    flex: 1;
+    inset-inline: 0;
+    height: 1px;
+    margin-inline-start: var(--mantine-spacing-xs);
+  }
+
+:where([data-mantine-color-scheme='light']) .m_2bb2e9e5::after {
+      background-color: var(--mantine-color-gray-2);
+}
+
+:where([data-mantine-color-scheme='dark']) .m_2bb2e9e5::after {
+      background-color: var(--mantine-color-dark-4);
+}
+
+.m_2bb2e9e5:only-child {
+    display: none;
+  }
+
+/* ------- Combobox.Chevron ------- */
+.m_2943220b {
+  --combobox-chevron-size-xs: 14px;
+  --combobox-chevron-size-sm: 18px;
+  --combobox-chevron-size-md: 20px;
+  --combobox-chevron-size-lg: 24px;
+  --combobox-chevron-size-xl: 28px;
+  --combobox-chevron-size: var(--combobox-chevron-size-sm);
+}
+:where([data-mantine-color-scheme='light']) .m_2943220b {
+    --_combobox-chevron-color: var(--combobox-chevron-color, var(--mantine-color-gray-6));
+}
+:where([data-mantine-color-scheme='dark']) .m_2943220b {
+    --_combobox-chevron-color: var(--combobox-chevron-color, var(--mantine-color-dark-3));
+}
+.m_2943220b {
+
+  width: var(--combobox-chevron-size);
+  height: var(--combobox-chevron-size);
+  color: var(--_combobox-chevron-color);
+}
+.m_2943220b:where([data-error]) {
+    color: var(--combobox-chevron-color, var(--mantine-color-error));
+  }
+
+/* ------- OptionsDropdown ------- */
+.m_390b5f4 {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.m_390b5f4:where([data-reverse]) {
+    justify-content: space-between;
+  }
+
+.m_8ee53fc2 {
+  opacity: 0.4;
+  width: 0.8em;
+  min-width: 0.8em;
+  height: 0.8em;
+}
+
+:where([data-combobox-selected]) .m_8ee53fc2 {
+    opacity: 1;
+  }