@mantine/core 8.3.3 → 8.3.4

package/styles/Input.css

@@ -0,0 +1,333 @@
+.m_6c018570 {
+  position: relative;
+  margin-top: var(--input-margin-top, 0rem);
+  margin-bottom: var(--input-margin-bottom, 0rem);
+
+  --input-height-xs: 30px;
+  --input-height-sm: 36px;
+  --input-height-md: 42px;
+  --input-height-lg: 50px;
+  --input-height-xl: 60px;
+
+  --input-padding-y-xs: 5px;
+  --input-padding-y-sm: 6px;
+  --input-padding-y-md: 8px;
+  --input-padding-y-lg: 10px;
+  --input-padding-y-xl: 13px;
+
+  --input-height: var(--input-height-sm);
+  --input-radius: var(--mantine-radius-default);
+
+  --input-cursor: text;
+  --input-text-align: left;
+  --input-line-height: calc(var(--input-height) - calc(0.125rem * var(--mantine-scale)));
+  --input-padding: calc(var(--input-height) / 3);
+  --input-padding-inline-start: var(--input-padding);
+  --input-padding-inline-end: var(--input-padding);
+  --input-placeholder-color: var(--mantine-color-placeholder);
+  --input-color: var(--mantine-color-text);
+  --input-disabled-bg: var(--mantine-color-disabled);
+  --input-disabled-color: var(--mantine-color-disabled-color);
+
+  --input-left-section-size: var(--input-left-section-width, calc(var(--input-height) - calc(0.125rem * var(--mantine-scale))));
+
+  --input-right-section-size: var(
+    --input-right-section-width,
+    calc(var(--input-height) - calc(0.125rem * var(--mantine-scale)))
+  );
+
+  --input-size: var(--input-height);
+
+  --section-y: 1px;
+  --left-section-start: 1px;
+  --left-section-border-radius: var(--input-radius) 0 0 var(--input-radius);
+
+  --right-section-end: 1px;
+  --right-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;
+}
+
+  .m_6c018570[data-variant='unstyled'] {
+    --input-padding: 0;
+    --input-padding-y: 0;
+    --input-padding-inline-start: 0;
+    --input-padding-inline-end: 0;
+  }
+
+  .m_6c018570[data-pointer] {
+    --input-cursor: pointer;
+  }
+
+  .m_6c018570[data-multiline] {
+    --input-padding-y-xs: 4.5px;
+    --input-padding-y-sm: 5.5px;
+    --input-padding-y-md: 7px;
+    --input-padding-y-lg: 9.5px;
+    --input-padding-y-xl: 13px;
+
+    --input-size: auto;
+    --input-line-height: var(--mantine-line-height);
+  }
+
+  .m_6c018570[data-with-left-section] {
+    --input-padding-inline-start: var(--input-left-section-size);
+  }
+
+  .m_6c018570[data-with-right-section] {
+    --input-padding-inline-end: var(--input-right-section-size);
+  }
+
+  .m_6c018570[data-size='xs'] .m_6c018570[data-with-right-section]:has([data-combined-clear-section]) {
+        --input-padding-inline-end: 41px;
+      }
+
+  .m_6c018570[data-size='sm'] .m_6c018570[data-with-right-section]:has([data-combined-clear-section]) {
+        --input-padding-inline-end: 50px;
+      }
+
+  .m_6c018570[data-size='md'] .m_6c018570[data-with-right-section]:has([data-combined-clear-section]) {
+        --input-padding-inline-end: 60px;
+      }
+
+  .m_6c018570[data-size='lg'] .m_6c018570[data-with-right-section]:has([data-combined-clear-section]) {
+        --input-padding-inline-end: 72px;
+      }
+
+  .m_6c018570[data-size='xl'] .m_6c018570[data-with-right-section]:has([data-combined-clear-section]) {
+        --input-padding-inline-end: 89px;
+      }
+
+  [data-mantine-color-scheme='light'] .m_6c018570[data-variant='default'] {
+      --input-bd: var(--mantine-color-gray-4);
+      --input-bg: var(--mantine-color-white);
+      --input-bd-focus: var(--mantine-primary-color-filled);
+    }
+
+  [data-mantine-color-scheme='light'] .m_6c018570[data-variant='filled'] {
+      --input-bd: transparent;
+      --input-bg: var(--mantine-color-gray-1);
+      --input-bd-focus: var(--mantine-primary-color-filled);
+    }
+
+  [data-mantine-color-scheme='light'] .m_6c018570[data-variant='unstyled'] {
+      --input-bd: transparent;
+      --input-bg: transparent;
+      --input-bd-focus: transparent;
+    }
+
+  [data-mantine-color-scheme='dark'] .m_6c018570[data-variant='default'] {
+      --input-bd: var(--mantine-color-dark-4);
+      --input-bg: var(--mantine-color-dark-6);
+      --input-bd-focus: var(--mantine-primary-color-filled);
+    }
+
+  [data-mantine-color-scheme='dark'] .m_6c018570[data-variant='filled'] {
+      --input-bd: transparent;
+      --input-bg: var(--mantine-color-dark-5);
+      --input-bd-focus: var(--mantine-primary-color-filled);
+    }
+
+  [data-mantine-color-scheme='dark'] .m_6c018570[data-variant='unstyled'] {
+      --input-bd: transparent;
+      --input-bg: transparent;
+      --input-bd-focus: transparent;
+    }
+
+  [data-mantine-color-scheme] .m_6c018570[data-error]:not([data-variant='unstyled']) {
+      --input-bd: var(--mantine-color-error);
+    }
+
+  [data-mantine-color-scheme] .m_6c018570[data-error] {
+
+    --input-color: var(--mantine-color-error);
+    --input-placeholder-color: var(--mantine-color-error);
+    --input-section-color: var(--mantine-color-error);
+}
+
+  :where([dir="rtl"]) .m_6c018570 {
+    --input-text-align: right;
+    --left-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;
+    --right-section-border-radius: var(--input-radius) 0 0 var(--input-radius);
+}
+
+.m_8fb7ebe7 {
+  -webkit-tap-highlight-color: transparent;
+  appearance: none;
+  resize: var(--input-resize, none);
+  display: block;
+  width: 100%;
+  transition: border-color 100ms ease;
+
+  text-align: var(--input-text-align);
+  color: var(--input-color);
+  border: calc(0.0625rem * var(--mantine-scale)) solid var(--input-bd);
+  background-color: var(--input-bg);
+  font-family: var(--input-font-family, var(--mantine-font-family));
+  height: var(--input-size);
+  min-height: var(--input-height);
+  line-height: var(--input-line-height);
+  font-size: var(--_input-fz, var(--input-fz, var(--mantine-font-size-md)));
+  border-radius: var(--input-radius);
+  padding-inline-start: var(--input-padding-inline-start);
+  padding-inline-end: var(--input-padding-inline-end);
+  padding-top: var(--input-padding-y, 0rem);
+  padding-bottom: var(--input-padding-y, 0rem);
+  cursor: var(--input-cursor);
+  overflow: var(--input-overflow);
+}
+
+/* Used as data attribute in Textarea component, does not have associated prop on the Input component */
+
+.m_8fb7ebe7[data-no-overflow] {
+    --input-overflow: hidden;
+  }
+
+/* Used as data attribute in JsonInput component, does not have associated prop on the Input component */
+
+.m_8fb7ebe7[data-monospace] {
+    --input-font-family: var(--mantine-font-family-monospace);
+    --_input-fz: calc(var(--input-fz) - calc(0.125rem * var(--mantine-scale)));
+  }
+
+.m_8fb7ebe7:focus,
+  .m_8fb7ebe7:focus-within {
+    outline: none;
+    --input-bd: var(--input-bd-focus);
+  }
+
+[data-error] .m_8fb7ebe7:focus, [data-error] .m_8fb7ebe7:focus-within {
+      --input-bd: var(--mantine-color-error);
+    }
+
+.m_8fb7ebe7::placeholder {
+    color: var(--input-placeholder-color);
+    opacity: 1;
+  }
+
+.m_8fb7ebe7::-webkit-inner-spin-button,
+  .m_8fb7ebe7::-webkit-outer-spin-button,
+  .m_8fb7ebe7::-webkit-search-decoration,
+  .m_8fb7ebe7::-webkit-search-cancel-button,
+  .m_8fb7ebe7::-webkit-search-results-button,
+  .m_8fb7ebe7::-webkit-search-results-decoration {
+    appearance: none;
+  }
+
+.m_8fb7ebe7[type='number'] {
+    -moz-appearance: textfield;
+  }
+
+.m_8fb7ebe7:disabled,
+  .m_8fb7ebe7[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.6;
+    background-color: var(--input-disabled-bg);
+    color: var(--input-disabled-color);
+  }
+
+/* Required to be a separate selector to work in Firefox, can be merged with &:disabled once :has is supported */
+
+.m_8fb7ebe7:has(input:disabled) {
+    cursor: not-allowed;
+    opacity: 0.6;
+    background-color: var(--input-disabled-bg);
+    color: var(--input-disabled-color);
+  }
+
+.m_8fb7ebe7[readonly] {
+    caret-color: transparent;
+  }
+
+.m_82577fc2 {
+  pointer-events: var(--section-pointer-events);
+  position: absolute;
+  z-index: 1;
+  inset-inline-start: var(--section-start);
+  inset-inline-end: var(--section-end);
+  bottom: var(--section-y);
+  top: var(--section-y);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--section-size);
+  border-radius: var(--section-border-radius);
+  color: var(--input-section-color, var(--mantine-color-dimmed));
+}
+
+.m_82577fc2[data-position='right'] {
+    --section-pointer-events: var(--input-right-section-pointer-events);
+    --section-end: var(--right-section-end);
+    --section-size: var(--input-right-section-size);
+    --section-border-radius: var(--right-section-border-radius);
+  }
+
+.m_6c018570[data-size='xs'] .m_82577fc2[data-position='right']:has([data-combined-clear-section]) {
+        --section-size: 41px;
+      }
+
+.m_6c018570[data-size='sm'] .m_82577fc2[data-position='right']:has([data-combined-clear-section]) {
+        --section-size: 50px;
+      }
+
+.m_6c018570[data-size='md'] .m_82577fc2[data-position='right']:has([data-combined-clear-section]) {
+        --section-size: 60px;
+      }
+
+.m_6c018570[data-size='lg'] .m_82577fc2[data-position='right']:has([data-combined-clear-section]) {
+        --section-size: 72px;
+      }
+
+.m_6c018570[data-size='xl'] .m_82577fc2[data-position='right']:has([data-combined-clear-section]) {
+        --section-size: 89px;
+      }
+
+.m_82577fc2[data-position='left'] {
+    --section-pointer-events: var(--input-left-section-pointer-events);
+    --section-start: var(--left-section-start);
+    --section-size: var(--input-left-section-size);
+    --section-border-radius: var(--left-section-border-radius);
+  }
+
+/* ----- Input.Placeholder ----- */
+.m_88bacfd0 {
+  color: var(--input-placeholder-color, var(--mantine-color-placeholder));
+}
+[data-error] .m_88bacfd0 {
+    --input-placeholder-color: var(--input-color, var(--mantine-color-placeholder));
+  }
+
+/* ----- Input.Wrapper ----- */
+.m_46b77525 {
+  line-height: var(--mantine-line-height);
+}
+
+.m_8fdc1311 {
+  display: inline-block;
+  font-weight: 500;
+  overflow-wrap: break-word;
+  cursor: default;
+  -webkit-tap-highlight-color: transparent;
+  font-size: var(--input-label-size, var(--mantine-font-size-sm));
+}
+
+.m_78a94662 {
+  color: var(--input-asterisk-color, var(--mantine-color-error));
+}
+
+.m_8f816625,
+.m_fe47ce59 {
+  word-wrap: break-word;
+  line-height: 1.2;
+  display: block;
+  margin: 0;
+  padding: 0;
+}
+
+.m_8f816625 {
+  color: var(--mantine-color-error);
+  font-size: var(--input-error-size, calc(var(--mantine-font-size-sm) - calc(0.125rem * var(--mantine-scale))));
+}
+
+.m_fe47ce59 {
+  color: var(--mantine-color-dimmed);
+  font-size: var(--input-description-size, calc(var(--mantine-font-size-sm) - calc(0.125rem * var(--mantine-scale))));
+}

