@iress-oss/ids-mcp-server 6.0.0-alpha.0 → 6.0.0-alpha.1-canary-20251204014525-3f0dce4

package/generated/docs/extensions-editor-recipes-docs.md

@@ -1,89 +0,0 @@
-[](#recipes)Recipes
-===================
-
-[](#displaying-generated-html-without-the-editor)Displaying generated html without the editor
----------------------------------------------------------------------------------------------
-
-To display the contents of the editor, you should use the `IressText` component. This will allow it to be displayed in a readonly format similar to how the editor displays it.
-
-In the recipe below, we also sanitize the html using `DOMPurify` to prevent any malicious code from being executed.
-
-Welcome to the IressEditor
---------------------------
-
-The `IressEditor` component focuses on usability and is designed to be as simple as possible to bring a familiar editing experience to regular users. `IressEditor` is based on [Tiptap.dev](https://tiptap.dev/) and supports all of its features:
-
-*   General text formatting: **bold** and _italic_
-*   Headings (h1-h4)
-*   Ordered and bullet lists
-*   Text align 
-*   Use markdown as shortcuts to format text (give it a try, write \*\*bold\*\* and it will bold the text) 
-
-Hide code
-
-\[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; }
-
-const valueFromApi \= \`
-  <h2 style="text-align: center">Welcome to the IressEditor</h2>  <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>  <ul>    <li>General text formatting: <strong>bold</strong> and <em>italic</em></li>    <li>Headings (h1-h4)</li>    <li>Ordered and bullet lists</li>    <li>Text align&nbsp;</li>    <li>      Use markdown as shortcuts to format text (give it a try, write \*\*bold\*\* and      it will bold the text)&nbsp;    </li>  </ul>
-\`;
-export const GeneratedHtmlDisplayExample \= () \=> (
-  <IressText
-    dangerouslySetInnerHTML\={{ \_\_html: DOMPurify.sanitize(valueFromApi) }}
-  />
-);
-
-Copy
-
-[](#displaying-additional-buttons-in-the-toolbar)Displaying additional buttons in the toolbar
----------------------------------------------------------------------------------------------
-
-To display additional buttons in the toolbar, you can use the `toolbar` prop of the `IressText` component. This allows you to add custom buttons to the toolbar.
-
-#\\:r0\\:--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;} #\\:r0\\:--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);} #\\:r0\\:--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);} #\\:r0\\:--container\[data-mantine-color-scheme="dark"\] { --mantine-color-scheme: dark; } #\\:r0\\:--container\[data-mantine-color-scheme="light"\] { --mantine-color-scheme: light; }
-
-Template
-
-Template 1Template 2
-
-You can use the template button to insert predefined content.
-
-Hide code
-
-\[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; }
-
-export const TemplatesInToolbarExample \= () \=> {
-  const \[value, setValue\] \= useState(
-    'You can use the template button to insert predefined content.',
-  );
-  return (
-    <IressEditor
-      toolbar\={
-        <IressEditor.SimpleToolbar\>
-          <IressPopover
-            activator\={
-              <IressButton append\={<IressIcon name\="chevron-down" />}\>
-                Template              </IressButton\>
-            }
-            ml\="auto"
-            type\="menu"
-          \>
-            <IressMenu\>
-              <IressMenuItem onClick\={() \=> setValue('<h1>Template 1</h1>')}\>
-                Template 1              </IressMenuItem\>
-              <IressMenuItem onClick\={() \=> setValue('<h2>Template 2</h2>')}\>
-                Template 2              </IressMenuItem\>
-            </IressMenu\>
-          </IressPopover\>
-        </IressEditor.SimpleToolbar\>
-      }
-      value\={value}
-    />
-  );
-};
-
-Copy
-
-On this page
-
-*   [Displaying generated html without the editor](#displaying-generated-html-without-the-editor)
-*   [Displaying additional buttons in the toolbar](#displaying-additional-buttons-in-the-toolbar)

package/generated/docs/foundations-accessibility-docs.md

@@ -1,40 +0,0 @@
-[](#accessibility)Accessibility
-===============================
-
-Accessibility is everyone's responsibility. It ensures that all users, regardless of their abilities or disabilities, can access and interact with our components effectively. This document outlines the key practices for building accessible components we follow within IDS.
-
-Please note: The default behaviour of our components is to be accessible, but it is the responsibility of the product to ensure that they are used correctly in accessibile context, or any modifications made to them do not compromise accessibility.
-
-[](#interaction-patterns)Interaction Patterns
----------------------------------------------
-
-### [](#keyboard-navigation)Keyboard Navigation
-
-*   Support standard keyboard shortcuts (Tab, Arrow keys, Enter, Space, Escape)
-*   Implement proper focus order and visual focus indicators
-*   Provide keyboard alternatives for mouse-only interactions
-*   Follow established ARIA patterns for complex widgets
-
-### [](#touch-interactions)Touch Interactions
-
-*   Provide adequate touch target sizes (minimum 44px)
-*   Implement touch-friendly spacing between interactive elements
-*   Support gesture-based interactions where appropriate
-*   Ensure consistent behaviour across device types
-
-### [](#loading-and-feedback)Loading and Feedback
-
-*   Use appropriate loading patterns based on context:
-    *   **Page**: Full page loading states
-    *   **Component**: Local loading within sections
-    *   **Button**: Inline loading for form submissions
-    *   **Validate**: Server-side validation feedback
-*   Provide clear success and error feedback
-*   Use progressive enhancement for better perceived performance
-
-On this page
-
-*   [Interaction Patterns](#interaction-patterns)
-    *   [Keyboard Navigation](#keyboard-navigation)
-    *   [Touch Interactions](#touch-interactions)
-    *   [Loading and Feedback](#loading-and-feedback)

package/generated/docs/foundations-consistency-docs.md

@@ -1,52 +0,0 @@
-[](#using-components-consistently)Using components consistently
-===============================================================
-
-[](#buttons)Buttons
--------------------
-
-*   **Primary**: Limit to one per view for main call-to-action
-*   **Secondary**: Use for secondary actions
-*   **Tertiary**: Extra affordance between secondary actions
-*   **Link**: Button styled as link (avoid with icon-only content)
-*   **Danger**: Destructive actions requiring extra confirmation
-*   **Positive/Negative**: Financial transactions (buy/sell)
-
-[](#forms)Forms
----------------
-
-*   Always use `IressField` wrapper for proper label, hint, and error placement
-*   Provide clear validation feedback with appropriate error messages
-*   Use consistent input sizing based on expected content length
-*   Implement proper form state management and accessibility
-
-[](#navigation)Navigation
--------------------------
-
-*   Use semantic HTML5 navigation elements
-*   Provide skip links for keyboard users
-*   Implement proper ARIA labelling for navigation sections
-*   Ensure consistent navigation patterns across applications
-
-[](#data-display)Data Display
------------------------------
-
-*   Use semantic table structures with proper headers
-*   Provide clear visual hierarchy in data presentations
-*   Implement consistent sorting and filtering patterns
-*   Use appropriate loading states for data-heavy components
-
-[](#modals-and-overlays)Modals and Overlays
--------------------------------------------
-
-*   Reserve modals for critical tasks requiring full attention
-*   Provide multiple dismissal methods (backdrop, escape key, close button)
-*   Implement proper focus management and restoration
-*   Use slideouts for supplementary tasks where underlying content needs visibility
-
-On this page
-
-*   [Buttons](#buttons)
-*   [Forms](#forms)
-*   [Navigation](#navigation)
-*   [Data Display](#data-display)
-*   [Modals and Overlays](#modals-and-overlays)

package/generated/docs/foundations-content-docs.md

@@ -1,23 +0,0 @@
-[](#content)Content
-===================
-
-[](#microcopy-guidelines)Microcopy Guidelines
----------------------------------------------
-
-*   Use clear, concise language that matches user mental models
-*   Provide helpful error messages with actionable guidance
-*   Implement consistent tone of voice across all interface text
-*   Use progressive disclosure for complex information
-
-[](#iconography)Iconography
----------------------------
-
-*   Use icons consistently with established meanings
-*   Provide screen reader text for meaningful icons
-*   Avoid using icons as the sole means of communication
-*   Maintain consistent icon sizing and alignment
-
-On this page
-
-*   [Microcopy Guidelines](#microcopy-guidelines)
-*   [Iconography](#iconography)

package/generated/docs/foundations-grid-docs.md

@@ -1,74 +0,0 @@
-[](#grid)Grid
-=============
-
-The grid is used to evenly place other components across the page to ensure a consistent hierarchy and structure.
-
-[](#reference)Reference
------------------------
-
-Grid size: 12
-
-1
-
-2
-
-3
-
-4
-
-5
-
-6
-
-7
-
-8
-
-9
-
-10
-
-11
-
-12
-
-* * *
-
-[](#for-developers)For developers
----------------------------------
-
-If you are using the IDS components, you can use `IressContainer`, `IressRow`, and `IressCol` to create a grid layout. These components are designed to work together to create a responsive grid system.
-
-\[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;
-}
-
-import { IressContainer, IressRow, IressCol } from '@iress-oss/ids-components';
-<IressContainer\>
-  <IressRow\>
-    <IressCol span\={8}\>Column 1</IressCol\>
-    <IressCol span\={4}\>Column 2</IressCol\>
-  </IressRow\>
-</IressContainer\>;
-
-Copy
-
-The base grid size is exported as `GRID_SIZE` from the `@iress-oss/ids-components` package, in case you need to reference it in your own code.
-
-On this page
-
-*   [Reference](#reference)
-*   [For developers](#for-developers)

package/generated/docs/foundations-introduction-docs.md

@@ -1,19 +0,0 @@
-[](#introduction)Introduction
-=============================
-
-The IDS and product design team use the foundations to create a consistent user experience across all Iress products. This includes design principles and guidelines that ensure a cohesive look and feel.
-
-1.  [Principles](./?path=/docs/foundations-principles--docs)
-2.  [Accessibility](./?path=/docs/foundations-accessibility--docs)
-3.  [Tokens](./?path=/docs/foundations-tokens-introduction--docs)
-4.  [Breakpoints](./?path=/docs/foundations-breakpoints--docs)
-5.  [Consistency](./?path=/docs/foundations-consistency--docs)
-6.  [Grid](./?path=/docs/foundations-grid--docs)
-7.  [Content](./?path=/docs/foundations-content--docs)
-8.  [User Experience](./?path=/docs/foundations-user-experience--docs)
-9.  [Visual Design](./?path=/docs/foundations-visual-design--docs)
-10.  [Z-index (stacking)](./?path=/docs/foundations-z-index-stacking--docs)
-
-_This document is a living standard. Revisit and revise regularly to reflect evolving needs, technologies, and user expectations._
-
-On this page

package/generated/docs/foundations-principles-docs.md

@@ -1,70 +0,0 @@
-[](#core-design-principles)Core Design Principles
-=================================================
-
-[](#consistency)Consistency
----------------------------
-
-*   Maintain brand consistency across all applications and experiences
-*   Use standardised component naming conventions (all components start with `Iress` prefix)
-*   Leverage shared design tokens for spacing, colours, typography, and interactive states
-*   Ensure consistent behaviour patterns across similar components
-
-[](#accessibility-first)Accessibility First
--------------------------------------------
-
-*   Meet or exceed WCAG 2.1 Level AA Accessibility Guidelines
-*   Provide proper colour contrast ratios (minimum 4.5:1 for AA, 7:1 for AAA)
-*   Implement comprehensive keyboard navigation support
-*   Include screen reader compatibility with appropriate ARIA attributes
-*   Support focus management and skip navigation patterns
-*   Document accessibility considerations and requirements
-
-[](#clarity-and-usability)Clarity and Usability
------------------------------------------------
-
-*   Prioritise clear visual hierarchy through typography scales and spacing systems
-*   Use progressive disclosure to manage complexity
-*   Provide immediate feedback for user actions (loading states, validation, etc.)
-*   Design for touch-friendly interfaces with adequate target sizes
-
-[](#developer-experience)Developer Experience
----------------------------------------------
-
-*   Maintain clean component APIs with predictable prop patterns
-*   Provide comprehensive documentation with usage examples
-*   Include common patterns and anti-patterns
-*   Support both controlled and uncontrolled component patterns
-*   Enable efficient testing strategies with semantic roles and accessible queries
-*   Maintain up-to-date prop documentation and type definitions
-
-[](#quality-assurance)Quality assurance
----------------------------------------
-
-*   Test components across supported browsers and devices
-*   Validate accessibility compliance with automated and manual testing
-*   Ensure proper keyboard navigation functionality
-*   Test with assistive technologies (screen readers, voice control)
-
-### [](#code-standards)Code Standards
-
-*   Follow consistent naming conventions for CSS classes and component props
-*   Use semantic HTML elements where appropriate
-*   Implement proper TypeScript typing for better developer experience
-*   Maintain clean separation between presentation and logic
-
-### [](#performance-considerations)Performance Considerations
-
-*   Optimise component rendering and re-rendering
-*   Implement appropriate code splitting strategies
-*   Use efficient animation and transition patterns
-*   Consider bundle size impact of component dependencies
-
-On this page
-
-*   [Consistency](#consistency)
-*   [Accessibility First](#accessibility-first)
-*   [Clarity and Usability](#clarity-and-usability)
-*   [Developer Experience](#developer-experience)
-*   [Quality assurance](#quality-assurance)
-    *   [Code Standards](#code-standards)
-    *   [Performance Considerations](#performance-considerations)

package/generated/docs/foundations-responsive-breakpoints-docs.md

@@ -1,193 +0,0 @@
-[](#responsive-design)Responsive Design
-=======================================
-
-The Iress Design System (IDS) is built with responsive design principles in mind. This means that our components are designed to adapt to different screen sizes and orientations, ensuring a consistent user experience across devices.
-
-[](#breakpoints)Breakpoints
----------------------------
-
-*   Implement mobile-first responsive design
-*   Use consistent breakpoint values across all components
-*   Provide appropriate component variants for different screen sizes
-*   Consider content priority and progressive disclosure on smaller screens
-
-### Breakpoints supported by IDS
-
-| Name | Screen Width | Media Query |
-| --- | --- | --- |
-| xs | 0 - 575px | (min-width: 0) and (max-width: 575px) |
-| sm | 576px - 767px | (min-width: 576px) and (max-width: 767px) |
-| md | 768px - 1023px | (min-width: 768px) and (max-width: 1023px) |
-| lg | 1024px - 1199px | (min-width: 1024px) and (max-width: 1199px) |
-| xl | 1200px - 1499px | (min-width: 1200px) and (max-width: 1499px) |
-| xxl | 1500px and above | (min-width: 1500px) |
-
-[](#adaptive-behaviour)Adaptive Behaviour
------------------------------------------
-
-*   Reduce option counts on mobile devices where appropriate
-*   Implement responsive navigation patterns
-*   Adjust spacing and sizing for different contexts
-*   Maintain usability across all supported devices
-
-* * *
-
-[](#for-developers)For developers
----------------------------------
-
-If you are using the IDS components, the breakpoints have already been mapped out to their respective props. You can use props such as `gap` to change the visual properties of the component at certain breakpoints.
-
-\[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;
-}
-
-import { IressStack } from '@iress-oss/ids-components';
-<IressStack gap\={{ xs: 'spacing.100', md: 'spacing.200' }} />;
-
-Copy
-
-### [](#hooks)Hooks
-
-#### [](#usebreakpoint)`useBreakpoint`
-
-We also provide a `useBreakpoint` hook that allows you to access the current breakpoint in your components. This can be useful for conditionally rendering components based on the current screen size.
-
-**Note:** It is best to use media queries for responsive styling. Most props that require responsive values already support breakpoints which map to CSS values. Only use the `useBreakpoint` hook when there is no other way to achieve the desired responsive behavior.
-
-\[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;
-}
-
-import { useBreakpoint } from '@iress-oss/ids-components';
-const MyComponent \= () \=> {
-  const { breakpoint } \= useBreakpoint();
-  return (
-    <div\>
-      {breakpoint \=== 'xs' && <p\>This is extra small screen</p\>}
-      {breakpoint \=== 'md' && <p\>This is medium screen</p\>}
-    </div\>
-  );
-};
-
-Copy
-
-#### [](#useresponsiveprops)`useResponsiveProps`
-
-Another hook is `useResponsiveProps`, which allows you to define responsive properties that change based on the current breakpoint. This is particularly useful for completely changing components at various screen sizes.
-
-**Note:** It is best to use media queries for responsive styling. Most props that require responsive values already support breakpoints which map to CSS values. Only use the `useResponsiveProps` hook when there is no other way to achieve the desired responsive behavior.
-
-`useResponsiveProps`
---------------------
-
-This example demonstrates a use case for `useResponsiveProps`, for changing the columns on a table based on the breakpoint.
-
-Resize the screen to see the columns change
-
-| Name | Age |
-| --- | --- |
-| Luke Skywalker | 19 |
-| Princess Leia | 19 |
-| Han Solo | 32 |
-
-Hide code
-
-\[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; }
-
-export const ResponsiveTableColumns \= () \=> {
-  const { value } \= useResponsiveProps({
-    base: \[{ key: 'name', label: 'Name' }\],
-    lg: \[
-      { key: 'name', label: 'Name' },
-      { key: 'age', label: 'Age' },
-    \],
-  });
-  return (
-    <IressTable
-      caption\={
-        <IressText textAlign\="left"\>
-          <h2\>
-            <code\>useResponsiveProps</code\>
-          </h2\>
-          <p\>
-            This example demonstrates a use case for{' '}
-            <code\>useResponsiveProps</code\>, for changing the columns on a table
-            based on the breakpoint.          </p\>
-          <p\>Resize the screen to see the columns change</p\>
-        </IressText\>
-      }
-      columns\={value}
-      rows\={\[
-        { name: 'Luke Skywalker', age: 19 },
-        { name: 'Princess Leia', age: 19 },
-        { name: 'Han Solo', age: 32 },
-      \]}
-    />
-  );
-};
-
-Copy
-
-### [](#constant)Constant
-
-You can also use the breakpoints directly in your CSS or styled components. The breakpoints are defined in the `@iress-oss/ids-components` package.
-
-\[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;
-}
-
-import { BREAKPOINT\_DETAILS } from '@iress-oss/ids-components';
-const css \= \`
-  @media (${BREAKPOINT\_DETAILS.md.mediaQuery}}) {
-    .my-class {      padding: 20px;    }  }
-\`;
-<style\>{css}</style\>;
-
-Copy
-
-On this page
-
-*   [Breakpoints](#breakpoints)
-*   [Adaptive Behaviour](#adaptive-behaviour)
-*   [For developers](#for-developers)
-    *   [Hooks](#hooks)
-    *   [Constant](#constant)