@mantine/core 8.3.3 → 8.3.4

package/styles/Checkbox.css

@@ -0,0 +1,110 @@
+.m_bf2d988c {
+  --checkbox-size-xs: 16px;
+  --checkbox-size-sm: 20px;
+  --checkbox-size-md: 24px;
+  --checkbox-size-lg: 30px;
+  --checkbox-size-xl: 36px;
+
+  --checkbox-size: var(--checkbox-size-sm);
+  --checkbox-color: var(--mantine-primary-color-filled);
+}
+
+  .m_bf2d988c:where([data-variant='filled']) {
+    --checkbox-icon-color: var(--mantine-color-white);
+  }
+
+  .m_bf2d988c: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_26063560 {
+  appearance: none;
+  border: 1px solid transparent;
+  width: var(--checkbox-size);
+  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;
+}
+
+: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_26063560 {
+    background-color: var(--mantine-color-dark-6);
+    border-color: var(--mantine-color-dark-4);
+}
+
+.m_26063560:where([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_26063560[data-indeterminate] + .m_bf295423, .m_26063560:checked + .m_bf295423 {
+      opacity: 1;
+      transform: none;
+    }
+
+.m_26063560: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);
+    }
+
+.m_215c4542 + .m_bf295423 {
+    color: var(--checkbox-color);
+  }
+
+.m_215c4542[data-indeterminate]:not(:disabled),
+  .m_215c4542:checked:not(:disabled) {
+    background-color: transparent;
+    border-color: var(--checkbox-color);
+  }
+
+.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_bf295423 {
+  position: absolute;
+  inset: 0;
+  width: 60%;
+  margin: auto;
+  color: var(--checkbox-icon-color);
+  pointer-events: none;
+  transform: translateY(calc(0.3125rem * var(--mantine-scale))) scale(0.5);
+  opacity: 0;
+  transition:
+    transform 100ms ease,
+    opacity 100ms ease;
+}

package/styles/Checkbox.layer.css

@@ -0,0 +1,111 @@
+@layer mantine {.m_bf2d988c {
+  --checkbox-size-xs: 16px;
+  --checkbox-size-sm: 20px;
+  --checkbox-size-md: 24px;
+  --checkbox-size-lg: 30px;
+  --checkbox-size-xl: 36px;
+
+  --checkbox-size: var(--checkbox-size-sm);
+  --checkbox-color: var(--mantine-primary-color-filled);
+}
+
+  .m_bf2d988c:where([data-variant='filled']) {
+    --checkbox-icon-color: var(--mantine-color-white);
+  }
+
+  .m_bf2d988c: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_26063560 {
+  appearance: none;
+  border: 1px solid transparent;
+  width: var(--checkbox-size);
+  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;
+}
+
+: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_26063560 {
+    background-color: var(--mantine-color-dark-6);
+    border-color: var(--mantine-color-dark-4);
+}
+
+.m_26063560:where([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_26063560[data-indeterminate] + .m_bf295423, .m_26063560:checked + .m_bf295423 {
+      opacity: 1;
+      transform: none;
+    }
+
+.m_26063560: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);
+    }
+
+.m_215c4542 + .m_bf295423 {
+    color: var(--checkbox-color);
+  }
+
+.m_215c4542[data-indeterminate]:not(:disabled),
+  .m_215c4542:checked:not(:disabled) {
+    background-color: transparent;
+    border-color: var(--checkbox-color);
+  }
+
+.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_bf295423 {
+  position: absolute;
+  inset: 0;
+  width: 60%;
+  margin: auto;
+  color: var(--checkbox-icon-color);
+  pointer-events: none;
+  transform: translateY(calc(0.3125rem * var(--mantine-scale))) scale(0.5);
+  opacity: 0;
+  transition:
+    transform 100ms ease,
+    opacity 100ms ease;
+}
+}

package/styles/CheckboxCard.css

@@ -0,0 +1,24 @@
+.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: 1px 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);
+}

package/styles/CheckboxCard.layer.css

@@ -0,0 +1,25 @@
+@layer mantine {.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: 1px 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);
+}
+}

package/styles/CheckboxIndicator.css