package/styles/Input.layer.css

@@ -0,0 +1,334 @@
+@layer mantine {.m_6c018570 {
+  position: relative;
+  margin-top: var(--input-margin-top, 0rem);
+  margin-bottom: var(--input-margin-bottom, 0rem);
+
+  --input-height-xs: 30px;
+  --input-height-sm: 36px;
+  --input-height-md: 42px;
+  --input-height-lg: 50px;
+  --input-height-xl: 60px;
+
+  --input-padding-y-xs: 5px;
+  --input-padding-y-sm: 6px;
+  --input-padding-y-md: 8px;
+  --input-padding-y-lg: 10px;
+  --input-padding-y-xl: 13px;
+
+  --input-height: var(--input-height-sm);
+  --input-radius: var(--mantine-radius-default);
+
+  --input-cursor: text;
+  --input-text-align: left;
+  --input-line-height: calc(var(--input-height) - calc(0.125rem * var(--mantine-scale)));
+  --input-padding: calc(var(--input-height) / 3);
+  --input-padding-inline-start: var(--input-padding);
+  --input-padding-inline-end: var(--input-padding);
+  --input-placeholder-color: var(--mantine-color-placeholder);
+  --input-color: var(--mantine-color-text);
+  --input-disabled-bg: var(--mantine-color-disabled);
+  --input-disabled-color: var(--mantine-color-disabled-color);
+
+  --input-left-section-size: var(--input-left-section-width, calc(var(--input-height) - calc(0.125rem * var(--mantine-scale))));
+
+  --input-right-section-size: var(
+    --input-right-section-width,
+    calc(var(--input-height) - calc(0.125rem * var(--mantine-scale)))
+  );
+
+  --input-size: var(--input-height);
+
+  --section-y: 1px;
+  --left-section-start: 1px;
+  --left-section-border-radius: var(--input-radius) 0 0 var(--input-radius);
+
+  --right-section-end: 1px;
+  --right-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;
+}
+
+  .m_6c018570[data-variant='unstyled'] {
+    --input-padding: 0;
+    --input-padding-y: 0;
+    --input-padding-inline-start: 0;
+    --input-padding-inline-end: 0;
+  }
+
+  .m_6c018570[data-pointer] {
+    --input-cursor: pointer;
+  }
+
+  .m_6c018570[data-multiline] {
+    --input-padding-y-xs: 4.5px;
+    --input-padding-y-sm: 5.5px;
+    --input-padding-y-md: 7px;
+    --input-padding-y-lg: 9.5px;
+    --input-padding-y-xl: 13px;
+
+    --input-size: auto;
+    --input-line-height: var(--mantine-line-height);
+  }
+
+  .m_6c018570[data-with-left-section] {
+    --input-padding-inline-start: var(--input-left-section-size);
+  }
+
+  .m_6c018570[data-with-right-section] {
+    --input-padding-inline-end: var(--input-right-section-size);
+  }
+
+  .m_6c018570[data-size='xs'] .m_6c018570[data-with-right-section]:has([data-combined-clear-section]) {
+        --input-padding-inline-end: 41px;
+      }
+
+  .m_6c018570[data-size='sm'] .m_6c018570[data-with-right-section]:has([data-combined-clear-section]) {
+        --input-padding-inline-end: 50px;
+      }
+
+  .m_6c018570[data-size='md'] .m_6c018570[data-with-right-section]:has([data-combined-clear-section]) {
+        --input-padding-inline-end: 60px;
+      }
+
+  .m_6c018570[data-size='lg'] .m_6c018570[data-with-right-section]:has([data-combined-clear-section]) {
+        --input-padding-inline-end: 72px;
+      }
+
+  .m_6c018570[data-size='xl'] .m_6c018570[data-with-right-section]:has([data-combined-clear-section]) {
+        --input-padding-inline-end: 89px;
+      }
+
+  [data-mantine-color-scheme='light'] .m_6c018570[data-variant='default'] {
+      --input-bd: var(--mantine-color-gray-4);
+      --input-bg: var(--mantine-color-white);
+      --input-bd-focus: var(--mantine-primary-color-filled);
+    }
+
+  [data-mantine-color-scheme='light'] .m_6c018570[data-variant='filled'] {
+      --input-bd: transparent;
+      --input-bg: var(--mantine-color-gray-1);
+      --input-bd-focus: var(--mantine-primary-color-filled);
+    }
+
+  [data-mantine-color-scheme='light'] .m_6c018570[data-variant='unstyled'] {
+      --input-bd: transparent;
+      --input-bg: transparent;
+      --input-bd-focus: transparent;
+    }
+
+  [data-mantine-color-scheme='dark'] .m_6c018570[data-variant='default'] {
+      --input-bd: var(--mantine-color-dark-4);
+      --input-bg: var(--mantine-color-dark-6);
+      --input-bd-focus: var(--mantine-primary-color-filled);
+    }
+
+  [data-mantine-color-scheme='dark'] .m_6c018570[data-variant='filled'] {
+      --input-bd: transparent;
+      --input-bg: var(--mantine-color-dark-5);
+      --input-bd-focus: var(--mantine-primary-color-filled);
+    }
+
+  [data-mantine-color-scheme='dark'] .m_6c018570[data-variant='unstyled'] {
+      --input-bd: transparent;
+      --input-bg: transparent;
+      --input-bd-focus: transparent;
+    }
+
+  [data-mantine-color-scheme] .m_6c018570[data-error]:not([data-variant='unstyled']) {
+      --input-bd: var(--mantine-color-error);
+    }
+
+  [data-mantine-color-scheme] .m_6c018570[data-error] {
+
+    --input-color: var(--mantine-color-error);
+    --input-placeholder-color: var(--mantine-color-error);
+    --input-section-color: var(--mantine-color-error);
+}
+
+  :where([dir="rtl"]) .m_6c018570 {
+    --input-text-align: right;
+    --left-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;
+    --right-section-border-radius: var(--input-radius) 0 0 var(--input-radius);
+}
+
+.m_8fb7ebe7 {
+  -webkit-tap-highlight-color: transparent;
+  appearance: none;
+  resize: var(--input-resize, none);
+  display: block;
+  width: 100%;
+  transition: border-color 100ms ease;
+
+  text-align: var(--input-text-align);
+  color: var(--input-color);
+  border: calc(0.0625rem * var(--mantine-scale)) solid var(--input-bd);
+  background-color: var(--input-bg);
+  font-family: var(--input-font-family, var(--mantine-font-family));
+  height: var(--input-size);
+  min-height: var(--input-height);
+  line-height: var(--input-line-height);
+  font-size: var(--_input-fz, var(--input-fz, var(--mantine-font-size-md)));
+  border-radius: var(--input-radius);
+  padding-inline-start: var(--input-padding-inline-start);
+  padding-inline-end: var(--input-padding-inline-end);
+  padding-top: var(--input-padding-y, 0rem);
+  padding-bottom: var(--input-padding-y, 0rem);
+  cursor: var(--input-cursor);
+  overflow: var(--input-overflow);
+}
+
+/* Used as data attribute in Textarea component, does not have associated prop on the Input component */
+
+.m_8fb7ebe7[data-no-overflow] {
+    --input-overflow: hidden;
+  }
+
+/* Used as data attribute in JsonInput component, does not have associated prop on the Input component */
+
+.m_8fb7ebe7[data-monospace] {
+    --input-font-family: var(--mantine-font-family-monospace);
+    --_input-fz: calc(var(--input-fz) - calc(0.125rem * var(--mantine-scale)));
+  }
+
+.m_8fb7ebe7:focus,
+  .m_8fb7ebe7:focus-within {
+    outline: none;
+    --input-bd: var(--input-bd-focus);
+  }
+
+[data-error] .m_8fb7ebe7:focus, [data-error] .m_8fb7ebe7:focus-within {
+      --input-bd: var(--mantine-color-error);
+    }
+
+.m_8fb7ebe7::placeholder {
+    color: var(--input-placeholder-color);
+    opacity: 1;
+  }
+
+.m_8fb7ebe7::-webkit-inner-spin-button,
+  .m_8fb7ebe7::-webkit-outer-spin-button,
+  .m_8fb7ebe7::-webkit-search-decoration,
+  .m_8fb7ebe7::-webkit-search-cancel-button,
+  .m_8fb7ebe7::-webkit-search-results-button,
+  .m_8fb7ebe7::-webkit-search-results-decoration {
+    appearance: none;
+  }
+
+.m_8fb7ebe7[type='number'] {
+    -moz-appearance: textfield;
+  }
+
+.m_8fb7ebe7:disabled,
+  .m_8fb7ebe7[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.6;
+    background-color: var(--input-disabled-bg);
+    color: var(--input-disabled-color);
+  }
+
+/* Required to be a separate selector to work in Firefox, can be merged with &:disabled once :has is supported */
+
+.m_8fb7ebe7:has(input:disabled) {
+    cursor: not-allowed;
+    opacity: 0.6;
+    background-color: var(--input-disabled-bg);
+    color: var(--input-disabled-color);
+  }
+
+.m_8fb7ebe7[readonly] {
+    caret-color: transparent;
+  }
+
+.m_82577fc2 {
+  pointer-events: var(--section-pointer-events);
+  position: absolute;
+  z-index: 1;
+  inset-inline-start: var(--section-start);
+  inset-inline-end: var(--section-end);
+  bottom: var(--section-y);
+  top: var(--section-y);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--section-size);
+  border-radius: var(--section-border-radius);
+  color: var(--input-section-color, var(--mantine-color-dimmed));
+}
+
+.m_82577fc2[data-position='right'] {
+    --section-pointer-events: var(--input-right-section-pointer-events);
+    --section-end: var(--right-section-end);
+    --section-size: var(--input-right-section-size);
+    --section-border-radius: var(--right-section-border-radius);
+  }
+
+.m_6c018570[data-size='xs'] .m_82577fc2[data-position='right']:has([data-combined-clear-section]) {
+        --section-size: 41px;
+      }
+
+.m_6c018570[data-size='sm'] .m_82577fc2[data-position='right']:has([data-combined-clear-section]) {
+        --section-size: 50px;
+      }
+
+.m_6c018570[data-size='md'] .m_82577fc2[data-position='right']:has([data-combined-clear-section]) {
+        --section-size: 60px;
+      }
+
+.m_6c018570[data-size='lg'] .m_82577fc2[data-position='right']:has([data-combined-clear-section]) {
+        --section-size: 72px;
+      }
+
+.m_6c018570[data-size='xl'] .m_82577fc2[data-position='right']:has([data-combined-clear-section]) {
+        --section-size: 89px;
+      }
+
+.m_82577fc2[data-position='left'] {
+    --section-pointer-events: var(--input-left-section-pointer-events);
+    --section-start: var(--left-section-start);
+    --section-size: var(--input-left-section-size);
+    --section-border-radius: var(--left-section-border-radius);
+  }
+
+/* ----- Input.Placeholder ----- */
+.m_88bacfd0 {
+  color: var(--input-placeholder-color, var(--mantine-color-placeholder));
+}
+[data-error] .m_88bacfd0 {
+    --input-placeholder-color: var(--input-color, var(--mantine-color-placeholder));
+  }
+
+/* ----- Input.Wrapper ----- */
+.m_46b77525 {
+  line-height: var(--mantine-line-height);
+}
+
+.m_8fdc1311 {
+  display: inline-block;
+  font-weight: 500;
+  overflow-wrap: break-word;
+  cursor: default;
+  -webkit-tap-highlight-color: transparent;
+  font-size: var(--input-label-size, var(--mantine-font-size-sm));
+}
+
+.m_78a94662 {
+  color: var(--input-asterisk-color, var(--mantine-color-error));
+}
+
+.m_8f816625,
+.m_fe47ce59 {
+  word-wrap: break-word;
+  line-height: 1.2;
+  display: block;
+  margin: 0;
+  padding: 0;
+}
+
+.m_8f816625 {
+  color: var(--mantine-color-error);
+  font-size: var(--input-error-size, calc(var(--mantine-font-size-sm) - calc(0.125rem * var(--mantine-scale))));
+}
+
+.m_fe47ce59 {
+  color: var(--mantine-color-dimmed);
+  font-size: var(--input-description-size, calc(var(--mantine-font-size-sm) - calc(0.125rem * var(--mantine-scale))));
+}
+}

