@iress-oss/ids-mcp-server 5.14.2 → 6.0.0-alpha.0

package/generated/docs/components-table-ag-grid-docs.md

@@ -6,7 +6,17 @@ Overview
 
 AG Grid is the preferred solution for complex tables.
 
-1 to 3 of 3. Page 1 of 1
+* * *
+
+Updated
+
+**Recently updated**
+
+This component has been recently updated with new props. The props have been marked as beta. Please tell us if there are any issues.
+
+.ag-cell.iress--positive, .ag-cell .iress--positive, .iress--positive .ag-cell { color: var(--iress-colour-system-success-text, #015537); }
+
+:where(.ag-theme-params-2) { --ag-accent-color: var(--ag-inherited-accent-color, var(--iress-colour-primary-fill, #13213F)); --ag-advanced-filter-builder-button-bar-border: var(--ag-inherited-advanced-filter-builder-button-bar-border, solid 1px var(--ag-border-color)); --ag-advanced-filter-builder-column-pill-color: var(--ag-inherited-advanced-filter-builder-column-pill-color, #a6e194); --ag-advanced-filter-builder-indent-size: var(--ag-inherited-advanced-filter-builder-indent-size, calc( var(--ag-spacing) \* 2 + var(--ag-icon-size) )); --ag-advanced-filter-builder-join-pill-color: var(--ag-inherited-advanced-filter-builder-join-pill-color, #f08e8d); --ag-advanced-filter-builder-option-pill-color: var(--ag-inherited-advanced-filter-builder-option-pill-color, #f3c08b); --ag-advanced-filter-builder-value-pill-color: var(--ag-inherited-advanced-filter-builder-value-pill-color, #85c0e4); --ag-background-color: var(--ag-inherited-background-color, var(--iress-colour-neutral-10, #FFFFFF)); --ag-border-color: var(--ag-inherited-border-color, var(--iress-colour-neutral-30, #E4E5E7)); --ag-border-radius: var(--ag-inherited-border-radius, var(--iress-radius-system-layout, var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem))); --ag-browser-color-scheme: var(--ag-inherited-browser-color-scheme, light); --ag-button-active-background-color: var(--ag-inherited-button-active-background-color, var(--ag-accent-color)); --ag-button-active-border: var(--ag-inherited-button-active-border, var(--ag-button-hover-border)); --ag-button-active-text-color: var(--ag-inherited-button-active-text-color, var(--ag-background-color)); --ag-button-background-color: var(--ag-inherited-button-background-color, var(--iress-colour-primary-surface, #D9E5FF)); --ag-button-border: var(--ag-inherited-button-border, solid 1px var(--iress-colour-primary-surface, #D9E5FF)); --ag-button-border-radius: var(--ag-inherited-button-border-radius, var(--iress-radius-system-button, var(--iress-radius-075, calc(0.75 \* 1rem)) var(--iress-radius-075, calc(0.75 \* 1rem)) var(--iress-radius-075, calc(0.75 \* 1rem)) var(--iress-radius-075, calc(0.75 \* 1rem)))); --ag-button-disabled-background-color: var(--ag-inherited-button-disabled-background-color, var(--ag-input-disabled-background-color)); --ag-button-disabled-border: var(--ag-inherited-button-disabled-border, var(--ag-input-disabled-border)); --ag-button-disabled-text-color: var(--ag-inherited-button-disabled-text-color, var(--ag-input-disabled-text-color)); --ag-button-font-weight: var(--ag-inherited-button-font-weight, 600); --ag-button-horizontal-padding: var(--ag-inherited-button-horizontal-padding, calc( var(--ag-spacing) \* 2)); --ag-button-hover-background-color: var(--ag-inherited-button-hover-background-color, var(--ag-row-hover-color)); --ag-button-hover-border: var(--ag-inherited-button-hover-border, var(--ag-button-border)); --ag-button-hover-text-color: var(--ag-inherited-button-hover-text-color, var(--ag-button-text-color)); --ag-button-text-color: var(--ag-inherited-button-text-color, var(--iress-colour-primary-text, #13213F)); --ag-button-vertical-padding: var(--ag-inherited-button-vertical-padding, var(--ag-spacing)); --ag-card-shadow: var(--ag-inherited-card-shadow, var(--iress-elevation-raised-shadow, 0px 3px 5px #091E4220)); --ag-cell-editing-border: var(--ag-inherited-cell-editing-border, solid 1px var(--ag-accent-color)); --ag-cell-editing-shadow: var(--ag-inherited-cell-editing-shadow, var(--ag-card-shadow)); --ag-cell-font-family: var(--ag-inherited-cell-font-family, var(--iress-typography-base-body-font, Inter, Helvetica, sans-serif)); --ag-cell-horizontal-padding: var(--ag-inherited-cell-horizontal-padding, calc( var(--ag-spacing) \* 2 \* var(--ag-cell-horizontal-padding-scale) )); --ag-cell-horizontal-padding-scale: var(--ag-inherited-cell-horizontal-padding-scale, 1); --ag-cell-text-color: var(--ag-inherited-cell-text-color, var(--ag-text-color)); --ag-cell-widget-spacing: var(--ag-inherited-cell-widget-spacing, calc( var(--ag-spacing) \* 1.5)); --ag-chart-menu-label-color: var(--ag-inherited-chart-menu-label-color, color-mix(in srgb, transparent, var(--ag-foreground-color) 80%)); --ag-chart-menu-panel-width: var(--ag-inherited-chart-menu-panel-width, 260px); --ag-checkbox-border-radius: var(--ag-inherited-checkbox-border-radius, var(--iress-radius-system-badge, var(--iress-radius-025, calc(0.25 \* 1rem)) var(--iress-radius-025, calc(0.25 \* 1rem)) var(--iress-radius-025, calc(0.25 \* 1rem)) var(--iress-radius-025, calc(0.25 \* 1rem)))); --ag-checkbox-border-width: var(--ag-inherited-checkbox-border-width, 1px); --ag-checkbox-checked-background-color: var(--ag-inherited-checkbox-checked-background-color, var(--iress-colour-primary-fill, #13213F)); --ag-checkbox-checked-border-color: var(--ag-inherited-checkbox-checked-border-color, var(--iress-colour-primary-fill, #13213F)); --ag-checkbox-checked-shape-color: var(--ag-inherited-checkbox-checked-shape-color, var(--iress-colour-primary-on-fill, #ECF2FF)); --ag-checkbox-checked-shape-image: var(--ag-inherited-checkbox-checked-shape-image, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%227%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.75%22%20d%3D%22M1%203.5%203.5%206l5-5%22%2F%3E%3C%2Fsvg%3E")); --ag-checkbox-indeterminate-background-color: var(--ag-inherited-checkbox-indeterminate-background-color, var(--iress-colour-primary-fill, #13213F)); --ag-checkbox-indeterminate-border-color: var(--ag-inherited-checkbox-indeterminate-border-color, var(--iress-colour-primary-fill, #13213F)); --ag-checkbox-indeterminate-shape-color: var(--ag-inherited-checkbox-indeterminate-shape-color, var(--iress-colour-primary-on-fill, #ECF2FF)); --ag-checkbox-indeterminate-shape-image: var(--ag-inherited-checkbox-indeterminate-shape-image, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%222%22%20fill%3D%22none%22%3E%3Crect%20width%3D%2210%22%20height%3D%222%22%20fill%3D%22%23000%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E")); --ag-checkbox-unchecked-background-color: var(--ag-inherited-checkbox-unchecked-background-color, var(--iress-colour-neutral-10, #FFFFFF)); --ag-checkbox-unchecked-border-color: var(--ag-inherited-checkbox-unchecked-border-color, var(--iress-colour-neutral-70, #6D7278)); --ag-chrome-background-color: var(--ag-inherited-chrome-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 2%)); --ag-column-border: var(--ag-inherited-column-border, solid 1px transparent); --ag-column-drop-cell-background-color: var(--ag-inherited-column-drop-cell-background-color, color-mix(in srgb, transparent, var(--ag-foreground-color) 7.000000000000001%)); --ag-column-drop-cell-border: var(--ag-inherited-column-drop-cell-border, solid 1px color-mix(in srgb, transparent, var(--ag-foreground-color) 13%)); --ag-column-drop-cell-drag-handle-color: var(--ag-inherited-column-drop-cell-drag-handle-color, var(--ag-text-color)); --ag-column-drop-cell-text-color: var(--ag-inherited-column-drop-cell-text-color, var(--ag-text-color)); --ag-column-hover-color: var(--ag-inherited-column-hover-color, var(--iress-colour-neutral-20, #F9F9F9)); --ag-column-select-indent-size: var(--ag-inherited-column-select-indent-size, var(--ag-icon-size)); --ag-data-font-size: var(--ag-inherited-data-font-size, var(--iress-typography-base-size, .875rem)); --ag-dialog-border: var(--ag-inherited-dialog-border, solid 1px color-mix(in srgb, transparent, var(--ag-foreground-color) 20%)); --ag-dialog-shadow: var(--ag-inherited-dialog-shadow, var(--iress-elevation-floating-shadow, 0px 10px 18px #091E4215)); --ag-drag-and-drop-image-background-color: var(--ag-inherited-drag-and-drop-image-background-color, var(--ag-background-color)); --ag-drag-and-drop-image-border: var(--ag-inherited-drag-and-drop-image-border, solid 1px var(--ag-border-color)); --ag-drag-and-drop-image-shadow: var(--ag-inherited-drag-and-drop-image-shadow, var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF)); --ag-drag-handle-color: var(--ag-inherited-drag-handle-color, color-mix(in srgb, transparent, var(--ag-foreground-color) 70%)); --ag-dropdown-shadow: var(--ag-inherited-dropdown-shadow, var(--iress-elevation-floating-shadow, 0px 10px 18px #091E4215)); --ag-filter-tool-panel-group-indent: var(--ag-inherited-filter-tool-panel-group-indent, var(--ag-spacing)); --ag-find-active-match-background-color: var(--ag-inherited-find-active-match-background-color, #ffa500); --ag-find-active-match-color: var(--ag-inherited-find-active-match-color, var(--ag-foreground-color)); --ag-find-match-background-color: var(--ag-inherited-find-match-background-color, #ffff00); --ag-find-match-color: var(--ag-inherited-find-match-color, var(--ag-foreground-color)); --ag-focus-shadow: var(--ag-inherited-focus-shadow, var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF)); --ag-font-family: var(--ag-inherited-font-family, var(--iress-typography-base-body-font, Inter, Helvetica, sans-serif)); --ag-font-size: var(--ag-inherited-font-size, var(--iress-typography-base-size, .875rem)); --ag-footer-row-border: var(--ag-inherited-footer-row-border, var(--ag-row-border)); --ag-foreground-color: var(--ag-inherited-foreground-color, var(--iress-colour-neutral-80, #393F46)); --ag-header-background-color: var(--ag-inherited-header-background-color, var(--iress-colour-neutral-10, #FFFFFF)); --ag-header-cell-background-transition-duration: var(--ag-inherited-header-cell-background-transition-duration, 0.2s); --ag-header-cell-hover-background-color: var(--ag-inherited-header-cell-hover-background-color, transparent); --ag-header-cell-moving-background-color: var(--ag-inherited-header-cell-moving-background-color, var(--ag-header-cell-hover-background-color)); --ag-header-column-border: var(--ag-inherited-header-column-border, none); --ag-header-column-border-height: var(--ag-inherited-header-column-border-height, 100%); --ag-header-column-resize-handle-color: var(--ag-inherited-header-column-resize-handle-color, var(--ag-border-color)); --ag-header-column-resize-handle-height: var(--ag-inherited-header-column-resize-handle-height, 30%); --ag-header-column-resize-handle-width: var(--ag-inherited-header-column-resize-handle-width, 2px); --ag-header-font-family: var(--ag-inherited-header-font-family, var(--iress-typography-base-body-font, Inter, Helvetica, sans-serif)); --ag-header-font-size: var(--ag-inherited-header-font-size, var(--ag-font-size)); --ag-header-font-weight: var(--ag-inherited-header-font-weight, 700); --ag-header-height: var(--ag-inherited-header-height, calc(max( var(--ag-icon-size) , var(--ag-data-font-size) ) + var(--ag-spacing) \* 4 \* var(--ag-header-vertical-padding-scale) )); --ag-header-row-border: var(--ag-inherited-header-row-border, solid 1px var(--iress-colour-neutral-40, #D7D8DA)); --ag-header-text-color: var(--ag-inherited-header-text-color, var(--ag-text-color)); --ag-header-vertical-padding-scale: var(--ag-inherited-header-vertical-padding-scale, 1); --ag-icon-button-active-background-color: var(--ag-inherited-icon-button-active-background-color, transparent); --ag-icon-button-active-color: var(--ag-inherited-icon-button-active-color, var(--ag-accent-color)); --ag-icon-button-active-indicator-color: var(--ag-inherited-icon-button-active-indicator-color, var(--ag-accent-color)); --ag-icon-button-background-color: var(--ag-inherited-icon-button-background-color, transparent); --ag-icon-button-background-spread: var(--ag-inherited-icon-button-background-spread, 4px); --ag-icon-button-border-radius: var(--ag-inherited-icon-button-border-radius, 1px); --ag-icon-button-color: var(--ag-inherited-icon-button-color, var(--ag-icon-color)); --ag-icon-button-hover-background-color: var(--ag-inherited-icon-button-hover-background-color, transparent); --ag-icon-button-hover-color: var(--ag-inherited-icon-button-hover-color, var(--ag-accent-color)); --ag-icon-color: var(--ag-inherited-icon-color, inherit); --ag-icon-size: var(--ag-inherited-icon-size, 16px); --ag-input-background-color: var(--ag-inherited-input-background-color, var(--ag-background-color)); --ag-input-border: var(--ag-inherited-input-border, solid 1px var(--iress-colour-neutral-70, #6D7278)); --ag-input-border-radius: var(--ag-inherited-input-border-radius, var(--iress-radius-system-form, var(--iress-radius-050, calc(0.5 \* 1rem)) var(--iress-radius-050, calc(0.5 \* 1rem)) var(--iress-radius-050, calc(0.5 \* 1rem)) var(--iress-radius-050, calc(0.5 \* 1rem)))); --ag-input-disabled-background-color: var(--ag-inherited-input-disabled-background-color, var(--iress-colour-neutral-20, #F9F9F9)); --ag-input-disabled-border: var(--ag-inherited-input-disabled-border, solid 1px var(--iress-colour-neutral-40, #D7D8DA)); --ag-input-disabled-text-color: var(--ag-inherited-input-disabled-text-color, var(--iress-colour-neutral-60, #878B92)); --ag-input-focus-background-color: var(--ag-inherited-input-focus-background-color, var(--ag-input-background-color)); --ag-input-focus-border: var(--ag-inherited-input-focus-border, solid 1px color-mix(in srgb, transparent, var(--ag-accent-color) 40%)); --ag-input-focus-shadow: var(--ag-inherited-input-focus-shadow, var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF)); --ag-input-focus-text-color: var(--ag-inherited-input-focus-text-color, var(--ag-input-text-color)); --ag-input-height: var(--ag-inherited-input-height, calc(max( var(--ag-icon-size) , var(--ag-font-size) ) + var(--ag-spacing) \* 2)); --ag-input-icon-color: var(--ag-inherited-input-icon-color, var(--iress-colour-neutral-70, #6D7278)); --ag-input-invalid-background-color: var(--ag-inherited-input-invalid-background-color, var(--iress-colour-system-danger-surface, #FEE8E7)); --ag-input-invalid-border: var(--ag-inherited-input-invalid-border, var(--iress-colour-system-danger-fill, #C20A0A)); --ag-input-invalid-text-color: var(--ag-inherited-input-invalid-text-color, var(--iress-colour-system-danger-text, #970202)); --ag-input-padding-start: var(--ag-inherited-input-padding-start, var(--ag-spacing)); --ag-input-placeholder-text-color: var(--ag-inherited-input-placeholder-text-color, color-mix(in srgb, transparent, var(--ag-input-text-color) 50%)); --ag-input-text-color: var(--ag-inherited-input-text-color, var(--iress-colour-neutral-80, #393F46)); --ag-invalid-color: var(--ag-inherited-invalid-color, var(--iress-colour-system-danger-fill, #C20A0A)); --ag-list-item-height: var(--ag-inherited-list-item-height, calc(max( var(--ag-icon-size) , var(--ag-data-font-size) ) + var(--ag-widget-vertical-spacing) )); --ag-menu-background-color: var(--ag-inherited-menu-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 3%)); --ag-menu-border: var(--ag-inherited-menu-border, solid 1px color-mix(in srgb, transparent, var(--ag-foreground-color) 20%)); --ag-menu-separator-color: var(--ag-inherited-menu-separator-color, var(--ag-border-color)); --ag-menu-shadow: var(--ag-inherited-menu-shadow, var(--iress-elevation-floating-shadow, 0px 10px 18px #091E4215)); --ag-menu-text-color: var(--ag-inherited-menu-text-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 95%)); --ag-modal-overlay-background-color: var(--ag-inherited-modal-overlay-background-color, var(--iress-colour-system-backdrop-fill, #393F46CC)); --ag-odd-row-background-color: var(--ag-inherited-odd-row-background-color, var(--iress-colour-neutral-10, #FFFFFF)); --ag-panel-background-color: var(--ag-inherited-panel-background-color, var(--ag-background-color)); --ag-panel-title-bar-background-color: var(--ag-inherited-panel-title-bar-background-color, var(--ag-header-background-color)); --ag-panel-title-bar-border: var(--ag-inherited-panel-title-bar-border, solid 1px var(--ag-border-color)); --ag-panel-title-bar-font-weight: var(--ag-inherited-panel-title-bar-font-weight, var(--ag-header-font-weight)); --ag-panel-title-bar-icon-color: var(--ag-inherited-panel-title-bar-icon-color, var(--ag-header-text-color)); --ag-panel-title-bar-text-color: var(--ag-inherited-panel-title-bar-text-color, var(--ag-header-text-color)); --ag-picker-button-background-color: var(--ag-inherited-picker-button-background-color, var(--ag-background-color)); --ag-picker-button-border: var(--ag-inherited-picker-button-border, solid 1px var(--ag-border-color)); --ag-picker-button-focus-background-color: var(--ag-inherited-picker-button-focus-background-color, var(--ag-background-color)); --ag-picker-button-focus-border: var(--ag-inherited-picker-button-focus-border, var(--ag-input-focus-border)); --ag-picker-list-background-color: var(--ag-inherited-picker-list-background-color, var(--ag-background-color)); --ag-picker-list-border: var(--ag-inherited-picker-list-border, solid 1px var(--ag-border-color)); --ag-pinned-column-border: var(--ag-inherited-pinned-column-border, solid 1px var(--ag-border-color)); --ag-pinned-row-background-color: var(--ag-inherited-pinned-row-background-color, var(--ag-background-color)); --ag-pinned-row-border: var(--ag-inherited-pinned-row-border, solid 1px var(--ag-border-color)); --ag-pinned-row-font-weight: var(--ag-inherited-pinned-row-font-weight, 600); --ag-pinned-row-text-color: var(--ag-inherited-pinned-row-text-color, var(--ag-text-color)); --ag-pinned-source-row-background-color: var(--ag-inherited-pinned-source-row-background-color, var(--ag-background-color)); --ag-pinned-source-row-font-weight: var(--ag-inherited-pinned-source-row-font-weight, 600); --ag-pinned-source-row-text-color: var(--ag-inherited-pinned-source-row-text-color, var(--ag-text-color)); --ag-popup-shadow: var(--ag-inherited-popup-shadow, var(--iress-elevation-floating-shadow, 0px 10px 18px #091E4215)); --ag-radio-checked-shape-image: var(--ag-inherited-radio-checked-shape-image, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%226%22%20height%3D%226%22%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%223%22%20cy%3D%223%22%20r%3D%223%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E")); --ag-range-header-highlight-color: var(--ag-inherited-range-header-highlight-color, color-mix(in srgb, var(--ag-header-background-color), var(--ag-foreground-color) 8%)); --ag-range-selection-background-color: var(--ag-inherited-range-selection-background-color, color-mix(in srgb, transparent, var(--ag-accent-color) 10%)); --ag-range-selection-border-color: var(--ag-inherited-range-selection-border-color, var(--iress-colour-primary-fill, #13213F)); --ag-range-selection-border-style: var(--ag-inherited-range-selection-border-style, solid); --ag-range-selection-chart-background-color: var(--ag-inherited-range-selection-chart-background-color, #0058FF1A); --ag-range-selection-chart-category-background-color: var(--ag-inherited-range-selection-chart-category-background-color, #00FF841A); --ag-range-selection-highlight-color: var(--ag-inherited-range-selection-highlight-color, color-mix(in srgb, transparent, var(--ag-accent-color) 50%)); --ag-row-border: var(--ag-inherited-row-border, solid 1px var(--iress-colour-neutral-40, #D7D8DA)); --ag-row-group-indent-size: var(--ag-inherited-row-group-indent-size, calc( var(--ag-cell-widget-spacing) + var(--ag-icon-size) )); --ag-row-height: var(--ag-inherited-row-height, calc(max( var(--ag-icon-size) , var(--ag-data-font-size) ) + var(--ag-spacing) \* 3.25 \* var(--ag-row-vertical-padding-scale) )); --ag-row-hover-color: var(--ag-inherited-row-hover-color, var(--iress-colour-primary-surface, #D9E5FF)); --ag-row-loading-skeleton-effect-color: var(--ag-inherited-row-loading-skeleton-effect-color, color-mix(in srgb, transparent, var(--ag-foreground-color) 15%)); --ag-row-numbers-selected-color: var(--ag-inherited-row-numbers-selected-color, color-mix(in srgb, transparent, var(--ag-accent-color) 50%)); --ag-row-vertical-padding-scale: var(--ag-inherited-row-vertical-padding-scale, 1); --ag-select-cell-background-color: var(--ag-inherited-select-cell-background-color, color-mix(in srgb, transparent, var(--ag-foreground-color) 7.000000000000001%)); --ag-select-cell-border: var(--ag-inherited-select-cell-border, solid 1px color-mix(in srgb, transparent, var(--ag-foreground-color) 13%)); --ag-selected-row-background-color: var(--ag-inherited-selected-row-background-color, var(--iress-colour-neutral-20, #F9F9F9)); --ag-set-filter-indent-size: var(--ag-inherited-set-filter-indent-size, var(--ag-icon-size)); --ag-side-bar-background-color: var(--ag-inherited-side-bar-background-color, transparent); --ag-side-bar-panel-width: var(--ag-inherited-side-bar-panel-width, 250px); --ag-side-button-background-color: var(--ag-inherited-side-button-background-color, transparent); --ag-side-button-bar-background-color: var(--ag-inherited-side-button-bar-background-color, var(--ag-side-bar-background-color)); --ag-side-button-bar-top-padding: var(--ag-inherited-side-button-bar-top-padding, calc( var(--ag-spacing) \* 3)); --ag-side-button-border: var(--ag-inherited-side-button-border, none); --ag-side-button-hover-background-color: var(--ag-inherited-side-button-hover-background-color, var(--ag-side-button-background-color)); --ag-side-button-hover-text-color: var(--ag-inherited-side-button-hover-text-color, var(--ag-accent-color)); --ag-side-button-left-padding: var(--ag-inherited-side-button-left-padding, var(--ag-spacing)); --ag-side-button-right-padding: var(--ag-inherited-side-button-right-padding, var(--ag-spacing)); --ag-side-button-selected-background-color: var(--ag-inherited-side-button-selected-background-color, transparent); --ag-side-button-selected-border: var(--ag-inherited-side-button-selected-border, none); --ag-side-button-selected-text-color: var(--ag-inherited-side-button-selected-text-color, var(--ag-side-button-text-color)); --ag-side-button-selected-underline-color: var(--ag-inherited-side-button-selected-underline-color, var(--ag-accent-color)); --ag-side-button-selected-underline-transition-duration: var(--ag-inherited-side-button-selected-underline-transition-duration, 0.3s); --ag-side-button-selected-underline-width: var(--ag-inherited-side-button-selected-underline-width, 2px); --ag-side-button-text-color: var(--ag-inherited-side-button-text-color, var(--ag-text-color)); --ag-side-button-vertical-padding: var(--ag-inherited-side-button-vertical-padding, calc( var(--ag-spacing) \* 3)); --ag-side-panel-border: var(--ag-inherited-side-panel-border, solid 1px var(--ag-border-color)); --ag-spacing: var(--ag-inherited-spacing, 8px); --ag-status-bar-label-color: var(--ag-inherited-status-bar-label-color, var(--ag-foreground-color)); --ag-status-bar-label-font-weight: var(--ag-inherited-status-bar-label-font-weight, 500); --ag-status-bar-value-color: var(--ag-inherited-status-bar-value-color, var(--ag-foreground-color)); --ag-status-bar-value-font-weight: var(--ag-inherited-status-bar-value-font-weight, 500); --ag-subtle-text-color: var(--ag-inherited-subtle-text-color, var(--iress-colour-neutral-70, #6D7278)); --ag-tab-background-color: var(--ag-inherited-tab-background-color, transparent); --ag-tab-bar-background-color: var(--ag-inherited-tab-bar-background-color, var(--ag-chrome-background-color)); --ag-tab-bar-border: var(--ag-inherited-tab-bar-border, solid 1px var(--iress-colour-primary-fill, #13213F)); --ag-tab-bar-horizontal-padding: var(--ag-inherited-tab-bar-horizontal-padding, 0px); --ag-tab-bar-top-padding: var(--ag-inherited-tab-bar-top-padding, 0px); --ag-tab-bottom-padding: var(--ag-inherited-tab-bottom-padding, var(--ag-spacing)); --ag-tab-horizontal-padding: var(--ag-inherited-tab-horizontal-padding, var(--ag-spacing)); --ag-tab-hover-background-color: var(--ag-inherited-tab-hover-background-color, var(--ag-tab-background-color)); --ag-tab-hover-text-color: var(--ag-inherited-tab-hover-text-color, var(--ag-accent-color)); --ag-tab-selected-background-color: var(--ag-inherited-tab-selected-background-color, var(--ag-tab-background-color)); --ag-tab-selected-border-color: var(--ag-inherited-tab-selected-border-color, transparent); --ag-tab-selected-border-width: var(--ag-inherited-tab-selected-border-width, 0px); --ag-tab-selected-text-color: var(--ag-inherited-tab-selected-text-color, var(--ag-accent-color)); --ag-tab-selected-underline-color: var(--ag-inherited-tab-selected-underline-color, var(--ag-accent-color)); --ag-tab-selected-underline-transition-duration: var(--ag-inherited-tab-selected-underline-transition-duration, 0.3s); --ag-tab-selected-underline-width: var(--ag-inherited-tab-selected-underline-width, 2px); --ag-tab-spacing: var(--ag-inherited-tab-spacing, 0); --ag-tab-text-color: var(--ag-inherited-tab-text-color, var(--ag-text-color)); --ag-tab-top-padding: var(--ag-inherited-tab-top-padding, var(--ag-spacing)); --ag-text-color: var(--ag-inherited-text-color, var(--ag-foreground-color)); --ag-toggle-button-height: var(--ag-inherited-toggle-button-height, 18px); --ag-toggle-button-off-background-color: var(--ag-inherited-toggle-button-off-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 45%)); --ag-toggle-button-on-background-color: var(--ag-inherited-toggle-button-on-background-color, var(--ag-accent-color)); --ag-toggle-button-switch-background-color: var(--ag-inherited-toggle-button-switch-background-color, var(--ag-background-color)); --ag-toggle-button-switch-inset: var(--ag-inherited-toggle-button-switch-inset, 1px); --ag-toggle-button-width: var(--ag-inherited-toggle-button-width, 28px); --ag-tool-panel-separator-border: var(--ag-inherited-tool-panel-separator-border, solid 1px var(--ag-border-color)); --ag-tooltip-background-color: var(--ag-inherited-tooltip-background-color, var(--iress-colour-neutral-80, #393F46)); --ag-tooltip-border: var(--ag-inherited-tooltip-border, solid 1px var(--ag-border-color)); --ag-tooltip-text-color: var(--ag-inherited-tooltip-text-color, var(--iress-colour-neutral-10, #FFFFFF)); --ag-value-change-delta-down-color: var(--ag-inherited-value-change-delta-down-color, var(--iress-colour-system-danger-fill, #C20A0A)); --ag-value-change-delta-up-color: var(--ag-inherited-value-change-delta-up-color, var(--iress-colour-system-success-fill, #02794D)); --ag-value-change-value-highlight-background-color: var(--ag-inherited-value-change-value-highlight-background-color, color-mix(in srgb, transparent, var(--ag-accent-color) 20%)); --ag-widget-container-horizontal-padding: var(--ag-inherited-widget-container-horizontal-padding, calc( var(--ag-spacing) \* 1.5)); --ag-widget-container-vertical-padding: var(--ag-inherited-widget-container-vertical-padding, calc( var(--ag-spacing) \* 1.5)); --ag-widget-horizontal-spacing: var(--ag-inherited-widget-horizontal-spacing, calc( var(--ag-spacing) \* 1.5)); --ag-widget-vertical-spacing: var(--ag-inherited-widget-vertical-spacing, var(--ag-spacing)); --ag-wrapper-border: var(--ag-inherited-wrapper-border, none); --ag-wrapper-border-radius: var(--ag-inherited-wrapper-border-radius, var(--iress-radius-system-layout, var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem))); :where(\[data-ag-theme-mode="light"\]) & { --ag-browser-color-scheme: var(--ag-inherited-browser-color-scheme, light); --ag-chrome-background-color: var(--ag-inherited-chrome-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 2%)); } :where(\[data-ag-theme-mode="dark"\]) & { --ag-advanced-filter-builder-column-pill-color: var(--ag-inherited-advanced-filter-builder-column-pill-color, #355f2d); --ag-advanced-filter-builder-join-pill-color: var(--ag-inherited-advanced-filter-builder-join-pill-color, #7a3a37); --ag-advanced-filter-builder-option-pill-color: var(--ag-inherited-advanced-filter-builder-option-pill-color, #5a3168); --ag-advanced-filter-builder-value-pill-color: var(--ag-inherited-advanced-filter-builder-value-pill-color, #374c86); --ag-browser-color-scheme: var(--ag-inherited-browser-color-scheme, dark); --ag-chrome-background-color: var(--ag-inherited-chrome-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 5%)); --ag-find-active-match-color: var(--ag-inherited-find-active-match-color, var(--ag-background-color)); --ag-find-match-color: var(--ag-inherited-find-match-color, var(--ag-background-color)); --ag-menu-background-color: var(--ag-inherited-menu-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 10%)); } :where(\[data-ag-theme-mode="dark-blue"\]) & { --ag-advanced-filter-builder-column-pill-color: var(--ag-inherited-advanced-filter-builder-column-pill-color, #355f2d); --ag-advanced-filter-builder-join-pill-color: var(--ag-inherited-advanced-filter-builder-join-pill-color, #7a3a37); --ag-advanced-filter-builder-option-pill-color: var(--ag-inherited-advanced-filter-builder-option-pill-color, #5a3168); --ag-advanced-filter-builder-value-pill-color: var(--ag-inherited-advanced-filter-builder-value-pill-color, #374c86); --ag-browser-color-scheme: var(--ag-inherited-browser-color-scheme, dark); --ag-chrome-background-color: var(--ag-inherited-chrome-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 5%)); --ag-find-active-match-color: var(--ag-inherited-find-active-match-color, var(--ag-background-color)); --ag-find-match-color: var(--ag-inherited-find-match-color, var(--ag-background-color)); --ag-menu-background-color: var(--ag-inherited-menu-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 10%)); } } :has(> :where(.ag-theme-params-2)):not(:where(.ag-theme-params-2)) { --ag-inherited-accent-color: var(--ag-accent-color); --ag-inherited-advanced-filter-builder-button-bar-border: var(--ag-advanced-filter-builder-button-bar-border); --ag-inherited-advanced-filter-builder-column-pill-color: var(--ag-advanced-filter-builder-column-pill-color); --ag-inherited-advanced-filter-builder-indent-size: var(--ag-advanced-filter-builder-indent-size); --ag-inherited-advanced-filter-builder-join-pill-color: var(--ag-advanced-filter-builder-join-pill-color); --ag-inherited-advanced-filter-builder-option-pill-color: var(--ag-advanced-filter-builder-option-pill-color); --ag-inherited-advanced-filter-builder-value-pill-color: var(--ag-advanced-filter-builder-value-pill-color); --ag-inherited-background-color: var(--ag-background-color); --ag-inherited-border-color: var(--ag-border-color); --ag-inherited-border-radius: var(--ag-border-radius); --ag-inherited-browser-color-scheme: var(--ag-browser-color-scheme); --ag-inherited-button-active-background-color: var(--ag-button-active-background-color); --ag-inherited-button-active-border: var(--ag-button-active-border); --ag-inherited-button-active-text-color: var(--ag-button-active-text-color); --ag-inherited-button-background-color: var(--ag-button-background-color); --ag-inherited-button-border: var(--ag-button-border); --ag-inherited-button-border-radius: var(--ag-button-border-radius); --ag-inherited-button-disabled-background-color: var(--ag-button-disabled-background-color); --ag-inherited-button-disabled-border: var(--ag-button-disabled-border); --ag-inherited-button-disabled-text-color: var(--ag-button-disabled-text-color); --ag-inherited-button-font-weight: var(--ag-button-font-weight); --ag-inherited-button-horizontal-padding: var(--ag-button-horizontal-padding); --ag-inherited-button-hover-background-color: var(--ag-button-hover-background-color); --ag-inherited-button-hover-border: var(--ag-button-hover-border); --ag-inherited-button-hover-text-color: var(--ag-button-hover-text-color); --ag-inherited-button-text-color: var(--ag-button-text-color); --ag-inherited-button-vertical-padding: var(--ag-button-vertical-padding); --ag-inherited-card-shadow: var(--ag-card-shadow); --ag-inherited-cell-editing-border: var(--ag-cell-editing-border); --ag-inherited-cell-editing-shadow: var(--ag-cell-editing-shadow); --ag-inherited-cell-font-family: var(--ag-cell-font-family); --ag-inherited-cell-horizontal-padding: var(--ag-cell-horizontal-padding); --ag-inherited-cell-horizontal-padding-scale: var(--ag-cell-horizontal-padding-scale); --ag-inherited-cell-text-color: var(--ag-cell-text-color); --ag-inherited-cell-widget-spacing: var(--ag-cell-widget-spacing); --ag-inherited-chart-menu-label-color: var(--ag-chart-menu-label-color); --ag-inherited-chart-menu-panel-width: var(--ag-chart-menu-panel-width); --ag-inherited-checkbox-border-radius: var(--ag-checkbox-border-radius); --ag-inherited-checkbox-border-width: var(--ag-checkbox-border-width); --ag-inherited-checkbox-checked-background-color: var(--ag-checkbox-checked-background-color); --ag-inherited-checkbox-checked-border-color: var(--ag-checkbox-checked-border-color); --ag-inherited-checkbox-checked-shape-color: var(--ag-checkbox-checked-shape-color); --ag-inherited-checkbox-checked-shape-image: var(--ag-checkbox-checked-shape-image); --ag-inherited-checkbox-indeterminate-background-color: var(--ag-checkbox-indeterminate-background-color); --ag-inherited-checkbox-indeterminate-border-color: var(--ag-checkbox-indeterminate-border-color); --ag-inherited-checkbox-indeterminate-shape-color: var(--ag-checkbox-indeterminate-shape-color); --ag-inherited-checkbox-indeterminate-shape-image: var(--ag-checkbox-indeterminate-shape-image); --ag-inherited-checkbox-unchecked-background-color: var(--ag-checkbox-unchecked-background-color); --ag-inherited-checkbox-unchecked-border-color: var(--ag-checkbox-unchecked-border-color); --ag-inherited-chrome-background-color: var(--ag-chrome-background-color); --ag-inherited-column-border: var(--ag-column-border); --ag-inherited-column-drop-cell-background-color: var(--ag-column-drop-cell-background-color); --ag-inherited-column-drop-cell-border: var(--ag-column-drop-cell-border); --ag-inherited-column-drop-cell-drag-handle-color: var(--ag-column-drop-cell-drag-handle-color); --ag-inherited-column-drop-cell-text-color: var(--ag-column-drop-cell-text-color); --ag-inherited-column-hover-color: var(--ag-column-hover-color); --ag-inherited-column-select-indent-size: var(--ag-column-select-indent-size); --ag-inherited-data-font-size: var(--ag-data-font-size); --ag-inherited-dialog-border: var(--ag-dialog-border); --ag-inherited-dialog-shadow: var(--ag-dialog-shadow); --ag-inherited-drag-and-drop-image-background-color: var(--ag-drag-and-drop-image-background-color); --ag-inherited-drag-and-drop-image-border: var(--ag-drag-and-drop-image-border); --ag-inherited-drag-and-drop-image-shadow: var(--ag-drag-and-drop-image-shadow); --ag-inherited-drag-handle-color: var(--ag-drag-handle-color); --ag-inherited-dropdown-shadow: var(--ag-dropdown-shadow); --ag-inherited-filter-tool-panel-group-indent: var(--ag-filter-tool-panel-group-indent); --ag-inherited-find-active-match-background-color: var(--ag-find-active-match-background-color); --ag-inherited-find-active-match-color: var(--ag-find-active-match-color); --ag-inherited-find-match-background-color: var(--ag-find-match-background-color); --ag-inherited-find-match-color: var(--ag-find-match-color); --ag-inherited-focus-shadow: var(--ag-focus-shadow); --ag-inherited-font-family: var(--ag-font-family); --ag-inherited-font-size: var(--ag-font-size); --ag-inherited-footer-row-border: var(--ag-footer-row-border); --ag-inherited-foreground-color: var(--ag-foreground-color); --ag-inherited-header-background-color: var(--ag-header-background-color); --ag-inherited-header-cell-background-transition-duration: var(--ag-header-cell-background-transition-duration); --ag-inherited-header-cell-hover-background-color: var(--ag-header-cell-hover-background-color); --ag-inherited-header-cell-moving-background-color: var(--ag-header-cell-moving-background-color); --ag-inherited-header-column-border: var(--ag-header-column-border); --ag-inherited-header-column-border-height: var(--ag-header-column-border-height); --ag-inherited-header-column-resize-handle-color: var(--ag-header-column-resize-handle-color); --ag-inherited-header-column-resize-handle-height: var(--ag-header-column-resize-handle-height); --ag-inherited-header-column-resize-handle-width: var(--ag-header-column-resize-handle-width); --ag-inherited-header-font-family: var(--ag-header-font-family); --ag-inherited-header-font-size: var(--ag-header-font-size); --ag-inherited-header-font-weight: var(--ag-header-font-weight); --ag-inherited-header-height: var(--ag-header-height); --ag-inherited-header-row-border: var(--ag-header-row-border); --ag-inherited-header-text-color: var(--ag-header-text-color); --ag-inherited-header-vertical-padding-scale: var(--ag-header-vertical-padding-scale); --ag-inherited-icon-button-active-background-color: var(--ag-icon-button-active-background-color); --ag-inherited-icon-button-active-color: var(--ag-icon-button-active-color); --ag-inherited-icon-button-active-indicator-color: var(--ag-icon-button-active-indicator-color); --ag-inherited-icon-button-background-color: var(--ag-icon-button-background-color); --ag-inherited-icon-button-background-spread: var(--ag-icon-button-background-spread); --ag-inherited-icon-button-border-radius: var(--ag-icon-button-border-radius); --ag-inherited-icon-button-color: var(--ag-icon-button-color); --ag-inherited-icon-button-hover-background-color: var(--ag-icon-button-hover-background-color); --ag-inherited-icon-button-hover-color: var(--ag-icon-button-hover-color); --ag-inherited-icon-color: var(--ag-icon-color); --ag-inherited-icon-size: var(--ag-icon-size); --ag-inherited-input-background-color: var(--ag-input-background-color); --ag-inherited-input-border: var(--ag-input-border); --ag-inherited-input-border-radius: var(--ag-input-border-radius); --ag-inherited-input-disabled-background-color: var(--ag-input-disabled-background-color); --ag-inherited-input-disabled-border: var(--ag-input-disabled-border); --ag-inherited-input-disabled-text-color: var(--ag-input-disabled-text-color); --ag-inherited-input-focus-background-color: var(--ag-input-focus-background-color); --ag-inherited-input-focus-border: var(--ag-input-focus-border); --ag-inherited-input-focus-shadow: var(--ag-input-focus-shadow); --ag-inherited-input-focus-text-color: var(--ag-input-focus-text-color); --ag-inherited-input-height: var(--ag-input-height); --ag-inherited-input-icon-color: var(--ag-input-icon-color); --ag-inherited-input-invalid-background-color: var(--ag-input-invalid-background-color); --ag-inherited-input-invalid-border: var(--ag-input-invalid-border); --ag-inherited-input-invalid-text-color: var(--ag-input-invalid-text-color); --ag-inherited-input-padding-start: var(--ag-input-padding-start); --ag-inherited-input-placeholder-text-color: var(--ag-input-placeholder-text-color); --ag-inherited-input-text-color: var(--ag-input-text-color); --ag-inherited-invalid-color: var(--ag-invalid-color); --ag-inherited-list-item-height: var(--ag-list-item-height); --ag-inherited-menu-background-color: var(--ag-menu-background-color); --ag-inherited-menu-border: var(--ag-menu-border); --ag-inherited-menu-separator-color: var(--ag-menu-separator-color); --ag-inherited-menu-shadow: var(--ag-menu-shadow); --ag-inherited-menu-text-color: var(--ag-menu-text-color); --ag-inherited-modal-overlay-background-color: var(--ag-modal-overlay-background-color); --ag-inherited-odd-row-background-color: var(--ag-odd-row-background-color); --ag-inherited-panel-background-color: var(--ag-panel-background-color); --ag-inherited-panel-title-bar-background-color: var(--ag-panel-title-bar-background-color); --ag-inherited-panel-title-bar-border: var(--ag-panel-title-bar-border); --ag-inherited-panel-title-bar-font-weight: var(--ag-panel-title-bar-font-weight); --ag-inherited-panel-title-bar-icon-color: var(--ag-panel-title-bar-icon-color); --ag-inherited-panel-title-bar-text-color: var(--ag-panel-title-bar-text-color); --ag-inherited-picker-button-background-color: var(--ag-picker-button-background-color); --ag-inherited-picker-button-border: var(--ag-picker-button-border); --ag-inherited-picker-button-focus-background-color: var(--ag-picker-button-focus-background-color); --ag-inherited-picker-button-focus-border: var(--ag-picker-button-focus-border); --ag-inherited-picker-list-background-color: var(--ag-picker-list-background-color); --ag-inherited-picker-list-border: var(--ag-picker-list-border); --ag-inherited-pinned-column-border: var(--ag-pinned-column-border); --ag-inherited-pinned-row-background-color: var(--ag-pinned-row-background-color); --ag-inherited-pinned-row-border: var(--ag-pinned-row-border); --ag-inherited-pinned-row-font-weight: var(--ag-pinned-row-font-weight); --ag-inherited-pinned-row-text-color: var(--ag-pinned-row-text-color); --ag-inherited-pinned-source-row-background-color: var(--ag-pinned-source-row-background-color); --ag-inherited-pinned-source-row-font-weight: var(--ag-pinned-source-row-font-weight); --ag-inherited-pinned-source-row-text-color: var(--ag-pinned-source-row-text-color); --ag-inherited-popup-shadow: var(--ag-popup-shadow); --ag-inherited-radio-checked-shape-image: var(--ag-radio-checked-shape-image); --ag-inherited-range-header-highlight-color: var(--ag-range-header-highlight-color); --ag-inherited-range-selection-background-color: var(--ag-range-selection-background-color); --ag-inherited-range-selection-border-color: var(--ag-range-selection-border-color); --ag-inherited-range-selection-border-style: var(--ag-range-selection-border-style); --ag-inherited-range-selection-chart-background-color: var(--ag-range-selection-chart-background-color); --ag-inherited-range-selection-chart-category-background-color: var(--ag-range-selection-chart-category-background-color); --ag-inherited-range-selection-highlight-color: var(--ag-range-selection-highlight-color); --ag-inherited-row-border: var(--ag-row-border); --ag-inherited-row-group-indent-size: var(--ag-row-group-indent-size); --ag-inherited-row-height: var(--ag-row-height); --ag-inherited-row-hover-color: var(--ag-row-hover-color); --ag-inherited-row-loading-skeleton-effect-color: var(--ag-row-loading-skeleton-effect-color); --ag-inherited-row-numbers-selected-color: var(--ag-row-numbers-selected-color); --ag-inherited-row-vertical-padding-scale: var(--ag-row-vertical-padding-scale); --ag-inherited-select-cell-background-color: var(--ag-select-cell-background-color); --ag-inherited-select-cell-border: var(--ag-select-cell-border); --ag-inherited-selected-row-background-color: var(--ag-selected-row-background-color); --ag-inherited-set-filter-indent-size: var(--ag-set-filter-indent-size); --ag-inherited-side-bar-background-color: var(--ag-side-bar-background-color); --ag-inherited-side-bar-panel-width: var(--ag-side-bar-panel-width); --ag-inherited-side-button-background-color: var(--ag-side-button-background-color); --ag-inherited-side-button-bar-background-color: var(--ag-side-button-bar-background-color); --ag-inherited-side-button-bar-top-padding: var(--ag-side-button-bar-top-padding); --ag-inherited-side-button-border: var(--ag-side-button-border); --ag-inherited-side-button-hover-background-color: var(--ag-side-button-hover-background-color); --ag-inherited-side-button-hover-text-color: var(--ag-side-button-hover-text-color); --ag-inherited-side-button-left-padding: var(--ag-side-button-left-padding); --ag-inherited-side-button-right-padding: var(--ag-side-button-right-padding); --ag-inherited-side-button-selected-background-color: var(--ag-side-button-selected-background-color); --ag-inherited-side-button-selected-border: var(--ag-side-button-selected-border); --ag-inherited-side-button-selected-text-color: var(--ag-side-button-selected-text-color); --ag-inherited-side-button-selected-underline-color: var(--ag-side-button-selected-underline-color); --ag-inherited-side-button-selected-underline-transition-duration: var(--ag-side-button-selected-underline-transition-duration); --ag-inherited-side-button-selected-underline-width: var(--ag-side-button-selected-underline-width); --ag-inherited-side-button-text-color: var(--ag-side-button-text-color); --ag-inherited-side-button-vertical-padding: var(--ag-side-button-vertical-padding); --ag-inherited-side-panel-border: var(--ag-side-panel-border); --ag-inherited-spacing: var(--ag-spacing); --ag-inherited-status-bar-label-color: var(--ag-status-bar-label-color); --ag-inherited-status-bar-label-font-weight: var(--ag-status-bar-label-font-weight); --ag-inherited-status-bar-value-color: var(--ag-status-bar-value-color); --ag-inherited-status-bar-value-font-weight: var(--ag-status-bar-value-font-weight); --ag-inherited-subtle-text-color: var(--ag-subtle-text-color); --ag-inherited-tab-background-color: var(--ag-tab-background-color); --ag-inherited-tab-bar-background-color: var(--ag-tab-bar-background-color); --ag-inherited-tab-bar-border: var(--ag-tab-bar-border); --ag-inherited-tab-bar-horizontal-padding: var(--ag-tab-bar-horizontal-padding); --ag-inherited-tab-bar-top-padding: var(--ag-tab-bar-top-padding); --ag-inherited-tab-bottom-padding: var(--ag-tab-bottom-padding); --ag-inherited-tab-horizontal-padding: var(--ag-tab-horizontal-padding); --ag-inherited-tab-hover-background-color: var(--ag-tab-hover-background-color); --ag-inherited-tab-hover-text-color: var(--ag-tab-hover-text-color); --ag-inherited-tab-selected-background-color: var(--ag-tab-selected-background-color); --ag-inherited-tab-selected-border-color: var(--ag-tab-selected-border-color); --ag-inherited-tab-selected-border-width: var(--ag-tab-selected-border-width); --ag-inherited-tab-selected-text-color: var(--ag-tab-selected-text-color); --ag-inherited-tab-selected-underline-color: var(--ag-tab-selected-underline-color); --ag-inherited-tab-selected-underline-transition-duration: var(--ag-tab-selected-underline-transition-duration); --ag-inherited-tab-selected-underline-width: var(--ag-tab-selected-underline-width); --ag-inherited-tab-spacing: var(--ag-tab-spacing); --ag-inherited-tab-text-color: var(--ag-tab-text-color); --ag-inherited-tab-top-padding: var(--ag-tab-top-padding); --ag-inherited-text-color: var(--ag-text-color); --ag-inherited-toggle-button-height: var(--ag-toggle-button-height); --ag-inherited-toggle-button-off-background-color: var(--ag-toggle-button-off-background-color); --ag-inherited-toggle-button-on-background-color: var(--ag-toggle-button-on-background-color); --ag-inherited-toggle-button-switch-background-color: var(--ag-toggle-button-switch-background-color); --ag-inherited-toggle-button-switch-inset: var(--ag-toggle-button-switch-inset); --ag-inherited-toggle-button-width: var(--ag-toggle-button-width); --ag-inherited-tool-panel-separator-border: var(--ag-tool-panel-separator-border); --ag-inherited-tooltip-background-color: var(--ag-tooltip-background-color); --ag-inherited-tooltip-border: var(--ag-tooltip-border); --ag-inherited-tooltip-text-color: var(--ag-tooltip-text-color); --ag-inherited-value-change-delta-down-color: var(--ag-value-change-delta-down-color); --ag-inherited-value-change-delta-up-color: var(--ag-value-change-delta-up-color); --ag-inherited-value-change-value-highlight-background-color: var(--ag-value-change-value-highlight-background-color); --ag-inherited-widget-container-horizontal-padding: var(--ag-widget-container-horizontal-padding); --ag-inherited-widget-container-vertical-padding: var(--ag-widget-container-vertical-padding); --ag-inherited-widget-horizontal-spacing: var(--ag-widget-horizontal-spacing); --ag-inherited-widget-vertical-spacing: var(--ag-widget-vertical-spacing); --ag-inherited-wrapper-border: var(--ag-wrapper-border); --ag-inherited-wrapper-border-radius: var(--ag-wrapper-border-radius); :where(\[data-ag-theme-mode="light"\]) & { --ag-inherited-browser-color-scheme: var(--ag-browser-color-scheme); --ag-inherited-chrome-background-color: var(--ag-chrome-background-color); } :where(\[data-ag-theme-mode="dark"\]) & { --ag-inherited-advanced-filter-builder-column-pill-color: var(--ag-advanced-filter-builder-column-pill-color); --ag-inherited-advanced-filter-builder-join-pill-color: var(--ag-advanced-filter-builder-join-pill-color); --ag-inherited-advanced-filter-builder-option-pill-color: var(--ag-advanced-filter-builder-option-pill-color); --ag-inherited-advanced-filter-builder-value-pill-color: var(--ag-advanced-filter-builder-value-pill-color); --ag-inherited-browser-color-scheme: var(--ag-browser-color-scheme); --ag-inherited-chrome-background-color: var(--ag-chrome-background-color); --ag-inherited-find-active-match-color: var(--ag-find-active-match-color); --ag-inherited-find-match-color: var(--ag-find-match-color); --ag-inherited-menu-background-color: var(--ag-menu-background-color); } :where(\[data-ag-theme-mode="dark-blue"\]) & { --ag-inherited-advanced-filter-builder-column-pill-color: var(--ag-advanced-filter-builder-column-pill-color); --ag-inherited-advanced-filter-builder-join-pill-color: var(--ag-advanced-filter-builder-join-pill-color); --ag-inherited-advanced-filter-builder-option-pill-color: var(--ag-advanced-filter-builder-option-pill-color); --ag-inherited-advanced-filter-builder-value-pill-color: var(--ag-advanced-filter-builder-value-pill-color); --ag-inherited-browser-color-scheme: var(--ag-browser-color-scheme); --ag-inherited-chrome-background-color: var(--ag-chrome-background-color); --ag-inherited-find-active-match-color: var(--ag-find-active-match-color); --ag-inherited-find-match-color: var(--ag-find-match-color); --ag-inherited-menu-background-color: var(--ag-menu-background-color); } }
 
 Drag here to set row groups
 
@@ -54,120 +64,23 @@ Page Size:
 
 Page 1 of 1
 
-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; }
-
-import { useState } from 'react';
-import {
-  IressButton,
-  IressModal,
-  IressText,
-  IressToasterProvider,
-  useToaster,
-} from '@iress-oss/ids-components';
-import { AG\_THEME\_IRESS\_ICONS, IressAgGridContainer } from '@iress/ids-themes';
-import { AgGridReact, AgGridReactProps } from 'ag-grid-react';
-import { AllCommunityModule, ModuleRegistry, provideGlobalGridOptions, type ColDef, type ICellRendererParams } from 'ag-grid-community';
-import styles from '@iress-storybook/styles.module.scss';
-ModuleRegistry.registerModules(\[AllCommunityModule\]);
-provideGlobalGridOptions({ theme: 'legacy' });
-const OrderCar \= ({ data }: ICellRendererParams) \=> {
-  const \[show, setShow\] \= useState(false);
-  const { success } \= useToaster();
-  return (
-    <\>
-      <IressButton onClick\={() \=> setShow(true)}\>Order</IressButton\>
-      <IressModal show\={show} onShowChange\={setShow}\>
-        <IressText\>
-          <h2\>Order a car</h2\>
-          <p\>
-            Car: {data.make} {data.model}
-          </p\>
-          <p\>
-            <IressButton
-              onClick\={() \=> {
-                success({
-                  children: 'Order submitted',
-                });
-                setShow(false);
-              }}
-            \>
-              Submit            </IressButton\>
-          </p\>
-        </IressText\>
-      </IressModal\>
-    </\>
-  );
-};
-export const AgGridSimple \= (args: AgGridReactProps) \=> {
-  // Row Data: The data to be displayed.
-  const \[rowData\] \= useState(\[
-    { make: 'Tesla', model: 'Model Y', price: 64950, electric: true },
-    { make: 'Ford', model: 'F-Series', price: 33850, electric: false },
-    { make: 'Toyota', model: 'Corolla', price: 29600, electric: false },
-  \]);
-  // Column Definitions: Defines the columns to be displayed.
-  const \[colDefs\] \= useState<ColDef\[\]\>(\[
-    {
-      field: 'make',
-      filter: true,
-      floatingFilter: true,
-      flex: 2,
-      checkboxSelection: true,
-    },
-    { field: 'model', flex: 1, autoHeight: true },
-    {
-      field: 'price',
-      flex: 1,
-      autoHeight: true,
-      valueFormatter: (price) \=> \`$${price.value.toLocaleString()}\`,
-    },
-    { field: 'electric', flex: 1, editable: true, autoHeight: true },
-    { field: 'order', flex: 1, cellRenderer: OrderCar },
-  \]);
-  return (
-    <IressToasterProvider\>
-      <IressAgGridContainer
-        alignMiddle
-        style\={{ height: '300px' }}
-      \>
-        <AgGridReact
-          {...args}
-          rowData\={rowData}
-          rowClassRules\={{
-            \[styles.highlightDanger\]: (params) \=> params.data.make \=== 'Toyota',
-          }}
-          rowSelection\="multiple"
-          columnDefs\={colDefs}
-          icons\={AG\_THEME\_IRESS\_ICONS}
-          pagination
-          paginationPageSize\={500}
-          paginationPageSizeSelector\={\[200, 500, 1000\]}
-        />
-      </IressAgGridContainer\>
-    </IressToasterProvider\>
-  );
-};
-export default AgGridSimple;
-
-Copy
+Show code
 
-[](#props-api)Props (API)
--------------------------
+[](#props)Props
+---------------
 
 AG Grid is a third-party library and has its own API. To use AG Grid, you will need to refer to the [AG Grid documentation](https://www.ag-grid.com/react-data-grid).
 
 [](#usage)Usage
 ---------------
 
-The `@iress/ids-themes` package provides an Iress theme for AG Grid. This theme is intended to be used on top of the Alpine theme. It works by mapping the AG grid CSS variables to the IDS design tokens, hence it should work with all IDS/Styler themes.
+The `@iress/ids-themes` package provides an Iress theme for AG Grid. It works by mapping the AG grid CSS variables to the IDS design tokens, hence it should work with all IDS/Styler themes.
 
 ### [](#installation)Installation
 
 1.  Ensure you have [AG grid installed](https://www.ag-grid.com/react-data-grid/getting-started/) in your project.
 2.  Add the `@iress/ids-themes` package to your project with `yarn add @iress/ids-themes`.
-3.  Import the `IressAgGridContainer` component from the package and wrap your AG Grid component with it.
+3.  Import the `getAgGridThemeProps()` function from the package and spread it onto your `<AgGridReact />` component.
 
 \[data-radix-scroll-area-viewport\] {
   scrollbar-width: none;
@@ -186,19 +99,20 @@ The `@iress/ids-themes` package provides an Iress theme for AG Grid. This theme
   flex-grow: 1;
 }
 
-import { IressAgGridContainer } from '@iress/ids-themes';
-<IressAgGridContainer\>
-  <AgGridReact />
-</IressAgGridContainer\>;
+import { getAgGridThemeProps } from '@iress/ids-themes';
+<AgGridReact {...getAgGridThemeProps()} />;
 
 Copy
 
-**Note:** It is important that you ensure the ag-theme-iress-lite CSS class is imported _after_ ag-theme-alpine. If you do not copy the order correctly, you will see some styling issues.
-
 ### [](#version)Version
 
 The version of AG Grid that the theme is supporting is: `ag-grid-react@^33.0.0`
 
+Only compatible with AG Grid v33+
+---------------------------------
+
+As of AG Grid v33, the library has moved to use CSS-in-JS rather than CSS for its mapping, as per the new AG Grid theming API. This means that the Iress theme for AG Grid is only compatible with AG Grid v33 and above.
+
 [](#examples)Examples
 ---------------------
 
@@ -206,7 +120,9 @@ The version of AG Grid that the theme is supporting is: `ag-grid-react@^33.0.0`
 
 This is a simple example, based on the [Quick Start](https://www.ag-grid.com/react-data-grid/getting-started/) example from the AG Grid documentation.
 
-1 to 3 of 3. Page 1 of 1
+.ag-cell.iress--positive, .ag-cell .iress--positive, .iress--positive .ag-cell { color: var(--iress-colour-system-success-text, #015537); }
+
+:where(.ag-theme-params-1) { --ag-accent-color: var(--ag-inherited-accent-color, var(--iress-colour-primary-fill, #13213F)); --ag-advanced-filter-builder-button-bar-border: var(--ag-inherited-advanced-filter-builder-button-bar-border, solid 1px var(--ag-border-color)); --ag-advanced-filter-builder-column-pill-color: var(--ag-inherited-advanced-filter-builder-column-pill-color, #a6e194); --ag-advanced-filter-builder-indent-size: var(--ag-inherited-advanced-filter-builder-indent-size, calc( var(--ag-spacing) \* 2 + var(--ag-icon-size) )); --ag-advanced-filter-builder-join-pill-color: var(--ag-inherited-advanced-filter-builder-join-pill-color, #f08e8d); --ag-advanced-filter-builder-option-pill-color: var(--ag-inherited-advanced-filter-builder-option-pill-color, #f3c08b); --ag-advanced-filter-builder-value-pill-color: var(--ag-inherited-advanced-filter-builder-value-pill-color, #85c0e4); --ag-background-color: var(--ag-inherited-background-color, var(--iress-colour-neutral-10, #FFFFFF)); --ag-border-color: var(--ag-inherited-border-color, var(--iress-colour-neutral-30, #E4E5E7)); --ag-border-radius: var(--ag-inherited-border-radius, var(--iress-radius-system-layout, var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem))); --ag-browser-color-scheme: var(--ag-inherited-browser-color-scheme, light); --ag-button-active-background-color: var(--ag-inherited-button-active-background-color, var(--ag-accent-color)); --ag-button-active-border: var(--ag-inherited-button-active-border, var(--ag-button-hover-border)); --ag-button-active-text-color: var(--ag-inherited-button-active-text-color, var(--ag-background-color)); --ag-button-background-color: var(--ag-inherited-button-background-color, var(--iress-colour-primary-surface, #D9E5FF)); --ag-button-border: var(--ag-inherited-button-border, solid 1px var(--iress-colour-primary-surface, #D9E5FF)); --ag-button-border-radius: var(--ag-inherited-button-border-radius, var(--iress-radius-system-button, var(--iress-radius-075, calc(0.75 \* 1rem)) var(--iress-radius-075, calc(0.75 \* 1rem)) var(--iress-radius-075, calc(0.75 \* 1rem)) var(--iress-radius-075, calc(0.75 \* 1rem)))); --ag-button-disabled-background-color: var(--ag-inherited-button-disabled-background-color, var(--ag-input-disabled-background-color)); --ag-button-disabled-border: var(--ag-inherited-button-disabled-border, var(--ag-input-disabled-border)); --ag-button-disabled-text-color: var(--ag-inherited-button-disabled-text-color, var(--ag-input-disabled-text-color)); --ag-button-font-weight: var(--ag-inherited-button-font-weight, 600); --ag-button-horizontal-padding: var(--ag-inherited-button-horizontal-padding, calc( var(--ag-spacing) \* 2)); --ag-button-hover-background-color: var(--ag-inherited-button-hover-background-color, var(--ag-row-hover-color)); --ag-button-hover-border: var(--ag-inherited-button-hover-border, var(--ag-button-border)); --ag-button-hover-text-color: var(--ag-inherited-button-hover-text-color, var(--ag-button-text-color)); --ag-button-text-color: var(--ag-inherited-button-text-color, var(--iress-colour-primary-text, #13213F)); --ag-button-vertical-padding: var(--ag-inherited-button-vertical-padding, var(--ag-spacing)); --ag-card-shadow: var(--ag-inherited-card-shadow, var(--iress-elevation-raised-shadow, 0px 3px 5px #091E4220)); --ag-cell-editing-border: var(--ag-inherited-cell-editing-border, solid 1px var(--ag-accent-color)); --ag-cell-editing-shadow: var(--ag-inherited-cell-editing-shadow, var(--ag-card-shadow)); --ag-cell-font-family: var(--ag-inherited-cell-font-family, var(--iress-typography-base-body-font, Inter, Helvetica, sans-serif)); --ag-cell-horizontal-padding: var(--ag-inherited-cell-horizontal-padding, calc( var(--ag-spacing) \* 2 \* var(--ag-cell-horizontal-padding-scale) )); --ag-cell-horizontal-padding-scale: var(--ag-inherited-cell-horizontal-padding-scale, 1); --ag-cell-text-color: var(--ag-inherited-cell-text-color, var(--ag-text-color)); --ag-cell-widget-spacing: var(--ag-inherited-cell-widget-spacing, calc( var(--ag-spacing) \* 1.5)); --ag-chart-menu-label-color: var(--ag-inherited-chart-menu-label-color, color-mix(in srgb, transparent, var(--ag-foreground-color) 80%)); --ag-chart-menu-panel-width: var(--ag-inherited-chart-menu-panel-width, 260px); --ag-checkbox-border-radius: var(--ag-inherited-checkbox-border-radius, var(--iress-radius-system-badge, var(--iress-radius-025, calc(0.25 \* 1rem)) var(--iress-radius-025, calc(0.25 \* 1rem)) var(--iress-radius-025, calc(0.25 \* 1rem)) var(--iress-radius-025, calc(0.25 \* 1rem)))); --ag-checkbox-border-width: var(--ag-inherited-checkbox-border-width, 1px); --ag-checkbox-checked-background-color: var(--ag-inherited-checkbox-checked-background-color, var(--iress-colour-primary-fill, #13213F)); --ag-checkbox-checked-border-color: var(--ag-inherited-checkbox-checked-border-color, var(--iress-colour-primary-fill, #13213F)); --ag-checkbox-checked-shape-color: var(--ag-inherited-checkbox-checked-shape-color, var(--iress-colour-primary-on-fill, #ECF2FF)); --ag-checkbox-checked-shape-image: var(--ag-inherited-checkbox-checked-shape-image, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%227%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.75%22%20d%3D%22M1%203.5%203.5%206l5-5%22%2F%3E%3C%2Fsvg%3E")); --ag-checkbox-indeterminate-background-color: var(--ag-inherited-checkbox-indeterminate-background-color, var(--iress-colour-primary-fill, #13213F)); --ag-checkbox-indeterminate-border-color: var(--ag-inherited-checkbox-indeterminate-border-color, var(--iress-colour-primary-fill, #13213F)); --ag-checkbox-indeterminate-shape-color: var(--ag-inherited-checkbox-indeterminate-shape-color, var(--iress-colour-primary-on-fill, #ECF2FF)); --ag-checkbox-indeterminate-shape-image: var(--ag-inherited-checkbox-indeterminate-shape-image, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%222%22%20fill%3D%22none%22%3E%3Crect%20width%3D%2210%22%20height%3D%222%22%20fill%3D%22%23000%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E")); --ag-checkbox-unchecked-background-color: var(--ag-inherited-checkbox-unchecked-background-color, var(--iress-colour-neutral-10, #FFFFFF)); --ag-checkbox-unchecked-border-color: var(--ag-inherited-checkbox-unchecked-border-color, var(--iress-colour-neutral-70, #6D7278)); --ag-chrome-background-color: var(--ag-inherited-chrome-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 2%)); --ag-column-border: var(--ag-inherited-column-border, solid 1px transparent); --ag-column-drop-cell-background-color: var(--ag-inherited-column-drop-cell-background-color, color-mix(in srgb, transparent, var(--ag-foreground-color) 7.000000000000001%)); --ag-column-drop-cell-border: var(--ag-inherited-column-drop-cell-border, solid 1px color-mix(in srgb, transparent, var(--ag-foreground-color) 13%)); --ag-column-drop-cell-drag-handle-color: var(--ag-inherited-column-drop-cell-drag-handle-color, var(--ag-text-color)); --ag-column-drop-cell-text-color: var(--ag-inherited-column-drop-cell-text-color, var(--ag-text-color)); --ag-column-hover-color: var(--ag-inherited-column-hover-color, var(--iress-colour-neutral-20, #F9F9F9)); --ag-column-select-indent-size: var(--ag-inherited-column-select-indent-size, var(--ag-icon-size)); --ag-data-font-size: var(--ag-inherited-data-font-size, var(--iress-typography-base-size, .875rem)); --ag-dialog-border: var(--ag-inherited-dialog-border, solid 1px color-mix(in srgb, transparent, var(--ag-foreground-color) 20%)); --ag-dialog-shadow: var(--ag-inherited-dialog-shadow, var(--iress-elevation-floating-shadow, 0px 10px 18px #091E4215)); --ag-drag-and-drop-image-background-color: var(--ag-inherited-drag-and-drop-image-background-color, var(--ag-background-color)); --ag-drag-and-drop-image-border: var(--ag-inherited-drag-and-drop-image-border, solid 1px var(--ag-border-color)); --ag-drag-and-drop-image-shadow: var(--ag-inherited-drag-and-drop-image-shadow, var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF)); --ag-drag-handle-color: var(--ag-inherited-drag-handle-color, color-mix(in srgb, transparent, var(--ag-foreground-color) 70%)); --ag-dropdown-shadow: var(--ag-inherited-dropdown-shadow, var(--iress-elevation-floating-shadow, 0px 10px 18px #091E4215)); --ag-filter-tool-panel-group-indent: var(--ag-inherited-filter-tool-panel-group-indent, var(--ag-spacing)); --ag-find-active-match-background-color: var(--ag-inherited-find-active-match-background-color, #ffa500); --ag-find-active-match-color: var(--ag-inherited-find-active-match-color, var(--ag-foreground-color)); --ag-find-match-background-color: var(--ag-inherited-find-match-background-color, #ffff00); --ag-find-match-color: var(--ag-inherited-find-match-color, var(--ag-foreground-color)); --ag-focus-shadow: var(--ag-inherited-focus-shadow, var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF)); --ag-font-family: var(--ag-inherited-font-family, var(--iress-typography-base-body-font, Inter, Helvetica, sans-serif)); --ag-font-size: var(--ag-inherited-font-size, var(--iress-typography-base-size, .875rem)); --ag-footer-row-border: var(--ag-inherited-footer-row-border, var(--ag-row-border)); --ag-foreground-color: var(--ag-inherited-foreground-color, var(--iress-colour-neutral-80, #393F46)); --ag-header-background-color: var(--ag-inherited-header-background-color, var(--iress-colour-neutral-10, #FFFFFF)); --ag-header-cell-background-transition-duration: var(--ag-inherited-header-cell-background-transition-duration, 0.2s); --ag-header-cell-hover-background-color: var(--ag-inherited-header-cell-hover-background-color, transparent); --ag-header-cell-moving-background-color: var(--ag-inherited-header-cell-moving-background-color, var(--ag-header-cell-hover-background-color)); --ag-header-column-border: var(--ag-inherited-header-column-border, none); --ag-header-column-border-height: var(--ag-inherited-header-column-border-height, 100%); --ag-header-column-resize-handle-color: var(--ag-inherited-header-column-resize-handle-color, var(--ag-border-color)); --ag-header-column-resize-handle-height: var(--ag-inherited-header-column-resize-handle-height, 30%); --ag-header-column-resize-handle-width: var(--ag-inherited-header-column-resize-handle-width, 2px); --ag-header-font-family: var(--ag-inherited-header-font-family, var(--iress-typography-base-body-font, Inter, Helvetica, sans-serif)); --ag-header-font-size: var(--ag-inherited-header-font-size, var(--ag-font-size)); --ag-header-font-weight: var(--ag-inherited-header-font-weight, 700); --ag-header-height: var(--ag-inherited-header-height, calc(max( var(--ag-icon-size) , var(--ag-data-font-size) ) + var(--ag-spacing) \* 4 \* var(--ag-header-vertical-padding-scale) )); --ag-header-row-border: var(--ag-inherited-header-row-border, solid 1px var(--iress-colour-neutral-40, #D7D8DA)); --ag-header-text-color: var(--ag-inherited-header-text-color, var(--ag-text-color)); --ag-header-vertical-padding-scale: var(--ag-inherited-header-vertical-padding-scale, 1); --ag-icon-button-active-background-color: var(--ag-inherited-icon-button-active-background-color, transparent); --ag-icon-button-active-color: var(--ag-inherited-icon-button-active-color, var(--ag-accent-color)); --ag-icon-button-active-indicator-color: var(--ag-inherited-icon-button-active-indicator-color, var(--ag-accent-color)); --ag-icon-button-background-color: var(--ag-inherited-icon-button-background-color, transparent); --ag-icon-button-background-spread: var(--ag-inherited-icon-button-background-spread, 4px); --ag-icon-button-border-radius: var(--ag-inherited-icon-button-border-radius, 1px); --ag-icon-button-color: var(--ag-inherited-icon-button-color, var(--ag-icon-color)); --ag-icon-button-hover-background-color: var(--ag-inherited-icon-button-hover-background-color, transparent); --ag-icon-button-hover-color: var(--ag-inherited-icon-button-hover-color, var(--ag-accent-color)); --ag-icon-color: var(--ag-inherited-icon-color, inherit); --ag-icon-size: var(--ag-inherited-icon-size, 16px); --ag-input-background-color: var(--ag-inherited-input-background-color, var(--ag-background-color)); --ag-input-border: var(--ag-inherited-input-border, solid 1px var(--iress-colour-neutral-70, #6D7278)); --ag-input-border-radius: var(--ag-inherited-input-border-radius, var(--iress-radius-system-form, var(--iress-radius-050, calc(0.5 \* 1rem)) var(--iress-radius-050, calc(0.5 \* 1rem)) var(--iress-radius-050, calc(0.5 \* 1rem)) var(--iress-radius-050, calc(0.5 \* 1rem)))); --ag-input-disabled-background-color: var(--ag-inherited-input-disabled-background-color, var(--iress-colour-neutral-20, #F9F9F9)); --ag-input-disabled-border: var(--ag-inherited-input-disabled-border, solid 1px var(--iress-colour-neutral-40, #D7D8DA)); --ag-input-disabled-text-color: var(--ag-inherited-input-disabled-text-color, var(--iress-colour-neutral-60, #878B92)); --ag-input-focus-background-color: var(--ag-inherited-input-focus-background-color, var(--ag-input-background-color)); --ag-input-focus-border: var(--ag-inherited-input-focus-border, solid 1px color-mix(in srgb, transparent, var(--ag-accent-color) 40%)); --ag-input-focus-shadow: var(--ag-inherited-input-focus-shadow, var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF)); --ag-input-focus-text-color: var(--ag-inherited-input-focus-text-color, var(--ag-input-text-color)); --ag-input-height: var(--ag-inherited-input-height, calc(max( var(--ag-icon-size) , var(--ag-font-size) ) + var(--ag-spacing) \* 2)); --ag-input-icon-color: var(--ag-inherited-input-icon-color, var(--iress-colour-neutral-70, #6D7278)); --ag-input-invalid-background-color: var(--ag-inherited-input-invalid-background-color, var(--iress-colour-system-danger-surface, #FEE8E7)); --ag-input-invalid-border: var(--ag-inherited-input-invalid-border, var(--iress-colour-system-danger-fill, #C20A0A)); --ag-input-invalid-text-color: var(--ag-inherited-input-invalid-text-color, var(--iress-colour-system-danger-text, #970202)); --ag-input-padding-start: var(--ag-inherited-input-padding-start, var(--ag-spacing)); --ag-input-placeholder-text-color: var(--ag-inherited-input-placeholder-text-color, color-mix(in srgb, transparent, var(--ag-input-text-color) 50%)); --ag-input-text-color: var(--ag-inherited-input-text-color, var(--iress-colour-neutral-80, #393F46)); --ag-invalid-color: var(--ag-inherited-invalid-color, var(--iress-colour-system-danger-fill, #C20A0A)); --ag-list-item-height: var(--ag-inherited-list-item-height, calc(max( var(--ag-icon-size) , var(--ag-data-font-size) ) + var(--ag-widget-vertical-spacing) )); --ag-menu-background-color: var(--ag-inherited-menu-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 3%)); --ag-menu-border: var(--ag-inherited-menu-border, solid 1px color-mix(in srgb, transparent, var(--ag-foreground-color) 20%)); --ag-menu-separator-color: var(--ag-inherited-menu-separator-color, var(--ag-border-color)); --ag-menu-shadow: var(--ag-inherited-menu-shadow, var(--iress-elevation-floating-shadow, 0px 10px 18px #091E4215)); --ag-menu-text-color: var(--ag-inherited-menu-text-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 95%)); --ag-modal-overlay-background-color: var(--ag-inherited-modal-overlay-background-color, var(--iress-colour-system-backdrop-fill, #393F46CC)); --ag-odd-row-background-color: var(--ag-inherited-odd-row-background-color, var(--iress-colour-neutral-10, #FFFFFF)); --ag-panel-background-color: var(--ag-inherited-panel-background-color, var(--ag-background-color)); --ag-panel-title-bar-background-color: var(--ag-inherited-panel-title-bar-background-color, var(--ag-header-background-color)); --ag-panel-title-bar-border: var(--ag-inherited-panel-title-bar-border, solid 1px var(--ag-border-color)); --ag-panel-title-bar-font-weight: var(--ag-inherited-panel-title-bar-font-weight, var(--ag-header-font-weight)); --ag-panel-title-bar-icon-color: var(--ag-inherited-panel-title-bar-icon-color, var(--ag-header-text-color)); --ag-panel-title-bar-text-color: var(--ag-inherited-panel-title-bar-text-color, var(--ag-header-text-color)); --ag-picker-button-background-color: var(--ag-inherited-picker-button-background-color, var(--ag-background-color)); --ag-picker-button-border: var(--ag-inherited-picker-button-border, solid 1px var(--ag-border-color)); --ag-picker-button-focus-background-color: var(--ag-inherited-picker-button-focus-background-color, var(--ag-background-color)); --ag-picker-button-focus-border: var(--ag-inherited-picker-button-focus-border, var(--ag-input-focus-border)); --ag-picker-list-background-color: var(--ag-inherited-picker-list-background-color, var(--ag-background-color)); --ag-picker-list-border: var(--ag-inherited-picker-list-border, solid 1px var(--ag-border-color)); --ag-pinned-column-border: var(--ag-inherited-pinned-column-border, solid 1px var(--ag-border-color)); --ag-pinned-row-background-color: var(--ag-inherited-pinned-row-background-color, var(--ag-background-color)); --ag-pinned-row-border: var(--ag-inherited-pinned-row-border, solid 1px var(--ag-border-color)); --ag-pinned-row-font-weight: var(--ag-inherited-pinned-row-font-weight, 600); --ag-pinned-row-text-color: var(--ag-inherited-pinned-row-text-color, var(--ag-text-color)); --ag-pinned-source-row-background-color: var(--ag-inherited-pinned-source-row-background-color, var(--ag-background-color)); --ag-pinned-source-row-font-weight: var(--ag-inherited-pinned-source-row-font-weight, 600); --ag-pinned-source-row-text-color: var(--ag-inherited-pinned-source-row-text-color, var(--ag-text-color)); --ag-popup-shadow: var(--ag-inherited-popup-shadow, var(--iress-elevation-floating-shadow, 0px 10px 18px #091E4215)); --ag-radio-checked-shape-image: var(--ag-inherited-radio-checked-shape-image, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%226%22%20height%3D%226%22%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%223%22%20cy%3D%223%22%20r%3D%223%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E")); --ag-range-header-highlight-color: var(--ag-inherited-range-header-highlight-color, color-mix(in srgb, var(--ag-header-background-color), var(--ag-foreground-color) 8%)); --ag-range-selection-background-color: var(--ag-inherited-range-selection-background-color, color-mix(in srgb, transparent, var(--ag-accent-color) 10%)); --ag-range-selection-border-color: var(--ag-inherited-range-selection-border-color, var(--iress-colour-primary-fill, #13213F)); --ag-range-selection-border-style: var(--ag-inherited-range-selection-border-style, solid); --ag-range-selection-chart-background-color: var(--ag-inherited-range-selection-chart-background-color, #0058FF1A); --ag-range-selection-chart-category-background-color: var(--ag-inherited-range-selection-chart-category-background-color, #00FF841A); --ag-range-selection-highlight-color: var(--ag-inherited-range-selection-highlight-color, color-mix(in srgb, transparent, var(--ag-accent-color) 50%)); --ag-row-border: var(--ag-inherited-row-border, solid 1px var(--iress-colour-neutral-40, #D7D8DA)); --ag-row-group-indent-size: var(--ag-inherited-row-group-indent-size, calc( var(--ag-cell-widget-spacing) + var(--ag-icon-size) )); --ag-row-height: var(--ag-inherited-row-height, calc(max( var(--ag-icon-size) , var(--ag-data-font-size) ) + var(--ag-spacing) \* 3.25 \* var(--ag-row-vertical-padding-scale) )); --ag-row-hover-color: var(--ag-inherited-row-hover-color, var(--iress-colour-primary-surface, #D9E5FF)); --ag-row-loading-skeleton-effect-color: var(--ag-inherited-row-loading-skeleton-effect-color, color-mix(in srgb, transparent, var(--ag-foreground-color) 15%)); --ag-row-numbers-selected-color: var(--ag-inherited-row-numbers-selected-color, color-mix(in srgb, transparent, var(--ag-accent-color) 50%)); --ag-row-vertical-padding-scale: var(--ag-inherited-row-vertical-padding-scale, 1); --ag-select-cell-background-color: var(--ag-inherited-select-cell-background-color, color-mix(in srgb, transparent, var(--ag-foreground-color) 7.000000000000001%)); --ag-select-cell-border: var(--ag-inherited-select-cell-border, solid 1px color-mix(in srgb, transparent, var(--ag-foreground-color) 13%)); --ag-selected-row-background-color: var(--ag-inherited-selected-row-background-color, var(--iress-colour-neutral-20, #F9F9F9)); --ag-set-filter-indent-size: var(--ag-inherited-set-filter-indent-size, var(--ag-icon-size)); --ag-side-bar-background-color: var(--ag-inherited-side-bar-background-color, transparent); --ag-side-bar-panel-width: var(--ag-inherited-side-bar-panel-width, 250px); --ag-side-button-background-color: var(--ag-inherited-side-button-background-color, transparent); --ag-side-button-bar-background-color: var(--ag-inherited-side-button-bar-background-color, var(--ag-side-bar-background-color)); --ag-side-button-bar-top-padding: var(--ag-inherited-side-button-bar-top-padding, calc( var(--ag-spacing) \* 3)); --ag-side-button-border: var(--ag-inherited-side-button-border, none); --ag-side-button-hover-background-color: var(--ag-inherited-side-button-hover-background-color, var(--ag-side-button-background-color)); --ag-side-button-hover-text-color: var(--ag-inherited-side-button-hover-text-color, var(--ag-accent-color)); --ag-side-button-left-padding: var(--ag-inherited-side-button-left-padding, var(--ag-spacing)); --ag-side-button-right-padding: var(--ag-inherited-side-button-right-padding, var(--ag-spacing)); --ag-side-button-selected-background-color: var(--ag-inherited-side-button-selected-background-color, transparent); --ag-side-button-selected-border: var(--ag-inherited-side-button-selected-border, none); --ag-side-button-selected-text-color: var(--ag-inherited-side-button-selected-text-color, var(--ag-side-button-text-color)); --ag-side-button-selected-underline-color: var(--ag-inherited-side-button-selected-underline-color, var(--ag-accent-color)); --ag-side-button-selected-underline-transition-duration: var(--ag-inherited-side-button-selected-underline-transition-duration, 0.3s); --ag-side-button-selected-underline-width: var(--ag-inherited-side-button-selected-underline-width, 2px); --ag-side-button-text-color: var(--ag-inherited-side-button-text-color, var(--ag-text-color)); --ag-side-button-vertical-padding: var(--ag-inherited-side-button-vertical-padding, calc( var(--ag-spacing) \* 3)); --ag-side-panel-border: var(--ag-inherited-side-panel-border, solid 1px var(--ag-border-color)); --ag-spacing: var(--ag-inherited-spacing, 8px); --ag-status-bar-label-color: var(--ag-inherited-status-bar-label-color, var(--ag-foreground-color)); --ag-status-bar-label-font-weight: var(--ag-inherited-status-bar-label-font-weight, 500); --ag-status-bar-value-color: var(--ag-inherited-status-bar-value-color, var(--ag-foreground-color)); --ag-status-bar-value-font-weight: var(--ag-inherited-status-bar-value-font-weight, 500); --ag-subtle-text-color: var(--ag-inherited-subtle-text-color, var(--iress-colour-neutral-70, #6D7278)); --ag-tab-background-color: var(--ag-inherited-tab-background-color, transparent); --ag-tab-bar-background-color: var(--ag-inherited-tab-bar-background-color, var(--ag-chrome-background-color)); --ag-tab-bar-border: var(--ag-inherited-tab-bar-border, solid 1px var(--iress-colour-primary-fill, #13213F)); --ag-tab-bar-horizontal-padding: var(--ag-inherited-tab-bar-horizontal-padding, 0px); --ag-tab-bar-top-padding: var(--ag-inherited-tab-bar-top-padding, 0px); --ag-tab-bottom-padding: var(--ag-inherited-tab-bottom-padding, var(--ag-spacing)); --ag-tab-horizontal-padding: var(--ag-inherited-tab-horizontal-padding, var(--ag-spacing)); --ag-tab-hover-background-color: var(--ag-inherited-tab-hover-background-color, var(--ag-tab-background-color)); --ag-tab-hover-text-color: var(--ag-inherited-tab-hover-text-color, var(--ag-accent-color)); --ag-tab-selected-background-color: var(--ag-inherited-tab-selected-background-color, var(--ag-tab-background-color)); --ag-tab-selected-border-color: var(--ag-inherited-tab-selected-border-color, transparent); --ag-tab-selected-border-width: var(--ag-inherited-tab-selected-border-width, 0px); --ag-tab-selected-text-color: var(--ag-inherited-tab-selected-text-color, var(--ag-accent-color)); --ag-tab-selected-underline-color: var(--ag-inherited-tab-selected-underline-color, var(--ag-accent-color)); --ag-tab-selected-underline-transition-duration: var(--ag-inherited-tab-selected-underline-transition-duration, 0.3s); --ag-tab-selected-underline-width: var(--ag-inherited-tab-selected-underline-width, 2px); --ag-tab-spacing: var(--ag-inherited-tab-spacing, 0); --ag-tab-text-color: var(--ag-inherited-tab-text-color, var(--ag-text-color)); --ag-tab-top-padding: var(--ag-inherited-tab-top-padding, var(--ag-spacing)); --ag-text-color: var(--ag-inherited-text-color, var(--ag-foreground-color)); --ag-toggle-button-height: var(--ag-inherited-toggle-button-height, 18px); --ag-toggle-button-off-background-color: var(--ag-inherited-toggle-button-off-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 45%)); --ag-toggle-button-on-background-color: var(--ag-inherited-toggle-button-on-background-color, var(--ag-accent-color)); --ag-toggle-button-switch-background-color: var(--ag-inherited-toggle-button-switch-background-color, var(--ag-background-color)); --ag-toggle-button-switch-inset: var(--ag-inherited-toggle-button-switch-inset, 1px); --ag-toggle-button-width: var(--ag-inherited-toggle-button-width, 28px); --ag-tool-panel-separator-border: var(--ag-inherited-tool-panel-separator-border, solid 1px var(--ag-border-color)); --ag-tooltip-background-color: var(--ag-inherited-tooltip-background-color, var(--iress-colour-neutral-80, #393F46)); --ag-tooltip-border: var(--ag-inherited-tooltip-border, solid 1px var(--ag-border-color)); --ag-tooltip-text-color: var(--ag-inherited-tooltip-text-color, var(--iress-colour-neutral-10, #FFFFFF)); --ag-value-change-delta-down-color: var(--ag-inherited-value-change-delta-down-color, var(--iress-colour-system-danger-fill, #C20A0A)); --ag-value-change-delta-up-color: var(--ag-inherited-value-change-delta-up-color, var(--iress-colour-system-success-fill, #02794D)); --ag-value-change-value-highlight-background-color: var(--ag-inherited-value-change-value-highlight-background-color, color-mix(in srgb, transparent, var(--ag-accent-color) 20%)); --ag-widget-container-horizontal-padding: var(--ag-inherited-widget-container-horizontal-padding, calc( var(--ag-spacing) \* 1.5)); --ag-widget-container-vertical-padding: var(--ag-inherited-widget-container-vertical-padding, calc( var(--ag-spacing) \* 1.5)); --ag-widget-horizontal-spacing: var(--ag-inherited-widget-horizontal-spacing, calc( var(--ag-spacing) \* 1.5)); --ag-widget-vertical-spacing: var(--ag-inherited-widget-vertical-spacing, var(--ag-spacing)); --ag-wrapper-border: var(--ag-inherited-wrapper-border, none); --ag-wrapper-border-radius: var(--ag-inherited-wrapper-border-radius, var(--iress-radius-system-layout, var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem))); :where(\[data-ag-theme-mode="light"\]) & { --ag-browser-color-scheme: var(--ag-inherited-browser-color-scheme, light); --ag-chrome-background-color: var(--ag-inherited-chrome-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 2%)); } :where(\[data-ag-theme-mode="dark"\]) & { --ag-advanced-filter-builder-column-pill-color: var(--ag-inherited-advanced-filter-builder-column-pill-color, #355f2d); --ag-advanced-filter-builder-join-pill-color: var(--ag-inherited-advanced-filter-builder-join-pill-color, #7a3a37); --ag-advanced-filter-builder-option-pill-color: var(--ag-inherited-advanced-filter-builder-option-pill-color, #5a3168); --ag-advanced-filter-builder-value-pill-color: var(--ag-inherited-advanced-filter-builder-value-pill-color, #374c86); --ag-browser-color-scheme: var(--ag-inherited-browser-color-scheme, dark); --ag-chrome-background-color: var(--ag-inherited-chrome-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 5%)); --ag-find-active-match-color: var(--ag-inherited-find-active-match-color, var(--ag-background-color)); --ag-find-match-color: var(--ag-inherited-find-match-color, var(--ag-background-color)); --ag-menu-background-color: var(--ag-inherited-menu-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 10%)); } :where(\[data-ag-theme-mode="dark-blue"\]) & { --ag-advanced-filter-builder-column-pill-color: var(--ag-inherited-advanced-filter-builder-column-pill-color, #355f2d); --ag-advanced-filter-builder-join-pill-color: var(--ag-inherited-advanced-filter-builder-join-pill-color, #7a3a37); --ag-advanced-filter-builder-option-pill-color: var(--ag-inherited-advanced-filter-builder-option-pill-color, #5a3168); --ag-advanced-filter-builder-value-pill-color: var(--ag-inherited-advanced-filter-builder-value-pill-color, #374c86); --ag-browser-color-scheme: var(--ag-inherited-browser-color-scheme, dark); --ag-chrome-background-color: var(--ag-inherited-chrome-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 5%)); --ag-find-active-match-color: var(--ag-inherited-find-active-match-color, var(--ag-background-color)); --ag-find-match-color: var(--ag-inherited-find-match-color, var(--ag-background-color)); --ag-menu-background-color: var(--ag-inherited-menu-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 10%)); } } :has(> :where(.ag-theme-params-1)):not(:where(.ag-theme-params-1)) { --ag-inherited-accent-color: var(--ag-accent-color); --ag-inherited-advanced-filter-builder-button-bar-border: var(--ag-advanced-filter-builder-button-bar-border); --ag-inherited-advanced-filter-builder-column-pill-color: var(--ag-advanced-filter-builder-column-pill-color); --ag-inherited-advanced-filter-builder-indent-size: var(--ag-advanced-filter-builder-indent-size); --ag-inherited-advanced-filter-builder-join-pill-color: var(--ag-advanced-filter-builder-join-pill-color); --ag-inherited-advanced-filter-builder-option-pill-color: var(--ag-advanced-filter-builder-option-pill-color); --ag-inherited-advanced-filter-builder-value-pill-color: var(--ag-advanced-filter-builder-value-pill-color); --ag-inherited-background-color: var(--ag-background-color); --ag-inherited-border-color: var(--ag-border-color); --ag-inherited-border-radius: var(--ag-border-radius); --ag-inherited-browser-color-scheme: var(--ag-browser-color-scheme); --ag-inherited-button-active-background-color: var(--ag-button-active-background-color); --ag-inherited-button-active-border: var(--ag-button-active-border); --ag-inherited-button-active-text-color: var(--ag-button-active-text-color); --ag-inherited-button-background-color: var(--ag-button-background-color); --ag-inherited-button-border: var(--ag-button-border); --ag-inherited-button-border-radius: var(--ag-button-border-radius); --ag-inherited-button-disabled-background-color: var(--ag-button-disabled-background-color); --ag-inherited-button-disabled-border: var(--ag-button-disabled-border); --ag-inherited-button-disabled-text-color: var(--ag-button-disabled-text-color); --ag-inherited-button-font-weight: var(--ag-button-font-weight); --ag-inherited-button-horizontal-padding: var(--ag-button-horizontal-padding); --ag-inherited-button-hover-background-color: var(--ag-button-hover-background-color); --ag-inherited-button-hover-border: var(--ag-button-hover-border); --ag-inherited-button-hover-text-color: var(--ag-button-hover-text-color); --ag-inherited-button-text-color: var(--ag-button-text-color); --ag-inherited-button-vertical-padding: var(--ag-button-vertical-padding); --ag-inherited-card-shadow: var(--ag-card-shadow); --ag-inherited-cell-editing-border: var(--ag-cell-editing-border); --ag-inherited-cell-editing-shadow: var(--ag-cell-editing-shadow); --ag-inherited-cell-font-family: var(--ag-cell-font-family); --ag-inherited-cell-horizontal-padding: var(--ag-cell-horizontal-padding); --ag-inherited-cell-horizontal-padding-scale: var(--ag-cell-horizontal-padding-scale); --ag-inherited-cell-text-color: var(--ag-cell-text-color); --ag-inherited-cell-widget-spacing: var(--ag-cell-widget-spacing); --ag-inherited-chart-menu-label-color: var(--ag-chart-menu-label-color); --ag-inherited-chart-menu-panel-width: var(--ag-chart-menu-panel-width); --ag-inherited-checkbox-border-radius: var(--ag-checkbox-border-radius); --ag-inherited-checkbox-border-width: var(--ag-checkbox-border-width); --ag-inherited-checkbox-checked-background-color: var(--ag-checkbox-checked-background-color); --ag-inherited-checkbox-checked-border-color: var(--ag-checkbox-checked-border-color); --ag-inherited-checkbox-checked-shape-color: var(--ag-checkbox-checked-shape-color); --ag-inherited-checkbox-checked-shape-image: var(--ag-checkbox-checked-shape-image); --ag-inherited-checkbox-indeterminate-background-color: var(--ag-checkbox-indeterminate-background-color); --ag-inherited-checkbox-indeterminate-border-color: var(--ag-checkbox-indeterminate-border-color); --ag-inherited-checkbox-indeterminate-shape-color: var(--ag-checkbox-indeterminate-shape-color); --ag-inherited-checkbox-indeterminate-shape-image: var(--ag-checkbox-indeterminate-shape-image); --ag-inherited-checkbox-unchecked-background-color: var(--ag-checkbox-unchecked-background-color); --ag-inherited-checkbox-unchecked-border-color: var(--ag-checkbox-unchecked-border-color); --ag-inherited-chrome-background-color: var(--ag-chrome-background-color); --ag-inherited-column-border: var(--ag-column-border); --ag-inherited-column-drop-cell-background-color: var(--ag-column-drop-cell-background-color); --ag-inherited-column-drop-cell-border: var(--ag-column-drop-cell-border); --ag-inherited-column-drop-cell-drag-handle-color: var(--ag-column-drop-cell-drag-handle-color); --ag-inherited-column-drop-cell-text-color: var(--ag-column-drop-cell-text-color); --ag-inherited-column-hover-color: var(--ag-column-hover-color); --ag-inherited-column-select-indent-size: var(--ag-column-select-indent-size); --ag-inherited-data-font-size: var(--ag-data-font-size); --ag-inherited-dialog-border: var(--ag-dialog-border); --ag-inherited-dialog-shadow: var(--ag-dialog-shadow); --ag-inherited-drag-and-drop-image-background-color: var(--ag-drag-and-drop-image-background-color); --ag-inherited-drag-and-drop-image-border: var(--ag-drag-and-drop-image-border); --ag-inherited-drag-and-drop-image-shadow: var(--ag-drag-and-drop-image-shadow); --ag-inherited-drag-handle-color: var(--ag-drag-handle-color); --ag-inherited-dropdown-shadow: var(--ag-dropdown-shadow); --ag-inherited-filter-tool-panel-group-indent: var(--ag-filter-tool-panel-group-indent); --ag-inherited-find-active-match-background-color: var(--ag-find-active-match-background-color); --ag-inherited-find-active-match-color: var(--ag-find-active-match-color); --ag-inherited-find-match-background-color: var(--ag-find-match-background-color); --ag-inherited-find-match-color: var(--ag-find-match-color); --ag-inherited-focus-shadow: var(--ag-focus-shadow); --ag-inherited-font-family: var(--ag-font-family); --ag-inherited-font-size: var(--ag-font-size); --ag-inherited-footer-row-border: var(--ag-footer-row-border); --ag-inherited-foreground-color: var(--ag-foreground-color); --ag-inherited-header-background-color: var(--ag-header-background-color); --ag-inherited-header-cell-background-transition-duration: var(--ag-header-cell-background-transition-duration); --ag-inherited-header-cell-hover-background-color: var(--ag-header-cell-hover-background-color); --ag-inherited-header-cell-moving-background-color: var(--ag-header-cell-moving-background-color); --ag-inherited-header-column-border: var(--ag-header-column-border); --ag-inherited-header-column-border-height: var(--ag-header-column-border-height); --ag-inherited-header-column-resize-handle-color: var(--ag-header-column-resize-handle-color); --ag-inherited-header-column-resize-handle-height: var(--ag-header-column-resize-handle-height); --ag-inherited-header-column-resize-handle-width: var(--ag-header-column-resize-handle-width); --ag-inherited-header-font-family: var(--ag-header-font-family); --ag-inherited-header-font-size: var(--ag-header-font-size); --ag-inherited-header-font-weight: var(--ag-header-font-weight); --ag-inherited-header-height: var(--ag-header-height); --ag-inherited-header-row-border: var(--ag-header-row-border); --ag-inherited-header-text-color: var(--ag-header-text-color); --ag-inherited-header-vertical-padding-scale: var(--ag-header-vertical-padding-scale); --ag-inherited-icon-button-active-background-color: var(--ag-icon-button-active-background-color); --ag-inherited-icon-button-active-color: var(--ag-icon-button-active-color); --ag-inherited-icon-button-active-indicator-color: var(--ag-icon-button-active-indicator-color); --ag-inherited-icon-button-background-color: var(--ag-icon-button-background-color); --ag-inherited-icon-button-background-spread: var(--ag-icon-button-background-spread); --ag-inherited-icon-button-border-radius: var(--ag-icon-button-border-radius); --ag-inherited-icon-button-color: var(--ag-icon-button-color); --ag-inherited-icon-button-hover-background-color: var(--ag-icon-button-hover-background-color); --ag-inherited-icon-button-hover-color: var(--ag-icon-button-hover-color); --ag-inherited-icon-color: var(--ag-icon-color); --ag-inherited-icon-size: var(--ag-icon-size); --ag-inherited-input-background-color: var(--ag-input-background-color); --ag-inherited-input-border: var(--ag-input-border); --ag-inherited-input-border-radius: var(--ag-input-border-radius); --ag-inherited-input-disabled-background-color: var(--ag-input-disabled-background-color); --ag-inherited-input-disabled-border: var(--ag-input-disabled-border); --ag-inherited-input-disabled-text-color: var(--ag-input-disabled-text-color); --ag-inherited-input-focus-background-color: var(--ag-input-focus-background-color); --ag-inherited-input-focus-border: var(--ag-input-focus-border); --ag-inherited-input-focus-shadow: var(--ag-input-focus-shadow); --ag-inherited-input-focus-text-color: var(--ag-input-focus-text-color); --ag-inherited-input-height: var(--ag-input-height); --ag-inherited-input-icon-color: var(--ag-input-icon-color); --ag-inherited-input-invalid-background-color: var(--ag-input-invalid-background-color); --ag-inherited-input-invalid-border: var(--ag-input-invalid-border); --ag-inherited-input-invalid-text-color: var(--ag-input-invalid-text-color); --ag-inherited-input-padding-start: var(--ag-input-padding-start); --ag-inherited-input-placeholder-text-color: var(--ag-input-placeholder-text-color); --ag-inherited-input-text-color: var(--ag-input-text-color); --ag-inherited-invalid-color: var(--ag-invalid-color); --ag-inherited-list-item-height: var(--ag-list-item-height); --ag-inherited-menu-background-color: var(--ag-menu-background-color); --ag-inherited-menu-border: var(--ag-menu-border); --ag-inherited-menu-separator-color: var(--ag-menu-separator-color); --ag-inherited-menu-shadow: var(--ag-menu-shadow); --ag-inherited-menu-text-color: var(--ag-menu-text-color); --ag-inherited-modal-overlay-background-color: var(--ag-modal-overlay-background-color); --ag-inherited-odd-row-background-color: var(--ag-odd-row-background-color); --ag-inherited-panel-background-color: var(--ag-panel-background-color); --ag-inherited-panel-title-bar-background-color: var(--ag-panel-title-bar-background-color); --ag-inherited-panel-title-bar-border: var(--ag-panel-title-bar-border); --ag-inherited-panel-title-bar-font-weight: var(--ag-panel-title-bar-font-weight); --ag-inherited-panel-title-bar-icon-color: var(--ag-panel-title-bar-icon-color); --ag-inherited-panel-title-bar-text-color: var(--ag-panel-title-bar-text-color); --ag-inherited-picker-button-background-color: var(--ag-picker-button-background-color); --ag-inherited-picker-button-border: var(--ag-picker-button-border); --ag-inherited-picker-button-focus-background-color: var(--ag-picker-button-focus-background-color); --ag-inherited-picker-button-focus-border: var(--ag-picker-button-focus-border); --ag-inherited-picker-list-background-color: var(--ag-picker-list-background-color); --ag-inherited-picker-list-border: var(--ag-picker-list-border); --ag-inherited-pinned-column-border: var(--ag-pinned-column-border); --ag-inherited-pinned-row-background-color: var(--ag-pinned-row-background-color); --ag-inherited-pinned-row-border: var(--ag-pinned-row-border); --ag-inherited-pinned-row-font-weight: var(--ag-pinned-row-font-weight); --ag-inherited-pinned-row-text-color: var(--ag-pinned-row-text-color); --ag-inherited-pinned-source-row-background-color: var(--ag-pinned-source-row-background-color); --ag-inherited-pinned-source-row-font-weight: var(--ag-pinned-source-row-font-weight); --ag-inherited-pinned-source-row-text-color: var(--ag-pinned-source-row-text-color); --ag-inherited-popup-shadow: var(--ag-popup-shadow); --ag-inherited-radio-checked-shape-image: var(--ag-radio-checked-shape-image); --ag-inherited-range-header-highlight-color: var(--ag-range-header-highlight-color); --ag-inherited-range-selection-background-color: var(--ag-range-selection-background-color); --ag-inherited-range-selection-border-color: var(--ag-range-selection-border-color); --ag-inherited-range-selection-border-style: var(--ag-range-selection-border-style); --ag-inherited-range-selection-chart-background-color: var(--ag-range-selection-chart-background-color); --ag-inherited-range-selection-chart-category-background-color: var(--ag-range-selection-chart-category-background-color); --ag-inherited-range-selection-highlight-color: var(--ag-range-selection-highlight-color); --ag-inherited-row-border: var(--ag-row-border); --ag-inherited-row-group-indent-size: var(--ag-row-group-indent-size); --ag-inherited-row-height: var(--ag-row-height); --ag-inherited-row-hover-color: var(--ag-row-hover-color); --ag-inherited-row-loading-skeleton-effect-color: var(--ag-row-loading-skeleton-effect-color); --ag-inherited-row-numbers-selected-color: var(--ag-row-numbers-selected-color); --ag-inherited-row-vertical-padding-scale: var(--ag-row-vertical-padding-scale); --ag-inherited-select-cell-background-color: var(--ag-select-cell-background-color); --ag-inherited-select-cell-border: var(--ag-select-cell-border); --ag-inherited-selected-row-background-color: var(--ag-selected-row-background-color); --ag-inherited-set-filter-indent-size: var(--ag-set-filter-indent-size); --ag-inherited-side-bar-background-color: var(--ag-side-bar-background-color); --ag-inherited-side-bar-panel-width: var(--ag-side-bar-panel-width); --ag-inherited-side-button-background-color: var(--ag-side-button-background-color); --ag-inherited-side-button-bar-background-color: var(--ag-side-button-bar-background-color); --ag-inherited-side-button-bar-top-padding: var(--ag-side-button-bar-top-padding); --ag-inherited-side-button-border: var(--ag-side-button-border); --ag-inherited-side-button-hover-background-color: var(--ag-side-button-hover-background-color); --ag-inherited-side-button-hover-text-color: var(--ag-side-button-hover-text-color); --ag-inherited-side-button-left-padding: var(--ag-side-button-left-padding); --ag-inherited-side-button-right-padding: var(--ag-side-button-right-padding); --ag-inherited-side-button-selected-background-color: var(--ag-side-button-selected-background-color); --ag-inherited-side-button-selected-border: var(--ag-side-button-selected-border); --ag-inherited-side-button-selected-text-color: var(--ag-side-button-selected-text-color); --ag-inherited-side-button-selected-underline-color: var(--ag-side-button-selected-underline-color); --ag-inherited-side-button-selected-underline-transition-duration: var(--ag-side-button-selected-underline-transition-duration); --ag-inherited-side-button-selected-underline-width: var(--ag-side-button-selected-underline-width); --ag-inherited-side-button-text-color: var(--ag-side-button-text-color); --ag-inherited-side-button-vertical-padding: var(--ag-side-button-vertical-padding); --ag-inherited-side-panel-border: var(--ag-side-panel-border); --ag-inherited-spacing: var(--ag-spacing); --ag-inherited-status-bar-label-color: var(--ag-status-bar-label-color); --ag-inherited-status-bar-label-font-weight: var(--ag-status-bar-label-font-weight); --ag-inherited-status-bar-value-color: var(--ag-status-bar-value-color); --ag-inherited-status-bar-value-font-weight: var(--ag-status-bar-value-font-weight); --ag-inherited-subtle-text-color: var(--ag-subtle-text-color); --ag-inherited-tab-background-color: var(--ag-tab-background-color); --ag-inherited-tab-bar-background-color: var(--ag-tab-bar-background-color); --ag-inherited-tab-bar-border: var(--ag-tab-bar-border); --ag-inherited-tab-bar-horizontal-padding: var(--ag-tab-bar-horizontal-padding); --ag-inherited-tab-bar-top-padding: var(--ag-tab-bar-top-padding); --ag-inherited-tab-bottom-padding: var(--ag-tab-bottom-padding); --ag-inherited-tab-horizontal-padding: var(--ag-tab-horizontal-padding); --ag-inherited-tab-hover-background-color: var(--ag-tab-hover-background-color); --ag-inherited-tab-hover-text-color: var(--ag-tab-hover-text-color); --ag-inherited-tab-selected-background-color: var(--ag-tab-selected-background-color); --ag-inherited-tab-selected-border-color: var(--ag-tab-selected-border-color); --ag-inherited-tab-selected-border-width: var(--ag-tab-selected-border-width); --ag-inherited-tab-selected-text-color: var(--ag-tab-selected-text-color); --ag-inherited-tab-selected-underline-color: var(--ag-tab-selected-underline-color); --ag-inherited-tab-selected-underline-transition-duration: var(--ag-tab-selected-underline-transition-duration); --ag-inherited-tab-selected-underline-width: var(--ag-tab-selected-underline-width); --ag-inherited-tab-spacing: var(--ag-tab-spacing); --ag-inherited-tab-text-color: var(--ag-tab-text-color); --ag-inherited-tab-top-padding: var(--ag-tab-top-padding); --ag-inherited-text-color: var(--ag-text-color); --ag-inherited-toggle-button-height: var(--ag-toggle-button-height); --ag-inherited-toggle-button-off-background-color: var(--ag-toggle-button-off-background-color); --ag-inherited-toggle-button-on-background-color: var(--ag-toggle-button-on-background-color); --ag-inherited-toggle-button-switch-background-color: var(--ag-toggle-button-switch-background-color); --ag-inherited-toggle-button-switch-inset: var(--ag-toggle-button-switch-inset); --ag-inherited-toggle-button-width: var(--ag-toggle-button-width); --ag-inherited-tool-panel-separator-border: var(--ag-tool-panel-separator-border); --ag-inherited-tooltip-background-color: var(--ag-tooltip-background-color); --ag-inherited-tooltip-border: var(--ag-tooltip-border); --ag-inherited-tooltip-text-color: var(--ag-tooltip-text-color); --ag-inherited-value-change-delta-down-color: var(--ag-value-change-delta-down-color); --ag-inherited-value-change-delta-up-color: var(--ag-value-change-delta-up-color); --ag-inherited-value-change-value-highlight-background-color: var(--ag-value-change-value-highlight-background-color); --ag-inherited-widget-container-horizontal-padding: var(--ag-widget-container-horizontal-padding); --ag-inherited-widget-container-vertical-padding: var(--ag-widget-container-vertical-padding); --ag-inherited-widget-horizontal-spacing: var(--ag-widget-horizontal-spacing); --ag-inherited-widget-vertical-spacing: var(--ag-widget-vertical-spacing); --ag-inherited-wrapper-border: var(--ag-wrapper-border); --ag-inherited-wrapper-border-radius: var(--ag-wrapper-border-radius); :where(\[data-ag-theme-mode="light"\]) & { --ag-inherited-browser-color-scheme: var(--ag-browser-color-scheme); --ag-inherited-chrome-background-color: var(--ag-chrome-background-color); } :where(\[data-ag-theme-mode="dark"\]) & { --ag-inherited-advanced-filter-builder-column-pill-color: var(--ag-advanced-filter-builder-column-pill-color); --ag-inherited-advanced-filter-builder-join-pill-color: var(--ag-advanced-filter-builder-join-pill-color); --ag-inherited-advanced-filter-builder-option-pill-color: var(--ag-advanced-filter-builder-option-pill-color); --ag-inherited-advanced-filter-builder-value-pill-color: var(--ag-advanced-filter-builder-value-pill-color); --ag-inherited-browser-color-scheme: var(--ag-browser-color-scheme); --ag-inherited-chrome-background-color: var(--ag-chrome-background-color); --ag-inherited-find-active-match-color: var(--ag-find-active-match-color); --ag-inherited-find-match-color: var(--ag-find-match-color); --ag-inherited-menu-background-color: var(--ag-menu-background-color); } :where(\[data-ag-theme-mode="dark-blue"\]) & { --ag-inherited-advanced-filter-builder-column-pill-color: var(--ag-advanced-filter-builder-column-pill-color); --ag-inherited-advanced-filter-builder-join-pill-color: var(--ag-advanced-filter-builder-join-pill-color); --ag-inherited-advanced-filter-builder-option-pill-color: var(--ag-advanced-filter-builder-option-pill-color); --ag-inherited-advanced-filter-builder-value-pill-color: var(--ag-advanced-filter-builder-value-pill-color); --ag-inherited-browser-color-scheme: var(--ag-browser-color-scheme); --ag-inherited-chrome-background-color: var(--ag-chrome-background-color); --ag-inherited-find-active-match-color: var(--ag-find-active-match-color); --ag-inherited-find-match-color: var(--ag-find-match-color); --ag-inherited-menu-background-color: var(--ag-menu-background-color); } }
 
 Drag here to set row groups
 
@@ -254,109 +170,16 @@ Page Size:
 
 Page 1 of 1
 
-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; }
-
-import { useState } from 'react';
-import {
-  IressButton,
-  IressModal,
-  IressText,
-  IressToasterProvider,
-  useToaster,
-} from '@iress-oss/ids-components';
-import { AG\_THEME\_IRESS\_ICONS, IressAgGridContainer } from '@iress/ids-themes';
-import { AgGridReact, AgGridReactProps } from 'ag-grid-react';
-import { AllCommunityModule, ModuleRegistry, provideGlobalGridOptions, type ColDef, type ICellRendererParams } from 'ag-grid-community';
-import styles from '@iress-storybook/styles.module.scss';
-ModuleRegistry.registerModules(\[AllCommunityModule\]);
-provideGlobalGridOptions({ theme: 'legacy' });
-const OrderCar \= ({ data }: ICellRendererParams) \=> {
-  const \[show, setShow\] \= useState(false);
-  const { success } \= useToaster();
-  return (
-    <\>
-      <IressButton onClick\={() \=> setShow(true)}\>Order</IressButton\>
-      <IressModal show\={show} onShowChange\={setShow}\>
-        <IressText\>
-          <h2\>Order a car</h2\>
-          <p\>
-            Car: {data.make} {data.model}
-          </p\>
-          <p\>
-            <IressButton
-              onClick\={() \=> {
-                success({
-                  children: 'Order submitted',
-                });
-                setShow(false);
-              }}
-            \>
-              Submit            </IressButton\>
-          </p\>
-        </IressText\>
-      </IressModal\>
-    </\>
-  );
-};
-export const AgGridSimple \= (args: AgGridReactProps) \=> {
-  // Row Data: The data to be displayed.
-  const \[rowData\] \= useState(\[
-    { make: 'Tesla', model: 'Model Y', price: 64950, electric: true },
-    { make: 'Ford', model: 'F-Series', price: 33850, electric: false },
-    { make: 'Toyota', model: 'Corolla', price: 29600, electric: false },
-  \]);
-  // Column Definitions: Defines the columns to be displayed.
-  const \[colDefs\] \= useState<ColDef\[\]\>(\[
-    {
-      field: 'make',
-      filter: true,
-      floatingFilter: true,
-      flex: 2,
-      checkboxSelection: true,
-    },
-    { field: 'model', flex: 1, autoHeight: true },
-    {
-      field: 'price',
-      flex: 1,
-      autoHeight: true,
-      valueFormatter: (price) \=> \`$${price.value.toLocaleString()}\`,
-    },
-    { field: 'electric', flex: 1, editable: true, autoHeight: true },
-    { field: 'order', flex: 1, cellRenderer: OrderCar },
-  \]);
-  return (
-    <IressToasterProvider\>
-      <IressAgGridContainer
-        alignMiddle
-        style\={{ height: '300px' }}
-      \>
-        <AgGridReact
-          {...args}
-          rowData\={rowData}
-          rowClassRules\={{
-            \[styles.highlightDanger\]: (params) \=> params.data.make \=== 'Toyota',
-          }}
-          rowSelection\="multiple"
-          columnDefs\={colDefs}
-          icons\={AG\_THEME\_IRESS\_ICONS}
-          pagination
-          paginationPageSize\={500}
-          paginationPageSizeSelector\={\[200, 500, 1000\]}
-        />
-      </IressAgGridContainer\>
-    </IressToasterProvider\>
-  );
-};
-export default AgGridSimple;
-
-Copy
+Show code
 
 ### [](#complex)Complex
 
 This is a complex example showcasing some of the more advanced features of AG Grid.
 
+/\* Ellipsis text \*/ .iress-cell--ellipsis .ag-cell-wrapper { overflow: hidden; } .iress-cell--ellipsis .ag-cell-wrapper .ag-cell-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /\* Column divider \*/ .ag-header-cell.iress-cell--divider, .ag-cell.iress-cell--divider { border-inline-end: 1px solid var(--iress-colour-neutral-40, #D7D8DA); } /\* Positive and negative values \*/ .ag-cell.iress--positive, .ag-cell .iress--positive { color: var(--iress-colour-system-success-text, #015537); } .ag-cell.iress--negative, .ag-cell .iress--negative { color: var(--iress-colour-system-danger-text, #970202); } .ag-cell.iress--zero, .ag-cell .iress--zero { color: var(--iress-colour-neutral-70, #6D7278); }
+
+:where(.ag-theme-params-4) { --ag-accent-color: var(--ag-inherited-accent-color, var(--iress-colour-primary-fill, #13213F)); --ag-advanced-filter-builder-button-bar-border: var(--ag-inherited-advanced-filter-builder-button-bar-border, solid 1px var(--ag-border-color)); --ag-advanced-filter-builder-column-pill-color: var(--ag-inherited-advanced-filter-builder-column-pill-color, #a6e194); --ag-advanced-filter-builder-indent-size: var(--ag-inherited-advanced-filter-builder-indent-size, calc( var(--ag-spacing) \* 2 + var(--ag-icon-size) )); --ag-advanced-filter-builder-join-pill-color: var(--ag-inherited-advanced-filter-builder-join-pill-color, #f08e8d); --ag-advanced-filter-builder-option-pill-color: var(--ag-inherited-advanced-filter-builder-option-pill-color, #f3c08b); --ag-advanced-filter-builder-value-pill-color: var(--ag-inherited-advanced-filter-builder-value-pill-color, #85c0e4); --ag-background-color: var(--ag-inherited-background-color, var(--iress-colour-neutral-10, #FFFFFF)); --ag-border-color: var(--ag-inherited-border-color, var(--iress-colour-neutral-30, #E4E5E7)); --ag-border-radius: var(--ag-inherited-border-radius, var(--iress-radius-system-layout, var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem))); --ag-browser-color-scheme: var(--ag-inherited-browser-color-scheme, light); --ag-button-active-background-color: var(--ag-inherited-button-active-background-color, var(--ag-accent-color)); --ag-button-active-border: var(--ag-inherited-button-active-border, var(--ag-button-hover-border)); --ag-button-active-text-color: var(--ag-inherited-button-active-text-color, var(--ag-background-color)); --ag-button-background-color: var(--ag-inherited-button-background-color, var(--iress-colour-primary-surface, #D9E5FF)); --ag-button-border: var(--ag-inherited-button-border, solid 1px var(--iress-colour-primary-surface, #D9E5FF)); --ag-button-border-radius: var(--ag-inherited-button-border-radius, var(--iress-radius-system-button, var(--iress-radius-075, calc(0.75 \* 1rem)) var(--iress-radius-075, calc(0.75 \* 1rem)) var(--iress-radius-075, calc(0.75 \* 1rem)) var(--iress-radius-075, calc(0.75 \* 1rem)))); --ag-button-disabled-background-color: var(--ag-inherited-button-disabled-background-color, var(--ag-input-disabled-background-color)); --ag-button-disabled-border: var(--ag-inherited-button-disabled-border, var(--ag-input-disabled-border)); --ag-button-disabled-text-color: var(--ag-inherited-button-disabled-text-color, var(--ag-input-disabled-text-color)); --ag-button-font-weight: var(--ag-inherited-button-font-weight, 600); --ag-button-horizontal-padding: var(--ag-inherited-button-horizontal-padding, calc( var(--ag-spacing) \* 2)); --ag-button-hover-background-color: var(--ag-inherited-button-hover-background-color, var(--ag-row-hover-color)); --ag-button-hover-border: var(--ag-inherited-button-hover-border, var(--ag-button-border)); --ag-button-hover-text-color: var(--ag-inherited-button-hover-text-color, var(--ag-button-text-color)); --ag-button-text-color: var(--ag-inherited-button-text-color, var(--iress-colour-primary-text, #13213F)); --ag-button-vertical-padding: var(--ag-inherited-button-vertical-padding, var(--ag-spacing)); --ag-card-shadow: var(--ag-inherited-card-shadow, var(--iress-elevation-raised-shadow, 0px 3px 5px #091E4220)); --ag-cell-editing-border: var(--ag-inherited-cell-editing-border, solid 1px var(--ag-accent-color)); --ag-cell-editing-shadow: var(--ag-inherited-cell-editing-shadow, var(--ag-card-shadow)); --ag-cell-font-family: var(--ag-inherited-cell-font-family, var(--iress-typography-base-body-font, Inter, Helvetica, sans-serif)); --ag-cell-horizontal-padding: var(--ag-inherited-cell-horizontal-padding, calc( var(--ag-spacing) \* 2 \* var(--ag-cell-horizontal-padding-scale) )); --ag-cell-horizontal-padding-scale: var(--ag-inherited-cell-horizontal-padding-scale, 1); --ag-cell-text-color: var(--ag-inherited-cell-text-color, var(--ag-text-color)); --ag-cell-widget-spacing: var(--ag-inherited-cell-widget-spacing, calc( var(--ag-spacing) \* 1.5)); --ag-chart-menu-label-color: var(--ag-inherited-chart-menu-label-color, color-mix(in srgb, transparent, var(--ag-foreground-color) 80%)); --ag-chart-menu-panel-width: var(--ag-inherited-chart-menu-panel-width, 260px); --ag-checkbox-border-radius: var(--ag-inherited-checkbox-border-radius, var(--iress-radius-system-badge, var(--iress-radius-025, calc(0.25 \* 1rem)) var(--iress-radius-025, calc(0.25 \* 1rem)) var(--iress-radius-025, calc(0.25 \* 1rem)) var(--iress-radius-025, calc(0.25 \* 1rem)))); --ag-checkbox-border-width: var(--ag-inherited-checkbox-border-width, 1px); --ag-checkbox-checked-background-color: var(--ag-inherited-checkbox-checked-background-color, var(--iress-colour-primary-fill, #13213F)); --ag-checkbox-checked-border-color: var(--ag-inherited-checkbox-checked-border-color, var(--iress-colour-primary-fill, #13213F)); --ag-checkbox-checked-shape-color: var(--ag-inherited-checkbox-checked-shape-color, var(--iress-colour-primary-on-fill, #ECF2FF)); --ag-checkbox-checked-shape-image: var(--ag-inherited-checkbox-checked-shape-image, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%227%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.75%22%20d%3D%22M1%203.5%203.5%206l5-5%22%2F%3E%3C%2Fsvg%3E")); --ag-checkbox-indeterminate-background-color: var(--ag-inherited-checkbox-indeterminate-background-color, var(--iress-colour-primary-fill, #13213F)); --ag-checkbox-indeterminate-border-color: var(--ag-inherited-checkbox-indeterminate-border-color, var(--iress-colour-primary-fill, #13213F)); --ag-checkbox-indeterminate-shape-color: var(--ag-inherited-checkbox-indeterminate-shape-color, var(--iress-colour-primary-on-fill, #ECF2FF)); --ag-checkbox-indeterminate-shape-image: var(--ag-inherited-checkbox-indeterminate-shape-image, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%222%22%20fill%3D%22none%22%3E%3Crect%20width%3D%2210%22%20height%3D%222%22%20fill%3D%22%23000%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E")); --ag-checkbox-unchecked-background-color: var(--ag-inherited-checkbox-unchecked-background-color, var(--iress-colour-neutral-10, #FFFFFF)); --ag-checkbox-unchecked-border-color: var(--ag-inherited-checkbox-unchecked-border-color, var(--iress-colour-neutral-70, #6D7278)); --ag-chrome-background-color: var(--ag-inherited-chrome-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 2%)); --ag-column-border: var(--ag-inherited-column-border, solid 1px transparent); --ag-column-drop-cell-background-color: var(--ag-inherited-column-drop-cell-background-color, color-mix(in srgb, transparent, var(--ag-foreground-color) 7.000000000000001%)); --ag-column-drop-cell-border: var(--ag-inherited-column-drop-cell-border, solid 1px color-mix(in srgb, transparent, var(--ag-foreground-color) 13%)); --ag-column-drop-cell-drag-handle-color: var(--ag-inherited-column-drop-cell-drag-handle-color, var(--ag-text-color)); --ag-column-drop-cell-text-color: var(--ag-inherited-column-drop-cell-text-color, var(--ag-text-color)); --ag-column-hover-color: var(--ag-inherited-column-hover-color, var(--iress-colour-neutral-20, #F9F9F9)); --ag-column-select-indent-size: var(--ag-inherited-column-select-indent-size, var(--ag-icon-size)); --ag-data-font-size: var(--ag-inherited-data-font-size, var(--iress-typography-base-size, .875rem)); --ag-dialog-border: var(--ag-inherited-dialog-border, solid 1px color-mix(in srgb, transparent, var(--ag-foreground-color) 20%)); --ag-dialog-shadow: var(--ag-inherited-dialog-shadow, var(--iress-elevation-floating-shadow, 0px 10px 18px #091E4215)); --ag-drag-and-drop-image-background-color: var(--ag-inherited-drag-and-drop-image-background-color, var(--ag-background-color)); --ag-drag-and-drop-image-border: var(--ag-inherited-drag-and-drop-image-border, solid 1px var(--ag-border-color)); --ag-drag-and-drop-image-shadow: var(--ag-inherited-drag-and-drop-image-shadow, var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF)); --ag-drag-handle-color: var(--ag-inherited-drag-handle-color, color-mix(in srgb, transparent, var(--ag-foreground-color) 70%)); --ag-dropdown-shadow: var(--ag-inherited-dropdown-shadow, var(--iress-elevation-floating-shadow, 0px 10px 18px #091E4215)); --ag-filter-tool-panel-group-indent: var(--ag-inherited-filter-tool-panel-group-indent, var(--ag-spacing)); --ag-find-active-match-background-color: var(--ag-inherited-find-active-match-background-color, #ffa500); --ag-find-active-match-color: var(--ag-inherited-find-active-match-color, var(--ag-foreground-color)); --ag-find-match-background-color: var(--ag-inherited-find-match-background-color, #ffff00); --ag-find-match-color: var(--ag-inherited-find-match-color, var(--ag-foreground-color)); --ag-focus-shadow: var(--ag-inherited-focus-shadow, var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF)); --ag-font-family: var(--ag-inherited-font-family, var(--iress-typography-base-body-font, Inter, Helvetica, sans-serif)); --ag-font-size: var(--ag-inherited-font-size, var(--iress-typography-base-size, .875rem)); --ag-footer-row-border: var(--ag-inherited-footer-row-border, var(--ag-row-border)); --ag-foreground-color: var(--ag-inherited-foreground-color, var(--iress-colour-neutral-80, #393F46)); --ag-header-background-color: var(--ag-inherited-header-background-color, var(--iress-colour-neutral-10, #FFFFFF)); --ag-header-cell-background-transition-duration: var(--ag-inherited-header-cell-background-transition-duration, 0.2s); --ag-header-cell-hover-background-color: var(--ag-inherited-header-cell-hover-background-color, transparent); --ag-header-cell-moving-background-color: var(--ag-inherited-header-cell-moving-background-color, var(--ag-header-cell-hover-background-color)); --ag-header-column-border: var(--ag-inherited-header-column-border, none); --ag-header-column-border-height: var(--ag-inherited-header-column-border-height, 100%); --ag-header-column-resize-handle-color: var(--ag-inherited-header-column-resize-handle-color, var(--ag-border-color)); --ag-header-column-resize-handle-height: var(--ag-inherited-header-column-resize-handle-height, 30%); --ag-header-column-resize-handle-width: var(--ag-inherited-header-column-resize-handle-width, 2px); --ag-header-font-family: var(--ag-inherited-header-font-family, var(--iress-typography-base-body-font, Inter, Helvetica, sans-serif)); --ag-header-font-size: var(--ag-inherited-header-font-size, var(--ag-font-size)); --ag-header-font-weight: var(--ag-inherited-header-font-weight, 700); --ag-header-height: var(--ag-inherited-header-height, calc(max( var(--ag-icon-size) , var(--ag-data-font-size) ) + var(--ag-spacing) \* 4 \* var(--ag-header-vertical-padding-scale) )); --ag-header-row-border: var(--ag-inherited-header-row-border, solid 1px var(--iress-colour-neutral-40, #D7D8DA)); --ag-header-text-color: var(--ag-inherited-header-text-color, var(--ag-text-color)); --ag-header-vertical-padding-scale: var(--ag-inherited-header-vertical-padding-scale, 1); --ag-icon-button-active-background-color: var(--ag-inherited-icon-button-active-background-color, transparent); --ag-icon-button-active-color: var(--ag-inherited-icon-button-active-color, var(--ag-accent-color)); --ag-icon-button-active-indicator-color: var(--ag-inherited-icon-button-active-indicator-color, var(--ag-accent-color)); --ag-icon-button-background-color: var(--ag-inherited-icon-button-background-color, transparent); --ag-icon-button-background-spread: var(--ag-inherited-icon-button-background-spread, 4px); --ag-icon-button-border-radius: var(--ag-inherited-icon-button-border-radius, 1px); --ag-icon-button-color: var(--ag-inherited-icon-button-color, var(--ag-icon-color)); --ag-icon-button-hover-background-color: var(--ag-inherited-icon-button-hover-background-color, transparent); --ag-icon-button-hover-color: var(--ag-inherited-icon-button-hover-color, var(--ag-accent-color)); --ag-icon-color: var(--ag-inherited-icon-color, inherit); --ag-icon-size: var(--ag-inherited-icon-size, 16px); --ag-input-background-color: var(--ag-inherited-input-background-color, var(--ag-background-color)); --ag-input-border: var(--ag-inherited-input-border, solid 1px var(--iress-colour-neutral-70, #6D7278)); --ag-input-border-radius: var(--ag-inherited-input-border-radius, var(--iress-radius-system-form, var(--iress-radius-050, calc(0.5 \* 1rem)) var(--iress-radius-050, calc(0.5 \* 1rem)) var(--iress-radius-050, calc(0.5 \* 1rem)) var(--iress-radius-050, calc(0.5 \* 1rem)))); --ag-input-disabled-background-color: var(--ag-inherited-input-disabled-background-color, var(--iress-colour-neutral-20, #F9F9F9)); --ag-input-disabled-border: var(--ag-inherited-input-disabled-border, solid 1px var(--iress-colour-neutral-40, #D7D8DA)); --ag-input-disabled-text-color: var(--ag-inherited-input-disabled-text-color, var(--iress-colour-neutral-60, #878B92)); --ag-input-focus-background-color: var(--ag-inherited-input-focus-background-color, var(--ag-input-background-color)); --ag-input-focus-border: var(--ag-inherited-input-focus-border, solid 1px color-mix(in srgb, transparent, var(--ag-accent-color) 40%)); --ag-input-focus-shadow: var(--ag-inherited-input-focus-shadow, var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF)); --ag-input-focus-text-color: var(--ag-inherited-input-focus-text-color, var(--ag-input-text-color)); --ag-input-height: var(--ag-inherited-input-height, calc(max( var(--ag-icon-size) , var(--ag-font-size) ) + var(--ag-spacing) \* 2)); --ag-input-icon-color: var(--ag-inherited-input-icon-color, var(--iress-colour-neutral-70, #6D7278)); --ag-input-invalid-background-color: var(--ag-inherited-input-invalid-background-color, var(--iress-colour-system-danger-surface, #FEE8E7)); --ag-input-invalid-border: var(--ag-inherited-input-invalid-border, var(--iress-colour-system-danger-fill, #C20A0A)); --ag-input-invalid-text-color: var(--ag-inherited-input-invalid-text-color, var(--iress-colour-system-danger-text, #970202)); --ag-input-padding-start: var(--ag-inherited-input-padding-start, var(--ag-spacing)); --ag-input-placeholder-text-color: var(--ag-inherited-input-placeholder-text-color, color-mix(in srgb, transparent, var(--ag-input-text-color) 50%)); --ag-input-text-color: var(--ag-inherited-input-text-color, var(--iress-colour-neutral-80, #393F46)); --ag-invalid-color: var(--ag-inherited-invalid-color, var(--iress-colour-system-danger-fill, #C20A0A)); --ag-list-item-height: var(--ag-inherited-list-item-height, calc(max( var(--ag-icon-size) , var(--ag-data-font-size) ) + var(--ag-widget-vertical-spacing) )); --ag-menu-background-color: var(--ag-inherited-menu-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 3%)); --ag-menu-border: var(--ag-inherited-menu-border, solid 1px color-mix(in srgb, transparent, var(--ag-foreground-color) 20%)); --ag-menu-separator-color: var(--ag-inherited-menu-separator-color, var(--ag-border-color)); --ag-menu-shadow: var(--ag-inherited-menu-shadow, var(--iress-elevation-floating-shadow, 0px 10px 18px #091E4215)); --ag-menu-text-color: var(--ag-inherited-menu-text-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 95%)); --ag-modal-overlay-background-color: var(--ag-inherited-modal-overlay-background-color, var(--iress-colour-system-backdrop-fill, #393F46CC)); --ag-odd-row-background-color: var(--ag-inherited-odd-row-background-color, var(--iress-colour-neutral-10, #FFFFFF)); --ag-panel-background-color: var(--ag-inherited-panel-background-color, var(--ag-background-color)); --ag-panel-title-bar-background-color: var(--ag-inherited-panel-title-bar-background-color, var(--ag-header-background-color)); --ag-panel-title-bar-border: var(--ag-inherited-panel-title-bar-border, solid 1px var(--ag-border-color)); --ag-panel-title-bar-font-weight: var(--ag-inherited-panel-title-bar-font-weight, var(--ag-header-font-weight)); --ag-panel-title-bar-icon-color: var(--ag-inherited-panel-title-bar-icon-color, var(--ag-header-text-color)); --ag-panel-title-bar-text-color: var(--ag-inherited-panel-title-bar-text-color, var(--ag-header-text-color)); --ag-picker-button-background-color: var(--ag-inherited-picker-button-background-color, var(--ag-background-color)); --ag-picker-button-border: var(--ag-inherited-picker-button-border, solid 1px var(--ag-border-color)); --ag-picker-button-focus-background-color: var(--ag-inherited-picker-button-focus-background-color, var(--ag-background-color)); --ag-picker-button-focus-border: var(--ag-inherited-picker-button-focus-border, var(--ag-input-focus-border)); --ag-picker-list-background-color: var(--ag-inherited-picker-list-background-color, var(--ag-background-color)); --ag-picker-list-border: var(--ag-inherited-picker-list-border, solid 1px var(--ag-border-color)); --ag-pinned-column-border: var(--ag-inherited-pinned-column-border, solid 1px var(--ag-border-color)); --ag-pinned-row-background-color: var(--ag-inherited-pinned-row-background-color, var(--ag-background-color)); --ag-pinned-row-border: var(--ag-inherited-pinned-row-border, solid 1px var(--ag-border-color)); --ag-pinned-row-font-weight: var(--ag-inherited-pinned-row-font-weight, 600); --ag-pinned-row-text-color: var(--ag-inherited-pinned-row-text-color, var(--ag-text-color)); --ag-pinned-source-row-background-color: var(--ag-inherited-pinned-source-row-background-color, var(--ag-background-color)); --ag-pinned-source-row-font-weight: var(--ag-inherited-pinned-source-row-font-weight, 600); --ag-pinned-source-row-text-color: var(--ag-inherited-pinned-source-row-text-color, var(--ag-text-color)); --ag-popup-shadow: var(--ag-inherited-popup-shadow, var(--iress-elevation-floating-shadow, 0px 10px 18px #091E4215)); --ag-radio-checked-shape-image: var(--ag-inherited-radio-checked-shape-image, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%226%22%20height%3D%226%22%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%223%22%20cy%3D%223%22%20r%3D%223%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E")); --ag-range-header-highlight-color: var(--ag-inherited-range-header-highlight-color, color-mix(in srgb, var(--ag-header-background-color), var(--ag-foreground-color) 8%)); --ag-range-selection-background-color: var(--ag-inherited-range-selection-background-color, color-mix(in srgb, transparent, var(--ag-accent-color) 10%)); --ag-range-selection-border-color: var(--ag-inherited-range-selection-border-color, var(--iress-colour-primary-fill, #13213F)); --ag-range-selection-border-style: var(--ag-inherited-range-selection-border-style, solid); --ag-range-selection-chart-background-color: var(--ag-inherited-range-selection-chart-background-color, #0058FF1A); --ag-range-selection-chart-category-background-color: var(--ag-inherited-range-selection-chart-category-background-color, #00FF841A); --ag-range-selection-highlight-color: var(--ag-inherited-range-selection-highlight-color, color-mix(in srgb, transparent, var(--ag-accent-color) 50%)); --ag-row-border: var(--ag-inherited-row-border, solid 1px var(--iress-colour-neutral-40, #D7D8DA)); --ag-row-group-indent-size: var(--ag-inherited-row-group-indent-size, calc( var(--ag-cell-widget-spacing) + var(--ag-icon-size) )); --ag-row-height: var(--ag-inherited-row-height, calc(max( var(--ag-icon-size) , var(--ag-data-font-size) ) + var(--ag-spacing) \* 3.25 \* var(--ag-row-vertical-padding-scale) )); --ag-row-hover-color: var(--ag-inherited-row-hover-color, var(--iress-colour-primary-surface, #D9E5FF)); --ag-row-loading-skeleton-effect-color: var(--ag-inherited-row-loading-skeleton-effect-color, color-mix(in srgb, transparent, var(--ag-foreground-color) 15%)); --ag-row-numbers-selected-color: var(--ag-inherited-row-numbers-selected-color, color-mix(in srgb, transparent, var(--ag-accent-color) 50%)); --ag-row-vertical-padding-scale: var(--ag-inherited-row-vertical-padding-scale, 1); --ag-select-cell-background-color: var(--ag-inherited-select-cell-background-color, color-mix(in srgb, transparent, var(--ag-foreground-color) 7.000000000000001%)); --ag-select-cell-border: var(--ag-inherited-select-cell-border, solid 1px color-mix(in srgb, transparent, var(--ag-foreground-color) 13%)); --ag-selected-row-background-color: var(--ag-inherited-selected-row-background-color, var(--iress-colour-neutral-20, #F9F9F9)); --ag-set-filter-indent-size: var(--ag-inherited-set-filter-indent-size, var(--ag-icon-size)); --ag-side-bar-background-color: var(--ag-inherited-side-bar-background-color, transparent); --ag-side-bar-panel-width: var(--ag-inherited-side-bar-panel-width, 250px); --ag-side-button-background-color: var(--ag-inherited-side-button-background-color, transparent); --ag-side-button-bar-background-color: var(--ag-inherited-side-button-bar-background-color, var(--ag-side-bar-background-color)); --ag-side-button-bar-top-padding: var(--ag-inherited-side-button-bar-top-padding, calc( var(--ag-spacing) \* 3)); --ag-side-button-border: var(--ag-inherited-side-button-border, none); --ag-side-button-hover-background-color: var(--ag-inherited-side-button-hover-background-color, var(--ag-side-button-background-color)); --ag-side-button-hover-text-color: var(--ag-inherited-side-button-hover-text-color, var(--ag-accent-color)); --ag-side-button-left-padding: var(--ag-inherited-side-button-left-padding, var(--ag-spacing)); --ag-side-button-right-padding: var(--ag-inherited-side-button-right-padding, var(--ag-spacing)); --ag-side-button-selected-background-color: var(--ag-inherited-side-button-selected-background-color, transparent); --ag-side-button-selected-border: var(--ag-inherited-side-button-selected-border, none); --ag-side-button-selected-text-color: var(--ag-inherited-side-button-selected-text-color, var(--ag-side-button-text-color)); --ag-side-button-selected-underline-color: var(--ag-inherited-side-button-selected-underline-color, var(--ag-accent-color)); --ag-side-button-selected-underline-transition-duration: var(--ag-inherited-side-button-selected-underline-transition-duration, 0.3s); --ag-side-button-selected-underline-width: var(--ag-inherited-side-button-selected-underline-width, 2px); --ag-side-button-text-color: var(--ag-inherited-side-button-text-color, var(--ag-text-color)); --ag-side-button-vertical-padding: var(--ag-inherited-side-button-vertical-padding, calc( var(--ag-spacing) \* 3)); --ag-side-panel-border: var(--ag-inherited-side-panel-border, solid 1px var(--ag-border-color)); --ag-spacing: var(--ag-inherited-spacing, 8px); --ag-status-bar-label-color: var(--ag-inherited-status-bar-label-color, var(--ag-foreground-color)); --ag-status-bar-label-font-weight: var(--ag-inherited-status-bar-label-font-weight, 500); --ag-status-bar-value-color: var(--ag-inherited-status-bar-value-color, var(--ag-foreground-color)); --ag-status-bar-value-font-weight: var(--ag-inherited-status-bar-value-font-weight, 500); --ag-subtle-text-color: var(--ag-inherited-subtle-text-color, var(--iress-colour-neutral-70, #6D7278)); --ag-tab-background-color: var(--ag-inherited-tab-background-color, transparent); --ag-tab-bar-background-color: var(--ag-inherited-tab-bar-background-color, var(--ag-chrome-background-color)); --ag-tab-bar-border: var(--ag-inherited-tab-bar-border, solid 1px var(--iress-colour-primary-fill, #13213F)); --ag-tab-bar-horizontal-padding: var(--ag-inherited-tab-bar-horizontal-padding, 0px); --ag-tab-bar-top-padding: var(--ag-inherited-tab-bar-top-padding, 0px); --ag-tab-bottom-padding: var(--ag-inherited-tab-bottom-padding, var(--ag-spacing)); --ag-tab-horizontal-padding: var(--ag-inherited-tab-horizontal-padding, var(--ag-spacing)); --ag-tab-hover-background-color: var(--ag-inherited-tab-hover-background-color, var(--ag-tab-background-color)); --ag-tab-hover-text-color: var(--ag-inherited-tab-hover-text-color, var(--ag-accent-color)); --ag-tab-selected-background-color: var(--ag-inherited-tab-selected-background-color, var(--ag-tab-background-color)); --ag-tab-selected-border-color: var(--ag-inherited-tab-selected-border-color, transparent); --ag-tab-selected-border-width: var(--ag-inherited-tab-selected-border-width, 0px); --ag-tab-selected-text-color: var(--ag-inherited-tab-selected-text-color, var(--ag-accent-color)); --ag-tab-selected-underline-color: var(--ag-inherited-tab-selected-underline-color, var(--ag-accent-color)); --ag-tab-selected-underline-transition-duration: var(--ag-inherited-tab-selected-underline-transition-duration, 0.3s); --ag-tab-selected-underline-width: var(--ag-inherited-tab-selected-underline-width, 2px); --ag-tab-spacing: var(--ag-inherited-tab-spacing, 0); --ag-tab-text-color: var(--ag-inherited-tab-text-color, var(--ag-text-color)); --ag-tab-top-padding: var(--ag-inherited-tab-top-padding, var(--ag-spacing)); --ag-text-color: var(--ag-inherited-text-color, var(--ag-foreground-color)); --ag-toggle-button-height: var(--ag-inherited-toggle-button-height, 18px); --ag-toggle-button-off-background-color: var(--ag-inherited-toggle-button-off-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 45%)); --ag-toggle-button-on-background-color: var(--ag-inherited-toggle-button-on-background-color, var(--ag-accent-color)); --ag-toggle-button-switch-background-color: var(--ag-inherited-toggle-button-switch-background-color, var(--ag-background-color)); --ag-toggle-button-switch-inset: var(--ag-inherited-toggle-button-switch-inset, 1px); --ag-toggle-button-width: var(--ag-inherited-toggle-button-width, 28px); --ag-tool-panel-separator-border: var(--ag-inherited-tool-panel-separator-border, solid 1px var(--ag-border-color)); --ag-tooltip-background-color: var(--ag-inherited-tooltip-background-color, var(--iress-colour-neutral-80, #393F46)); --ag-tooltip-border: var(--ag-inherited-tooltip-border, solid 1px var(--ag-border-color)); --ag-tooltip-text-color: var(--ag-inherited-tooltip-text-color, var(--iress-colour-neutral-10, #FFFFFF)); --ag-value-change-delta-down-color: var(--ag-inherited-value-change-delta-down-color, var(--iress-colour-system-danger-fill, #C20A0A)); --ag-value-change-delta-up-color: var(--ag-inherited-value-change-delta-up-color, var(--iress-colour-system-success-fill, #02794D)); --ag-value-change-value-highlight-background-color: var(--ag-inherited-value-change-value-highlight-background-color, color-mix(in srgb, transparent, var(--ag-accent-color) 20%)); --ag-widget-container-horizontal-padding: var(--ag-inherited-widget-container-horizontal-padding, calc( var(--ag-spacing) \* 1.5)); --ag-widget-container-vertical-padding: var(--ag-inherited-widget-container-vertical-padding, calc( var(--ag-spacing) \* 1.5)); --ag-widget-horizontal-spacing: var(--ag-inherited-widget-horizontal-spacing, calc( var(--ag-spacing) \* 1.5)); --ag-widget-vertical-spacing: var(--ag-inherited-widget-vertical-spacing, var(--ag-spacing)); --ag-wrapper-border: var(--ag-inherited-wrapper-border, none); --ag-wrapper-border-radius: var(--ag-inherited-wrapper-border-radius, var(--iress-radius-system-layout, var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem))); :where(\[data-ag-theme-mode="light"\]) & { --ag-browser-color-scheme: var(--ag-inherited-browser-color-scheme, light); --ag-chrome-background-color: var(--ag-inherited-chrome-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 2%)); } :where(\[data-ag-theme-mode="dark"\]) & { --ag-advanced-filter-builder-column-pill-color: var(--ag-inherited-advanced-filter-builder-column-pill-color, #355f2d); --ag-advanced-filter-builder-join-pill-color: var(--ag-inherited-advanced-filter-builder-join-pill-color, #7a3a37); --ag-advanced-filter-builder-option-pill-color: var(--ag-inherited-advanced-filter-builder-option-pill-color, #5a3168); --ag-advanced-filter-builder-value-pill-color: var(--ag-inherited-advanced-filter-builder-value-pill-color, #374c86); --ag-browser-color-scheme: var(--ag-inherited-browser-color-scheme, dark); --ag-chrome-background-color: var(--ag-inherited-chrome-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 5%)); --ag-find-active-match-color: var(--ag-inherited-find-active-match-color, var(--ag-background-color)); --ag-find-match-color: var(--ag-inherited-find-match-color, var(--ag-background-color)); --ag-menu-background-color: var(--ag-inherited-menu-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 10%)); } :where(\[data-ag-theme-mode="dark-blue"\]) & { --ag-advanced-filter-builder-column-pill-color: var(--ag-inherited-advanced-filter-builder-column-pill-color, #355f2d); --ag-advanced-filter-builder-join-pill-color: var(--ag-inherited-advanced-filter-builder-join-pill-color, #7a3a37); --ag-advanced-filter-builder-option-pill-color: var(--ag-inherited-advanced-filter-builder-option-pill-color, #5a3168); --ag-advanced-filter-builder-value-pill-color: var(--ag-inherited-advanced-filter-builder-value-pill-color, #374c86); --ag-browser-color-scheme: var(--ag-inherited-browser-color-scheme, dark); --ag-chrome-background-color: var(--ag-inherited-chrome-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 5%)); --ag-find-active-match-color: var(--ag-inherited-find-active-match-color, var(--ag-background-color)); --ag-find-match-color: var(--ag-inherited-find-match-color, var(--ag-background-color)); --ag-menu-background-color: var(--ag-inherited-menu-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 10%)); } } :has(> :where(.ag-theme-params-4)):not(:where(.ag-theme-params-4)) { --ag-inherited-accent-color: var(--ag-accent-color); --ag-inherited-advanced-filter-builder-button-bar-border: var(--ag-advanced-filter-builder-button-bar-border); --ag-inherited-advanced-filter-builder-column-pill-color: var(--ag-advanced-filter-builder-column-pill-color); --ag-inherited-advanced-filter-builder-indent-size: var(--ag-advanced-filter-builder-indent-size); --ag-inherited-advanced-filter-builder-join-pill-color: var(--ag-advanced-filter-builder-join-pill-color); --ag-inherited-advanced-filter-builder-option-pill-color: var(--ag-advanced-filter-builder-option-pill-color); --ag-inherited-advanced-filter-builder-value-pill-color: var(--ag-advanced-filter-builder-value-pill-color); --ag-inherited-background-color: var(--ag-background-color); --ag-inherited-border-color: var(--ag-border-color); --ag-inherited-border-radius: var(--ag-border-radius); --ag-inherited-browser-color-scheme: var(--ag-browser-color-scheme); --ag-inherited-button-active-background-color: var(--ag-button-active-background-color); --ag-inherited-button-active-border: var(--ag-button-active-border); --ag-inherited-button-active-text-color: var(--ag-button-active-text-color); --ag-inherited-button-background-color: var(--ag-button-background-color); --ag-inherited-button-border: var(--ag-button-border); --ag-inherited-button-border-radius: var(--ag-button-border-radius); --ag-inherited-button-disabled-background-color: var(--ag-button-disabled-background-color); --ag-inherited-button-disabled-border: var(--ag-button-disabled-border); --ag-inherited-button-disabled-text-color: var(--ag-button-disabled-text-color); --ag-inherited-button-font-weight: var(--ag-button-font-weight); --ag-inherited-button-horizontal-padding: var(--ag-button-horizontal-padding); --ag-inherited-button-hover-background-color: var(--ag-button-hover-background-color); --ag-inherited-button-hover-border: var(--ag-button-hover-border); --ag-inherited-button-hover-text-color: var(--ag-button-hover-text-color); --ag-inherited-button-text-color: var(--ag-button-text-color); --ag-inherited-button-vertical-padding: var(--ag-button-vertical-padding); --ag-inherited-card-shadow: var(--ag-card-shadow); --ag-inherited-cell-editing-border: var(--ag-cell-editing-border); --ag-inherited-cell-editing-shadow: var(--ag-cell-editing-shadow); --ag-inherited-cell-font-family: var(--ag-cell-font-family); --ag-inherited-cell-horizontal-padding: var(--ag-cell-horizontal-padding); --ag-inherited-cell-horizontal-padding-scale: var(--ag-cell-horizontal-padding-scale); --ag-inherited-cell-text-color: var(--ag-cell-text-color); --ag-inherited-cell-widget-spacing: var(--ag-cell-widget-spacing); --ag-inherited-chart-menu-label-color: var(--ag-chart-menu-label-color); --ag-inherited-chart-menu-panel-width: var(--ag-chart-menu-panel-width); --ag-inherited-checkbox-border-radius: var(--ag-checkbox-border-radius); --ag-inherited-checkbox-border-width: var(--ag-checkbox-border-width); --ag-inherited-checkbox-checked-background-color: var(--ag-checkbox-checked-background-color); --ag-inherited-checkbox-checked-border-color: var(--ag-checkbox-checked-border-color); --ag-inherited-checkbox-checked-shape-color: var(--ag-checkbox-checked-shape-color); --ag-inherited-checkbox-checked-shape-image: var(--ag-checkbox-checked-shape-image); --ag-inherited-checkbox-indeterminate-background-color: var(--ag-checkbox-indeterminate-background-color); --ag-inherited-checkbox-indeterminate-border-color: var(--ag-checkbox-indeterminate-border-color); --ag-inherited-checkbox-indeterminate-shape-color: var(--ag-checkbox-indeterminate-shape-color); --ag-inherited-checkbox-indeterminate-shape-image: var(--ag-checkbox-indeterminate-shape-image); --ag-inherited-checkbox-unchecked-background-color: var(--ag-checkbox-unchecked-background-color); --ag-inherited-checkbox-unchecked-border-color: var(--ag-checkbox-unchecked-border-color); --ag-inherited-chrome-background-color: var(--ag-chrome-background-color); --ag-inherited-column-border: var(--ag-column-border); --ag-inherited-column-drop-cell-background-color: var(--ag-column-drop-cell-background-color); --ag-inherited-column-drop-cell-border: var(--ag-column-drop-cell-border); --ag-inherited-column-drop-cell-drag-handle-color: var(--ag-column-drop-cell-drag-handle-color); --ag-inherited-column-drop-cell-text-color: var(--ag-column-drop-cell-text-color); --ag-inherited-column-hover-color: var(--ag-column-hover-color); --ag-inherited-column-select-indent-size: var(--ag-column-select-indent-size); --ag-inherited-data-font-size: var(--ag-data-font-size); --ag-inherited-dialog-border: var(--ag-dialog-border); --ag-inherited-dialog-shadow: var(--ag-dialog-shadow); --ag-inherited-drag-and-drop-image-background-color: var(--ag-drag-and-drop-image-background-color); --ag-inherited-drag-and-drop-image-border: var(--ag-drag-and-drop-image-border); --ag-inherited-drag-and-drop-image-shadow: var(--ag-drag-and-drop-image-shadow); --ag-inherited-drag-handle-color: var(--ag-drag-handle-color); --ag-inherited-dropdown-shadow: var(--ag-dropdown-shadow); --ag-inherited-filter-tool-panel-group-indent: var(--ag-filter-tool-panel-group-indent); --ag-inherited-find-active-match-background-color: var(--ag-find-active-match-background-color); --ag-inherited-find-active-match-color: var(--ag-find-active-match-color); --ag-inherited-find-match-background-color: var(--ag-find-match-background-color); --ag-inherited-find-match-color: var(--ag-find-match-color); --ag-inherited-focus-shadow: var(--ag-focus-shadow); --ag-inherited-font-family: var(--ag-font-family); --ag-inherited-font-size: var(--ag-font-size); --ag-inherited-footer-row-border: var(--ag-footer-row-border); --ag-inherited-foreground-color: var(--ag-foreground-color); --ag-inherited-header-background-color: var(--ag-header-background-color); --ag-inherited-header-cell-background-transition-duration: var(--ag-header-cell-background-transition-duration); --ag-inherited-header-cell-hover-background-color: var(--ag-header-cell-hover-background-color); --ag-inherited-header-cell-moving-background-color: var(--ag-header-cell-moving-background-color); --ag-inherited-header-column-border: var(--ag-header-column-border); --ag-inherited-header-column-border-height: var(--ag-header-column-border-height); --ag-inherited-header-column-resize-handle-color: var(--ag-header-column-resize-handle-color); --ag-inherited-header-column-resize-handle-height: var(--ag-header-column-resize-handle-height); --ag-inherited-header-column-resize-handle-width: var(--ag-header-column-resize-handle-width); --ag-inherited-header-font-family: var(--ag-header-font-family); --ag-inherited-header-font-size: var(--ag-header-font-size); --ag-inherited-header-font-weight: var(--ag-header-font-weight); --ag-inherited-header-height: var(--ag-header-height); --ag-inherited-header-row-border: var(--ag-header-row-border); --ag-inherited-header-text-color: var(--ag-header-text-color); --ag-inherited-header-vertical-padding-scale: var(--ag-header-vertical-padding-scale); --ag-inherited-icon-button-active-background-color: var(--ag-icon-button-active-background-color); --ag-inherited-icon-button-active-color: var(--ag-icon-button-active-color); --ag-inherited-icon-button-active-indicator-color: var(--ag-icon-button-active-indicator-color); --ag-inherited-icon-button-background-color: var(--ag-icon-button-background-color); --ag-inherited-icon-button-background-spread: var(--ag-icon-button-background-spread); --ag-inherited-icon-button-border-radius: var(--ag-icon-button-border-radius); --ag-inherited-icon-button-color: var(--ag-icon-button-color); --ag-inherited-icon-button-hover-background-color: var(--ag-icon-button-hover-background-color); --ag-inherited-icon-button-hover-color: var(--ag-icon-button-hover-color); --ag-inherited-icon-color: var(--ag-icon-color); --ag-inherited-icon-size: var(--ag-icon-size); --ag-inherited-input-background-color: var(--ag-input-background-color); --ag-inherited-input-border: var(--ag-input-border); --ag-inherited-input-border-radius: var(--ag-input-border-radius); --ag-inherited-input-disabled-background-color: var(--ag-input-disabled-background-color); --ag-inherited-input-disabled-border: var(--ag-input-disabled-border); --ag-inherited-input-disabled-text-color: var(--ag-input-disabled-text-color); --ag-inherited-input-focus-background-color: var(--ag-input-focus-background-color); --ag-inherited-input-focus-border: var(--ag-input-focus-border); --ag-inherited-input-focus-shadow: var(--ag-input-focus-shadow); --ag-inherited-input-focus-text-color: var(--ag-input-focus-text-color); --ag-inherited-input-height: var(--ag-input-height); --ag-inherited-input-icon-color: var(--ag-input-icon-color); --ag-inherited-input-invalid-background-color: var(--ag-input-invalid-background-color); --ag-inherited-input-invalid-border: var(--ag-input-invalid-border); --ag-inherited-input-invalid-text-color: var(--ag-input-invalid-text-color); --ag-inherited-input-padding-start: var(--ag-input-padding-start); --ag-inherited-input-placeholder-text-color: var(--ag-input-placeholder-text-color); --ag-inherited-input-text-color: var(--ag-input-text-color); --ag-inherited-invalid-color: var(--ag-invalid-color); --ag-inherited-list-item-height: var(--ag-list-item-height); --ag-inherited-menu-background-color: var(--ag-menu-background-color); --ag-inherited-menu-border: var(--ag-menu-border); --ag-inherited-menu-separator-color: var(--ag-menu-separator-color); --ag-inherited-menu-shadow: var(--ag-menu-shadow); --ag-inherited-menu-text-color: var(--ag-menu-text-color); --ag-inherited-modal-overlay-background-color: var(--ag-modal-overlay-background-color); --ag-inherited-odd-row-background-color: var(--ag-odd-row-background-color); --ag-inherited-panel-background-color: var(--ag-panel-background-color); --ag-inherited-panel-title-bar-background-color: var(--ag-panel-title-bar-background-color); --ag-inherited-panel-title-bar-border: var(--ag-panel-title-bar-border); --ag-inherited-panel-title-bar-font-weight: var(--ag-panel-title-bar-font-weight); --ag-inherited-panel-title-bar-icon-color: var(--ag-panel-title-bar-icon-color); --ag-inherited-panel-title-bar-text-color: var(--ag-panel-title-bar-text-color); --ag-inherited-picker-button-background-color: var(--ag-picker-button-background-color); --ag-inherited-picker-button-border: var(--ag-picker-button-border); --ag-inherited-picker-button-focus-background-color: var(--ag-picker-button-focus-background-color); --ag-inherited-picker-button-focus-border: var(--ag-picker-button-focus-border); --ag-inherited-picker-list-background-color: var(--ag-picker-list-background-color); --ag-inherited-picker-list-border: var(--ag-picker-list-border); --ag-inherited-pinned-column-border: var(--ag-pinned-column-border); --ag-inherited-pinned-row-background-color: var(--ag-pinned-row-background-color); --ag-inherited-pinned-row-border: var(--ag-pinned-row-border); --ag-inherited-pinned-row-font-weight: var(--ag-pinned-row-font-weight); --ag-inherited-pinned-row-text-color: var(--ag-pinned-row-text-color); --ag-inherited-pinned-source-row-background-color: var(--ag-pinned-source-row-background-color); --ag-inherited-pinned-source-row-font-weight: var(--ag-pinned-source-row-font-weight); --ag-inherited-pinned-source-row-text-color: var(--ag-pinned-source-row-text-color); --ag-inherited-popup-shadow: var(--ag-popup-shadow); --ag-inherited-radio-checked-shape-image: var(--ag-radio-checked-shape-image); --ag-inherited-range-header-highlight-color: var(--ag-range-header-highlight-color); --ag-inherited-range-selection-background-color: var(--ag-range-selection-background-color); --ag-inherited-range-selection-border-color: var(--ag-range-selection-border-color); --ag-inherited-range-selection-border-style: var(--ag-range-selection-border-style); --ag-inherited-range-selection-chart-background-color: var(--ag-range-selection-chart-background-color); --ag-inherited-range-selection-chart-category-background-color: var(--ag-range-selection-chart-category-background-color); --ag-inherited-range-selection-highlight-color: var(--ag-range-selection-highlight-color); --ag-inherited-row-border: var(--ag-row-border); --ag-inherited-row-group-indent-size: var(--ag-row-group-indent-size); --ag-inherited-row-height: var(--ag-row-height); --ag-inherited-row-hover-color: var(--ag-row-hover-color); --ag-inherited-row-loading-skeleton-effect-color: var(--ag-row-loading-skeleton-effect-color); --ag-inherited-row-numbers-selected-color: var(--ag-row-numbers-selected-color); --ag-inherited-row-vertical-padding-scale: var(--ag-row-vertical-padding-scale); --ag-inherited-select-cell-background-color: var(--ag-select-cell-background-color); --ag-inherited-select-cell-border: var(--ag-select-cell-border); --ag-inherited-selected-row-background-color: var(--ag-selected-row-background-color); --ag-inherited-set-filter-indent-size: var(--ag-set-filter-indent-size); --ag-inherited-side-bar-background-color: var(--ag-side-bar-background-color); --ag-inherited-side-bar-panel-width: var(--ag-side-bar-panel-width); --ag-inherited-side-button-background-color: var(--ag-side-button-background-color); --ag-inherited-side-button-bar-background-color: var(--ag-side-button-bar-background-color); --ag-inherited-side-button-bar-top-padding: var(--ag-side-button-bar-top-padding); --ag-inherited-side-button-border: var(--ag-side-button-border); --ag-inherited-side-button-hover-background-color: var(--ag-side-button-hover-background-color); --ag-inherited-side-button-hover-text-color: var(--ag-side-button-hover-text-color); --ag-inherited-side-button-left-padding: var(--ag-side-button-left-padding); --ag-inherited-side-button-right-padding: var(--ag-side-button-right-padding); --ag-inherited-side-button-selected-background-color: var(--ag-side-button-selected-background-color); --ag-inherited-side-button-selected-border: var(--ag-side-button-selected-border); --ag-inherited-side-button-selected-text-color: var(--ag-side-button-selected-text-color); --ag-inherited-side-button-selected-underline-color: var(--ag-side-button-selected-underline-color); --ag-inherited-side-button-selected-underline-transition-duration: var(--ag-side-button-selected-underline-transition-duration); --ag-inherited-side-button-selected-underline-width: var(--ag-side-button-selected-underline-width); --ag-inherited-side-button-text-color: var(--ag-side-button-text-color); --ag-inherited-side-button-vertical-padding: var(--ag-side-button-vertical-padding); --ag-inherited-side-panel-border: var(--ag-side-panel-border); --ag-inherited-spacing: var(--ag-spacing); --ag-inherited-status-bar-label-color: var(--ag-status-bar-label-color); --ag-inherited-status-bar-label-font-weight: var(--ag-status-bar-label-font-weight); --ag-inherited-status-bar-value-color: var(--ag-status-bar-value-color); --ag-inherited-status-bar-value-font-weight: var(--ag-status-bar-value-font-weight); --ag-inherited-subtle-text-color: var(--ag-subtle-text-color); --ag-inherited-tab-background-color: var(--ag-tab-background-color); --ag-inherited-tab-bar-background-color: var(--ag-tab-bar-background-color); --ag-inherited-tab-bar-border: var(--ag-tab-bar-border); --ag-inherited-tab-bar-horizontal-padding: var(--ag-tab-bar-horizontal-padding); --ag-inherited-tab-bar-top-padding: var(--ag-tab-bar-top-padding); --ag-inherited-tab-bottom-padding: var(--ag-tab-bottom-padding); --ag-inherited-tab-horizontal-padding: var(--ag-tab-horizontal-padding); --ag-inherited-tab-hover-background-color: var(--ag-tab-hover-background-color); --ag-inherited-tab-hover-text-color: var(--ag-tab-hover-text-color); --ag-inherited-tab-selected-background-color: var(--ag-tab-selected-background-color); --ag-inherited-tab-selected-border-color: var(--ag-tab-selected-border-color); --ag-inherited-tab-selected-border-width: var(--ag-tab-selected-border-width); --ag-inherited-tab-selected-text-color: var(--ag-tab-selected-text-color); --ag-inherited-tab-selected-underline-color: var(--ag-tab-selected-underline-color); --ag-inherited-tab-selected-underline-transition-duration: var(--ag-tab-selected-underline-transition-duration); --ag-inherited-tab-selected-underline-width: var(--ag-tab-selected-underline-width); --ag-inherited-tab-spacing: var(--ag-tab-spacing); --ag-inherited-tab-text-color: var(--ag-tab-text-color); --ag-inherited-tab-top-padding: var(--ag-tab-top-padding); --ag-inherited-text-color: var(--ag-text-color); --ag-inherited-toggle-button-height: var(--ag-toggle-button-height); --ag-inherited-toggle-button-off-background-color: var(--ag-toggle-button-off-background-color); --ag-inherited-toggle-button-on-background-color: var(--ag-toggle-button-on-background-color); --ag-inherited-toggle-button-switch-background-color: var(--ag-toggle-button-switch-background-color); --ag-inherited-toggle-button-switch-inset: var(--ag-toggle-button-switch-inset); --ag-inherited-toggle-button-width: var(--ag-toggle-button-width); --ag-inherited-tool-panel-separator-border: var(--ag-tool-panel-separator-border); --ag-inherited-tooltip-background-color: var(--ag-tooltip-background-color); --ag-inherited-tooltip-border: var(--ag-tooltip-border); --ag-inherited-tooltip-text-color: var(--ag-tooltip-text-color); --ag-inherited-value-change-delta-down-color: var(--ag-value-change-delta-down-color); --ag-inherited-value-change-delta-up-color: var(--ag-value-change-delta-up-color); --ag-inherited-value-change-value-highlight-background-color: var(--ag-value-change-value-highlight-background-color); --ag-inherited-widget-container-horizontal-padding: var(--ag-widget-container-horizontal-padding); --ag-inherited-widget-container-vertical-padding: var(--ag-widget-container-vertical-padding); --ag-inherited-widget-horizontal-spacing: var(--ag-widget-horizontal-spacing); --ag-inherited-widget-vertical-spacing: var(--ag-widget-vertical-spacing); --ag-inherited-wrapper-border: var(--ag-wrapper-border); --ag-inherited-wrapper-border-radius: var(--ag-wrapper-border-radius); :where(\[data-ag-theme-mode="light"\]) & { --ag-inherited-browser-color-scheme: var(--ag-browser-color-scheme); --ag-inherited-chrome-background-color: var(--ag-chrome-background-color); } :where(\[data-ag-theme-mode="dark"\]) & { --ag-inherited-advanced-filter-builder-column-pill-color: var(--ag-advanced-filter-builder-column-pill-color); --ag-inherited-advanced-filter-builder-join-pill-color: var(--ag-advanced-filter-builder-join-pill-color); --ag-inherited-advanced-filter-builder-option-pill-color: var(--ag-advanced-filter-builder-option-pill-color); --ag-inherited-advanced-filter-builder-value-pill-color: var(--ag-advanced-filter-builder-value-pill-color); --ag-inherited-browser-color-scheme: var(--ag-browser-color-scheme); --ag-inherited-chrome-background-color: var(--ag-chrome-background-color); --ag-inherited-find-active-match-color: var(--ag-find-active-match-color); --ag-inherited-find-match-color: var(--ag-find-match-color); --ag-inherited-menu-background-color: var(--ag-menu-background-color); } :where(\[data-ag-theme-mode="dark-blue"\]) & { --ag-inherited-advanced-filter-builder-column-pill-color: var(--ag-advanced-filter-builder-column-pill-color); --ag-inherited-advanced-filter-builder-join-pill-color: var(--ag-advanced-filter-builder-join-pill-color); --ag-inherited-advanced-filter-builder-option-pill-color: var(--ag-advanced-filter-builder-option-pill-color); --ag-inherited-advanced-filter-builder-value-pill-color: var(--ag-advanced-filter-builder-value-pill-color); --ag-inherited-browser-color-scheme: var(--ag-browser-color-scheme); --ag-inherited-chrome-background-color: var(--ag-chrome-background-color); --ag-inherited-find-active-match-color: var(--ag-find-active-match-color); --ag-inherited-find-match-color: var(--ag-find-match-color); --ag-inherited-menu-background-color: var(--ag-menu-background-color); } }
+
 Drag here to set row groups
 
 Drag here to set column labels
@@ -385,9 +208,9 @@ Country
 
 Shellie
 
-49,446
+53,977
 
-\-£627.30
+\-£642.26
 
 aliquet@purus.com
 
@@ -397,9 +220,9 @@ French Polynesia
 
 Jade
 
-78,893
+55,947
 
-\-£906.36
+£246.35
 
 mi.pede.nonummy@senectus.org
 
@@ -409,9 +232,9 @@ Tonga
 
 Wyoming
 
-8,882
+5,397
 
-£55.76
+\-£749.57
 
 Nulla.tempor.augue@aliquamiaculis.org
 
@@ -421,9 +244,9 @@ Rwanda
 
 Christine
 
-69,518
+69,624
 
-£125.04
+\-£825.10
 
 neque.sed.dictum@ultricesVivamus.ca
 
@@ -433,9 +256,9 @@ Bahamas
 
 Jameson
 
-4,238
+38,473
 
-£170.98
+£31.72
 
 sem.semper@liberoProin.com
 
@@ -445,9 +268,9 @@ Nauru
 
 Driscoll
 
-21,692
+63,389
 
-\-£594.06
+\-£522.15
 
 libero.dui@estacfacilisis.edu
 
@@ -457,9 +280,9 @@ Tajikistan
 
 Morgan
 
-79,436
+51,154
 
-£115.01
+\-£663.83
 
 mauris.eu@ipsum.ca
 
@@ -469,9 +292,9 @@ Colombia
 
 Kylee
 
-62,388
+81,208
 
-£437.11
+£265.05
 
 libero.Proin@malesuadafamesac.com
 
@@ -481,9 +304,9 @@ Papua New Guinea
 
 Cathleen
 
-29,723
+18,043
 
-\-£540.19
+\-£586.82
 
 risus.Donec@augue.edu
 
@@ -493,9 +316,9 @@ Guinea-Bissau
 
 Sierra
 
-95,017
+59,735
 
-\-£742.40
+£453.83
 
 dictum.eleifend.nunc@tellus.net
 
@@ -505,9 +328,9 @@ Isle of Man
 
 Levi
 
-66,937
+27,295
 
-£87.91
+\-£898.52
 
 Nulla.tempor.augue@nibhdolor.ca
 
@@ -517,9 +340,9 @@ Tuvalu
 
 Kyle
 
-2,510
+94,492
 
-£454.30
+£31.27
 
 lacinia@senectus.org
 
@@ -529,9 +352,9 @@ Qatar
 
 Emery
 
-42,677
+81,067
 
-\-£869.12
+\-£841.66
 
 Nulla.facilisis@nonummyultriciesornare.co.uk
 
@@ -541,9 +364,9 @@ Belize
 
 Nadine
 
-84,276
+88,554
 
-\-£724.56
+\-£981.43
 
 Duis@Sed.ca
 
@@ -553,9 +376,9 @@ Uruguay
 
 Dalton
 
-66,926
+47,196
 
-\-£779.42
+£108.59
 
 nibh.dolor.nonummy@laoreetlibero.org
 
@@ -565,9 +388,9 @@ Cayman Islands
 
 Zeph
 
-51,688
+66,367
 
-\-£639.95
+\-£676.31
 
 non.dui@felisorci.com
 
@@ -577,9 +400,9 @@ Niger
 
 Shannon
 
-12,040
+68,372
 
-\-£778.18
+\-£619.72
 
 leo@lobortis.co.uk
 
@@ -589,9 +412,9 @@ Somalia
 
 Erich
 
-69,877
+30,032
 
-\-£610.68
+\-£620.27
 
 cursus.non.egestas@aliquet.org
 
@@ -601,9 +424,9 @@ Sao Tome and Principe
 
 Rhiannon
 
-8,184
+21,210
 
-£459.01
+£65.16
 
 arcu.Morbi.sit@cursus.edu
 
@@ -613,9 +436,9 @@ Croatia
 
 Elijah
 
-80,582
+35,019
 
-\-£845.80
+\-£828.30
 
 ipsum.Donec.sollicitudin@leo.co.uk
 
@@ -625,9 +448,9 @@ San Marino
 
 Grady
 
-20,501
+90,152
 
-£488.20
+\-£700.61
 
 mollis.nec.cursus@malesuadamalesuadaInteger.edu
 
@@ -637,9 +460,9 @@ Cuba
 
 Quentin
 
-33,800
+22,001
 
-\-£948.93
+\-£521.47
 
 erat.vel@auctor.net
 
@@ -649,9 +472,9 @@ Mayotte
 
 Samuel
 
-64,503
+31,692
 
-£142.21
+£61.05
 
 tellus@magnaSed.edu
 
@@ -661,9 +484,9 @@ Lebanon
 
 Merritt
 
-8,725
+86,351
 
-\-£572.96
+\-£607.26
 
 interdum.Nunc.sollicitudin@elitpellentesque.edu
 
@@ -671,6 +494,198 @@ interdum.Nunc.sollicitudin@elitpellentesque.edu
 
 French Southern Territories
 
+Harlan
+
+60,892
+
+£235.20
+
+nascetur.ridiculus@feugiatmetussit.net
+
+(012812) 59410
+
+Saint Pierre and Miquelon
+
+Stuart
+
+81,917
+
+\-£717.78
+
+sed.pede.nec@maurisMorbinon.com
+
+0807 013 3815
+
+Jersey
+
+Clarke
+
+20,281
+
+£98.50
+
+in@estacfacilisis.org
+
+(028) 5013 9648
+
+Seychelles
+
+Roanna
+
+19,958
+
+\-£670.22
+
+dui@nascetur.net
+
+(024) 3023 2962
+
+Lesotho
+
+Delilah
+
+70,736
+
+\-£561.14
+
+laoreet.lectus.quis@utaliquam.edu
+
+07160 224163
+
+Indonesia
+
+Georgia
+
+76,321
+
+£434.92
+
+dui@enimnisl.net
+
+(0113) 542 3955
+
+Niue
+
+Aiko
+
+63,238
+
+£87.03
+
+cubilia.Curae.Phasellus@augueid.com
+
+055 9506 2116
+
+Belize
+
+Winter
+
+70,173
+
+\-£878.20
+
+aliquet@Duisac.ca
+
+0800 693847
+
+Equatorial Guinea
+
+Jolene
+
+31,148
+
+£343.50
+
+odio.Aliquam.vulputate@ac.ca
+
+(023) 4876 2215
+
+Morocco
+
+Kaden
+
+54,228
+
+\-£625.99
+
+rutrum@eleifendnec.ca
+
+07305 685548
+
+Peru
+
+Kaseem
+
+52,585
+
+\-£925.65
+
+mauris.erat.eget@nequeMorbi.com
+
+07275 403152
+
+Sudan
+
+Vladimir
+
+53,249
+
+\-£815.85
+
+id@nonarcuVivamus.edu
+
+0500 950469
+
+Mexico
+
+Jocelyn
+
+98,471
+
+\-£833.90
+
+dolor@nec.ca
+
+07302 403156
+
+Canada
+
+Howard
+
+41,419
+
+£445.19
+
+Donec.felis@insodales.com
+
+07624 830239
+
+Seychelles
+
+Adam
+
+51,772
+
+£388.56
+
+amet.dapibus@faucibus.edu
+
+0845 46 49
+
+Jordan
+
+Aiko
+
+55,131
+
+\-£980.25
+
+sodales@mauris.edu
+
+0800 1111
+
+Faroe Islands
+
 Columns
 
 Filters
@@ -707,6 +722,10 @@ Street
 
 City
 
+Postcode
+
+Country
+
 Row Groups
 
 Drag here to set row groups
@@ -763,708 +782,16 @@ to of
 
 Page of
 
-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; }
-
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { AG\_GRID\_LICENSE\_KEY } from '@iress/ag-grid-license-key';
-import type {
-  GridApi,
-  GridReadyEvent,
-  ValueFormatterParams,
-} from 'ag-grid-community';
-import { AgGridReact, AgGridReactProps } from 'ag-grid-react';
-import { AllEnterpriseModule, LicenseManager, ModuleRegistry, provideGlobalGridOptions } from 'ag-grid-enterprise';
-import { AG\_THEME\_IRESS\_ICONS, IressAgGridContainer } from '@iress/ids-themes';
-import styles from '@iress-storybook/styles.module.scss';
-LicenseManager.setLicenseKey(AG\_GRID\_LICENSE\_KEY);
-ModuleRegistry.registerModules(\[AllEnterpriseModule\]);
-provideGlobalGridOptions({ theme: 'legacy' });
-const formatter2dp \= new Intl.NumberFormat('en-UK', {
-  minimumFractionDigits: 2,
-  maximumFractionDigits: 2,
-});
-const formatterCurrency \= new Intl.NumberFormat('en-UK', {
-  minimumFractionDigits: 2,
-  maximumFractionDigits: 2,
-  currencySign: 'standard',
-  currency: 'GBP',
-  style: 'currency',
-});
-const getSales \= (number: number) \=> {
-  const no \= number \* 100000;
-  return Math.ceil(no);
-};
-const getProfit \= (number: number) \=> {
-  const no \= number \> 0.5 ? number \* \-1000 : number \* 1000;
-  return formatter2dp.format(no);
-};
-const getRating \= () \=> (Math.random() \> 0.5 ? 'red' : 'green');
-const BIG\_DATA \= \[
-  {
-    firstName: 'Shellie',
-    lastName: 'Cantu',
-    email: 'aliquet@purus.com',
-    phoneNo: '0828 746 6831',
-    street: '639-9644 Eget Street',
-    city: 'Weißenfels',
-    postcode: '37962',
-    country: 'French Polynesia',
-    personalID: '16011210 9582',
-  },
-  {
-    firstName: 'Jade',
-    lastName: 'Sellers',
-    email: 'mi.pede.nonummy@senectus.org',
-    phoneNo: '0800 360062',
-    street: 'P.O. Box 511, 3099 In Rd.',
-    city: 'Cochrane',
-    postcode: 'K8I 3RB',
-    country: 'Tonga',
-    personalID: '16870328 2056',
-  },
-  {
-    firstName: 'Wyoming',
-    lastName: 'Fox',
-    email: 'Nulla.tempor.augue@aliquamiaculis.org',
-    phoneNo: '0800 377 7753',
-    street: '7354 Ac Ave',
-    city: 'East Kilbride',
-    postcode: '233010',
-    country: 'Rwanda',
-    personalID: '16070816 5048',
-  },
-  {
-    firstName: 'Christine',
-    lastName: 'Holcomb',
-    email: 'neque.sed.dictum@ultricesVivamus.ca',
-    phoneNo: '07578 190673',
-    street: 'Ap #121-4421 Iaculis Av.',
-    city: 'Etroubles',
-    postcode: '6742',
-    country: 'Bahamas',
-    personalID: '16401211 0773',
-  },
-  {
-    firstName: 'Jameson',
-    lastName: 'Sutton',
-    email: 'sem.semper@liberoProin.com',
-    phoneNo: '07489 442639',
-    street: 'Ap #700-1481 Porttitor Ave',
-    city: 'Nice',
-    postcode: '14655',
-    country: 'Nauru',
-    personalID: '16301129 4323',
-  },
-  {
-    firstName: 'Driscoll',
-    lastName: 'Jenkins',
-    email: 'libero.dui@estacfacilisis.edu',
-    phoneNo: '0843 298 8205',
-    street: 'Ap #775-8090 Sed Avenue',
-    city: 'Natales',
-    postcode: '622109',
-    country: 'Tajikistan',
-    personalID: '16430908 1950',
-  },
-  {
-    firstName: 'Morgan',
-    lastName: 'Hutchinson',
-    email: 'mauris.eu@ipsum.ca',
-    phoneNo: '070 6292 4498',
-    street: '3135 Curabitur Rd.',
-    city: 'Darmstadt',
-    postcode: '010900',
-    country: 'Colombia',
-    personalID: '16890811 2991',
-  },
-  {
-    firstName: 'Kylee',
-    lastName: 'Riddle',
-    email: 'libero.Proin@malesuadafamesac.com',
-    phoneNo: '(017177) 84788',
-    street: '7336 Ipsum St.',
-    city: 'Semarang',
-    postcode: '9828',
-    country: 'Papua New Guinea',
-    personalID: '16260701 0093',
-  },
-  {
-    firstName: 'Cathleen',
-    lastName: 'Dale',
-    email: 'risus.Donec@augue.edu',
-    phoneNo: '(0115) 224 4142',
-    street: 'Ap #568-2948 Fringilla Rd.',
-    city: 'Brandenburg',
-    postcode: 'CH2L 4EH',
-    country: 'Guinea-Bissau',
-    personalID: '16161203 4817',
-  },
-  {
-    firstName: 'Sierra',
-    lastName: 'Robbins',
-    email: 'dictum.eleifend.nunc@tellus.net',
-    phoneNo: '(01266) 957950',
-    street: '481-6201 Mattis. Rd.',
-    city: 'Upper Hutt',
-    postcode: '23945',
-    country: 'Isle of Man',
-    personalID: '16691217 6010',
-  },
-  {
-    firstName: 'Levi',
-    lastName: 'Simpson',
-    email: 'Nulla.tempor.augue@nibhdolor.ca',
-    phoneNo: '0855 608 0347',
-    street: '555-4187 Integer Av.',
-    city: 'Curacaví',
-    postcode: '439311',
-    country: 'Tuvalu',
-    personalID: '16000330 9499',
-  },
-  {
-    firstName: 'Kyle',
-    lastName: 'Mendez',
-    email: 'lacinia@senectus.org',
-    phoneNo: '0845 46 40',
-    street: '814-4647 Nec, St.',
-    city: 'Akron',
-    postcode: '199413',
-    country: 'Qatar',
-    personalID: '16471029 5397',
-  },
-  {
-    firstName: 'Emery',
-    lastName: 'Hurley',
-    email: 'Nulla.facilisis@nonummyultriciesornare.co.uk',
-    phoneNo: '(01553) 502913',
-    street: '4540 Luctus Ave',
-    city: 'Meux',
-    postcode: '36612',
-    country: 'Belize',
-    personalID: '16440228 3842',
-  },
-  {
-    firstName: 'Nadine',
-    lastName: 'Buchanan',
-    email: 'Duis@Sed.ca',
-    phoneNo: '055 2785 0228',
-    street: '694 Mi, Av.',
-    city: 'Middelburg',
-    postcode: '62232-88887',
-    country: 'Uruguay',
-    personalID: '16721129 5857',
-  },
-  {
-    firstName: 'Dalton',
-    lastName: 'Nieves',
-    email: 'nibh.dolor.nonummy@laoreetlibero.org',
-    phoneNo: '0395 486 9374',
-    street: '797-8170 Enim, Street',
-    city: 'Burhanpur',
-    postcode: '29633-93750',
-    country: 'Cayman Islands',
-    personalID: '16600205 0067',
-  },
-  {
-    firstName: 'Zeph',
-    lastName: 'Ruiz',
-    email: 'non.dui@felisorci.com',
-    phoneNo: '0845 46 41',
-    street: 'Ap #282-8369 Malesuada Ave',
-    city: 'Cavallino',
-    postcode: 'EW2V 1ZE',
-    country: 'Niger',
-    personalID: '16580706 9124',
-  },
-  {
-    firstName: 'Shannon',
-    lastName: 'Decker',
-    email: 'leo@lobortis.co.uk',
-    phoneNo: '0800 135593',
-    street: 'P.O. Box 587, 6871 Eleifend. Ave',
-    city: 'Rocca San Felice',
-    postcode: '42271-38735',
-    country: 'Somalia',
-    personalID: '16090810 4763',
-  },
-  {
-    firstName: 'Erich',
-    lastName: 'Daniels',
-    email: 'cursus.non.egestas@aliquet.org',
-    phoneNo: '0845 46 44',
-    street: '689-4565 Velit. Avenue',
-    city: 'Edmundston',
-    postcode: 'JR32 7QA',
-    country: 'Sao Tome and Principe',
-    personalID: '16720401 5049',
-  },
-  {
-    firstName: 'Rhiannon',
-    lastName: 'Malone',
-    email: 'arcu.Morbi.sit@cursus.edu',
-    phoneNo: '0361 311 4051',
-    street: 'Ap #971-1781 Vehicula Road',
-    city: 'Wood Buffalo',
-    postcode: '71682',
-    country: 'Croatia',
-    personalID: '16931028 3388',
-  },
-  {
-    firstName: 'Elijah',
-    lastName: 'Sosa',
-    email: 'ipsum.Donec.sollicitudin@leo.co.uk',
-    phoneNo: '0800 365 8250',
-    street: 'P.O. Box 169, 2562 Commodo Ave',
-    city: 'Montoggio',
-    postcode: '42092',
-    country: 'San Marino',
-    personalID: '16251107 2403',
-  },
-  {
-    firstName: 'Grady',
-    lastName: 'Crosby',
-    email: 'mollis.nec.cursus@malesuadamalesuadaInteger.edu',
-    phoneNo: '070 2824 3427',
-    street: '821-5145 Id, Ave',
-    city: 'Rosoux-Crenwick',
-    postcode: '56176',
-    country: 'Cuba',
-    personalID: '16520115 9133',
-  },
-  {
-    firstName: 'Quentin',
-    lastName: 'Armstrong',
-    email: 'erat.vel@auctor.net',
-    phoneNo: '(029) 5052 0365',
-    street: '157-253 Hendrerit Av.',
-    city: 'Aubervilliers',
-    postcode: '2151',
-    country: 'Mayotte',
-    personalID: '16730607 0553',
-  },
-  {
-    firstName: 'Samuel',
-    lastName: 'Harrell',
-    email: 'tellus@magnaSed.edu',
-    phoneNo: '07064 102166',
-    street: 'P.O. Box 713, 4115 Ut Rd.',
-    city: 'Kingston',
-    postcode: '23315',
-    country: 'Lebanon',
-    personalID: '16361016 5551',
-  },
-  {
-    firstName: 'Merritt',
-    lastName: 'Holland',
-    email: 'interdum.Nunc.sollicitudin@elitpellentesque.edu',
-    phoneNo: '0800 825458',
-    street: 'P.O. Box 261, 3590 Nascetur Road',
-    city: 'Drancy',
-    postcode: '760017',
-    country: 'French Southern Territories',
-    personalID: '16040311 2121',
-  },
-  {
-    firstName: 'Harlan',
-    lastName: 'Brennan',
-    email: 'nascetur.ridiculus@feugiatmetussit.net',
-    phoneNo: '(012812) 59410',
-    street: '8210 Torquent Av.',
-    city: 'Grantham',
-    postcode: '01537',
-    country: 'Saint Pierre and Miquelon',
-    personalID: '16431216 0239',
-  },
-  {
-    firstName: 'Stuart',
-    lastName: 'Deleon',
-    email: 'sed.pede.nec@maurisMorbinon.com',
-    phoneNo: '0807 013 3815',
-    street: 'P.O. Box 143, 4909 At Street',
-    city: 'Terrance',
-    postcode: '27218',
-    country: 'Jersey',
-    personalID: '16330207 5852',
-  },
-  {
-    firstName: 'Clarke',
-    lastName: 'Middleton',
-    email: 'in@estacfacilisis.org',
-    phoneNo: '(028) 5013 9648',
-    street: '9856 Eget, Avenue',
-    city: 'Solihull',
-    postcode: '72893',
-    country: 'Seychelles',
-    personalID: '16340804 3325',
-  },
-  {
-    firstName: 'Roanna',
-    lastName: 'Gentry',
-    email: 'dui@nascetur.net',
-    phoneNo: '(024) 3023 2962',
-    street: '3566 Ornare. Rd.',
-    city: 'Freiberg',
-    postcode: '3899',
-    country: 'Lesotho',
-    personalID: '16680618 3791',
-  },
-  {
-    firstName: 'Delilah',
-    lastName: 'Bird',
-    email: 'laoreet.lectus.quis@utaliquam.edu',
-    phoneNo: '07160 224163',
-    street: 'P.O. Box 332, 8565 Molestie Avenue',
-    city: 'Washuk',
-    postcode: '607065',
-    country: 'Indonesia',
-    personalID: '16891112 9461',
-  },
-  {
-    firstName: 'Georgia',
-    lastName: 'Cash',
-    email: 'dui@enimnisl.net',
-    phoneNo: '(0113) 542 3955',
-    street: '900-3252 Fusce Avenue',
-    city: 'Sint-Michiels',
-    postcode: 'Z8203',
-    country: 'Niue',
-    personalID: '16340718 4716',
-  },
-  {
-    firstName: 'Aiko',
-    lastName: 'Mclean',
-    email: 'cubilia.Curae.Phasellus@augueid.com',
-    phoneNo: '055 9506 2116',
-    street: 'P.O. Box 786, 1756 Fringilla St.',
-    city: 'Malonne',
-    postcode: 'Y8E 7M2',
-    country: 'Belize',
-    personalID: '16680622 4207',
-  },
-  {
-    firstName: 'Winter',
-    lastName: 'Jacobs',
-    email: 'aliquet@Duisac.ca',
-    phoneNo: '0800 693847',
-    street: '774-9011 Arcu Road',
-    city: 'Bilbo',
-    postcode: '05558',
-    country: 'Equatorial Guinea',
-    personalID: '16611201 4144',
-  },
-  {
-    firstName: 'Jolene',
-    lastName: 'Rios',
-    email: 'odio.Aliquam.vulputate@ac.ca',
-    phoneNo: '(023) 4876 2215',
-    street: 'Ap #325-8225 Amet Road',
-    city: 'Limena',
-    postcode: 'K56 0YJ',
-    country: 'Morocco',
-    personalID: '16170215 3485',
-  },
-  {
-    firstName: 'Kaden',
-    lastName: 'Morrow',
-    email: 'rutrum@eleifendnec.ca',
-    phoneNo: '07305 685548',
-    street: '8870 Aliquam Road',
-    city: 'Sète',
-    postcode: '04908',
-    country: 'Peru',
-    personalID: '16820820 6675',
-  },
-  {
-    firstName: 'Kaseem',
-    lastName: 'Norris',
-    email: 'mauris.erat.eget@nequeMorbi.com',
-    phoneNo: '07275 403152',
-    street: 'P.O. Box 776, 7115 Integer Avenue',
-    city: 'Jönköping',
-    postcode: '42236-83471',
-    country: 'Sudan',
-    personalID: '16440829 7895',
-  },
-  {
-    firstName: 'Vladimir',
-    lastName: 'Mcguire',
-    email: 'id@nonarcuVivamus.edu',
-    phoneNo: '0500 950469',
-    street: '2067 Est Ave',
-    city: 'Ziano di Fiemme',
-    postcode: '774056',
-    country: 'Mexico',
-    personalID: '16771016 3796',
-  },
-  {
-    firstName: 'Jocelyn',
-    lastName: 'Schroeder',
-    email: 'dolor@nec.ca',
-    phoneNo: '07302 403156',
-    street: 'Ap #155-3999 Vivamus St.',
-    city: 'Malloa',
-    postcode: '4059',
-    country: 'Canada',
-    personalID: '16530314 9388',
-  },
-  {
-    firstName: 'Howard',
-    lastName: 'Villarreal',
-    email: 'Donec.felis@insodales.com',
-    phoneNo: '07624 830239',
-    street: '540-7057 Cras Rd.',
-    city: 'Siverek',
-    postcode: '8701',
-    country: 'Seychelles',
-    personalID: '16640823 8530',
-  },
-  {
-    firstName: 'Adam',
-    lastName: 'Miranda',
-    email: 'amet.dapibus@faucibus.edu',
-    phoneNo: '0845 46 49',
-    street: 'Ap #931-6286 Diam. Avenue',
-    city: 'Warburg',
-    postcode: '01972',
-    country: 'Jordan',
-    personalID: '16370414 7911',
-  },
-  {
-    firstName: 'Aiko',
-    lastName: 'Elliott',
-    email: 'sodales@mauris.edu',
-    phoneNo: '0800 1111',
-    street: 'P.O. Box 583, 6119 Ut St.',
-    city: 'Villavicencio',
-    postcode: '4864 XQ',
-    country: 'Faroe Islands',
-    personalID: '16940907 6115',
-  },
-\].map((person) \=> ({
-  ...person,
-  sales: getSales(Math.random()),
-  profit: getProfit(Math.random()),
-  redOrGreen: getRating(),
-  date: new Date(Math.floor(Math.random() \* \-10000000000)).toDateString(),
-}));
-const createClassNameMutationObserver \= (
-  element: HTMLElement,
-  callback: (className: string) \=> void,
-): MutationObserver \=> {
-  const observer \= new MutationObserver(() \=> {
-    callback(element.className);
-  });
-  observer.observe(element, {
-    attributes: true,
-    attributeFilter: \['class'\],
-    childList: false,
-    characterData: false,
-  });
-  return observer;
-};
-const useClassNameMutationObserver \= (
-  element: HTMLElement,
-  callback: () \=> void,
-): void \=> {
-  useEffect(() \=> {
-    const observer \= createClassNameMutationObserver(element, callback);
-    // Cleanup listener
-    return (): void \=> {
-      observer.disconnect();
-    };
-  });
-};
-const RedOrGreenFormatter \= (params: ValueFormatterParams) \=> {
-  const dotStyle \= styles\[\`dot--${params.value}\`\];
-  return <span className\={\`${styles.dot} ${dotStyle}\`} />;
-};
-const CommaFormatter \= (params: ValueFormatterParams): string \=> {
-  return params.value.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',');
-};
-const CurrencyFormatter \= (params: ValueFormatterParams): string \=> {
-  if (params.value \=== '0.00') {
-    return formatter2dp.format(params.value);
-  }
-  return formatterCurrency.format(params.value);
-};
-export const AgGridComplex \= (args: AgGridReactProps) \=> {
-  const \[rowData, setRowData\] \= useState(BIG\_DATA);
-  const api \= useRef<GridApi\>();
-  // pick one row at random to show data updating in the grid
-  useEffect(() \=> {
-    const updateTick \= setInterval(() \=> {
-      const randomNo \= Math.random();
-      const index \= Math.floor(Math.random() \* rowData.length);
-      const itemToUpdate \= rowData\[index\];
-      if (randomNo < 0.5) {
-        itemToUpdate.sales \= getSales(Math.random());
-      } else if (randomNo \> 0.9) {
-        itemToUpdate.profit \= getProfit(0);
-      } else {
-        itemToUpdate.profit \= getProfit(Math.random());
-      }
-      setRowData(rowData);
-      api.current?.refreshCells();
-    }, 500);
-    return () \=> {
-      clearInterval(updateTick);
-    };
-  }, \[rowData\]);
-  const onGridReady \= useCallback((event: GridReadyEvent): void \=> {
-    api.current \= event.api;
-    api.current.resetRowHeights();
-  }, \[\]);
-  useClassNameMutationObserver(document.documentElement, () \=> {
-    if (api.current) {
-      api.current.resetRowHeights();
-    }
-  });
-  return (
-    <IressAgGridContainer
-      alignMiddle
-      style\={{ height: '100vh', width: '100%' }}
-    \>
-      <AgGridReact        {...args}
-        onGridReady={onGridReady}
-        rowDragManaged        animateRows        enableRangeSelection={true}
-        enableCharts={true}
-        sideBar={true}
-        rowData={rowData}
-        rowSelection="multiple"        rowMultiSelectWithClick        components={{
-          redGreenDots: RedOrGreenFormatter,
-        }}
-        defaultColDef={{
-          enableCellChangeFlash: true,
-          resizable: true,
-          sortable: true,
-          unSortIcon: true,
-          filter: true,
-          floatingFilter: true,
-          enablePivot: false,
-          filterParams: {
-            buttons: \['reset', 'apply'\],
-          },
-          autoHeight: true,
-          wrapText: true,
-        }}
-        icons={AG\_THEME\_IRESS\_ICONS}
-        columnDefs={\[
-          {
-            headerName: 'Employee',
-            children: \[
-              {
-                field: 'firstName',
-                editable: true,
-                filter: 'agTextColumnFilter',
-                headerTooltip: 'First name',
-                rowDrag: true,
-                lockVisible: true,
-                tooltipField: 'firstName',
-              },
-              {
-                field: 'lastName',
-                editable: true,
-                filter: 'agTextColumnFilter',
-                headerTooltip: 'Surname',
-                lockVisible: true,
-                cellClass: 'iress-cell--divider',
-                headerClass: 'iress-cell--divider',
-                columnGroupShow: 'open',
-              },
-              {
-                field: 'personalID',
-                filter: 'agTextColumnFilter',
-                headerTooltip: 'Personal ID',
-                columnGroupShow: 'open',
-              },
-              {
-                field: 'date',
-                filter: 'agDateColumnFilter',
-                headerTooltip: 'Date',
-                columnGroupShow: 'open',
-              },
-            \],
-          },
-          {
-            headerName: 'Sales performance',
-            children: \[
-              {
-                field: 'redOrGreen',
-                headerName: 'Rating',
-                cellRenderer: 'redGreenDots',
-                filter: false,
-              },
-              {
-                field: 'sales',
-                filter: 'agNumberColumnFilter',
-                valueFormatter: CommaFormatter,
-              },
-              {
-                field: 'profit',
-                valueFormatter: CurrencyFormatter,
-                cellClassRules: {
-                  'iress--positive': (params) \=> parseInt(params.value, 10) \> 0,
-                  'iress--negative': (params) \=> parseInt(params.value, 10) < 0,
-                  'iress--zero': (params) \=> params.value \=== '0.00',
-                },
-              },
-            \],
-          },
-          {
-            headerName: 'Contact details',
-            children: \[
-              {
-                field: 'email',
-                width: 350,
-                filter: 'agTextColumnFilter',
-                headerTooltip: 'Email address',
-                cellClass: 'iress-cell--ellipsis',
-              },
-              {
-                field: 'phoneNo',
-                enableValue: true,
-                filter: 'agTextColumnFilter',
-                headerTooltip: 'Phone number',
-              },
-            \],
-          },
-          {
-            headerName: 'Address',
-            children: \[
-              {
-                field: 'street',
-                width: 350,
-                filter: 'agTextColumnFilter',
-                cellClass: 'iress-cell--ellipsis',
-                columnGroupShow: 'open',
-              },
-              {
-                field: 'city',
-                filter: 'agTextColumnFilter',
-                columnGroupShow: 'open',
-              },
-              {
-                field: 'postcode',
-                filter: 'agTextColumnFilter',
-                columnGroupShow: 'open',
-              },
-              { field: 'country', filter: 'agTextColumnFilter' },
-            \],
-          },
-        \]}
-      />    </IressAgGridContainer\>
-  );
-};
-export default AgGridComplex;
-
-Copy
+Show code
 
 ### [](#compact)Compact
 
 This is a complex example showcasing some of the more advanced features of AG Grid using the `compact` variant.
 
+/\* Ellipsis text \*/ .iress-cell--ellipsis .ag-cell-wrapper { overflow: hidden; } .iress-cell--ellipsis .ag-cell-wrapper .ag-cell-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /\* Column divider \*/ .ag-header-cell.iress-cell--divider, .ag-cell.iress-cell--divider { border-inline-end: 1px solid var(--iress-colour-neutral-40, #D7D8DA); } /\* Positive and negative values \*/ .ag-cell.iress--positive, .ag-cell .iress--positive { color: var(--iress-colour-system-success-text, #015537); } .ag-cell.iress--negative, .ag-cell .iress--negative { color: var(--iress-colour-system-danger-text, #970202); } .ag-cell.iress--zero, .ag-cell .iress--zero { color: var(--iress-colour-neutral-70, #6D7278); }
+
+:where(.ag-theme-params-3) { --ag-accent-color: var(--ag-inherited-accent-color, var(--iress-colour-primary-fill, #13213F)); --ag-advanced-filter-builder-button-bar-border: var(--ag-inherited-advanced-filter-builder-button-bar-border, solid 1px var(--ag-border-color)); --ag-advanced-filter-builder-column-pill-color: var(--ag-inherited-advanced-filter-builder-column-pill-color, #a6e194); --ag-advanced-filter-builder-indent-size: var(--ag-inherited-advanced-filter-builder-indent-size, calc( var(--ag-spacing) \* 2 + var(--ag-icon-size) )); --ag-advanced-filter-builder-join-pill-color: var(--ag-inherited-advanced-filter-builder-join-pill-color, #f08e8d); --ag-advanced-filter-builder-option-pill-color: var(--ag-inherited-advanced-filter-builder-option-pill-color, #f3c08b); --ag-advanced-filter-builder-value-pill-color: var(--ag-inherited-advanced-filter-builder-value-pill-color, #85c0e4); --ag-background-color: var(--ag-inherited-background-color, var(--iress-colour-neutral-10, #FFFFFF)); --ag-border-color: var(--ag-inherited-border-color, var(--iress-colour-neutral-30, #E4E5E7)); --ag-border-radius: var(--ag-inherited-border-radius, var(--iress-radius-system-layout, var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem))); --ag-browser-color-scheme: var(--ag-inherited-browser-color-scheme, light); --ag-button-active-background-color: var(--ag-inherited-button-active-background-color, var(--ag-accent-color)); --ag-button-active-border: var(--ag-inherited-button-active-border, var(--ag-button-hover-border)); --ag-button-active-text-color: var(--ag-inherited-button-active-text-color, var(--ag-background-color)); --ag-button-background-color: var(--ag-inherited-button-background-color, var(--iress-colour-primary-surface, #D9E5FF)); --ag-button-border: var(--ag-inherited-button-border, solid 1px var(--iress-colour-primary-surface, #D9E5FF)); --ag-button-border-radius: var(--ag-inherited-button-border-radius, var(--iress-radius-system-button, var(--iress-radius-075, calc(0.75 \* 1rem)) var(--iress-radius-075, calc(0.75 \* 1rem)) var(--iress-radius-075, calc(0.75 \* 1rem)) var(--iress-radius-075, calc(0.75 \* 1rem)))); --ag-button-disabled-background-color: var(--ag-inherited-button-disabled-background-color, var(--ag-input-disabled-background-color)); --ag-button-disabled-border: var(--ag-inherited-button-disabled-border, var(--ag-input-disabled-border)); --ag-button-disabled-text-color: var(--ag-inherited-button-disabled-text-color, var(--ag-input-disabled-text-color)); --ag-button-font-weight: var(--ag-inherited-button-font-weight, 600); --ag-button-horizontal-padding: var(--ag-inherited-button-horizontal-padding, calc( var(--ag-spacing) \* 2)); --ag-button-hover-background-color: var(--ag-inherited-button-hover-background-color, var(--ag-row-hover-color)); --ag-button-hover-border: var(--ag-inherited-button-hover-border, var(--ag-button-border)); --ag-button-hover-text-color: var(--ag-inherited-button-hover-text-color, var(--ag-button-text-color)); --ag-button-text-color: var(--ag-inherited-button-text-color, var(--iress-colour-primary-text, #13213F)); --ag-button-vertical-padding: var(--ag-inherited-button-vertical-padding, var(--ag-spacing)); --ag-card-shadow: var(--ag-inherited-card-shadow, var(--iress-elevation-raised-shadow, 0px 3px 5px #091E4220)); --ag-cell-editing-border: var(--ag-inherited-cell-editing-border, solid 1px var(--ag-accent-color)); --ag-cell-editing-shadow: var(--ag-inherited-cell-editing-shadow, var(--ag-card-shadow)); --ag-cell-font-family: var(--ag-inherited-cell-font-family, var(--iress-typography-base-body-font, Inter, Helvetica, sans-serif)); --ag-cell-horizontal-padding: var(--ag-inherited-cell-horizontal-padding, calc( var(--ag-spacing) \* 2 \* var(--ag-cell-horizontal-padding-scale) )); --ag-cell-horizontal-padding-scale: var(--ag-inherited-cell-horizontal-padding-scale, 1); --ag-cell-text-color: var(--ag-inherited-cell-text-color, var(--ag-text-color)); --ag-cell-widget-spacing: var(--ag-inherited-cell-widget-spacing, calc( var(--ag-spacing) \* 1.5)); --ag-chart-menu-label-color: var(--ag-inherited-chart-menu-label-color, color-mix(in srgb, transparent, var(--ag-foreground-color) 80%)); --ag-chart-menu-panel-width: var(--ag-inherited-chart-menu-panel-width, 260px); --ag-checkbox-border-radius: var(--ag-inherited-checkbox-border-radius, var(--iress-radius-system-badge, var(--iress-radius-025, calc(0.25 \* 1rem)) var(--iress-radius-025, calc(0.25 \* 1rem)) var(--iress-radius-025, calc(0.25 \* 1rem)) var(--iress-radius-025, calc(0.25 \* 1rem)))); --ag-checkbox-border-width: var(--ag-inherited-checkbox-border-width, 1px); --ag-checkbox-checked-background-color: var(--ag-inherited-checkbox-checked-background-color, var(--iress-colour-primary-fill, #13213F)); --ag-checkbox-checked-border-color: var(--ag-inherited-checkbox-checked-border-color, var(--iress-colour-primary-fill, #13213F)); --ag-checkbox-checked-shape-color: var(--ag-inherited-checkbox-checked-shape-color, var(--iress-colour-primary-on-fill, #ECF2FF)); --ag-checkbox-checked-shape-image: var(--ag-inherited-checkbox-checked-shape-image, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%227%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.75%22%20d%3D%22M1%203.5%203.5%206l5-5%22%2F%3E%3C%2Fsvg%3E")); --ag-checkbox-indeterminate-background-color: var(--ag-inherited-checkbox-indeterminate-background-color, var(--iress-colour-primary-fill, #13213F)); --ag-checkbox-indeterminate-border-color: var(--ag-inherited-checkbox-indeterminate-border-color, var(--iress-colour-primary-fill, #13213F)); --ag-checkbox-indeterminate-shape-color: var(--ag-inherited-checkbox-indeterminate-shape-color, var(--iress-colour-primary-on-fill, #ECF2FF)); --ag-checkbox-indeterminate-shape-image: var(--ag-inherited-checkbox-indeterminate-shape-image, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%222%22%20fill%3D%22none%22%3E%3Crect%20width%3D%2210%22%20height%3D%222%22%20fill%3D%22%23000%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E")); --ag-checkbox-unchecked-background-color: var(--ag-inherited-checkbox-unchecked-background-color, var(--iress-colour-neutral-10, #FFFFFF)); --ag-checkbox-unchecked-border-color: var(--ag-inherited-checkbox-unchecked-border-color, var(--iress-colour-neutral-70, #6D7278)); --ag-chrome-background-color: var(--ag-inherited-chrome-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 2%)); --ag-column-border: var(--ag-inherited-column-border, solid 1px transparent); --ag-column-drop-cell-background-color: var(--ag-inherited-column-drop-cell-background-color, color-mix(in srgb, transparent, var(--ag-foreground-color) 7.000000000000001%)); --ag-column-drop-cell-border: var(--ag-inherited-column-drop-cell-border, solid 1px color-mix(in srgb, transparent, var(--ag-foreground-color) 13%)); --ag-column-drop-cell-drag-handle-color: var(--ag-inherited-column-drop-cell-drag-handle-color, var(--ag-text-color)); --ag-column-drop-cell-text-color: var(--ag-inherited-column-drop-cell-text-color, var(--ag-text-color)); --ag-column-hover-color: var(--ag-inherited-column-hover-color, var(--iress-colour-neutral-20, #F9F9F9)); --ag-column-select-indent-size: var(--ag-inherited-column-select-indent-size, var(--ag-icon-size)); --ag-data-font-size: var(--ag-inherited-data-font-size, calc(var(--iress-typography-base-size, .875rem) \* (12 / 14))); --ag-dialog-border: var(--ag-inherited-dialog-border, solid 1px color-mix(in srgb, transparent, var(--ag-foreground-color) 20%)); --ag-dialog-shadow: var(--ag-inherited-dialog-shadow, var(--iress-elevation-floating-shadow, 0px 10px 18px #091E4215)); --ag-drag-and-drop-image-background-color: var(--ag-inherited-drag-and-drop-image-background-color, var(--ag-background-color)); --ag-drag-and-drop-image-border: var(--ag-inherited-drag-and-drop-image-border, solid 1px var(--ag-border-color)); --ag-drag-and-drop-image-shadow: var(--ag-inherited-drag-and-drop-image-shadow, var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF)); --ag-drag-handle-color: var(--ag-inherited-drag-handle-color, color-mix(in srgb, transparent, var(--ag-foreground-color) 70%)); --ag-dropdown-shadow: var(--ag-inherited-dropdown-shadow, var(--iress-elevation-floating-shadow, 0px 10px 18px #091E4215)); --ag-filter-tool-panel-group-indent: var(--ag-inherited-filter-tool-panel-group-indent, var(--ag-spacing)); --ag-find-active-match-background-color: var(--ag-inherited-find-active-match-background-color, #ffa500); --ag-find-active-match-color: var(--ag-inherited-find-active-match-color, var(--ag-foreground-color)); --ag-find-match-background-color: var(--ag-inherited-find-match-background-color, #ffff00); --ag-find-match-color: var(--ag-inherited-find-match-color, var(--ag-foreground-color)); --ag-focus-shadow: var(--ag-inherited-focus-shadow, var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF)); --ag-font-family: var(--ag-inherited-font-family, var(--iress-typography-base-body-font, Inter, Helvetica, sans-serif)); --ag-font-size: var(--ag-inherited-font-size, calc(var(--iress-typography-base-size, .875rem) \* (12 / 14))); --ag-footer-row-border: var(--ag-inherited-footer-row-border, var(--ag-row-border)); --ag-foreground-color: var(--ag-inherited-foreground-color, var(--iress-colour-neutral-80, #393F46)); --ag-header-background-color: var(--ag-inherited-header-background-color, var(--iress-colour-neutral-10, #FFFFFF)); --ag-header-cell-background-transition-duration: var(--ag-inherited-header-cell-background-transition-duration, 0.2s); --ag-header-cell-hover-background-color: var(--ag-inherited-header-cell-hover-background-color, transparent); --ag-header-cell-moving-background-color: var(--ag-inherited-header-cell-moving-background-color, var(--ag-header-cell-hover-background-color)); --ag-header-column-border: var(--ag-inherited-header-column-border, none); --ag-header-column-border-height: var(--ag-inherited-header-column-border-height, 100%); --ag-header-column-resize-handle-color: var(--ag-inherited-header-column-resize-handle-color, var(--ag-border-color)); --ag-header-column-resize-handle-height: var(--ag-inherited-header-column-resize-handle-height, 30%); --ag-header-column-resize-handle-width: var(--ag-inherited-header-column-resize-handle-width, 2px); --ag-header-font-family: var(--ag-inherited-header-font-family, var(--iress-typography-base-body-font, Inter, Helvetica, sans-serif)); --ag-header-font-size: var(--ag-inherited-header-font-size, var(--ag-font-size)); --ag-header-font-weight: var(--ag-inherited-header-font-weight, 700); --ag-header-height: var(--ag-inherited-header-height, calc(max( var(--ag-icon-size) , var(--ag-data-font-size) ) + var(--ag-spacing) \* 4 \* var(--ag-header-vertical-padding-scale) )); --ag-header-row-border: var(--ag-inherited-header-row-border, solid 1px var(--iress-colour-neutral-40, #D7D8DA)); --ag-header-text-color: var(--ag-inherited-header-text-color, var(--ag-text-color)); --ag-header-vertical-padding-scale: var(--ag-inherited-header-vertical-padding-scale, 1); --ag-icon-button-active-background-color: var(--ag-inherited-icon-button-active-background-color, transparent); --ag-icon-button-active-color: var(--ag-inherited-icon-button-active-color, var(--ag-accent-color)); --ag-icon-button-active-indicator-color: var(--ag-inherited-icon-button-active-indicator-color, var(--ag-accent-color)); --ag-icon-button-background-color: var(--ag-inherited-icon-button-background-color, transparent); --ag-icon-button-background-spread: var(--ag-inherited-icon-button-background-spread, 4px); --ag-icon-button-border-radius: var(--ag-inherited-icon-button-border-radius, 1px); --ag-icon-button-color: var(--ag-inherited-icon-button-color, var(--ag-icon-color)); --ag-icon-button-hover-background-color: var(--ag-inherited-icon-button-hover-background-color, transparent); --ag-icon-button-hover-color: var(--ag-inherited-icon-button-hover-color, var(--ag-accent-color)); --ag-icon-color: var(--ag-inherited-icon-color, inherit); --ag-icon-size: var(--ag-inherited-icon-size, 16px); --ag-input-background-color: var(--ag-inherited-input-background-color, var(--ag-background-color)); --ag-input-border: var(--ag-inherited-input-border, solid 1px var(--iress-colour-neutral-70, #6D7278)); --ag-input-border-radius: var(--ag-inherited-input-border-radius, var(--iress-radius-system-form, var(--iress-radius-050, calc(0.5 \* 1rem)) var(--iress-radius-050, calc(0.5 \* 1rem)) var(--iress-radius-050, calc(0.5 \* 1rem)) var(--iress-radius-050, calc(0.5 \* 1rem)))); --ag-input-disabled-background-color: var(--ag-inherited-input-disabled-background-color, var(--iress-colour-neutral-20, #F9F9F9)); --ag-input-disabled-border: var(--ag-inherited-input-disabled-border, solid 1px var(--iress-colour-neutral-40, #D7D8DA)); --ag-input-disabled-text-color: var(--ag-inherited-input-disabled-text-color, var(--iress-colour-neutral-60, #878B92)); --ag-input-focus-background-color: var(--ag-inherited-input-focus-background-color, var(--ag-input-background-color)); --ag-input-focus-border: var(--ag-inherited-input-focus-border, solid 1px color-mix(in srgb, transparent, var(--ag-accent-color) 40%)); --ag-input-focus-shadow: var(--ag-inherited-input-focus-shadow, var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF)); --ag-input-focus-text-color: var(--ag-inherited-input-focus-text-color, var(--ag-input-text-color)); --ag-input-height: var(--ag-inherited-input-height, calc(max( var(--ag-icon-size) , var(--ag-font-size) ) + var(--ag-spacing) \* 2)); --ag-input-icon-color: var(--ag-inherited-input-icon-color, var(--iress-colour-neutral-70, #6D7278)); --ag-input-invalid-background-color: var(--ag-inherited-input-invalid-background-color, var(--iress-colour-system-danger-surface, #FEE8E7)); --ag-input-invalid-border: var(--ag-inherited-input-invalid-border, var(--iress-colour-system-danger-fill, #C20A0A)); --ag-input-invalid-text-color: var(--ag-inherited-input-invalid-text-color, var(--iress-colour-system-danger-text, #970202)); --ag-input-padding-start: var(--ag-inherited-input-padding-start, var(--ag-spacing)); --ag-input-placeholder-text-color: var(--ag-inherited-input-placeholder-text-color, color-mix(in srgb, transparent, var(--ag-input-text-color) 50%)); --ag-input-text-color: var(--ag-inherited-input-text-color, var(--iress-colour-neutral-80, #393F46)); --ag-invalid-color: var(--ag-inherited-invalid-color, var(--iress-colour-system-danger-fill, #C20A0A)); --ag-list-item-height: var(--ag-inherited-list-item-height, calc(max( var(--ag-icon-size) , var(--ag-data-font-size) ) + var(--ag-widget-vertical-spacing) )); --ag-menu-background-color: var(--ag-inherited-menu-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 3%)); --ag-menu-border: var(--ag-inherited-menu-border, solid 1px color-mix(in srgb, transparent, var(--ag-foreground-color) 20%)); --ag-menu-separator-color: var(--ag-inherited-menu-separator-color, var(--ag-border-color)); --ag-menu-shadow: var(--ag-inherited-menu-shadow, var(--iress-elevation-floating-shadow, 0px 10px 18px #091E4215)); --ag-menu-text-color: var(--ag-inherited-menu-text-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 95%)); --ag-modal-overlay-background-color: var(--ag-inherited-modal-overlay-background-color, var(--iress-colour-system-backdrop-fill, #393F46CC)); --ag-odd-row-background-color: var(--ag-inherited-odd-row-background-color, var(--iress-colour-neutral-10, #FFFFFF)); --ag-panel-background-color: var(--ag-inherited-panel-background-color, var(--ag-background-color)); --ag-panel-title-bar-background-color: var(--ag-inherited-panel-title-bar-background-color, var(--ag-header-background-color)); --ag-panel-title-bar-border: var(--ag-inherited-panel-title-bar-border, solid 1px var(--ag-border-color)); --ag-panel-title-bar-font-weight: var(--ag-inherited-panel-title-bar-font-weight, var(--ag-header-font-weight)); --ag-panel-title-bar-icon-color: var(--ag-inherited-panel-title-bar-icon-color, var(--ag-header-text-color)); --ag-panel-title-bar-text-color: var(--ag-inherited-panel-title-bar-text-color, var(--ag-header-text-color)); --ag-picker-button-background-color: var(--ag-inherited-picker-button-background-color, var(--ag-background-color)); --ag-picker-button-border: var(--ag-inherited-picker-button-border, solid 1px var(--ag-border-color)); --ag-picker-button-focus-background-color: var(--ag-inherited-picker-button-focus-background-color, var(--ag-background-color)); --ag-picker-button-focus-border: var(--ag-inherited-picker-button-focus-border, var(--ag-input-focus-border)); --ag-picker-list-background-color: var(--ag-inherited-picker-list-background-color, var(--ag-background-color)); --ag-picker-list-border: var(--ag-inherited-picker-list-border, solid 1px var(--ag-border-color)); --ag-pinned-column-border: var(--ag-inherited-pinned-column-border, solid 1px var(--ag-border-color)); --ag-pinned-row-background-color: var(--ag-inherited-pinned-row-background-color, var(--ag-background-color)); --ag-pinned-row-border: var(--ag-inherited-pinned-row-border, solid 1px var(--ag-border-color)); --ag-pinned-row-font-weight: var(--ag-inherited-pinned-row-font-weight, 600); --ag-pinned-row-text-color: var(--ag-inherited-pinned-row-text-color, var(--ag-text-color)); --ag-pinned-source-row-background-color: var(--ag-inherited-pinned-source-row-background-color, var(--ag-background-color)); --ag-pinned-source-row-font-weight: var(--ag-inherited-pinned-source-row-font-weight, 600); --ag-pinned-source-row-text-color: var(--ag-inherited-pinned-source-row-text-color, var(--ag-text-color)); --ag-popup-shadow: var(--ag-inherited-popup-shadow, var(--iress-elevation-floating-shadow, 0px 10px 18px #091E4215)); --ag-radio-checked-shape-image: var(--ag-inherited-radio-checked-shape-image, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%226%22%20height%3D%226%22%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%223%22%20cy%3D%223%22%20r%3D%223%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E")); --ag-range-header-highlight-color: var(--ag-inherited-range-header-highlight-color, color-mix(in srgb, var(--ag-header-background-color), var(--ag-foreground-color) 8%)); --ag-range-selection-background-color: var(--ag-inherited-range-selection-background-color, color-mix(in srgb, transparent, var(--ag-accent-color) 10%)); --ag-range-selection-border-color: var(--ag-inherited-range-selection-border-color, var(--iress-colour-primary-fill, #13213F)); --ag-range-selection-border-style: var(--ag-inherited-range-selection-border-style, solid); --ag-range-selection-chart-background-color: var(--ag-inherited-range-selection-chart-background-color, #0058FF1A); --ag-range-selection-chart-category-background-color: var(--ag-inherited-range-selection-chart-category-background-color, #00FF841A); --ag-range-selection-highlight-color: var(--ag-inherited-range-selection-highlight-color, color-mix(in srgb, transparent, var(--ag-accent-color) 50%)); --ag-row-border: var(--ag-inherited-row-border, solid 1px var(--iress-colour-neutral-40, #D7D8DA)); --ag-row-group-indent-size: var(--ag-inherited-row-group-indent-size, calc( var(--ag-cell-widget-spacing) + var(--ag-icon-size) )); --ag-row-height: var(--ag-inherited-row-height, calc(max( var(--ag-icon-size) , var(--ag-data-font-size) ) + var(--ag-spacing) \* 3.25 \* var(--ag-row-vertical-padding-scale) )); --ag-row-hover-color: var(--ag-inherited-row-hover-color, var(--iress-colour-primary-surface, #D9E5FF)); --ag-row-loading-skeleton-effect-color: var(--ag-inherited-row-loading-skeleton-effect-color, color-mix(in srgb, transparent, var(--ag-foreground-color) 15%)); --ag-row-numbers-selected-color: var(--ag-inherited-row-numbers-selected-color, color-mix(in srgb, transparent, var(--ag-accent-color) 50%)); --ag-row-vertical-padding-scale: var(--ag-inherited-row-vertical-padding-scale, 1); --ag-select-cell-background-color: var(--ag-inherited-select-cell-background-color, color-mix(in srgb, transparent, var(--ag-foreground-color) 7.000000000000001%)); --ag-select-cell-border: var(--ag-inherited-select-cell-border, solid 1px color-mix(in srgb, transparent, var(--ag-foreground-color) 13%)); --ag-selected-row-background-color: var(--ag-inherited-selected-row-background-color, var(--iress-colour-neutral-20, #F9F9F9)); --ag-set-filter-indent-size: var(--ag-inherited-set-filter-indent-size, var(--ag-icon-size)); --ag-side-bar-background-color: var(--ag-inherited-side-bar-background-color, transparent); --ag-side-bar-panel-width: var(--ag-inherited-side-bar-panel-width, 250px); --ag-side-button-background-color: var(--ag-inherited-side-button-background-color, transparent); --ag-side-button-bar-background-color: var(--ag-inherited-side-button-bar-background-color, var(--ag-side-bar-background-color)); --ag-side-button-bar-top-padding: var(--ag-inherited-side-button-bar-top-padding, calc( var(--ag-spacing) \* 3)); --ag-side-button-border: var(--ag-inherited-side-button-border, none); --ag-side-button-hover-background-color: var(--ag-inherited-side-button-hover-background-color, var(--ag-side-button-background-color)); --ag-side-button-hover-text-color: var(--ag-inherited-side-button-hover-text-color, var(--ag-accent-color)); --ag-side-button-left-padding: var(--ag-inherited-side-button-left-padding, var(--ag-spacing)); --ag-side-button-right-padding: var(--ag-inherited-side-button-right-padding, var(--ag-spacing)); --ag-side-button-selected-background-color: var(--ag-inherited-side-button-selected-background-color, transparent); --ag-side-button-selected-border: var(--ag-inherited-side-button-selected-border, none); --ag-side-button-selected-text-color: var(--ag-inherited-side-button-selected-text-color, var(--ag-side-button-text-color)); --ag-side-button-selected-underline-color: var(--ag-inherited-side-button-selected-underline-color, var(--ag-accent-color)); --ag-side-button-selected-underline-transition-duration: var(--ag-inherited-side-button-selected-underline-transition-duration, 0.3s); --ag-side-button-selected-underline-width: var(--ag-inherited-side-button-selected-underline-width, 2px); --ag-side-button-text-color: var(--ag-inherited-side-button-text-color, var(--ag-text-color)); --ag-side-button-vertical-padding: var(--ag-inherited-side-button-vertical-padding, calc( var(--ag-spacing) \* 3)); --ag-side-panel-border: var(--ag-inherited-side-panel-border, solid 1px var(--ag-border-color)); --ag-spacing: var(--ag-inherited-spacing, 3px); --ag-status-bar-label-color: var(--ag-inherited-status-bar-label-color, var(--ag-foreground-color)); --ag-status-bar-label-font-weight: var(--ag-inherited-status-bar-label-font-weight, 500); --ag-status-bar-value-color: var(--ag-inherited-status-bar-value-color, var(--ag-foreground-color)); --ag-status-bar-value-font-weight: var(--ag-inherited-status-bar-value-font-weight, 500); --ag-subtle-text-color: var(--ag-inherited-subtle-text-color, var(--iress-colour-neutral-70, #6D7278)); --ag-tab-background-color: var(--ag-inherited-tab-background-color, transparent); --ag-tab-bar-background-color: var(--ag-inherited-tab-bar-background-color, var(--ag-chrome-background-color)); --ag-tab-bar-border: var(--ag-inherited-tab-bar-border, solid 1px var(--iress-colour-primary-fill, #13213F)); --ag-tab-bar-horizontal-padding: var(--ag-inherited-tab-bar-horizontal-padding, 0px); --ag-tab-bar-top-padding: var(--ag-inherited-tab-bar-top-padding, 0px); --ag-tab-bottom-padding: var(--ag-inherited-tab-bottom-padding, var(--ag-spacing)); --ag-tab-horizontal-padding: var(--ag-inherited-tab-horizontal-padding, var(--ag-spacing)); --ag-tab-hover-background-color: var(--ag-inherited-tab-hover-background-color, var(--ag-tab-background-color)); --ag-tab-hover-text-color: var(--ag-inherited-tab-hover-text-color, var(--ag-accent-color)); --ag-tab-selected-background-color: var(--ag-inherited-tab-selected-background-color, var(--ag-tab-background-color)); --ag-tab-selected-border-color: var(--ag-inherited-tab-selected-border-color, transparent); --ag-tab-selected-border-width: var(--ag-inherited-tab-selected-border-width, 0px); --ag-tab-selected-text-color: var(--ag-inherited-tab-selected-text-color, var(--ag-accent-color)); --ag-tab-selected-underline-color: var(--ag-inherited-tab-selected-underline-color, var(--ag-accent-color)); --ag-tab-selected-underline-transition-duration: var(--ag-inherited-tab-selected-underline-transition-duration, 0.3s); --ag-tab-selected-underline-width: var(--ag-inherited-tab-selected-underline-width, 2px); --ag-tab-spacing: var(--ag-inherited-tab-spacing, 0); --ag-tab-text-color: var(--ag-inherited-tab-text-color, var(--ag-text-color)); --ag-tab-top-padding: var(--ag-inherited-tab-top-padding, var(--ag-spacing)); --ag-text-color: var(--ag-inherited-text-color, var(--ag-foreground-color)); --ag-toggle-button-height: var(--ag-inherited-toggle-button-height, 18px); --ag-toggle-button-off-background-color: var(--ag-inherited-toggle-button-off-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 45%)); --ag-toggle-button-on-background-color: var(--ag-inherited-toggle-button-on-background-color, var(--ag-accent-color)); --ag-toggle-button-switch-background-color: var(--ag-inherited-toggle-button-switch-background-color, var(--ag-background-color)); --ag-toggle-button-switch-inset: var(--ag-inherited-toggle-button-switch-inset, 1px); --ag-toggle-button-width: var(--ag-inherited-toggle-button-width, 28px); --ag-tool-panel-separator-border: var(--ag-inherited-tool-panel-separator-border, solid 1px var(--ag-border-color)); --ag-tooltip-background-color: var(--ag-inherited-tooltip-background-color, var(--iress-colour-neutral-80, #393F46)); --ag-tooltip-border: var(--ag-inherited-tooltip-border, solid 1px var(--ag-border-color)); --ag-tooltip-text-color: var(--ag-inherited-tooltip-text-color, var(--iress-colour-neutral-10, #FFFFFF)); --ag-value-change-delta-down-color: var(--ag-inherited-value-change-delta-down-color, var(--iress-colour-system-danger-fill, #C20A0A)); --ag-value-change-delta-up-color: var(--ag-inherited-value-change-delta-up-color, var(--iress-colour-system-success-fill, #02794D)); --ag-value-change-value-highlight-background-color: var(--ag-inherited-value-change-value-highlight-background-color, color-mix(in srgb, transparent, var(--ag-accent-color) 20%)); --ag-widget-container-horizontal-padding: var(--ag-inherited-widget-container-horizontal-padding, calc( var(--ag-spacing) \* 1.5)); --ag-widget-container-vertical-padding: var(--ag-inherited-widget-container-vertical-padding, calc( var(--ag-spacing) \* 1.5)); --ag-widget-horizontal-spacing: var(--ag-inherited-widget-horizontal-spacing, calc( var(--ag-spacing) \* 1.5)); --ag-widget-vertical-spacing: var(--ag-inherited-widget-vertical-spacing, var(--ag-spacing)); --ag-wrapper-border: var(--ag-inherited-wrapper-border, none); --ag-wrapper-border-radius: var(--ag-inherited-wrapper-border-radius, var(--iress-radius-system-layout, var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem))); :where(\[data-ag-theme-mode="light"\]) & { --ag-browser-color-scheme: var(--ag-inherited-browser-color-scheme, light); --ag-chrome-background-color: var(--ag-inherited-chrome-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 2%)); } :where(\[data-ag-theme-mode="dark"\]) & { --ag-advanced-filter-builder-column-pill-color: var(--ag-inherited-advanced-filter-builder-column-pill-color, #355f2d); --ag-advanced-filter-builder-join-pill-color: var(--ag-inherited-advanced-filter-builder-join-pill-color, #7a3a37); --ag-advanced-filter-builder-option-pill-color: var(--ag-inherited-advanced-filter-builder-option-pill-color, #5a3168); --ag-advanced-filter-builder-value-pill-color: var(--ag-inherited-advanced-filter-builder-value-pill-color, #374c86); --ag-browser-color-scheme: var(--ag-inherited-browser-color-scheme, dark); --ag-chrome-background-color: var(--ag-inherited-chrome-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 5%)); --ag-find-active-match-color: var(--ag-inherited-find-active-match-color, var(--ag-background-color)); --ag-find-match-color: var(--ag-inherited-find-match-color, var(--ag-background-color)); --ag-menu-background-color: var(--ag-inherited-menu-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 10%)); } :where(\[data-ag-theme-mode="dark-blue"\]) & { --ag-advanced-filter-builder-column-pill-color: var(--ag-inherited-advanced-filter-builder-column-pill-color, #355f2d); --ag-advanced-filter-builder-join-pill-color: var(--ag-inherited-advanced-filter-builder-join-pill-color, #7a3a37); --ag-advanced-filter-builder-option-pill-color: var(--ag-inherited-advanced-filter-builder-option-pill-color, #5a3168); --ag-advanced-filter-builder-value-pill-color: var(--ag-inherited-advanced-filter-builder-value-pill-color, #374c86); --ag-browser-color-scheme: var(--ag-inherited-browser-color-scheme, dark); --ag-chrome-background-color: var(--ag-inherited-chrome-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 5%)); --ag-find-active-match-color: var(--ag-inherited-find-active-match-color, var(--ag-background-color)); --ag-find-match-color: var(--ag-inherited-find-match-color, var(--ag-background-color)); --ag-menu-background-color: var(--ag-inherited-menu-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 10%)); } } :has(> :where(.ag-theme-params-3)):not(:where(.ag-theme-params-3)) { --ag-inherited-accent-color: var(--ag-accent-color); --ag-inherited-advanced-filter-builder-button-bar-border: var(--ag-advanced-filter-builder-button-bar-border); --ag-inherited-advanced-filter-builder-column-pill-color: var(--ag-advanced-filter-builder-column-pill-color); --ag-inherited-advanced-filter-builder-indent-size: var(--ag-advanced-filter-builder-indent-size); --ag-inherited-advanced-filter-builder-join-pill-color: var(--ag-advanced-filter-builder-join-pill-color); --ag-inherited-advanced-filter-builder-option-pill-color: var(--ag-advanced-filter-builder-option-pill-color); --ag-inherited-advanced-filter-builder-value-pill-color: var(--ag-advanced-filter-builder-value-pill-color); --ag-inherited-background-color: var(--ag-background-color); --ag-inherited-border-color: var(--ag-border-color); --ag-inherited-border-radius: var(--ag-border-radius); --ag-inherited-browser-color-scheme: var(--ag-browser-color-scheme); --ag-inherited-button-active-background-color: var(--ag-button-active-background-color); --ag-inherited-button-active-border: var(--ag-button-active-border); --ag-inherited-button-active-text-color: var(--ag-button-active-text-color); --ag-inherited-button-background-color: var(--ag-button-background-color); --ag-inherited-button-border: var(--ag-button-border); --ag-inherited-button-border-radius: var(--ag-button-border-radius); --ag-inherited-button-disabled-background-color: var(--ag-button-disabled-background-color); --ag-inherited-button-disabled-border: var(--ag-button-disabled-border); --ag-inherited-button-disabled-text-color: var(--ag-button-disabled-text-color); --ag-inherited-button-font-weight: var(--ag-button-font-weight); --ag-inherited-button-horizontal-padding: var(--ag-button-horizontal-padding); --ag-inherited-button-hover-background-color: var(--ag-button-hover-background-color); --ag-inherited-button-hover-border: var(--ag-button-hover-border); --ag-inherited-button-hover-text-color: var(--ag-button-hover-text-color); --ag-inherited-button-text-color: var(--ag-button-text-color); --ag-inherited-button-vertical-padding: var(--ag-button-vertical-padding); --ag-inherited-card-shadow: var(--ag-card-shadow); --ag-inherited-cell-editing-border: var(--ag-cell-editing-border); --ag-inherited-cell-editing-shadow: var(--ag-cell-editing-shadow); --ag-inherited-cell-font-family: var(--ag-cell-font-family); --ag-inherited-cell-horizontal-padding: var(--ag-cell-horizontal-padding); --ag-inherited-cell-horizontal-padding-scale: var(--ag-cell-horizontal-padding-scale); --ag-inherited-cell-text-color: var(--ag-cell-text-color); --ag-inherited-cell-widget-spacing: var(--ag-cell-widget-spacing); --ag-inherited-chart-menu-label-color: var(--ag-chart-menu-label-color); --ag-inherited-chart-menu-panel-width: var(--ag-chart-menu-panel-width); --ag-inherited-checkbox-border-radius: var(--ag-checkbox-border-radius); --ag-inherited-checkbox-border-width: var(--ag-checkbox-border-width); --ag-inherited-checkbox-checked-background-color: var(--ag-checkbox-checked-background-color); --ag-inherited-checkbox-checked-border-color: var(--ag-checkbox-checked-border-color); --ag-inherited-checkbox-checked-shape-color: var(--ag-checkbox-checked-shape-color); --ag-inherited-checkbox-checked-shape-image: var(--ag-checkbox-checked-shape-image); --ag-inherited-checkbox-indeterminate-background-color: var(--ag-checkbox-indeterminate-background-color); --ag-inherited-checkbox-indeterminate-border-color: var(--ag-checkbox-indeterminate-border-color); --ag-inherited-checkbox-indeterminate-shape-color: var(--ag-checkbox-indeterminate-shape-color); --ag-inherited-checkbox-indeterminate-shape-image: var(--ag-checkbox-indeterminate-shape-image); --ag-inherited-checkbox-unchecked-background-color: var(--ag-checkbox-unchecked-background-color); --ag-inherited-checkbox-unchecked-border-color: var(--ag-checkbox-unchecked-border-color); --ag-inherited-chrome-background-color: var(--ag-chrome-background-color); --ag-inherited-column-border: var(--ag-column-border); --ag-inherited-column-drop-cell-background-color: var(--ag-column-drop-cell-background-color); --ag-inherited-column-drop-cell-border: var(--ag-column-drop-cell-border); --ag-inherited-column-drop-cell-drag-handle-color: var(--ag-column-drop-cell-drag-handle-color); --ag-inherited-column-drop-cell-text-color: var(--ag-column-drop-cell-text-color); --ag-inherited-column-hover-color: var(--ag-column-hover-color); --ag-inherited-column-select-indent-size: var(--ag-column-select-indent-size); --ag-inherited-data-font-size: var(--ag-data-font-size); --ag-inherited-dialog-border: var(--ag-dialog-border); --ag-inherited-dialog-shadow: var(--ag-dialog-shadow); --ag-inherited-drag-and-drop-image-background-color: var(--ag-drag-and-drop-image-background-color); --ag-inherited-drag-and-drop-image-border: var(--ag-drag-and-drop-image-border); --ag-inherited-drag-and-drop-image-shadow: var(--ag-drag-and-drop-image-shadow); --ag-inherited-drag-handle-color: var(--ag-drag-handle-color); --ag-inherited-dropdown-shadow: var(--ag-dropdown-shadow); --ag-inherited-filter-tool-panel-group-indent: var(--ag-filter-tool-panel-group-indent); --ag-inherited-find-active-match-background-color: var(--ag-find-active-match-background-color); --ag-inherited-find-active-match-color: var(--ag-find-active-match-color); --ag-inherited-find-match-background-color: var(--ag-find-match-background-color); --ag-inherited-find-match-color: var(--ag-find-match-color); --ag-inherited-focus-shadow: var(--ag-focus-shadow); --ag-inherited-font-family: var(--ag-font-family); --ag-inherited-font-size: var(--ag-font-size); --ag-inherited-footer-row-border: var(--ag-footer-row-border); --ag-inherited-foreground-color: var(--ag-foreground-color); --ag-inherited-header-background-color: var(--ag-header-background-color); --ag-inherited-header-cell-background-transition-duration: var(--ag-header-cell-background-transition-duration); --ag-inherited-header-cell-hover-background-color: var(--ag-header-cell-hover-background-color); --ag-inherited-header-cell-moving-background-color: var(--ag-header-cell-moving-background-color); --ag-inherited-header-column-border: var(--ag-header-column-border); --ag-inherited-header-column-border-height: var(--ag-header-column-border-height); --ag-inherited-header-column-resize-handle-color: var(--ag-header-column-resize-handle-color); --ag-inherited-header-column-resize-handle-height: var(--ag-header-column-resize-handle-height); --ag-inherited-header-column-resize-handle-width: var(--ag-header-column-resize-handle-width); --ag-inherited-header-font-family: var(--ag-header-font-family); --ag-inherited-header-font-size: var(--ag-header-font-size); --ag-inherited-header-font-weight: var(--ag-header-font-weight); --ag-inherited-header-height: var(--ag-header-height); --ag-inherited-header-row-border: var(--ag-header-row-border); --ag-inherited-header-text-color: var(--ag-header-text-color); --ag-inherited-header-vertical-padding-scale: var(--ag-header-vertical-padding-scale); --ag-inherited-icon-button-active-background-color: var(--ag-icon-button-active-background-color); --ag-inherited-icon-button-active-color: var(--ag-icon-button-active-color); --ag-inherited-icon-button-active-indicator-color: var(--ag-icon-button-active-indicator-color); --ag-inherited-icon-button-background-color: var(--ag-icon-button-background-color); --ag-inherited-icon-button-background-spread: var(--ag-icon-button-background-spread); --ag-inherited-icon-button-border-radius: var(--ag-icon-button-border-radius); --ag-inherited-icon-button-color: var(--ag-icon-button-color); --ag-inherited-icon-button-hover-background-color: var(--ag-icon-button-hover-background-color); --ag-inherited-icon-button-hover-color: var(--ag-icon-button-hover-color); --ag-inherited-icon-color: var(--ag-icon-color); --ag-inherited-icon-size: var(--ag-icon-size); --ag-inherited-input-background-color: var(--ag-input-background-color); --ag-inherited-input-border: var(--ag-input-border); --ag-inherited-input-border-radius: var(--ag-input-border-radius); --ag-inherited-input-disabled-background-color: var(--ag-input-disabled-background-color); --ag-inherited-input-disabled-border: var(--ag-input-disabled-border); --ag-inherited-input-disabled-text-color: var(--ag-input-disabled-text-color); --ag-inherited-input-focus-background-color: var(--ag-input-focus-background-color); --ag-inherited-input-focus-border: var(--ag-input-focus-border); --ag-inherited-input-focus-shadow: var(--ag-input-focus-shadow); --ag-inherited-input-focus-text-color: var(--ag-input-focus-text-color); --ag-inherited-input-height: var(--ag-input-height); --ag-inherited-input-icon-color: var(--ag-input-icon-color); --ag-inherited-input-invalid-background-color: var(--ag-input-invalid-background-color); --ag-inherited-input-invalid-border: var(--ag-input-invalid-border); --ag-inherited-input-invalid-text-color: var(--ag-input-invalid-text-color); --ag-inherited-input-padding-start: var(--ag-input-padding-start); --ag-inherited-input-placeholder-text-color: var(--ag-input-placeholder-text-color); --ag-inherited-input-text-color: var(--ag-input-text-color); --ag-inherited-invalid-color: var(--ag-invalid-color); --ag-inherited-list-item-height: var(--ag-list-item-height); --ag-inherited-menu-background-color: var(--ag-menu-background-color); --ag-inherited-menu-border: var(--ag-menu-border); --ag-inherited-menu-separator-color: var(--ag-menu-separator-color); --ag-inherited-menu-shadow: var(--ag-menu-shadow); --ag-inherited-menu-text-color: var(--ag-menu-text-color); --ag-inherited-modal-overlay-background-color: var(--ag-modal-overlay-background-color); --ag-inherited-odd-row-background-color: var(--ag-odd-row-background-color); --ag-inherited-panel-background-color: var(--ag-panel-background-color); --ag-inherited-panel-title-bar-background-color: var(--ag-panel-title-bar-background-color); --ag-inherited-panel-title-bar-border: var(--ag-panel-title-bar-border); --ag-inherited-panel-title-bar-font-weight: var(--ag-panel-title-bar-font-weight); --ag-inherited-panel-title-bar-icon-color: var(--ag-panel-title-bar-icon-color); --ag-inherited-panel-title-bar-text-color: var(--ag-panel-title-bar-text-color); --ag-inherited-picker-button-background-color: var(--ag-picker-button-background-color); --ag-inherited-picker-button-border: var(--ag-picker-button-border); --ag-inherited-picker-button-focus-background-color: var(--ag-picker-button-focus-background-color); --ag-inherited-picker-button-focus-border: var(--ag-picker-button-focus-border); --ag-inherited-picker-list-background-color: var(--ag-picker-list-background-color); --ag-inherited-picker-list-border: var(--ag-picker-list-border); --ag-inherited-pinned-column-border: var(--ag-pinned-column-border); --ag-inherited-pinned-row-background-color: var(--ag-pinned-row-background-color); --ag-inherited-pinned-row-border: var(--ag-pinned-row-border); --ag-inherited-pinned-row-font-weight: var(--ag-pinned-row-font-weight); --ag-inherited-pinned-row-text-color: var(--ag-pinned-row-text-color); --ag-inherited-pinned-source-row-background-color: var(--ag-pinned-source-row-background-color); --ag-inherited-pinned-source-row-font-weight: var(--ag-pinned-source-row-font-weight); --ag-inherited-pinned-source-row-text-color: var(--ag-pinned-source-row-text-color); --ag-inherited-popup-shadow: var(--ag-popup-shadow); --ag-inherited-radio-checked-shape-image: var(--ag-radio-checked-shape-image); --ag-inherited-range-header-highlight-color: var(--ag-range-header-highlight-color); --ag-inherited-range-selection-background-color: var(--ag-range-selection-background-color); --ag-inherited-range-selection-border-color: var(--ag-range-selection-border-color); --ag-inherited-range-selection-border-style: var(--ag-range-selection-border-style); --ag-inherited-range-selection-chart-background-color: var(--ag-range-selection-chart-background-color); --ag-inherited-range-selection-chart-category-background-color: var(--ag-range-selection-chart-category-background-color); --ag-inherited-range-selection-highlight-color: var(--ag-range-selection-highlight-color); --ag-inherited-row-border: var(--ag-row-border); --ag-inherited-row-group-indent-size: var(--ag-row-group-indent-size); --ag-inherited-row-height: var(--ag-row-height); --ag-inherited-row-hover-color: var(--ag-row-hover-color); --ag-inherited-row-loading-skeleton-effect-color: var(--ag-row-loading-skeleton-effect-color); --ag-inherited-row-numbers-selected-color: var(--ag-row-numbers-selected-color); --ag-inherited-row-vertical-padding-scale: var(--ag-row-vertical-padding-scale); --ag-inherited-select-cell-background-color: var(--ag-select-cell-background-color); --ag-inherited-select-cell-border: var(--ag-select-cell-border); --ag-inherited-selected-row-background-color: var(--ag-selected-row-background-color); --ag-inherited-set-filter-indent-size: var(--ag-set-filter-indent-size); --ag-inherited-side-bar-background-color: var(--ag-side-bar-background-color); --ag-inherited-side-bar-panel-width: var(--ag-side-bar-panel-width); --ag-inherited-side-button-background-color: var(--ag-side-button-background-color); --ag-inherited-side-button-bar-background-color: var(--ag-side-button-bar-background-color); --ag-inherited-side-button-bar-top-padding: var(--ag-side-button-bar-top-padding); --ag-inherited-side-button-border: var(--ag-side-button-border); --ag-inherited-side-button-hover-background-color: var(--ag-side-button-hover-background-color); --ag-inherited-side-button-hover-text-color: var(--ag-side-button-hover-text-color); --ag-inherited-side-button-left-padding: var(--ag-side-button-left-padding); --ag-inherited-side-button-right-padding: var(--ag-side-button-right-padding); --ag-inherited-side-button-selected-background-color: var(--ag-side-button-selected-background-color); --ag-inherited-side-button-selected-border: var(--ag-side-button-selected-border); --ag-inherited-side-button-selected-text-color: var(--ag-side-button-selected-text-color); --ag-inherited-side-button-selected-underline-color: var(--ag-side-button-selected-underline-color); --ag-inherited-side-button-selected-underline-transition-duration: var(--ag-side-button-selected-underline-transition-duration); --ag-inherited-side-button-selected-underline-width: var(--ag-side-button-selected-underline-width); --ag-inherited-side-button-text-color: var(--ag-side-button-text-color); --ag-inherited-side-button-vertical-padding: var(--ag-side-button-vertical-padding); --ag-inherited-side-panel-border: var(--ag-side-panel-border); --ag-inherited-spacing: var(--ag-spacing); --ag-inherited-status-bar-label-color: var(--ag-status-bar-label-color); --ag-inherited-status-bar-label-font-weight: var(--ag-status-bar-label-font-weight); --ag-inherited-status-bar-value-color: var(--ag-status-bar-value-color); --ag-inherited-status-bar-value-font-weight: var(--ag-status-bar-value-font-weight); --ag-inherited-subtle-text-color: var(--ag-subtle-text-color); --ag-inherited-tab-background-color: var(--ag-tab-background-color); --ag-inherited-tab-bar-background-color: var(--ag-tab-bar-background-color); --ag-inherited-tab-bar-border: var(--ag-tab-bar-border); --ag-inherited-tab-bar-horizontal-padding: var(--ag-tab-bar-horizontal-padding); --ag-inherited-tab-bar-top-padding: var(--ag-tab-bar-top-padding); --ag-inherited-tab-bottom-padding: var(--ag-tab-bottom-padding); --ag-inherited-tab-horizontal-padding: var(--ag-tab-horizontal-padding); --ag-inherited-tab-hover-background-color: var(--ag-tab-hover-background-color); --ag-inherited-tab-hover-text-color: var(--ag-tab-hover-text-color); --ag-inherited-tab-selected-background-color: var(--ag-tab-selected-background-color); --ag-inherited-tab-selected-border-color: var(--ag-tab-selected-border-color); --ag-inherited-tab-selected-border-width: var(--ag-tab-selected-border-width); --ag-inherited-tab-selected-text-color: var(--ag-tab-selected-text-color); --ag-inherited-tab-selected-underline-color: var(--ag-tab-selected-underline-color); --ag-inherited-tab-selected-underline-transition-duration: var(--ag-tab-selected-underline-transition-duration); --ag-inherited-tab-selected-underline-width: var(--ag-tab-selected-underline-width); --ag-inherited-tab-spacing: var(--ag-tab-spacing); --ag-inherited-tab-text-color: var(--ag-tab-text-color); --ag-inherited-tab-top-padding: var(--ag-tab-top-padding); --ag-inherited-text-color: var(--ag-text-color); --ag-inherited-toggle-button-height: var(--ag-toggle-button-height); --ag-inherited-toggle-button-off-background-color: var(--ag-toggle-button-off-background-color); --ag-inherited-toggle-button-on-background-color: var(--ag-toggle-button-on-background-color); --ag-inherited-toggle-button-switch-background-color: var(--ag-toggle-button-switch-background-color); --ag-inherited-toggle-button-switch-inset: var(--ag-toggle-button-switch-inset); --ag-inherited-toggle-button-width: var(--ag-toggle-button-width); --ag-inherited-tool-panel-separator-border: var(--ag-tool-panel-separator-border); --ag-inherited-tooltip-background-color: var(--ag-tooltip-background-color); --ag-inherited-tooltip-border: var(--ag-tooltip-border); --ag-inherited-tooltip-text-color: var(--ag-tooltip-text-color); --ag-inherited-value-change-delta-down-color: var(--ag-value-change-delta-down-color); --ag-inherited-value-change-delta-up-color: var(--ag-value-change-delta-up-color); --ag-inherited-value-change-value-highlight-background-color: var(--ag-value-change-value-highlight-background-color); --ag-inherited-widget-container-horizontal-padding: var(--ag-widget-container-horizontal-padding); --ag-inherited-widget-container-vertical-padding: var(--ag-widget-container-vertical-padding); --ag-inherited-widget-horizontal-spacing: var(--ag-widget-horizontal-spacing); --ag-inherited-widget-vertical-spacing: var(--ag-widget-vertical-spacing); --ag-inherited-wrapper-border: var(--ag-wrapper-border); --ag-inherited-wrapper-border-radius: var(--ag-wrapper-border-radius); :where(\[data-ag-theme-mode="light"\]) & { --ag-inherited-browser-color-scheme: var(--ag-browser-color-scheme); --ag-inherited-chrome-background-color: var(--ag-chrome-background-color); } :where(\[data-ag-theme-mode="dark"\]) & { --ag-inherited-advanced-filter-builder-column-pill-color: var(--ag-advanced-filter-builder-column-pill-color); --ag-inherited-advanced-filter-builder-join-pill-color: var(--ag-advanced-filter-builder-join-pill-color); --ag-inherited-advanced-filter-builder-option-pill-color: var(--ag-advanced-filter-builder-option-pill-color); --ag-inherited-advanced-filter-builder-value-pill-color: var(--ag-advanced-filter-builder-value-pill-color); --ag-inherited-browser-color-scheme: var(--ag-browser-color-scheme); --ag-inherited-chrome-background-color: var(--ag-chrome-background-color); --ag-inherited-find-active-match-color: var(--ag-find-active-match-color); --ag-inherited-find-match-color: var(--ag-find-match-color); --ag-inherited-menu-background-color: var(--ag-menu-background-color); } :where(\[data-ag-theme-mode="dark-blue"\]) & { --ag-inherited-advanced-filter-builder-column-pill-color: var(--ag-advanced-filter-builder-column-pill-color); --ag-inherited-advanced-filter-builder-join-pill-color: var(--ag-advanced-filter-builder-join-pill-color); --ag-inherited-advanced-filter-builder-option-pill-color: var(--ag-advanced-filter-builder-option-pill-color); --ag-inherited-advanced-filter-builder-value-pill-color: var(--ag-advanced-filter-builder-value-pill-color); --ag-inherited-browser-color-scheme: var(--ag-browser-color-scheme); --ag-inherited-chrome-background-color: var(--ag-chrome-background-color); --ag-inherited-find-active-match-color: var(--ag-find-active-match-color); --ag-inherited-find-match-color: var(--ag-find-match-color); --ag-inherited-menu-background-color: var(--ag-menu-background-color); } }
+
 Drag here to set row groups
 
 Drag here to set column labels
@@ -1493,9 +820,9 @@ Country
 
 Shellie
 
-3,489
+11,734
 
-£21.68
+£415.46
 
 aliquet@purus.com
 
@@ -1505,9 +832,9 @@ French Polynesia
 
 Jade
 
-12,963
+20,314
 
-£306.21
+\-£980.94
 
 mi.pede.nonummy@senectus.org
 
@@ -1517,9 +844,9 @@ Tonga
 
 Wyoming
 
-23,715
+36,617
 
-\-£745.77
+£386.23
 
 Nulla.tempor.augue@aliquamiaculis.org
 
@@ -1529,9 +856,9 @@ Rwanda
 
 Christine
 
-61,370
+79,543
 
-\-£662.81
+\-£739.55
 
 neque.sed.dictum@ultricesVivamus.ca
 
@@ -1541,9 +868,9 @@ Bahamas
 
 Jameson
 
-95,958
+67,934
 
-\-£953.31
+\-£890.94
 
 sem.semper@liberoProin.com
 
@@ -1553,9 +880,9 @@ Nauru
 
 Driscoll
 
-7,579
+2,259
 
-£268.43
+\-£790.28
 
 libero.dui@estacfacilisis.edu
 
@@ -1565,9 +892,9 @@ Tajikistan
 
 Morgan
 
-41,229
+80,896
 
-£204.74
+\-£576.41
 
 mauris.eu@ipsum.ca
 
@@ -1577,9 +904,9 @@ Colombia
 
 Kylee
 
-80,559
+54,389
 
-\-£698.67
+£142.62
 
 libero.Proin@malesuadafamesac.com
 
@@ -1589,9 +916,9 @@ Papua New Guinea
 
 Cathleen
 
-85,185
+63,976
 
-\-£927.22
+\-£621.27
 
 risus.Donec@augue.edu
 
@@ -1601,9 +928,9 @@ Guinea-Bissau
 
 Sierra
 
-43,903
+73,601
 
-£287.01
+£389.20
 
 dictum.eleifend.nunc@tellus.net
 
@@ -1613,9 +940,9 @@ Isle of Man
 
 Levi
 
-27,410
+39,718
 
-\-£598.32
+\-£781.06
 
 Nulla.tempor.augue@nibhdolor.ca
 
@@ -1625,9 +952,9 @@ Tuvalu
 
 Kyle
 
-59,394
+34,320
 
-£19.79
+£102.92
 
 lacinia@senectus.org
 
@@ -1637,9 +964,9 @@ Qatar
 
 Emery
 
-69,852
+61,910
 
-\-£784.52
+£29.51
 
 Nulla.facilisis@nonummyultriciesornare.co.uk
 
@@ -1649,9 +976,9 @@ Belize
 
 Nadine
 
-9,884
+86,838
 
-£97.94
+£169.68
 
 Duis@Sed.ca
 
@@ -1661,9 +988,9 @@ Uruguay
 
 Dalton
 
-60,037
+90,767
 
-£429.75
+\-£531.59
 
 nibh.dolor.nonummy@laoreetlibero.org
 
@@ -1673,9 +1000,9 @@ Cayman Islands
 
 Zeph
 
-61,632
+91,164
 
-£256.51
+\-£726.59
 
 non.dui@felisorci.com
 
@@ -1685,9 +1012,9 @@ Niger
 
 Shannon
 
-6,613
+33,870
 
-£57.82
+£191.23
 
 leo@lobortis.co.uk
 
@@ -1697,9 +1024,9 @@ Somalia
 
 Erich
 
-34,643
+75,518
 
-0.00
+£367.72
 
 cursus.non.egestas@aliquet.org
 
@@ -1709,9 +1036,9 @@ Sao Tome and Principe
 
 Rhiannon
 
-57,478
+11,119
 
-£125.61
+£155.60
 
 arcu.Morbi.sit@cursus.edu
 
@@ -1721,9 +1048,9 @@ Croatia
 
 Elijah
 
-8,032
+90,007
 
-\-£936.24
+£4.40
 
 ipsum.Donec.sollicitudin@leo.co.uk
 
@@ -1733,9 +1060,9 @@ San Marino
 
 Grady
 
-27,873
+98,900
 
-£474.66
+\-£991.66
 
 mollis.nec.cursus@malesuadamalesuadaInteger.edu
 
@@ -1745,9 +1072,9 @@ Cuba
 
 Quentin
 
-56,391
+43,461
 
-\-£879.89
+\-£567.98
 
 erat.vel@auctor.net
 
@@ -1757,9 +1084,9 @@ Mayotte
 
 Samuel
 
-76,919
+64,692
 
-£431.98
+\-£543.81
 
 tellus@magnaSed.edu
 
@@ -1769,9 +1096,9 @@ Lebanon
 
 Merritt
 
-53,310
+78,983
 
-£103.21
+£64.07
 
 interdum.Nunc.sollicitudin@elitpellentesque.edu
 
@@ -1781,9 +1108,9 @@ French Southern Territories
 
 Harlan
 
-88,270
+7,259
 
-£365.29
+£98.81
 
 nascetur.ridiculus@feugiatmetussit.net
 
@@ -1793,9 +1120,9 @@ Saint Pierre and Miquelon
 
 Stuart
 
-83,845
+80,609
 
-£465.92
+\-£999.28
 
 sed.pede.nec@maurisMorbinon.com
 
@@ -1803,6 +1130,174 @@ sed.pede.nec@maurisMorbinon.com
 
 Jersey
 
+Clarke
+
+50,475
+
+\-£966.15
+
+in@estacfacilisis.org
+
+(028) 5013 9648
+
+Seychelles
+
+Roanna
+
+15,498
+
+£284.91
+
+dui@nascetur.net
+
+(024) 3023 2962
+
+Lesotho
+
+Delilah
+
+163
+
+£495.89
+
+laoreet.lectus.quis@utaliquam.edu
+
+07160 224163
+
+Indonesia
+
+Georgia
+
+59,862
+
+\-£935.02
+
+dui@enimnisl.net
+
+(0113) 542 3955
+
+Niue
+
+Aiko
+
+63,682
+
+\-£921.56
+
+cubilia.Curae.Phasellus@augueid.com
+
+055 9506 2116
+
+Belize
+
+Winter
+
+65,173
+
+£51.68
+
+aliquet@Duisac.ca
+
+0800 693847
+
+Equatorial Guinea
+
+Jolene
+
+10,150
+
+£130.03
+
+odio.Aliquam.vulputate@ac.ca
+
+(023) 4876 2215
+
+Morocco
+
+Kaden
+
+51,234
+
+\-£991.27
+
+rutrum@eleifendnec.ca
+
+07305 685548
+
+Peru
+
+Kaseem
+
+59,781
+
+\-£500.61
+
+mauris.erat.eget@nequeMorbi.com
+
+07275 403152
+
+Sudan
+
+Vladimir
+
+55,588
+
+£451.33
+
+id@nonarcuVivamus.edu
+
+0500 950469
+
+Mexico
+
+Jocelyn
+
+61,246
+
+£323.18
+
+dolor@nec.ca
+
+07302 403156
+
+Canada
+
+Howard
+
+79,196
+
+£287.43
+
+Donec.felis@insodales.com
+
+07624 830239
+
+Seychelles
+
+Adam
+
+25,919
+
+£26.12
+
+amet.dapibus@faucibus.edu
+
+0845 46 49
+
+Jordan
+
+Aiko
+
+57,754
+
+\-£793.26
+
+sodales@mauris.edu
+
+0800 1111
+
+Faroe Islands
+
 Columns
 
 Filters
@@ -1899,722 +1394,7 @@ to of
 
 Page of
 
-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; }
-
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { AG\_GRID\_LICENSE\_KEY } from '@iress/ag-grid-license-key';
-import type {
-  GridApi,
-  GridReadyEvent,
-  ValueFormatterParams,
-} from 'ag-grid-community';
-import { AgGridReact, AgGridReactProps } from 'ag-grid-react';
-import {
-  AllEnterpriseModule,
-  LicenseManager,
-  ModuleRegistry,
-  provideGlobalGridOptions,
-} from 'ag-grid-enterprise';
-import { AG\_THEME\_IRESS\_ICONS, IressAgGridContainer } from '@iress/ids-themes';
-import styles from '@iress-storybook/styles.module.scss';
-LicenseManager.setLicenseKey(AG\_GRID\_LICENSE\_KEY);
-ModuleRegistry.registerModules(\[AllEnterpriseModule\]);
-provideGlobalGridOptions({ theme: 'legacy' });
-const formatter2dp \= new Intl.NumberFormat('en-UK', {
-  minimumFractionDigits: 2,
-  maximumFractionDigits: 2,
-});
-const formatterCurrency \= new Intl.NumberFormat('en-UK', {
-  minimumFractionDigits: 2,
-  maximumFractionDigits: 2,
-  currencySign: 'standard',
-  currency: 'GBP',
-  style: 'currency',
-});
-const getSales \= (number: number) \=> {
-  const no \= number \* 100000;
-  return Math.ceil(no);
-};
-const getProfit \= (number: number) \=> {
-  const no \= number \> 0.5 ? number \* \-1000 : number \* 1000;
-  return formatter2dp.format(no);
-};
-const getRating \= () \=> (Math.random() \> 0.5 ? 'red' : 'green');
-const BIG\_DATA \= \[
-  {
-    firstName: 'Shellie',
-    lastName: 'Cantu',
-    email: 'aliquet@purus.com',
-    phoneNo: '0828 746 6831',
-    street: '639-9644 Eget Street',
-    city: 'Weißenfels',
-    postcode: '37962',
-    country: 'French Polynesia',
-    personalID: '16011210 9582',
-  },
-  {
-    firstName: 'Jade',
-    lastName: 'Sellers',
-    email: 'mi.pede.nonummy@senectus.org',
-    phoneNo: '0800 360062',
-    street: 'P.O. Box 511, 3099 In Rd.',
-    city: 'Cochrane',
-    postcode: 'K8I 3RB',
-    country: 'Tonga',
-    personalID: '16870328 2056',
-  },
-  {
-    firstName: 'Wyoming',
-    lastName: 'Fox',
-    email: 'Nulla.tempor.augue@aliquamiaculis.org',
-    phoneNo: '0800 377 7753',
-    street: '7354 Ac Ave',
-    city: 'East Kilbride',
-    postcode: '233010',
-    country: 'Rwanda',
-    personalID: '16070816 5048',
-  },
-  {
-    firstName: 'Christine',
-    lastName: 'Holcomb',
-    email: 'neque.sed.dictum@ultricesVivamus.ca',
-    phoneNo: '07578 190673',
-    street: 'Ap #121-4421 Iaculis Av.',
-    city: 'Etroubles',
-    postcode: '6742',
-    country: 'Bahamas',
-    personalID: '16401211 0773',
-  },
-  {
-    firstName: 'Jameson',
-    lastName: 'Sutton',
-    email: 'sem.semper@liberoProin.com',
-    phoneNo: '07489 442639',
-    street: 'Ap #700-1481 Porttitor Ave',
-    city: 'Nice',
-    postcode: '14655',
-    country: 'Nauru',
-    personalID: '16301129 4323',
-  },
-  {
-    firstName: 'Driscoll',
-    lastName: 'Jenkins',
-    email: 'libero.dui@estacfacilisis.edu',
-    phoneNo: '0843 298 8205',
-    street: 'Ap #775-8090 Sed Avenue',
-    city: 'Natales',
-    postcode: '622109',
-    country: 'Tajikistan',
-    personalID: '16430908 1950',
-  },
-  {
-    firstName: 'Morgan',
-    lastName: 'Hutchinson',
-    email: 'mauris.eu@ipsum.ca',
-    phoneNo: '070 6292 4498',
-    street: '3135 Curabitur Rd.',
-    city: 'Darmstadt',
-    postcode: '010900',
-    country: 'Colombia',
-    personalID: '16890811 2991',
-  },
-  {
-    firstName: 'Kylee',
-    lastName: 'Riddle',
-    email: 'libero.Proin@malesuadafamesac.com',
-    phoneNo: '(017177) 84788',
-    street: '7336 Ipsum St.',
-    city: 'Semarang',
-    postcode: '9828',
-    country: 'Papua New Guinea',
-    personalID: '16260701 0093',
-  },
-  {
-    firstName: 'Cathleen',
-    lastName: 'Dale',
-    email: 'risus.Donec@augue.edu',
-    phoneNo: '(0115) 224 4142',
-    street: 'Ap #568-2948 Fringilla Rd.',
-    city: 'Brandenburg',
-    postcode: 'CH2L 4EH',
-    country: 'Guinea-Bissau',
-    personalID: '16161203 4817',
-  },
-  {
-    firstName: 'Sierra',
-    lastName: 'Robbins',
-    email: 'dictum.eleifend.nunc@tellus.net',
-    phoneNo: '(01266) 957950',
-    street: '481-6201 Mattis. Rd.',
-    city: 'Upper Hutt',
-    postcode: '23945',
-    country: 'Isle of Man',
-    personalID: '16691217 6010',
-  },
-  {
-    firstName: 'Levi',
-    lastName: 'Simpson',
-    email: 'Nulla.tempor.augue@nibhdolor.ca',
-    phoneNo: '0855 608 0347',
-    street: '555-4187 Integer Av.',
-    city: 'Curacaví',
-    postcode: '439311',
-    country: 'Tuvalu',
-    personalID: '16000330 9499',
-  },
-  {
-    firstName: 'Kyle',
-    lastName: 'Mendez',
-    email: 'lacinia@senectus.org',
-    phoneNo: '0845 46 40',
-    street: '814-4647 Nec, St.',
-    city: 'Akron',
-    postcode: '199413',
-    country: 'Qatar',
-    personalID: '16471029 5397',
-  },
-  {
-    firstName: 'Emery',
-    lastName: 'Hurley',
-    email: 'Nulla.facilisis@nonummyultriciesornare.co.uk',
-    phoneNo: '(01553) 502913',
-    street: '4540 Luctus Ave',
-    city: 'Meux',
-    postcode: '36612',
-    country: 'Belize',
-    personalID: '16440228 3842',
-  },
-  {
-    firstName: 'Nadine',
-    lastName: 'Buchanan',
-    email: 'Duis@Sed.ca',
-    phoneNo: '055 2785 0228',
-    street: '694 Mi, Av.',
-    city: 'Middelburg',
-    postcode: '62232-88887',
-    country: 'Uruguay',
-    personalID: '16721129 5857',
-  },
-  {
-    firstName: 'Dalton',
-    lastName: 'Nieves',
-    email: 'nibh.dolor.nonummy@laoreetlibero.org',
-    phoneNo: '0395 486 9374',
-    street: '797-8170 Enim, Street',
-    city: 'Burhanpur',
-    postcode: '29633-93750',
-    country: 'Cayman Islands',
-    personalID: '16600205 0067',
-  },
-  {
-    firstName: 'Zeph',
-    lastName: 'Ruiz',
-    email: 'non.dui@felisorci.com',
-    phoneNo: '0845 46 41',
-    street: 'Ap #282-8369 Malesuada Ave',
-    city: 'Cavallino',
-    postcode: 'EW2V 1ZE',
-    country: 'Niger',
-    personalID: '16580706 9124',
-  },
-  {
-    firstName: 'Shannon',
-    lastName: 'Decker',
-    email: 'leo@lobortis.co.uk',
-    phoneNo: '0800 135593',
-    street: 'P.O. Box 587, 6871 Eleifend. Ave',
-    city: 'Rocca San Felice',
-    postcode: '42271-38735',
-    country: 'Somalia',
-    personalID: '16090810 4763',
-  },
-  {
-    firstName: 'Erich',
-    lastName: 'Daniels',
-    email: 'cursus.non.egestas@aliquet.org',
-    phoneNo: '0845 46 44',
-    street: '689-4565 Velit. Avenue',
-    city: 'Edmundston',
-    postcode: 'JR32 7QA',
-    country: 'Sao Tome and Principe',
-    personalID: '16720401 5049',
-  },
-  {
-    firstName: 'Rhiannon',
-    lastName: 'Malone',
-    email: 'arcu.Morbi.sit@cursus.edu',
-    phoneNo: '0361 311 4051',
-    street: 'Ap #971-1781 Vehicula Road',
-    city: 'Wood Buffalo',
-    postcode: '71682',
-    country: 'Croatia',
-    personalID: '16931028 3388',
-  },
-  {
-    firstName: 'Elijah',
-    lastName: 'Sosa',
-    email: 'ipsum.Donec.sollicitudin@leo.co.uk',
-    phoneNo: '0800 365 8250',
-    street: 'P.O. Box 169, 2562 Commodo Ave',
-    city: 'Montoggio',
-    postcode: '42092',
-    country: 'San Marino',
-    personalID: '16251107 2403',
-  },
-  {
-    firstName: 'Grady',
-    lastName: 'Crosby',
-    email: 'mollis.nec.cursus@malesuadamalesuadaInteger.edu',
-    phoneNo: '070 2824 3427',
-    street: '821-5145 Id, Ave',
-    city: 'Rosoux-Crenwick',
-    postcode: '56176',
-    country: 'Cuba',
-    personalID: '16520115 9133',
-  },
-  {
-    firstName: 'Quentin',
-    lastName: 'Armstrong',
-    email: 'erat.vel@auctor.net',
-    phoneNo: '(029) 5052 0365',
-    street: '157-253 Hendrerit Av.',
-    city: 'Aubervilliers',
-    postcode: '2151',
-    country: 'Mayotte',
-    personalID: '16730607 0553',
-  },
-  {
-    firstName: 'Samuel',
-    lastName: 'Harrell',
-    email: 'tellus@magnaSed.edu',
-    phoneNo: '07064 102166',
-    street: 'P.O. Box 713, 4115 Ut Rd.',
-    city: 'Kingston',
-    postcode: '23315',
-    country: 'Lebanon',
-    personalID: '16361016 5551',
-  },
-  {
-    firstName: 'Merritt',
-    lastName: 'Holland',
-    email: 'interdum.Nunc.sollicitudin@elitpellentesque.edu',
-    phoneNo: '0800 825458',
-    street: 'P.O. Box 261, 3590 Nascetur Road',
-    city: 'Drancy',
-    postcode: '760017',
-    country: 'French Southern Territories',
-    personalID: '16040311 2121',
-  },
-  {
-    firstName: 'Harlan',
-    lastName: 'Brennan',
-    email: 'nascetur.ridiculus@feugiatmetussit.net',
-    phoneNo: '(012812) 59410',
-    street: '8210 Torquent Av.',
-    city: 'Grantham',
-    postcode: '01537',
-    country: 'Saint Pierre and Miquelon',
-    personalID: '16431216 0239',
-  },
-  {
-    firstName: 'Stuart',
-    lastName: 'Deleon',
-    email: 'sed.pede.nec@maurisMorbinon.com',
-    phoneNo: '0807 013 3815',
-    street: 'P.O. Box 143, 4909 At Street',
-    city: 'Terrance',
-    postcode: '27218',
-    country: 'Jersey',
-    personalID: '16330207 5852',
-  },
-  {
-    firstName: 'Clarke',
-    lastName: 'Middleton',
-    email: 'in@estacfacilisis.org',
-    phoneNo: '(028) 5013 9648',
-    street: '9856 Eget, Avenue',
-    city: 'Solihull',
-    postcode: '72893',
-    country: 'Seychelles',
-    personalID: '16340804 3325',
-  },
-  {
-    firstName: 'Roanna',
-    lastName: 'Gentry',
-    email: 'dui@nascetur.net',
-    phoneNo: '(024) 3023 2962',
-    street: '3566 Ornare. Rd.',
-    city: 'Freiberg',
-    postcode: '3899',
-    country: 'Lesotho',
-    personalID: '16680618 3791',
-  },
-  {
-    firstName: 'Delilah',
-    lastName: 'Bird',
-    email: 'laoreet.lectus.quis@utaliquam.edu',
-    phoneNo: '07160 224163',
-    street: 'P.O. Box 332, 8565 Molestie Avenue',
-    city: 'Washuk',
-    postcode: '607065',
-    country: 'Indonesia',
-    personalID: '16891112 9461',
-  },
-  {
-    firstName: 'Georgia',
-    lastName: 'Cash',
-    email: 'dui@enimnisl.net',
-    phoneNo: '(0113) 542 3955',
-    street: '900-3252 Fusce Avenue',
-    city: 'Sint-Michiels',
-    postcode: 'Z8203',
-    country: 'Niue',
-    personalID: '16340718 4716',
-  },
-  {
-    firstName: 'Aiko',
-    lastName: 'Mclean',
-    email: 'cubilia.Curae.Phasellus@augueid.com',
-    phoneNo: '055 9506 2116',
-    street: 'P.O. Box 786, 1756 Fringilla St.',
-    city: 'Malonne',
-    postcode: 'Y8E 7M2',
-    country: 'Belize',
-    personalID: '16680622 4207',
-  },
-  {
-    firstName: 'Winter',
-    lastName: 'Jacobs',
-    email: 'aliquet@Duisac.ca',
-    phoneNo: '0800 693847',
-    street: '774-9011 Arcu Road',
-    city: 'Bilbo',
-    postcode: '05558',
-    country: 'Equatorial Guinea',
-    personalID: '16611201 4144',
-  },
-  {
-    firstName: 'Jolene',
-    lastName: 'Rios',
-    email: 'odio.Aliquam.vulputate@ac.ca',
-    phoneNo: '(023) 4876 2215',
-    street: 'Ap #325-8225 Amet Road',
-    city: 'Limena',
-    postcode: 'K56 0YJ',
-    country: 'Morocco',
-    personalID: '16170215 3485',
-  },
-  {
-    firstName: 'Kaden',
-    lastName: 'Morrow',
-    email: 'rutrum@eleifendnec.ca',
-    phoneNo: '07305 685548',
-    street: '8870 Aliquam Road',
-    city: 'Sète',
-    postcode: '04908',
-    country: 'Peru',
-    personalID: '16820820 6675',
-  },
-  {
-    firstName: 'Kaseem',
-    lastName: 'Norris',
-    email: 'mauris.erat.eget@nequeMorbi.com',
-    phoneNo: '07275 403152',
-    street: 'P.O. Box 776, 7115 Integer Avenue',
-    city: 'Jönköping',
-    postcode: '42236-83471',
-    country: 'Sudan',
-    personalID: '16440829 7895',
-  },
-  {
-    firstName: 'Vladimir',
-    lastName: 'Mcguire',
-    email: 'id@nonarcuVivamus.edu',
-    phoneNo: '0500 950469',
-    street: '2067 Est Ave',
-    city: 'Ziano di Fiemme',
-    postcode: '774056',
-    country: 'Mexico',
-    personalID: '16771016 3796',
-  },
-  {
-    firstName: 'Jocelyn',
-    lastName: 'Schroeder',
-    email: 'dolor@nec.ca',
-    phoneNo: '07302 403156',
-    street: 'Ap #155-3999 Vivamus St.',
-    city: 'Malloa',
-    postcode: '4059',
-    country: 'Canada',
-    personalID: '16530314 9388',
-  },
-  {
-    firstName: 'Howard',
-    lastName: 'Villarreal',
-    email: 'Donec.felis@insodales.com',
-    phoneNo: '07624 830239',
-    street: '540-7057 Cras Rd.',
-    city: 'Siverek',
-    postcode: '8701',
-    country: 'Seychelles',
-    personalID: '16640823 8530',
-  },
-  {
-    firstName: 'Adam',
-    lastName: 'Miranda',
-    email: 'amet.dapibus@faucibus.edu',
-    phoneNo: '0845 46 49',
-    street: 'Ap #931-6286 Diam. Avenue',
-    city: 'Warburg',
-    postcode: '01972',
-    country: 'Jordan',
-    personalID: '16370414 7911',
-  },
-  {
-    firstName: 'Aiko',
-    lastName: 'Elliott',
-    email: 'sodales@mauris.edu',
-    phoneNo: '0800 1111',
-    street: 'P.O. Box 583, 6119 Ut St.',
-    city: 'Villavicencio',
-    postcode: '4864 XQ',
-    country: 'Faroe Islands',
-    personalID: '16940907 6115',
-  },
-\].map((person) \=> ({
-  ...person,
-  sales: getSales(Math.random()),
-  profit: getProfit(Math.random()),
-  redOrGreen: getRating(),
-  date: new Date(Math.floor(Math.random() \* \-10000000000)).toDateString(),
-}));
-const createClassNameMutationObserver \= (
-  element: HTMLElement,
-  callback: (className: string) \=> void,
-): MutationObserver \=> {
-  const observer \= new MutationObserver(() \=> {
-    callback(element.className);
-  });
-  observer.observe(element, {
-    attributes: true,
-    attributeFilter: \['class'\],
-    childList: false,
-    characterData: false,
-  });
-  return observer;
-};
-const useClassNameMutationObserver \= (
-  element: HTMLElement,
-  callback: () \=> void,
-): void \=> {
-  useEffect(() \=> {
-    const observer \= createClassNameMutationObserver(element, callback);
-    // Cleanup listener
-    return (): void \=> {
-      observer.disconnect();
-    };
-  });
-};
-const RedOrGreenFormatter \= (params: ValueFormatterParams) \=> {
-  const dotStyle \= styles\[\`dot--${params.value}\`\];
-  return <span className\={\`${styles.dot} ${dotStyle}\`} />;
-};
-const CommaFormatter \= (params: ValueFormatterParams): string \=> {
-  return params.value.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',');
-};
-const CurrencyFormatter \= (params: ValueFormatterParams): string \=> {
-  if (params.value \=== '0.00') {
-    return formatter2dp.format(params.value);
-  }
-  return formatterCurrency.format(params.value);
-};
-export const AgGridCompact \= (args: AgGridReactProps) \=> {
-  const \[rowData, setRowData\] \= useState(BIG\_DATA);
-  const api \= useRef<GridApi\>();
-  // pick one row at random to show data updating in the grid
-  useEffect(() \=> {
-    const updateTick \= setInterval(() \=> {
-      const randomNo \= Math.random();
-      const index \= Math.floor(Math.random() \* rowData.length);
-      const itemToUpdate \= rowData\[index\];
-      if (randomNo < 0.5) {
-        itemToUpdate.sales \= getSales(Math.random());
-      } else if (randomNo \> 0.9) {
-        itemToUpdate.profit \= getProfit(0);
-      } else {
-        itemToUpdate.profit \= getProfit(Math.random());
-      }
-      setRowData(rowData);
-      api.current?.refreshCells();
-    }, 500);
-    return () \=> {
-      clearInterval(updateTick);
-    };
-  }, \[rowData\]);
-  const onGridReady \= useCallback((event: GridReadyEvent): void \=> {
-    api.current \= event.api;
-    api.current.resetRowHeights();
-  }, \[\]);
-  useClassNameMutationObserver(document.documentElement, () \=> {
-    if (api.current) {
-      api.current.resetRowHeights();
-    }
-  });
-  return (
-    <IressAgGridContainer
-      alignMiddle
-      compact
-      style\={{ height: '100vh', width: '100%' }}
-    \>
-      <AgGridReact        {...args}
-        onGridReady={onGridReady}
-        rowDragManaged        animateRows        enableRangeSelection={true}
-        enableCharts={true}
-        sideBar={true}
-        rowData={rowData}
-        rowSelection="multiple"        rowMultiSelectWithClick        components={{
-          redGreenDots: RedOrGreenFormatter,
-        }}
-        defaultColDef={{
-          enableCellChangeFlash: true,
-          resizable: true,
-          sortable: true,
-          unSortIcon: true,
-          filter: true,
-          floatingFilter: true,
-          enablePivot: false,
-          filterParams: {
-            buttons: \['reset', 'apply'\],
-          },
-          autoHeight: true,
-          wrapText: true,
-        }}
-        icons={AG\_THEME\_IRESS\_ICONS}
-        columnDefs={\[
-          {
-            headerName: 'Employee',
-            children: \[
-              {
-                field: 'firstName',
-                editable: true,
-                filter: 'agTextColumnFilter',
-                headerTooltip: 'First name',
-                rowDrag: true,
-                lockVisible: true,
-                tooltipField: 'firstName',
-              },
-              {
-                field: 'lastName',
-                editable: true,
-                filter: 'agTextColumnFilter',
-                headerTooltip: 'Surname',
-                lockVisible: true,
-                cellClass: 'iress-cell--divider',
-                headerClass: 'iress-cell--divider',
-                columnGroupShow: 'open',
-              },
-              {
-                field: 'personalID',
-                filter: 'agTextColumnFilter',
-                headerTooltip: 'Personal ID',
-                columnGroupShow: 'open',
-              },
-              {
-                field: 'date',
-                filter: 'agDateColumnFilter',
-                headerTooltip: 'Date',
-                columnGroupShow: 'open',
-              },
-            \],
-          },
-          {
-            headerName: 'Sales performance',
-            children: \[
-              {
-                field: 'redOrGreen',
-                headerName: 'Rating',
-                cellRenderer: 'redGreenDots',
-                filter: false,
-              },
-              {
-                field: 'sales',
-                filter: 'agNumberColumnFilter',
-                valueFormatter: CommaFormatter,
-              },
-              {
-                field: 'profit',
-                valueFormatter: CurrencyFormatter,
-                cellClassRules: {
-                  'iress--positive': (params) \=> parseInt(params.value, 10) \> 0,
-                  'iress--negative': (params) \=> parseInt(params.value, 10) < 0,
-                  'iress--zero': (params) \=> params.value \=== '0.00',
-                },
-              },
-            \],
-          },
-          {
-            headerName: 'Contact details',
-            children: \[
-              {
-                field: 'email',
-                width: 350,
-                filter: 'agTextColumnFilter',
-                headerTooltip: 'Email address',
-                cellClass: 'iress-cell--ellipsis',
-              },
-              {
-                field: 'phoneNo',
-                enableValue: true,
-                filter: 'agTextColumnFilter',
-                headerTooltip: 'Phone number',
-              },
-            \],
-          },
-          {
-            headerName: 'Address',
-            children: \[
-              {
-                field: 'street',
-                width: 350,
-                filter: 'agTextColumnFilter',
-                cellClass: 'iress-cell--ellipsis',
-                columnGroupShow: 'open',
-              },
-              {
-                field: 'city',
-                filter: 'agTextColumnFilter',
-                columnGroupShow: 'open',
-              },
-              {
-                field: 'postcode',
-                filter: 'agTextColumnFilter',
-                columnGroupShow: 'open',
-              },
-              { field: 'country', filter: 'agTextColumnFilter' },
-            \],
-          },
-        \]}
-      />    </IressAgGridContainer\>
-  );
-};
-export default AgGridCompact;
-
-Copy
-
-[](#utility-classes)Utility classes
------------------------------------
-
-Because AG Grid is a third-party piece of software, we have to rely on utility classes to enforce styling of cell content. You can use the following utility classes.
-
-| Class | Applied to | Effect |
-| --- | --- | --- |
-| iress--positive | Cell content | Adds buy / positive styling to match the IressText buy variant |
-| iress--negative | Cell content | Adds sell / negative styling to match the IressText sell variant |
-| iress--zero | Cell content | Reduces the visual weight of cells that have a value of zero |
-| iress-cell--divider | Column (via cellClass and headerCellClass) | Creates a vertical divide between this column and the next column |
-| iress-cell--ellipsis | Column (via cellClass) | Shows an ellipsis instead of wrapping text content |
+Show code
 
 [](#common-issues)Common issues
 -------------------------------
@@ -2653,7 +1433,6 @@ On this page
 
 *   [Overview](#overview)
 *   [Props](#props)
-*   [Props (API)](#props-api)
 *   [Usage](#usage)
     *   [Installation](#installation)
     *   [Version](#version)
@@ -2661,6 +1440,5 @@ On this page
     *   [Simple](#simple)
     *   [Complex](#complex)
     *   [Compact](#compact)
-*   [Utility classes](#utility-classes)
 *   [Common issues](#common-issues)
     *   [Wrong row heights](#wrong-row-heights)