@@ -0,0 +1,97 @@
+.m_5e5256ee {
+  --checkbox-size-xs: 16px;
+  --checkbox-size-sm: 20px;
+  --checkbox-size-md: 24px;
+  --checkbox-size-lg: 30px;
+  --checkbox-size-xl: 36px;
+
+  --checkbox-size: var(--checkbox-size-sm);
+  --checkbox-color: var(--mantine-primary-color-filled);
+}
+
+  .m_5e5256ee:where([data-variant='filled']) {
+    --checkbox-icon-color: var(--mantine-color-white);
+  }
+
+  .m_5e5256ee:where([data-variant='outline']) {
+    --checkbox-icon-color: var(--checkbox-color);
+  }
+
+  .m_5e5256ee {
+
+  position: relative;
+  border: 1px 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));
+  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 {
+    background-color: var(--mantine-color-white);
+    border-color: var(--mantine-color-gray-4);
+}
+
+  :where([data-mantine-color-scheme='dark']) .m_5e5256ee {
+    background-color: var(--mantine-color-dark-6);
+    border-color: var(--mantine-color-dark-4);
+}
+
+  .m_5e5256ee[data-indeterminate],
+  .m_5e5256ee[data-checked] {
+    background-color: var(--checkbox-color);
+    border-color: var(--checkbox-color);
+  }
+
+  .m_5e5256ee[data-indeterminate] > .m_1b1c543a, .m_5e5256ee[data-checked] > .m_1b1c543a {
+      opacity: 1;
+      transform: none;
+      color: var(--checkbox-icon-color);
+    }
+
+  .m_5e5256ee[data-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);
+}
+
+  [data-mantine-color-scheme='dark'] .m_5e5256ee[data-disabled][data-checked] > .m_1b1c543a {
+        color: var(--mantine-color-dark-3);
+}
+
+.m_76e20374[data-indeterminate]:not([data-disabled]),
+  .m_76e20374[data-checked]:not([data-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 {
+      color: var(--checkbox-icon-color);
+      opacity: 1;
+      transform: none;
+    }
+
+.m_1b1c543a {
+  display: block;
+  width: 60%;
+  color: transparent;
+  pointer-events: none;
+  transform: translateY(calc(0.3125rem * var(--mantine-scale))) scale(0.5);
+  opacity: 1;
+  transition:
+    transform 100ms ease,
+    opacity 100ms ease;
+}

package/styles/CheckboxIndicator.layer.css

@@ -0,0 +1,98 @@
+@layer mantine {.m_5e5256ee {
+  --checkbox-size-xs: 16px;
+  --checkbox-size-sm: 20px;
+  --checkbox-size-md: 24px;
+  --checkbox-size-lg: 30px;
+  --checkbox-size-xl: 36px;
+
+  --checkbox-size: var(--checkbox-size-sm);
+  --checkbox-color: var(--mantine-primary-color-filled);
+}
+
+  .m_5e5256ee:where([data-variant='filled']) {
+    --checkbox-icon-color: var(--mantine-color-white);
+  }
+
+  .m_5e5256ee:where([data-variant='outline']) {
+    --checkbox-icon-color: var(--checkbox-color);
+  }
+
+  .m_5e5256ee {
+
+  position: relative;
+  border: 1px 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));
+  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 {
+    background-color: var(--mantine-color-white);
+    border-color: var(--mantine-color-gray-4);
+}
+
+  :where([data-mantine-color-scheme='dark']) .m_5e5256ee {
+    background-color: var(--mantine-color-dark-6);
+    border-color: var(--mantine-color-dark-4);
+}
+
+  .m_5e5256ee[data-indeterminate],
+  .m_5e5256ee[data-checked] {
+    background-color: var(--checkbox-color);
+    border-color: var(--checkbox-color);
+  }
+
+  .m_5e5256ee[data-indeterminate] > .m_1b1c543a, .m_5e5256ee[data-checked] > .m_1b1c543a {
+      opacity: 1;
+      transform: none;
+      color: var(--checkbox-icon-color);
+    }
+
+  .m_5e5256ee[data-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);
+}
+
+  [data-mantine-color-scheme='dark'] .m_5e5256ee[data-disabled][data-checked] > .m_1b1c543a {
+        color: var(--mantine-color-dark-3);
+}
+
+.m_76e20374[data-indeterminate]:not([data-disabled]),
+  .m_76e20374[data-checked]:not([data-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 {
+      color: var(--checkbox-icon-color);
+      opacity: 1;
+      transform: none;
+    }
+
+.m_1b1c543a {
+  display: block;
+  width: 60%;
+  color: transparent;
+  pointer-events: none;
+  transform: translateY(calc(0.3125rem * var(--mantine-scale))) scale(0.5);
+  opacity: 1;
+  transition:
+    transform 100ms ease,
+    opacity 100ms ease;
+}
+}

package/styles/Chip.css

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