@mantine/core 8.3.3 → 8.3.4

package/styles/Chip.layer.css

@@ -0,0 +1,200 @@
+@layer mantine {.m_f59ffda3 {
+  --chip-size-xs: 23px;
+  --chip-size-sm: 28px;
+  --chip-size-md: 32px;
+  --chip-size-lg: 36px;
+  --chip-size-xl: 40px;
+
+  --chip-icon-size-xs: 10px;
+  --chip-icon-size-sm: 12px;
+  --chip-icon-size-md: 14px;
+  --chip-icon-size-lg: 16px;
+  --chip-icon-size-xl: 18px;
+
+  --chip-padding-xs: 16px;
+  --chip-padding-sm: 20px;
+  --chip-padding-md: 24px;
+  --chip-padding-lg: 28px;
+  --chip-padding-xl: 32px;
+
+  --chip-checked-padding-xs: 7.5px;
+  --chip-checked-padding-sm: 10px;
+  --chip-checked-padding-md: 11.7px;
+  --chip-checked-padding-lg: 13.5px;
+  --chip-checked-padding-xl: 15.7px;
+
+  --chip-spacing-xs: 10px;
+  --chip-spacing-sm: 12px;
+  --chip-spacing-md: 16px;
+  --chip-spacing-lg: 20px;
+  --chip-spacing-xl: 22px;
+
+  --chip-size: var(--chip-size-sm);
+  --chip-icon-size: var(--chip-icon-size-sm);
+  --chip-padding: var(--chip-padding-sm);
+  --chip-spacing: var(--chip-spacing-sm);
+  --chip-checked-padding: var(--chip-checked-padding-sm);
+  --chip-bg: var(--mantine-primary-color-filled);
+  --chip-hover: var(--mantine-primary-color-filled-hover);
+  --chip-color: var(--mantine-color-white);
+  --chip-bd: 1px solid transparent;
+}
+
+.m_be049a53 {
+  display: inline-flex;
+  align-items: center;
+  user-select: none;
+  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)));
+  padding-inline: var(--chip-padding);
+  cursor: pointer;
+  white-space: nowrap;
+  -webkit-tap-highlight-color: transparent;
+  border: 1px solid transparent;
+  color: var(--mantine-color-text);
+}
+
+.m_be049a53:where([data-checked]) {
+    padding: var(--chip-checked-padding);
+  }
+
+.m_be049a53:where([data-disabled]) {
+    cursor: not-allowed;
+    background-color: var(--mantine-color-disabled);
+    color: var(--mantine-color-disabled-color);
+  }
+
+:where([data-mantine-color-scheme='light']) .m_3904c1af:not([data-disabled]) {
+    background-color: var(--mantine-color-white);
+    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: 1px solid var(--mantine-color-dark-4);
+}
+
+@media (hover: hover) {
+    :where([data-mantine-color-scheme='light']) .m_3904c1af:not([data-disabled]):hover {
+      background-color: var(--mantine-color-gray-0);
+  }
+
+    :where([data-mantine-color-scheme='dark']) .m_3904c1af:not([data-disabled]):hover {
+      background-color: var(--mantine-color-dark-5);
+  }
+}
+
+@media (hover: none) {
+    :where([data-mantine-color-scheme='light']) .m_3904c1af:not([data-disabled]):active {
+      background-color: var(--mantine-color-gray-0);
+  }
+
+    :where([data-mantine-color-scheme='dark']) .m_3904c1af:not([data-disabled]):active {
+      background-color: var(--mantine-color-dark-5);
+  }
+}
+
+.m_3904c1af:not([data-disabled]):where([data-checked]) {
+    --chip-icon-color: var(--chip-color);
+    border: var(--chip-bd);
+  }
+
+@media (hover: hover) {
+
+  .m_3904c1af:not([data-disabled]):where([data-checked]):hover {
+      background-color: var(--chip-hover);
+  }
+}
+
+@media (hover: none) {
+
+  .m_3904c1af:not([data-disabled]):where([data-checked]):active {
+      background-color: var(--chip-hover);
+  }
+}
+
+.m_fa109255:not([data-disabled]),
+.m_f7e165c3:not([data-disabled]) {
+  border: 1px solid transparent;
+  color: var(--mantine-color-text);
+}
+
+:where([data-mantine-color-scheme='light']) .m_fa109255:not([data-disabled]), :where([data-mantine-color-scheme='light']) .m_f7e165c3:not([data-disabled]) {
+    background-color: var(--mantine-color-gray-1);
+}
+
+:where([data-mantine-color-scheme='dark']) .m_fa109255:not([data-disabled]), :where([data-mantine-color-scheme='dark']) .m_f7e165c3:not([data-disabled]) {
+    background-color: var(--mantine-color-dark-5);
+}
+
+@media (hover: hover) {
+    :where([data-mantine-color-scheme='light']) .m_fa109255:not([data-disabled]):hover, :where([data-mantine-color-scheme='light']) .m_f7e165c3:not([data-disabled]):hover {
+      background-color: var(--mantine-color-gray-2);
+  }
+
+    :where([data-mantine-color-scheme='dark']) .m_fa109255:not([data-disabled]):hover, :where([data-mantine-color-scheme='dark']) .m_f7e165c3:not([data-disabled]):hover {
+      background-color: var(--mantine-color-dark-4);
+  }
+}
+
+@media (hover: none) {
+    :where([data-mantine-color-scheme='light']) .m_fa109255:not([data-disabled]):active, :where([data-mantine-color-scheme='light']) .m_f7e165c3:not([data-disabled]):active {
+      background-color: var(--mantine-color-gray-2);
+  }
+
+    :where([data-mantine-color-scheme='dark']) .m_fa109255:not([data-disabled]):active, :where([data-mantine-color-scheme='dark']) .m_f7e165c3:not([data-disabled]):active {
+      background-color: var(--mantine-color-dark-4);
+  }
+}
+
+.m_fa109255:not([data-disabled]):where([data-checked]), .m_f7e165c3:not([data-disabled]):where([data-checked]) {
+    --chip-icon-color: var(--chip-color);
+    color: var(--chip-color);
+    background-color: var(--chip-bg);
+  }
+
+@media (hover: hover) {
+
+  .m_fa109255:not([data-disabled]):where([data-checked]):hover, .m_f7e165c3:not([data-disabled]):where([data-checked]):hover {
+      background-color: var(--chip-hover);
+  }
+}
+
+@media (hover: none) {
+
+  .m_fa109255:not([data-disabled]):where([data-checked]):active, .m_f7e165c3:not([data-disabled]):where([data-checked]):active {
+      background-color: var(--chip-hover);
+  }
+}
+
+.m_9ac86df9 {
+  width: calc(var(--chip-icon-size) + (var(--chip-spacing) / 1.5));
+  max-width: calc(var(--chip-icon-size) + (var(--chip-spacing) / 1.5));
+  height: var(--chip-icon-size);
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+}
+
+.m_d6d72580 {
+  width: var(--chip-icon-size);
+  height: var(--chip-icon-size);
+  display: block;
+  color: var(--chip-icon-color, inherit);
+}
+
+.m_bde07329 {
+  width: 0;
+  height: 0;
+  padding: 0;
+  opacity: 0;
+  margin: 0;
+}
+
+.m_bde07329:focus-visible + .m_be049a53 {
+    outline: 2px solid var(--mantine-primary-color-filled);
+    outline-offset: 2px;
+  }
+}