package/styles/Kbd.css

@@ -0,0 +1,31 @@
+.m_dc6f14e2 {
+  --kbd-fz-xs: 10px;
+  --kbd-fz-sm: 12px;
+  --kbd-fz-md: 14px;
+  --kbd-fz-lg: 16px;
+  --kbd-fz-xl: 20px;
+  --kbd-fz: var(--kbd-fz-sm);
+
+  font-family: var(--mantine-font-family-monospace);
+  line-height: var(--mantine-line-height);
+  font-weight: 700;
+  font-size: var(--kbd-fz);
+  border-radius: var(--mantine-radius-sm);
+  border: 1px solid;
+  border-bottom-width: 3px;
+  unicode-bidi: embed;
+  text-align: center;
+  padding: 0.12em 0.45em;
+}
+
+  :where([data-mantine-color-scheme='light']) .m_dc6f14e2 {
+    border-color: var(--mantine-color-gray-3);
+    color: var(--mantine-color-gray-7);
+    background-color: var(--mantine-color-gray-0);
+}
+
+  :where([data-mantine-color-scheme='dark']) .m_dc6f14e2 {
+    border-color: var(--mantine-color-dark-4);
+    color: var(--mantine-color-dark-0);
+    background-color: var(--mantine-color-dark-6);
+}