@iress-oss/ids-mcp-server 5.14.2 → 6.0.0-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/generated/docs/components-alert-docs.md +579 -7
- package/generated/docs/components-autocomplete-docs.md +694 -15
- package/generated/docs/components-autocomplete-recipes-docs.md +1 -1
- package/generated/docs/components-badge-docs.md +442 -59
- package/generated/docs/components-button-docs.md +1150 -70
- package/generated/docs/components-buttongroup-docs.md +441 -3
- package/generated/docs/components-card-docs.md +487 -37
- package/generated/docs/components-checkbox-docs.md +506 -5
- package/generated/docs/components-checkboxgroup-docs.md +586 -191
- package/generated/docs/components-checkboxgroup-recipes-docs.md +3 -3
- package/generated/docs/components-col-docs.md +451 -36
- package/generated/docs/components-container-docs.md +32 -0
- package/generated/docs/components-divider-docs.md +427 -27
- package/generated/docs/components-expander-docs.md +487 -108
- package/generated/docs/components-field-docs.md +1400 -68
- package/generated/docs/components-filter-docs.md +269 -56
- package/generated/docs/components-hide-docs.md +447 -10
- package/generated/docs/components-icon-docs.md +522 -259
- package/generated/docs/components-image-docs.md +493 -0
- package/generated/docs/components-inline-docs.md +1179 -44
- package/generated/docs/components-input-docs.md +544 -12
- package/generated/docs/components-input-recipes-docs.md +4 -4
- package/generated/docs/components-inputcurrency-docs.md +532 -0
- package/generated/docs/components-inputcurrency-recipes-docs.md +4 -5
- package/generated/docs/components-introduction-docs.md +450 -0
- package/generated/docs/components-label-docs.md +454 -27
- package/generated/docs/components-link-docs.md +586 -0
- package/generated/docs/components-menu-docs.md +531 -89
- package/generated/docs/components-menu-menuitem-docs.md +556 -10
- package/generated/docs/components-modal-docs.md +814 -55
- package/generated/docs/components-panel-docs.md +418 -198
- package/generated/docs/components-placeholder-docs.md +420 -1
- package/generated/docs/components-popover-docs.md +1097 -32
- package/generated/docs/components-popover-recipes-docs.md +39 -73
- package/generated/docs/components-progress-docs.md +464 -0
- package/generated/docs/components-provider-docs.md +160 -0
- package/generated/docs/components-radio-docs.md +460 -4
- package/generated/docs/components-radiogroup-docs.md +586 -116
- package/generated/docs/components-readonly-docs.md +450 -4
- package/generated/docs/components-richselect-docs.md +4660 -1257
- package/generated/docs/components-row-docs.md +2065 -588
- package/generated/docs/components-select-docs.md +489 -5
- package/generated/docs/components-skeleton-docs.md +399 -16
- package/generated/docs/components-skeleton-recipes-docs.md +7 -7
- package/generated/docs/components-skiplink-docs.md +548 -27
- package/generated/docs/components-slideout-docs.md +648 -150
- package/generated/docs/components-slider-docs.md +515 -33
- package/generated/docs/components-spinner-docs.md +393 -2
- package/generated/docs/components-stack-docs.md +732 -74
- package/generated/docs/components-table-ag-grid-docs.md +501 -1723
- package/generated/docs/components-table-docs.md +1049 -27
- package/generated/docs/components-tabset-docs.md +454 -27
- package/generated/docs/components-tabset-tab-docs.md +464 -0
- package/generated/docs/components-tag-docs.md +452 -19
- package/generated/docs/components-text-docs.md +322 -131
- package/generated/docs/components-toaster-docs.md +512 -51
- package/generated/docs/components-toggle-docs.md +476 -20
- package/generated/docs/components-tooltip-docs.md +443 -7
- package/generated/docs/components-validationmessage-docs.md +933 -13
- package/generated/docs/extensions-editor-docs.md +906 -13
- package/generated/docs/extensions-editor-recipes-docs.md +51 -1
- package/generated/docs/foundations-accessibility-docs.md +1 -23
- package/generated/docs/foundations-grid-docs.md +74 -0
- package/generated/docs/foundations-introduction-docs.md +6 -4
- package/generated/docs/foundations-responsive-breakpoints-docs.md +193 -0
- package/generated/docs/foundations-tokens-colour-docs.md +564 -0
- package/generated/docs/foundations-tokens-elevation-docs.md +155 -0
- package/generated/docs/foundations-tokens-introduction-docs.md +190 -0
- package/generated/docs/foundations-tokens-radius-docs.md +71 -0
- package/generated/docs/foundations-tokens-spacing-docs.md +89 -0
- package/generated/docs/foundations-tokens-typography-docs.md +322 -0
- package/generated/docs/foundations-z-index-stacking-docs.md +31 -0
- package/generated/docs/get-started-develop-docs.md +177 -16
- package/generated/docs/guidelines.md +1537 -295
- package/generated/docs/introduction-docs.md +65 -21
- package/generated/docs/news-version-6-docs.md +93 -0
- package/generated/docs/patterns-form-docs.md +3902 -0
- package/generated/docs/patterns-form-recipes-docs.md +1370 -0
- package/generated/docs/patterns-introduction-docs.md +24 -0
- package/generated/docs/patterns-loading-docs.md +2942 -203
- package/generated/docs/resources-introduction-docs.md +38 -0
- package/generated/docs/resources-mcp-server-docs.md +27 -0
- package/generated/docs/styling-props-colour-docs.md +172 -0
- package/generated/docs/styling-props-elevation-docs.md +88 -0
- package/generated/docs/styling-props-radius-docs.md +86 -0
- package/generated/docs/styling-props-reference-docs.md +160 -0
- package/generated/docs/styling-props-screen-readers-docs.md +71 -0
- package/generated/docs/styling-props-sizing-docs.md +627 -0
- package/generated/docs/styling-props-spacing-docs.md +2282 -0
- package/generated/docs/styling-props-typography-docs.md +121 -0
- package/generated/docs/themes-available-themes-docs.md +29 -29
- package/generated/docs/themes-introduction-docs.md +1 -1
- package/package.json +3 -22
- package/generated/docs/components-button-recipes-docs.md +0 -76
- package/generated/docs/components-card-recipes-docs.md +0 -89
- package/generated/docs/components-combobox-docs.md +0 -1016
- package/generated/docs/components-form-docs.md +0 -2442
- package/generated/docs/components-form-recipes-docs.md +0 -892
- package/generated/docs/components-navbar-docs.md +0 -291
- package/generated/docs/components-navbar-recipes-docs.md +0 -413
- package/generated/docs/components-toaster-toast-docs.md +0 -157
- package/generated/docs/foundations-colours-docs.md +0 -257
- package/generated/docs/foundations-typography-docs.md +0 -191
- package/generated/docs/resources-changelog-docs.md +0 -6
- package/generated/docs/themes-tokens-docs.md +0 -1200
|
@@ -6,7 +6,7 @@ Overview
|
|
|
6
6
|
|
|
7
7
|
Editor allows you to edit and format rich text content, allowing users to create and edit text in a similar way to a word processor.
|
|
8
8
|
|
|
9
|
-
#\\:r11\\:--container{--mantine-scale: 1;--mantine-cursor-type: default;--mantine-color-scheme: light dark;--mantine-webkit-font-smoothing: antialiased;--mantine-moz-font-smoothing: grayscale;--mantine-color-white: #fff;--mantine-color-black: #000;--mantine-line-height: 1.55;--mantine-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;--mantine-font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-font-family-headings: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;--mantine-heading-font-weight: 700;--mantine-heading-text-wrap: wrap;--mantine-radius-default: calc(0.25rem \* var(--mantine-scale));--mantine-primary-color-filled: var(--mantine-color-blue-filled);--mantine-primary-color-filled-hover: var(--mantine-color-blue-filled-hover);--mantine-primary-color-light: var(--mantine-color-blue-light);--mantine-primary-color-light-hover: var(--mantine-color-blue-light-hover);--mantine-primary-color-light-color: var(--mantine-color-blue-light-color);--mantine-breakpoint-xs: 36em;--mantine-breakpoint-sm: 48em;--mantine-breakpoint-md: 62em;--mantine-breakpoint-lg: 75em;--mantine-breakpoint-xl: 88em;--mantine-spacing-xs: calc(0.625rem \* var(--mantine-scale));--mantine-spacing-sm: calc(0.75rem \* var(--mantine-scale));--mantine-spacing-md: calc(1rem \* var(--mantine-scale));--mantine-spacing-lg: calc(1.25rem \* var(--mantine-scale));--mantine-spacing-xl: calc(2rem \* var(--mantine-scale));--mantine-font-size-xs: calc(0.75rem \* var(--mantine-scale));--mantine-font-size-sm: calc(0.875rem \* var(--mantine-scale));--mantine-font-size-md: calc(1rem \* var(--mantine-scale));--mantine-font-size-lg: calc(1.125rem \* var(--mantine-scale));--mantine-font-size-xl: calc(1.25rem \* var(--mantine-scale));--mantine-line-height-xs: 1.4;--mantine-line-height-sm: 1.45;--mantine-line-height-md: 1.55;--mantine-line-height-lg: 1.6;--mantine-line-height-xl: 1.65;--mantine-shadow-xs: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.125rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.1);--mantine-shadow-sm: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(0.625rem \* var(--mantine-scale)) calc(0.9375rem \* var(--mantine-scale)) calc(-0.3125rem \* var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.4375rem \* var(--mantine-scale)) calc(0.4375rem \* var(--mantine-scale)) calc(-0.3125rem \* var(--mantine-scale));--mantine-shadow-md: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(1.25rem \* var(--mantine-scale)) calc(1.5625rem \* var(--mantine-scale)) calc(-0.3125rem \* var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.625rem \* var(--mantine-scale)) calc(0.625rem \* var(--mantine-scale)) calc(-0.3125rem \* var(--mantine-scale));--mantine-shadow-lg: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(1.75rem \* var(--mantine-scale)) calc(1.4375rem \* var(--mantine-scale)) calc(-0.4375rem \* var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.75rem \* var(--mantine-scale)) calc(0.75rem \* var(--mantine-scale)) calc(-0.4375rem \* var(--mantine-scale));--mantine-shadow-xl: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(2.25rem \* var(--mantine-scale)) calc(1.75rem \* var(--mantine-scale)) calc(-0.4375rem \* var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(1.0625rem \* var(--mantine-scale)) calc(1.0625rem \* var(--mantine-scale)) calc(-0.4375rem \* var(--mantine-scale));--mantine-radius-xs: calc(0.125rem \* var(--mantine-scale));--mantine-radius-sm: calc(0.25rem \* var(--mantine-scale));--mantine-radius-md: calc(0.5rem \* var(--mantine-scale));--mantine-radius-lg: calc(1rem \* var(--mantine-scale));--mantine-radius-xl: calc(2rem \* var(--mantine-scale));--mantine-primary-color-0: var(--mantine-color-blue-0);--mantine-primary-color-1: var(--mantine-color-blue-1);--mantine-primary-color-2: var(--mantine-color-blue-2);--mantine-primary-color-3: var(--mantine-color-blue-3);--mantine-primary-color-4: var(--mantine-color-blue-4);--mantine-primary-color-5: var(--mantine-color-blue-5);--mantine-primary-color-6: var(--mantine-color-blue-6);--mantine-primary-color-7: var(--mantine-color-blue-7);--mantine-primary-color-8: var(--mantine-color-blue-8);--mantine-primary-color-9: var(--mantine-color-blue-9);--mantine-color-dark-0: #C9C9C9;--mantine-color-dark-1: #b8b8b8;--mantine-color-dark-2: #828282;--mantine-color-dark-3: #696969;--mantine-color-dark-4: #424242;--mantine-color-dark-5: #3b3b3b;--mantine-color-dark-6: #2e2e2e;--mantine-color-dark-7: #242424;--mantine-color-dark-8: #1f1f1f;--mantine-color-dark-9: #141414;--mantine-color-gray-0: #f8f9fa;--mantine-color-gray-1: #f1f3f5;--mantine-color-gray-2: #e9ecef;--mantine-color-gray-3: #dee2e6;--mantine-color-gray-4: #ced4da;--mantine-color-gray-5: #adb5bd;--mantine-color-gray-6: #868e96;--mantine-color-gray-7: #495057;--mantine-color-gray-8: #343a40;--mantine-color-gray-9: #212529;--mantine-color-red-0: #fff5f5;--mantine-color-red-1: #ffe3e3;--mantine-color-red-2: #ffc9c9;--mantine-color-red-3: #ffa8a8;--mantine-color-red-4: #ff8787;--mantine-color-red-5: #ff6b6b;--mantine-color-red-6: #fa5252;--mantine-color-red-7: #f03e3e;--mantine-color-red-8: #e03131;--mantine-color-red-9: #c92a2a;--mantine-color-pink-0: #fff0f6;--mantine-color-pink-1: #ffdeeb;--mantine-color-pink-2: #fcc2d7;--mantine-color-pink-3: #faa2c1;--mantine-color-pink-4: #f783ac;--mantine-color-pink-5: #f06595;--mantine-color-pink-6: #e64980;--mantine-color-pink-7: #d6336c;--mantine-color-pink-8: #c2255c;--mantine-color-pink-9: #a61e4d;--mantine-color-grape-0: #f8f0fc;--mantine-color-grape-1: #f3d9fa;--mantine-color-grape-2: #eebefa;--mantine-color-grape-3: #e599f7;--mantine-color-grape-4: #da77f2;--mantine-color-grape-5: #cc5de8;--mantine-color-grape-6: #be4bdb;--mantine-color-grape-7: #ae3ec9;--mantine-color-grape-8: #9c36b5;--mantine-color-grape-9: #862e9c;--mantine-color-violet-0: #f3f0ff;--mantine-color-violet-1: #e5dbff;--mantine-color-violet-2: #d0bfff;--mantine-color-violet-3: #b197fc;--mantine-color-violet-4: #9775fa;--mantine-color-violet-5: #845ef7;--mantine-color-violet-6: #7950f2;--mantine-color-violet-7: #7048e8;--mantine-color-violet-8: #6741d9;--mantine-color-violet-9: #5f3dc4;--mantine-color-indigo-0: #edf2ff;--mantine-color-indigo-1: #dbe4ff;--mantine-color-indigo-2: #bac8ff;--mantine-color-indigo-3: #91a7ff;--mantine-color-indigo-4: #748ffc;--mantine-color-indigo-5: #5c7cfa;--mantine-color-indigo-6: #4c6ef5;--mantine-color-indigo-7: #4263eb;--mantine-color-indigo-8: #3b5bdb;--mantine-color-indigo-9: #364fc7;--mantine-color-blue-0: #e7f5ff;--mantine-color-blue-1: #d0ebff;--mantine-color-blue-2: #a5d8ff;--mantine-color-blue-3: #74c0fc;--mantine-color-blue-4: #4dabf7;--mantine-color-blue-5: #339af0;--mantine-color-blue-6: #228be6;--mantine-color-blue-7: #1c7ed6;--mantine-color-blue-8: #1971c2;--mantine-color-blue-9: #1864ab;--mantine-color-cyan-0: #e3fafc;--mantine-color-cyan-1: #c5f6fa;--mantine-color-cyan-2: #99e9f2;--mantine-color-cyan-3: #66d9e8;--mantine-color-cyan-4: #3bc9db;--mantine-color-cyan-5: #22b8cf;--mantine-color-cyan-6: #15aabf;--mantine-color-cyan-7: #1098ad;--mantine-color-cyan-8: #0c8599;--mantine-color-cyan-9: #0b7285;--mantine-color-teal-0: #e6fcf5;--mantine-color-teal-1: #c3fae8;--mantine-color-teal-2: #96f2d7;--mantine-color-teal-3: #63e6be;--mantine-color-teal-4: #38d9a9;--mantine-color-teal-5: #20c997;--mantine-color-teal-6: #12b886;--mantine-color-teal-7: #0ca678;--mantine-color-teal-8: #099268;--mantine-color-teal-9: #087f5b;--mantine-color-green-0: #ebfbee;--mantine-color-green-1: #d3f9d8;--mantine-color-green-2: #b2f2bb;--mantine-color-green-3: #8ce99a;--mantine-color-green-4: #69db7c;--mantine-color-green-5: #51cf66;--mantine-color-green-6: #40c057;--mantine-color-green-7: #37b24d;--mantine-color-green-8: #2f9e44;--mantine-color-green-9: #2b8a3e;--mantine-color-lime-0: #f4fce3;--mantine-color-lime-1: #e9fac8;--mantine-color-lime-2: #d8f5a2;--mantine-color-lime-3: #c0eb75;--mantine-color-lime-4: #a9e34b;--mantine-color-lime-5: #94d82d;--mantine-color-lime-6: #82c91e;--mantine-color-lime-7: #74b816;--mantine-color-lime-8: #66a80f;--mantine-color-lime-9: #5c940d;--mantine-color-yellow-0: #fff9db;--mantine-color-yellow-1: #fff3bf;--mantine-color-yellow-2: #ffec99;--mantine-color-yellow-3: #ffe066;--mantine-color-yellow-4: #ffd43b;--mantine-color-yellow-5: #fcc419;--mantine-color-yellow-6: #fab005;--mantine-color-yellow-7: #f59f00;--mantine-color-yellow-8: #f08c00;--mantine-color-yellow-9: #e67700;--mantine-color-orange-0: #fff4e6;--mantine-color-orange-1: #ffe8cc;--mantine-color-orange-2: #ffd8a8;--mantine-color-orange-3: #ffc078;--mantine-color-orange-4: #ffa94d;--mantine-color-orange-5: #ff922b;--mantine-color-orange-6: #fd7e14;--mantine-color-orange-7: #f76707;--mantine-color-orange-8: #e8590c;--mantine-color-orange-9: #d9480f;--mantine-h1-font-size: calc(2.125rem \* var(--mantine-scale));--mantine-h1-line-height: 1.3;--mantine-h1-font-weight: 700;--mantine-h2-font-size: calc(1.625rem \* var(--mantine-scale));--mantine-h2-line-height: 1.35;--mantine-h2-font-weight: 700;--mantine-h3-font-size: calc(1.375rem \* var(--mantine-scale));--mantine-h3-line-height: 1.4;--mantine-h3-font-weight: 700;--mantine-h4-font-size: calc(1.125rem \* var(--mantine-scale));--mantine-h4-line-height: 1.45;--mantine-h4-font-weight: 700;--mantine-h5-font-size: calc(1rem \* var(--mantine-scale));--mantine-h5-line-height: 1.5;--mantine-h5-font-weight: 700;--mantine-h6-font-size: calc(0.875rem \* var(--mantine-scale));--mantine-h6-line-height: 1.5;--mantine-h6-font-weight: 700;}#\\:r11\\:--container\[data-mantine-color-scheme="dark"\]{--mantine-primary-color-contrast: var(--mantine-color-white);--mantine-color-bright: var(--mantine-color-white);--mantine-color-text: var(--mantine-color-dark-0);--mantine-color-body: var(--mantine-color-dark-7);--mantine-color-error: var(--mantine-color-red-8);--mantine-color-placeholder: var(--mantine-color-dark-3);--mantine-color-anchor: var(--mantine-color-blue-4);--mantine-color-default: var(--mantine-color-dark-6);--mantine-color-default-hover: var(--mantine-color-dark-5);--mantine-color-default-color: var(--mantine-color-white);--mantine-color-default-border: var(--mantine-color-dark-4);--mantine-color-dimmed: var(--mantine-color-dark-2);--mantine-color-disabled: var(--mantine-color-dark-6);--mantine-color-disabled-color: var(--mantine-color-dark-3);--mantine-color-disabled-border: var(--mantine-color-gray-6);--mantine-color-dark-text: var(--mantine-color-dark-4);--mantine-color-dark-filled: var(--mantine-color-dark-8);--mantine-color-dark-filled-hover: var(--mantine-color-dark-9);--mantine-color-dark-light: rgba(46, 46, 46, 0.15);--mantine-color-dark-light-hover: rgba(46, 46, 46, 0.2);--mantine-color-dark-light-color: var(--mantine-color-dark-3);--mantine-color-dark-outline: var(--mantine-color-dark-4);--mantine-color-dark-outline-hover: rgba(66, 66, 66, 0.05);--mantine-color-gray-text: var(--mantine-color-gray-4);--mantine-color-gray-filled: var(--mantine-color-gray-8);--mantine-color-gray-filled-hover: var(--mantine-color-gray-9);--mantine-color-gray-light: rgba(134, 142, 150, 0.15);--mantine-color-gray-light-hover: rgba(134, 142, 150, 0.2);--mantine-color-gray-light-color: var(--mantine-color-gray-3);--mantine-color-gray-outline: var(--mantine-color-gray-4);--mantine-color-gray-outline-hover: rgba(206, 212, 218, 0.05);--mantine-color-red-text: var(--mantine-color-red-4);--mantine-color-red-filled: var(--mantine-color-red-8);--mantine-color-red-filled-hover: var(--mantine-color-red-9);--mantine-color-red-light: rgba(250, 82, 82, 0.15);--mantine-color-red-light-hover: rgba(250, 82, 82, 0.2);--mantine-color-red-light-color: var(--mantine-color-red-3);--mantine-color-red-outline: var(--mantine-color-red-4);--mantine-color-red-outline-hover: rgba(255, 135, 135, 0.05);--mantine-color-pink-text: var(--mantine-color-pink-4);--mantine-color-pink-filled: var(--mantine-color-pink-8);--mantine-color-pink-filled-hover: var(--mantine-color-pink-9);--mantine-color-pink-light: rgba(230, 73, 128, 0.15);--mantine-color-pink-light-hover: rgba(230, 73, 128, 0.2);--mantine-color-pink-light-color: var(--mantine-color-pink-3);--mantine-color-pink-outline: var(--mantine-color-pink-4);--mantine-color-pink-outline-hover: rgba(247, 131, 172, 0.05);--mantine-color-grape-text: var(--mantine-color-grape-4);--mantine-color-grape-filled: var(--mantine-color-grape-8);--mantine-color-grape-filled-hover: var(--mantine-color-grape-9);--mantine-color-grape-light: rgba(190, 75, 219, 0.15);--mantine-color-grape-light-hover: rgba(190, 75, 219, 0.2);--mantine-color-grape-light-color: var(--mantine-color-grape-3);--mantine-color-grape-outline: var(--mantine-color-grape-4);--mantine-color-grape-outline-hover: rgba(218, 119, 242, 0.05);--mantine-color-violet-text: var(--mantine-color-violet-4);--mantine-color-violet-filled: var(--mantine-color-violet-8);--mantine-color-violet-filled-hover: var(--mantine-color-violet-9);--mantine-color-violet-light: rgba(121, 80, 242, 0.15);--mantine-color-violet-light-hover: rgba(121, 80, 242, 0.2);--mantine-color-violet-light-color: var(--mantine-color-violet-3);--mantine-color-violet-outline: var(--mantine-color-violet-4);--mantine-color-violet-outline-hover: rgba(151, 117, 250, 0.05);--mantine-color-indigo-text: var(--mantine-color-indigo-4);--mantine-color-indigo-filled: var(--mantine-color-indigo-8);--mantine-color-indigo-filled-hover: var(--mantine-color-indigo-9);--mantine-color-indigo-light: rgba(76, 110, 245, 0.15);--mantine-color-indigo-light-hover: rgba(76, 110, 245, 0.2);--mantine-color-indigo-light-color: var(--mantine-color-indigo-3);--mantine-color-indigo-outline: var(--mantine-color-indigo-4);--mantine-color-indigo-outline-hover: rgba(116, 143, 252, 0.05);--mantine-color-blue-text: var(--mantine-color-blue-4);--mantine-color-blue-filled: var(--mantine-color-blue-8);--mantine-color-blue-filled-hover: var(--mantine-color-blue-9);--mantine-color-blue-light: rgba(34, 139, 230, 0.15);--mantine-color-blue-light-hover: rgba(34, 139, 230, 0.2);--mantine-color-blue-light-color: var(--mantine-color-blue-3);--mantine-color-blue-outline: var(--mantine-color-blue-4);--mantine-color-blue-outline-hover: rgba(77, 171, 247, 0.05);--mantine-color-cyan-text: var(--mantine-color-cyan-4);--mantine-color-cyan-filled: var(--mantine-color-cyan-8);--mantine-color-cyan-filled-hover: var(--mantine-color-cyan-9);--mantine-color-cyan-light: rgba(21, 170, 191, 0.15);--mantine-color-cyan-light-hover: rgba(21, 170, 191, 0.2);--mantine-color-cyan-light-color: var(--mantine-color-cyan-3);--mantine-color-cyan-outline: var(--mantine-color-cyan-4);--mantine-color-cyan-outline-hover: rgba(59, 201, 219, 0.05);--mantine-color-teal-text: var(--mantine-color-teal-4);--mantine-color-teal-filled: var(--mantine-color-teal-8);--mantine-color-teal-filled-hover: var(--mantine-color-teal-9);--mantine-color-teal-light: rgba(18, 184, 134, 0.15);--mantine-color-teal-light-hover: rgba(18, 184, 134, 0.2);--mantine-color-teal-light-color: var(--mantine-color-teal-3);--mantine-color-teal-outline: var(--mantine-color-teal-4);--mantine-color-teal-outline-hover: rgba(56, 217, 169, 0.05);--mantine-color-green-text: var(--mantine-color-green-4);--mantine-color-green-filled: var(--mantine-color-green-8);--mantine-color-green-filled-hover: var(--mantine-color-green-9);--mantine-color-green-light: rgba(64, 192, 87, 0.15);--mantine-color-green-light-hover: rgba(64, 192, 87, 0.2);--mantine-color-green-light-color: var(--mantine-color-green-3);--mantine-color-green-outline: var(--mantine-color-green-4);--mantine-color-green-outline-hover: rgba(105, 219, 124, 0.05);--mantine-color-lime-text: var(--mantine-color-lime-4);--mantine-color-lime-filled: var(--mantine-color-lime-8);--mantine-color-lime-filled-hover: var(--mantine-color-lime-9);--mantine-color-lime-light: rgba(130, 201, 30, 0.15);--mantine-color-lime-light-hover: rgba(130, 201, 30, 0.2);--mantine-color-lime-light-color: var(--mantine-color-lime-3);--mantine-color-lime-outline: var(--mantine-color-lime-4);--mantine-color-lime-outline-hover: rgba(169, 227, 75, 0.05);--mantine-color-yellow-text: var(--mantine-color-yellow-4);--mantine-color-yellow-filled: var(--mantine-color-yellow-8);--mantine-color-yellow-filled-hover: var(--mantine-color-yellow-9);--mantine-color-yellow-light: rgba(250, 176, 5, 0.15);--mantine-color-yellow-light-hover: rgba(250, 176, 5, 0.2);--mantine-color-yellow-light-color: var(--mantine-color-yellow-3);--mantine-color-yellow-outline: var(--mantine-color-yellow-4);--mantine-color-yellow-outline-hover: rgba(255, 212, 59, 0.05);--mantine-color-orange-text: var(--mantine-color-orange-4);--mantine-color-orange-filled: var(--mantine-color-orange-8);--mantine-color-orange-filled-hover: var(--mantine-color-orange-9);--mantine-color-orange-light: rgba(253, 126, 20, 0.15);--mantine-color-orange-light-hover: rgba(253, 126, 20, 0.2);--mantine-color-orange-light-color: var(--mantine-color-orange-3);--mantine-color-orange-outline: var(--mantine-color-orange-4);--mantine-color-orange-outline-hover: rgba(255, 169, 77, 0.05);}#\\:r11\\:--container\[data-mantine-color-scheme="light"\]{--mantine-primary-color-contrast: var(--mantine-color-white);--mantine-color-bright: var(--mantine-color-black);--mantine-color-text: #000;--mantine-color-body: #fff;--mantine-color-error: var(--mantine-color-red-6);--mantine-color-placeholder: var(--mantine-color-gray-5);--mantine-color-anchor: var(--mantine-color-blue-6);--mantine-color-default: var(--mantine-color-white);--mantine-color-default-hover: var(--mantine-color-gray-0);--mantine-color-default-color: var(--mantine-color-black);--mantine-color-default-border: var(--mantine-color-gray-4);--mantine-color-dimmed: var(--mantine-color-gray-6);--mantine-color-disabled: var(--mantine-color-gray-2);--mantine-color-disabled-color: var(--mantine-color-gray-5);--mantine-color-disabled-border: var(--mantine-color-gray-3);--mantine-color-dark-text: var(--mantine-color-dark-filled);--mantine-color-dark-filled: var(--mantine-color-dark-6);--mantine-color-dark-filled-hover: var(--mantine-color-dark-7);--mantine-color-dark-light: rgba(46, 46, 46, 0.1);--mantine-color-dark-light-hover: rgba(46, 46, 46, 0.12);--mantine-color-dark-light-color: var(--mantine-color-dark-6);--mantine-color-dark-outline: var(--mantine-color-dark-6);--mantine-color-dark-outline-hover: rgba(46, 46, 46, 0.05);--mantine-color-gray-text: var(--mantine-color-gray-filled);--mantine-color-gray-filled: var(--mantine-color-gray-6);--mantine-color-gray-filled-hover: var(--mantine-color-gray-7);--mantine-color-gray-light: rgba(134, 142, 150, 0.1);--mantine-color-gray-light-hover: rgba(134, 142, 150, 0.12);--mantine-color-gray-light-color: var(--mantine-color-gray-6);--mantine-color-gray-outline: var(--mantine-color-gray-6);--mantine-color-gray-outline-hover: rgba(134, 142, 150, 0.05);--mantine-color-red-text: var(--mantine-color-red-filled);--mantine-color-red-filled: var(--mantine-color-red-6);--mantine-color-red-filled-hover: var(--mantine-color-red-7);--mantine-color-red-light: rgba(250, 82, 82, 0.1);--mantine-color-red-light-hover: rgba(250, 82, 82, 0.12);--mantine-color-red-light-color: var(--mantine-color-red-6);--mantine-color-red-outline: var(--mantine-color-red-6);--mantine-color-red-outline-hover: rgba(250, 82, 82, 0.05);--mantine-color-pink-text: var(--mantine-color-pink-filled);--mantine-color-pink-filled: var(--mantine-color-pink-6);--mantine-color-pink-filled-hover: var(--mantine-color-pink-7);--mantine-color-pink-light: rgba(230, 73, 128, 0.1);--mantine-color-pink-light-hover: rgba(230, 73, 128, 0.12);--mantine-color-pink-light-color: var(--mantine-color-pink-6);--mantine-color-pink-outline: var(--mantine-color-pink-6);--mantine-color-pink-outline-hover: rgba(230, 73, 128, 0.05);--mantine-color-grape-text: var(--mantine-color-grape-filled);--mantine-color-grape-filled: var(--mantine-color-grape-6);--mantine-color-grape-filled-hover: var(--mantine-color-grape-7);--mantine-color-grape-light: rgba(190, 75, 219, 0.1);--mantine-color-grape-light-hover: rgba(190, 75, 219, 0.12);--mantine-color-grape-light-color: var(--mantine-color-grape-6);--mantine-color-grape-outline: var(--mantine-color-grape-6);--mantine-color-grape-outline-hover: rgba(190, 75, 219, 0.05);--mantine-color-violet-text: var(--mantine-color-violet-filled);--mantine-color-violet-filled: var(--mantine-color-violet-6);--mantine-color-violet-filled-hover: var(--mantine-color-violet-7);--mantine-color-violet-light: rgba(121, 80, 242, 0.1);--mantine-color-violet-light-hover: rgba(121, 80, 242, 0.12);--mantine-color-violet-light-color: var(--mantine-color-violet-6);--mantine-color-violet-outline: var(--mantine-color-violet-6);--mantine-color-violet-outline-hover: rgba(121, 80, 242, 0.05);--mantine-color-indigo-text: var(--mantine-color-indigo-filled);--mantine-color-indigo-filled: var(--mantine-color-indigo-6);--mantine-color-indigo-filled-hover: var(--mantine-color-indigo-7);--mantine-color-indigo-light: rgba(76, 110, 245, 0.1);--mantine-color-indigo-light-hover: rgba(76, 110, 245, 0.12);--mantine-color-indigo-light-color: var(--mantine-color-indigo-6);--mantine-color-indigo-outline: var(--mantine-color-indigo-6);--mantine-color-indigo-outline-hover: rgba(76, 110, 245, 0.05);--mantine-color-blue-text: var(--mantine-color-blue-filled);--mantine-color-blue-filled: var(--mantine-color-blue-6);--mantine-color-blue-filled-hover: var(--mantine-color-blue-7);--mantine-color-blue-light: rgba(34, 139, 230, 0.1);--mantine-color-blue-light-hover: rgba(34, 139, 230, 0.12);--mantine-color-blue-light-color: var(--mantine-color-blue-6);--mantine-color-blue-outline: var(--mantine-color-blue-6);--mantine-color-blue-outline-hover: rgba(34, 139, 230, 0.05);--mantine-color-cyan-text: var(--mantine-color-cyan-filled);--mantine-color-cyan-filled: var(--mantine-color-cyan-6);--mantine-color-cyan-filled-hover: var(--mantine-color-cyan-7);--mantine-color-cyan-light: rgba(21, 170, 191, 0.1);--mantine-color-cyan-light-hover: rgba(21, 170, 191, 0.12);--mantine-color-cyan-light-color: var(--mantine-color-cyan-6);--mantine-color-cyan-outline: var(--mantine-color-cyan-6);--mantine-color-cyan-outline-hover: rgba(21, 170, 191, 0.05);--mantine-color-teal-text: var(--mantine-color-teal-filled);--mantine-color-teal-filled: var(--mantine-color-teal-6);--mantine-color-teal-filled-hover: var(--mantine-color-teal-7);--mantine-color-teal-light: rgba(18, 184, 134, 0.1);--mantine-color-teal-light-hover: rgba(18, 184, 134, 0.12);--mantine-color-teal-light-color: var(--mantine-color-teal-6);--mantine-color-teal-outline: var(--mantine-color-teal-6);--mantine-color-teal-outline-hover: rgba(18, 184, 134, 0.05);--mantine-color-green-text: var(--mantine-color-green-filled);--mantine-color-green-filled: var(--mantine-color-green-6);--mantine-color-green-filled-hover: var(--mantine-color-green-7);--mantine-color-green-light: rgba(64, 192, 87, 0.1);--mantine-color-green-light-hover: rgba(64, 192, 87, 0.12);--mantine-color-green-light-color: var(--mantine-color-green-6);--mantine-color-green-outline: var(--mantine-color-green-6);--mantine-color-green-outline-hover: rgba(64, 192, 87, 0.05);--mantine-color-lime-text: var(--mantine-color-lime-filled);--mantine-color-lime-filled: var(--mantine-color-lime-6);--mantine-color-lime-filled-hover: var(--mantine-color-lime-7);--mantine-color-lime-light: rgba(130, 201, 30, 0.1);--mantine-color-lime-light-hover: rgba(130, 201, 30, 0.12);--mantine-color-lime-light-color: var(--mantine-color-lime-6);--mantine-color-lime-outline: var(--mantine-color-lime-6);--mantine-color-lime-outline-hover: rgba(130, 201, 30, 0.05);--mantine-color-yellow-text: var(--mantine-color-yellow-filled);--mantine-color-yellow-filled: var(--mantine-color-yellow-6);--mantine-color-yellow-filled-hover: var(--mantine-color-yellow-7);--mantine-color-yellow-light: rgba(250, 176, 5, 0.1);--mantine-color-yellow-light-hover: rgba(250, 176, 5, 0.12);--mantine-color-yellow-light-color: var(--mantine-color-yellow-6);--mantine-color-yellow-outline: var(--mantine-color-yellow-6);--mantine-color-yellow-outline-hover: rgba(250, 176, 5, 0.05);--mantine-color-orange-text: var(--mantine-color-orange-filled);--mantine-color-orange-filled: var(--mantine-color-orange-6);--mantine-color-orange-filled-hover: var(--mantine-color-orange-7);--mantine-color-orange-light: rgba(253, 126, 20, 0.1);--mantine-color-orange-light-hover: rgba(253, 126, 20, 0.12);--mantine-color-orange-light-color: var(--mantine-color-orange-6);--mantine-color-orange-outline: var(--mantine-color-orange-6);--mantine-color-orange-outline-hover: rgba(253, 126, 20, 0.05);} #\\:r11\\:--container\[data-mantine-color-scheme="dark"\] { --mantine-color-scheme: dark; } #\\:r11\\:--container\[data-mantine-color-scheme="light"\] { --mantine-color-scheme: light; }
|
|
9
|
+
#\\:ru\\:--container{--mantine-z-index-app: 100;--mantine-z-index-modal: 200;--mantine-z-index-popover: 300;--mantine-z-index-overlay: 400;--mantine-z-index-max: 9999;--mantine-scale: 1;--mantine-cursor-type: default;--mantine-webkit-font-smoothing: antialiased;--mantine-moz-font-smoothing: grayscale;--mantine-color-white: #fff;--mantine-color-black: #000;--mantine-line-height: 1.55;--mantine-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;--mantine-font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-font-family-headings: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;--mantine-heading-font-weight: 700;--mantine-heading-text-wrap: wrap;--mantine-radius-default: calc(0.25rem \* var(--mantine-scale));--mantine-primary-color-filled: var(--mantine-color-blue-filled);--mantine-primary-color-filled-hover: var(--mantine-color-blue-filled-hover);--mantine-primary-color-light: var(--mantine-color-blue-light);--mantine-primary-color-light-hover: var(--mantine-color-blue-light-hover);--mantine-primary-color-light-color: var(--mantine-color-blue-light-color);--mantine-breakpoint-xs: 36em;--mantine-breakpoint-sm: 48em;--mantine-breakpoint-md: 62em;--mantine-breakpoint-lg: 75em;--mantine-breakpoint-xl: 88em;--mantine-spacing-xs: calc(0.625rem \* var(--mantine-scale));--mantine-spacing-sm: calc(0.75rem \* var(--mantine-scale));--mantine-spacing-md: calc(1rem \* var(--mantine-scale));--mantine-spacing-lg: calc(1.25rem \* var(--mantine-scale));--mantine-spacing-xl: calc(2rem \* var(--mantine-scale));--mantine-font-size-xs: calc(0.75rem \* var(--mantine-scale));--mantine-font-size-sm: calc(0.875rem \* var(--mantine-scale));--mantine-font-size-md: calc(1rem \* var(--mantine-scale));--mantine-font-size-lg: calc(1.125rem \* var(--mantine-scale));--mantine-font-size-xl: calc(1.25rem \* var(--mantine-scale));--mantine-line-height-xs: 1.4;--mantine-line-height-sm: 1.45;--mantine-line-height-md: 1.55;--mantine-line-height-lg: 1.6;--mantine-line-height-xl: 1.65;--mantine-shadow-xs: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.125rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.1);--mantine-shadow-sm: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(0.625rem \* var(--mantine-scale)) calc(0.9375rem \* var(--mantine-scale)) calc(-0.3125rem \* var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.4375rem \* var(--mantine-scale)) calc(0.4375rem \* var(--mantine-scale)) calc(-0.3125rem \* var(--mantine-scale));--mantine-shadow-md: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(1.25rem \* var(--mantine-scale)) calc(1.5625rem \* var(--mantine-scale)) calc(-0.3125rem \* var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.625rem \* var(--mantine-scale)) calc(0.625rem \* var(--mantine-scale)) calc(-0.3125rem \* var(--mantine-scale));--mantine-shadow-lg: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(1.75rem \* var(--mantine-scale)) calc(1.4375rem \* var(--mantine-scale)) calc(-0.4375rem \* var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.75rem \* var(--mantine-scale)) calc(0.75rem \* var(--mantine-scale)) calc(-0.4375rem \* var(--mantine-scale));--mantine-shadow-xl: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(2.25rem \* var(--mantine-scale)) calc(1.75rem \* var(--mantine-scale)) calc(-0.4375rem \* var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(1.0625rem \* var(--mantine-scale)) calc(1.0625rem \* var(--mantine-scale)) calc(-0.4375rem \* var(--mantine-scale));--mantine-radius-xs: calc(0.125rem \* var(--mantine-scale));--mantine-radius-sm: calc(0.25rem \* var(--mantine-scale));--mantine-radius-md: calc(0.5rem \* var(--mantine-scale));--mantine-radius-lg: calc(1rem \* var(--mantine-scale));--mantine-radius-xl: calc(2rem \* var(--mantine-scale));--mantine-primary-color-0: var(--mantine-color-blue-0);--mantine-primary-color-1: var(--mantine-color-blue-1);--mantine-primary-color-2: var(--mantine-color-blue-2);--mantine-primary-color-3: var(--mantine-color-blue-3);--mantine-primary-color-4: var(--mantine-color-blue-4);--mantine-primary-color-5: var(--mantine-color-blue-5);--mantine-primary-color-6: var(--mantine-color-blue-6);--mantine-primary-color-7: var(--mantine-color-blue-7);--mantine-primary-color-8: var(--mantine-color-blue-8);--mantine-primary-color-9: var(--mantine-color-blue-9);--mantine-color-dark-0: #C9C9C9;--mantine-color-dark-1: #b8b8b8;--mantine-color-dark-2: #828282;--mantine-color-dark-3: #696969;--mantine-color-dark-4: #424242;--mantine-color-dark-5: #3b3b3b;--mantine-color-dark-6: #2e2e2e;--mantine-color-dark-7: #242424;--mantine-color-dark-8: #1f1f1f;--mantine-color-dark-9: #141414;--mantine-color-gray-0: #f8f9fa;--mantine-color-gray-1: #f1f3f5;--mantine-color-gray-2: #e9ecef;--mantine-color-gray-3: #dee2e6;--mantine-color-gray-4: #ced4da;--mantine-color-gray-5: #adb5bd;--mantine-color-gray-6: #868e96;--mantine-color-gray-7: #495057;--mantine-color-gray-8: #343a40;--mantine-color-gray-9: #212529;--mantine-color-red-0: #fff5f5;--mantine-color-red-1: #ffe3e3;--mantine-color-red-2: #ffc9c9;--mantine-color-red-3: #ffa8a8;--mantine-color-red-4: #ff8787;--mantine-color-red-5: #ff6b6b;--mantine-color-red-6: #fa5252;--mantine-color-red-7: #f03e3e;--mantine-color-red-8: #e03131;--mantine-color-red-9: #c92a2a;--mantine-color-pink-0: #fff0f6;--mantine-color-pink-1: #ffdeeb;--mantine-color-pink-2: #fcc2d7;--mantine-color-pink-3: #faa2c1;--mantine-color-pink-4: #f783ac;--mantine-color-pink-5: #f06595;--mantine-color-pink-6: #e64980;--mantine-color-pink-7: #d6336c;--mantine-color-pink-8: #c2255c;--mantine-color-pink-9: #a61e4d;--mantine-color-grape-0: #f8f0fc;--mantine-color-grape-1: #f3d9fa;--mantine-color-grape-2: #eebefa;--mantine-color-grape-3: #e599f7;--mantine-color-grape-4: #da77f2;--mantine-color-grape-5: #cc5de8;--mantine-color-grape-6: #be4bdb;--mantine-color-grape-7: #ae3ec9;--mantine-color-grape-8: #9c36b5;--mantine-color-grape-9: #862e9c;--mantine-color-violet-0: #f3f0ff;--mantine-color-violet-1: #e5dbff;--mantine-color-violet-2: #d0bfff;--mantine-color-violet-3: #b197fc;--mantine-color-violet-4: #9775fa;--mantine-color-violet-5: #845ef7;--mantine-color-violet-6: #7950f2;--mantine-color-violet-7: #7048e8;--mantine-color-violet-8: #6741d9;--mantine-color-violet-9: #5f3dc4;--mantine-color-indigo-0: #edf2ff;--mantine-color-indigo-1: #dbe4ff;--mantine-color-indigo-2: #bac8ff;--mantine-color-indigo-3: #91a7ff;--mantine-color-indigo-4: #748ffc;--mantine-color-indigo-5: #5c7cfa;--mantine-color-indigo-6: #4c6ef5;--mantine-color-indigo-7: #4263eb;--mantine-color-indigo-8: #3b5bdb;--mantine-color-indigo-9: #364fc7;--mantine-color-blue-0: #e7f5ff;--mantine-color-blue-1: #d0ebff;--mantine-color-blue-2: #a5d8ff;--mantine-color-blue-3: #74c0fc;--mantine-color-blue-4: #4dabf7;--mantine-color-blue-5: #339af0;--mantine-color-blue-6: #228be6;--mantine-color-blue-7: #1c7ed6;--mantine-color-blue-8: #1971c2;--mantine-color-blue-9: #1864ab;--mantine-color-cyan-0: #e3fafc;--mantine-color-cyan-1: #c5f6fa;--mantine-color-cyan-2: #99e9f2;--mantine-color-cyan-3: #66d9e8;--mantine-color-cyan-4: #3bc9db;--mantine-color-cyan-5: #22b8cf;--mantine-color-cyan-6: #15aabf;--mantine-color-cyan-7: #1098ad;--mantine-color-cyan-8: #0c8599;--mantine-color-cyan-9: #0b7285;--mantine-color-teal-0: #e6fcf5;--mantine-color-teal-1: #c3fae8;--mantine-color-teal-2: #96f2d7;--mantine-color-teal-3: #63e6be;--mantine-color-teal-4: #38d9a9;--mantine-color-teal-5: #20c997;--mantine-color-teal-6: #12b886;--mantine-color-teal-7: #0ca678;--mantine-color-teal-8: #099268;--mantine-color-teal-9: #087f5b;--mantine-color-green-0: #ebfbee;--mantine-color-green-1: #d3f9d8;--mantine-color-green-2: #b2f2bb;--mantine-color-green-3: #8ce99a;--mantine-color-green-4: #69db7c;--mantine-color-green-5: #51cf66;--mantine-color-green-6: #40c057;--mantine-color-green-7: #37b24d;--mantine-color-green-8: #2f9e44;--mantine-color-green-9: #2b8a3e;--mantine-color-lime-0: #f4fce3;--mantine-color-lime-1: #e9fac8;--mantine-color-lime-2: #d8f5a2;--mantine-color-lime-3: #c0eb75;--mantine-color-lime-4: #a9e34b;--mantine-color-lime-5: #94d82d;--mantine-color-lime-6: #82c91e;--mantine-color-lime-7: #74b816;--mantine-color-lime-8: #66a80f;--mantine-color-lime-9: #5c940d;--mantine-color-yellow-0: #fff9db;--mantine-color-yellow-1: #fff3bf;--mantine-color-yellow-2: #ffec99;--mantine-color-yellow-3: #ffe066;--mantine-color-yellow-4: #ffd43b;--mantine-color-yellow-5: #fcc419;--mantine-color-yellow-6: #fab005;--mantine-color-yellow-7: #f59f00;--mantine-color-yellow-8: #f08c00;--mantine-color-yellow-9: #e67700;--mantine-color-orange-0: #fff4e6;--mantine-color-orange-1: #ffe8cc;--mantine-color-orange-2: #ffd8a8;--mantine-color-orange-3: #ffc078;--mantine-color-orange-4: #ffa94d;--mantine-color-orange-5: #ff922b;--mantine-color-orange-6: #fd7e14;--mantine-color-orange-7: #f76707;--mantine-color-orange-8: #e8590c;--mantine-color-orange-9: #d9480f;--mantine-h1-font-size: calc(2.125rem \* var(--mantine-scale));--mantine-h1-line-height: 1.3;--mantine-h1-font-weight: 700;--mantine-h2-font-size: calc(1.625rem \* var(--mantine-scale));--mantine-h2-line-height: 1.35;--mantine-h2-font-weight: 700;--mantine-h3-font-size: calc(1.375rem \* var(--mantine-scale));--mantine-h3-line-height: 1.4;--mantine-h3-font-weight: 700;--mantine-h4-font-size: calc(1.125rem \* var(--mantine-scale));--mantine-h4-line-height: 1.45;--mantine-h4-font-weight: 700;--mantine-h5-font-size: calc(1rem \* var(--mantine-scale));--mantine-h5-line-height: 1.5;--mantine-h5-font-weight: 700;--mantine-h6-font-size: calc(0.875rem \* var(--mantine-scale));--mantine-h6-line-height: 1.5;--mantine-h6-font-weight: 700;} #\\:ru\\:--container\[data-mantine-color-scheme="dark"\]{--mantine-color-scheme: dark;--mantine-primary-color-contrast: var(--mantine-color-white);--mantine-color-bright: var(--mantine-color-white);--mantine-color-text: var(--mantine-color-dark-0);--mantine-color-body: var(--mantine-color-dark-7);--mantine-color-error: var(--mantine-color-red-8);--mantine-color-placeholder: var(--mantine-color-dark-3);--mantine-color-anchor: var(--mantine-color-blue-4);--mantine-color-default: var(--mantine-color-dark-6);--mantine-color-default-hover: var(--mantine-color-dark-5);--mantine-color-default-color: var(--mantine-color-white);--mantine-color-default-border: var(--mantine-color-dark-4);--mantine-color-dimmed: var(--mantine-color-dark-2);--mantine-color-disabled: var(--mantine-color-dark-6);--mantine-color-disabled-color: var(--mantine-color-dark-3);--mantine-color-disabled-border: var(--mantine-color-dark-4);--mantine-color-dark-text: var(--mantine-color-dark-4);--mantine-color-dark-filled: var(--mantine-color-dark-8);--mantine-color-dark-filled-hover: var(--mantine-color-dark-9);--mantine-color-dark-light: rgba(46, 46, 46, 0.15);--mantine-color-dark-light-hover: rgba(46, 46, 46, 0.2);--mantine-color-dark-light-color: var(--mantine-color-dark-3);--mantine-color-dark-outline: var(--mantine-color-dark-4);--mantine-color-dark-outline-hover: rgba(66, 66, 66, 0.05);--mantine-color-gray-text: var(--mantine-color-gray-4);--mantine-color-gray-filled: var(--mantine-color-gray-8);--mantine-color-gray-filled-hover: var(--mantine-color-gray-9);--mantine-color-gray-light: rgba(134, 142, 150, 0.15);--mantine-color-gray-light-hover: rgba(134, 142, 150, 0.2);--mantine-color-gray-light-color: var(--mantine-color-gray-3);--mantine-color-gray-outline: var(--mantine-color-gray-4);--mantine-color-gray-outline-hover: rgba(206, 212, 218, 0.05);--mantine-color-red-text: var(--mantine-color-red-4);--mantine-color-red-filled: var(--mantine-color-red-8);--mantine-color-red-filled-hover: var(--mantine-color-red-9);--mantine-color-red-light: rgba(250, 82, 82, 0.15);--mantine-color-red-light-hover: rgba(250, 82, 82, 0.2);--mantine-color-red-light-color: var(--mantine-color-red-3);--mantine-color-red-outline: var(--mantine-color-red-4);--mantine-color-red-outline-hover: rgba(255, 135, 135, 0.05);--mantine-color-pink-text: var(--mantine-color-pink-4);--mantine-color-pink-filled: var(--mantine-color-pink-8);--mantine-color-pink-filled-hover: var(--mantine-color-pink-9);--mantine-color-pink-light: rgba(230, 73, 128, 0.15);--mantine-color-pink-light-hover: rgba(230, 73, 128, 0.2);--mantine-color-pink-light-color: var(--mantine-color-pink-3);--mantine-color-pink-outline: var(--mantine-color-pink-4);--mantine-color-pink-outline-hover: rgba(247, 131, 172, 0.05);--mantine-color-grape-text: var(--mantine-color-grape-4);--mantine-color-grape-filled: var(--mantine-color-grape-8);--mantine-color-grape-filled-hover: var(--mantine-color-grape-9);--mantine-color-grape-light: rgba(190, 75, 219, 0.15);--mantine-color-grape-light-hover: rgba(190, 75, 219, 0.2);--mantine-color-grape-light-color: var(--mantine-color-grape-3);--mantine-color-grape-outline: var(--mantine-color-grape-4);--mantine-color-grape-outline-hover: rgba(218, 119, 242, 0.05);--mantine-color-violet-text: var(--mantine-color-violet-4);--mantine-color-violet-filled: var(--mantine-color-violet-8);--mantine-color-violet-filled-hover: var(--mantine-color-violet-9);--mantine-color-violet-light: rgba(121, 80, 242, 0.15);--mantine-color-violet-light-hover: rgba(121, 80, 242, 0.2);--mantine-color-violet-light-color: var(--mantine-color-violet-3);--mantine-color-violet-outline: var(--mantine-color-violet-4);--mantine-color-violet-outline-hover: rgba(151, 117, 250, 0.05);--mantine-color-indigo-text: var(--mantine-color-indigo-4);--mantine-color-indigo-filled: var(--mantine-color-indigo-8);--mantine-color-indigo-filled-hover: var(--mantine-color-indigo-9);--mantine-color-indigo-light: rgba(76, 110, 245, 0.15);--mantine-color-indigo-light-hover: rgba(76, 110, 245, 0.2);--mantine-color-indigo-light-color: var(--mantine-color-indigo-3);--mantine-color-indigo-outline: var(--mantine-color-indigo-4);--mantine-color-indigo-outline-hover: rgba(116, 143, 252, 0.05);--mantine-color-blue-text: var(--mantine-color-blue-4);--mantine-color-blue-filled: var(--mantine-color-blue-8);--mantine-color-blue-filled-hover: var(--mantine-color-blue-9);--mantine-color-blue-light: rgba(34, 139, 230, 0.15);--mantine-color-blue-light-hover: rgba(34, 139, 230, 0.2);--mantine-color-blue-light-color: var(--mantine-color-blue-3);--mantine-color-blue-outline: var(--mantine-color-blue-4);--mantine-color-blue-outline-hover: rgba(77, 171, 247, 0.05);--mantine-color-cyan-text: var(--mantine-color-cyan-4);--mantine-color-cyan-filled: var(--mantine-color-cyan-8);--mantine-color-cyan-filled-hover: var(--mantine-color-cyan-9);--mantine-color-cyan-light: rgba(21, 170, 191, 0.15);--mantine-color-cyan-light-hover: rgba(21, 170, 191, 0.2);--mantine-color-cyan-light-color: var(--mantine-color-cyan-3);--mantine-color-cyan-outline: var(--mantine-color-cyan-4);--mantine-color-cyan-outline-hover: rgba(59, 201, 219, 0.05);--mantine-color-teal-text: var(--mantine-color-teal-4);--mantine-color-teal-filled: var(--mantine-color-teal-8);--mantine-color-teal-filled-hover: var(--mantine-color-teal-9);--mantine-color-teal-light: rgba(18, 184, 134, 0.15);--mantine-color-teal-light-hover: rgba(18, 184, 134, 0.2);--mantine-color-teal-light-color: var(--mantine-color-teal-3);--mantine-color-teal-outline: var(--mantine-color-teal-4);--mantine-color-teal-outline-hover: rgba(56, 217, 169, 0.05);--mantine-color-green-text: var(--mantine-color-green-4);--mantine-color-green-filled: var(--mantine-color-green-8);--mantine-color-green-filled-hover: var(--mantine-color-green-9);--mantine-color-green-light: rgba(64, 192, 87, 0.15);--mantine-color-green-light-hover: rgba(64, 192, 87, 0.2);--mantine-color-green-light-color: var(--mantine-color-green-3);--mantine-color-green-outline: var(--mantine-color-green-4);--mantine-color-green-outline-hover: rgba(105, 219, 124, 0.05);--mantine-color-lime-text: var(--mantine-color-lime-4);--mantine-color-lime-filled: var(--mantine-color-lime-8);--mantine-color-lime-filled-hover: var(--mantine-color-lime-9);--mantine-color-lime-light: rgba(130, 201, 30, 0.15);--mantine-color-lime-light-hover: rgba(130, 201, 30, 0.2);--mantine-color-lime-light-color: var(--mantine-color-lime-3);--mantine-color-lime-outline: var(--mantine-color-lime-4);--mantine-color-lime-outline-hover: rgba(169, 227, 75, 0.05);--mantine-color-yellow-text: var(--mantine-color-yellow-4);--mantine-color-yellow-filled: var(--mantine-color-yellow-8);--mantine-color-yellow-filled-hover: var(--mantine-color-yellow-9);--mantine-color-yellow-light: rgba(250, 176, 5, 0.15);--mantine-color-yellow-light-hover: rgba(250, 176, 5, 0.2);--mantine-color-yellow-light-color: var(--mantine-color-yellow-3);--mantine-color-yellow-outline: var(--mantine-color-yellow-4);--mantine-color-yellow-outline-hover: rgba(255, 212, 59, 0.05);--mantine-color-orange-text: var(--mantine-color-orange-4);--mantine-color-orange-filled: var(--mantine-color-orange-8);--mantine-color-orange-filled-hover: var(--mantine-color-orange-9);--mantine-color-orange-light: rgba(253, 126, 20, 0.15);--mantine-color-orange-light-hover: rgba(253, 126, 20, 0.2);--mantine-color-orange-light-color: var(--mantine-color-orange-3);--mantine-color-orange-outline: var(--mantine-color-orange-4);--mantine-color-orange-outline-hover: rgba(255, 169, 77, 0.05);} #\\:ru\\:--container\[data-mantine-color-scheme="light"\]{--mantine-color-scheme: light;--mantine-primary-color-contrast: var(--mantine-color-white);--mantine-color-bright: var(--mantine-color-black);--mantine-color-text: #000;--mantine-color-body: #fff;--mantine-color-error: var(--mantine-color-red-6);--mantine-color-placeholder: var(--mantine-color-gray-5);--mantine-color-anchor: var(--mantine-color-blue-6);--mantine-color-default: var(--mantine-color-white);--mantine-color-default-hover: var(--mantine-color-gray-0);--mantine-color-default-color: var(--mantine-color-black);--mantine-color-default-border: var(--mantine-color-gray-4);--mantine-color-dimmed: var(--mantine-color-gray-6);--mantine-color-disabled: var(--mantine-color-gray-2);--mantine-color-disabled-color: var(--mantine-color-gray-5);--mantine-color-disabled-border: var(--mantine-color-gray-3);--mantine-color-dark-text: var(--mantine-color-dark-filled);--mantine-color-dark-filled: var(--mantine-color-dark-6);--mantine-color-dark-filled-hover: var(--mantine-color-dark-7);--mantine-color-dark-light: rgba(46, 46, 46, 0.1);--mantine-color-dark-light-hover: rgba(46, 46, 46, 0.12);--mantine-color-dark-light-color: var(--mantine-color-dark-6);--mantine-color-dark-outline: var(--mantine-color-dark-6);--mantine-color-dark-outline-hover: rgba(46, 46, 46, 0.05);--mantine-color-gray-text: var(--mantine-color-gray-filled);--mantine-color-gray-filled: var(--mantine-color-gray-6);--mantine-color-gray-filled-hover: var(--mantine-color-gray-7);--mantine-color-gray-light: rgba(134, 142, 150, 0.1);--mantine-color-gray-light-hover: rgba(134, 142, 150, 0.12);--mantine-color-gray-light-color: var(--mantine-color-gray-6);--mantine-color-gray-outline: var(--mantine-color-gray-6);--mantine-color-gray-outline-hover: rgba(134, 142, 150, 0.05);--mantine-color-red-text: var(--mantine-color-red-filled);--mantine-color-red-filled: var(--mantine-color-red-6);--mantine-color-red-filled-hover: var(--mantine-color-red-7);--mantine-color-red-light: rgba(250, 82, 82, 0.1);--mantine-color-red-light-hover: rgba(250, 82, 82, 0.12);--mantine-color-red-light-color: var(--mantine-color-red-6);--mantine-color-red-outline: var(--mantine-color-red-6);--mantine-color-red-outline-hover: rgba(250, 82, 82, 0.05);--mantine-color-pink-text: var(--mantine-color-pink-filled);--mantine-color-pink-filled: var(--mantine-color-pink-6);--mantine-color-pink-filled-hover: var(--mantine-color-pink-7);--mantine-color-pink-light: rgba(230, 73, 128, 0.1);--mantine-color-pink-light-hover: rgba(230, 73, 128, 0.12);--mantine-color-pink-light-color: var(--mantine-color-pink-6);--mantine-color-pink-outline: var(--mantine-color-pink-6);--mantine-color-pink-outline-hover: rgba(230, 73, 128, 0.05);--mantine-color-grape-text: var(--mantine-color-grape-filled);--mantine-color-grape-filled: var(--mantine-color-grape-6);--mantine-color-grape-filled-hover: var(--mantine-color-grape-7);--mantine-color-grape-light: rgba(190, 75, 219, 0.1);--mantine-color-grape-light-hover: rgba(190, 75, 219, 0.12);--mantine-color-grape-light-color: var(--mantine-color-grape-6);--mantine-color-grape-outline: var(--mantine-color-grape-6);--mantine-color-grape-outline-hover: rgba(190, 75, 219, 0.05);--mantine-color-violet-text: var(--mantine-color-violet-filled);--mantine-color-violet-filled: var(--mantine-color-violet-6);--mantine-color-violet-filled-hover: var(--mantine-color-violet-7);--mantine-color-violet-light: rgba(121, 80, 242, 0.1);--mantine-color-violet-light-hover: rgba(121, 80, 242, 0.12);--mantine-color-violet-light-color: var(--mantine-color-violet-6);--mantine-color-violet-outline: var(--mantine-color-violet-6);--mantine-color-violet-outline-hover: rgba(121, 80, 242, 0.05);--mantine-color-indigo-text: var(--mantine-color-indigo-filled);--mantine-color-indigo-filled: var(--mantine-color-indigo-6);--mantine-color-indigo-filled-hover: var(--mantine-color-indigo-7);--mantine-color-indigo-light: rgba(76, 110, 245, 0.1);--mantine-color-indigo-light-hover: rgba(76, 110, 245, 0.12);--mantine-color-indigo-light-color: var(--mantine-color-indigo-6);--mantine-color-indigo-outline: var(--mantine-color-indigo-6);--mantine-color-indigo-outline-hover: rgba(76, 110, 245, 0.05);--mantine-color-blue-text: var(--mantine-color-blue-filled);--mantine-color-blue-filled: var(--mantine-color-blue-6);--mantine-color-blue-filled-hover: var(--mantine-color-blue-7);--mantine-color-blue-light: rgba(34, 139, 230, 0.1);--mantine-color-blue-light-hover: rgba(34, 139, 230, 0.12);--mantine-color-blue-light-color: var(--mantine-color-blue-6);--mantine-color-blue-outline: var(--mantine-color-blue-6);--mantine-color-blue-outline-hover: rgba(34, 139, 230, 0.05);--mantine-color-cyan-text: var(--mantine-color-cyan-filled);--mantine-color-cyan-filled: var(--mantine-color-cyan-6);--mantine-color-cyan-filled-hover: var(--mantine-color-cyan-7);--mantine-color-cyan-light: rgba(21, 170, 191, 0.1);--mantine-color-cyan-light-hover: rgba(21, 170, 191, 0.12);--mantine-color-cyan-light-color: var(--mantine-color-cyan-6);--mantine-color-cyan-outline: var(--mantine-color-cyan-6);--mantine-color-cyan-outline-hover: rgba(21, 170, 191, 0.05);--mantine-color-teal-text: var(--mantine-color-teal-filled);--mantine-color-teal-filled: var(--mantine-color-teal-6);--mantine-color-teal-filled-hover: var(--mantine-color-teal-7);--mantine-color-teal-light: rgba(18, 184, 134, 0.1);--mantine-color-teal-light-hover: rgba(18, 184, 134, 0.12);--mantine-color-teal-light-color: var(--mantine-color-teal-6);--mantine-color-teal-outline: var(--mantine-color-teal-6);--mantine-color-teal-outline-hover: rgba(18, 184, 134, 0.05);--mantine-color-green-text: var(--mantine-color-green-filled);--mantine-color-green-filled: var(--mantine-color-green-6);--mantine-color-green-filled-hover: var(--mantine-color-green-7);--mantine-color-green-light: rgba(64, 192, 87, 0.1);--mantine-color-green-light-hover: rgba(64, 192, 87, 0.12);--mantine-color-green-light-color: var(--mantine-color-green-6);--mantine-color-green-outline: var(--mantine-color-green-6);--mantine-color-green-outline-hover: rgba(64, 192, 87, 0.05);--mantine-color-lime-text: var(--mantine-color-lime-filled);--mantine-color-lime-filled: var(--mantine-color-lime-6);--mantine-color-lime-filled-hover: var(--mantine-color-lime-7);--mantine-color-lime-light: rgba(130, 201, 30, 0.1);--mantine-color-lime-light-hover: rgba(130, 201, 30, 0.12);--mantine-color-lime-light-color: var(--mantine-color-lime-6);--mantine-color-lime-outline: var(--mantine-color-lime-6);--mantine-color-lime-outline-hover: rgba(130, 201, 30, 0.05);--mantine-color-yellow-text: var(--mantine-color-yellow-filled);--mantine-color-yellow-filled: var(--mantine-color-yellow-6);--mantine-color-yellow-filled-hover: var(--mantine-color-yellow-7);--mantine-color-yellow-light: rgba(250, 176, 5, 0.1);--mantine-color-yellow-light-hover: rgba(250, 176, 5, 0.12);--mantine-color-yellow-light-color: var(--mantine-color-yellow-6);--mantine-color-yellow-outline: var(--mantine-color-yellow-6);--mantine-color-yellow-outline-hover: rgba(250, 176, 5, 0.05);--mantine-color-orange-text: var(--mantine-color-orange-filled);--mantine-color-orange-filled: var(--mantine-color-orange-6);--mantine-color-orange-filled-hover: var(--mantine-color-orange-7);--mantine-color-orange-light: rgba(253, 126, 20, 0.1);--mantine-color-orange-light-hover: rgba(253, 126, 20, 0.12);--mantine-color-orange-light-color: var(--mantine-color-orange-6);--mantine-color-orange-outline: var(--mantine-color-orange-6);--mantine-color-orange-outline-hover: rgba(253, 126, 20, 0.05);} #\\:ru\\:--container\[data-mantine-color-scheme="dark"\] { --mantine-color-scheme: dark; } #\\:ru\\:--container\[data-mantine-color-scheme="light"\] { --mantine-color-scheme: light; }
|
|
10
10
|
|
|
11
11
|
Welcome to the IressEditor
|
|
12
12
|
--------------------------
|
|
@@ -43,6 +43,449 @@ Hide code
|
|
|
43
43
|
|
|
44
44
|
Copy
|
|
45
45
|
|
|
46
|
+
[](#props)Props
|
|
47
|
+
---------------
|
|
48
|
+
|
|
49
|
+
| Name | Description | Default | Control |
|
|
50
|
+
| --- | --- | --- | --- |
|
|
51
|
+
| bg |
|
|
52
|
+
**`bg`** sets the background color of an element using the `background-color` css property using the color tokens in the design system.
|
|
53
|
+
|
|
54
|
+
We recommend using the following token values for best background contrast:
|
|
55
|
+
|
|
56
|
+
* `colour.primary.fill` for primary backgrounds that need to stand out
|
|
57
|
+
* `colour.primary.surface` for primary backgrounds that need to be less prominent
|
|
58
|
+
* `colour.neutral.10` for the base background color, normally white in light mode or shade of grey in dark mode
|
|
59
|
+
* `colour.neutral.20` for a slightly darker background color, used in neutral state components
|
|
60
|
+
* `colour.system.danger.fill` for error backgrounds that need to stand out
|
|
61
|
+
* `colour.system.danger.surface` for error backgrounds that need to be less prominent
|
|
62
|
+
* `colour.system.success.fill` for success backgrounds that need to stand out
|
|
63
|
+
* `colour.system.success.surface` for success backgrounds that need to be less prominent
|
|
64
|
+
* `colour.system.warning.fill` for warning backgrounds that need to stand out
|
|
65
|
+
* `colour.system.warning.surface` for warning backgrounds that need to be less prominent
|
|
66
|
+
* `colour.system.info.fill` for info backgrounds that need to stand out
|
|
67
|
+
* `colour.system.info.surface` for info backgrounds that need to be less prominent
|
|
68
|
+
|
|
69
|
+
ResponsiveProp<ColorToken> | undefined
|
|
70
|
+
|
|
71
|
+
| \- | Set object |
|
|
72
|
+
| borderRadius |
|
|
73
|
+
|
|
74
|
+
The **`border-radius`** CSS property rounds the corners of an element's outer border edge using the radius tokens in the design system.
|
|
75
|
+
|
|
76
|
+
| Chrome | Firefox | Safari | Edge | IE |
|
|
77
|
+
| --- | --- | --- | --- | --- |
|
|
78
|
+
| **4** | **4** | **5** | **12** | **9** |
|
|
79
|
+
| 1 _\-x-_ | | 3 _\-x-_ | | |
|
|
80
|
+
|
|
81
|
+
ResponsiveProp<RadiusToken> | undefined
|
|
82
|
+
|
|
83
|
+
| \- | Set object |
|
|
84
|
+
| children |
|
|
85
|
+
|
|
86
|
+
Content to be grouped using a panel.
|
|
87
|
+
|
|
88
|
+
ReactNode
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
| \- | Set object |
|
|
93
|
+
| color |
|
|
94
|
+
|
|
95
|
+
The **`color`** CSS property sets the foreground color value of an element's text and text decorations using the colour tokens from the design system. It also sets the `currentcolor` value. `currentcolor` may be used as an indirect value on _other_ properties and is the default for other color properties, such as `border-color`.
|
|
96
|
+
|
|
97
|
+
We recommend using the following token values for best color contrast:
|
|
98
|
+
|
|
99
|
+
* `colour.primary.onFill` used on top of `colour.primary.fill` for primary text that needs to stand out
|
|
100
|
+
* `colour.primary.text` used on top of `colour.primary.surface` or `colour.neutral.10` for primary text that needs to be less prominent
|
|
101
|
+
* `colour.neutral.70` used on top of `colour.neutral.10` or `colour.neutral.20` for muted text
|
|
102
|
+
* `colour.neutral.80` used on top of `colour.neutral.10` or `colour.neutral.20` for standard text
|
|
103
|
+
* `colour.system.danger.onFill` used on top of `colour.system.danger.fill` for error text that needs to stand out
|
|
104
|
+
* `colour.system.danger.text` used on top of `colour.system.danger.surface` for error text that needs to be less prominent
|
|
105
|
+
* `colour.system.success.onFill` used on top of `colour.system.success.fill` for success text that needs to stand out
|
|
106
|
+
* `colour.system.success.text` used on top of `colour.system.success.surface` for success text that needs to be less prominent
|
|
107
|
+
* `colour.system.warning.onFill` used on top of `colour.system.warning.fill` for warning text that needs to stand out
|
|
108
|
+
* `colour.system.warning.text` used on top of `colour.system.warning.surface` for warning text that needs to be less prominent
|
|
109
|
+
* `colour.system.info.onFill` used on top of `colour.system.info.fill` for informative text that needs to stand out
|
|
110
|
+
* `colour.system.info.text` used on top of `colour.system.info.surface` for informative text that needs to be less prominent
|
|
111
|
+
|
|
112
|
+
ResponsiveProp<ColorToken> | undefined
|
|
113
|
+
|
|
114
|
+
| \- | Set object |
|
|
115
|
+
| focusable |
|
|
116
|
+
|
|
117
|
+
The `focusable` prop is used to apply the focus elevation when focused. It can be set to `true` to apply focus styles on focus, or `'within'` to apply focus styles when the element or any of its children are focused.
|
|
118
|
+
|
|
119
|
+
"true""within"undefined
|
|
120
|
+
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
| \- | Set object |
|
|
124
|
+
| hide |
|
|
125
|
+
|
|
126
|
+
Set **`hide`** to hide an element completely using `display: none`. It can also be set to an object of breakpoints to hide the element at specific breakpoints.
|
|
127
|
+
|
|
128
|
+
Hide on all breakpoints: `hide: true` Hide on specific breakpoints: `hide: { xs: false, sm: true, md: false, lg: true, xl: false, xxl: true }`
|
|
129
|
+
|
|
130
|
+
Notes:
|
|
131
|
+
|
|
132
|
+
* If you need to hide an element but allow it to be visible to screen readers, use the `srOnly` prop instead.
|
|
133
|
+
* Consider if you can conditionally render the element instead of hiding it.
|
|
134
|
+
|
|
135
|
+
ResponsiveProp<boolean> | undefined
|
|
136
|
+
|
|
137
|
+
| \- | Set object |
|
|
138
|
+
| layerStyle |
|
|
139
|
+
|
|
140
|
+
Elevate a layer by using a **`layerStyle`**. These are connected to the elevation tokens in the design system. They can be combined to create hierarchy and structure.
|
|
141
|
+
|
|
142
|
+
* `elevation.raised`: Raised elevations sit slightly higher than other content. They are reserved for cards that can be moved, such as Jira issue cards and Trello cards. In special circumstances, they can be used for cards as a way to provide additional heirarchy or emphasis.
|
|
143
|
+
* `elevation.floating`: Floating is the highest elevation available. It is reserved for a UI that sits over another UI, such as modals, dialogs, dropdown menus, floating toolbars, and floating single-action buttons.
|
|
144
|
+
* `elevation.overflow`: Overflow is a shadow indicating content has scrolled outside a view. It can be used for vertical or horizontal scroll. An example of overflow shadows is the horizontal scroll in tables on a Confluence page.
|
|
145
|
+
|
|
146
|
+
ResponsiveProp<"elevation.raised" | "elevation.floating" | "elevation.overflow" | "elevation.focus" | "elevation.focusCompact"> | undefined
|
|
147
|
+
|
|
148
|
+
| \- | Set object |
|
|
149
|
+
| m |
|
|
150
|
+
|
|
151
|
+
The **`m`** property is short for `margin`, and sets the margin area on all four sides of an element.
|
|
152
|
+
|
|
153
|
+
It uses the spacing tokens in the design system. You can also use the negative values to overlap elements or ignore padding based on the design requirements.
|
|
154
|
+
|
|
155
|
+
| Chrome | Firefox | Safari | Edge | IE |
|
|
156
|
+
| --- | --- | --- | --- | --- |
|
|
157
|
+
| **1** | **1** | **1** | **12** | **3** |
|
|
158
|
+
|
|
159
|
+
ResponsiveProp<"auto" | SpacingToken> | undefined
|
|
160
|
+
|
|
161
|
+
| \- | Set object |
|
|
162
|
+
| maxWidth |
|
|
163
|
+
|
|
164
|
+
The **`max-width`** CSS property sets the maximum width of an element. It prevents the used value of the `width` property from becoming larger than the value specified by `max-width`.
|
|
165
|
+
|
|
166
|
+
| Chrome | Firefox | Safari | Edge | IE |
|
|
167
|
+
| --- | --- | --- | --- | --- |
|
|
168
|
+
| **1** | **1** | **1** | **12** | **7** |
|
|
169
|
+
|
|
170
|
+
ResponsiveProp<"auto" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | ... 6 more ... | SizeToken> | undefined
|
|
171
|
+
|
|
172
|
+
| \- | Set object |
|
|
173
|
+
| mb |
|
|
174
|
+
|
|
175
|
+
The **`mb`** property is short for `margin-bottom` and sets the margin area on the bottom side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
|
|
176
|
+
|
|
177
|
+
It uses the spacing tokens in the design system.
|
|
178
|
+
|
|
179
|
+
| Chrome | Firefox | Safari | Edge | IE |
|
|
180
|
+
| --- | --- | --- | --- | --- |
|
|
181
|
+
| **1** | **1** | **1** | **12** | **3** |
|
|
182
|
+
|
|
183
|
+
ResponsiveProp<"auto" | SpacingToken> | undefined
|
|
184
|
+
|
|
185
|
+
| \- | Set object |
|
|
186
|
+
| ml |
|
|
187
|
+
|
|
188
|
+
The **`ml`** property is short for `margin-left` and sets the margin area on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
|
|
189
|
+
|
|
190
|
+
It uses the spacing tokens in the design system.
|
|
191
|
+
|
|
192
|
+
| Chrome | Firefox | Safari | Edge | IE |
|
|
193
|
+
| --- | --- | --- | --- | --- |
|
|
194
|
+
| **1** | **1** | **1** | **12** | **3** |
|
|
195
|
+
|
|
196
|
+
ResponsiveProp<"auto" | SpacingToken> | undefined
|
|
197
|
+
|
|
198
|
+
| \- | Set object |
|
|
199
|
+
| mr |
|
|
200
|
+
|
|
201
|
+
The **`mr`** property is short for `margin-right` and sets the margin area on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
|
|
202
|
+
|
|
203
|
+
It uses the spacing tokens in the design system.
|
|
204
|
+
|
|
205
|
+
| Chrome | Firefox | Safari | Edge | IE |
|
|
206
|
+
| --- | --- | --- | --- | --- |
|
|
207
|
+
| **1** | **1** | **1** | **12** | **3** |
|
|
208
|
+
|
|
209
|
+
ResponsiveProp<"auto" | SpacingToken> | undefined
|
|
210
|
+
|
|
211
|
+
| \- | Set object |
|
|
212
|
+
| mt |
|
|
213
|
+
|
|
214
|
+
The **`mt`** property is short for `margin-top` and sets the margin area on the top side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
|
|
215
|
+
|
|
216
|
+
It uses the spacing tokens in the design system.
|
|
217
|
+
|
|
218
|
+
| Chrome | Firefox | Safari | Edge | IE |
|
|
219
|
+
| --- | --- | --- | --- | --- |
|
|
220
|
+
| **1** | **1** | **1** | **12** | **3** |
|
|
221
|
+
|
|
222
|
+
ResponsiveProp<"auto" | SpacingToken> | undefined
|
|
223
|
+
|
|
224
|
+
| \- | Set object |
|
|
225
|
+
| mx |
|
|
226
|
+
|
|
227
|
+
The **`mx`** property is short for `margin-inline`. It is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
|
|
228
|
+
|
|
229
|
+
It uses the spacing tokens in the design system. You can also use the negative values to overlap elements or ignore padding based on the design requirements.
|
|
230
|
+
|
|
231
|
+
| Chrome | Firefox | Safari | Edge | IE |
|
|
232
|
+
| --- | --- | --- | --- | --- |
|
|
233
|
+
| **1** | **1** | **1** | **12** | **3** |
|
|
234
|
+
|
|
235
|
+
ResponsiveProp<"auto" | SpacingToken> | undefined
|
|
236
|
+
|
|
237
|
+
| \- | Set object |
|
|
238
|
+
| my |
|
|
239
|
+
|
|
240
|
+
The **`my`** property is short for `margin-block`. It defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
|
|
241
|
+
|
|
242
|
+
It uses the spacing tokens in the design system. You can also use the negative values to overlap elements or ignore padding based on the design requirements.
|
|
243
|
+
|
|
244
|
+
| Chrome | Firefox | Safari | Edge | IE |
|
|
245
|
+
| --- | --- | --- | --- | --- |
|
|
246
|
+
| **1** | **1** | **1** | **12** | **3** |
|
|
247
|
+
|
|
248
|
+
ResponsiveProp<"auto" | SpacingToken> | undefined
|
|
249
|
+
|
|
250
|
+
| \- | Set object |
|
|
251
|
+
| name |
|
|
252
|
+
|
|
253
|
+
If provided, a hidden input with this name will be rendered with the editor's value.
|
|
254
|
+
|
|
255
|
+
stringundefined
|
|
256
|
+
|
|
257
|
+
|
|
258
|
+
|
|
259
|
+
| \- | Set object |
|
|
260
|
+
| noBorderRadius |
|
|
261
|
+
|
|
262
|
+
Setting to true will ignore the border radius set in the theme and set it to zero.
|
|
263
|
+
|
|
264
|
+
booleanundefined
|
|
265
|
+
|
|
266
|
+
<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `borderRadius="none"` instead.</td></tr></tbody></table>
|
|
267
|
+
|
|
268
|
+
| \- | Set object |
|
|
269
|
+
| noGutter |
|
|
270
|
+
|
|
271
|
+
The **`noGutter`** property is used to remove the bottom margin from the last child of a component. This is useful when you want to avoid extra spacing at the end of a layout.
|
|
272
|
+
|
|
273
|
+
booleanundefined
|
|
274
|
+
|
|
275
|
+
|
|
276
|
+
|
|
277
|
+
| \- | Set object |
|
|
278
|
+
| onChange |
|
|
279
|
+
|
|
280
|
+
Emitted when the input value changes with the new changed value as HTML.
|
|
281
|
+
|
|
282
|
+
((newValue: string) => void) | undefined
|
|
283
|
+
|
|
284
|
+
| \- | \- |
|
|
285
|
+
| onUpdate |
|
|
286
|
+
|
|
287
|
+
Emitted when the input value changes with the new changed value as HTML. The second parameter contains the editor state for more complex use cases.
|
|
288
|
+
|
|
289
|
+
[Learn more about the editor instance](https://tiptap.dev/docs/editor/api/editor).
|
|
290
|
+
|
|
291
|
+
((event: { editor: Editor; transaction: Transaction; }) => void) | undefined
|
|
292
|
+
|
|
293
|
+
| \- | \- |
|
|
294
|
+
| p |
|
|
295
|
+
|
|
296
|
+
The **`p`** property is short for `padding`, and sets the padding area on all four sides of an element at once.
|
|
297
|
+
|
|
298
|
+
It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
|
|
299
|
+
|
|
300
|
+
| Chrome | Firefox | Safari | Edge | IE |
|
|
301
|
+
| --- | --- | --- | --- | --- |
|
|
302
|
+
| **1** | **1** | **1** | **12** | **3** |
|
|
303
|
+
|
|
304
|
+
ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
|
|
305
|
+
|
|
306
|
+
| \- | Set object |
|
|
307
|
+
| pb |
|
|
308
|
+
|
|
309
|
+
The **`pb`** property is short for `padding-bottom` and sets the padding area on the bottom side of an element.
|
|
310
|
+
|
|
311
|
+
It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
|
|
312
|
+
|
|
313
|
+
| Chrome | Firefox | Safari | Edge | IE |
|
|
314
|
+
| --- | --- | --- | --- | --- |
|
|
315
|
+
| **1** | **1** | **1** | **12** | **3** |
|
|
316
|
+
|
|
317
|
+
ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
|
|
318
|
+
|
|
319
|
+
| \- | Set object |
|
|
320
|
+
| pl |
|
|
321
|
+
|
|
322
|
+
The **`pl`** property is short for `padding-left` and sets the padding area on the left side of an element.
|
|
323
|
+
|
|
324
|
+
It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
|
|
325
|
+
|
|
326
|
+
| Chrome | Firefox | Safari | Edge | IE |
|
|
327
|
+
| --- | --- | --- | --- | --- |
|
|
328
|
+
| **1** | **1** | **1** | **12** | **3** |
|
|
329
|
+
|
|
330
|
+
ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
|
|
331
|
+
|
|
332
|
+
| \- | Set object |
|
|
333
|
+
| pr |
|
|
334
|
+
|
|
335
|
+
The **`pr`** property is short for `padding-right` and sets the padding area on the right side of an element.
|
|
336
|
+
|
|
337
|
+
It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
|
|
338
|
+
|
|
339
|
+
| Chrome | Firefox | Safari | Edge | IE |
|
|
340
|
+
| --- | --- | --- | --- | --- |
|
|
341
|
+
| **1** | **1** | **1** | **12** | **3** |
|
|
342
|
+
|
|
343
|
+
ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
|
|
344
|
+
|
|
345
|
+
| \- | Set object |
|
|
346
|
+
| pt |
|
|
347
|
+
|
|
348
|
+
The **`pt`** property is short for `padding-top` and sets the padding area on the top side of an element.
|
|
349
|
+
|
|
350
|
+
It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
|
|
351
|
+
|
|
352
|
+
| Chrome | Firefox | Safari | Edge | IE |
|
|
353
|
+
| --- | --- | --- | --- | --- |
|
|
354
|
+
| **1** | **1** | **1** | **12** | **3** |
|
|
355
|
+
|
|
356
|
+
ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
|
|
357
|
+
|
|
358
|
+
| \- | Set object |
|
|
359
|
+
| px |
|
|
360
|
+
|
|
361
|
+
The **`px`** property is short for `padding-inline`. It is a shorthand property that defines both the logical inline start and end paddings of an element, which maps to physical paddings depending on the element's writing mode, directionality, and text orientation.
|
|
362
|
+
|
|
363
|
+
It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
|
|
364
|
+
|
|
365
|
+
| Chrome | Firefox | Safari | Edge | IE |
|
|
366
|
+
| --- | --- | --- | --- | --- |
|
|
367
|
+
| **1** | **1** | **1** | **12** | **3** |
|
|
368
|
+
|
|
369
|
+
ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
|
|
370
|
+
|
|
371
|
+
| \- | Set object |
|
|
372
|
+
| py |
|
|
373
|
+
|
|
374
|
+
The **`py`** property is short for `padding-block`. It defines the logical block start and end paddings of an element, which maps to physical paddings depending on the element's writing mode, directionality, and text orientation.
|
|
375
|
+
|
|
376
|
+
It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
|
|
377
|
+
|
|
378
|
+
| Chrome | Firefox | Safari | Edge | IE |
|
|
379
|
+
| --- | --- | --- | --- | --- |
|
|
380
|
+
| **1** | **1** | **1** | **12** | **3** |
|
|
381
|
+
|
|
382
|
+
ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
|
|
383
|
+
|
|
384
|
+
| \- | Set object |
|
|
385
|
+
| readOnly |
|
|
386
|
+
|
|
387
|
+
Render a read-only version of the editor.
|
|
388
|
+
|
|
389
|
+
booleanundefined
|
|
390
|
+
|
|
391
|
+
|
|
392
|
+
|
|
393
|
+
| \- | Set object |
|
|
394
|
+
| rowGap |
|
|
395
|
+
|
|
396
|
+
The **`row-gap`** CSS property sets the size of the gap (gutter) between an element's rows.
|
|
397
|
+
|
|
398
|
+
Note: It only has an effect when used as a direct child of a layout component, such as IressRow, IressStack or IressInline.
|
|
399
|
+
|
|
400
|
+
| Chrome | Firefox | Safari | Edge | IE |
|
|
401
|
+
| --- | --- | --- | --- | --- |
|
|
402
|
+
| **47** | **52** | **10.1** | **16** | No |
|
|
403
|
+
|
|
404
|
+
ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
|
|
405
|
+
|
|
406
|
+
| \- | Set object |
|
|
407
|
+
| srOnly |
|
|
408
|
+
|
|
409
|
+
Set **`srOnly`** to hide an element visually but still make it accessible to screen readers. It can also be set to an object of breakpoints to hide the element at specific breakpoints.
|
|
410
|
+
|
|
411
|
+
Hide on all breakpoints: `srOnly: true` Hide on specific breakpoints: `srOnly: { xs: false, sm: true, md: false, lg: true, xl: false, xxl: true }`
|
|
412
|
+
|
|
413
|
+
ResponsiveProp<boolean> | undefined
|
|
414
|
+
|
|
415
|
+
| \- | Set object |
|
|
416
|
+
| stretch |
|
|
417
|
+
|
|
418
|
+
The **`stretch`** property is used to stretch an element to fill the available space in its parent container. It sets the `height` property to `100%` and `alignSelf` to `stretch`, allowing the element to expand and contract based on the size of its parent.
|
|
419
|
+
|
|
420
|
+
booleanundefined
|
|
421
|
+
|
|
422
|
+
|
|
423
|
+
|
|
424
|
+
| \- | Set object |
|
|
425
|
+
| textAlign |
|
|
426
|
+
|
|
427
|
+
The **`text-align`** CSS property sets the horizontal alignment of the inline-level content inside a block element or table-cell box.
|
|
428
|
+
|
|
429
|
+
| Chrome | Firefox | Safari | Edge | IE |
|
|
430
|
+
| --- | --- | --- | --- | --- |
|
|
431
|
+
| **1** | **1** | **1** | **12** | **3** |
|
|
432
|
+
|
|
433
|
+
ResponsiveProp<"center" | "left" | "right" | "inherit" | "justify"> | undefined
|
|
434
|
+
|
|
435
|
+
| \- | Set object |
|
|
436
|
+
| textStyle |
|
|
437
|
+
|
|
438
|
+
Select the typography to be used using the **`textStyle`** prop. These are connected to the typography tokens in the design system.'
|
|
439
|
+
|
|
440
|
+
* `typography.body.sm` - Use for small components such as badges and disclaimers, as well as compact variations of tables and lists.
|
|
441
|
+
* `typography.body.md` - The most commonly used body text size, used for most text content in the product and the default state of all components in the design system.
|
|
442
|
+
* `typography.body.lg` - Use for tag lines, subtitles, and other large text content in the product.
|
|
443
|
+
* `typography.heading.1` - Use for the main page title to establish a clear hierarchy. There is typically only one H1 per screen, emphasising the primary purpose or context of the page.
|
|
444
|
+
* `typography.heading.2` - Use for primary section headings within a page to organise content and guide the user through key areas. Also suitable for large components—such as modals—where space allows and where it pairs well with body.md or body.lg.
|
|
445
|
+
* `typography.heading.3` - Use for sub-sections under H2s to further structure content and maintain a clear visual hierarchy. Ideal for breaking down complex sections into manageable parts.
|
|
446
|
+
* `typography.heading.4` - Use for supporting headings within content blocks or small components where space is limited—such as table headers, cards, or side panels. Provides structure without overwhelming the layout.
|
|
447
|
+
* `typography.heading.5` - Use for minor labels or titles in compact UI elements, such as cards, sidebars, or inline labels. Best used to emphasise supplementary information without drawing too much attention. Works well with body.sm and is ideal for subtle content like fine print. Use sparingly to preserve typographic hierarchy.
|
|
448
|
+
* `typography.code` - Used to display code snippets in the product, such as in the API documentation.
|
|
449
|
+
|
|
450
|
+
ResponsiveProp<"typography.heading.1" | "typography.heading.2" | "typography.heading.3" | "typography.heading.4" | "typography.heading.5" | "typography.body.sm" | "typography.body.sm.regular" | ... 10 more ... | "typography.code"> | undefined
|
|
451
|
+
|
|
452
|
+
| \- | Set object |
|
|
453
|
+
| toolbar |
|
|
454
|
+
|
|
455
|
+
The toolbar to display above the editor.
|
|
456
|
+
|
|
457
|
+
ReactNode
|
|
458
|
+
|
|
459
|
+
|
|
460
|
+
|
|
461
|
+
| <IressEditor.SimpleToolbar /> | Set object |
|
|
462
|
+
| value |
|
|
463
|
+
|
|
464
|
+
The value of the editor.
|
|
465
|
+
|
|
466
|
+
stringundefined
|
|
467
|
+
|
|
468
|
+
|
|
469
|
+
|
|
470
|
+
| \- |
|
|
471
|
+
|
|
472
|
+
"<h2 style=\\"text-align: center\\">Welcome to the IressEditor</h2>\\n<p>The <code>IressEditor</code> component focuses on usability and is designed to be as simple as possible to bring a familiar editing experience to regular users. <code>IressEditor</code> is based on <a href=\\"https://tiptap.dev/\\" rel=\\"noopener noreferrer\\" target=\\"\_blank\\">Tiptap.dev</a> and supports all of its features:</p>\\n<ul>\\n <li>General text formatting: <strong>bold</strong> and <em>italic</em></li>\\n <li>Headings (h1-h4)</li>\\n <li>Ordered and bullet lists</li>\\n <li>Text align </li>\\n <li>Use markdown as shortcuts to format text (give it a try, write \*\*bold\*\* and it will bold the text)</li>\\n</ul>\\n"
|
|
473
|
+
|
|
474
|
+
|
|
|
475
|
+
| width |
|
|
476
|
+
|
|
477
|
+
The **`width`** CSS property sets an element's width. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box`, it sets the width of the border area.
|
|
478
|
+
|
|
479
|
+
This prop only allows widths available throughout the component library. To use a custom width, you need to use the `style` prop, or add a custom class to the element and use CSS.
|
|
480
|
+
|
|
481
|
+
| Chrome | Firefox | Safari | Edge | IE |
|
|
482
|
+
| --- | --- | --- | --- | --- |
|
|
483
|
+
| **1** | **1** | **1** | **12** | **4** |
|
|
484
|
+
|
|
485
|
+
ResponsiveProp<"auto" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | ... 6 more ... | SizeToken> | undefined
|
|
486
|
+
|
|
487
|
+
| \- | Set object |
|
|
488
|
+
|
|
46
489
|
[](#installation)Installation
|
|
47
490
|
-----------------------------
|
|
48
491
|
|
|
@@ -69,14 +512,37 @@ yarn add @iress/ids-editor
|
|
|
69
512
|
|
|
70
513
|
Copy
|
|
71
514
|
|
|
515
|
+
You will also need to import the CSS file in your application. This can be done in your main entry file (eg. `index.tsx` or `_app.tsx` in Next.js):
|
|
516
|
+
|
|
517
|
+
\[data-radix-scroll-area-viewport\] {
|
|
518
|
+
scrollbar-width: none;
|
|
519
|
+
-ms-overflow-style: none;
|
|
520
|
+
-webkit-overflow-scrolling: touch;
|
|
521
|
+
}
|
|
522
|
+
\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
|
|
523
|
+
display: none;
|
|
524
|
+
}
|
|
525
|
+
:where(\[data-radix-scroll-area-viewport\]) {
|
|
526
|
+
display: flex;
|
|
527
|
+
flex-direction: column;
|
|
528
|
+
align-items: stretch;
|
|
529
|
+
}
|
|
530
|
+
:where(\[data-radix-scroll-area-content\]) {
|
|
531
|
+
flex-grow: 1;
|
|
532
|
+
}
|
|
533
|
+
|
|
534
|
+
import '@iress/ids-editor/dist/style.css';
|
|
535
|
+
|
|
536
|
+
Copy
|
|
537
|
+
|
|
72
538
|
[](#examples)Examples
|
|
73
539
|
---------------------
|
|
74
540
|
|
|
75
|
-
### [](#
|
|
541
|
+
### [](#read-only)Read only
|
|
76
542
|
|
|
77
|
-
The `
|
|
543
|
+
The `readOnly` prop can be used to disable editing of the content in the editor.
|
|
78
544
|
|
|
79
|
-
#\\:r3k\\:--container{--mantine-scale: 1;--mantine-cursor-type: default;--mantine-color-scheme: light dark;--mantine-webkit-font-smoothing: antialiased;--mantine-moz-font-smoothing: grayscale;--mantine-color-white: #fff;--mantine-color-black: #000;--mantine-line-height: 1.55;--mantine-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;--mantine-font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-font-family-headings: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;--mantine-heading-font-weight: 700;--mantine-heading-text-wrap: wrap;--mantine-radius-default: calc(0.25rem \* var(--mantine-scale));--mantine-primary-color-filled: var(--mantine-color-blue-filled);--mantine-primary-color-filled-hover: var(--mantine-color-blue-filled-hover);--mantine-primary-color-light: var(--mantine-color-blue-light);--mantine-primary-color-light-hover: var(--mantine-color-blue-light-hover);--mantine-primary-color-light-color: var(--mantine-color-blue-light-color);--mantine-breakpoint-xs: 36em;--mantine-breakpoint-sm: 48em;--mantine-breakpoint-md: 62em;--mantine-breakpoint-lg: 75em;--mantine-breakpoint-xl: 88em;--mantine-spacing-xs: calc(0.625rem \* var(--mantine-scale));--mantine-spacing-sm: calc(0.75rem \* var(--mantine-scale));--mantine-spacing-md: calc(1rem \* var(--mantine-scale));--mantine-spacing-lg: calc(1.25rem \* var(--mantine-scale));--mantine-spacing-xl: calc(2rem \* var(--mantine-scale));--mantine-font-size-xs: calc(0.75rem \* var(--mantine-scale));--mantine-font-size-sm: calc(0.875rem \* var(--mantine-scale));--mantine-font-size-md: calc(1rem \* var(--mantine-scale));--mantine-font-size-lg: calc(1.125rem \* var(--mantine-scale));--mantine-font-size-xl: calc(1.25rem \* var(--mantine-scale));--mantine-line-height-xs: 1.4;--mantine-line-height-sm: 1.45;--mantine-line-height-md: 1.55;--mantine-line-height-lg: 1.6;--mantine-line-height-xl: 1.65;--mantine-shadow-xs: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.125rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.1);--mantine-shadow-sm: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(0.625rem \* var(--mantine-scale)) calc(0.9375rem \* var(--mantine-scale)) calc(-0.3125rem \* var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.4375rem \* var(--mantine-scale)) calc(0.4375rem \* var(--mantine-scale)) calc(-0.3125rem \* var(--mantine-scale));--mantine-shadow-md: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(1.25rem \* var(--mantine-scale)) calc(1.5625rem \* var(--mantine-scale)) calc(-0.3125rem \* var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.625rem \* var(--mantine-scale)) calc(0.625rem \* var(--mantine-scale)) calc(-0.3125rem \* var(--mantine-scale));--mantine-shadow-lg: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(1.75rem \* var(--mantine-scale)) calc(1.4375rem \* var(--mantine-scale)) calc(-0.4375rem \* var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.75rem \* var(--mantine-scale)) calc(0.75rem \* var(--mantine-scale)) calc(-0.4375rem \* var(--mantine-scale));--mantine-shadow-xl: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(2.25rem \* var(--mantine-scale)) calc(1.75rem \* var(--mantine-scale)) calc(-0.4375rem \* var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(1.0625rem \* var(--mantine-scale)) calc(1.0625rem \* var(--mantine-scale)) calc(-0.4375rem \* var(--mantine-scale));--mantine-radius-xs: calc(0.125rem \* var(--mantine-scale));--mantine-radius-sm: calc(0.25rem \* var(--mantine-scale));--mantine-radius-md: calc(0.5rem \* var(--mantine-scale));--mantine-radius-lg: calc(1rem \* var(--mantine-scale));--mantine-radius-xl: calc(2rem \* var(--mantine-scale));--mantine-primary-color-0: var(--mantine-color-blue-0);--mantine-primary-color-1: var(--mantine-color-blue-1);--mantine-primary-color-2: var(--mantine-color-blue-2);--mantine-primary-color-3: var(--mantine-color-blue-3);--mantine-primary-color-4: var(--mantine-color-blue-4);--mantine-primary-color-5: var(--mantine-color-blue-5);--mantine-primary-color-6: var(--mantine-color-blue-6);--mantine-primary-color-7: var(--mantine-color-blue-7);--mantine-primary-color-8: var(--mantine-color-blue-8);--mantine-primary-color-9: var(--mantine-color-blue-9);--mantine-color-dark-0: #C9C9C9;--mantine-color-dark-1: #b8b8b8;--mantine-color-dark-2: #828282;--mantine-color-dark-3: #696969;--mantine-color-dark-4: #424242;--mantine-color-dark-5: #3b3b3b;--mantine-color-dark-6: #2e2e2e;--mantine-color-dark-7: #242424;--mantine-color-dark-8: #1f1f1f;--mantine-color-dark-9: #141414;--mantine-color-gray-0: #f8f9fa;--mantine-color-gray-1: #f1f3f5;--mantine-color-gray-2: #e9ecef;--mantine-color-gray-3: #dee2e6;--mantine-color-gray-4: #ced4da;--mantine-color-gray-5: #adb5bd;--mantine-color-gray-6: #868e96;--mantine-color-gray-7: #495057;--mantine-color-gray-8: #343a40;--mantine-color-gray-9: #212529;--mantine-color-red-0: #fff5f5;--mantine-color-red-1: #ffe3e3;--mantine-color-red-2: #ffc9c9;--mantine-color-red-3: #ffa8a8;--mantine-color-red-4: #ff8787;--mantine-color-red-5: #ff6b6b;--mantine-color-red-6: #fa5252;--mantine-color-red-7: #f03e3e;--mantine-color-red-8: #e03131;--mantine-color-red-9: #c92a2a;--mantine-color-pink-0: #fff0f6;--mantine-color-pink-1: #ffdeeb;--mantine-color-pink-2: #fcc2d7;--mantine-color-pink-3: #faa2c1;--mantine-color-pink-4: #f783ac;--mantine-color-pink-5: #f06595;--mantine-color-pink-6: #e64980;--mantine-color-pink-7: #d6336c;--mantine-color-pink-8: #c2255c;--mantine-color-pink-9: #a61e4d;--mantine-color-grape-0: #f8f0fc;--mantine-color-grape-1: #f3d9fa;--mantine-color-grape-2: #eebefa;--mantine-color-grape-3: #e599f7;--mantine-color-grape-4: #da77f2;--mantine-color-grape-5: #cc5de8;--mantine-color-grape-6: #be4bdb;--mantine-color-grape-7: #ae3ec9;--mantine-color-grape-8: #9c36b5;--mantine-color-grape-9: #862e9c;--mantine-color-violet-0: #f3f0ff;--mantine-color-violet-1: #e5dbff;--mantine-color-violet-2: #d0bfff;--mantine-color-violet-3: #b197fc;--mantine-color-violet-4: #9775fa;--mantine-color-violet-5: #845ef7;--mantine-color-violet-6: #7950f2;--mantine-color-violet-7: #7048e8;--mantine-color-violet-8: #6741d9;--mantine-color-violet-9: #5f3dc4;--mantine-color-indigo-0: #edf2ff;--mantine-color-indigo-1: #dbe4ff;--mantine-color-indigo-2: #bac8ff;--mantine-color-indigo-3: #91a7ff;--mantine-color-indigo-4: #748ffc;--mantine-color-indigo-5: #5c7cfa;--mantine-color-indigo-6: #4c6ef5;--mantine-color-indigo-7: #4263eb;--mantine-color-indigo-8: #3b5bdb;--mantine-color-indigo-9: #364fc7;--mantine-color-blue-0: #e7f5ff;--mantine-color-blue-1: #d0ebff;--mantine-color-blue-2: #a5d8ff;--mantine-color-blue-3: #74c0fc;--mantine-color-blue-4: #4dabf7;--mantine-color-blue-5: #339af0;--mantine-color-blue-6: #228be6;--mantine-color-blue-7: #1c7ed6;--mantine-color-blue-8: #1971c2;--mantine-color-blue-9: #1864ab;--mantine-color-cyan-0: #e3fafc;--mantine-color-cyan-1: #c5f6fa;--mantine-color-cyan-2: #99e9f2;--mantine-color-cyan-3: #66d9e8;--mantine-color-cyan-4: #3bc9db;--mantine-color-cyan-5: #22b8cf;--mantine-color-cyan-6: #15aabf;--mantine-color-cyan-7: #1098ad;--mantine-color-cyan-8: #0c8599;--mantine-color-cyan-9: #0b7285;--mantine-color-teal-0: #e6fcf5;--mantine-color-teal-1: #c3fae8;--mantine-color-teal-2: #96f2d7;--mantine-color-teal-3: #63e6be;--mantine-color-teal-4: #38d9a9;--mantine-color-teal-5: #20c997;--mantine-color-teal-6: #12b886;--mantine-color-teal-7: #0ca678;--mantine-color-teal-8: #099268;--mantine-color-teal-9: #087f5b;--mantine-color-green-0: #ebfbee;--mantine-color-green-1: #d3f9d8;--mantine-color-green-2: #b2f2bb;--mantine-color-green-3: #8ce99a;--mantine-color-green-4: #69db7c;--mantine-color-green-5: #51cf66;--mantine-color-green-6: #40c057;--mantine-color-green-7: #37b24d;--mantine-color-green-8: #2f9e44;--mantine-color-green-9: #2b8a3e;--mantine-color-lime-0: #f4fce3;--mantine-color-lime-1: #e9fac8;--mantine-color-lime-2: #d8f5a2;--mantine-color-lime-3: #c0eb75;--mantine-color-lime-4: #a9e34b;--mantine-color-lime-5: #94d82d;--mantine-color-lime-6: #82c91e;--mantine-color-lime-7: #74b816;--mantine-color-lime-8: #66a80f;--mantine-color-lime-9: #5c940d;--mantine-color-yellow-0: #fff9db;--mantine-color-yellow-1: #fff3bf;--mantine-color-yellow-2: #ffec99;--mantine-color-yellow-3: #ffe066;--mantine-color-yellow-4: #ffd43b;--mantine-color-yellow-5: #fcc419;--mantine-color-yellow-6: #fab005;--mantine-color-yellow-7: #f59f00;--mantine-color-yellow-8: #f08c00;--mantine-color-yellow-9: #e67700;--mantine-color-orange-0: #fff4e6;--mantine-color-orange-1: #ffe8cc;--mantine-color-orange-2: #ffd8a8;--mantine-color-orange-3: #ffc078;--mantine-color-orange-4: #ffa94d;--mantine-color-orange-5: #ff922b;--mantine-color-orange-6: #fd7e14;--mantine-color-orange-7: #f76707;--mantine-color-orange-8: #e8590c;--mantine-color-orange-9: #d9480f;--mantine-h1-font-size: calc(2.125rem \* var(--mantine-scale));--mantine-h1-line-height: 1.3;--mantine-h1-font-weight: 700;--mantine-h2-font-size: calc(1.625rem \* var(--mantine-scale));--mantine-h2-line-height: 1.35;--mantine-h2-font-weight: 700;--mantine-h3-font-size: calc(1.375rem \* var(--mantine-scale));--mantine-h3-line-height: 1.4;--mantine-h3-font-weight: 700;--mantine-h4-font-size: calc(1.125rem \* var(--mantine-scale));--mantine-h4-line-height: 1.45;--mantine-h4-font-weight: 700;--mantine-h5-font-size: calc(1rem \* var(--mantine-scale));--mantine-h5-line-height: 1.5;--mantine-h5-font-weight: 700;--mantine-h6-font-size: calc(0.875rem \* var(--mantine-scale));--mantine-h6-line-height: 1.5;--mantine-h6-font-weight: 700;}#\\:r3k\\:--container\[data-mantine-color-scheme="dark"\]{--mantine-primary-color-contrast: var(--mantine-color-white);--mantine-color-bright: var(--mantine-color-white);--mantine-color-text: var(--mantine-color-dark-0);--mantine-color-body: var(--mantine-color-dark-7);--mantine-color-error: var(--mantine-color-red-8);--mantine-color-placeholder: var(--mantine-color-dark-3);--mantine-color-anchor: var(--mantine-color-blue-4);--mantine-color-default: var(--mantine-color-dark-6);--mantine-color-default-hover: var(--mantine-color-dark-5);--mantine-color-default-color: var(--mantine-color-white);--mantine-color-default-border: var(--mantine-color-dark-4);--mantine-color-dimmed: var(--mantine-color-dark-2);--mantine-color-disabled: var(--mantine-color-dark-6);--mantine-color-disabled-color: var(--mantine-color-dark-3);--mantine-color-disabled-border: var(--mantine-color-gray-6);--mantine-color-dark-text: var(--mantine-color-dark-4);--mantine-color-dark-filled: var(--mantine-color-dark-8);--mantine-color-dark-filled-hover: var(--mantine-color-dark-9);--mantine-color-dark-light: rgba(46, 46, 46, 0.15);--mantine-color-dark-light-hover: rgba(46, 46, 46, 0.2);--mantine-color-dark-light-color: var(--mantine-color-dark-3);--mantine-color-dark-outline: var(--mantine-color-dark-4);--mantine-color-dark-outline-hover: rgba(66, 66, 66, 0.05);--mantine-color-gray-text: var(--mantine-color-gray-4);--mantine-color-gray-filled: var(--mantine-color-gray-8);--mantine-color-gray-filled-hover: var(--mantine-color-gray-9);--mantine-color-gray-light: rgba(134, 142, 150, 0.15);--mantine-color-gray-light-hover: rgba(134, 142, 150, 0.2);--mantine-color-gray-light-color: var(--mantine-color-gray-3);--mantine-color-gray-outline: var(--mantine-color-gray-4);--mantine-color-gray-outline-hover: rgba(206, 212, 218, 0.05);--mantine-color-red-text: var(--mantine-color-red-4);--mantine-color-red-filled: var(--mantine-color-red-8);--mantine-color-red-filled-hover: var(--mantine-color-red-9);--mantine-color-red-light: rgba(250, 82, 82, 0.15);--mantine-color-red-light-hover: rgba(250, 82, 82, 0.2);--mantine-color-red-light-color: var(--mantine-color-red-3);--mantine-color-red-outline: var(--mantine-color-red-4);--mantine-color-red-outline-hover: rgba(255, 135, 135, 0.05);--mantine-color-pink-text: var(--mantine-color-pink-4);--mantine-color-pink-filled: var(--mantine-color-pink-8);--mantine-color-pink-filled-hover: var(--mantine-color-pink-9);--mantine-color-pink-light: rgba(230, 73, 128, 0.15);--mantine-color-pink-light-hover: rgba(230, 73, 128, 0.2);--mantine-color-pink-light-color: var(--mantine-color-pink-3);--mantine-color-pink-outline: var(--mantine-color-pink-4);--mantine-color-pink-outline-hover: rgba(247, 131, 172, 0.05);--mantine-color-grape-text: var(--mantine-color-grape-4);--mantine-color-grape-filled: var(--mantine-color-grape-8);--mantine-color-grape-filled-hover: var(--mantine-color-grape-9);--mantine-color-grape-light: rgba(190, 75, 219, 0.15);--mantine-color-grape-light-hover: rgba(190, 75, 219, 0.2);--mantine-color-grape-light-color: var(--mantine-color-grape-3);--mantine-color-grape-outline: var(--mantine-color-grape-4);--mantine-color-grape-outline-hover: rgba(218, 119, 242, 0.05);--mantine-color-violet-text: var(--mantine-color-violet-4);--mantine-color-violet-filled: var(--mantine-color-violet-8);--mantine-color-violet-filled-hover: var(--mantine-color-violet-9);--mantine-color-violet-light: rgba(121, 80, 242, 0.15);--mantine-color-violet-light-hover: rgba(121, 80, 242, 0.2);--mantine-color-violet-light-color: var(--mantine-color-violet-3);--mantine-color-violet-outline: var(--mantine-color-violet-4);--mantine-color-violet-outline-hover: rgba(151, 117, 250, 0.05);--mantine-color-indigo-text: var(--mantine-color-indigo-4);--mantine-color-indigo-filled: var(--mantine-color-indigo-8);--mantine-color-indigo-filled-hover: var(--mantine-color-indigo-9);--mantine-color-indigo-light: rgba(76, 110, 245, 0.15);--mantine-color-indigo-light-hover: rgba(76, 110, 245, 0.2);--mantine-color-indigo-light-color: var(--mantine-color-indigo-3);--mantine-color-indigo-outline: var(--mantine-color-indigo-4);--mantine-color-indigo-outline-hover: rgba(116, 143, 252, 0.05);--mantine-color-blue-text: var(--mantine-color-blue-4);--mantine-color-blue-filled: var(--mantine-color-blue-8);--mantine-color-blue-filled-hover: var(--mantine-color-blue-9);--mantine-color-blue-light: rgba(34, 139, 230, 0.15);--mantine-color-blue-light-hover: rgba(34, 139, 230, 0.2);--mantine-color-blue-light-color: var(--mantine-color-blue-3);--mantine-color-blue-outline: var(--mantine-color-blue-4);--mantine-color-blue-outline-hover: rgba(77, 171, 247, 0.05);--mantine-color-cyan-text: var(--mantine-color-cyan-4);--mantine-color-cyan-filled: var(--mantine-color-cyan-8);--mantine-color-cyan-filled-hover: var(--mantine-color-cyan-9);--mantine-color-cyan-light: rgba(21, 170, 191, 0.15);--mantine-color-cyan-light-hover: rgba(21, 170, 191, 0.2);--mantine-color-cyan-light-color: var(--mantine-color-cyan-3);--mantine-color-cyan-outline: var(--mantine-color-cyan-4);--mantine-color-cyan-outline-hover: rgba(59, 201, 219, 0.05);--mantine-color-teal-text: var(--mantine-color-teal-4);--mantine-color-teal-filled: var(--mantine-color-teal-8);--mantine-color-teal-filled-hover: var(--mantine-color-teal-9);--mantine-color-teal-light: rgba(18, 184, 134, 0.15);--mantine-color-teal-light-hover: rgba(18, 184, 134, 0.2);--mantine-color-teal-light-color: var(--mantine-color-teal-3);--mantine-color-teal-outline: var(--mantine-color-teal-4);--mantine-color-teal-outline-hover: rgba(56, 217, 169, 0.05);--mantine-color-green-text: var(--mantine-color-green-4);--mantine-color-green-filled: var(--mantine-color-green-8);--mantine-color-green-filled-hover: var(--mantine-color-green-9);--mantine-color-green-light: rgba(64, 192, 87, 0.15);--mantine-color-green-light-hover: rgba(64, 192, 87, 0.2);--mantine-color-green-light-color: var(--mantine-color-green-3);--mantine-color-green-outline: var(--mantine-color-green-4);--mantine-color-green-outline-hover: rgba(105, 219, 124, 0.05);--mantine-color-lime-text: var(--mantine-color-lime-4);--mantine-color-lime-filled: var(--mantine-color-lime-8);--mantine-color-lime-filled-hover: var(--mantine-color-lime-9);--mantine-color-lime-light: rgba(130, 201, 30, 0.15);--mantine-color-lime-light-hover: rgba(130, 201, 30, 0.2);--mantine-color-lime-light-color: var(--mantine-color-lime-3);--mantine-color-lime-outline: var(--mantine-color-lime-4);--mantine-color-lime-outline-hover: rgba(169, 227, 75, 0.05);--mantine-color-yellow-text: var(--mantine-color-yellow-4);--mantine-color-yellow-filled: var(--mantine-color-yellow-8);--mantine-color-yellow-filled-hover: var(--mantine-color-yellow-9);--mantine-color-yellow-light: rgba(250, 176, 5, 0.15);--mantine-color-yellow-light-hover: rgba(250, 176, 5, 0.2);--mantine-color-yellow-light-color: var(--mantine-color-yellow-3);--mantine-color-yellow-outline: var(--mantine-color-yellow-4);--mantine-color-yellow-outline-hover: rgba(255, 212, 59, 0.05);--mantine-color-orange-text: var(--mantine-color-orange-4);--mantine-color-orange-filled: var(--mantine-color-orange-8);--mantine-color-orange-filled-hover: var(--mantine-color-orange-9);--mantine-color-orange-light: rgba(253, 126, 20, 0.15);--mantine-color-orange-light-hover: rgba(253, 126, 20, 0.2);--mantine-color-orange-light-color: var(--mantine-color-orange-3);--mantine-color-orange-outline: var(--mantine-color-orange-4);--mantine-color-orange-outline-hover: rgba(255, 169, 77, 0.05);}#\\:r3k\\:--container\[data-mantine-color-scheme="light"\]{--mantine-primary-color-contrast: var(--mantine-color-white);--mantine-color-bright: var(--mantine-color-black);--mantine-color-text: #000;--mantine-color-body: #fff;--mantine-color-error: var(--mantine-color-red-6);--mantine-color-placeholder: var(--mantine-color-gray-5);--mantine-color-anchor: var(--mantine-color-blue-6);--mantine-color-default: var(--mantine-color-white);--mantine-color-default-hover: var(--mantine-color-gray-0);--mantine-color-default-color: var(--mantine-color-black);--mantine-color-default-border: var(--mantine-color-gray-4);--mantine-color-dimmed: var(--mantine-color-gray-6);--mantine-color-disabled: var(--mantine-color-gray-2);--mantine-color-disabled-color: var(--mantine-color-gray-5);--mantine-color-disabled-border: var(--mantine-color-gray-3);--mantine-color-dark-text: var(--mantine-color-dark-filled);--mantine-color-dark-filled: var(--mantine-color-dark-6);--mantine-color-dark-filled-hover: var(--mantine-color-dark-7);--mantine-color-dark-light: rgba(46, 46, 46, 0.1);--mantine-color-dark-light-hover: rgba(46, 46, 46, 0.12);--mantine-color-dark-light-color: var(--mantine-color-dark-6);--mantine-color-dark-outline: var(--mantine-color-dark-6);--mantine-color-dark-outline-hover: rgba(46, 46, 46, 0.05);--mantine-color-gray-text: var(--mantine-color-gray-filled);--mantine-color-gray-filled: var(--mantine-color-gray-6);--mantine-color-gray-filled-hover: var(--mantine-color-gray-7);--mantine-color-gray-light: rgba(134, 142, 150, 0.1);--mantine-color-gray-light-hover: rgba(134, 142, 150, 0.12);--mantine-color-gray-light-color: var(--mantine-color-gray-6);--mantine-color-gray-outline: var(--mantine-color-gray-6);--mantine-color-gray-outline-hover: rgba(134, 142, 150, 0.05);--mantine-color-red-text: var(--mantine-color-red-filled);--mantine-color-red-filled: var(--mantine-color-red-6);--mantine-color-red-filled-hover: var(--mantine-color-red-7);--mantine-color-red-light: rgba(250, 82, 82, 0.1);--mantine-color-red-light-hover: rgba(250, 82, 82, 0.12);--mantine-color-red-light-color: var(--mantine-color-red-6);--mantine-color-red-outline: var(--mantine-color-red-6);--mantine-color-red-outline-hover: rgba(250, 82, 82, 0.05);--mantine-color-pink-text: var(--mantine-color-pink-filled);--mantine-color-pink-filled: var(--mantine-color-pink-6);--mantine-color-pink-filled-hover: var(--mantine-color-pink-7);--mantine-color-pink-light: rgba(230, 73, 128, 0.1);--mantine-color-pink-light-hover: rgba(230, 73, 128, 0.12);--mantine-color-pink-light-color: var(--mantine-color-pink-6);--mantine-color-pink-outline: var(--mantine-color-pink-6);--mantine-color-pink-outline-hover: rgba(230, 73, 128, 0.05);--mantine-color-grape-text: var(--mantine-color-grape-filled);--mantine-color-grape-filled: var(--mantine-color-grape-6);--mantine-color-grape-filled-hover: var(--mantine-color-grape-7);--mantine-color-grape-light: rgba(190, 75, 219, 0.1);--mantine-color-grape-light-hover: rgba(190, 75, 219, 0.12);--mantine-color-grape-light-color: var(--mantine-color-grape-6);--mantine-color-grape-outline: var(--mantine-color-grape-6);--mantine-color-grape-outline-hover: rgba(190, 75, 219, 0.05);--mantine-color-violet-text: var(--mantine-color-violet-filled);--mantine-color-violet-filled: var(--mantine-color-violet-6);--mantine-color-violet-filled-hover: var(--mantine-color-violet-7);--mantine-color-violet-light: rgba(121, 80, 242, 0.1);--mantine-color-violet-light-hover: rgba(121, 80, 242, 0.12);--mantine-color-violet-light-color: var(--mantine-color-violet-6);--mantine-color-violet-outline: var(--mantine-color-violet-6);--mantine-color-violet-outline-hover: rgba(121, 80, 242, 0.05);--mantine-color-indigo-text: var(--mantine-color-indigo-filled);--mantine-color-indigo-filled: var(--mantine-color-indigo-6);--mantine-color-indigo-filled-hover: var(--mantine-color-indigo-7);--mantine-color-indigo-light: rgba(76, 110, 245, 0.1);--mantine-color-indigo-light-hover: rgba(76, 110, 245, 0.12);--mantine-color-indigo-light-color: var(--mantine-color-indigo-6);--mantine-color-indigo-outline: var(--mantine-color-indigo-6);--mantine-color-indigo-outline-hover: rgba(76, 110, 245, 0.05);--mantine-color-blue-text: var(--mantine-color-blue-filled);--mantine-color-blue-filled: var(--mantine-color-blue-6);--mantine-color-blue-filled-hover: var(--mantine-color-blue-7);--mantine-color-blue-light: rgba(34, 139, 230, 0.1);--mantine-color-blue-light-hover: rgba(34, 139, 230, 0.12);--mantine-color-blue-light-color: var(--mantine-color-blue-6);--mantine-color-blue-outline: var(--mantine-color-blue-6);--mantine-color-blue-outline-hover: rgba(34, 139, 230, 0.05);--mantine-color-cyan-text: var(--mantine-color-cyan-filled);--mantine-color-cyan-filled: var(--mantine-color-cyan-6);--mantine-color-cyan-filled-hover: var(--mantine-color-cyan-7);--mantine-color-cyan-light: rgba(21, 170, 191, 0.1);--mantine-color-cyan-light-hover: rgba(21, 170, 191, 0.12);--mantine-color-cyan-light-color: var(--mantine-color-cyan-6);--mantine-color-cyan-outline: var(--mantine-color-cyan-6);--mantine-color-cyan-outline-hover: rgba(21, 170, 191, 0.05);--mantine-color-teal-text: var(--mantine-color-teal-filled);--mantine-color-teal-filled: var(--mantine-color-teal-6);--mantine-color-teal-filled-hover: var(--mantine-color-teal-7);--mantine-color-teal-light: rgba(18, 184, 134, 0.1);--mantine-color-teal-light-hover: rgba(18, 184, 134, 0.12);--mantine-color-teal-light-color: var(--mantine-color-teal-6);--mantine-color-teal-outline: var(--mantine-color-teal-6);--mantine-color-teal-outline-hover: rgba(18, 184, 134, 0.05);--mantine-color-green-text: var(--mantine-color-green-filled);--mantine-color-green-filled: var(--mantine-color-green-6);--mantine-color-green-filled-hover: var(--mantine-color-green-7);--mantine-color-green-light: rgba(64, 192, 87, 0.1);--mantine-color-green-light-hover: rgba(64, 192, 87, 0.12);--mantine-color-green-light-color: var(--mantine-color-green-6);--mantine-color-green-outline: var(--mantine-color-green-6);--mantine-color-green-outline-hover: rgba(64, 192, 87, 0.05);--mantine-color-lime-text: var(--mantine-color-lime-filled);--mantine-color-lime-filled: var(--mantine-color-lime-6);--mantine-color-lime-filled-hover: var(--mantine-color-lime-7);--mantine-color-lime-light: rgba(130, 201, 30, 0.1);--mantine-color-lime-light-hover: rgba(130, 201, 30, 0.12);--mantine-color-lime-light-color: var(--mantine-color-lime-6);--mantine-color-lime-outline: var(--mantine-color-lime-6);--mantine-color-lime-outline-hover: rgba(130, 201, 30, 0.05);--mantine-color-yellow-text: var(--mantine-color-yellow-filled);--mantine-color-yellow-filled: var(--mantine-color-yellow-6);--mantine-color-yellow-filled-hover: var(--mantine-color-yellow-7);--mantine-color-yellow-light: rgba(250, 176, 5, 0.1);--mantine-color-yellow-light-hover: rgba(250, 176, 5, 0.12);--mantine-color-yellow-light-color: var(--mantine-color-yellow-6);--mantine-color-yellow-outline: var(--mantine-color-yellow-6);--mantine-color-yellow-outline-hover: rgba(250, 176, 5, 0.05);--mantine-color-orange-text: var(--mantine-color-orange-filled);--mantine-color-orange-filled: var(--mantine-color-orange-6);--mantine-color-orange-filled-hover: var(--mantine-color-orange-7);--mantine-color-orange-light: rgba(253, 126, 20, 0.1);--mantine-color-orange-light-hover: rgba(253, 126, 20, 0.12);--mantine-color-orange-light-color: var(--mantine-color-orange-6);--mantine-color-orange-outline: var(--mantine-color-orange-6);--mantine-color-orange-outline-hover: rgba(253, 126, 20, 0.05);} #\\:r3k\\:--container\[data-mantine-color-scheme="dark"\] { --mantine-color-scheme: dark; } #\\:r3k\\:--container\[data-mantine-color-scheme="light"\] { --mantine-color-scheme: light; }
|
|
545
|
+
#\\:r3h\\:--container{--mantine-z-index-app: 100;--mantine-z-index-modal: 200;--mantine-z-index-popover: 300;--mantine-z-index-overlay: 400;--mantine-z-index-max: 9999;--mantine-scale: 1;--mantine-cursor-type: default;--mantine-webkit-font-smoothing: antialiased;--mantine-moz-font-smoothing: grayscale;--mantine-color-white: #fff;--mantine-color-black: #000;--mantine-line-height: 1.55;--mantine-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;--mantine-font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-font-family-headings: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;--mantine-heading-font-weight: 700;--mantine-heading-text-wrap: wrap;--mantine-radius-default: calc(0.25rem \* var(--mantine-scale));--mantine-primary-color-filled: var(--mantine-color-blue-filled);--mantine-primary-color-filled-hover: var(--mantine-color-blue-filled-hover);--mantine-primary-color-light: var(--mantine-color-blue-light);--mantine-primary-color-light-hover: var(--mantine-color-blue-light-hover);--mantine-primary-color-light-color: var(--mantine-color-blue-light-color);--mantine-breakpoint-xs: 36em;--mantine-breakpoint-sm: 48em;--mantine-breakpoint-md: 62em;--mantine-breakpoint-lg: 75em;--mantine-breakpoint-xl: 88em;--mantine-spacing-xs: calc(0.625rem \* var(--mantine-scale));--mantine-spacing-sm: calc(0.75rem \* var(--mantine-scale));--mantine-spacing-md: calc(1rem \* var(--mantine-scale));--mantine-spacing-lg: calc(1.25rem \* var(--mantine-scale));--mantine-spacing-xl: calc(2rem \* var(--mantine-scale));--mantine-font-size-xs: calc(0.75rem \* var(--mantine-scale));--mantine-font-size-sm: calc(0.875rem \* var(--mantine-scale));--mantine-font-size-md: calc(1rem \* var(--mantine-scale));--mantine-font-size-lg: calc(1.125rem \* var(--mantine-scale));--mantine-font-size-xl: calc(1.25rem \* var(--mantine-scale));--mantine-line-height-xs: 1.4;--mantine-line-height-sm: 1.45;--mantine-line-height-md: 1.55;--mantine-line-height-lg: 1.6;--mantine-line-height-xl: 1.65;--mantine-shadow-xs: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.125rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.1);--mantine-shadow-sm: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(0.625rem \* var(--mantine-scale)) calc(0.9375rem \* var(--mantine-scale)) calc(-0.3125rem \* var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.4375rem \* var(--mantine-scale)) calc(0.4375rem \* var(--mantine-scale)) calc(-0.3125rem \* var(--mantine-scale));--mantine-shadow-md: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(1.25rem \* var(--mantine-scale)) calc(1.5625rem \* var(--mantine-scale)) calc(-0.3125rem \* var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.625rem \* var(--mantine-scale)) calc(0.625rem \* var(--mantine-scale)) calc(-0.3125rem \* var(--mantine-scale));--mantine-shadow-lg: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(1.75rem \* var(--mantine-scale)) calc(1.4375rem \* var(--mantine-scale)) calc(-0.4375rem \* var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.75rem \* var(--mantine-scale)) calc(0.75rem \* var(--mantine-scale)) calc(-0.4375rem \* var(--mantine-scale));--mantine-shadow-xl: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(2.25rem \* var(--mantine-scale)) calc(1.75rem \* var(--mantine-scale)) calc(-0.4375rem \* var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(1.0625rem \* var(--mantine-scale)) calc(1.0625rem \* var(--mantine-scale)) calc(-0.4375rem \* var(--mantine-scale));--mantine-radius-xs: calc(0.125rem \* var(--mantine-scale));--mantine-radius-sm: calc(0.25rem \* var(--mantine-scale));--mantine-radius-md: calc(0.5rem \* var(--mantine-scale));--mantine-radius-lg: calc(1rem \* var(--mantine-scale));--mantine-radius-xl: calc(2rem \* var(--mantine-scale));--mantine-primary-color-0: var(--mantine-color-blue-0);--mantine-primary-color-1: var(--mantine-color-blue-1);--mantine-primary-color-2: var(--mantine-color-blue-2);--mantine-primary-color-3: var(--mantine-color-blue-3);--mantine-primary-color-4: var(--mantine-color-blue-4);--mantine-primary-color-5: var(--mantine-color-blue-5);--mantine-primary-color-6: var(--mantine-color-blue-6);--mantine-primary-color-7: var(--mantine-color-blue-7);--mantine-primary-color-8: var(--mantine-color-blue-8);--mantine-primary-color-9: var(--mantine-color-blue-9);--mantine-color-dark-0: #C9C9C9;--mantine-color-dark-1: #b8b8b8;--mantine-color-dark-2: #828282;--mantine-color-dark-3: #696969;--mantine-color-dark-4: #424242;--mantine-color-dark-5: #3b3b3b;--mantine-color-dark-6: #2e2e2e;--mantine-color-dark-7: #242424;--mantine-color-dark-8: #1f1f1f;--mantine-color-dark-9: #141414;--mantine-color-gray-0: #f8f9fa;--mantine-color-gray-1: #f1f3f5;--mantine-color-gray-2: #e9ecef;--mantine-color-gray-3: #dee2e6;--mantine-color-gray-4: #ced4da;--mantine-color-gray-5: #adb5bd;--mantine-color-gray-6: #868e96;--mantine-color-gray-7: #495057;--mantine-color-gray-8: #343a40;--mantine-color-gray-9: #212529;--mantine-color-red-0: #fff5f5;--mantine-color-red-1: #ffe3e3;--mantine-color-red-2: #ffc9c9;--mantine-color-red-3: #ffa8a8;--mantine-color-red-4: #ff8787;--mantine-color-red-5: #ff6b6b;--mantine-color-red-6: #fa5252;--mantine-color-red-7: #f03e3e;--mantine-color-red-8: #e03131;--mantine-color-red-9: #c92a2a;--mantine-color-pink-0: #fff0f6;--mantine-color-pink-1: #ffdeeb;--mantine-color-pink-2: #fcc2d7;--mantine-color-pink-3: #faa2c1;--mantine-color-pink-4: #f783ac;--mantine-color-pink-5: #f06595;--mantine-color-pink-6: #e64980;--mantine-color-pink-7: #d6336c;--mantine-color-pink-8: #c2255c;--mantine-color-pink-9: #a61e4d;--mantine-color-grape-0: #f8f0fc;--mantine-color-grape-1: #f3d9fa;--mantine-color-grape-2: #eebefa;--mantine-color-grape-3: #e599f7;--mantine-color-grape-4: #da77f2;--mantine-color-grape-5: #cc5de8;--mantine-color-grape-6: #be4bdb;--mantine-color-grape-7: #ae3ec9;--mantine-color-grape-8: #9c36b5;--mantine-color-grape-9: #862e9c;--mantine-color-violet-0: #f3f0ff;--mantine-color-violet-1: #e5dbff;--mantine-color-violet-2: #d0bfff;--mantine-color-violet-3: #b197fc;--mantine-color-violet-4: #9775fa;--mantine-color-violet-5: #845ef7;--mantine-color-violet-6: #7950f2;--mantine-color-violet-7: #7048e8;--mantine-color-violet-8: #6741d9;--mantine-color-violet-9: #5f3dc4;--mantine-color-indigo-0: #edf2ff;--mantine-color-indigo-1: #dbe4ff;--mantine-color-indigo-2: #bac8ff;--mantine-color-indigo-3: #91a7ff;--mantine-color-indigo-4: #748ffc;--mantine-color-indigo-5: #5c7cfa;--mantine-color-indigo-6: #4c6ef5;--mantine-color-indigo-7: #4263eb;--mantine-color-indigo-8: #3b5bdb;--mantine-color-indigo-9: #364fc7;--mantine-color-blue-0: #e7f5ff;--mantine-color-blue-1: #d0ebff;--mantine-color-blue-2: #a5d8ff;--mantine-color-blue-3: #74c0fc;--mantine-color-blue-4: #4dabf7;--mantine-color-blue-5: #339af0;--mantine-color-blue-6: #228be6;--mantine-color-blue-7: #1c7ed6;--mantine-color-blue-8: #1971c2;--mantine-color-blue-9: #1864ab;--mantine-color-cyan-0: #e3fafc;--mantine-color-cyan-1: #c5f6fa;--mantine-color-cyan-2: #99e9f2;--mantine-color-cyan-3: #66d9e8;--mantine-color-cyan-4: #3bc9db;--mantine-color-cyan-5: #22b8cf;--mantine-color-cyan-6: #15aabf;--mantine-color-cyan-7: #1098ad;--mantine-color-cyan-8: #0c8599;--mantine-color-cyan-9: #0b7285;--mantine-color-teal-0: #e6fcf5;--mantine-color-teal-1: #c3fae8;--mantine-color-teal-2: #96f2d7;--mantine-color-teal-3: #63e6be;--mantine-color-teal-4: #38d9a9;--mantine-color-teal-5: #20c997;--mantine-color-teal-6: #12b886;--mantine-color-teal-7: #0ca678;--mantine-color-teal-8: #099268;--mantine-color-teal-9: #087f5b;--mantine-color-green-0: #ebfbee;--mantine-color-green-1: #d3f9d8;--mantine-color-green-2: #b2f2bb;--mantine-color-green-3: #8ce99a;--mantine-color-green-4: #69db7c;--mantine-color-green-5: #51cf66;--mantine-color-green-6: #40c057;--mantine-color-green-7: #37b24d;--mantine-color-green-8: #2f9e44;--mantine-color-green-9: #2b8a3e;--mantine-color-lime-0: #f4fce3;--mantine-color-lime-1: #e9fac8;--mantine-color-lime-2: #d8f5a2;--mantine-color-lime-3: #c0eb75;--mantine-color-lime-4: #a9e34b;--mantine-color-lime-5: #94d82d;--mantine-color-lime-6: #82c91e;--mantine-color-lime-7: #74b816;--mantine-color-lime-8: #66a80f;--mantine-color-lime-9: #5c940d;--mantine-color-yellow-0: #fff9db;--mantine-color-yellow-1: #fff3bf;--mantine-color-yellow-2: #ffec99;--mantine-color-yellow-3: #ffe066;--mantine-color-yellow-4: #ffd43b;--mantine-color-yellow-5: #fcc419;--mantine-color-yellow-6: #fab005;--mantine-color-yellow-7: #f59f00;--mantine-color-yellow-8: #f08c00;--mantine-color-yellow-9: #e67700;--mantine-color-orange-0: #fff4e6;--mantine-color-orange-1: #ffe8cc;--mantine-color-orange-2: #ffd8a8;--mantine-color-orange-3: #ffc078;--mantine-color-orange-4: #ffa94d;--mantine-color-orange-5: #ff922b;--mantine-color-orange-6: #fd7e14;--mantine-color-orange-7: #f76707;--mantine-color-orange-8: #e8590c;--mantine-color-orange-9: #d9480f;--mantine-h1-font-size: calc(2.125rem \* var(--mantine-scale));--mantine-h1-line-height: 1.3;--mantine-h1-font-weight: 700;--mantine-h2-font-size: calc(1.625rem \* var(--mantine-scale));--mantine-h2-line-height: 1.35;--mantine-h2-font-weight: 700;--mantine-h3-font-size: calc(1.375rem \* var(--mantine-scale));--mantine-h3-line-height: 1.4;--mantine-h3-font-weight: 700;--mantine-h4-font-size: calc(1.125rem \* var(--mantine-scale));--mantine-h4-line-height: 1.45;--mantine-h4-font-weight: 700;--mantine-h5-font-size: calc(1rem \* var(--mantine-scale));--mantine-h5-line-height: 1.5;--mantine-h5-font-weight: 700;--mantine-h6-font-size: calc(0.875rem \* var(--mantine-scale));--mantine-h6-line-height: 1.5;--mantine-h6-font-weight: 700;} #\\:r3h\\:--container\[data-mantine-color-scheme="dark"\]{--mantine-color-scheme: dark;--mantine-primary-color-contrast: var(--mantine-color-white);--mantine-color-bright: var(--mantine-color-white);--mantine-color-text: var(--mantine-color-dark-0);--mantine-color-body: var(--mantine-color-dark-7);--mantine-color-error: var(--mantine-color-red-8);--mantine-color-placeholder: var(--mantine-color-dark-3);--mantine-color-anchor: var(--mantine-color-blue-4);--mantine-color-default: var(--mantine-color-dark-6);--mantine-color-default-hover: var(--mantine-color-dark-5);--mantine-color-default-color: var(--mantine-color-white);--mantine-color-default-border: var(--mantine-color-dark-4);--mantine-color-dimmed: var(--mantine-color-dark-2);--mantine-color-disabled: var(--mantine-color-dark-6);--mantine-color-disabled-color: var(--mantine-color-dark-3);--mantine-color-disabled-border: var(--mantine-color-dark-4);--mantine-color-dark-text: var(--mantine-color-dark-4);--mantine-color-dark-filled: var(--mantine-color-dark-8);--mantine-color-dark-filled-hover: var(--mantine-color-dark-9);--mantine-color-dark-light: rgba(46, 46, 46, 0.15);--mantine-color-dark-light-hover: rgba(46, 46, 46, 0.2);--mantine-color-dark-light-color: var(--mantine-color-dark-3);--mantine-color-dark-outline: var(--mantine-color-dark-4);--mantine-color-dark-outline-hover: rgba(66, 66, 66, 0.05);--mantine-color-gray-text: var(--mantine-color-gray-4);--mantine-color-gray-filled: var(--mantine-color-gray-8);--mantine-color-gray-filled-hover: var(--mantine-color-gray-9);--mantine-color-gray-light: rgba(134, 142, 150, 0.15);--mantine-color-gray-light-hover: rgba(134, 142, 150, 0.2);--mantine-color-gray-light-color: var(--mantine-color-gray-3);--mantine-color-gray-outline: var(--mantine-color-gray-4);--mantine-color-gray-outline-hover: rgba(206, 212, 218, 0.05);--mantine-color-red-text: var(--mantine-color-red-4);--mantine-color-red-filled: var(--mantine-color-red-8);--mantine-color-red-filled-hover: var(--mantine-color-red-9);--mantine-color-red-light: rgba(250, 82, 82, 0.15);--mantine-color-red-light-hover: rgba(250, 82, 82, 0.2);--mantine-color-red-light-color: var(--mantine-color-red-3);--mantine-color-red-outline: var(--mantine-color-red-4);--mantine-color-red-outline-hover: rgba(255, 135, 135, 0.05);--mantine-color-pink-text: var(--mantine-color-pink-4);--mantine-color-pink-filled: var(--mantine-color-pink-8);--mantine-color-pink-filled-hover: var(--mantine-color-pink-9);--mantine-color-pink-light: rgba(230, 73, 128, 0.15);--mantine-color-pink-light-hover: rgba(230, 73, 128, 0.2);--mantine-color-pink-light-color: var(--mantine-color-pink-3);--mantine-color-pink-outline: var(--mantine-color-pink-4);--mantine-color-pink-outline-hover: rgba(247, 131, 172, 0.05);--mantine-color-grape-text: var(--mantine-color-grape-4);--mantine-color-grape-filled: var(--mantine-color-grape-8);--mantine-color-grape-filled-hover: var(--mantine-color-grape-9);--mantine-color-grape-light: rgba(190, 75, 219, 0.15);--mantine-color-grape-light-hover: rgba(190, 75, 219, 0.2);--mantine-color-grape-light-color: var(--mantine-color-grape-3);--mantine-color-grape-outline: var(--mantine-color-grape-4);--mantine-color-grape-outline-hover: rgba(218, 119, 242, 0.05);--mantine-color-violet-text: var(--mantine-color-violet-4);--mantine-color-violet-filled: var(--mantine-color-violet-8);--mantine-color-violet-filled-hover: var(--mantine-color-violet-9);--mantine-color-violet-light: rgba(121, 80, 242, 0.15);--mantine-color-violet-light-hover: rgba(121, 80, 242, 0.2);--mantine-color-violet-light-color: var(--mantine-color-violet-3);--mantine-color-violet-outline: var(--mantine-color-violet-4);--mantine-color-violet-outline-hover: rgba(151, 117, 250, 0.05);--mantine-color-indigo-text: var(--mantine-color-indigo-4);--mantine-color-indigo-filled: var(--mantine-color-indigo-8);--mantine-color-indigo-filled-hover: var(--mantine-color-indigo-9);--mantine-color-indigo-light: rgba(76, 110, 245, 0.15);--mantine-color-indigo-light-hover: rgba(76, 110, 245, 0.2);--mantine-color-indigo-light-color: var(--mantine-color-indigo-3);--mantine-color-indigo-outline: var(--mantine-color-indigo-4);--mantine-color-indigo-outline-hover: rgba(116, 143, 252, 0.05);--mantine-color-blue-text: var(--mantine-color-blue-4);--mantine-color-blue-filled: var(--mantine-color-blue-8);--mantine-color-blue-filled-hover: var(--mantine-color-blue-9);--mantine-color-blue-light: rgba(34, 139, 230, 0.15);--mantine-color-blue-light-hover: rgba(34, 139, 230, 0.2);--mantine-color-blue-light-color: var(--mantine-color-blue-3);--mantine-color-blue-outline: var(--mantine-color-blue-4);--mantine-color-blue-outline-hover: rgba(77, 171, 247, 0.05);--mantine-color-cyan-text: var(--mantine-color-cyan-4);--mantine-color-cyan-filled: var(--mantine-color-cyan-8);--mantine-color-cyan-filled-hover: var(--mantine-color-cyan-9);--mantine-color-cyan-light: rgba(21, 170, 191, 0.15);--mantine-color-cyan-light-hover: rgba(21, 170, 191, 0.2);--mantine-color-cyan-light-color: var(--mantine-color-cyan-3);--mantine-color-cyan-outline: var(--mantine-color-cyan-4);--mantine-color-cyan-outline-hover: rgba(59, 201, 219, 0.05);--mantine-color-teal-text: var(--mantine-color-teal-4);--mantine-color-teal-filled: var(--mantine-color-teal-8);--mantine-color-teal-filled-hover: var(--mantine-color-teal-9);--mantine-color-teal-light: rgba(18, 184, 134, 0.15);--mantine-color-teal-light-hover: rgba(18, 184, 134, 0.2);--mantine-color-teal-light-color: var(--mantine-color-teal-3);--mantine-color-teal-outline: var(--mantine-color-teal-4);--mantine-color-teal-outline-hover: rgba(56, 217, 169, 0.05);--mantine-color-green-text: var(--mantine-color-green-4);--mantine-color-green-filled: var(--mantine-color-green-8);--mantine-color-green-filled-hover: var(--mantine-color-green-9);--mantine-color-green-light: rgba(64, 192, 87, 0.15);--mantine-color-green-light-hover: rgba(64, 192, 87, 0.2);--mantine-color-green-light-color: var(--mantine-color-green-3);--mantine-color-green-outline: var(--mantine-color-green-4);--mantine-color-green-outline-hover: rgba(105, 219, 124, 0.05);--mantine-color-lime-text: var(--mantine-color-lime-4);--mantine-color-lime-filled: var(--mantine-color-lime-8);--mantine-color-lime-filled-hover: var(--mantine-color-lime-9);--mantine-color-lime-light: rgba(130, 201, 30, 0.15);--mantine-color-lime-light-hover: rgba(130, 201, 30, 0.2);--mantine-color-lime-light-color: var(--mantine-color-lime-3);--mantine-color-lime-outline: var(--mantine-color-lime-4);--mantine-color-lime-outline-hover: rgba(169, 227, 75, 0.05);--mantine-color-yellow-text: var(--mantine-color-yellow-4);--mantine-color-yellow-filled: var(--mantine-color-yellow-8);--mantine-color-yellow-filled-hover: var(--mantine-color-yellow-9);--mantine-color-yellow-light: rgba(250, 176, 5, 0.15);--mantine-color-yellow-light-hover: rgba(250, 176, 5, 0.2);--mantine-color-yellow-light-color: var(--mantine-color-yellow-3);--mantine-color-yellow-outline: var(--mantine-color-yellow-4);--mantine-color-yellow-outline-hover: rgba(255, 212, 59, 0.05);--mantine-color-orange-text: var(--mantine-color-orange-4);--mantine-color-orange-filled: var(--mantine-color-orange-8);--mantine-color-orange-filled-hover: var(--mantine-color-orange-9);--mantine-color-orange-light: rgba(253, 126, 20, 0.15);--mantine-color-orange-light-hover: rgba(253, 126, 20, 0.2);--mantine-color-orange-light-color: var(--mantine-color-orange-3);--mantine-color-orange-outline: var(--mantine-color-orange-4);--mantine-color-orange-outline-hover: rgba(255, 169, 77, 0.05);} #\\:r3h\\:--container\[data-mantine-color-scheme="light"\]{--mantine-color-scheme: light;--mantine-primary-color-contrast: var(--mantine-color-white);--mantine-color-bright: var(--mantine-color-black);--mantine-color-text: #000;--mantine-color-body: #fff;--mantine-color-error: var(--mantine-color-red-6);--mantine-color-placeholder: var(--mantine-color-gray-5);--mantine-color-anchor: var(--mantine-color-blue-6);--mantine-color-default: var(--mantine-color-white);--mantine-color-default-hover: var(--mantine-color-gray-0);--mantine-color-default-color: var(--mantine-color-black);--mantine-color-default-border: var(--mantine-color-gray-4);--mantine-color-dimmed: var(--mantine-color-gray-6);--mantine-color-disabled: var(--mantine-color-gray-2);--mantine-color-disabled-color: var(--mantine-color-gray-5);--mantine-color-disabled-border: var(--mantine-color-gray-3);--mantine-color-dark-text: var(--mantine-color-dark-filled);--mantine-color-dark-filled: var(--mantine-color-dark-6);--mantine-color-dark-filled-hover: var(--mantine-color-dark-7);--mantine-color-dark-light: rgba(46, 46, 46, 0.1);--mantine-color-dark-light-hover: rgba(46, 46, 46, 0.12);--mantine-color-dark-light-color: var(--mantine-color-dark-6);--mantine-color-dark-outline: var(--mantine-color-dark-6);--mantine-color-dark-outline-hover: rgba(46, 46, 46, 0.05);--mantine-color-gray-text: var(--mantine-color-gray-filled);--mantine-color-gray-filled: var(--mantine-color-gray-6);--mantine-color-gray-filled-hover: var(--mantine-color-gray-7);--mantine-color-gray-light: rgba(134, 142, 150, 0.1);--mantine-color-gray-light-hover: rgba(134, 142, 150, 0.12);--mantine-color-gray-light-color: var(--mantine-color-gray-6);--mantine-color-gray-outline: var(--mantine-color-gray-6);--mantine-color-gray-outline-hover: rgba(134, 142, 150, 0.05);--mantine-color-red-text: var(--mantine-color-red-filled);--mantine-color-red-filled: var(--mantine-color-red-6);--mantine-color-red-filled-hover: var(--mantine-color-red-7);--mantine-color-red-light: rgba(250, 82, 82, 0.1);--mantine-color-red-light-hover: rgba(250, 82, 82, 0.12);--mantine-color-red-light-color: var(--mantine-color-red-6);--mantine-color-red-outline: var(--mantine-color-red-6);--mantine-color-red-outline-hover: rgba(250, 82, 82, 0.05);--mantine-color-pink-text: var(--mantine-color-pink-filled);--mantine-color-pink-filled: var(--mantine-color-pink-6);--mantine-color-pink-filled-hover: var(--mantine-color-pink-7);--mantine-color-pink-light: rgba(230, 73, 128, 0.1);--mantine-color-pink-light-hover: rgba(230, 73, 128, 0.12);--mantine-color-pink-light-color: var(--mantine-color-pink-6);--mantine-color-pink-outline: var(--mantine-color-pink-6);--mantine-color-pink-outline-hover: rgba(230, 73, 128, 0.05);--mantine-color-grape-text: var(--mantine-color-grape-filled);--mantine-color-grape-filled: var(--mantine-color-grape-6);--mantine-color-grape-filled-hover: var(--mantine-color-grape-7);--mantine-color-grape-light: rgba(190, 75, 219, 0.1);--mantine-color-grape-light-hover: rgba(190, 75, 219, 0.12);--mantine-color-grape-light-color: var(--mantine-color-grape-6);--mantine-color-grape-outline: var(--mantine-color-grape-6);--mantine-color-grape-outline-hover: rgba(190, 75, 219, 0.05);--mantine-color-violet-text: var(--mantine-color-violet-filled);--mantine-color-violet-filled: var(--mantine-color-violet-6);--mantine-color-violet-filled-hover: var(--mantine-color-violet-7);--mantine-color-violet-light: rgba(121, 80, 242, 0.1);--mantine-color-violet-light-hover: rgba(121, 80, 242, 0.12);--mantine-color-violet-light-color: var(--mantine-color-violet-6);--mantine-color-violet-outline: var(--mantine-color-violet-6);--mantine-color-violet-outline-hover: rgba(121, 80, 242, 0.05);--mantine-color-indigo-text: var(--mantine-color-indigo-filled);--mantine-color-indigo-filled: var(--mantine-color-indigo-6);--mantine-color-indigo-filled-hover: var(--mantine-color-indigo-7);--mantine-color-indigo-light: rgba(76, 110, 245, 0.1);--mantine-color-indigo-light-hover: rgba(76, 110, 245, 0.12);--mantine-color-indigo-light-color: var(--mantine-color-indigo-6);--mantine-color-indigo-outline: var(--mantine-color-indigo-6);--mantine-color-indigo-outline-hover: rgba(76, 110, 245, 0.05);--mantine-color-blue-text: var(--mantine-color-blue-filled);--mantine-color-blue-filled: var(--mantine-color-blue-6);--mantine-color-blue-filled-hover: var(--mantine-color-blue-7);--mantine-color-blue-light: rgba(34, 139, 230, 0.1);--mantine-color-blue-light-hover: rgba(34, 139, 230, 0.12);--mantine-color-blue-light-color: var(--mantine-color-blue-6);--mantine-color-blue-outline: var(--mantine-color-blue-6);--mantine-color-blue-outline-hover: rgba(34, 139, 230, 0.05);--mantine-color-cyan-text: var(--mantine-color-cyan-filled);--mantine-color-cyan-filled: var(--mantine-color-cyan-6);--mantine-color-cyan-filled-hover: var(--mantine-color-cyan-7);--mantine-color-cyan-light: rgba(21, 170, 191, 0.1);--mantine-color-cyan-light-hover: rgba(21, 170, 191, 0.12);--mantine-color-cyan-light-color: var(--mantine-color-cyan-6);--mantine-color-cyan-outline: var(--mantine-color-cyan-6);--mantine-color-cyan-outline-hover: rgba(21, 170, 191, 0.05);--mantine-color-teal-text: var(--mantine-color-teal-filled);--mantine-color-teal-filled: var(--mantine-color-teal-6);--mantine-color-teal-filled-hover: var(--mantine-color-teal-7);--mantine-color-teal-light: rgba(18, 184, 134, 0.1);--mantine-color-teal-light-hover: rgba(18, 184, 134, 0.12);--mantine-color-teal-light-color: var(--mantine-color-teal-6);--mantine-color-teal-outline: var(--mantine-color-teal-6);--mantine-color-teal-outline-hover: rgba(18, 184, 134, 0.05);--mantine-color-green-text: var(--mantine-color-green-filled);--mantine-color-green-filled: var(--mantine-color-green-6);--mantine-color-green-filled-hover: var(--mantine-color-green-7);--mantine-color-green-light: rgba(64, 192, 87, 0.1);--mantine-color-green-light-hover: rgba(64, 192, 87, 0.12);--mantine-color-green-light-color: var(--mantine-color-green-6);--mantine-color-green-outline: var(--mantine-color-green-6);--mantine-color-green-outline-hover: rgba(64, 192, 87, 0.05);--mantine-color-lime-text: var(--mantine-color-lime-filled);--mantine-color-lime-filled: var(--mantine-color-lime-6);--mantine-color-lime-filled-hover: var(--mantine-color-lime-7);--mantine-color-lime-light: rgba(130, 201, 30, 0.1);--mantine-color-lime-light-hover: rgba(130, 201, 30, 0.12);--mantine-color-lime-light-color: var(--mantine-color-lime-6);--mantine-color-lime-outline: var(--mantine-color-lime-6);--mantine-color-lime-outline-hover: rgba(130, 201, 30, 0.05);--mantine-color-yellow-text: var(--mantine-color-yellow-filled);--mantine-color-yellow-filled: var(--mantine-color-yellow-6);--mantine-color-yellow-filled-hover: var(--mantine-color-yellow-7);--mantine-color-yellow-light: rgba(250, 176, 5, 0.1);--mantine-color-yellow-light-hover: rgba(250, 176, 5, 0.12);--mantine-color-yellow-light-color: var(--mantine-color-yellow-6);--mantine-color-yellow-outline: var(--mantine-color-yellow-6);--mantine-color-yellow-outline-hover: rgba(250, 176, 5, 0.05);--mantine-color-orange-text: var(--mantine-color-orange-filled);--mantine-color-orange-filled: var(--mantine-color-orange-6);--mantine-color-orange-filled-hover: var(--mantine-color-orange-7);--mantine-color-orange-light: rgba(253, 126, 20, 0.1);--mantine-color-orange-light-hover: rgba(253, 126, 20, 0.12);--mantine-color-orange-light-color: var(--mantine-color-orange-6);--mantine-color-orange-outline: var(--mantine-color-orange-6);--mantine-color-orange-outline-hover: rgba(253, 126, 20, 0.05);} #\\:r3h\\:--container\[data-mantine-color-scheme="dark"\] { --mantine-color-scheme: dark; } #\\:r3h\\:--container\[data-mantine-color-scheme="light"\] { --mantine-color-scheme: light; }
|
|
80
546
|
|
|
81
547
|
Welcome to the IressEditor
|
|
82
548
|
--------------------------
|
|
@@ -153,14 +619,12 @@ The `IressEditor` component can be used with `IressForm` to easily manage the st
|
|
|
153
619
|
|
|
154
620
|
Copy
|
|
155
621
|
|
|
156
|
-
\*
|
|
622
|
+
\*RequiredContent
|
|
157
623
|
|
|
158
|
-
#\\:r1s\\:\_\_content--container{--mantine-scale: 1;--mantine-cursor-type: default;--mantine-color-scheme: light dark;--mantine-webkit-font-smoothing: antialiased;--mantine-moz-font-smoothing: grayscale;--mantine-color-white: #fff;--mantine-color-black: #000;--mantine-line-height: 1.55;--mantine-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;--mantine-font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-font-family-headings: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;--mantine-heading-font-weight: 700;--mantine-heading-text-wrap: wrap;--mantine-radius-default: calc(0.25rem \* var(--mantine-scale));--mantine-primary-color-filled: var(--mantine-color-blue-filled);--mantine-primary-color-filled-hover: var(--mantine-color-blue-filled-hover);--mantine-primary-color-light: var(--mantine-color-blue-light);--mantine-primary-color-light-hover: var(--mantine-color-blue-light-hover);--mantine-primary-color-light-color: var(--mantine-color-blue-light-color);--mantine-breakpoint-xs: 36em;--mantine-breakpoint-sm: 48em;--mantine-breakpoint-md: 62em;--mantine-breakpoint-lg: 75em;--mantine-breakpoint-xl: 88em;--mantine-spacing-xs: calc(0.625rem \* var(--mantine-scale));--mantine-spacing-sm: calc(0.75rem \* var(--mantine-scale));--mantine-spacing-md: calc(1rem \* var(--mantine-scale));--mantine-spacing-lg: calc(1.25rem \* var(--mantine-scale));--mantine-spacing-xl: calc(2rem \* var(--mantine-scale));--mantine-font-size-xs: calc(0.75rem \* var(--mantine-scale));--mantine-font-size-sm: calc(0.875rem \* var(--mantine-scale));--mantine-font-size-md: calc(1rem \* var(--mantine-scale));--mantine-font-size-lg: calc(1.125rem \* var(--mantine-scale));--mantine-font-size-xl: calc(1.25rem \* var(--mantine-scale));--mantine-line-height-xs: 1.4;--mantine-line-height-sm: 1.45;--mantine-line-height-md: 1.55;--mantine-line-height-lg: 1.6;--mantine-line-height-xl: 1.65;--mantine-shadow-xs: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.125rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.1);--mantine-shadow-sm: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(0.625rem \* var(--mantine-scale)) calc(0.9375rem \* var(--mantine-scale)) calc(-0.3125rem \* var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.4375rem \* var(--mantine-scale)) calc(0.4375rem \* var(--mantine-scale)) calc(-0.3125rem \* var(--mantine-scale));--mantine-shadow-md: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(1.25rem \* var(--mantine-scale)) calc(1.5625rem \* var(--mantine-scale)) calc(-0.3125rem \* var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.625rem \* var(--mantine-scale)) calc(0.625rem \* var(--mantine-scale)) calc(-0.3125rem \* var(--mantine-scale));--mantine-shadow-lg: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(1.75rem \* var(--mantine-scale)) calc(1.4375rem \* var(--mantine-scale)) calc(-0.4375rem \* var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.75rem \* var(--mantine-scale)) calc(0.75rem \* var(--mantine-scale)) calc(-0.4375rem \* var(--mantine-scale));--mantine-shadow-xl: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(2.25rem \* var(--mantine-scale)) calc(1.75rem \* var(--mantine-scale)) calc(-0.4375rem \* var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(1.0625rem \* var(--mantine-scale)) calc(1.0625rem \* var(--mantine-scale)) calc(-0.4375rem \* var(--mantine-scale));--mantine-radius-xs: calc(0.125rem \* var(--mantine-scale));--mantine-radius-sm: calc(0.25rem \* var(--mantine-scale));--mantine-radius-md: calc(0.5rem \* var(--mantine-scale));--mantine-radius-lg: calc(1rem \* var(--mantine-scale));--mantine-radius-xl: calc(2rem \* var(--mantine-scale));--mantine-primary-color-0: var(--mantine-color-blue-0);--mantine-primary-color-1: var(--mantine-color-blue-1);--mantine-primary-color-2: var(--mantine-color-blue-2);--mantine-primary-color-3: var(--mantine-color-blue-3);--mantine-primary-color-4: var(--mantine-color-blue-4);--mantine-primary-color-5: var(--mantine-color-blue-5);--mantine-primary-color-6: var(--mantine-color-blue-6);--mantine-primary-color-7: var(--mantine-color-blue-7);--mantine-primary-color-8: var(--mantine-color-blue-8);--mantine-primary-color-9: var(--mantine-color-blue-9);--mantine-color-dark-0: #C9C9C9;--mantine-color-dark-1: #b8b8b8;--mantine-color-dark-2: #828282;--mantine-color-dark-3: #696969;--mantine-color-dark-4: #424242;--mantine-color-dark-5: #3b3b3b;--mantine-color-dark-6: #2e2e2e;--mantine-color-dark-7: #242424;--mantine-color-dark-8: #1f1f1f;--mantine-color-dark-9: #141414;--mantine-color-gray-0: #f8f9fa;--mantine-color-gray-1: #f1f3f5;--mantine-color-gray-2: #e9ecef;--mantine-color-gray-3: #dee2e6;--mantine-color-gray-4: #ced4da;--mantine-color-gray-5: #adb5bd;--mantine-color-gray-6: #868e96;--mantine-color-gray-7: #495057;--mantine-color-gray-8: #343a40;--mantine-color-gray-9: #212529;--mantine-color-red-0: #fff5f5;--mantine-color-red-1: #ffe3e3;--mantine-color-red-2: #ffc9c9;--mantine-color-red-3: #ffa8a8;--mantine-color-red-4: #ff8787;--mantine-color-red-5: #ff6b6b;--mantine-color-red-6: #fa5252;--mantine-color-red-7: #f03e3e;--mantine-color-red-8: #e03131;--mantine-color-red-9: #c92a2a;--mantine-color-pink-0: #fff0f6;--mantine-color-pink-1: #ffdeeb;--mantine-color-pink-2: #fcc2d7;--mantine-color-pink-3: #faa2c1;--mantine-color-pink-4: #f783ac;--mantine-color-pink-5: #f06595;--mantine-color-pink-6: #e64980;--mantine-color-pink-7: #d6336c;--mantine-color-pink-8: #c2255c;--mantine-color-pink-9: #a61e4d;--mantine-color-grape-0: #f8f0fc;--mantine-color-grape-1: #f3d9fa;--mantine-color-grape-2: #eebefa;--mantine-color-grape-3: #e599f7;--mantine-color-grape-4: #da77f2;--mantine-color-grape-5: #cc5de8;--mantine-color-grape-6: #be4bdb;--mantine-color-grape-7: #ae3ec9;--mantine-color-grape-8: #9c36b5;--mantine-color-grape-9: #862e9c;--mantine-color-violet-0: #f3f0ff;--mantine-color-violet-1: #e5dbff;--mantine-color-violet-2: #d0bfff;--mantine-color-violet-3: #b197fc;--mantine-color-violet-4: #9775fa;--mantine-color-violet-5: #845ef7;--mantine-color-violet-6: #7950f2;--mantine-color-violet-7: #7048e8;--mantine-color-violet-8: #6741d9;--mantine-color-violet-9: #5f3dc4;--mantine-color-indigo-0: #edf2ff;--mantine-color-indigo-1: #dbe4ff;--mantine-color-indigo-2: #bac8ff;--mantine-color-indigo-3: #91a7ff;--mantine-color-indigo-4: #748ffc;--mantine-color-indigo-5: #5c7cfa;--mantine-color-indigo-6: #4c6ef5;--mantine-color-indigo-7: #4263eb;--mantine-color-indigo-8: #3b5bdb;--mantine-color-indigo-9: #364fc7;--mantine-color-blue-0: #e7f5ff;--mantine-color-blue-1: #d0ebff;--mantine-color-blue-2: #a5d8ff;--mantine-color-blue-3: #74c0fc;--mantine-color-blue-4: #4dabf7;--mantine-color-blue-5: #339af0;--mantine-color-blue-6: #228be6;--mantine-color-blue-7: #1c7ed6;--mantine-color-blue-8: #1971c2;--mantine-color-blue-9: #1864ab;--mantine-color-cyan-0: #e3fafc;--mantine-color-cyan-1: #c5f6fa;--mantine-color-cyan-2: #99e9f2;--mantine-color-cyan-3: #66d9e8;--mantine-color-cyan-4: #3bc9db;--mantine-color-cyan-5: #22b8cf;--mantine-color-cyan-6: #15aabf;--mantine-color-cyan-7: #1098ad;--mantine-color-cyan-8: #0c8599;--mantine-color-cyan-9: #0b7285;--mantine-color-teal-0: #e6fcf5;--mantine-color-teal-1: #c3fae8;--mantine-color-teal-2: #96f2d7;--mantine-color-teal-3: #63e6be;--mantine-color-teal-4: #38d9a9;--mantine-color-teal-5: #20c997;--mantine-color-teal-6: #12b886;--mantine-color-teal-7: #0ca678;--mantine-color-teal-8: #099268;--mantine-color-teal-9: #087f5b;--mantine-color-green-0: #ebfbee;--mantine-color-green-1: #d3f9d8;--mantine-color-green-2: #b2f2bb;--mantine-color-green-3: #8ce99a;--mantine-color-green-4: #69db7c;--mantine-color-green-5: #51cf66;--mantine-color-green-6: #40c057;--mantine-color-green-7: #37b24d;--mantine-color-green-8: #2f9e44;--mantine-color-green-9: #2b8a3e;--mantine-color-lime-0: #f4fce3;--mantine-color-lime-1: #e9fac8;--mantine-color-lime-2: #d8f5a2;--mantine-color-lime-3: #c0eb75;--mantine-color-lime-4: #a9e34b;--mantine-color-lime-5: #94d82d;--mantine-color-lime-6: #82c91e;--mantine-color-lime-7: #74b816;--mantine-color-lime-8: #66a80f;--mantine-color-lime-9: #5c940d;--mantine-color-yellow-0: #fff9db;--mantine-color-yellow-1: #fff3bf;--mantine-color-yellow-2: #ffec99;--mantine-color-yellow-3: #ffe066;--mantine-color-yellow-4: #ffd43b;--mantine-color-yellow-5: #fcc419;--mantine-color-yellow-6: #fab005;--mantine-color-yellow-7: #f59f00;--mantine-color-yellow-8: #f08c00;--mantine-color-yellow-9: #e67700;--mantine-color-orange-0: #fff4e6;--mantine-color-orange-1: #ffe8cc;--mantine-color-orange-2: #ffd8a8;--mantine-color-orange-3: #ffc078;--mantine-color-orange-4: #ffa94d;--mantine-color-orange-5: #ff922b;--mantine-color-orange-6: #fd7e14;--mantine-color-orange-7: #f76707;--mantine-color-orange-8: #e8590c;--mantine-color-orange-9: #d9480f;--mantine-h1-font-size: calc(2.125rem \* var(--mantine-scale));--mantine-h1-line-height: 1.3;--mantine-h1-font-weight: 700;--mantine-h2-font-size: calc(1.625rem \* var(--mantine-scale));--mantine-h2-line-height: 1.35;--mantine-h2-font-weight: 700;--mantine-h3-font-size: calc(1.375rem \* var(--mantine-scale));--mantine-h3-line-height: 1.4;--mantine-h3-font-weight: 700;--mantine-h4-font-size: calc(1.125rem \* var(--mantine-scale));--mantine-h4-line-height: 1.45;--mantine-h4-font-weight: 700;--mantine-h5-font-size: calc(1rem \* var(--mantine-scale));--mantine-h5-line-height: 1.5;--mantine-h5-font-weight: 700;--mantine-h6-font-size: calc(0.875rem \* var(--mantine-scale));--mantine-h6-line-height: 1.5;--mantine-h6-font-weight: 700;}#\\:r1s\\:\_\_content--container\[data-mantine-color-scheme="dark"\]{--mantine-primary-color-contrast: var(--mantine-color-white);--mantine-color-bright: var(--mantine-color-white);--mantine-color-text: var(--mantine-color-dark-0);--mantine-color-body: var(--mantine-color-dark-7);--mantine-color-error: var(--mantine-color-red-8);--mantine-color-placeholder: var(--mantine-color-dark-3);--mantine-color-anchor: var(--mantine-color-blue-4);--mantine-color-default: var(--mantine-color-dark-6);--mantine-color-default-hover: var(--mantine-color-dark-5);--mantine-color-default-color: var(--mantine-color-white);--mantine-color-default-border: var(--mantine-color-dark-4);--mantine-color-dimmed: var(--mantine-color-dark-2);--mantine-color-disabled: var(--mantine-color-dark-6);--mantine-color-disabled-color: var(--mantine-color-dark-3);--mantine-color-disabled-border: var(--mantine-color-gray-6);--mantine-color-dark-text: var(--mantine-color-dark-4);--mantine-color-dark-filled: var(--mantine-color-dark-8);--mantine-color-dark-filled-hover: var(--mantine-color-dark-9);--mantine-color-dark-light: rgba(46, 46, 46, 0.15);--mantine-color-dark-light-hover: rgba(46, 46, 46, 0.2);--mantine-color-dark-light-color: var(--mantine-color-dark-3);--mantine-color-dark-outline: var(--mantine-color-dark-4);--mantine-color-dark-outline-hover: rgba(66, 66, 66, 0.05);--mantine-color-gray-text: var(--mantine-color-gray-4);--mantine-color-gray-filled: var(--mantine-color-gray-8);--mantine-color-gray-filled-hover: var(--mantine-color-gray-9);--mantine-color-gray-light: rgba(134, 142, 150, 0.15);--mantine-color-gray-light-hover: rgba(134, 142, 150, 0.2);--mantine-color-gray-light-color: var(--mantine-color-gray-3);--mantine-color-gray-outline: var(--mantine-color-gray-4);--mantine-color-gray-outline-hover: rgba(206, 212, 218, 0.05);--mantine-color-red-text: var(--mantine-color-red-4);--mantine-color-red-filled: var(--mantine-color-red-8);--mantine-color-red-filled-hover: var(--mantine-color-red-9);--mantine-color-red-light: rgba(250, 82, 82, 0.15);--mantine-color-red-light-hover: rgba(250, 82, 82, 0.2);--mantine-color-red-light-color: var(--mantine-color-red-3);--mantine-color-red-outline: var(--mantine-color-red-4);--mantine-color-red-outline-hover: rgba(255, 135, 135, 0.05);--mantine-color-pink-text: var(--mantine-color-pink-4);--mantine-color-pink-filled: var(--mantine-color-pink-8);--mantine-color-pink-filled-hover: var(--mantine-color-pink-9);--mantine-color-pink-light: rgba(230, 73, 128, 0.15);--mantine-color-pink-light-hover: rgba(230, 73, 128, 0.2);--mantine-color-pink-light-color: var(--mantine-color-pink-3);--mantine-color-pink-outline: var(--mantine-color-pink-4);--mantine-color-pink-outline-hover: rgba(247, 131, 172, 0.05);--mantine-color-grape-text: var(--mantine-color-grape-4);--mantine-color-grape-filled: var(--mantine-color-grape-8);--mantine-color-grape-filled-hover: var(--mantine-color-grape-9);--mantine-color-grape-light: rgba(190, 75, 219, 0.15);--mantine-color-grape-light-hover: rgba(190, 75, 219, 0.2);--mantine-color-grape-light-color: var(--mantine-color-grape-3);--mantine-color-grape-outline: var(--mantine-color-grape-4);--mantine-color-grape-outline-hover: rgba(218, 119, 242, 0.05);--mantine-color-violet-text: var(--mantine-color-violet-4);--mantine-color-violet-filled: var(--mantine-color-violet-8);--mantine-color-violet-filled-hover: var(--mantine-color-violet-9);--mantine-color-violet-light: rgba(121, 80, 242, 0.15);--mantine-color-violet-light-hover: rgba(121, 80, 242, 0.2);--mantine-color-violet-light-color: var(--mantine-color-violet-3);--mantine-color-violet-outline: var(--mantine-color-violet-4);--mantine-color-violet-outline-hover: rgba(151, 117, 250, 0.05);--mantine-color-indigo-text: var(--mantine-color-indigo-4);--mantine-color-indigo-filled: var(--mantine-color-indigo-8);--mantine-color-indigo-filled-hover: var(--mantine-color-indigo-9);--mantine-color-indigo-light: rgba(76, 110, 245, 0.15);--mantine-color-indigo-light-hover: rgba(76, 110, 245, 0.2);--mantine-color-indigo-light-color: var(--mantine-color-indigo-3);--mantine-color-indigo-outline: var(--mantine-color-indigo-4);--mantine-color-indigo-outline-hover: rgba(116, 143, 252, 0.05);--mantine-color-blue-text: var(--mantine-color-blue-4);--mantine-color-blue-filled: var(--mantine-color-blue-8);--mantine-color-blue-filled-hover: var(--mantine-color-blue-9);--mantine-color-blue-light: rgba(34, 139, 230, 0.15);--mantine-color-blue-light-hover: rgba(34, 139, 230, 0.2);--mantine-color-blue-light-color: var(--mantine-color-blue-3);--mantine-color-blue-outline: var(--mantine-color-blue-4);--mantine-color-blue-outline-hover: rgba(77, 171, 247, 0.05);--mantine-color-cyan-text: var(--mantine-color-cyan-4);--mantine-color-cyan-filled: var(--mantine-color-cyan-8);--mantine-color-cyan-filled-hover: var(--mantine-color-cyan-9);--mantine-color-cyan-light: rgba(21, 170, 191, 0.15);--mantine-color-cyan-light-hover: rgba(21, 170, 191, 0.2);--mantine-color-cyan-light-color: var(--mantine-color-cyan-3);--mantine-color-cyan-outline: var(--mantine-color-cyan-4);--mantine-color-cyan-outline-hover: rgba(59, 201, 219, 0.05);--mantine-color-teal-text: var(--mantine-color-teal-4);--mantine-color-teal-filled: var(--mantine-color-teal-8);--mantine-color-teal-filled-hover: var(--mantine-color-teal-9);--mantine-color-teal-light: rgba(18, 184, 134, 0.15);--mantine-color-teal-light-hover: rgba(18, 184, 134, 0.2);--mantine-color-teal-light-color: var(--mantine-color-teal-3);--mantine-color-teal-outline: var(--mantine-color-teal-4);--mantine-color-teal-outline-hover: rgba(56, 217, 169, 0.05);--mantine-color-green-text: var(--mantine-color-green-4);--mantine-color-green-filled: var(--mantine-color-green-8);--mantine-color-green-filled-hover: var(--mantine-color-green-9);--mantine-color-green-light: rgba(64, 192, 87, 0.15);--mantine-color-green-light-hover: rgba(64, 192, 87, 0.2);--mantine-color-green-light-color: var(--mantine-color-green-3);--mantine-color-green-outline: var(--mantine-color-green-4);--mantine-color-green-outline-hover: rgba(105, 219, 124, 0.05);--mantine-color-lime-text: var(--mantine-color-lime-4);--mantine-color-lime-filled: var(--mantine-color-lime-8);--mantine-color-lime-filled-hover: var(--mantine-color-lime-9);--mantine-color-lime-light: rgba(130, 201, 30, 0.15);--mantine-color-lime-light-hover: rgba(130, 201, 30, 0.2);--mantine-color-lime-light-color: var(--mantine-color-lime-3);--mantine-color-lime-outline: var(--mantine-color-lime-4);--mantine-color-lime-outline-hover: rgba(169, 227, 75, 0.05);--mantine-color-yellow-text: var(--mantine-color-yellow-4);--mantine-color-yellow-filled: var(--mantine-color-yellow-8);--mantine-color-yellow-filled-hover: var(--mantine-color-yellow-9);--mantine-color-yellow-light: rgba(250, 176, 5, 0.15);--mantine-color-yellow-light-hover: rgba(250, 176, 5, 0.2);--mantine-color-yellow-light-color: var(--mantine-color-yellow-3);--mantine-color-yellow-outline: var(--mantine-color-yellow-4);--mantine-color-yellow-outline-hover: rgba(255, 212, 59, 0.05);--mantine-color-orange-text: var(--mantine-color-orange-4);--mantine-color-orange-filled: var(--mantine-color-orange-8);--mantine-color-orange-filled-hover: var(--mantine-color-orange-9);--mantine-color-orange-light: rgba(253, 126, 20, 0.15);--mantine-color-orange-light-hover: rgba(253, 126, 20, 0.2);--mantine-color-orange-light-color: var(--mantine-color-orange-3);--mantine-color-orange-outline: var(--mantine-color-orange-4);--mantine-color-orange-outline-hover: rgba(255, 169, 77, 0.05);}#\\:r1s\\:\_\_content--container\[data-mantine-color-scheme="light"\]{--mantine-primary-color-contrast: var(--mantine-color-white);--mantine-color-bright: var(--mantine-color-black);--mantine-color-text: #000;--mantine-color-body: #fff;--mantine-color-error: var(--mantine-color-red-6);--mantine-color-placeholder: var(--mantine-color-gray-5);--mantine-color-anchor: var(--mantine-color-blue-6);--mantine-color-default: var(--mantine-color-white);--mantine-color-default-hover: var(--mantine-color-gray-0);--mantine-color-default-color: var(--mantine-color-black);--mantine-color-default-border: var(--mantine-color-gray-4);--mantine-color-dimmed: var(--mantine-color-gray-6);--mantine-color-disabled: var(--mantine-color-gray-2);--mantine-color-disabled-color: var(--mantine-color-gray-5);--mantine-color-disabled-border: var(--mantine-color-gray-3);--mantine-color-dark-text: var(--mantine-color-dark-filled);--mantine-color-dark-filled: var(--mantine-color-dark-6);--mantine-color-dark-filled-hover: var(--mantine-color-dark-7);--mantine-color-dark-light: rgba(46, 46, 46, 0.1);--mantine-color-dark-light-hover: rgba(46, 46, 46, 0.12);--mantine-color-dark-light-color: var(--mantine-color-dark-6);--mantine-color-dark-outline: var(--mantine-color-dark-6);--mantine-color-dark-outline-hover: rgba(46, 46, 46, 0.05);--mantine-color-gray-text: var(--mantine-color-gray-filled);--mantine-color-gray-filled: var(--mantine-color-gray-6);--mantine-color-gray-filled-hover: var(--mantine-color-gray-7);--mantine-color-gray-light: rgba(134, 142, 150, 0.1);--mantine-color-gray-light-hover: rgba(134, 142, 150, 0.12);--mantine-color-gray-light-color: var(--mantine-color-gray-6);--mantine-color-gray-outline: var(--mantine-color-gray-6);--mantine-color-gray-outline-hover: rgba(134, 142, 150, 0.05);--mantine-color-red-text: var(--mantine-color-red-filled);--mantine-color-red-filled: var(--mantine-color-red-6);--mantine-color-red-filled-hover: var(--mantine-color-red-7);--mantine-color-red-light: rgba(250, 82, 82, 0.1);--mantine-color-red-light-hover: rgba(250, 82, 82, 0.12);--mantine-color-red-light-color: var(--mantine-color-red-6);--mantine-color-red-outline: var(--mantine-color-red-6);--mantine-color-red-outline-hover: rgba(250, 82, 82, 0.05);--mantine-color-pink-text: var(--mantine-color-pink-filled);--mantine-color-pink-filled: var(--mantine-color-pink-6);--mantine-color-pink-filled-hover: var(--mantine-color-pink-7);--mantine-color-pink-light: rgba(230, 73, 128, 0.1);--mantine-color-pink-light-hover: rgba(230, 73, 128, 0.12);--mantine-color-pink-light-color: var(--mantine-color-pink-6);--mantine-color-pink-outline: var(--mantine-color-pink-6);--mantine-color-pink-outline-hover: rgba(230, 73, 128, 0.05);--mantine-color-grape-text: var(--mantine-color-grape-filled);--mantine-color-grape-filled: var(--mantine-color-grape-6);--mantine-color-grape-filled-hover: var(--mantine-color-grape-7);--mantine-color-grape-light: rgba(190, 75, 219, 0.1);--mantine-color-grape-light-hover: rgba(190, 75, 219, 0.12);--mantine-color-grape-light-color: var(--mantine-color-grape-6);--mantine-color-grape-outline: var(--mantine-color-grape-6);--mantine-color-grape-outline-hover: rgba(190, 75, 219, 0.05);--mantine-color-violet-text: var(--mantine-color-violet-filled);--mantine-color-violet-filled: var(--mantine-color-violet-6);--mantine-color-violet-filled-hover: var(--mantine-color-violet-7);--mantine-color-violet-light: rgba(121, 80, 242, 0.1);--mantine-color-violet-light-hover: rgba(121, 80, 242, 0.12);--mantine-color-violet-light-color: var(--mantine-color-violet-6);--mantine-color-violet-outline: var(--mantine-color-violet-6);--mantine-color-violet-outline-hover: rgba(121, 80, 242, 0.05);--mantine-color-indigo-text: var(--mantine-color-indigo-filled);--mantine-color-indigo-filled: var(--mantine-color-indigo-6);--mantine-color-indigo-filled-hover: var(--mantine-color-indigo-7);--mantine-color-indigo-light: rgba(76, 110, 245, 0.1);--mantine-color-indigo-light-hover: rgba(76, 110, 245, 0.12);--mantine-color-indigo-light-color: var(--mantine-color-indigo-6);--mantine-color-indigo-outline: var(--mantine-color-indigo-6);--mantine-color-indigo-outline-hover: rgba(76, 110, 245, 0.05);--mantine-color-blue-text: var(--mantine-color-blue-filled);--mantine-color-blue-filled: var(--mantine-color-blue-6);--mantine-color-blue-filled-hover: var(--mantine-color-blue-7);--mantine-color-blue-light: rgba(34, 139, 230, 0.1);--mantine-color-blue-light-hover: rgba(34, 139, 230, 0.12);--mantine-color-blue-light-color: var(--mantine-color-blue-6);--mantine-color-blue-outline: var(--mantine-color-blue-6);--mantine-color-blue-outline-hover: rgba(34, 139, 230, 0.05);--mantine-color-cyan-text: var(--mantine-color-cyan-filled);--mantine-color-cyan-filled: var(--mantine-color-cyan-6);--mantine-color-cyan-filled-hover: var(--mantine-color-cyan-7);--mantine-color-cyan-light: rgba(21, 170, 191, 0.1);--mantine-color-cyan-light-hover: rgba(21, 170, 191, 0.12);--mantine-color-cyan-light-color: var(--mantine-color-cyan-6);--mantine-color-cyan-outline: var(--mantine-color-cyan-6);--mantine-color-cyan-outline-hover: rgba(21, 170, 191, 0.05);--mantine-color-teal-text: var(--mantine-color-teal-filled);--mantine-color-teal-filled: var(--mantine-color-teal-6);--mantine-color-teal-filled-hover: var(--mantine-color-teal-7);--mantine-color-teal-light: rgba(18, 184, 134, 0.1);--mantine-color-teal-light-hover: rgba(18, 184, 134, 0.12);--mantine-color-teal-light-color: var(--mantine-color-teal-6);--mantine-color-teal-outline: var(--mantine-color-teal-6);--mantine-color-teal-outline-hover: rgba(18, 184, 134, 0.05);--mantine-color-green-text: var(--mantine-color-green-filled);--mantine-color-green-filled: var(--mantine-color-green-6);--mantine-color-green-filled-hover: var(--mantine-color-green-7);--mantine-color-green-light: rgba(64, 192, 87, 0.1);--mantine-color-green-light-hover: rgba(64, 192, 87, 0.12);--mantine-color-green-light-color: var(--mantine-color-green-6);--mantine-color-green-outline: var(--mantine-color-green-6);--mantine-color-green-outline-hover: rgba(64, 192, 87, 0.05);--mantine-color-lime-text: var(--mantine-color-lime-filled);--mantine-color-lime-filled: var(--mantine-color-lime-6);--mantine-color-lime-filled-hover: var(--mantine-color-lime-7);--mantine-color-lime-light: rgba(130, 201, 30, 0.1);--mantine-color-lime-light-hover: rgba(130, 201, 30, 0.12);--mantine-color-lime-light-color: var(--mantine-color-lime-6);--mantine-color-lime-outline: var(--mantine-color-lime-6);--mantine-color-lime-outline-hover: rgba(130, 201, 30, 0.05);--mantine-color-yellow-text: var(--mantine-color-yellow-filled);--mantine-color-yellow-filled: var(--mantine-color-yellow-6);--mantine-color-yellow-filled-hover: var(--mantine-color-yellow-7);--mantine-color-yellow-light: rgba(250, 176, 5, 0.1);--mantine-color-yellow-light-hover: rgba(250, 176, 5, 0.12);--mantine-color-yellow-light-color: var(--mantine-color-yellow-6);--mantine-color-yellow-outline: var(--mantine-color-yellow-6);--mantine-color-yellow-outline-hover: rgba(250, 176, 5, 0.05);--mantine-color-orange-text: var(--mantine-color-orange-filled);--mantine-color-orange-filled: var(--mantine-color-orange-6);--mantine-color-orange-filled-hover: var(--mantine-color-orange-7);--mantine-color-orange-light: rgba(253, 126, 20, 0.1);--mantine-color-orange-light-hover: rgba(253, 126, 20, 0.12);--mantine-color-orange-light-color: var(--mantine-color-orange-6);--mantine-color-orange-outline: var(--mantine-color-orange-6);--mantine-color-orange-outline-hover: rgba(253, 126, 20, 0.05);} #\\:r1s\\:\_\_content--container\[data-mantine-color-scheme="dark"\] { --mantine-color-scheme: dark; } #\\:r1s\\:\_\_content--container\[data-mantine-color-scheme="light"\] { --mantine-color-scheme: light; }
|
|
624
|
+
#\\:r1p\\:\_\_content--container{--mantine-z-index-app: 100;--mantine-z-index-modal: 200;--mantine-z-index-popover: 300;--mantine-z-index-overlay: 400;--mantine-z-index-max: 9999;--mantine-scale: 1;--mantine-cursor-type: default;--mantine-webkit-font-smoothing: antialiased;--mantine-moz-font-smoothing: grayscale;--mantine-color-white: #fff;--mantine-color-black: #000;--mantine-line-height: 1.55;--mantine-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;--mantine-font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-font-family-headings: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;--mantine-heading-font-weight: 700;--mantine-heading-text-wrap: wrap;--mantine-radius-default: calc(0.25rem \* var(--mantine-scale));--mantine-primary-color-filled: var(--mantine-color-blue-filled);--mantine-primary-color-filled-hover: var(--mantine-color-blue-filled-hover);--mantine-primary-color-light: var(--mantine-color-blue-light);--mantine-primary-color-light-hover: var(--mantine-color-blue-light-hover);--mantine-primary-color-light-color: var(--mantine-color-blue-light-color);--mantine-breakpoint-xs: 36em;--mantine-breakpoint-sm: 48em;--mantine-breakpoint-md: 62em;--mantine-breakpoint-lg: 75em;--mantine-breakpoint-xl: 88em;--mantine-spacing-xs: calc(0.625rem \* var(--mantine-scale));--mantine-spacing-sm: calc(0.75rem \* var(--mantine-scale));--mantine-spacing-md: calc(1rem \* var(--mantine-scale));--mantine-spacing-lg: calc(1.25rem \* var(--mantine-scale));--mantine-spacing-xl: calc(2rem \* var(--mantine-scale));--mantine-font-size-xs: calc(0.75rem \* var(--mantine-scale));--mantine-font-size-sm: calc(0.875rem \* var(--mantine-scale));--mantine-font-size-md: calc(1rem \* var(--mantine-scale));--mantine-font-size-lg: calc(1.125rem \* var(--mantine-scale));--mantine-font-size-xl: calc(1.25rem \* var(--mantine-scale));--mantine-line-height-xs: 1.4;--mantine-line-height-sm: 1.45;--mantine-line-height-md: 1.55;--mantine-line-height-lg: 1.6;--mantine-line-height-xl: 1.65;--mantine-shadow-xs: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.125rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.1);--mantine-shadow-sm: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(0.625rem \* var(--mantine-scale)) calc(0.9375rem \* var(--mantine-scale)) calc(-0.3125rem \* var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.4375rem \* var(--mantine-scale)) calc(0.4375rem \* var(--mantine-scale)) calc(-0.3125rem \* var(--mantine-scale));--mantine-shadow-md: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(1.25rem \* var(--mantine-scale)) calc(1.5625rem \* var(--mantine-scale)) calc(-0.3125rem \* var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.625rem \* var(--mantine-scale)) calc(0.625rem \* var(--mantine-scale)) calc(-0.3125rem \* var(--mantine-scale));--mantine-shadow-lg: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(1.75rem \* var(--mantine-scale)) calc(1.4375rem \* var(--mantine-scale)) calc(-0.4375rem \* var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.75rem \* var(--mantine-scale)) calc(0.75rem \* var(--mantine-scale)) calc(-0.4375rem \* var(--mantine-scale));--mantine-shadow-xl: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(2.25rem \* var(--mantine-scale)) calc(1.75rem \* var(--mantine-scale)) calc(-0.4375rem \* var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(1.0625rem \* var(--mantine-scale)) calc(1.0625rem \* var(--mantine-scale)) calc(-0.4375rem \* var(--mantine-scale));--mantine-radius-xs: calc(0.125rem \* var(--mantine-scale));--mantine-radius-sm: calc(0.25rem \* var(--mantine-scale));--mantine-radius-md: calc(0.5rem \* var(--mantine-scale));--mantine-radius-lg: calc(1rem \* var(--mantine-scale));--mantine-radius-xl: calc(2rem \* var(--mantine-scale));--mantine-primary-color-0: var(--mantine-color-blue-0);--mantine-primary-color-1: var(--mantine-color-blue-1);--mantine-primary-color-2: var(--mantine-color-blue-2);--mantine-primary-color-3: var(--mantine-color-blue-3);--mantine-primary-color-4: var(--mantine-color-blue-4);--mantine-primary-color-5: var(--mantine-color-blue-5);--mantine-primary-color-6: var(--mantine-color-blue-6);--mantine-primary-color-7: var(--mantine-color-blue-7);--mantine-primary-color-8: var(--mantine-color-blue-8);--mantine-primary-color-9: var(--mantine-color-blue-9);--mantine-color-dark-0: #C9C9C9;--mantine-color-dark-1: #b8b8b8;--mantine-color-dark-2: #828282;--mantine-color-dark-3: #696969;--mantine-color-dark-4: #424242;--mantine-color-dark-5: #3b3b3b;--mantine-color-dark-6: #2e2e2e;--mantine-color-dark-7: #242424;--mantine-color-dark-8: #1f1f1f;--mantine-color-dark-9: #141414;--mantine-color-gray-0: #f8f9fa;--mantine-color-gray-1: #f1f3f5;--mantine-color-gray-2: #e9ecef;--mantine-color-gray-3: #dee2e6;--mantine-color-gray-4: #ced4da;--mantine-color-gray-5: #adb5bd;--mantine-color-gray-6: #868e96;--mantine-color-gray-7: #495057;--mantine-color-gray-8: #343a40;--mantine-color-gray-9: #212529;--mantine-color-red-0: #fff5f5;--mantine-color-red-1: #ffe3e3;--mantine-color-red-2: #ffc9c9;--mantine-color-red-3: #ffa8a8;--mantine-color-red-4: #ff8787;--mantine-color-red-5: #ff6b6b;--mantine-color-red-6: #fa5252;--mantine-color-red-7: #f03e3e;--mantine-color-red-8: #e03131;--mantine-color-red-9: #c92a2a;--mantine-color-pink-0: #fff0f6;--mantine-color-pink-1: #ffdeeb;--mantine-color-pink-2: #fcc2d7;--mantine-color-pink-3: #faa2c1;--mantine-color-pink-4: #f783ac;--mantine-color-pink-5: #f06595;--mantine-color-pink-6: #e64980;--mantine-color-pink-7: #d6336c;--mantine-color-pink-8: #c2255c;--mantine-color-pink-9: #a61e4d;--mantine-color-grape-0: #f8f0fc;--mantine-color-grape-1: #f3d9fa;--mantine-color-grape-2: #eebefa;--mantine-color-grape-3: #e599f7;--mantine-color-grape-4: #da77f2;--mantine-color-grape-5: #cc5de8;--mantine-color-grape-6: #be4bdb;--mantine-color-grape-7: #ae3ec9;--mantine-color-grape-8: #9c36b5;--mantine-color-grape-9: #862e9c;--mantine-color-violet-0: #f3f0ff;--mantine-color-violet-1: #e5dbff;--mantine-color-violet-2: #d0bfff;--mantine-color-violet-3: #b197fc;--mantine-color-violet-4: #9775fa;--mantine-color-violet-5: #845ef7;--mantine-color-violet-6: #7950f2;--mantine-color-violet-7: #7048e8;--mantine-color-violet-8: #6741d9;--mantine-color-violet-9: #5f3dc4;--mantine-color-indigo-0: #edf2ff;--mantine-color-indigo-1: #dbe4ff;--mantine-color-indigo-2: #bac8ff;--mantine-color-indigo-3: #91a7ff;--mantine-color-indigo-4: #748ffc;--mantine-color-indigo-5: #5c7cfa;--mantine-color-indigo-6: #4c6ef5;--mantine-color-indigo-7: #4263eb;--mantine-color-indigo-8: #3b5bdb;--mantine-color-indigo-9: #364fc7;--mantine-color-blue-0: #e7f5ff;--mantine-color-blue-1: #d0ebff;--mantine-color-blue-2: #a5d8ff;--mantine-color-blue-3: #74c0fc;--mantine-color-blue-4: #4dabf7;--mantine-color-blue-5: #339af0;--mantine-color-blue-6: #228be6;--mantine-color-blue-7: #1c7ed6;--mantine-color-blue-8: #1971c2;--mantine-color-blue-9: #1864ab;--mantine-color-cyan-0: #e3fafc;--mantine-color-cyan-1: #c5f6fa;--mantine-color-cyan-2: #99e9f2;--mantine-color-cyan-3: #66d9e8;--mantine-color-cyan-4: #3bc9db;--mantine-color-cyan-5: #22b8cf;--mantine-color-cyan-6: #15aabf;--mantine-color-cyan-7: #1098ad;--mantine-color-cyan-8: #0c8599;--mantine-color-cyan-9: #0b7285;--mantine-color-teal-0: #e6fcf5;--mantine-color-teal-1: #c3fae8;--mantine-color-teal-2: #96f2d7;--mantine-color-teal-3: #63e6be;--mantine-color-teal-4: #38d9a9;--mantine-color-teal-5: #20c997;--mantine-color-teal-6: #12b886;--mantine-color-teal-7: #0ca678;--mantine-color-teal-8: #099268;--mantine-color-teal-9: #087f5b;--mantine-color-green-0: #ebfbee;--mantine-color-green-1: #d3f9d8;--mantine-color-green-2: #b2f2bb;--mantine-color-green-3: #8ce99a;--mantine-color-green-4: #69db7c;--mantine-color-green-5: #51cf66;--mantine-color-green-6: #40c057;--mantine-color-green-7: #37b24d;--mantine-color-green-8: #2f9e44;--mantine-color-green-9: #2b8a3e;--mantine-color-lime-0: #f4fce3;--mantine-color-lime-1: #e9fac8;--mantine-color-lime-2: #d8f5a2;--mantine-color-lime-3: #c0eb75;--mantine-color-lime-4: #a9e34b;--mantine-color-lime-5: #94d82d;--mantine-color-lime-6: #82c91e;--mantine-color-lime-7: #74b816;--mantine-color-lime-8: #66a80f;--mantine-color-lime-9: #5c940d;--mantine-color-yellow-0: #fff9db;--mantine-color-yellow-1: #fff3bf;--mantine-color-yellow-2: #ffec99;--mantine-color-yellow-3: #ffe066;--mantine-color-yellow-4: #ffd43b;--mantine-color-yellow-5: #fcc419;--mantine-color-yellow-6: #fab005;--mantine-color-yellow-7: #f59f00;--mantine-color-yellow-8: #f08c00;--mantine-color-yellow-9: #e67700;--mantine-color-orange-0: #fff4e6;--mantine-color-orange-1: #ffe8cc;--mantine-color-orange-2: #ffd8a8;--mantine-color-orange-3: #ffc078;--mantine-color-orange-4: #ffa94d;--mantine-color-orange-5: #ff922b;--mantine-color-orange-6: #fd7e14;--mantine-color-orange-7: #f76707;--mantine-color-orange-8: #e8590c;--mantine-color-orange-9: #d9480f;--mantine-h1-font-size: calc(2.125rem \* var(--mantine-scale));--mantine-h1-line-height: 1.3;--mantine-h1-font-weight: 700;--mantine-h2-font-size: calc(1.625rem \* var(--mantine-scale));--mantine-h2-line-height: 1.35;--mantine-h2-font-weight: 700;--mantine-h3-font-size: calc(1.375rem \* var(--mantine-scale));--mantine-h3-line-height: 1.4;--mantine-h3-font-weight: 700;--mantine-h4-font-size: calc(1.125rem \* var(--mantine-scale));--mantine-h4-line-height: 1.45;--mantine-h4-font-weight: 700;--mantine-h5-font-size: calc(1rem \* var(--mantine-scale));--mantine-h5-line-height: 1.5;--mantine-h5-font-weight: 700;--mantine-h6-font-size: calc(0.875rem \* var(--mantine-scale));--mantine-h6-line-height: 1.5;--mantine-h6-font-weight: 700;} #\\:r1p\\:\_\_content--container\[data-mantine-color-scheme="dark"\]{--mantine-color-scheme: dark;--mantine-primary-color-contrast: var(--mantine-color-white);--mantine-color-bright: var(--mantine-color-white);--mantine-color-text: var(--mantine-color-dark-0);--mantine-color-body: var(--mantine-color-dark-7);--mantine-color-error: var(--mantine-color-red-8);--mantine-color-placeholder: var(--mantine-color-dark-3);--mantine-color-anchor: var(--mantine-color-blue-4);--mantine-color-default: var(--mantine-color-dark-6);--mantine-color-default-hover: var(--mantine-color-dark-5);--mantine-color-default-color: var(--mantine-color-white);--mantine-color-default-border: var(--mantine-color-dark-4);--mantine-color-dimmed: var(--mantine-color-dark-2);--mantine-color-disabled: var(--mantine-color-dark-6);--mantine-color-disabled-color: var(--mantine-color-dark-3);--mantine-color-disabled-border: var(--mantine-color-dark-4);--mantine-color-dark-text: var(--mantine-color-dark-4);--mantine-color-dark-filled: var(--mantine-color-dark-8);--mantine-color-dark-filled-hover: var(--mantine-color-dark-9);--mantine-color-dark-light: rgba(46, 46, 46, 0.15);--mantine-color-dark-light-hover: rgba(46, 46, 46, 0.2);--mantine-color-dark-light-color: var(--mantine-color-dark-3);--mantine-color-dark-outline: var(--mantine-color-dark-4);--mantine-color-dark-outline-hover: rgba(66, 66, 66, 0.05);--mantine-color-gray-text: var(--mantine-color-gray-4);--mantine-color-gray-filled: var(--mantine-color-gray-8);--mantine-color-gray-filled-hover: var(--mantine-color-gray-9);--mantine-color-gray-light: rgba(134, 142, 150, 0.15);--mantine-color-gray-light-hover: rgba(134, 142, 150, 0.2);--mantine-color-gray-light-color: var(--mantine-color-gray-3);--mantine-color-gray-outline: var(--mantine-color-gray-4);--mantine-color-gray-outline-hover: rgba(206, 212, 218, 0.05);--mantine-color-red-text: var(--mantine-color-red-4);--mantine-color-red-filled: var(--mantine-color-red-8);--mantine-color-red-filled-hover: var(--mantine-color-red-9);--mantine-color-red-light: rgba(250, 82, 82, 0.15);--mantine-color-red-light-hover: rgba(250, 82, 82, 0.2);--mantine-color-red-light-color: var(--mantine-color-red-3);--mantine-color-red-outline: var(--mantine-color-red-4);--mantine-color-red-outline-hover: rgba(255, 135, 135, 0.05);--mantine-color-pink-text: var(--mantine-color-pink-4);--mantine-color-pink-filled: var(--mantine-color-pink-8);--mantine-color-pink-filled-hover: var(--mantine-color-pink-9);--mantine-color-pink-light: rgba(230, 73, 128, 0.15);--mantine-color-pink-light-hover: rgba(230, 73, 128, 0.2);--mantine-color-pink-light-color: var(--mantine-color-pink-3);--mantine-color-pink-outline: var(--mantine-color-pink-4);--mantine-color-pink-outline-hover: rgba(247, 131, 172, 0.05);--mantine-color-grape-text: var(--mantine-color-grape-4);--mantine-color-grape-filled: var(--mantine-color-grape-8);--mantine-color-grape-filled-hover: var(--mantine-color-grape-9);--mantine-color-grape-light: rgba(190, 75, 219, 0.15);--mantine-color-grape-light-hover: rgba(190, 75, 219, 0.2);--mantine-color-grape-light-color: var(--mantine-color-grape-3);--mantine-color-grape-outline: var(--mantine-color-grape-4);--mantine-color-grape-outline-hover: rgba(218, 119, 242, 0.05);--mantine-color-violet-text: var(--mantine-color-violet-4);--mantine-color-violet-filled: var(--mantine-color-violet-8);--mantine-color-violet-filled-hover: var(--mantine-color-violet-9);--mantine-color-violet-light: rgba(121, 80, 242, 0.15);--mantine-color-violet-light-hover: rgba(121, 80, 242, 0.2);--mantine-color-violet-light-color: var(--mantine-color-violet-3);--mantine-color-violet-outline: var(--mantine-color-violet-4);--mantine-color-violet-outline-hover: rgba(151, 117, 250, 0.05);--mantine-color-indigo-text: var(--mantine-color-indigo-4);--mantine-color-indigo-filled: var(--mantine-color-indigo-8);--mantine-color-indigo-filled-hover: var(--mantine-color-indigo-9);--mantine-color-indigo-light: rgba(76, 110, 245, 0.15);--mantine-color-indigo-light-hover: rgba(76, 110, 245, 0.2);--mantine-color-indigo-light-color: var(--mantine-color-indigo-3);--mantine-color-indigo-outline: var(--mantine-color-indigo-4);--mantine-color-indigo-outline-hover: rgba(116, 143, 252, 0.05);--mantine-color-blue-text: var(--mantine-color-blue-4);--mantine-color-blue-filled: var(--mantine-color-blue-8);--mantine-color-blue-filled-hover: var(--mantine-color-blue-9);--mantine-color-blue-light: rgba(34, 139, 230, 0.15);--mantine-color-blue-light-hover: rgba(34, 139, 230, 0.2);--mantine-color-blue-light-color: var(--mantine-color-blue-3);--mantine-color-blue-outline: var(--mantine-color-blue-4);--mantine-color-blue-outline-hover: rgba(77, 171, 247, 0.05);--mantine-color-cyan-text: var(--mantine-color-cyan-4);--mantine-color-cyan-filled: var(--mantine-color-cyan-8);--mantine-color-cyan-filled-hover: var(--mantine-color-cyan-9);--mantine-color-cyan-light: rgba(21, 170, 191, 0.15);--mantine-color-cyan-light-hover: rgba(21, 170, 191, 0.2);--mantine-color-cyan-light-color: var(--mantine-color-cyan-3);--mantine-color-cyan-outline: var(--mantine-color-cyan-4);--mantine-color-cyan-outline-hover: rgba(59, 201, 219, 0.05);--mantine-color-teal-text: var(--mantine-color-teal-4);--mantine-color-teal-filled: var(--mantine-color-teal-8);--mantine-color-teal-filled-hover: var(--mantine-color-teal-9);--mantine-color-teal-light: rgba(18, 184, 134, 0.15);--mantine-color-teal-light-hover: rgba(18, 184, 134, 0.2);--mantine-color-teal-light-color: var(--mantine-color-teal-3);--mantine-color-teal-outline: var(--mantine-color-teal-4);--mantine-color-teal-outline-hover: rgba(56, 217, 169, 0.05);--mantine-color-green-text: var(--mantine-color-green-4);--mantine-color-green-filled: var(--mantine-color-green-8);--mantine-color-green-filled-hover: var(--mantine-color-green-9);--mantine-color-green-light: rgba(64, 192, 87, 0.15);--mantine-color-green-light-hover: rgba(64, 192, 87, 0.2);--mantine-color-green-light-color: var(--mantine-color-green-3);--mantine-color-green-outline: var(--mantine-color-green-4);--mantine-color-green-outline-hover: rgba(105, 219, 124, 0.05);--mantine-color-lime-text: var(--mantine-color-lime-4);--mantine-color-lime-filled: var(--mantine-color-lime-8);--mantine-color-lime-filled-hover: var(--mantine-color-lime-9);--mantine-color-lime-light: rgba(130, 201, 30, 0.15);--mantine-color-lime-light-hover: rgba(130, 201, 30, 0.2);--mantine-color-lime-light-color: var(--mantine-color-lime-3);--mantine-color-lime-outline: var(--mantine-color-lime-4);--mantine-color-lime-outline-hover: rgba(169, 227, 75, 0.05);--mantine-color-yellow-text: var(--mantine-color-yellow-4);--mantine-color-yellow-filled: var(--mantine-color-yellow-8);--mantine-color-yellow-filled-hover: var(--mantine-color-yellow-9);--mantine-color-yellow-light: rgba(250, 176, 5, 0.15);--mantine-color-yellow-light-hover: rgba(250, 176, 5, 0.2);--mantine-color-yellow-light-color: var(--mantine-color-yellow-3);--mantine-color-yellow-outline: var(--mantine-color-yellow-4);--mantine-color-yellow-outline-hover: rgba(255, 212, 59, 0.05);--mantine-color-orange-text: var(--mantine-color-orange-4);--mantine-color-orange-filled: var(--mantine-color-orange-8);--mantine-color-orange-filled-hover: var(--mantine-color-orange-9);--mantine-color-orange-light: rgba(253, 126, 20, 0.15);--mantine-color-orange-light-hover: rgba(253, 126, 20, 0.2);--mantine-color-orange-light-color: var(--mantine-color-orange-3);--mantine-color-orange-outline: var(--mantine-color-orange-4);--mantine-color-orange-outline-hover: rgba(255, 169, 77, 0.05);} #\\:r1p\\:\_\_content--container\[data-mantine-color-scheme="light"\]{--mantine-color-scheme: light;--mantine-primary-color-contrast: var(--mantine-color-white);--mantine-color-bright: var(--mantine-color-black);--mantine-color-text: #000;--mantine-color-body: #fff;--mantine-color-error: var(--mantine-color-red-6);--mantine-color-placeholder: var(--mantine-color-gray-5);--mantine-color-anchor: var(--mantine-color-blue-6);--mantine-color-default: var(--mantine-color-white);--mantine-color-default-hover: var(--mantine-color-gray-0);--mantine-color-default-color: var(--mantine-color-black);--mantine-color-default-border: var(--mantine-color-gray-4);--mantine-color-dimmed: var(--mantine-color-gray-6);--mantine-color-disabled: var(--mantine-color-gray-2);--mantine-color-disabled-color: var(--mantine-color-gray-5);--mantine-color-disabled-border: var(--mantine-color-gray-3);--mantine-color-dark-text: var(--mantine-color-dark-filled);--mantine-color-dark-filled: var(--mantine-color-dark-6);--mantine-color-dark-filled-hover: var(--mantine-color-dark-7);--mantine-color-dark-light: rgba(46, 46, 46, 0.1);--mantine-color-dark-light-hover: rgba(46, 46, 46, 0.12);--mantine-color-dark-light-color: var(--mantine-color-dark-6);--mantine-color-dark-outline: var(--mantine-color-dark-6);--mantine-color-dark-outline-hover: rgba(46, 46, 46, 0.05);--mantine-color-gray-text: var(--mantine-color-gray-filled);--mantine-color-gray-filled: var(--mantine-color-gray-6);--mantine-color-gray-filled-hover: var(--mantine-color-gray-7);--mantine-color-gray-light: rgba(134, 142, 150, 0.1);--mantine-color-gray-light-hover: rgba(134, 142, 150, 0.12);--mantine-color-gray-light-color: var(--mantine-color-gray-6);--mantine-color-gray-outline: var(--mantine-color-gray-6);--mantine-color-gray-outline-hover: rgba(134, 142, 150, 0.05);--mantine-color-red-text: var(--mantine-color-red-filled);--mantine-color-red-filled: var(--mantine-color-red-6);--mantine-color-red-filled-hover: var(--mantine-color-red-7);--mantine-color-red-light: rgba(250, 82, 82, 0.1);--mantine-color-red-light-hover: rgba(250, 82, 82, 0.12);--mantine-color-red-light-color: var(--mantine-color-red-6);--mantine-color-red-outline: var(--mantine-color-red-6);--mantine-color-red-outline-hover: rgba(250, 82, 82, 0.05);--mantine-color-pink-text: var(--mantine-color-pink-filled);--mantine-color-pink-filled: var(--mantine-color-pink-6);--mantine-color-pink-filled-hover: var(--mantine-color-pink-7);--mantine-color-pink-light: rgba(230, 73, 128, 0.1);--mantine-color-pink-light-hover: rgba(230, 73, 128, 0.12);--mantine-color-pink-light-color: var(--mantine-color-pink-6);--mantine-color-pink-outline: var(--mantine-color-pink-6);--mantine-color-pink-outline-hover: rgba(230, 73, 128, 0.05);--mantine-color-grape-text: var(--mantine-color-grape-filled);--mantine-color-grape-filled: var(--mantine-color-grape-6);--mantine-color-grape-filled-hover: var(--mantine-color-grape-7);--mantine-color-grape-light: rgba(190, 75, 219, 0.1);--mantine-color-grape-light-hover: rgba(190, 75, 219, 0.12);--mantine-color-grape-light-color: var(--mantine-color-grape-6);--mantine-color-grape-outline: var(--mantine-color-grape-6);--mantine-color-grape-outline-hover: rgba(190, 75, 219, 0.05);--mantine-color-violet-text: var(--mantine-color-violet-filled);--mantine-color-violet-filled: var(--mantine-color-violet-6);--mantine-color-violet-filled-hover: var(--mantine-color-violet-7);--mantine-color-violet-light: rgba(121, 80, 242, 0.1);--mantine-color-violet-light-hover: rgba(121, 80, 242, 0.12);--mantine-color-violet-light-color: var(--mantine-color-violet-6);--mantine-color-violet-outline: var(--mantine-color-violet-6);--mantine-color-violet-outline-hover: rgba(121, 80, 242, 0.05);--mantine-color-indigo-text: var(--mantine-color-indigo-filled);--mantine-color-indigo-filled: var(--mantine-color-indigo-6);--mantine-color-indigo-filled-hover: var(--mantine-color-indigo-7);--mantine-color-indigo-light: rgba(76, 110, 245, 0.1);--mantine-color-indigo-light-hover: rgba(76, 110, 245, 0.12);--mantine-color-indigo-light-color: var(--mantine-color-indigo-6);--mantine-color-indigo-outline: var(--mantine-color-indigo-6);--mantine-color-indigo-outline-hover: rgba(76, 110, 245, 0.05);--mantine-color-blue-text: var(--mantine-color-blue-filled);--mantine-color-blue-filled: var(--mantine-color-blue-6);--mantine-color-blue-filled-hover: var(--mantine-color-blue-7);--mantine-color-blue-light: rgba(34, 139, 230, 0.1);--mantine-color-blue-light-hover: rgba(34, 139, 230, 0.12);--mantine-color-blue-light-color: var(--mantine-color-blue-6);--mantine-color-blue-outline: var(--mantine-color-blue-6);--mantine-color-blue-outline-hover: rgba(34, 139, 230, 0.05);--mantine-color-cyan-text: var(--mantine-color-cyan-filled);--mantine-color-cyan-filled: var(--mantine-color-cyan-6);--mantine-color-cyan-filled-hover: var(--mantine-color-cyan-7);--mantine-color-cyan-light: rgba(21, 170, 191, 0.1);--mantine-color-cyan-light-hover: rgba(21, 170, 191, 0.12);--mantine-color-cyan-light-color: var(--mantine-color-cyan-6);--mantine-color-cyan-outline: var(--mantine-color-cyan-6);--mantine-color-cyan-outline-hover: rgba(21, 170, 191, 0.05);--mantine-color-teal-text: var(--mantine-color-teal-filled);--mantine-color-teal-filled: var(--mantine-color-teal-6);--mantine-color-teal-filled-hover: var(--mantine-color-teal-7);--mantine-color-teal-light: rgba(18, 184, 134, 0.1);--mantine-color-teal-light-hover: rgba(18, 184, 134, 0.12);--mantine-color-teal-light-color: var(--mantine-color-teal-6);--mantine-color-teal-outline: var(--mantine-color-teal-6);--mantine-color-teal-outline-hover: rgba(18, 184, 134, 0.05);--mantine-color-green-text: var(--mantine-color-green-filled);--mantine-color-green-filled: var(--mantine-color-green-6);--mantine-color-green-filled-hover: var(--mantine-color-green-7);--mantine-color-green-light: rgba(64, 192, 87, 0.1);--mantine-color-green-light-hover: rgba(64, 192, 87, 0.12);--mantine-color-green-light-color: var(--mantine-color-green-6);--mantine-color-green-outline: var(--mantine-color-green-6);--mantine-color-green-outline-hover: rgba(64, 192, 87, 0.05);--mantine-color-lime-text: var(--mantine-color-lime-filled);--mantine-color-lime-filled: var(--mantine-color-lime-6);--mantine-color-lime-filled-hover: var(--mantine-color-lime-7);--mantine-color-lime-light: rgba(130, 201, 30, 0.1);--mantine-color-lime-light-hover: rgba(130, 201, 30, 0.12);--mantine-color-lime-light-color: var(--mantine-color-lime-6);--mantine-color-lime-outline: var(--mantine-color-lime-6);--mantine-color-lime-outline-hover: rgba(130, 201, 30, 0.05);--mantine-color-yellow-text: var(--mantine-color-yellow-filled);--mantine-color-yellow-filled: var(--mantine-color-yellow-6);--mantine-color-yellow-filled-hover: var(--mantine-color-yellow-7);--mantine-color-yellow-light: rgba(250, 176, 5, 0.1);--mantine-color-yellow-light-hover: rgba(250, 176, 5, 0.12);--mantine-color-yellow-light-color: var(--mantine-color-yellow-6);--mantine-color-yellow-outline: var(--mantine-color-yellow-6);--mantine-color-yellow-outline-hover: rgba(250, 176, 5, 0.05);--mantine-color-orange-text: var(--mantine-color-orange-filled);--mantine-color-orange-filled: var(--mantine-color-orange-6);--mantine-color-orange-filled-hover: var(--mantine-color-orange-7);--mantine-color-orange-light: rgba(253, 126, 20, 0.1);--mantine-color-orange-light-hover: rgba(253, 126, 20, 0.12);--mantine-color-orange-light-color: var(--mantine-color-orange-6);--mantine-color-orange-outline: var(--mantine-color-orange-6);--mantine-color-orange-outline-hover: rgba(253, 126, 20, 0.05);} #\\:r1p\\:\_\_content--container\[data-mantine-color-scheme="dark"\] { --mantine-color-scheme: dark; } #\\:r1p\\:\_\_content--container\[data-mantine-color-scheme="light"\] { --mantine-color-scheme: light; }
|
|
159
625
|
|
|
160
626
|
|
|
161
627
|
|
|
162
|
-
* * *
|
|
163
|
-
|
|
164
628
|
Submit
|
|
165
629
|
|
|
166
630
|
Hide code
|
|
@@ -175,7 +639,6 @@ export const EditorAndFormExample \= () \=> (
|
|
|
175
639
|
render\={(controlledProps) \=> <IressEditor {...controlledProps} />}
|
|
176
640
|
rules\={{ required: 'Content is required' }}
|
|
177
641
|
/>
|
|
178
|
-
<IressDivider />
|
|
179
642
|
<IressButton type\="submit" mode\="primary"\>
|
|
180
643
|
Submit </IressButton\>
|
|
181
644
|
</IressForm\>
|
|
@@ -194,7 +657,7 @@ IDS offers some default toolbars that can be used with the editor.
|
|
|
194
657
|
|
|
195
658
|
The `IressEditor.SimpleToolbar` is a minimal toolbar that includes the most commonly used formatting options. It is the default toolbar if you don't specify the `toolbar` prop on the `IressEditor`.
|
|
196
659
|
|
|
197
|
-
#\\:r6\\:--container{--mantine-scale: 1;--mantine-cursor-type: default;--mantine-color-scheme: light dark;--mantine-webkit-font-smoothing: antialiased;--mantine-moz-font-smoothing: grayscale;--mantine-color-white: #fff;--mantine-color-black: #000;--mantine-line-height: 1.55;--mantine-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;--mantine-font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-font-family-headings: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;--mantine-heading-font-weight: 700;--mantine-heading-text-wrap: wrap;--mantine-radius-default: calc(0.25rem \* var(--mantine-scale));--mantine-primary-color-filled: var(--mantine-color-blue-filled);--mantine-primary-color-filled-hover: var(--mantine-color-blue-filled-hover);--mantine-primary-color-light: var(--mantine-color-blue-light);--mantine-primary-color-light-hover: var(--mantine-color-blue-light-hover);--mantine-primary-color-light-color: var(--mantine-color-blue-light-color);--mantine-breakpoint-xs: 36em;--mantine-breakpoint-sm: 48em;--mantine-breakpoint-md: 62em;--mantine-breakpoint-lg: 75em;--mantine-breakpoint-xl: 88em;--mantine-spacing-xs: calc(0.625rem \* var(--mantine-scale));--mantine-spacing-sm: calc(0.75rem \* var(--mantine-scale));--mantine-spacing-md: calc(1rem \* var(--mantine-scale));--mantine-spacing-lg: calc(1.25rem \* var(--mantine-scale));--mantine-spacing-xl: calc(2rem \* var(--mantine-scale));--mantine-font-size-xs: calc(0.75rem \* var(--mantine-scale));--mantine-font-size-sm: calc(0.875rem \* var(--mantine-scale));--mantine-font-size-md: calc(1rem \* var(--mantine-scale));--mantine-font-size-lg: calc(1.125rem \* var(--mantine-scale));--mantine-font-size-xl: calc(1.25rem \* var(--mantine-scale));--mantine-line-height-xs: 1.4;--mantine-line-height-sm: 1.45;--mantine-line-height-md: 1.55;--mantine-line-height-lg: 1.6;--mantine-line-height-xl: 1.65;--mantine-shadow-xs: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.125rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.1);--mantine-shadow-sm: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(0.625rem \* var(--mantine-scale)) calc(0.9375rem \* var(--mantine-scale)) calc(-0.3125rem \* var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.4375rem \* var(--mantine-scale)) calc(0.4375rem \* var(--mantine-scale)) calc(-0.3125rem \* var(--mantine-scale));--mantine-shadow-md: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(1.25rem \* var(--mantine-scale)) calc(1.5625rem \* var(--mantine-scale)) calc(-0.3125rem \* var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.625rem \* var(--mantine-scale)) calc(0.625rem \* var(--mantine-scale)) calc(-0.3125rem \* var(--mantine-scale));--mantine-shadow-lg: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(1.75rem \* var(--mantine-scale)) calc(1.4375rem \* var(--mantine-scale)) calc(-0.4375rem \* var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.75rem \* var(--mantine-scale)) calc(0.75rem \* var(--mantine-scale)) calc(-0.4375rem \* var(--mantine-scale));--mantine-shadow-xl: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(2.25rem \* var(--mantine-scale)) calc(1.75rem \* var(--mantine-scale)) calc(-0.4375rem \* var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(1.0625rem \* var(--mantine-scale)) calc(1.0625rem \* var(--mantine-scale)) calc(-0.4375rem \* var(--mantine-scale));--mantine-radius-xs: calc(0.125rem \* var(--mantine-scale));--mantine-radius-sm: calc(0.25rem \* var(--mantine-scale));--mantine-radius-md: calc(0.5rem \* var(--mantine-scale));--mantine-radius-lg: calc(1rem \* var(--mantine-scale));--mantine-radius-xl: calc(2rem \* var(--mantine-scale));--mantine-primary-color-0: var(--mantine-color-blue-0);--mantine-primary-color-1: var(--mantine-color-blue-1);--mantine-primary-color-2: var(--mantine-color-blue-2);--mantine-primary-color-3: var(--mantine-color-blue-3);--mantine-primary-color-4: var(--mantine-color-blue-4);--mantine-primary-color-5: var(--mantine-color-blue-5);--mantine-primary-color-6: var(--mantine-color-blue-6);--mantine-primary-color-7: var(--mantine-color-blue-7);--mantine-primary-color-8: var(--mantine-color-blue-8);--mantine-primary-color-9: var(--mantine-color-blue-9);--mantine-color-dark-0: #C9C9C9;--mantine-color-dark-1: #b8b8b8;--mantine-color-dark-2: #828282;--mantine-color-dark-3: #696969;--mantine-color-dark-4: #424242;--mantine-color-dark-5: #3b3b3b;--mantine-color-dark-6: #2e2e2e;--mantine-color-dark-7: #242424;--mantine-color-dark-8: #1f1f1f;--mantine-color-dark-9: #141414;--mantine-color-gray-0: #f8f9fa;--mantine-color-gray-1: #f1f3f5;--mantine-color-gray-2: #e9ecef;--mantine-color-gray-3: #dee2e6;--mantine-color-gray-4: #ced4da;--mantine-color-gray-5: #adb5bd;--mantine-color-gray-6: #868e96;--mantine-color-gray-7: #495057;--mantine-color-gray-8: #343a40;--mantine-color-gray-9: #212529;--mantine-color-red-0: #fff5f5;--mantine-color-red-1: #ffe3e3;--mantine-color-red-2: #ffc9c9;--mantine-color-red-3: #ffa8a8;--mantine-color-red-4: #ff8787;--mantine-color-red-5: #ff6b6b;--mantine-color-red-6: #fa5252;--mantine-color-red-7: #f03e3e;--mantine-color-red-8: #e03131;--mantine-color-red-9: #c92a2a;--mantine-color-pink-0: #fff0f6;--mantine-color-pink-1: #ffdeeb;--mantine-color-pink-2: #fcc2d7;--mantine-color-pink-3: #faa2c1;--mantine-color-pink-4: #f783ac;--mantine-color-pink-5: #f06595;--mantine-color-pink-6: #e64980;--mantine-color-pink-7: #d6336c;--mantine-color-pink-8: #c2255c;--mantine-color-pink-9: #a61e4d;--mantine-color-grape-0: #f8f0fc;--mantine-color-grape-1: #f3d9fa;--mantine-color-grape-2: #eebefa;--mantine-color-grape-3: #e599f7;--mantine-color-grape-4: #da77f2;--mantine-color-grape-5: #cc5de8;--mantine-color-grape-6: #be4bdb;--mantine-color-grape-7: #ae3ec9;--mantine-color-grape-8: #9c36b5;--mantine-color-grape-9: #862e9c;--mantine-color-violet-0: #f3f0ff;--mantine-color-violet-1: #e5dbff;--mantine-color-violet-2: #d0bfff;--mantine-color-violet-3: #b197fc;--mantine-color-violet-4: #9775fa;--mantine-color-violet-5: #845ef7;--mantine-color-violet-6: #7950f2;--mantine-color-violet-7: #7048e8;--mantine-color-violet-8: #6741d9;--mantine-color-violet-9: #5f3dc4;--mantine-color-indigo-0: #edf2ff;--mantine-color-indigo-1: #dbe4ff;--mantine-color-indigo-2: #bac8ff;--mantine-color-indigo-3: #91a7ff;--mantine-color-indigo-4: #748ffc;--mantine-color-indigo-5: #5c7cfa;--mantine-color-indigo-6: #4c6ef5;--mantine-color-indigo-7: #4263eb;--mantine-color-indigo-8: #3b5bdb;--mantine-color-indigo-9: #364fc7;--mantine-color-blue-0: #e7f5ff;--mantine-color-blue-1: #d0ebff;--mantine-color-blue-2: #a5d8ff;--mantine-color-blue-3: #74c0fc;--mantine-color-blue-4: #4dabf7;--mantine-color-blue-5: #339af0;--mantine-color-blue-6: #228be6;--mantine-color-blue-7: #1c7ed6;--mantine-color-blue-8: #1971c2;--mantine-color-blue-9: #1864ab;--mantine-color-cyan-0: #e3fafc;--mantine-color-cyan-1: #c5f6fa;--mantine-color-cyan-2: #99e9f2;--mantine-color-cyan-3: #66d9e8;--mantine-color-cyan-4: #3bc9db;--mantine-color-cyan-5: #22b8cf;--mantine-color-cyan-6: #15aabf;--mantine-color-cyan-7: #1098ad;--mantine-color-cyan-8: #0c8599;--mantine-color-cyan-9: #0b7285;--mantine-color-teal-0: #e6fcf5;--mantine-color-teal-1: #c3fae8;--mantine-color-teal-2: #96f2d7;--mantine-color-teal-3: #63e6be;--mantine-color-teal-4: #38d9a9;--mantine-color-teal-5: #20c997;--mantine-color-teal-6: #12b886;--mantine-color-teal-7: #0ca678;--mantine-color-teal-8: #099268;--mantine-color-teal-9: #087f5b;--mantine-color-green-0: #ebfbee;--mantine-color-green-1: #d3f9d8;--mantine-color-green-2: #b2f2bb;--mantine-color-green-3: #8ce99a;--mantine-color-green-4: #69db7c;--mantine-color-green-5: #51cf66;--mantine-color-green-6: #40c057;--mantine-color-green-7: #37b24d;--mantine-color-green-8: #2f9e44;--mantine-color-green-9: #2b8a3e;--mantine-color-lime-0: #f4fce3;--mantine-color-lime-1: #e9fac8;--mantine-color-lime-2: #d8f5a2;--mantine-color-lime-3: #c0eb75;--mantine-color-lime-4: #a9e34b;--mantine-color-lime-5: #94d82d;--mantine-color-lime-6: #82c91e;--mantine-color-lime-7: #74b816;--mantine-color-lime-8: #66a80f;--mantine-color-lime-9: #5c940d;--mantine-color-yellow-0: #fff9db;--mantine-color-yellow-1: #fff3bf;--mantine-color-yellow-2: #ffec99;--mantine-color-yellow-3: #ffe066;--mantine-color-yellow-4: #ffd43b;--mantine-color-yellow-5: #fcc419;--mantine-color-yellow-6: #fab005;--mantine-color-yellow-7: #f59f00;--mantine-color-yellow-8: #f08c00;--mantine-color-yellow-9: #e67700;--mantine-color-orange-0: #fff4e6;--mantine-color-orange-1: #ffe8cc;--mantine-color-orange-2: #ffd8a8;--mantine-color-orange-3: #ffc078;--mantine-color-orange-4: #ffa94d;--mantine-color-orange-5: #ff922b;--mantine-color-orange-6: #fd7e14;--mantine-color-orange-7: #f76707;--mantine-color-orange-8: #e8590c;--mantine-color-orange-9: #d9480f;--mantine-h1-font-size: calc(2.125rem \* var(--mantine-scale));--mantine-h1-line-height: 1.3;--mantine-h1-font-weight: 700;--mantine-h2-font-size: calc(1.625rem \* var(--mantine-scale));--mantine-h2-line-height: 1.35;--mantine-h2-font-weight: 700;--mantine-h3-font-size: calc(1.375rem \* var(--mantine-scale));--mantine-h3-line-height: 1.4;--mantine-h3-font-weight: 700;--mantine-h4-font-size: calc(1.125rem \* var(--mantine-scale));--mantine-h4-line-height: 1.45;--mantine-h4-font-weight: 700;--mantine-h5-font-size: calc(1rem \* var(--mantine-scale));--mantine-h5-line-height: 1.5;--mantine-h5-font-weight: 700;--mantine-h6-font-size: calc(0.875rem \* var(--mantine-scale));--mantine-h6-line-height: 1.5;--mantine-h6-font-weight: 700;}#\\:r6\\:--container\[data-mantine-color-scheme="dark"\]{--mantine-primary-color-contrast: var(--mantine-color-white);--mantine-color-bright: var(--mantine-color-white);--mantine-color-text: var(--mantine-color-dark-0);--mantine-color-body: var(--mantine-color-dark-7);--mantine-color-error: var(--mantine-color-red-8);--mantine-color-placeholder: var(--mantine-color-dark-3);--mantine-color-anchor: var(--mantine-color-blue-4);--mantine-color-default: var(--mantine-color-dark-6);--mantine-color-default-hover: var(--mantine-color-dark-5);--mantine-color-default-color: var(--mantine-color-white);--mantine-color-default-border: var(--mantine-color-dark-4);--mantine-color-dimmed: var(--mantine-color-dark-2);--mantine-color-disabled: var(--mantine-color-dark-6);--mantine-color-disabled-color: var(--mantine-color-dark-3);--mantine-color-disabled-border: var(--mantine-color-gray-6);--mantine-color-dark-text: var(--mantine-color-dark-4);--mantine-color-dark-filled: var(--mantine-color-dark-8);--mantine-color-dark-filled-hover: var(--mantine-color-dark-9);--mantine-color-dark-light: rgba(46, 46, 46, 0.15);--mantine-color-dark-light-hover: rgba(46, 46, 46, 0.2);--mantine-color-dark-light-color: var(--mantine-color-dark-3);--mantine-color-dark-outline: var(--mantine-color-dark-4);--mantine-color-dark-outline-hover: rgba(66, 66, 66, 0.05);--mantine-color-gray-text: var(--mantine-color-gray-4);--mantine-color-gray-filled: var(--mantine-color-gray-8);--mantine-color-gray-filled-hover: var(--mantine-color-gray-9);--mantine-color-gray-light: rgba(134, 142, 150, 0.15);--mantine-color-gray-light-hover: rgba(134, 142, 150, 0.2);--mantine-color-gray-light-color: var(--mantine-color-gray-3);--mantine-color-gray-outline: var(--mantine-color-gray-4);--mantine-color-gray-outline-hover: rgba(206, 212, 218, 0.05);--mantine-color-red-text: var(--mantine-color-red-4);--mantine-color-red-filled: var(--mantine-color-red-8);--mantine-color-red-filled-hover: var(--mantine-color-red-9);--mantine-color-red-light: rgba(250, 82, 82, 0.15);--mantine-color-red-light-hover: rgba(250, 82, 82, 0.2);--mantine-color-red-light-color: var(--mantine-color-red-3);--mantine-color-red-outline: var(--mantine-color-red-4);--mantine-color-red-outline-hover: rgba(255, 135, 135, 0.05);--mantine-color-pink-text: var(--mantine-color-pink-4);--mantine-color-pink-filled: var(--mantine-color-pink-8);--mantine-color-pink-filled-hover: var(--mantine-color-pink-9);--mantine-color-pink-light: rgba(230, 73, 128, 0.15);--mantine-color-pink-light-hover: rgba(230, 73, 128, 0.2);--mantine-color-pink-light-color: var(--mantine-color-pink-3);--mantine-color-pink-outline: var(--mantine-color-pink-4);--mantine-color-pink-outline-hover: rgba(247, 131, 172, 0.05);--mantine-color-grape-text: var(--mantine-color-grape-4);--mantine-color-grape-filled: var(--mantine-color-grape-8);--mantine-color-grape-filled-hover: var(--mantine-color-grape-9);--mantine-color-grape-light: rgba(190, 75, 219, 0.15);--mantine-color-grape-light-hover: rgba(190, 75, 219, 0.2);--mantine-color-grape-light-color: var(--mantine-color-grape-3);--mantine-color-grape-outline: var(--mantine-color-grape-4);--mantine-color-grape-outline-hover: rgba(218, 119, 242, 0.05);--mantine-color-violet-text: var(--mantine-color-violet-4);--mantine-color-violet-filled: var(--mantine-color-violet-8);--mantine-color-violet-filled-hover: var(--mantine-color-violet-9);--mantine-color-violet-light: rgba(121, 80, 242, 0.15);--mantine-color-violet-light-hover: rgba(121, 80, 242, 0.2);--mantine-color-violet-light-color: var(--mantine-color-violet-3);--mantine-color-violet-outline: var(--mantine-color-violet-4);--mantine-color-violet-outline-hover: rgba(151, 117, 250, 0.05);--mantine-color-indigo-text: var(--mantine-color-indigo-4);--mantine-color-indigo-filled: var(--mantine-color-indigo-8);--mantine-color-indigo-filled-hover: var(--mantine-color-indigo-9);--mantine-color-indigo-light: rgba(76, 110, 245, 0.15);--mantine-color-indigo-light-hover: rgba(76, 110, 245, 0.2);--mantine-color-indigo-light-color: var(--mantine-color-indigo-3);--mantine-color-indigo-outline: var(--mantine-color-indigo-4);--mantine-color-indigo-outline-hover: rgba(116, 143, 252, 0.05);--mantine-color-blue-text: var(--mantine-color-blue-4);--mantine-color-blue-filled: var(--mantine-color-blue-8);--mantine-color-blue-filled-hover: var(--mantine-color-blue-9);--mantine-color-blue-light: rgba(34, 139, 230, 0.15);--mantine-color-blue-light-hover: rgba(34, 139, 230, 0.2);--mantine-color-blue-light-color: var(--mantine-color-blue-3);--mantine-color-blue-outline: var(--mantine-color-blue-4);--mantine-color-blue-outline-hover: rgba(77, 171, 247, 0.05);--mantine-color-cyan-text: var(--mantine-color-cyan-4);--mantine-color-cyan-filled: var(--mantine-color-cyan-8);--mantine-color-cyan-filled-hover: var(--mantine-color-cyan-9);--mantine-color-cyan-light: rgba(21, 170, 191, 0.15);--mantine-color-cyan-light-hover: rgba(21, 170, 191, 0.2);--mantine-color-cyan-light-color: var(--mantine-color-cyan-3);--mantine-color-cyan-outline: var(--mantine-color-cyan-4);--mantine-color-cyan-outline-hover: rgba(59, 201, 219, 0.05);--mantine-color-teal-text: var(--mantine-color-teal-4);--mantine-color-teal-filled: var(--mantine-color-teal-8);--mantine-color-teal-filled-hover: var(--mantine-color-teal-9);--mantine-color-teal-light: rgba(18, 184, 134, 0.15);--mantine-color-teal-light-hover: rgba(18, 184, 134, 0.2);--mantine-color-teal-light-color: var(--mantine-color-teal-3);--mantine-color-teal-outline: var(--mantine-color-teal-4);--mantine-color-teal-outline-hover: rgba(56, 217, 169, 0.05);--mantine-color-green-text: var(--mantine-color-green-4);--mantine-color-green-filled: var(--mantine-color-green-8);--mantine-color-green-filled-hover: var(--mantine-color-green-9);--mantine-color-green-light: rgba(64, 192, 87, 0.15);--mantine-color-green-light-hover: rgba(64, 192, 87, 0.2);--mantine-color-green-light-color: var(--mantine-color-green-3);--mantine-color-green-outline: var(--mantine-color-green-4);--mantine-color-green-outline-hover: rgba(105, 219, 124, 0.05);--mantine-color-lime-text: var(--mantine-color-lime-4);--mantine-color-lime-filled: var(--mantine-color-lime-8);--mantine-color-lime-filled-hover: var(--mantine-color-lime-9);--mantine-color-lime-light: rgba(130, 201, 30, 0.15);--mantine-color-lime-light-hover: rgba(130, 201, 30, 0.2);--mantine-color-lime-light-color: var(--mantine-color-lime-3);--mantine-color-lime-outline: var(--mantine-color-lime-4);--mantine-color-lime-outline-hover: rgba(169, 227, 75, 0.05);--mantine-color-yellow-text: var(--mantine-color-yellow-4);--mantine-color-yellow-filled: var(--mantine-color-yellow-8);--mantine-color-yellow-filled-hover: var(--mantine-color-yellow-9);--mantine-color-yellow-light: rgba(250, 176, 5, 0.15);--mantine-color-yellow-light-hover: rgba(250, 176, 5, 0.2);--mantine-color-yellow-light-color: var(--mantine-color-yellow-3);--mantine-color-yellow-outline: var(--mantine-color-yellow-4);--mantine-color-yellow-outline-hover: rgba(255, 212, 59, 0.05);--mantine-color-orange-text: var(--mantine-color-orange-4);--mantine-color-orange-filled: var(--mantine-color-orange-8);--mantine-color-orange-filled-hover: var(--mantine-color-orange-9);--mantine-color-orange-light: rgba(253, 126, 20, 0.15);--mantine-color-orange-light-hover: rgba(253, 126, 20, 0.2);--mantine-color-orange-light-color: var(--mantine-color-orange-3);--mantine-color-orange-outline: var(--mantine-color-orange-4);--mantine-color-orange-outline-hover: rgba(255, 169, 77, 0.05);}#\\:r6\\:--container\[data-mantine-color-scheme="light"\]{--mantine-primary-color-contrast: var(--mantine-color-white);--mantine-color-bright: var(--mantine-color-black);--mantine-color-text: #000;--mantine-color-body: #fff;--mantine-color-error: var(--mantine-color-red-6);--mantine-color-placeholder: var(--mantine-color-gray-5);--mantine-color-anchor: var(--mantine-color-blue-6);--mantine-color-default: var(--mantine-color-white);--mantine-color-default-hover: var(--mantine-color-gray-0);--mantine-color-default-color: var(--mantine-color-black);--mantine-color-default-border: var(--mantine-color-gray-4);--mantine-color-dimmed: var(--mantine-color-gray-6);--mantine-color-disabled: var(--mantine-color-gray-2);--mantine-color-disabled-color: var(--mantine-color-gray-5);--mantine-color-disabled-border: var(--mantine-color-gray-3);--mantine-color-dark-text: var(--mantine-color-dark-filled);--mantine-color-dark-filled: var(--mantine-color-dark-6);--mantine-color-dark-filled-hover: var(--mantine-color-dark-7);--mantine-color-dark-light: rgba(46, 46, 46, 0.1);--mantine-color-dark-light-hover: rgba(46, 46, 46, 0.12);--mantine-color-dark-light-color: var(--mantine-color-dark-6);--mantine-color-dark-outline: var(--mantine-color-dark-6);--mantine-color-dark-outline-hover: rgba(46, 46, 46, 0.05);--mantine-color-gray-text: var(--mantine-color-gray-filled);--mantine-color-gray-filled: var(--mantine-color-gray-6);--mantine-color-gray-filled-hover: var(--mantine-color-gray-7);--mantine-color-gray-light: rgba(134, 142, 150, 0.1);--mantine-color-gray-light-hover: rgba(134, 142, 150, 0.12);--mantine-color-gray-light-color: var(--mantine-color-gray-6);--mantine-color-gray-outline: var(--mantine-color-gray-6);--mantine-color-gray-outline-hover: rgba(134, 142, 150, 0.05);--mantine-color-red-text: var(--mantine-color-red-filled);--mantine-color-red-filled: var(--mantine-color-red-6);--mantine-color-red-filled-hover: var(--mantine-color-red-7);--mantine-color-red-light: rgba(250, 82, 82, 0.1);--mantine-color-red-light-hover: rgba(250, 82, 82, 0.12);--mantine-color-red-light-color: var(--mantine-color-red-6);--mantine-color-red-outline: var(--mantine-color-red-6);--mantine-color-red-outline-hover: rgba(250, 82, 82, 0.05);--mantine-color-pink-text: var(--mantine-color-pink-filled);--mantine-color-pink-filled: var(--mantine-color-pink-6);--mantine-color-pink-filled-hover: var(--mantine-color-pink-7);--mantine-color-pink-light: rgba(230, 73, 128, 0.1);--mantine-color-pink-light-hover: rgba(230, 73, 128, 0.12);--mantine-color-pink-light-color: var(--mantine-color-pink-6);--mantine-color-pink-outline: var(--mantine-color-pink-6);--mantine-color-pink-outline-hover: rgba(230, 73, 128, 0.05);--mantine-color-grape-text: var(--mantine-color-grape-filled);--mantine-color-grape-filled: var(--mantine-color-grape-6);--mantine-color-grape-filled-hover: var(--mantine-color-grape-7);--mantine-color-grape-light: rgba(190, 75, 219, 0.1);--mantine-color-grape-light-hover: rgba(190, 75, 219, 0.12);--mantine-color-grape-light-color: var(--mantine-color-grape-6);--mantine-color-grape-outline: var(--mantine-color-grape-6);--mantine-color-grape-outline-hover: rgba(190, 75, 219, 0.05);--mantine-color-violet-text: var(--mantine-color-violet-filled);--mantine-color-violet-filled: var(--mantine-color-violet-6);--mantine-color-violet-filled-hover: var(--mantine-color-violet-7);--mantine-color-violet-light: rgba(121, 80, 242, 0.1);--mantine-color-violet-light-hover: rgba(121, 80, 242, 0.12);--mantine-color-violet-light-color: var(--mantine-color-violet-6);--mantine-color-violet-outline: var(--mantine-color-violet-6);--mantine-color-violet-outline-hover: rgba(121, 80, 242, 0.05);--mantine-color-indigo-text: var(--mantine-color-indigo-filled);--mantine-color-indigo-filled: var(--mantine-color-indigo-6);--mantine-color-indigo-filled-hover: var(--mantine-color-indigo-7);--mantine-color-indigo-light: rgba(76, 110, 245, 0.1);--mantine-color-indigo-light-hover: rgba(76, 110, 245, 0.12);--mantine-color-indigo-light-color: var(--mantine-color-indigo-6);--mantine-color-indigo-outline: var(--mantine-color-indigo-6);--mantine-color-indigo-outline-hover: rgba(76, 110, 245, 0.05);--mantine-color-blue-text: var(--mantine-color-blue-filled);--mantine-color-blue-filled: var(--mantine-color-blue-6);--mantine-color-blue-filled-hover: var(--mantine-color-blue-7);--mantine-color-blue-light: rgba(34, 139, 230, 0.1);--mantine-color-blue-light-hover: rgba(34, 139, 230, 0.12);--mantine-color-blue-light-color: var(--mantine-color-blue-6);--mantine-color-blue-outline: var(--mantine-color-blue-6);--mantine-color-blue-outline-hover: rgba(34, 139, 230, 0.05);--mantine-color-cyan-text: var(--mantine-color-cyan-filled);--mantine-color-cyan-filled: var(--mantine-color-cyan-6);--mantine-color-cyan-filled-hover: var(--mantine-color-cyan-7);--mantine-color-cyan-light: rgba(21, 170, 191, 0.1);--mantine-color-cyan-light-hover: rgba(21, 170, 191, 0.12);--mantine-color-cyan-light-color: var(--mantine-color-cyan-6);--mantine-color-cyan-outline: var(--mantine-color-cyan-6);--mantine-color-cyan-outline-hover: rgba(21, 170, 191, 0.05);--mantine-color-teal-text: var(--mantine-color-teal-filled);--mantine-color-teal-filled: var(--mantine-color-teal-6);--mantine-color-teal-filled-hover: var(--mantine-color-teal-7);--mantine-color-teal-light: rgba(18, 184, 134, 0.1);--mantine-color-teal-light-hover: rgba(18, 184, 134, 0.12);--mantine-color-teal-light-color: var(--mantine-color-teal-6);--mantine-color-teal-outline: var(--mantine-color-teal-6);--mantine-color-teal-outline-hover: rgba(18, 184, 134, 0.05);--mantine-color-green-text: var(--mantine-color-green-filled);--mantine-color-green-filled: var(--mantine-color-green-6);--mantine-color-green-filled-hover: var(--mantine-color-green-7);--mantine-color-green-light: rgba(64, 192, 87, 0.1);--mantine-color-green-light-hover: rgba(64, 192, 87, 0.12);--mantine-color-green-light-color: var(--mantine-color-green-6);--mantine-color-green-outline: var(--mantine-color-green-6);--mantine-color-green-outline-hover: rgba(64, 192, 87, 0.05);--mantine-color-lime-text: var(--mantine-color-lime-filled);--mantine-color-lime-filled: var(--mantine-color-lime-6);--mantine-color-lime-filled-hover: var(--mantine-color-lime-7);--mantine-color-lime-light: rgba(130, 201, 30, 0.1);--mantine-color-lime-light-hover: rgba(130, 201, 30, 0.12);--mantine-color-lime-light-color: var(--mantine-color-lime-6);--mantine-color-lime-outline: var(--mantine-color-lime-6);--mantine-color-lime-outline-hover: rgba(130, 201, 30, 0.05);--mantine-color-yellow-text: var(--mantine-color-yellow-filled);--mantine-color-yellow-filled: var(--mantine-color-yellow-6);--mantine-color-yellow-filled-hover: var(--mantine-color-yellow-7);--mantine-color-yellow-light: rgba(250, 176, 5, 0.1);--mantine-color-yellow-light-hover: rgba(250, 176, 5, 0.12);--mantine-color-yellow-light-color: var(--mantine-color-yellow-6);--mantine-color-yellow-outline: var(--mantine-color-yellow-6);--mantine-color-yellow-outline-hover: rgba(250, 176, 5, 0.05);--mantine-color-orange-text: var(--mantine-color-orange-filled);--mantine-color-orange-filled: var(--mantine-color-orange-6);--mantine-color-orange-filled-hover: var(--mantine-color-orange-7);--mantine-color-orange-light: rgba(253, 126, 20, 0.1);--mantine-color-orange-light-hover: rgba(253, 126, 20, 0.12);--mantine-color-orange-light-color: var(--mantine-color-orange-6);--mantine-color-orange-outline: var(--mantine-color-orange-6);--mantine-color-orange-outline-hover: rgba(253, 126, 20, 0.05);} #\\:r6\\:--container\[data-mantine-color-scheme="dark"\] { --mantine-color-scheme: dark; } #\\:r6\\:--container\[data-mantine-color-scheme="light"\] { --mantine-color-scheme: light; }
|
|
660
|
+
#\\:r2m\\:--container{--mantine-z-index-app: 100;--mantine-z-index-modal: 200;--mantine-z-index-popover: 300;--mantine-z-index-overlay: 400;--mantine-z-index-max: 9999;--mantine-scale: 1;--mantine-cursor-type: default;--mantine-webkit-font-smoothing: antialiased;--mantine-moz-font-smoothing: grayscale;--mantine-color-white: #fff;--mantine-color-black: #000;--mantine-line-height: 1.55;--mantine-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;--mantine-font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-font-family-headings: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;--mantine-heading-font-weight: 700;--mantine-heading-text-wrap: wrap;--mantine-radius-default: calc(0.25rem \* var(--mantine-scale));--mantine-primary-color-filled: var(--mantine-color-blue-filled);--mantine-primary-color-filled-hover: var(--mantine-color-blue-filled-hover);--mantine-primary-color-light: var(--mantine-color-blue-light);--mantine-primary-color-light-hover: var(--mantine-color-blue-light-hover);--mantine-primary-color-light-color: var(--mantine-color-blue-light-color);--mantine-breakpoint-xs: 36em;--mantine-breakpoint-sm: 48em;--mantine-breakpoint-md: 62em;--mantine-breakpoint-lg: 75em;--mantine-breakpoint-xl: 88em;--mantine-spacing-xs: calc(0.625rem \* var(--mantine-scale));--mantine-spacing-sm: calc(0.75rem \* var(--mantine-scale));--mantine-spacing-md: calc(1rem \* var(--mantine-scale));--mantine-spacing-lg: calc(1.25rem \* var(--mantine-scale));--mantine-spacing-xl: calc(2rem \* var(--mantine-scale));--mantine-font-size-xs: calc(0.75rem \* var(--mantine-scale));--mantine-font-size-sm: calc(0.875rem \* var(--mantine-scale));--mantine-font-size-md: calc(1rem \* var(--mantine-scale));--mantine-font-size-lg: calc(1.125rem \* var(--mantine-scale));--mantine-font-size-xl: calc(1.25rem \* var(--mantine-scale));--mantine-line-height-xs: 1.4;--mantine-line-height-sm: 1.45;--mantine-line-height-md: 1.55;--mantine-line-height-lg: 1.6;--mantine-line-height-xl: 1.65;--mantine-shadow-xs: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.125rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.1);--mantine-shadow-sm: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(0.625rem \* var(--mantine-scale)) calc(0.9375rem \* var(--mantine-scale)) calc(-0.3125rem \* var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.4375rem \* var(--mantine-scale)) calc(0.4375rem \* var(--mantine-scale)) calc(-0.3125rem \* var(--mantine-scale));--mantine-shadow-md: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(1.25rem \* var(--mantine-scale)) calc(1.5625rem \* var(--mantine-scale)) calc(-0.3125rem \* var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.625rem \* var(--mantine-scale)) calc(0.625rem \* var(--mantine-scale)) calc(-0.3125rem \* var(--mantine-scale));--mantine-shadow-lg: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(1.75rem \* var(--mantine-scale)) calc(1.4375rem \* var(--mantine-scale)) calc(-0.4375rem \* var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.75rem \* var(--mantine-scale)) calc(0.75rem \* var(--mantine-scale)) calc(-0.4375rem \* var(--mantine-scale));--mantine-shadow-xl: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(2.25rem \* var(--mantine-scale)) calc(1.75rem \* var(--mantine-scale)) calc(-0.4375rem \* var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(1.0625rem \* var(--mantine-scale)) calc(1.0625rem \* var(--mantine-scale)) calc(-0.4375rem \* var(--mantine-scale));--mantine-radius-xs: calc(0.125rem \* var(--mantine-scale));--mantine-radius-sm: calc(0.25rem \* var(--mantine-scale));--mantine-radius-md: calc(0.5rem \* var(--mantine-scale));--mantine-radius-lg: calc(1rem \* var(--mantine-scale));--mantine-radius-xl: calc(2rem \* var(--mantine-scale));--mantine-primary-color-0: var(--mantine-color-blue-0);--mantine-primary-color-1: var(--mantine-color-blue-1);--mantine-primary-color-2: var(--mantine-color-blue-2);--mantine-primary-color-3: var(--mantine-color-blue-3);--mantine-primary-color-4: var(--mantine-color-blue-4);--mantine-primary-color-5: var(--mantine-color-blue-5);--mantine-primary-color-6: var(--mantine-color-blue-6);--mantine-primary-color-7: var(--mantine-color-blue-7);--mantine-primary-color-8: var(--mantine-color-blue-8);--mantine-primary-color-9: var(--mantine-color-blue-9);--mantine-color-dark-0: #C9C9C9;--mantine-color-dark-1: #b8b8b8;--mantine-color-dark-2: #828282;--mantine-color-dark-3: #696969;--mantine-color-dark-4: #424242;--mantine-color-dark-5: #3b3b3b;--mantine-color-dark-6: #2e2e2e;--mantine-color-dark-7: #242424;--mantine-color-dark-8: #1f1f1f;--mantine-color-dark-9: #141414;--mantine-color-gray-0: #f8f9fa;--mantine-color-gray-1: #f1f3f5;--mantine-color-gray-2: #e9ecef;--mantine-color-gray-3: #dee2e6;--mantine-color-gray-4: #ced4da;--mantine-color-gray-5: #adb5bd;--mantine-color-gray-6: #868e96;--mantine-color-gray-7: #495057;--mantine-color-gray-8: #343a40;--mantine-color-gray-9: #212529;--mantine-color-red-0: #fff5f5;--mantine-color-red-1: #ffe3e3;--mantine-color-red-2: #ffc9c9;--mantine-color-red-3: #ffa8a8;--mantine-color-red-4: #ff8787;--mantine-color-red-5: #ff6b6b;--mantine-color-red-6: #fa5252;--mantine-color-red-7: #f03e3e;--mantine-color-red-8: #e03131;--mantine-color-red-9: #c92a2a;--mantine-color-pink-0: #fff0f6;--mantine-color-pink-1: #ffdeeb;--mantine-color-pink-2: #fcc2d7;--mantine-color-pink-3: #faa2c1;--mantine-color-pink-4: #f783ac;--mantine-color-pink-5: #f06595;--mantine-color-pink-6: #e64980;--mantine-color-pink-7: #d6336c;--mantine-color-pink-8: #c2255c;--mantine-color-pink-9: #a61e4d;--mantine-color-grape-0: #f8f0fc;--mantine-color-grape-1: #f3d9fa;--mantine-color-grape-2: #eebefa;--mantine-color-grape-3: #e599f7;--mantine-color-grape-4: #da77f2;--mantine-color-grape-5: #cc5de8;--mantine-color-grape-6: #be4bdb;--mantine-color-grape-7: #ae3ec9;--mantine-color-grape-8: #9c36b5;--mantine-color-grape-9: #862e9c;--mantine-color-violet-0: #f3f0ff;--mantine-color-violet-1: #e5dbff;--mantine-color-violet-2: #d0bfff;--mantine-color-violet-3: #b197fc;--mantine-color-violet-4: #9775fa;--mantine-color-violet-5: #845ef7;--mantine-color-violet-6: #7950f2;--mantine-color-violet-7: #7048e8;--mantine-color-violet-8: #6741d9;--mantine-color-violet-9: #5f3dc4;--mantine-color-indigo-0: #edf2ff;--mantine-color-indigo-1: #dbe4ff;--mantine-color-indigo-2: #bac8ff;--mantine-color-indigo-3: #91a7ff;--mantine-color-indigo-4: #748ffc;--mantine-color-indigo-5: #5c7cfa;--mantine-color-indigo-6: #4c6ef5;--mantine-color-indigo-7: #4263eb;--mantine-color-indigo-8: #3b5bdb;--mantine-color-indigo-9: #364fc7;--mantine-color-blue-0: #e7f5ff;--mantine-color-blue-1: #d0ebff;--mantine-color-blue-2: #a5d8ff;--mantine-color-blue-3: #74c0fc;--mantine-color-blue-4: #4dabf7;--mantine-color-blue-5: #339af0;--mantine-color-blue-6: #228be6;--mantine-color-blue-7: #1c7ed6;--mantine-color-blue-8: #1971c2;--mantine-color-blue-9: #1864ab;--mantine-color-cyan-0: #e3fafc;--mantine-color-cyan-1: #c5f6fa;--mantine-color-cyan-2: #99e9f2;--mantine-color-cyan-3: #66d9e8;--mantine-color-cyan-4: #3bc9db;--mantine-color-cyan-5: #22b8cf;--mantine-color-cyan-6: #15aabf;--mantine-color-cyan-7: #1098ad;--mantine-color-cyan-8: #0c8599;--mantine-color-cyan-9: #0b7285;--mantine-color-teal-0: #e6fcf5;--mantine-color-teal-1: #c3fae8;--mantine-color-teal-2: #96f2d7;--mantine-color-teal-3: #63e6be;--mantine-color-teal-4: #38d9a9;--mantine-color-teal-5: #20c997;--mantine-color-teal-6: #12b886;--mantine-color-teal-7: #0ca678;--mantine-color-teal-8: #099268;--mantine-color-teal-9: #087f5b;--mantine-color-green-0: #ebfbee;--mantine-color-green-1: #d3f9d8;--mantine-color-green-2: #b2f2bb;--mantine-color-green-3: #8ce99a;--mantine-color-green-4: #69db7c;--mantine-color-green-5: #51cf66;--mantine-color-green-6: #40c057;--mantine-color-green-7: #37b24d;--mantine-color-green-8: #2f9e44;--mantine-color-green-9: #2b8a3e;--mantine-color-lime-0: #f4fce3;--mantine-color-lime-1: #e9fac8;--mantine-color-lime-2: #d8f5a2;--mantine-color-lime-3: #c0eb75;--mantine-color-lime-4: #a9e34b;--mantine-color-lime-5: #94d82d;--mantine-color-lime-6: #82c91e;--mantine-color-lime-7: #74b816;--mantine-color-lime-8: #66a80f;--mantine-color-lime-9: #5c940d;--mantine-color-yellow-0: #fff9db;--mantine-color-yellow-1: #fff3bf;--mantine-color-yellow-2: #ffec99;--mantine-color-yellow-3: #ffe066;--mantine-color-yellow-4: #ffd43b;--mantine-color-yellow-5: #fcc419;--mantine-color-yellow-6: #fab005;--mantine-color-yellow-7: #f59f00;--mantine-color-yellow-8: #f08c00;--mantine-color-yellow-9: #e67700;--mantine-color-orange-0: #fff4e6;--mantine-color-orange-1: #ffe8cc;--mantine-color-orange-2: #ffd8a8;--mantine-color-orange-3: #ffc078;--mantine-color-orange-4: #ffa94d;--mantine-color-orange-5: #ff922b;--mantine-color-orange-6: #fd7e14;--mantine-color-orange-7: #f76707;--mantine-color-orange-8: #e8590c;--mantine-color-orange-9: #d9480f;--mantine-h1-font-size: calc(2.125rem \* var(--mantine-scale));--mantine-h1-line-height: 1.3;--mantine-h1-font-weight: 700;--mantine-h2-font-size: calc(1.625rem \* var(--mantine-scale));--mantine-h2-line-height: 1.35;--mantine-h2-font-weight: 700;--mantine-h3-font-size: calc(1.375rem \* var(--mantine-scale));--mantine-h3-line-height: 1.4;--mantine-h3-font-weight: 700;--mantine-h4-font-size: calc(1.125rem \* var(--mantine-scale));--mantine-h4-line-height: 1.45;--mantine-h4-font-weight: 700;--mantine-h5-font-size: calc(1rem \* var(--mantine-scale));--mantine-h5-line-height: 1.5;--mantine-h5-font-weight: 700;--mantine-h6-font-size: calc(0.875rem \* var(--mantine-scale));--mantine-h6-line-height: 1.5;--mantine-h6-font-weight: 700;} #\\:r2m\\:--container\[data-mantine-color-scheme="dark"\]{--mantine-color-scheme: dark;--mantine-primary-color-contrast: var(--mantine-color-white);--mantine-color-bright: var(--mantine-color-white);--mantine-color-text: var(--mantine-color-dark-0);--mantine-color-body: var(--mantine-color-dark-7);--mantine-color-error: var(--mantine-color-red-8);--mantine-color-placeholder: var(--mantine-color-dark-3);--mantine-color-anchor: var(--mantine-color-blue-4);--mantine-color-default: var(--mantine-color-dark-6);--mantine-color-default-hover: var(--mantine-color-dark-5);--mantine-color-default-color: var(--mantine-color-white);--mantine-color-default-border: var(--mantine-color-dark-4);--mantine-color-dimmed: var(--mantine-color-dark-2);--mantine-color-disabled: var(--mantine-color-dark-6);--mantine-color-disabled-color: var(--mantine-color-dark-3);--mantine-color-disabled-border: var(--mantine-color-dark-4);--mantine-color-dark-text: var(--mantine-color-dark-4);--mantine-color-dark-filled: var(--mantine-color-dark-8);--mantine-color-dark-filled-hover: var(--mantine-color-dark-9);--mantine-color-dark-light: rgba(46, 46, 46, 0.15);--mantine-color-dark-light-hover: rgba(46, 46, 46, 0.2);--mantine-color-dark-light-color: var(--mantine-color-dark-3);--mantine-color-dark-outline: var(--mantine-color-dark-4);--mantine-color-dark-outline-hover: rgba(66, 66, 66, 0.05);--mantine-color-gray-text: var(--mantine-color-gray-4);--mantine-color-gray-filled: var(--mantine-color-gray-8);--mantine-color-gray-filled-hover: var(--mantine-color-gray-9);--mantine-color-gray-light: rgba(134, 142, 150, 0.15);--mantine-color-gray-light-hover: rgba(134, 142, 150, 0.2);--mantine-color-gray-light-color: var(--mantine-color-gray-3);--mantine-color-gray-outline: var(--mantine-color-gray-4);--mantine-color-gray-outline-hover: rgba(206, 212, 218, 0.05);--mantine-color-red-text: var(--mantine-color-red-4);--mantine-color-red-filled: var(--mantine-color-red-8);--mantine-color-red-filled-hover: var(--mantine-color-red-9);--mantine-color-red-light: rgba(250, 82, 82, 0.15);--mantine-color-red-light-hover: rgba(250, 82, 82, 0.2);--mantine-color-red-light-color: var(--mantine-color-red-3);--mantine-color-red-outline: var(--mantine-color-red-4);--mantine-color-red-outline-hover: rgba(255, 135, 135, 0.05);--mantine-color-pink-text: var(--mantine-color-pink-4);--mantine-color-pink-filled: var(--mantine-color-pink-8);--mantine-color-pink-filled-hover: var(--mantine-color-pink-9);--mantine-color-pink-light: rgba(230, 73, 128, 0.15);--mantine-color-pink-light-hover: rgba(230, 73, 128, 0.2);--mantine-color-pink-light-color: var(--mantine-color-pink-3);--mantine-color-pink-outline: var(--mantine-color-pink-4);--mantine-color-pink-outline-hover: rgba(247, 131, 172, 0.05);--mantine-color-grape-text: var(--mantine-color-grape-4);--mantine-color-grape-filled: var(--mantine-color-grape-8);--mantine-color-grape-filled-hover: var(--mantine-color-grape-9);--mantine-color-grape-light: rgba(190, 75, 219, 0.15);--mantine-color-grape-light-hover: rgba(190, 75, 219, 0.2);--mantine-color-grape-light-color: var(--mantine-color-grape-3);--mantine-color-grape-outline: var(--mantine-color-grape-4);--mantine-color-grape-outline-hover: rgba(218, 119, 242, 0.05);--mantine-color-violet-text: var(--mantine-color-violet-4);--mantine-color-violet-filled: var(--mantine-color-violet-8);--mantine-color-violet-filled-hover: var(--mantine-color-violet-9);--mantine-color-violet-light: rgba(121, 80, 242, 0.15);--mantine-color-violet-light-hover: rgba(121, 80, 242, 0.2);--mantine-color-violet-light-color: var(--mantine-color-violet-3);--mantine-color-violet-outline: var(--mantine-color-violet-4);--mantine-color-violet-outline-hover: rgba(151, 117, 250, 0.05);--mantine-color-indigo-text: var(--mantine-color-indigo-4);--mantine-color-indigo-filled: var(--mantine-color-indigo-8);--mantine-color-indigo-filled-hover: var(--mantine-color-indigo-9);--mantine-color-indigo-light: rgba(76, 110, 245, 0.15);--mantine-color-indigo-light-hover: rgba(76, 110, 245, 0.2);--mantine-color-indigo-light-color: var(--mantine-color-indigo-3);--mantine-color-indigo-outline: var(--mantine-color-indigo-4);--mantine-color-indigo-outline-hover: rgba(116, 143, 252, 0.05);--mantine-color-blue-text: var(--mantine-color-blue-4);--mantine-color-blue-filled: var(--mantine-color-blue-8);--mantine-color-blue-filled-hover: var(--mantine-color-blue-9);--mantine-color-blue-light: rgba(34, 139, 230, 0.15);--mantine-color-blue-light-hover: rgba(34, 139, 230, 0.2);--mantine-color-blue-light-color: var(--mantine-color-blue-3);--mantine-color-blue-outline: var(--mantine-color-blue-4);--mantine-color-blue-outline-hover: rgba(77, 171, 247, 0.05);--mantine-color-cyan-text: var(--mantine-color-cyan-4);--mantine-color-cyan-filled: var(--mantine-color-cyan-8);--mantine-color-cyan-filled-hover: var(--mantine-color-cyan-9);--mantine-color-cyan-light: rgba(21, 170, 191, 0.15);--mantine-color-cyan-light-hover: rgba(21, 170, 191, 0.2);--mantine-color-cyan-light-color: var(--mantine-color-cyan-3);--mantine-color-cyan-outline: var(--mantine-color-cyan-4);--mantine-color-cyan-outline-hover: rgba(59, 201, 219, 0.05);--mantine-color-teal-text: var(--mantine-color-teal-4);--mantine-color-teal-filled: var(--mantine-color-teal-8);--mantine-color-teal-filled-hover: var(--mantine-color-teal-9);--mantine-color-teal-light: rgba(18, 184, 134, 0.15);--mantine-color-teal-light-hover: rgba(18, 184, 134, 0.2);--mantine-color-teal-light-color: var(--mantine-color-teal-3);--mantine-color-teal-outline: var(--mantine-color-teal-4);--mantine-color-teal-outline-hover: rgba(56, 217, 169, 0.05);--mantine-color-green-text: var(--mantine-color-green-4);--mantine-color-green-filled: var(--mantine-color-green-8);--mantine-color-green-filled-hover: var(--mantine-color-green-9);--mantine-color-green-light: rgba(64, 192, 87, 0.15);--mantine-color-green-light-hover: rgba(64, 192, 87, 0.2);--mantine-color-green-light-color: var(--mantine-color-green-3);--mantine-color-green-outline: var(--mantine-color-green-4);--mantine-color-green-outline-hover: rgba(105, 219, 124, 0.05);--mantine-color-lime-text: var(--mantine-color-lime-4);--mantine-color-lime-filled: var(--mantine-color-lime-8);--mantine-color-lime-filled-hover: var(--mantine-color-lime-9);--mantine-color-lime-light: rgba(130, 201, 30, 0.15);--mantine-color-lime-light-hover: rgba(130, 201, 30, 0.2);--mantine-color-lime-light-color: var(--mantine-color-lime-3);--mantine-color-lime-outline: var(--mantine-color-lime-4);--mantine-color-lime-outline-hover: rgba(169, 227, 75, 0.05);--mantine-color-yellow-text: var(--mantine-color-yellow-4);--mantine-color-yellow-filled: var(--mantine-color-yellow-8);--mantine-color-yellow-filled-hover: var(--mantine-color-yellow-9);--mantine-color-yellow-light: rgba(250, 176, 5, 0.15);--mantine-color-yellow-light-hover: rgba(250, 176, 5, 0.2);--mantine-color-yellow-light-color: var(--mantine-color-yellow-3);--mantine-color-yellow-outline: var(--mantine-color-yellow-4);--mantine-color-yellow-outline-hover: rgba(255, 212, 59, 0.05);--mantine-color-orange-text: var(--mantine-color-orange-4);--mantine-color-orange-filled: var(--mantine-color-orange-8);--mantine-color-orange-filled-hover: var(--mantine-color-orange-9);--mantine-color-orange-light: rgba(253, 126, 20, 0.15);--mantine-color-orange-light-hover: rgba(253, 126, 20, 0.2);--mantine-color-orange-light-color: var(--mantine-color-orange-3);--mantine-color-orange-outline: var(--mantine-color-orange-4);--mantine-color-orange-outline-hover: rgba(255, 169, 77, 0.05);} #\\:r2m\\:--container\[data-mantine-color-scheme="light"\]{--mantine-color-scheme: light;--mantine-primary-color-contrast: var(--mantine-color-white);--mantine-color-bright: var(--mantine-color-black);--mantine-color-text: #000;--mantine-color-body: #fff;--mantine-color-error: var(--mantine-color-red-6);--mantine-color-placeholder: var(--mantine-color-gray-5);--mantine-color-anchor: var(--mantine-color-blue-6);--mantine-color-default: var(--mantine-color-white);--mantine-color-default-hover: var(--mantine-color-gray-0);--mantine-color-default-color: var(--mantine-color-black);--mantine-color-default-border: var(--mantine-color-gray-4);--mantine-color-dimmed: var(--mantine-color-gray-6);--mantine-color-disabled: var(--mantine-color-gray-2);--mantine-color-disabled-color: var(--mantine-color-gray-5);--mantine-color-disabled-border: var(--mantine-color-gray-3);--mantine-color-dark-text: var(--mantine-color-dark-filled);--mantine-color-dark-filled: var(--mantine-color-dark-6);--mantine-color-dark-filled-hover: var(--mantine-color-dark-7);--mantine-color-dark-light: rgba(46, 46, 46, 0.1);--mantine-color-dark-light-hover: rgba(46, 46, 46, 0.12);--mantine-color-dark-light-color: var(--mantine-color-dark-6);--mantine-color-dark-outline: var(--mantine-color-dark-6);--mantine-color-dark-outline-hover: rgba(46, 46, 46, 0.05);--mantine-color-gray-text: var(--mantine-color-gray-filled);--mantine-color-gray-filled: var(--mantine-color-gray-6);--mantine-color-gray-filled-hover: var(--mantine-color-gray-7);--mantine-color-gray-light: rgba(134, 142, 150, 0.1);--mantine-color-gray-light-hover: rgba(134, 142, 150, 0.12);--mantine-color-gray-light-color: var(--mantine-color-gray-6);--mantine-color-gray-outline: var(--mantine-color-gray-6);--mantine-color-gray-outline-hover: rgba(134, 142, 150, 0.05);--mantine-color-red-text: var(--mantine-color-red-filled);--mantine-color-red-filled: var(--mantine-color-red-6);--mantine-color-red-filled-hover: var(--mantine-color-red-7);--mantine-color-red-light: rgba(250, 82, 82, 0.1);--mantine-color-red-light-hover: rgba(250, 82, 82, 0.12);--mantine-color-red-light-color: var(--mantine-color-red-6);--mantine-color-red-outline: var(--mantine-color-red-6);--mantine-color-red-outline-hover: rgba(250, 82, 82, 0.05);--mantine-color-pink-text: var(--mantine-color-pink-filled);--mantine-color-pink-filled: var(--mantine-color-pink-6);--mantine-color-pink-filled-hover: var(--mantine-color-pink-7);--mantine-color-pink-light: rgba(230, 73, 128, 0.1);--mantine-color-pink-light-hover: rgba(230, 73, 128, 0.12);--mantine-color-pink-light-color: var(--mantine-color-pink-6);--mantine-color-pink-outline: var(--mantine-color-pink-6);--mantine-color-pink-outline-hover: rgba(230, 73, 128, 0.05);--mantine-color-grape-text: var(--mantine-color-grape-filled);--mantine-color-grape-filled: var(--mantine-color-grape-6);--mantine-color-grape-filled-hover: var(--mantine-color-grape-7);--mantine-color-grape-light: rgba(190, 75, 219, 0.1);--mantine-color-grape-light-hover: rgba(190, 75, 219, 0.12);--mantine-color-grape-light-color: var(--mantine-color-grape-6);--mantine-color-grape-outline: var(--mantine-color-grape-6);--mantine-color-grape-outline-hover: rgba(190, 75, 219, 0.05);--mantine-color-violet-text: var(--mantine-color-violet-filled);--mantine-color-violet-filled: var(--mantine-color-violet-6);--mantine-color-violet-filled-hover: var(--mantine-color-violet-7);--mantine-color-violet-light: rgba(121, 80, 242, 0.1);--mantine-color-violet-light-hover: rgba(121, 80, 242, 0.12);--mantine-color-violet-light-color: var(--mantine-color-violet-6);--mantine-color-violet-outline: var(--mantine-color-violet-6);--mantine-color-violet-outline-hover: rgba(121, 80, 242, 0.05);--mantine-color-indigo-text: var(--mantine-color-indigo-filled);--mantine-color-indigo-filled: var(--mantine-color-indigo-6);--mantine-color-indigo-filled-hover: var(--mantine-color-indigo-7);--mantine-color-indigo-light: rgba(76, 110, 245, 0.1);--mantine-color-indigo-light-hover: rgba(76, 110, 245, 0.12);--mantine-color-indigo-light-color: var(--mantine-color-indigo-6);--mantine-color-indigo-outline: var(--mantine-color-indigo-6);--mantine-color-indigo-outline-hover: rgba(76, 110, 245, 0.05);--mantine-color-blue-text: var(--mantine-color-blue-filled);--mantine-color-blue-filled: var(--mantine-color-blue-6);--mantine-color-blue-filled-hover: var(--mantine-color-blue-7);--mantine-color-blue-light: rgba(34, 139, 230, 0.1);--mantine-color-blue-light-hover: rgba(34, 139, 230, 0.12);--mantine-color-blue-light-color: var(--mantine-color-blue-6);--mantine-color-blue-outline: var(--mantine-color-blue-6);--mantine-color-blue-outline-hover: rgba(34, 139, 230, 0.05);--mantine-color-cyan-text: var(--mantine-color-cyan-filled);--mantine-color-cyan-filled: var(--mantine-color-cyan-6);--mantine-color-cyan-filled-hover: var(--mantine-color-cyan-7);--mantine-color-cyan-light: rgba(21, 170, 191, 0.1);--mantine-color-cyan-light-hover: rgba(21, 170, 191, 0.12);--mantine-color-cyan-light-color: var(--mantine-color-cyan-6);--mantine-color-cyan-outline: var(--mantine-color-cyan-6);--mantine-color-cyan-outline-hover: rgba(21, 170, 191, 0.05);--mantine-color-teal-text: var(--mantine-color-teal-filled);--mantine-color-teal-filled: var(--mantine-color-teal-6);--mantine-color-teal-filled-hover: var(--mantine-color-teal-7);--mantine-color-teal-light: rgba(18, 184, 134, 0.1);--mantine-color-teal-light-hover: rgba(18, 184, 134, 0.12);--mantine-color-teal-light-color: var(--mantine-color-teal-6);--mantine-color-teal-outline: var(--mantine-color-teal-6);--mantine-color-teal-outline-hover: rgba(18, 184, 134, 0.05);--mantine-color-green-text: var(--mantine-color-green-filled);--mantine-color-green-filled: var(--mantine-color-green-6);--mantine-color-green-filled-hover: var(--mantine-color-green-7);--mantine-color-green-light: rgba(64, 192, 87, 0.1);--mantine-color-green-light-hover: rgba(64, 192, 87, 0.12);--mantine-color-green-light-color: var(--mantine-color-green-6);--mantine-color-green-outline: var(--mantine-color-green-6);--mantine-color-green-outline-hover: rgba(64, 192, 87, 0.05);--mantine-color-lime-text: var(--mantine-color-lime-filled);--mantine-color-lime-filled: var(--mantine-color-lime-6);--mantine-color-lime-filled-hover: var(--mantine-color-lime-7);--mantine-color-lime-light: rgba(130, 201, 30, 0.1);--mantine-color-lime-light-hover: rgba(130, 201, 30, 0.12);--mantine-color-lime-light-color: var(--mantine-color-lime-6);--mantine-color-lime-outline: var(--mantine-color-lime-6);--mantine-color-lime-outline-hover: rgba(130, 201, 30, 0.05);--mantine-color-yellow-text: var(--mantine-color-yellow-filled);--mantine-color-yellow-filled: var(--mantine-color-yellow-6);--mantine-color-yellow-filled-hover: var(--mantine-color-yellow-7);--mantine-color-yellow-light: rgba(250, 176, 5, 0.1);--mantine-color-yellow-light-hover: rgba(250, 176, 5, 0.12);--mantine-color-yellow-light-color: var(--mantine-color-yellow-6);--mantine-color-yellow-outline: var(--mantine-color-yellow-6);--mantine-color-yellow-outline-hover: rgba(250, 176, 5, 0.05);--mantine-color-orange-text: var(--mantine-color-orange-filled);--mantine-color-orange-filled: var(--mantine-color-orange-6);--mantine-color-orange-filled-hover: var(--mantine-color-orange-7);--mantine-color-orange-light: rgba(253, 126, 20, 0.1);--mantine-color-orange-light-hover: rgba(253, 126, 20, 0.12);--mantine-color-orange-light-color: var(--mantine-color-orange-6);--mantine-color-orange-outline: var(--mantine-color-orange-6);--mantine-color-orange-outline-hover: rgba(253, 126, 20, 0.05);} #\\:r2m\\:--container\[data-mantine-color-scheme="dark"\] { --mantine-color-scheme: dark; } #\\:r2m\\:--container\[data-mantine-color-scheme="light"\] { --mantine-color-scheme: light; }
|
|
198
661
|
|
|
199
662
|
|
|
200
663
|
|
|
@@ -203,11 +666,13 @@ Hide code
|
|
|
203
666
|
\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
|
|
204
667
|
|
|
205
668
|
<IressEditor\>
|
|
206
|
-
<SimpleToolbar />
|
|
669
|
+
<IressEditor.SimpleToolbar />
|
|
207
670
|
</IressEditor\>
|
|
208
671
|
|
|
209
672
|
Copy
|
|
210
673
|
|
|
674
|
+
#### [](#simple-toolbar-api)Props
|
|
675
|
+
|
|
211
676
|
[](#iresshookeditor)`IressHookEditor`
|
|
212
677
|
-------------------------------------
|
|
213
678
|
|
|
@@ -223,7 +688,7 @@ Some use cases:
|
|
|
223
688
|
2. You need to access the underlying editor instance to perform custom actions, such as updating content programmatically.
|
|
224
689
|
3. You would like to improve the performance of the editor by using the `IressHookEditor.useEditor` and `IressHookEditor.useEditorState` hook directly.
|
|
225
690
|
|
|
226
|
-
#\\:r2p\\:--container{--mantine-scale: 1;--mantine-cursor-type: default;--mantine-color-scheme: light dark;--mantine-webkit-font-smoothing: antialiased;--mantine-moz-font-smoothing: grayscale;--mantine-color-white: #fff;--mantine-color-black: #000;--mantine-line-height: 1.55;--mantine-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;--mantine-font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-font-family-headings: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;--mantine-heading-font-weight: 700;--mantine-heading-text-wrap: wrap;--mantine-radius-default: calc(0.25rem \* var(--mantine-scale));--mantine-primary-color-filled: var(--mantine-color-blue-filled);--mantine-primary-color-filled-hover: var(--mantine-color-blue-filled-hover);--mantine-primary-color-light: var(--mantine-color-blue-light);--mantine-primary-color-light-hover: var(--mantine-color-blue-light-hover);--mantine-primary-color-light-color: var(--mantine-color-blue-light-color);--mantine-breakpoint-xs: 36em;--mantine-breakpoint-sm: 48em;--mantine-breakpoint-md: 62em;--mantine-breakpoint-lg: 75em;--mantine-breakpoint-xl: 88em;--mantine-spacing-xs: calc(0.625rem \* var(--mantine-scale));--mantine-spacing-sm: calc(0.75rem \* var(--mantine-scale));--mantine-spacing-md: calc(1rem \* var(--mantine-scale));--mantine-spacing-lg: calc(1.25rem \* var(--mantine-scale));--mantine-spacing-xl: calc(2rem \* var(--mantine-scale));--mantine-font-size-xs: calc(0.75rem \* var(--mantine-scale));--mantine-font-size-sm: calc(0.875rem \* var(--mantine-scale));--mantine-font-size-md: calc(1rem \* var(--mantine-scale));--mantine-font-size-lg: calc(1.125rem \* var(--mantine-scale));--mantine-font-size-xl: calc(1.25rem \* var(--mantine-scale));--mantine-line-height-xs: 1.4;--mantine-line-height-sm: 1.45;--mantine-line-height-md: 1.55;--mantine-line-height-lg: 1.6;--mantine-line-height-xl: 1.65;--mantine-shadow-xs: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.125rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.1);--mantine-shadow-sm: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(0.625rem \* var(--mantine-scale)) calc(0.9375rem \* var(--mantine-scale)) calc(-0.3125rem \* var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.4375rem \* var(--mantine-scale)) calc(0.4375rem \* var(--mantine-scale)) calc(-0.3125rem \* var(--mantine-scale));--mantine-shadow-md: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(1.25rem \* var(--mantine-scale)) calc(1.5625rem \* var(--mantine-scale)) calc(-0.3125rem \* var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.625rem \* var(--mantine-scale)) calc(0.625rem \* var(--mantine-scale)) calc(-0.3125rem \* var(--mantine-scale));--mantine-shadow-lg: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(1.75rem \* var(--mantine-scale)) calc(1.4375rem \* var(--mantine-scale)) calc(-0.4375rem \* var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.75rem \* var(--mantine-scale)) calc(0.75rem \* var(--mantine-scale)) calc(-0.4375rem \* var(--mantine-scale));--mantine-shadow-xl: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(2.25rem \* var(--mantine-scale)) calc(1.75rem \* var(--mantine-scale)) calc(-0.4375rem \* var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(1.0625rem \* var(--mantine-scale)) calc(1.0625rem \* var(--mantine-scale)) calc(-0.4375rem \* var(--mantine-scale));--mantine-radius-xs: calc(0.125rem \* var(--mantine-scale));--mantine-radius-sm: calc(0.25rem \* var(--mantine-scale));--mantine-radius-md: calc(0.5rem \* var(--mantine-scale));--mantine-radius-lg: calc(1rem \* var(--mantine-scale));--mantine-radius-xl: calc(2rem \* var(--mantine-scale));--mantine-primary-color-0: var(--mantine-color-blue-0);--mantine-primary-color-1: var(--mantine-color-blue-1);--mantine-primary-color-2: var(--mantine-color-blue-2);--mantine-primary-color-3: var(--mantine-color-blue-3);--mantine-primary-color-4: var(--mantine-color-blue-4);--mantine-primary-color-5: var(--mantine-color-blue-5);--mantine-primary-color-6: var(--mantine-color-blue-6);--mantine-primary-color-7: var(--mantine-color-blue-7);--mantine-primary-color-8: var(--mantine-color-blue-8);--mantine-primary-color-9: var(--mantine-color-blue-9);--mantine-color-dark-0: #C9C9C9;--mantine-color-dark-1: #b8b8b8;--mantine-color-dark-2: #828282;--mantine-color-dark-3: #696969;--mantine-color-dark-4: #424242;--mantine-color-dark-5: #3b3b3b;--mantine-color-dark-6: #2e2e2e;--mantine-color-dark-7: #242424;--mantine-color-dark-8: #1f1f1f;--mantine-color-dark-9: #141414;--mantine-color-gray-0: #f8f9fa;--mantine-color-gray-1: #f1f3f5;--mantine-color-gray-2: #e9ecef;--mantine-color-gray-3: #dee2e6;--mantine-color-gray-4: #ced4da;--mantine-color-gray-5: #adb5bd;--mantine-color-gray-6: #868e96;--mantine-color-gray-7: #495057;--mantine-color-gray-8: #343a40;--mantine-color-gray-9: #212529;--mantine-color-red-0: #fff5f5;--mantine-color-red-1: #ffe3e3;--mantine-color-red-2: #ffc9c9;--mantine-color-red-3: #ffa8a8;--mantine-color-red-4: #ff8787;--mantine-color-red-5: #ff6b6b;--mantine-color-red-6: #fa5252;--mantine-color-red-7: #f03e3e;--mantine-color-red-8: #e03131;--mantine-color-red-9: #c92a2a;--mantine-color-pink-0: #fff0f6;--mantine-color-pink-1: #ffdeeb;--mantine-color-pink-2: #fcc2d7;--mantine-color-pink-3: #faa2c1;--mantine-color-pink-4: #f783ac;--mantine-color-pink-5: #f06595;--mantine-color-pink-6: #e64980;--mantine-color-pink-7: #d6336c;--mantine-color-pink-8: #c2255c;--mantine-color-pink-9: #a61e4d;--mantine-color-grape-0: #f8f0fc;--mantine-color-grape-1: #f3d9fa;--mantine-color-grape-2: #eebefa;--mantine-color-grape-3: #e599f7;--mantine-color-grape-4: #da77f2;--mantine-color-grape-5: #cc5de8;--mantine-color-grape-6: #be4bdb;--mantine-color-grape-7: #ae3ec9;--mantine-color-grape-8: #9c36b5;--mantine-color-grape-9: #862e9c;--mantine-color-violet-0: #f3f0ff;--mantine-color-violet-1: #e5dbff;--mantine-color-violet-2: #d0bfff;--mantine-color-violet-3: #b197fc;--mantine-color-violet-4: #9775fa;--mantine-color-violet-5: #845ef7;--mantine-color-violet-6: #7950f2;--mantine-color-violet-7: #7048e8;--mantine-color-violet-8: #6741d9;--mantine-color-violet-9: #5f3dc4;--mantine-color-indigo-0: #edf2ff;--mantine-color-indigo-1: #dbe4ff;--mantine-color-indigo-2: #bac8ff;--mantine-color-indigo-3: #91a7ff;--mantine-color-indigo-4: #748ffc;--mantine-color-indigo-5: #5c7cfa;--mantine-color-indigo-6: #4c6ef5;--mantine-color-indigo-7: #4263eb;--mantine-color-indigo-8: #3b5bdb;--mantine-color-indigo-9: #364fc7;--mantine-color-blue-0: #e7f5ff;--mantine-color-blue-1: #d0ebff;--mantine-color-blue-2: #a5d8ff;--mantine-color-blue-3: #74c0fc;--mantine-color-blue-4: #4dabf7;--mantine-color-blue-5: #339af0;--mantine-color-blue-6: #228be6;--mantine-color-blue-7: #1c7ed6;--mantine-color-blue-8: #1971c2;--mantine-color-blue-9: #1864ab;--mantine-color-cyan-0: #e3fafc;--mantine-color-cyan-1: #c5f6fa;--mantine-color-cyan-2: #99e9f2;--mantine-color-cyan-3: #66d9e8;--mantine-color-cyan-4: #3bc9db;--mantine-color-cyan-5: #22b8cf;--mantine-color-cyan-6: #15aabf;--mantine-color-cyan-7: #1098ad;--mantine-color-cyan-8: #0c8599;--mantine-color-cyan-9: #0b7285;--mantine-color-teal-0: #e6fcf5;--mantine-color-teal-1: #c3fae8;--mantine-color-teal-2: #96f2d7;--mantine-color-teal-3: #63e6be;--mantine-color-teal-4: #38d9a9;--mantine-color-teal-5: #20c997;--mantine-color-teal-6: #12b886;--mantine-color-teal-7: #0ca678;--mantine-color-teal-8: #099268;--mantine-color-teal-9: #087f5b;--mantine-color-green-0: #ebfbee;--mantine-color-green-1: #d3f9d8;--mantine-color-green-2: #b2f2bb;--mantine-color-green-3: #8ce99a;--mantine-color-green-4: #69db7c;--mantine-color-green-5: #51cf66;--mantine-color-green-6: #40c057;--mantine-color-green-7: #37b24d;--mantine-color-green-8: #2f9e44;--mantine-color-green-9: #2b8a3e;--mantine-color-lime-0: #f4fce3;--mantine-color-lime-1: #e9fac8;--mantine-color-lime-2: #d8f5a2;--mantine-color-lime-3: #c0eb75;--mantine-color-lime-4: #a9e34b;--mantine-color-lime-5: #94d82d;--mantine-color-lime-6: #82c91e;--mantine-color-lime-7: #74b816;--mantine-color-lime-8: #66a80f;--mantine-color-lime-9: #5c940d;--mantine-color-yellow-0: #fff9db;--mantine-color-yellow-1: #fff3bf;--mantine-color-yellow-2: #ffec99;--mantine-color-yellow-3: #ffe066;--mantine-color-yellow-4: #ffd43b;--mantine-color-yellow-5: #fcc419;--mantine-color-yellow-6: #fab005;--mantine-color-yellow-7: #f59f00;--mantine-color-yellow-8: #f08c00;--mantine-color-yellow-9: #e67700;--mantine-color-orange-0: #fff4e6;--mantine-color-orange-1: #ffe8cc;--mantine-color-orange-2: #ffd8a8;--mantine-color-orange-3: #ffc078;--mantine-color-orange-4: #ffa94d;--mantine-color-orange-5: #ff922b;--mantine-color-orange-6: #fd7e14;--mantine-color-orange-7: #f76707;--mantine-color-orange-8: #e8590c;--mantine-color-orange-9: #d9480f;--mantine-h1-font-size: calc(2.125rem \* var(--mantine-scale));--mantine-h1-line-height: 1.3;--mantine-h1-font-weight: 700;--mantine-h2-font-size: calc(1.625rem \* var(--mantine-scale));--mantine-h2-line-height: 1.35;--mantine-h2-font-weight: 700;--mantine-h3-font-size: calc(1.375rem \* var(--mantine-scale));--mantine-h3-line-height: 1.4;--mantine-h3-font-weight: 700;--mantine-h4-font-size: calc(1.125rem \* var(--mantine-scale));--mantine-h4-line-height: 1.45;--mantine-h4-font-weight: 700;--mantine-h5-font-size: calc(1rem \* var(--mantine-scale));--mantine-h5-line-height: 1.5;--mantine-h5-font-weight: 700;--mantine-h6-font-size: calc(0.875rem \* var(--mantine-scale));--mantine-h6-line-height: 1.5;--mantine-h6-font-weight: 700;}#\\:r2p\\:--container\[data-mantine-color-scheme="dark"\]{--mantine-primary-color-contrast: var(--mantine-color-white);--mantine-color-bright: var(--mantine-color-white);--mantine-color-text: var(--mantine-color-dark-0);--mantine-color-body: var(--mantine-color-dark-7);--mantine-color-error: var(--mantine-color-red-8);--mantine-color-placeholder: var(--mantine-color-dark-3);--mantine-color-anchor: var(--mantine-color-blue-4);--mantine-color-default: var(--mantine-color-dark-6);--mantine-color-default-hover: var(--mantine-color-dark-5);--mantine-color-default-color: var(--mantine-color-white);--mantine-color-default-border: var(--mantine-color-dark-4);--mantine-color-dimmed: var(--mantine-color-dark-2);--mantine-color-disabled: var(--mantine-color-dark-6);--mantine-color-disabled-color: var(--mantine-color-dark-3);--mantine-color-disabled-border: var(--mantine-color-gray-6);--mantine-color-dark-text: var(--mantine-color-dark-4);--mantine-color-dark-filled: var(--mantine-color-dark-8);--mantine-color-dark-filled-hover: var(--mantine-color-dark-9);--mantine-color-dark-light: rgba(46, 46, 46, 0.15);--mantine-color-dark-light-hover: rgba(46, 46, 46, 0.2);--mantine-color-dark-light-color: var(--mantine-color-dark-3);--mantine-color-dark-outline: var(--mantine-color-dark-4);--mantine-color-dark-outline-hover: rgba(66, 66, 66, 0.05);--mantine-color-gray-text: var(--mantine-color-gray-4);--mantine-color-gray-filled: var(--mantine-color-gray-8);--mantine-color-gray-filled-hover: var(--mantine-color-gray-9);--mantine-color-gray-light: rgba(134, 142, 150, 0.15);--mantine-color-gray-light-hover: rgba(134, 142, 150, 0.2);--mantine-color-gray-light-color: var(--mantine-color-gray-3);--mantine-color-gray-outline: var(--mantine-color-gray-4);--mantine-color-gray-outline-hover: rgba(206, 212, 218, 0.05);--mantine-color-red-text: var(--mantine-color-red-4);--mantine-color-red-filled: var(--mantine-color-red-8);--mantine-color-red-filled-hover: var(--mantine-color-red-9);--mantine-color-red-light: rgba(250, 82, 82, 0.15);--mantine-color-red-light-hover: rgba(250, 82, 82, 0.2);--mantine-color-red-light-color: var(--mantine-color-red-3);--mantine-color-red-outline: var(--mantine-color-red-4);--mantine-color-red-outline-hover: rgba(255, 135, 135, 0.05);--mantine-color-pink-text: var(--mantine-color-pink-4);--mantine-color-pink-filled: var(--mantine-color-pink-8);--mantine-color-pink-filled-hover: var(--mantine-color-pink-9);--mantine-color-pink-light: rgba(230, 73, 128, 0.15);--mantine-color-pink-light-hover: rgba(230, 73, 128, 0.2);--mantine-color-pink-light-color: var(--mantine-color-pink-3);--mantine-color-pink-outline: var(--mantine-color-pink-4);--mantine-color-pink-outline-hover: rgba(247, 131, 172, 0.05);--mantine-color-grape-text: var(--mantine-color-grape-4);--mantine-color-grape-filled: var(--mantine-color-grape-8);--mantine-color-grape-filled-hover: var(--mantine-color-grape-9);--mantine-color-grape-light: rgba(190, 75, 219, 0.15);--mantine-color-grape-light-hover: rgba(190, 75, 219, 0.2);--mantine-color-grape-light-color: var(--mantine-color-grape-3);--mantine-color-grape-outline: var(--mantine-color-grape-4);--mantine-color-grape-outline-hover: rgba(218, 119, 242, 0.05);--mantine-color-violet-text: var(--mantine-color-violet-4);--mantine-color-violet-filled: var(--mantine-color-violet-8);--mantine-color-violet-filled-hover: var(--mantine-color-violet-9);--mantine-color-violet-light: rgba(121, 80, 242, 0.15);--mantine-color-violet-light-hover: rgba(121, 80, 242, 0.2);--mantine-color-violet-light-color: var(--mantine-color-violet-3);--mantine-color-violet-outline: var(--mantine-color-violet-4);--mantine-color-violet-outline-hover: rgba(151, 117, 250, 0.05);--mantine-color-indigo-text: var(--mantine-color-indigo-4);--mantine-color-indigo-filled: var(--mantine-color-indigo-8);--mantine-color-indigo-filled-hover: var(--mantine-color-indigo-9);--mantine-color-indigo-light: rgba(76, 110, 245, 0.15);--mantine-color-indigo-light-hover: rgba(76, 110, 245, 0.2);--mantine-color-indigo-light-color: var(--mantine-color-indigo-3);--mantine-color-indigo-outline: var(--mantine-color-indigo-4);--mantine-color-indigo-outline-hover: rgba(116, 143, 252, 0.05);--mantine-color-blue-text: var(--mantine-color-blue-4);--mantine-color-blue-filled: var(--mantine-color-blue-8);--mantine-color-blue-filled-hover: var(--mantine-color-blue-9);--mantine-color-blue-light: rgba(34, 139, 230, 0.15);--mantine-color-blue-light-hover: rgba(34, 139, 230, 0.2);--mantine-color-blue-light-color: var(--mantine-color-blue-3);--mantine-color-blue-outline: var(--mantine-color-blue-4);--mantine-color-blue-outline-hover: rgba(77, 171, 247, 0.05);--mantine-color-cyan-text: var(--mantine-color-cyan-4);--mantine-color-cyan-filled: var(--mantine-color-cyan-8);--mantine-color-cyan-filled-hover: var(--mantine-color-cyan-9);--mantine-color-cyan-light: rgba(21, 170, 191, 0.15);--mantine-color-cyan-light-hover: rgba(21, 170, 191, 0.2);--mantine-color-cyan-light-color: var(--mantine-color-cyan-3);--mantine-color-cyan-outline: var(--mantine-color-cyan-4);--mantine-color-cyan-outline-hover: rgba(59, 201, 219, 0.05);--mantine-color-teal-text: var(--mantine-color-teal-4);--mantine-color-teal-filled: var(--mantine-color-teal-8);--mantine-color-teal-filled-hover: var(--mantine-color-teal-9);--mantine-color-teal-light: rgba(18, 184, 134, 0.15);--mantine-color-teal-light-hover: rgba(18, 184, 134, 0.2);--mantine-color-teal-light-color: var(--mantine-color-teal-3);--mantine-color-teal-outline: var(--mantine-color-teal-4);--mantine-color-teal-outline-hover: rgba(56, 217, 169, 0.05);--mantine-color-green-text: var(--mantine-color-green-4);--mantine-color-green-filled: var(--mantine-color-green-8);--mantine-color-green-filled-hover: var(--mantine-color-green-9);--mantine-color-green-light: rgba(64, 192, 87, 0.15);--mantine-color-green-light-hover: rgba(64, 192, 87, 0.2);--mantine-color-green-light-color: var(--mantine-color-green-3);--mantine-color-green-outline: var(--mantine-color-green-4);--mantine-color-green-outline-hover: rgba(105, 219, 124, 0.05);--mantine-color-lime-text: var(--mantine-color-lime-4);--mantine-color-lime-filled: var(--mantine-color-lime-8);--mantine-color-lime-filled-hover: var(--mantine-color-lime-9);--mantine-color-lime-light: rgba(130, 201, 30, 0.15);--mantine-color-lime-light-hover: rgba(130, 201, 30, 0.2);--mantine-color-lime-light-color: var(--mantine-color-lime-3);--mantine-color-lime-outline: var(--mantine-color-lime-4);--mantine-color-lime-outline-hover: rgba(169, 227, 75, 0.05);--mantine-color-yellow-text: var(--mantine-color-yellow-4);--mantine-color-yellow-filled: var(--mantine-color-yellow-8);--mantine-color-yellow-filled-hover: var(--mantine-color-yellow-9);--mantine-color-yellow-light: rgba(250, 176, 5, 0.15);--mantine-color-yellow-light-hover: rgba(250, 176, 5, 0.2);--mantine-color-yellow-light-color: var(--mantine-color-yellow-3);--mantine-color-yellow-outline: var(--mantine-color-yellow-4);--mantine-color-yellow-outline-hover: rgba(255, 212, 59, 0.05);--mantine-color-orange-text: var(--mantine-color-orange-4);--mantine-color-orange-filled: var(--mantine-color-orange-8);--mantine-color-orange-filled-hover: var(--mantine-color-orange-9);--mantine-color-orange-light: rgba(253, 126, 20, 0.15);--mantine-color-orange-light-hover: rgba(253, 126, 20, 0.2);--mantine-color-orange-light-color: var(--mantine-color-orange-3);--mantine-color-orange-outline: var(--mantine-color-orange-4);--mantine-color-orange-outline-hover: rgba(255, 169, 77, 0.05);}#\\:r2p\\:--container\[data-mantine-color-scheme="light"\]{--mantine-primary-color-contrast: var(--mantine-color-white);--mantine-color-bright: var(--mantine-color-black);--mantine-color-text: #000;--mantine-color-body: #fff;--mantine-color-error: var(--mantine-color-red-6);--mantine-color-placeholder: var(--mantine-color-gray-5);--mantine-color-anchor: var(--mantine-color-blue-6);--mantine-color-default: var(--mantine-color-white);--mantine-color-default-hover: var(--mantine-color-gray-0);--mantine-color-default-color: var(--mantine-color-black);--mantine-color-default-border: var(--mantine-color-gray-4);--mantine-color-dimmed: var(--mantine-color-gray-6);--mantine-color-disabled: var(--mantine-color-gray-2);--mantine-color-disabled-color: var(--mantine-color-gray-5);--mantine-color-disabled-border: var(--mantine-color-gray-3);--mantine-color-dark-text: var(--mantine-color-dark-filled);--mantine-color-dark-filled: var(--mantine-color-dark-6);--mantine-color-dark-filled-hover: var(--mantine-color-dark-7);--mantine-color-dark-light: rgba(46, 46, 46, 0.1);--mantine-color-dark-light-hover: rgba(46, 46, 46, 0.12);--mantine-color-dark-light-color: var(--mantine-color-dark-6);--mantine-color-dark-outline: var(--mantine-color-dark-6);--mantine-color-dark-outline-hover: rgba(46, 46, 46, 0.05);--mantine-color-gray-text: var(--mantine-color-gray-filled);--mantine-color-gray-filled: var(--mantine-color-gray-6);--mantine-color-gray-filled-hover: var(--mantine-color-gray-7);--mantine-color-gray-light: rgba(134, 142, 150, 0.1);--mantine-color-gray-light-hover: rgba(134, 142, 150, 0.12);--mantine-color-gray-light-color: var(--mantine-color-gray-6);--mantine-color-gray-outline: var(--mantine-color-gray-6);--mantine-color-gray-outline-hover: rgba(134, 142, 150, 0.05);--mantine-color-red-text: var(--mantine-color-red-filled);--mantine-color-red-filled: var(--mantine-color-red-6);--mantine-color-red-filled-hover: var(--mantine-color-red-7);--mantine-color-red-light: rgba(250, 82, 82, 0.1);--mantine-color-red-light-hover: rgba(250, 82, 82, 0.12);--mantine-color-red-light-color: var(--mantine-color-red-6);--mantine-color-red-outline: var(--mantine-color-red-6);--mantine-color-red-outline-hover: rgba(250, 82, 82, 0.05);--mantine-color-pink-text: var(--mantine-color-pink-filled);--mantine-color-pink-filled: var(--mantine-color-pink-6);--mantine-color-pink-filled-hover: var(--mantine-color-pink-7);--mantine-color-pink-light: rgba(230, 73, 128, 0.1);--mantine-color-pink-light-hover: rgba(230, 73, 128, 0.12);--mantine-color-pink-light-color: var(--mantine-color-pink-6);--mantine-color-pink-outline: var(--mantine-color-pink-6);--mantine-color-pink-outline-hover: rgba(230, 73, 128, 0.05);--mantine-color-grape-text: var(--mantine-color-grape-filled);--mantine-color-grape-filled: var(--mantine-color-grape-6);--mantine-color-grape-filled-hover: var(--mantine-color-grape-7);--mantine-color-grape-light: rgba(190, 75, 219, 0.1);--mantine-color-grape-light-hover: rgba(190, 75, 219, 0.12);--mantine-color-grape-light-color: var(--mantine-color-grape-6);--mantine-color-grape-outline: var(--mantine-color-grape-6);--mantine-color-grape-outline-hover: rgba(190, 75, 219, 0.05);--mantine-color-violet-text: var(--mantine-color-violet-filled);--mantine-color-violet-filled: var(--mantine-color-violet-6);--mantine-color-violet-filled-hover: var(--mantine-color-violet-7);--mantine-color-violet-light: rgba(121, 80, 242, 0.1);--mantine-color-violet-light-hover: rgba(121, 80, 242, 0.12);--mantine-color-violet-light-color: var(--mantine-color-violet-6);--mantine-color-violet-outline: var(--mantine-color-violet-6);--mantine-color-violet-outline-hover: rgba(121, 80, 242, 0.05);--mantine-color-indigo-text: var(--mantine-color-indigo-filled);--mantine-color-indigo-filled: var(--mantine-color-indigo-6);--mantine-color-indigo-filled-hover: var(--mantine-color-indigo-7);--mantine-color-indigo-light: rgba(76, 110, 245, 0.1);--mantine-color-indigo-light-hover: rgba(76, 110, 245, 0.12);--mantine-color-indigo-light-color: var(--mantine-color-indigo-6);--mantine-color-indigo-outline: var(--mantine-color-indigo-6);--mantine-color-indigo-outline-hover: rgba(76, 110, 245, 0.05);--mantine-color-blue-text: var(--mantine-color-blue-filled);--mantine-color-blue-filled: var(--mantine-color-blue-6);--mantine-color-blue-filled-hover: var(--mantine-color-blue-7);--mantine-color-blue-light: rgba(34, 139, 230, 0.1);--mantine-color-blue-light-hover: rgba(34, 139, 230, 0.12);--mantine-color-blue-light-color: var(--mantine-color-blue-6);--mantine-color-blue-outline: var(--mantine-color-blue-6);--mantine-color-blue-outline-hover: rgba(34, 139, 230, 0.05);--mantine-color-cyan-text: var(--mantine-color-cyan-filled);--mantine-color-cyan-filled: var(--mantine-color-cyan-6);--mantine-color-cyan-filled-hover: var(--mantine-color-cyan-7);--mantine-color-cyan-light: rgba(21, 170, 191, 0.1);--mantine-color-cyan-light-hover: rgba(21, 170, 191, 0.12);--mantine-color-cyan-light-color: var(--mantine-color-cyan-6);--mantine-color-cyan-outline: var(--mantine-color-cyan-6);--mantine-color-cyan-outline-hover: rgba(21, 170, 191, 0.05);--mantine-color-teal-text: var(--mantine-color-teal-filled);--mantine-color-teal-filled: var(--mantine-color-teal-6);--mantine-color-teal-filled-hover: var(--mantine-color-teal-7);--mantine-color-teal-light: rgba(18, 184, 134, 0.1);--mantine-color-teal-light-hover: rgba(18, 184, 134, 0.12);--mantine-color-teal-light-color: var(--mantine-color-teal-6);--mantine-color-teal-outline: var(--mantine-color-teal-6);--mantine-color-teal-outline-hover: rgba(18, 184, 134, 0.05);--mantine-color-green-text: var(--mantine-color-green-filled);--mantine-color-green-filled: var(--mantine-color-green-6);--mantine-color-green-filled-hover: var(--mantine-color-green-7);--mantine-color-green-light: rgba(64, 192, 87, 0.1);--mantine-color-green-light-hover: rgba(64, 192, 87, 0.12);--mantine-color-green-light-color: var(--mantine-color-green-6);--mantine-color-green-outline: var(--mantine-color-green-6);--mantine-color-green-outline-hover: rgba(64, 192, 87, 0.05);--mantine-color-lime-text: var(--mantine-color-lime-filled);--mantine-color-lime-filled: var(--mantine-color-lime-6);--mantine-color-lime-filled-hover: var(--mantine-color-lime-7);--mantine-color-lime-light: rgba(130, 201, 30, 0.1);--mantine-color-lime-light-hover: rgba(130, 201, 30, 0.12);--mantine-color-lime-light-color: var(--mantine-color-lime-6);--mantine-color-lime-outline: var(--mantine-color-lime-6);--mantine-color-lime-outline-hover: rgba(130, 201, 30, 0.05);--mantine-color-yellow-text: var(--mantine-color-yellow-filled);--mantine-color-yellow-filled: var(--mantine-color-yellow-6);--mantine-color-yellow-filled-hover: var(--mantine-color-yellow-7);--mantine-color-yellow-light: rgba(250, 176, 5, 0.1);--mantine-color-yellow-light-hover: rgba(250, 176, 5, 0.12);--mantine-color-yellow-light-color: var(--mantine-color-yellow-6);--mantine-color-yellow-outline: var(--mantine-color-yellow-6);--mantine-color-yellow-outline-hover: rgba(250, 176, 5, 0.05);--mantine-color-orange-text: var(--mantine-color-orange-filled);--mantine-color-orange-filled: var(--mantine-color-orange-6);--mantine-color-orange-filled-hover: var(--mantine-color-orange-7);--mantine-color-orange-light: rgba(253, 126, 20, 0.1);--mantine-color-orange-light-hover: rgba(253, 126, 20, 0.12);--mantine-color-orange-light-color: var(--mantine-color-orange-6);--mantine-color-orange-outline: var(--mantine-color-orange-6);--mantine-color-orange-outline-hover: rgba(253, 126, 20, 0.05);} #\\:r2p\\:--container\[data-mantine-color-scheme="dark"\] { --mantine-color-scheme: dark; } #\\:r2p\\:--container\[data-mantine-color-scheme="light"\] { --mantine-color-scheme: light; }
|
|
691
|
+
#\\:r3\\:--container{--mantine-z-index-app: 100;--mantine-z-index-modal: 200;--mantine-z-index-popover: 300;--mantine-z-index-overlay: 400;--mantine-z-index-max: 9999;--mantine-scale: 1;--mantine-cursor-type: default;--mantine-webkit-font-smoothing: antialiased;--mantine-moz-font-smoothing: grayscale;--mantine-color-white: #fff;--mantine-color-black: #000;--mantine-line-height: 1.55;--mantine-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;--mantine-font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;--mantine-font-family-headings: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;--mantine-heading-font-weight: 700;--mantine-heading-text-wrap: wrap;--mantine-radius-default: calc(0.25rem \* var(--mantine-scale));--mantine-primary-color-filled: var(--mantine-color-blue-filled);--mantine-primary-color-filled-hover: var(--mantine-color-blue-filled-hover);--mantine-primary-color-light: var(--mantine-color-blue-light);--mantine-primary-color-light-hover: var(--mantine-color-blue-light-hover);--mantine-primary-color-light-color: var(--mantine-color-blue-light-color);--mantine-breakpoint-xs: 36em;--mantine-breakpoint-sm: 48em;--mantine-breakpoint-md: 62em;--mantine-breakpoint-lg: 75em;--mantine-breakpoint-xl: 88em;--mantine-spacing-xs: calc(0.625rem \* var(--mantine-scale));--mantine-spacing-sm: calc(0.75rem \* var(--mantine-scale));--mantine-spacing-md: calc(1rem \* var(--mantine-scale));--mantine-spacing-lg: calc(1.25rem \* var(--mantine-scale));--mantine-spacing-xl: calc(2rem \* var(--mantine-scale));--mantine-font-size-xs: calc(0.75rem \* var(--mantine-scale));--mantine-font-size-sm: calc(0.875rem \* var(--mantine-scale));--mantine-font-size-md: calc(1rem \* var(--mantine-scale));--mantine-font-size-lg: calc(1.125rem \* var(--mantine-scale));--mantine-font-size-xl: calc(1.25rem \* var(--mantine-scale));--mantine-line-height-xs: 1.4;--mantine-line-height-sm: 1.45;--mantine-line-height-md: 1.55;--mantine-line-height-lg: 1.6;--mantine-line-height-xl: 1.65;--mantine-shadow-xs: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.125rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.1);--mantine-shadow-sm: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(0.625rem \* var(--mantine-scale)) calc(0.9375rem \* var(--mantine-scale)) calc(-0.3125rem \* var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.4375rem \* var(--mantine-scale)) calc(0.4375rem \* var(--mantine-scale)) calc(-0.3125rem \* var(--mantine-scale));--mantine-shadow-md: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(1.25rem \* var(--mantine-scale)) calc(1.5625rem \* var(--mantine-scale)) calc(-0.3125rem \* var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.625rem \* var(--mantine-scale)) calc(0.625rem \* var(--mantine-scale)) calc(-0.3125rem \* var(--mantine-scale));--mantine-shadow-lg: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(1.75rem \* var(--mantine-scale)) calc(1.4375rem \* var(--mantine-scale)) calc(-0.4375rem \* var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(0.75rem \* var(--mantine-scale)) calc(0.75rem \* var(--mantine-scale)) calc(-0.4375rem \* var(--mantine-scale));--mantine-shadow-xl: 0 calc(0.0625rem \* var(--mantine-scale)) calc(0.1875rem \* var(--mantine-scale)) rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 calc(2.25rem \* var(--mantine-scale)) calc(1.75rem \* var(--mantine-scale)) calc(-0.4375rem \* var(--mantine-scale)), rgba(0, 0, 0, 0.04) 0 calc(1.0625rem \* var(--mantine-scale)) calc(1.0625rem \* var(--mantine-scale)) calc(-0.4375rem \* var(--mantine-scale));--mantine-radius-xs: calc(0.125rem \* var(--mantine-scale));--mantine-radius-sm: calc(0.25rem \* var(--mantine-scale));--mantine-radius-md: calc(0.5rem \* var(--mantine-scale));--mantine-radius-lg: calc(1rem \* var(--mantine-scale));--mantine-radius-xl: calc(2rem \* var(--mantine-scale));--mantine-primary-color-0: var(--mantine-color-blue-0);--mantine-primary-color-1: var(--mantine-color-blue-1);--mantine-primary-color-2: var(--mantine-color-blue-2);--mantine-primary-color-3: var(--mantine-color-blue-3);--mantine-primary-color-4: var(--mantine-color-blue-4);--mantine-primary-color-5: var(--mantine-color-blue-5);--mantine-primary-color-6: var(--mantine-color-blue-6);--mantine-primary-color-7: var(--mantine-color-blue-7);--mantine-primary-color-8: var(--mantine-color-blue-8);--mantine-primary-color-9: var(--mantine-color-blue-9);--mantine-color-dark-0: #C9C9C9;--mantine-color-dark-1: #b8b8b8;--mantine-color-dark-2: #828282;--mantine-color-dark-3: #696969;--mantine-color-dark-4: #424242;--mantine-color-dark-5: #3b3b3b;--mantine-color-dark-6: #2e2e2e;--mantine-color-dark-7: #242424;--mantine-color-dark-8: #1f1f1f;--mantine-color-dark-9: #141414;--mantine-color-gray-0: #f8f9fa;--mantine-color-gray-1: #f1f3f5;--mantine-color-gray-2: #e9ecef;--mantine-color-gray-3: #dee2e6;--mantine-color-gray-4: #ced4da;--mantine-color-gray-5: #adb5bd;--mantine-color-gray-6: #868e96;--mantine-color-gray-7: #495057;--mantine-color-gray-8: #343a40;--mantine-color-gray-9: #212529;--mantine-color-red-0: #fff5f5;--mantine-color-red-1: #ffe3e3;--mantine-color-red-2: #ffc9c9;--mantine-color-red-3: #ffa8a8;--mantine-color-red-4: #ff8787;--mantine-color-red-5: #ff6b6b;--mantine-color-red-6: #fa5252;--mantine-color-red-7: #f03e3e;--mantine-color-red-8: #e03131;--mantine-color-red-9: #c92a2a;--mantine-color-pink-0: #fff0f6;--mantine-color-pink-1: #ffdeeb;--mantine-color-pink-2: #fcc2d7;--mantine-color-pink-3: #faa2c1;--mantine-color-pink-4: #f783ac;--mantine-color-pink-5: #f06595;--mantine-color-pink-6: #e64980;--mantine-color-pink-7: #d6336c;--mantine-color-pink-8: #c2255c;--mantine-color-pink-9: #a61e4d;--mantine-color-grape-0: #f8f0fc;--mantine-color-grape-1: #f3d9fa;--mantine-color-grape-2: #eebefa;--mantine-color-grape-3: #e599f7;--mantine-color-grape-4: #da77f2;--mantine-color-grape-5: #cc5de8;--mantine-color-grape-6: #be4bdb;--mantine-color-grape-7: #ae3ec9;--mantine-color-grape-8: #9c36b5;--mantine-color-grape-9: #862e9c;--mantine-color-violet-0: #f3f0ff;--mantine-color-violet-1: #e5dbff;--mantine-color-violet-2: #d0bfff;--mantine-color-violet-3: #b197fc;--mantine-color-violet-4: #9775fa;--mantine-color-violet-5: #845ef7;--mantine-color-violet-6: #7950f2;--mantine-color-violet-7: #7048e8;--mantine-color-violet-8: #6741d9;--mantine-color-violet-9: #5f3dc4;--mantine-color-indigo-0: #edf2ff;--mantine-color-indigo-1: #dbe4ff;--mantine-color-indigo-2: #bac8ff;--mantine-color-indigo-3: #91a7ff;--mantine-color-indigo-4: #748ffc;--mantine-color-indigo-5: #5c7cfa;--mantine-color-indigo-6: #4c6ef5;--mantine-color-indigo-7: #4263eb;--mantine-color-indigo-8: #3b5bdb;--mantine-color-indigo-9: #364fc7;--mantine-color-blue-0: #e7f5ff;--mantine-color-blue-1: #d0ebff;--mantine-color-blue-2: #a5d8ff;--mantine-color-blue-3: #74c0fc;--mantine-color-blue-4: #4dabf7;--mantine-color-blue-5: #339af0;--mantine-color-blue-6: #228be6;--mantine-color-blue-7: #1c7ed6;--mantine-color-blue-8: #1971c2;--mantine-color-blue-9: #1864ab;--mantine-color-cyan-0: #e3fafc;--mantine-color-cyan-1: #c5f6fa;--mantine-color-cyan-2: #99e9f2;--mantine-color-cyan-3: #66d9e8;--mantine-color-cyan-4: #3bc9db;--mantine-color-cyan-5: #22b8cf;--mantine-color-cyan-6: #15aabf;--mantine-color-cyan-7: #1098ad;--mantine-color-cyan-8: #0c8599;--mantine-color-cyan-9: #0b7285;--mantine-color-teal-0: #e6fcf5;--mantine-color-teal-1: #c3fae8;--mantine-color-teal-2: #96f2d7;--mantine-color-teal-3: #63e6be;--mantine-color-teal-4: #38d9a9;--mantine-color-teal-5: #20c997;--mantine-color-teal-6: #12b886;--mantine-color-teal-7: #0ca678;--mantine-color-teal-8: #099268;--mantine-color-teal-9: #087f5b;--mantine-color-green-0: #ebfbee;--mantine-color-green-1: #d3f9d8;--mantine-color-green-2: #b2f2bb;--mantine-color-green-3: #8ce99a;--mantine-color-green-4: #69db7c;--mantine-color-green-5: #51cf66;--mantine-color-green-6: #40c057;--mantine-color-green-7: #37b24d;--mantine-color-green-8: #2f9e44;--mantine-color-green-9: #2b8a3e;--mantine-color-lime-0: #f4fce3;--mantine-color-lime-1: #e9fac8;--mantine-color-lime-2: #d8f5a2;--mantine-color-lime-3: #c0eb75;--mantine-color-lime-4: #a9e34b;--mantine-color-lime-5: #94d82d;--mantine-color-lime-6: #82c91e;--mantine-color-lime-7: #74b816;--mantine-color-lime-8: #66a80f;--mantine-color-lime-9: #5c940d;--mantine-color-yellow-0: #fff9db;--mantine-color-yellow-1: #fff3bf;--mantine-color-yellow-2: #ffec99;--mantine-color-yellow-3: #ffe066;--mantine-color-yellow-4: #ffd43b;--mantine-color-yellow-5: #fcc419;--mantine-color-yellow-6: #fab005;--mantine-color-yellow-7: #f59f00;--mantine-color-yellow-8: #f08c00;--mantine-color-yellow-9: #e67700;--mantine-color-orange-0: #fff4e6;--mantine-color-orange-1: #ffe8cc;--mantine-color-orange-2: #ffd8a8;--mantine-color-orange-3: #ffc078;--mantine-color-orange-4: #ffa94d;--mantine-color-orange-5: #ff922b;--mantine-color-orange-6: #fd7e14;--mantine-color-orange-7: #f76707;--mantine-color-orange-8: #e8590c;--mantine-color-orange-9: #d9480f;--mantine-h1-font-size: calc(2.125rem \* var(--mantine-scale));--mantine-h1-line-height: 1.3;--mantine-h1-font-weight: 700;--mantine-h2-font-size: calc(1.625rem \* var(--mantine-scale));--mantine-h2-line-height: 1.35;--mantine-h2-font-weight: 700;--mantine-h3-font-size: calc(1.375rem \* var(--mantine-scale));--mantine-h3-line-height: 1.4;--mantine-h3-font-weight: 700;--mantine-h4-font-size: calc(1.125rem \* var(--mantine-scale));--mantine-h4-line-height: 1.45;--mantine-h4-font-weight: 700;--mantine-h5-font-size: calc(1rem \* var(--mantine-scale));--mantine-h5-line-height: 1.5;--mantine-h5-font-weight: 700;--mantine-h6-font-size: calc(0.875rem \* var(--mantine-scale));--mantine-h6-line-height: 1.5;--mantine-h6-font-weight: 700;} #\\:r3\\:--container\[data-mantine-color-scheme="dark"\]{--mantine-color-scheme: dark;--mantine-primary-color-contrast: var(--mantine-color-white);--mantine-color-bright: var(--mantine-color-white);--mantine-color-text: var(--mantine-color-dark-0);--mantine-color-body: var(--mantine-color-dark-7);--mantine-color-error: var(--mantine-color-red-8);--mantine-color-placeholder: var(--mantine-color-dark-3);--mantine-color-anchor: var(--mantine-color-blue-4);--mantine-color-default: var(--mantine-color-dark-6);--mantine-color-default-hover: var(--mantine-color-dark-5);--mantine-color-default-color: var(--mantine-color-white);--mantine-color-default-border: var(--mantine-color-dark-4);--mantine-color-dimmed: var(--mantine-color-dark-2);--mantine-color-disabled: var(--mantine-color-dark-6);--mantine-color-disabled-color: var(--mantine-color-dark-3);--mantine-color-disabled-border: var(--mantine-color-dark-4);--mantine-color-dark-text: var(--mantine-color-dark-4);--mantine-color-dark-filled: var(--mantine-color-dark-8);--mantine-color-dark-filled-hover: var(--mantine-color-dark-9);--mantine-color-dark-light: rgba(46, 46, 46, 0.15);--mantine-color-dark-light-hover: rgba(46, 46, 46, 0.2);--mantine-color-dark-light-color: var(--mantine-color-dark-3);--mantine-color-dark-outline: var(--mantine-color-dark-4);--mantine-color-dark-outline-hover: rgba(66, 66, 66, 0.05);--mantine-color-gray-text: var(--mantine-color-gray-4);--mantine-color-gray-filled: var(--mantine-color-gray-8);--mantine-color-gray-filled-hover: var(--mantine-color-gray-9);--mantine-color-gray-light: rgba(134, 142, 150, 0.15);--mantine-color-gray-light-hover: rgba(134, 142, 150, 0.2);--mantine-color-gray-light-color: var(--mantine-color-gray-3);--mantine-color-gray-outline: var(--mantine-color-gray-4);--mantine-color-gray-outline-hover: rgba(206, 212, 218, 0.05);--mantine-color-red-text: var(--mantine-color-red-4);--mantine-color-red-filled: var(--mantine-color-red-8);--mantine-color-red-filled-hover: var(--mantine-color-red-9);--mantine-color-red-light: rgba(250, 82, 82, 0.15);--mantine-color-red-light-hover: rgba(250, 82, 82, 0.2);--mantine-color-red-light-color: var(--mantine-color-red-3);--mantine-color-red-outline: var(--mantine-color-red-4);--mantine-color-red-outline-hover: rgba(255, 135, 135, 0.05);--mantine-color-pink-text: var(--mantine-color-pink-4);--mantine-color-pink-filled: var(--mantine-color-pink-8);--mantine-color-pink-filled-hover: var(--mantine-color-pink-9);--mantine-color-pink-light: rgba(230, 73, 128, 0.15);--mantine-color-pink-light-hover: rgba(230, 73, 128, 0.2);--mantine-color-pink-light-color: var(--mantine-color-pink-3);--mantine-color-pink-outline: var(--mantine-color-pink-4);--mantine-color-pink-outline-hover: rgba(247, 131, 172, 0.05);--mantine-color-grape-text: var(--mantine-color-grape-4);--mantine-color-grape-filled: var(--mantine-color-grape-8);--mantine-color-grape-filled-hover: var(--mantine-color-grape-9);--mantine-color-grape-light: rgba(190, 75, 219, 0.15);--mantine-color-grape-light-hover: rgba(190, 75, 219, 0.2);--mantine-color-grape-light-color: var(--mantine-color-grape-3);--mantine-color-grape-outline: var(--mantine-color-grape-4);--mantine-color-grape-outline-hover: rgba(218, 119, 242, 0.05);--mantine-color-violet-text: var(--mantine-color-violet-4);--mantine-color-violet-filled: var(--mantine-color-violet-8);--mantine-color-violet-filled-hover: var(--mantine-color-violet-9);--mantine-color-violet-light: rgba(121, 80, 242, 0.15);--mantine-color-violet-light-hover: rgba(121, 80, 242, 0.2);--mantine-color-violet-light-color: var(--mantine-color-violet-3);--mantine-color-violet-outline: var(--mantine-color-violet-4);--mantine-color-violet-outline-hover: rgba(151, 117, 250, 0.05);--mantine-color-indigo-text: var(--mantine-color-indigo-4);--mantine-color-indigo-filled: var(--mantine-color-indigo-8);--mantine-color-indigo-filled-hover: var(--mantine-color-indigo-9);--mantine-color-indigo-light: rgba(76, 110, 245, 0.15);--mantine-color-indigo-light-hover: rgba(76, 110, 245, 0.2);--mantine-color-indigo-light-color: var(--mantine-color-indigo-3);--mantine-color-indigo-outline: var(--mantine-color-indigo-4);--mantine-color-indigo-outline-hover: rgba(116, 143, 252, 0.05);--mantine-color-blue-text: var(--mantine-color-blue-4);--mantine-color-blue-filled: var(--mantine-color-blue-8);--mantine-color-blue-filled-hover: var(--mantine-color-blue-9);--mantine-color-blue-light: rgba(34, 139, 230, 0.15);--mantine-color-blue-light-hover: rgba(34, 139, 230, 0.2);--mantine-color-blue-light-color: var(--mantine-color-blue-3);--mantine-color-blue-outline: var(--mantine-color-blue-4);--mantine-color-blue-outline-hover: rgba(77, 171, 247, 0.05);--mantine-color-cyan-text: var(--mantine-color-cyan-4);--mantine-color-cyan-filled: var(--mantine-color-cyan-8);--mantine-color-cyan-filled-hover: var(--mantine-color-cyan-9);--mantine-color-cyan-light: rgba(21, 170, 191, 0.15);--mantine-color-cyan-light-hover: rgba(21, 170, 191, 0.2);--mantine-color-cyan-light-color: var(--mantine-color-cyan-3);--mantine-color-cyan-outline: var(--mantine-color-cyan-4);--mantine-color-cyan-outline-hover: rgba(59, 201, 219, 0.05);--mantine-color-teal-text: var(--mantine-color-teal-4);--mantine-color-teal-filled: var(--mantine-color-teal-8);--mantine-color-teal-filled-hover: var(--mantine-color-teal-9);--mantine-color-teal-light: rgba(18, 184, 134, 0.15);--mantine-color-teal-light-hover: rgba(18, 184, 134, 0.2);--mantine-color-teal-light-color: var(--mantine-color-teal-3);--mantine-color-teal-outline: var(--mantine-color-teal-4);--mantine-color-teal-outline-hover: rgba(56, 217, 169, 0.05);--mantine-color-green-text: var(--mantine-color-green-4);--mantine-color-green-filled: var(--mantine-color-green-8);--mantine-color-green-filled-hover: var(--mantine-color-green-9);--mantine-color-green-light: rgba(64, 192, 87, 0.15);--mantine-color-green-light-hover: rgba(64, 192, 87, 0.2);--mantine-color-green-light-color: var(--mantine-color-green-3);--mantine-color-green-outline: var(--mantine-color-green-4);--mantine-color-green-outline-hover: rgba(105, 219, 124, 0.05);--mantine-color-lime-text: var(--mantine-color-lime-4);--mantine-color-lime-filled: var(--mantine-color-lime-8);--mantine-color-lime-filled-hover: var(--mantine-color-lime-9);--mantine-color-lime-light: rgba(130, 201, 30, 0.15);--mantine-color-lime-light-hover: rgba(130, 201, 30, 0.2);--mantine-color-lime-light-color: var(--mantine-color-lime-3);--mantine-color-lime-outline: var(--mantine-color-lime-4);--mantine-color-lime-outline-hover: rgba(169, 227, 75, 0.05);--mantine-color-yellow-text: var(--mantine-color-yellow-4);--mantine-color-yellow-filled: var(--mantine-color-yellow-8);--mantine-color-yellow-filled-hover: var(--mantine-color-yellow-9);--mantine-color-yellow-light: rgba(250, 176, 5, 0.15);--mantine-color-yellow-light-hover: rgba(250, 176, 5, 0.2);--mantine-color-yellow-light-color: var(--mantine-color-yellow-3);--mantine-color-yellow-outline: var(--mantine-color-yellow-4);--mantine-color-yellow-outline-hover: rgba(255, 212, 59, 0.05);--mantine-color-orange-text: var(--mantine-color-orange-4);--mantine-color-orange-filled: var(--mantine-color-orange-8);--mantine-color-orange-filled-hover: var(--mantine-color-orange-9);--mantine-color-orange-light: rgba(253, 126, 20, 0.15);--mantine-color-orange-light-hover: rgba(253, 126, 20, 0.2);--mantine-color-orange-light-color: var(--mantine-color-orange-3);--mantine-color-orange-outline: var(--mantine-color-orange-4);--mantine-color-orange-outline-hover: rgba(255, 169, 77, 0.05);} #\\:r3\\:--container\[data-mantine-color-scheme="light"\]{--mantine-color-scheme: light;--mantine-primary-color-contrast: var(--mantine-color-white);--mantine-color-bright: var(--mantine-color-black);--mantine-color-text: #000;--mantine-color-body: #fff;--mantine-color-error: var(--mantine-color-red-6);--mantine-color-placeholder: var(--mantine-color-gray-5);--mantine-color-anchor: var(--mantine-color-blue-6);--mantine-color-default: var(--mantine-color-white);--mantine-color-default-hover: var(--mantine-color-gray-0);--mantine-color-default-color: var(--mantine-color-black);--mantine-color-default-border: var(--mantine-color-gray-4);--mantine-color-dimmed: var(--mantine-color-gray-6);--mantine-color-disabled: var(--mantine-color-gray-2);--mantine-color-disabled-color: var(--mantine-color-gray-5);--mantine-color-disabled-border: var(--mantine-color-gray-3);--mantine-color-dark-text: var(--mantine-color-dark-filled);--mantine-color-dark-filled: var(--mantine-color-dark-6);--mantine-color-dark-filled-hover: var(--mantine-color-dark-7);--mantine-color-dark-light: rgba(46, 46, 46, 0.1);--mantine-color-dark-light-hover: rgba(46, 46, 46, 0.12);--mantine-color-dark-light-color: var(--mantine-color-dark-6);--mantine-color-dark-outline: var(--mantine-color-dark-6);--mantine-color-dark-outline-hover: rgba(46, 46, 46, 0.05);--mantine-color-gray-text: var(--mantine-color-gray-filled);--mantine-color-gray-filled: var(--mantine-color-gray-6);--mantine-color-gray-filled-hover: var(--mantine-color-gray-7);--mantine-color-gray-light: rgba(134, 142, 150, 0.1);--mantine-color-gray-light-hover: rgba(134, 142, 150, 0.12);--mantine-color-gray-light-color: var(--mantine-color-gray-6);--mantine-color-gray-outline: var(--mantine-color-gray-6);--mantine-color-gray-outline-hover: rgba(134, 142, 150, 0.05);--mantine-color-red-text: var(--mantine-color-red-filled);--mantine-color-red-filled: var(--mantine-color-red-6);--mantine-color-red-filled-hover: var(--mantine-color-red-7);--mantine-color-red-light: rgba(250, 82, 82, 0.1);--mantine-color-red-light-hover: rgba(250, 82, 82, 0.12);--mantine-color-red-light-color: var(--mantine-color-red-6);--mantine-color-red-outline: var(--mantine-color-red-6);--mantine-color-red-outline-hover: rgba(250, 82, 82, 0.05);--mantine-color-pink-text: var(--mantine-color-pink-filled);--mantine-color-pink-filled: var(--mantine-color-pink-6);--mantine-color-pink-filled-hover: var(--mantine-color-pink-7);--mantine-color-pink-light: rgba(230, 73, 128, 0.1);--mantine-color-pink-light-hover: rgba(230, 73, 128, 0.12);--mantine-color-pink-light-color: var(--mantine-color-pink-6);--mantine-color-pink-outline: var(--mantine-color-pink-6);--mantine-color-pink-outline-hover: rgba(230, 73, 128, 0.05);--mantine-color-grape-text: var(--mantine-color-grape-filled);--mantine-color-grape-filled: var(--mantine-color-grape-6);--mantine-color-grape-filled-hover: var(--mantine-color-grape-7);--mantine-color-grape-light: rgba(190, 75, 219, 0.1);--mantine-color-grape-light-hover: rgba(190, 75, 219, 0.12);--mantine-color-grape-light-color: var(--mantine-color-grape-6);--mantine-color-grape-outline: var(--mantine-color-grape-6);--mantine-color-grape-outline-hover: rgba(190, 75, 219, 0.05);--mantine-color-violet-text: var(--mantine-color-violet-filled);--mantine-color-violet-filled: var(--mantine-color-violet-6);--mantine-color-violet-filled-hover: var(--mantine-color-violet-7);--mantine-color-violet-light: rgba(121, 80, 242, 0.1);--mantine-color-violet-light-hover: rgba(121, 80, 242, 0.12);--mantine-color-violet-light-color: var(--mantine-color-violet-6);--mantine-color-violet-outline: var(--mantine-color-violet-6);--mantine-color-violet-outline-hover: rgba(121, 80, 242, 0.05);--mantine-color-indigo-text: var(--mantine-color-indigo-filled);--mantine-color-indigo-filled: var(--mantine-color-indigo-6);--mantine-color-indigo-filled-hover: var(--mantine-color-indigo-7);--mantine-color-indigo-light: rgba(76, 110, 245, 0.1);--mantine-color-indigo-light-hover: rgba(76, 110, 245, 0.12);--mantine-color-indigo-light-color: var(--mantine-color-indigo-6);--mantine-color-indigo-outline: var(--mantine-color-indigo-6);--mantine-color-indigo-outline-hover: rgba(76, 110, 245, 0.05);--mantine-color-blue-text: var(--mantine-color-blue-filled);--mantine-color-blue-filled: var(--mantine-color-blue-6);--mantine-color-blue-filled-hover: var(--mantine-color-blue-7);--mantine-color-blue-light: rgba(34, 139, 230, 0.1);--mantine-color-blue-light-hover: rgba(34, 139, 230, 0.12);--mantine-color-blue-light-color: var(--mantine-color-blue-6);--mantine-color-blue-outline: var(--mantine-color-blue-6);--mantine-color-blue-outline-hover: rgba(34, 139, 230, 0.05);--mantine-color-cyan-text: var(--mantine-color-cyan-filled);--mantine-color-cyan-filled: var(--mantine-color-cyan-6);--mantine-color-cyan-filled-hover: var(--mantine-color-cyan-7);--mantine-color-cyan-light: rgba(21, 170, 191, 0.1);--mantine-color-cyan-light-hover: rgba(21, 170, 191, 0.12);--mantine-color-cyan-light-color: var(--mantine-color-cyan-6);--mantine-color-cyan-outline: var(--mantine-color-cyan-6);--mantine-color-cyan-outline-hover: rgba(21, 170, 191, 0.05);--mantine-color-teal-text: var(--mantine-color-teal-filled);--mantine-color-teal-filled: var(--mantine-color-teal-6);--mantine-color-teal-filled-hover: var(--mantine-color-teal-7);--mantine-color-teal-light: rgba(18, 184, 134, 0.1);--mantine-color-teal-light-hover: rgba(18, 184, 134, 0.12);--mantine-color-teal-light-color: var(--mantine-color-teal-6);--mantine-color-teal-outline: var(--mantine-color-teal-6);--mantine-color-teal-outline-hover: rgba(18, 184, 134, 0.05);--mantine-color-green-text: var(--mantine-color-green-filled);--mantine-color-green-filled: var(--mantine-color-green-6);--mantine-color-green-filled-hover: var(--mantine-color-green-7);--mantine-color-green-light: rgba(64, 192, 87, 0.1);--mantine-color-green-light-hover: rgba(64, 192, 87, 0.12);--mantine-color-green-light-color: var(--mantine-color-green-6);--mantine-color-green-outline: var(--mantine-color-green-6);--mantine-color-green-outline-hover: rgba(64, 192, 87, 0.05);--mantine-color-lime-text: var(--mantine-color-lime-filled);--mantine-color-lime-filled: var(--mantine-color-lime-6);--mantine-color-lime-filled-hover: var(--mantine-color-lime-7);--mantine-color-lime-light: rgba(130, 201, 30, 0.1);--mantine-color-lime-light-hover: rgba(130, 201, 30, 0.12);--mantine-color-lime-light-color: var(--mantine-color-lime-6);--mantine-color-lime-outline: var(--mantine-color-lime-6);--mantine-color-lime-outline-hover: rgba(130, 201, 30, 0.05);--mantine-color-yellow-text: var(--mantine-color-yellow-filled);--mantine-color-yellow-filled: var(--mantine-color-yellow-6);--mantine-color-yellow-filled-hover: var(--mantine-color-yellow-7);--mantine-color-yellow-light: rgba(250, 176, 5, 0.1);--mantine-color-yellow-light-hover: rgba(250, 176, 5, 0.12);--mantine-color-yellow-light-color: var(--mantine-color-yellow-6);--mantine-color-yellow-outline: var(--mantine-color-yellow-6);--mantine-color-yellow-outline-hover: rgba(250, 176, 5, 0.05);--mantine-color-orange-text: var(--mantine-color-orange-filled);--mantine-color-orange-filled: var(--mantine-color-orange-6);--mantine-color-orange-filled-hover: var(--mantine-color-orange-7);--mantine-color-orange-light: rgba(253, 126, 20, 0.1);--mantine-color-orange-light-hover: rgba(253, 126, 20, 0.12);--mantine-color-orange-light-color: var(--mantine-color-orange-6);--mantine-color-orange-outline: var(--mantine-color-orange-6);--mantine-color-orange-outline-hover: rgba(253, 126, 20, 0.05);} #\\:r3\\:--container\[data-mantine-color-scheme="dark"\] { --mantine-color-scheme: dark; } #\\:r3\\:--container\[data-mantine-color-scheme="light"\] { --mantine-color-scheme: light; }
|
|
227
692
|
|
|
228
693
|
This is the hook editor
|
|
229
694
|
-----------------------
|
|
@@ -275,13 +740,441 @@ export const HookEditorExample \= () \=> {
|
|
|
275
740
|
|
|
276
741
|
Copy
|
|
277
742
|
|
|
743
|
+
#### [](#hook-editor-api)Props
|
|
744
|
+
|
|
745
|
+
| Name | Description | Default | Control |
|
|
746
|
+
| --- | --- | --- | --- |
|
|
747
|
+
| bg |
|
|
748
|
+
**`bg`** sets the background color of an element using the `background-color` css property using the color tokens in the design system.
|
|
749
|
+
|
|
750
|
+
We recommend using the following token values for best background contrast:
|
|
751
|
+
|
|
752
|
+
* `colour.primary.fill` for primary backgrounds that need to stand out
|
|
753
|
+
* `colour.primary.surface` for primary backgrounds that need to be less prominent
|
|
754
|
+
* `colour.neutral.10` for the base background color, normally white in light mode or shade of grey in dark mode
|
|
755
|
+
* `colour.neutral.20` for a slightly darker background color, used in neutral state components
|
|
756
|
+
* `colour.system.danger.fill` for error backgrounds that need to stand out
|
|
757
|
+
* `colour.system.danger.surface` for error backgrounds that need to be less prominent
|
|
758
|
+
* `colour.system.success.fill` for success backgrounds that need to stand out
|
|
759
|
+
* `colour.system.success.surface` for success backgrounds that need to be less prominent
|
|
760
|
+
* `colour.system.warning.fill` for warning backgrounds that need to stand out
|
|
761
|
+
* `colour.system.warning.surface` for warning backgrounds that need to be less prominent
|
|
762
|
+
* `colour.system.info.fill` for info backgrounds that need to stand out
|
|
763
|
+
* `colour.system.info.surface` for info backgrounds that need to be less prominent
|
|
764
|
+
|
|
765
|
+
ResponsiveProp<ColorToken> | undefined
|
|
766
|
+
|
|
767
|
+
| \- | Set object |
|
|
768
|
+
| borderRadius |
|
|
769
|
+
|
|
770
|
+
The **`border-radius`** CSS property rounds the corners of an element's outer border edge using the radius tokens in the design system.
|
|
771
|
+
|
|
772
|
+
| Chrome | Firefox | Safari | Edge | IE |
|
|
773
|
+
| --- | --- | --- | --- | --- |
|
|
774
|
+
| **4** | **4** | **5** | **12** | **9** |
|
|
775
|
+
| 1 _\-x-_ | | 3 _\-x-_ | | |
|
|
776
|
+
|
|
777
|
+
ResponsiveProp<RadiusToken> | undefined
|
|
778
|
+
|
|
779
|
+
| \- | Set object |
|
|
780
|
+
| children |
|
|
781
|
+
|
|
782
|
+
Content to be grouped using a panel.
|
|
783
|
+
|
|
784
|
+
ReactNode
|
|
785
|
+
|
|
786
|
+
|
|
787
|
+
|
|
788
|
+
| \- | Set object |
|
|
789
|
+
| color |
|
|
790
|
+
|
|
791
|
+
The **`color`** CSS property sets the foreground color value of an element's text and text decorations using the colour tokens from the design system. It also sets the `currentcolor` value. `currentcolor` may be used as an indirect value on _other_ properties and is the default for other color properties, such as `border-color`.
|
|
792
|
+
|
|
793
|
+
We recommend using the following token values for best color contrast:
|
|
794
|
+
|
|
795
|
+
* `colour.primary.onFill` used on top of `colour.primary.fill` for primary text that needs to stand out
|
|
796
|
+
* `colour.primary.text` used on top of `colour.primary.surface` or `colour.neutral.10` for primary text that needs to be less prominent
|
|
797
|
+
* `colour.neutral.70` used on top of `colour.neutral.10` or `colour.neutral.20` for muted text
|
|
798
|
+
* `colour.neutral.80` used on top of `colour.neutral.10` or `colour.neutral.20` for standard text
|
|
799
|
+
* `colour.system.danger.onFill` used on top of `colour.system.danger.fill` for error text that needs to stand out
|
|
800
|
+
* `colour.system.danger.text` used on top of `colour.system.danger.surface` for error text that needs to be less prominent
|
|
801
|
+
* `colour.system.success.onFill` used on top of `colour.system.success.fill` for success text that needs to stand out
|
|
802
|
+
* `colour.system.success.text` used on top of `colour.system.success.surface` for success text that needs to be less prominent
|
|
803
|
+
* `colour.system.warning.onFill` used on top of `colour.system.warning.fill` for warning text that needs to stand out
|
|
804
|
+
* `colour.system.warning.text` used on top of `colour.system.warning.surface` for warning text that needs to be less prominent
|
|
805
|
+
* `colour.system.info.onFill` used on top of `colour.system.info.fill` for informative text that needs to stand out
|
|
806
|
+
* `colour.system.info.text` used on top of `colour.system.info.surface` for informative text that needs to be less prominent
|
|
807
|
+
|
|
808
|
+
ResponsiveProp<ColorToken> | undefined
|
|
809
|
+
|
|
810
|
+
| \- | Set object |
|
|
811
|
+
| editor\* |
|
|
812
|
+
|
|
813
|
+
The editor instance to use. This allows you to have complete control over the editor instance.
|
|
814
|
+
|
|
815
|
+
[Learn more about the editor instance](https://tiptap.dev/docs/editor/api/editor).
|
|
816
|
+
|
|
817
|
+
Editornull
|
|
818
|
+
|
|
819
|
+
|
|
820
|
+
|
|
821
|
+
| \- | Set object |
|
|
822
|
+
| focusable |
|
|
823
|
+
|
|
824
|
+
The `focusable` prop is used to apply the focus elevation when focused. It can be set to `true` to apply focus styles on focus, or `'within'` to apply focus styles when the element or any of its children are focused.
|
|
825
|
+
|
|
826
|
+
"true""within"undefined
|
|
827
|
+
|
|
828
|
+
|
|
829
|
+
|
|
830
|
+
| \- | Set object |
|
|
831
|
+
| hide |
|
|
832
|
+
|
|
833
|
+
Set **`hide`** to hide an element completely using `display: none`. It can also be set to an object of breakpoints to hide the element at specific breakpoints.
|
|
834
|
+
|
|
835
|
+
Hide on all breakpoints: `hide: true` Hide on specific breakpoints: `hide: { xs: false, sm: true, md: false, lg: true, xl: false, xxl: true }`
|
|
836
|
+
|
|
837
|
+
Notes:
|
|
838
|
+
|
|
839
|
+
* If you need to hide an element but allow it to be visible to screen readers, use the `srOnly` prop instead.
|
|
840
|
+
* Consider if you can conditionally render the element instead of hiding it.
|
|
841
|
+
|
|
842
|
+
ResponsiveProp<boolean> | undefined
|
|
843
|
+
|
|
844
|
+
| \- | Set object |
|
|
845
|
+
| layerStyle |
|
|
846
|
+
|
|
847
|
+
Elevate a layer by using a **`layerStyle`**. These are connected to the elevation tokens in the design system. They can be combined to create hierarchy and structure.
|
|
848
|
+
|
|
849
|
+
* `elevation.raised`: Raised elevations sit slightly higher than other content. They are reserved for cards that can be moved, such as Jira issue cards and Trello cards. In special circumstances, they can be used for cards as a way to provide additional heirarchy or emphasis.
|
|
850
|
+
* `elevation.floating`: Floating is the highest elevation available. It is reserved for a UI that sits over another UI, such as modals, dialogs, dropdown menus, floating toolbars, and floating single-action buttons.
|
|
851
|
+
* `elevation.overflow`: Overflow is a shadow indicating content has scrolled outside a view. It can be used for vertical or horizontal scroll. An example of overflow shadows is the horizontal scroll in tables on a Confluence page.
|
|
852
|
+
|
|
853
|
+
ResponsiveProp<"elevation.raised" | "elevation.floating" | "elevation.overflow" | "elevation.focus" | "elevation.focusCompact"> | undefined
|
|
854
|
+
|
|
855
|
+
| \- | Set object |
|
|
856
|
+
| m |
|
|
857
|
+
|
|
858
|
+
The **`m`** property is short for `margin`, and sets the margin area on all four sides of an element.
|
|
859
|
+
|
|
860
|
+
It uses the spacing tokens in the design system. You can also use the negative values to overlap elements or ignore padding based on the design requirements.
|
|
861
|
+
|
|
862
|
+
| Chrome | Firefox | Safari | Edge | IE |
|
|
863
|
+
| --- | --- | --- | --- | --- |
|
|
864
|
+
| **1** | **1** | **1** | **12** | **3** |
|
|
865
|
+
|
|
866
|
+
ResponsiveProp<"auto" | SpacingToken> | undefined
|
|
867
|
+
|
|
868
|
+
| \- | Set object |
|
|
869
|
+
| maxWidth |
|
|
870
|
+
|
|
871
|
+
The **`max-width`** CSS property sets the maximum width of an element. It prevents the used value of the `width` property from becoming larger than the value specified by `max-width`.
|
|
872
|
+
|
|
873
|
+
| Chrome | Firefox | Safari | Edge | IE |
|
|
874
|
+
| --- | --- | --- | --- | --- |
|
|
875
|
+
| **1** | **1** | **1** | **12** | **7** |
|
|
876
|
+
|
|
877
|
+
ResponsiveProp<"auto" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | ... 6 more ... | SizeToken> | undefined
|
|
878
|
+
|
|
879
|
+
| \- | Set object |
|
|
880
|
+
| mb |
|
|
881
|
+
|
|
882
|
+
The **`mb`** property is short for `margin-bottom` and sets the margin area on the bottom side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
|
|
883
|
+
|
|
884
|
+
It uses the spacing tokens in the design system.
|
|
885
|
+
|
|
886
|
+
| Chrome | Firefox | Safari | Edge | IE |
|
|
887
|
+
| --- | --- | --- | --- | --- |
|
|
888
|
+
| **1** | **1** | **1** | **12** | **3** |
|
|
889
|
+
|
|
890
|
+
ResponsiveProp<"auto" | SpacingToken> | undefined
|
|
891
|
+
|
|
892
|
+
| \- | Set object |
|
|
893
|
+
| ml |
|
|
894
|
+
|
|
895
|
+
The **`ml`** property is short for `margin-left` and sets the margin area on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
|
|
896
|
+
|
|
897
|
+
It uses the spacing tokens in the design system.
|
|
898
|
+
|
|
899
|
+
| Chrome | Firefox | Safari | Edge | IE |
|
|
900
|
+
| --- | --- | --- | --- | --- |
|
|
901
|
+
| **1** | **1** | **1** | **12** | **3** |
|
|
902
|
+
|
|
903
|
+
ResponsiveProp<"auto" | SpacingToken> | undefined
|
|
904
|
+
|
|
905
|
+
| \- | Set object |
|
|
906
|
+
| mr |
|
|
907
|
+
|
|
908
|
+
The **`mr`** property is short for `margin-right` and sets the margin area on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
|
|
909
|
+
|
|
910
|
+
It uses the spacing tokens in the design system.
|
|
911
|
+
|
|
912
|
+
| Chrome | Firefox | Safari | Edge | IE |
|
|
913
|
+
| --- | --- | --- | --- | --- |
|
|
914
|
+
| **1** | **1** | **1** | **12** | **3** |
|
|
915
|
+
|
|
916
|
+
ResponsiveProp<"auto" | SpacingToken> | undefined
|
|
917
|
+
|
|
918
|
+
| \- | Set object |
|
|
919
|
+
| mt |
|
|
920
|
+
|
|
921
|
+
The **`mt`** property is short for `margin-top` and sets the margin area on the top side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
|
|
922
|
+
|
|
923
|
+
It uses the spacing tokens in the design system.
|
|
924
|
+
|
|
925
|
+
| Chrome | Firefox | Safari | Edge | IE |
|
|
926
|
+
| --- | --- | --- | --- | --- |
|
|
927
|
+
| **1** | **1** | **1** | **12** | **3** |
|
|
928
|
+
|
|
929
|
+
ResponsiveProp<"auto" | SpacingToken> | undefined
|
|
930
|
+
|
|
931
|
+
| \- | Set object |
|
|
932
|
+
| mx |
|
|
933
|
+
|
|
934
|
+
The **`mx`** property is short for `margin-inline`. It is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
|
|
935
|
+
|
|
936
|
+
It uses the spacing tokens in the design system. You can also use the negative values to overlap elements or ignore padding based on the design requirements.
|
|
937
|
+
|
|
938
|
+
| Chrome | Firefox | Safari | Edge | IE |
|
|
939
|
+
| --- | --- | --- | --- | --- |
|
|
940
|
+
| **1** | **1** | **1** | **12** | **3** |
|
|
941
|
+
|
|
942
|
+
ResponsiveProp<"auto" | SpacingToken> | undefined
|
|
943
|
+
|
|
944
|
+
| \- | Set object |
|
|
945
|
+
| my |
|
|
946
|
+
|
|
947
|
+
The **`my`** property is short for `margin-block`. It defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
|
|
948
|
+
|
|
949
|
+
It uses the spacing tokens in the design system. You can also use the negative values to overlap elements or ignore padding based on the design requirements.
|
|
950
|
+
|
|
951
|
+
| Chrome | Firefox | Safari | Edge | IE |
|
|
952
|
+
| --- | --- | --- | --- | --- |
|
|
953
|
+
| **1** | **1** | **1** | **12** | **3** |
|
|
954
|
+
|
|
955
|
+
ResponsiveProp<"auto" | SpacingToken> | undefined
|
|
956
|
+
|
|
957
|
+
| \- | Set object |
|
|
958
|
+
| name |
|
|
959
|
+
|
|
960
|
+
If provided, a hidden input with this name will be rendered with the editor's value.
|
|
961
|
+
|
|
962
|
+
stringundefined
|
|
963
|
+
|
|
964
|
+
|
|
965
|
+
|
|
966
|
+
| \- | Set object |
|
|
967
|
+
| noBorderRadius |
|
|
968
|
+
|
|
969
|
+
Setting to true will ignore the border radius set in the theme and set it to zero.
|
|
970
|
+
|
|
971
|
+
booleanundefined
|
|
972
|
+
|
|
973
|
+
<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `borderRadius="none"` instead.</td></tr></tbody></table>
|
|
974
|
+
|
|
975
|
+
| \- | Set object |
|
|
976
|
+
| noGutter |
|
|
977
|
+
|
|
978
|
+
The **`noGutter`** property is used to remove the bottom margin from the last child of a component. This is useful when you want to avoid extra spacing at the end of a layout.
|
|
979
|
+
|
|
980
|
+
booleanundefined
|
|
981
|
+
|
|
982
|
+
|
|
983
|
+
|
|
984
|
+
| \- | Set object |
|
|
985
|
+
| p |
|
|
986
|
+
|
|
987
|
+
The **`p`** property is short for `padding`, and sets the padding area on all four sides of an element at once.
|
|
988
|
+
|
|
989
|
+
It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
|
|
990
|
+
|
|
991
|
+
| Chrome | Firefox | Safari | Edge | IE |
|
|
992
|
+
| --- | --- | --- | --- | --- |
|
|
993
|
+
| **1** | **1** | **1** | **12** | **3** |
|
|
994
|
+
|
|
995
|
+
ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
|
|
996
|
+
|
|
997
|
+
| \- | Set object |
|
|
998
|
+
| pb |
|
|
999
|
+
|
|
1000
|
+
The **`pb`** property is short for `padding-bottom` and sets the padding area on the bottom side of an element.
|
|
1001
|
+
|
|
1002
|
+
It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
|
|
1003
|
+
|
|
1004
|
+
| Chrome | Firefox | Safari | Edge | IE |
|
|
1005
|
+
| --- | --- | --- | --- | --- |
|
|
1006
|
+
| **1** | **1** | **1** | **12** | **3** |
|
|
1007
|
+
|
|
1008
|
+
ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
|
|
1009
|
+
|
|
1010
|
+
| \- | Set object |
|
|
1011
|
+
| pl |
|
|
1012
|
+
|
|
1013
|
+
The **`pl`** property is short for `padding-left` and sets the padding area on the left side of an element.
|
|
1014
|
+
|
|
1015
|
+
It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
|
|
1016
|
+
|
|
1017
|
+
| Chrome | Firefox | Safari | Edge | IE |
|
|
1018
|
+
| --- | --- | --- | --- | --- |
|
|
1019
|
+
| **1** | **1** | **1** | **12** | **3** |
|
|
1020
|
+
|
|
1021
|
+
ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
|
|
1022
|
+
|
|
1023
|
+
| \- | Set object |
|
|
1024
|
+
| pr |
|
|
1025
|
+
|
|
1026
|
+
The **`pr`** property is short for `padding-right` and sets the padding area on the right side of an element.
|
|
1027
|
+
|
|
1028
|
+
It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
|
|
1029
|
+
|
|
1030
|
+
| Chrome | Firefox | Safari | Edge | IE |
|
|
1031
|
+
| --- | --- | --- | --- | --- |
|
|
1032
|
+
| **1** | **1** | **1** | **12** | **3** |
|
|
1033
|
+
|
|
1034
|
+
ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
|
|
1035
|
+
|
|
1036
|
+
| \- | Set object |
|
|
1037
|
+
| pt |
|
|
1038
|
+
|
|
1039
|
+
The **`pt`** property is short for `padding-top` and sets the padding area on the top side of an element.
|
|
1040
|
+
|
|
1041
|
+
It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
|
|
1042
|
+
|
|
1043
|
+
| Chrome | Firefox | Safari | Edge | IE |
|
|
1044
|
+
| --- | --- | --- | --- | --- |
|
|
1045
|
+
| **1** | **1** | **1** | **12** | **3** |
|
|
1046
|
+
|
|
1047
|
+
ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
|
|
1048
|
+
|
|
1049
|
+
| \- | Set object |
|
|
1050
|
+
| px |
|
|
1051
|
+
|
|
1052
|
+
The **`px`** property is short for `padding-inline`. It is a shorthand property that defines both the logical inline start and end paddings of an element, which maps to physical paddings depending on the element's writing mode, directionality, and text orientation.
|
|
1053
|
+
|
|
1054
|
+
It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
|
|
1055
|
+
|
|
1056
|
+
| Chrome | Firefox | Safari | Edge | IE |
|
|
1057
|
+
| --- | --- | --- | --- | --- |
|
|
1058
|
+
| **1** | **1** | **1** | **12** | **3** |
|
|
1059
|
+
|
|
1060
|
+
ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
|
|
1061
|
+
|
|
1062
|
+
| \- | Set object |
|
|
1063
|
+
| py |
|
|
1064
|
+
|
|
1065
|
+
The **`py`** property is short for `padding-block`. It defines the logical block start and end paddings of an element, which maps to physical paddings depending on the element's writing mode, directionality, and text orientation.
|
|
1066
|
+
|
|
1067
|
+
It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
|
|
1068
|
+
|
|
1069
|
+
| Chrome | Firefox | Safari | Edge | IE |
|
|
1070
|
+
| --- | --- | --- | --- | --- |
|
|
1071
|
+
| **1** | **1** | **1** | **12** | **3** |
|
|
1072
|
+
|
|
1073
|
+
ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
|
|
1074
|
+
|
|
1075
|
+
| \- | Set object |
|
|
1076
|
+
| readOnly |
|
|
1077
|
+
|
|
1078
|
+
Render a read-only version of the editor.
|
|
1079
|
+
|
|
1080
|
+
booleanundefined
|
|
1081
|
+
|
|
1082
|
+
|
|
1083
|
+
|
|
1084
|
+
|
|
|
1085
|
+
|
|
1086
|
+
false
|
|
1087
|
+
|
|
1088
|
+
| Set object |
|
|
1089
|
+
| rowGap |
|
|
1090
|
+
|
|
1091
|
+
The **`row-gap`** CSS property sets the size of the gap (gutter) between an element's rows.
|
|
1092
|
+
|
|
1093
|
+
Note: It only has an effect when used as a direct child of a layout component, such as IressRow, IressStack or IressInline.
|
|
1094
|
+
|
|
1095
|
+
| Chrome | Firefox | Safari | Edge | IE |
|
|
1096
|
+
| --- | --- | --- | --- | --- |
|
|
1097
|
+
| **47** | **52** | **10.1** | **16** | No |
|
|
1098
|
+
|
|
1099
|
+
ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
|
|
1100
|
+
|
|
1101
|
+
| \- | Set object |
|
|
1102
|
+
| srOnly |
|
|
1103
|
+
|
|
1104
|
+
Set **`srOnly`** to hide an element visually but still make it accessible to screen readers. It can also be set to an object of breakpoints to hide the element at specific breakpoints.
|
|
1105
|
+
|
|
1106
|
+
Hide on all breakpoints: `srOnly: true` Hide on specific breakpoints: `srOnly: { xs: false, sm: true, md: false, lg: true, xl: false, xxl: true }`
|
|
1107
|
+
|
|
1108
|
+
ResponsiveProp<boolean> | undefined
|
|
1109
|
+
|
|
1110
|
+
| \- | Set object |
|
|
1111
|
+
| stretch |
|
|
1112
|
+
|
|
1113
|
+
The **`stretch`** property is used to stretch an element to fill the available space in its parent container. It sets the `height` property to `100%` and `alignSelf` to `stretch`, allowing the element to expand and contract based on the size of its parent.
|
|
1114
|
+
|
|
1115
|
+
booleanundefined
|
|
1116
|
+
|
|
1117
|
+
|
|
1118
|
+
|
|
1119
|
+
| \- | Set object |
|
|
1120
|
+
| textAlign |
|
|
1121
|
+
|
|
1122
|
+
The **`text-align`** CSS property sets the horizontal alignment of the inline-level content inside a block element or table-cell box.
|
|
1123
|
+
|
|
1124
|
+
| Chrome | Firefox | Safari | Edge | IE |
|
|
1125
|
+
| --- | --- | --- | --- | --- |
|
|
1126
|
+
| **1** | **1** | **1** | **12** | **3** |
|
|
1127
|
+
|
|
1128
|
+
ResponsiveProp<"center" | "left" | "right" | "inherit" | "justify"> | undefined
|
|
1129
|
+
|
|
1130
|
+
| \- | Set object |
|
|
1131
|
+
| textStyle |
|
|
1132
|
+
|
|
1133
|
+
Select the typography to be used using the **`textStyle`** prop. These are connected to the typography tokens in the design system.'
|
|
1134
|
+
|
|
1135
|
+
* `typography.body.sm` - Use for small components such as badges and disclaimers, as well as compact variations of tables and lists.
|
|
1136
|
+
* `typography.body.md` - The most commonly used body text size, used for most text content in the product and the default state of all components in the design system.
|
|
1137
|
+
* `typography.body.lg` - Use for tag lines, subtitles, and other large text content in the product.
|
|
1138
|
+
* `typography.heading.1` - Use for the main page title to establish a clear hierarchy. There is typically only one H1 per screen, emphasising the primary purpose or context of the page.
|
|
1139
|
+
* `typography.heading.2` - Use for primary section headings within a page to organise content and guide the user through key areas. Also suitable for large components—such as modals—where space allows and where it pairs well with body.md or body.lg.
|
|
1140
|
+
* `typography.heading.3` - Use for sub-sections under H2s to further structure content and maintain a clear visual hierarchy. Ideal for breaking down complex sections into manageable parts.
|
|
1141
|
+
* `typography.heading.4` - Use for supporting headings within content blocks or small components where space is limited—such as table headers, cards, or side panels. Provides structure without overwhelming the layout.
|
|
1142
|
+
* `typography.heading.5` - Use for minor labels or titles in compact UI elements, such as cards, sidebars, or inline labels. Best used to emphasise supplementary information without drawing too much attention. Works well with body.sm and is ideal for subtle content like fine print. Use sparingly to preserve typographic hierarchy.
|
|
1143
|
+
* `typography.code` - Used to display code snippets in the product, such as in the API documentation.
|
|
1144
|
+
|
|
1145
|
+
ResponsiveProp<"typography.heading.1" | "typography.heading.2" | "typography.heading.3" | "typography.heading.4" | "typography.heading.5" | "typography.body.sm" | "typography.body.sm.regular" | ... 10 more ... | "typography.code"> | undefined
|
|
1146
|
+
|
|
1147
|
+
| \- | Set object |
|
|
1148
|
+
| toolbar |
|
|
1149
|
+
|
|
1150
|
+
The toolbar to display above the editor.
|
|
1151
|
+
|
|
1152
|
+
ReactNode
|
|
1153
|
+
|
|
1154
|
+
|
|
1155
|
+
|
|
1156
|
+
| <SimpleToolbar /> | Set object |
|
|
1157
|
+
| width |
|
|
1158
|
+
|
|
1159
|
+
The **`width`** CSS property sets an element's width. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box`, it sets the width of the border area.
|
|
1160
|
+
|
|
1161
|
+
This prop only allows widths available throughout the component library. To use a custom width, you need to use the `style` prop, or add a custom class to the element and use CSS.
|
|
1162
|
+
|
|
1163
|
+
| Chrome | Firefox | Safari | Edge | IE |
|
|
1164
|
+
| --- | --- | --- | --- | --- |
|
|
1165
|
+
| **1** | **1** | **1** | **12** | **4** |
|
|
1166
|
+
|
|
1167
|
+
ResponsiveProp<"auto" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | ... 6 more ... | SizeToken> | undefined
|
|
1168
|
+
|
|
1169
|
+
| \- | Set object |
|
|
1170
|
+
|
|
278
1171
|
On this page
|
|
279
1172
|
|
|
280
1173
|
* [Overview](#overview)
|
|
281
1174
|
* [Props](#props)
|
|
282
1175
|
* [Installation](#installation)
|
|
283
1176
|
* [Examples](#examples)
|
|
284
|
-
* [
|
|
1177
|
+
* [Read only](#read-only)
|
|
285
1178
|
* [Using with IressForm](#using-with-iressform)
|
|
286
1179
|
* [Toolbars](#toolbars)
|
|
287
1180
|
* [Simple](#simple)
|