package/styles/CloseButton.css

@@ -0,0 +1,58 @@
+.m_86a44da5 {
+  --cb-size-xs: 18px;
+  --cb-size-sm: 22px;
+  --cb-size-md: 28px;
+  --cb-size-lg: 34px;
+  --cb-size-xl: 44px;
+
+  --cb-size: var(--cb-size-md);
+  --cb-icon-size: 70%;
+  --cb-radius: var(--mantine-radius-default);
+
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  user-select: none;
+
+  width: var(--cb-size);
+  height: var(--cb-size);
+  min-width: var(--cb-size);
+  min-height: var(--cb-size);
+  border-radius: var(--cb-radius);
+}
+
+  :where([data-mantine-color-scheme='light']) .m_86a44da5 {
+    color: var(--mantine-color-gray-7);
+}
+
+  :where([data-mantine-color-scheme='dark']) .m_86a44da5 {
+    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:where(:not([data-disabled], :disabled)):hover {
+      background-color: var(--mantine-color-gray-0);
+  }
+
+    :where([data-mantine-color-scheme='dark']) .m_220c80f2:where(:not([data-disabled], :disabled)):hover {
+      background-color: var(--mantine-color-dark-6);
+  }
+}
+
+@media (hover: none) {
+    :where([data-mantine-color-scheme='light']) .m_220c80f2:where(:not([data-disabled], :disabled)):active {
+      background-color: var(--mantine-color-gray-0);
+  }
+
+    :where([data-mantine-color-scheme='dark']) .m_220c80f2:where(:not([data-disabled], :disabled)):active {
+      background-color: var(--mantine-color-dark-6);
+  }
+}

package/styles/CloseButton.layer.css

@@ -0,0 +1,59 @@
+@layer mantine {.m_86a44da5 {
+  --cb-size-xs: 18px;
+  --cb-size-sm: 22px;
+  --cb-size-md: 28px;
+  --cb-size-lg: 34px;
+  --cb-size-xl: 44px;
+
+  --cb-size: var(--cb-size-md);
+  --cb-icon-size: 70%;
+  --cb-radius: var(--mantine-radius-default);
+
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  user-select: none;
+
+  width: var(--cb-size);
+  height: var(--cb-size);
+  min-width: var(--cb-size);
+  min-height: var(--cb-size);
+  border-radius: var(--cb-radius);
+}
+
+  :where([data-mantine-color-scheme='light']) .m_86a44da5 {
+    color: var(--mantine-color-gray-7);
+}
+
+  :where([data-mantine-color-scheme='dark']) .m_86a44da5 {
+    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:where(:not([data-disabled], :disabled)):hover {
+      background-color: var(--mantine-color-gray-0);
+  }
+
+    :where([data-mantine-color-scheme='dark']) .m_220c80f2:where(:not([data-disabled], :disabled)):hover {
+      background-color: var(--mantine-color-dark-6);
+  }
+}
+
+@media (hover: none) {
+    :where([data-mantine-color-scheme='light']) .m_220c80f2:where(:not([data-disabled], :disabled)):active {
+      background-color: var(--mantine-color-gray-0);
+  }
+
+    :where([data-mantine-color-scheme='dark']) .m_220c80f2:where(:not([data-disabled], :disabled)):active {
+      background-color: var(--mantine-color-dark-6);
+  }
+}
+}

package/styles/Code.css

@@ -0,0 +1,21 @@
+.m_b183c0a2 {
+  font-family: var(--mantine-font-family-monospace);
+  line-height: var(--mantine-line-height);
+  padding: 2px calc(var(--mantine-spacing-xs) / 2);
+  border-radius: var(--mantine-radius-sm);
+  font-size: var(--mantine-font-size-xs);
+  margin: 0;
+  overflow: auto;
+}
+
+  :where([data-mantine-color-scheme='light']) .m_b183c0a2 {
+    background-color: var(--code-bg, var(--mantine-color-gray-0));
+}
+
+  :where([data-mantine-color-scheme='dark']) .m_b183c0a2 {
+    background-color: var(--code-bg, var(--mantine-color-dark-6));
+}
+
+  .m_b183c0a2[data-block] {
+    padding: var(--mantine-spacing-xs);
+  }

package/styles/Code.layer.css

@@ -0,0 +1,22 @@
+@layer mantine {.m_b183c0a2 {
+  font-family: var(--mantine-font-family-monospace);
+  line-height: var(--mantine-line-height);
+  padding: 2px calc(var(--mantine-spacing-xs) / 2);
+  border-radius: var(--mantine-radius-sm);
+  font-size: var(--mantine-font-size-xs);
+  margin: 0;
+  overflow: auto;
+}
+
+  :where([data-mantine-color-scheme='light']) .m_b183c0a2 {
+    background-color: var(--code-bg, var(--mantine-color-gray-0));
+}
+
+  :where([data-mantine-color-scheme='dark']) .m_b183c0a2 {
+    background-color: var(--code-bg, var(--mantine-color-dark-6));
+}
+
+  .m_b183c0a2[data-block] {
+    padding: var(--mantine-spacing-xs);
+  }
+}

package/styles/ColorInput.css

@@ -0,0 +1,21 @@
+.m_b077c2bc {
+  --ci-eye-dropper-icon-size-xs: 14px;
+  --ci-eye-dropper-icon-size-sm: 16px;
+  --ci-eye-dropper-icon-size-md: 18px;
+  --ci-eye-dropper-icon-size-lg: 20px;
+  --ci-eye-dropper-icon-size-xl: 22px;
+  --ci-eye-dropper-icon-size: var(--ci-eye-dropper-icon-size-sm);
+}
+
+.m_c5ccdcab {
+  --ci-preview-size-xs: 16px;
+  --ci-preview-size-sm: 18px;
+  --ci-preview-size-md: 22px;
+  --ci-preview-size-lg: 28px;
+  --ci-preview-size-xl: 36px;
+  --ci-preview-size: var(--ci-preview-size-sm);
+}
+
+.m_5ece2cd7 {
+  padding: 8px;
+}

package/styles/ColorInput.layer.css

@@ -0,0 +1,22 @@
+@layer mantine {.m_b077c2bc {
+  --ci-eye-dropper-icon-size-xs: 14px;
+  --ci-eye-dropper-icon-size-sm: 16px;
+  --ci-eye-dropper-icon-size-md: 18px;
+  --ci-eye-dropper-icon-size-lg: 20px;
+  --ci-eye-dropper-icon-size-xl: 22px;
+  --ci-eye-dropper-icon-size: var(--ci-eye-dropper-icon-size-sm);
+}
+
+.m_c5ccdcab {
+  --ci-preview-size-xs: 16px;
+  --ci-preview-size-sm: 18px;
+  --ci-preview-size-md: 22px;
+  --ci-preview-size-lg: 28px;
+  --ci-preview-size-xl: 36px;
+  --ci-preview-size: var(--ci-preview-size-sm);
+}
+
+.m_5ece2cd7 {
+  padding: 8px;
+}
+}

package/styles/ColorPicker.css

@@ -0,0 +1,160 @@
+.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;
+}