@interopio/groups-ui-react 4.4.0 → 4.5.0-next.0

package/dist/styles/vars.css

@@ -1,4 +1,4 @@
-:root { --io-app-version: 4.4.0; }
+:root { --io-app-version: 4.5.0-next.0; }
 :root,.io-variables{--io-font-family: "InterVariable", "Helvetica Neue", Arial, sans-serif;--io-font-size: 12px;--io-blue-100: #ffffff;--io-blue-200: #d8ebfd;--io-blue-300: #b2d8fb;--io-blue-400: #8fc7f9;--io-blue-500: #64b2f7;--io-blue-600: #42a1f5;--io-blue-700: #4b92fb;--io-blue-800: #356ec4;--io-blue-900: #165ab7;--io-blue-1000: #134e9f;--io-blue-opacity-35: #4b91fb59;--io-neutrals-0: #ffffff;--io-neutrals-25: #f7f7f7;--io-neutrals-50: #f2f2f2;--io-neutrals-100: #eaeaeb;--io-neutrals-150: #dadbdd;--io-neutrals-200: #caccce;--io-neutrals-300: #b0b2b5;--io-neutrals-400: #95989d;--io-neutrals-500: #7b7e84;--io-neutrals-600: #62656a;--io-neutrals-650: #55585d;--io-neutrals-700: #494b50;--io-neutrals-750: #3d3f43;--io-neutrals-800: #36383b;--io-neutrals-850: #2e3033;--io-neutrals-900: #26272a;--io-neutrals-950: #18191b;--io-neutrals-1000: #000000;--io-green-700: #1f9e61;--io-red-700: #c92121;--io-red-800: #b01d1d;--io-yellow-700: #deaf37;--spacing-1: 1px;--spacing-2: 2px;--spacing-4: 4px;--spacing-6: 6px;--spacing-8: 8px;--spacing-9: 9px;--spacing-10: 10px;--spacing-12: 12px;--spacing-14: 14px;--spacing-16: 16px;--spacing-24: 24px;--spacing-32: 32px;--spacing-40: 40px;--spacing-56: 56px;--spacing-64: 64px;--spacing-72: 72px;--spacing-80: 80px;--base-border-size: var(--spacing-1);--base-radius-default: var(--spacing-4);--base-radius-large: var(--spacing-8);--base-scrollbar-shift: 15px;--base-focus-state-outer-padding: var(--spacing-2);--base-focus-state-outer-radius: var(--spacing-4);--base-form-vertical-gap: var(--spacing-16);--base-form-button-base-height: 28px;--base-form-button-base-height-large: var(--spacing-32);--base-panel-vertical-padding: var(--spacing-16);--base-panel-horizontal-padding: var(--spacing-16);--base-panel-vertical-gap: var(--spacing-24);--base-panel-group-gap: var(--spacing-12);--base-panel-radius: var(--base-radius-large);--base-panel-dropdown-radius: var(--base-radius-default);--base-panel-dropshadow: 0 3px 11px 6px rgba(0, 0, 0, 16%);--base-block-gap: var(--spacing-8);--base-horizontal-gap: var(--spacing-4);--base-vertical-gap: var(--spacing-8);--base-link-color: var(--text-states-active);--base-text-mask: linear-gradient( to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0) 100% );--tabs-radius: var(--spacing-4);--tabs-border: var(--window-header-background);--tabs-color-active: var(--text-states-active);--tabs-color-default: var(--text-states-default);--tabs-color-hover: var(--text-states-hover);--window-tabs-vertical-padding: var(--spacing-4);--window-tabs-horizontal-padding: var(--spacing-8);--window-tabs-inner-gap: var(--spacing-8);--window-splitter-width: var(--spacing-6);--window-header-background: var(--workspace-tabs-background-active);--window-tabs-background-active: var(--io-neutrals-650);--window-splitter-background: var(--window-header-background);--window-splitter-background-active: var(--io-blue-700);--workspace-header-border-bottom: var(--spacing-4);--workspace-tabs-vertical-padding-pinned: var(--spacing-6);--workspace-tabs-inner-gap: var(--spacing-8);--workspace-tabs-vertical-padding: var(--spacing-8);--workspace-tabs-horizontal-padding: var(--spacing-12);--workspace-header-background: var(--io-neutrals-900);--workspace-tabs-background-active: var(--io-neutrals-750);--workspace-tabs-background-hover: var(--io-neutrals-700);--workspace-controls-background-active: var(--io-neutrals-700);--workspace-controls-background-hover: var(--io-neutrals-800);--workspace-controls-background-hover-dark: var(--io-neutrals-950);--workspace-controls-color-active: var(--text-states-active);--workspace-controls-color-default: var(--text-states-default);--workspace-controls-color-hover: var(--io-neutrals-100);--scrollbar-box-margin-right: calc(var(--base-scrollbar-shift) * -1);--scrollbar-box-padding-right: var(--base-scrollbar-shift);--severity-critical: var(--io-red-700);--severity-high: var(--io-yellow-700);--severity-inverted-text: var(--text-states-active-inverted);--severity-low: var(--io-blue-700);--severity-medium: var(--io-green-700);--severity-text: var(--text-states-active);--severity-icon-size: 34px;--severity-icon-high: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2735%27 height=%2731%27 viewBox=%270 0 35 31%27%3E%3Cpath d=%27M16.4.9C16.9.1 18.1.1 18.6.9L34.4 28.3C34.9 29.2 34.3 30.3 33.3 30.3H1.7C.7 30.3.1 29.2.6 28.3L16.4.9Z%27/%3E%3C/svg%3E");--checkbox-background: var(--base-form-background);--checkbox-background-checked: var(--buttons-primary-background-default);--checkbox-background-checked-hover: var(--buttons-primary-background-hover);--checkbox-background-disabled: var(--base-form-background-disabled);--checkbox-border-default: var(--base-form-border-default);--checkbox-border-disabled: var(--base-form-border-disabled);--checkbox-border-hover: var(--base-form-border-hover);--checkbox-icon-color: var(--text-states-active);--checkbox-text-disabled: var(--text-states-disabled);--checkbox-text-inactive: var(--text-states-default);--checkbox-panel-background-disabled: var(--base-panel-form-background-disabled);--checkbox-panel-text-disabled: var(--text-states-panel-disabled);--checkbox-border-size: var(--base-border-size);--checkbox-border-radius: var(--base-radius-default);--checkbox-horizontal-gap: var(--spacing-8);--checkbox-size: var(--spacing-16);--checkbox-icon-size: var(--spacing-14);--radio-button-background: var(--base-form-background);--radio-button-background-checked: var(--buttons-primary-background-default);--radio-button-background-checked-hover: var(--buttons-primary-background-hover);--radio-button-background-disabled: var(--base-form-background-disabled);--radio-button-border-default: var(--base-form-border-default);--radio-button-border-disabled: var(--base-form-border-disabled);--radio-button-border-hover: var(--base-form-border-hover);--radio-button-icon-color: var(--text-states-active);--radio-button-text-disabled: var(--text-states-disabled);--radio-button-text-inactive: var(--text-states-default);--radio-button-panel-background-disabled: var(--base-panel-form-background-disabled);--radio-button-panel-text-disabled: var(--text-states-panel-disabled);--radio-button-border-size: var(--base-border-size);--radio-button-horizontal-gap: var(--spacing-8);--radio-button-size: var(--spacing-16);--radio-button-border-radius: var(--spacing-80);--toggle-background: var(--base-form-background);--toggle-background-on: var(--buttons-primary-background-default);--toggle-background-on-hover: var(--buttons-primary-background-hover);--toggle-background-disabled: var(--base-form-background-disabled);--toggle-border-default: var(--base-form-border-default);--toggle-border-hover: var(--base-form-border-hover);--toggle-border-disabled: var(--base-form-border-disabled);--toggle-border-panel-disabled: var(--base-form-border-panel-disabled);--toggle-text-disabled: var(--text-states-disabled);--toggle-icon-color-off: var(--io-neutrals-400);--toggle-icon-color-on: var(--text-states-active);--toggle-panel-background-disabled: var(--base-panel-form-background-disabled);--toggle-panel-border-disabled: var(--base-panel-form-border-disabled);--toggle-panel-text-disabled: var(--text-states-panel-disabled);--toggle-border-size: var(--base-border-size);--toggle-horizontal-gap: var(--spacing-8);--toggle-horizontal-padding: var(--spacing-1);--toggle-vertical-padding: var(--spacing-1);--toggle-toggle-inner-gap: var(--spacing-8);--toggle-knob-size: var(--spacing-12);--toggle-icon-size: var(--spacing-10);--toggle-icon-knob-transition: translate( calc(var(--toggle-knob-size) + var(--toggle-toggle-inner-gap) - var(--toggle-border-size) * 2) );--toggle-icon-off: "\e916";--toggle-icon-off-position: var(--spacing-1);--toggle-icon-off-transition: translate( calc((var(--toggle-knob-size) + var(--toggle-toggle-inner-gap) - var(--toggle-border-size)) * -1) );--toggle-icon-on: "\e93f";--toggle-icon-on-position: 0;--toggle-min-height: var(--spacing-16);--toggle-border-radius: var(--spacing-80);--buttons-secondary-background-disabled: var(--base-form-background-disabled);--buttons-secondary-background-active: var(--io-neutrals-800);--buttons-secondary-background-default: var(--io-neutrals-750);--buttons-secondary-background-hover: var(--io-neutrals-800);--buttons-secondary-border-disabled: var(--base-form-border-disabled);--buttons-secondary-text-active: var(--text-states-active);--buttons-secondary-text-disabled: var(--text-states-disabled);--buttons-secondary-text-hover: var(--text-states-hover);--buttons-secondary-text-inactive: var(--text-states-default);--buttons-primary-background-active: var(--io-blue-1000);--buttons-primary-background-default: var(--io-blue-800);--buttons-primary-background-disabled: var(--base-form-background-disabled);--buttons-primary-background-hover: var(--io-blue-900);--buttons-primary-border-disabled: var(--base-border-disabled);--buttons-primary-text-active: var(--text-states-active);--buttons-primary-text-disabled: var(--text-states-disabled);--buttons-primary-text-hover: var(--text-states-active);--buttons-primary-text-inactive: var(--text-states-active);--buttons-danger-background-active: var(--io-red-800);--buttons-danger-background-default: var(--severity-critical);--buttons-danger-background-disabled: var(--base-form-background-disabled);--buttons-danger-background-hover: var(--io-red-800);--buttons-danger-border-disabled: var(--base-border-disabled);--buttons-danger-text-active: var(--text-states-active);--buttons-danger-text-disabled: var(--text-states-disabled);--buttons-danger-text-hover: var(--text-states-active);--buttons-danger-text-inactive: var(--text-states-active);--buttons-outline-border-active: var(--base-border-active);--buttons-outline-border-default: var(--base-border-default);--buttons-outline-border-disabled: var(--base-border-disabled);--buttons-outline-border-hover: var(--base-border-hover);--buttons-outline-text-active: var(--text-states-active);--buttons-outline-text-disabled: var(--text-states-disabled);--buttons-outline-text-hover: var(--text-states-hover);--buttons-outline-text-inactive: var(--text-states-default);--buttons-link-border-disabled: transparent;--buttons-link-text-active: var(--buttons-outline-text-active);--buttons-link-text-disabled: var(--buttons-outline-text-disabled);--buttons-link-text-hover: var(--buttons-outline-text-hover);--buttons-link-text-inactive: var(--buttons-outline-text-inactive);--buttons-panel-text-disabled: var(--text-states-panel-disabled);--buttons-panel-background-disabled: var(--input-panel-background-disabled);--buttons-panel-border-disabled: var(--base-panel-form-border-disabled);--buttons-border-size: var(--base-border-size);--buttons-border-radius: var(--spacing-4);--buttons-inner-gap: var(--spacing-4);--buttons-vertical-gap: var(--spacing-6);--buttons-horizontal-gap: var(--spacing-12);--buttons-vertical-padding-large: var(--spacing-8);--buttons-horizontal-padding-large: var(--spacing-16);--buttons-group-gap: var(--spacing-8);--icon-background-active: var(--io-neutrals-700);--icon-background-default: var(--io-neutrals-900);--icon-background-hover: var(--io-neutrals-800);--icon-background-disabled: transparent;--icon-color-default: var(--text-states-default);--icon-color-hover: var(--io-neutrals-100);--icon-color-active: var(--text-states-active);--icon-color-disabled: var(--text-states-disabled);--icon-base-size: var(--spacing-16);--icon-radius: var(--base-radius-default);--list-item-background-default: transparent;--list-item-background-hover: var(--io-neutrals-800);--list-item-background-selected: var(--io-neutrals-800);--list-item-border: var(--io-neutrals-750);--list-item-text-default: var(--text-states-default);--list-item-text-disabled: var(--text-states-disabled);--list-item-text-hover: var(--text-states-hover);--list-item-panel-text-disabled: var(--text-states-panel-disabled);--list-item-description-color: var(--text-inactive-tertiary);--list-item-inner-gap: var(--spacing-8);--list-item-padding: 0 var(--spacing-16);--list-item-text-lh: var(--spacing-16);--list-item-description-text-lh: var(--spacing-12);--list-item-description-padding: var(--spacing-8) var(--spacing-16);--list-item-description-gap: 0;--list-item-height: var(--spacing-32);--input-background: var(--base-form-background);--input-background-disabled: var(--buttons-primary-background-disabled);--input-text-active: var(--text-states-active);--input-text-disabled: var(--text-states-disabled);--input-text-error: var(--text-severity-error);--input-text-hover: var(--text-states-hover);--input-text-inactive: var(--text-states-default);--input-panel-background-disabled: var(--base-panel-form-background-disabled);--input-panel-text-disabled: var(--text-states-panel-disabled);--input-border-size: var(--base-border-size);--input-border-radius: var(--base-radius-default);--input-horizontal-padding: var(--spacing-6);--input-vertical-padding: var(--spacing-6);--input-focus-offsets: -1px;--progress-background: var(--base-form-border-default);--progress-background-active: var(--base-border-primary);--progress-background-paused: var(--base-border-default);--progress-height: var(--spacing-4);--progress-border-radius: var(--spacing-2);--alert-panel-gap: 8px;--alert-panel-padding: 6px 8px;--alert-panel-large-padding: 12px 16px;--alert-panel-background: var(--base-panel-background);--alert-panel-background-animation: transparent;--alert-icon-size: var(--spacing-16);--alert-icon-size-large: var(--spacing-24);--alert-panel-border-radius: var(--base-radius-large);--alert-panel-border: var(--base-border-size) solid transparent;--alert-text-lh: var(--spacing-16);--alert-text-color: var(--text-states-active);--alert-font-size: 12px;--alert-font-weight: 500;--alert-max-width: 480px;--alert-max-width-small: 460px;--pill-background: var(--io-neutrals-700);--pill-background-secondary: var(--buttons-secondary-background-default);--pill-background-outline: transparent;--pill-background-flat: transparent;--pill-background-primary: var(--buttons-primary-background-default);--pill-background-success: var(--io-green-700);--pill-background-warning: var(--io-yellow-700);--pill-background-error: var(--io-red-700);--pill-border-default: var(--io-neutrals-700);--pill-border-secondary: var(--buttons-secondary-background-default);--pill-border-outline: var(--buttons-outline-border-default);--pill-border-flat: transparent;--pill-border-primary: var(--buttons-primary-background-default);--pill-border-success: var(--io-green-700);--pill-border-warning: var(--io-yellow-700);--pill-border-error: var(--io-red-700);--pill-text-default: var(--text-states-default);--pill-text-flat: var(--text-states-default);--pill-text-primary: var(--text-states-active);--pill-text-success: var(--text-states-active);--pill-text-warning: var(--text-states-active-inverted);--pill-text-error: var(--text-states-active);--pill-inner-gap: var(--spacing-4);--pill-horizontal-padding: var(--spacing-4);--pill-vertical-padding: var(--spacing-2);--pill-border-size: var(--base-border-size);--pill-border-radius: var(--spacing-2);--badge-background: var(--io-neutrals-700);--badge-background-primary: var(--buttons-primary-background-default);--badge-min-width: var(--spacing-16);--badge-min-height: var(--spacing-16);--badge-text-default: var(--text-states-default);--badge-text-primary: var(--text-states-active);--badge-letter-spacing: 0.33px;--badge-line-height: 0;--badge-font-size: 11px;--badge-font-weight: 400;--badge-horizontal-padding: var(--spacing-4);--badge-vertical-padding: var(--spacing-4);--badge-border-radius: var(--spacing-16);--loader-width: var(--spacing-32);--loader-width-medium: var(--spacing-24);--loader-width-small: var(--spacing-16);--loader-height: var(--spacing-32);--loader-height-medium: var(--spacing-24);--loader-height-small: var(--spacing-16);--loader-wrapper-height: fill-available;--loader-background: radial-gradient(farthest-side, var(--io-neutrals-500) 85%, #00000000) center top / var(--spacing-4) var(--spacing-4) no-repeat, conic-gradient(#00000000 15%, var(--io-neutrals-500));--loader-background-mask: radial-gradient( farthest-side, rgba(0, 0, 0, 0) calc(100% - var(--spacing-4)), var(--io-neutrals-1000) 0 );--loader-background-mask-md: radial-gradient( farthest-side, rgba(0, 0, 0, 0) calc(100% - calc(var(--spacing-4) - var(--spacing-1))), var(--io-neutrals-1000) 0 );--loader-background-mask-sm: radial-gradient( farthest-side, rgba(0, 0, 0, 0) calc(100% - var(--spacing-2)), var(--io-neutrals-1000) 0 );--loader-animation: s3 1.5s infinite linear;--loader-border-radius: 50%;--loader-gap: var(--spacing-8);--loader-text-color: var(--text-states-default);--loader-text-margin: initial;--loader-text-padding: initial;--panel-background: var(--base-panel-background);--panel-border-color: var(--base-panel-outer-border);--panel-border-size: var(--base-border-size);--panel-border-radius: var(--base-radius-large);--panel-h-padding: var(--base-panel-horizontal-padding);--panel-v-padding: var(--base-panel-vertical-padding);--panel-gap: var(--base-panel-vertical-gap);--panel-body-gap: var(--base-panel-vertical-padding);--panel-min-height: 150px;--panel-max-height: 100vh;--panel-content-z: 10;--panel-dropdown-min-size: 100%;--panel-dropdown-width: max-content;--dialog-box-background: var(--base-panel-background);--dialog-box-inner-border: var(--base-panel-border);--dialog-box-max-height: var(--panel-max-height);--dialog-box-btn-min-width: var(--spacing-64);--dialog-box-radius: var(--base-panel-radius);--dialog-box-padding: var(--spacing-16);--dialog-box-padding-top: var(--spacing-8);--dialog-box-vertical-gap: var(--spacing-16);--dialog-box-close-icon-shift: calc(var(--spacing-8) * -1);--channels-blue: var(--io-blue-700);--channels-emerald: #31b573;--channels-green: #0a7c3e;--channels-indigo: #3349c2;--channels-magenta: #cf0f70;--channels-orange: #f99f39;--channels-red: var(--io-red-700);--channels-text: var(--text-states-active);--channels-text-inverted: var(--text-states-active-inverted);--channels-yellow: #f6bf27}
 .dark{--io-ace-active-line: var(--io-neutrals-850);--io-ace-object: var(--io-blue-300);--base-border-default: var(--io-neutrals-500);--base-border-hover: var(--io-neutrals-300);--base-border-active: var(--io-neutrals-100);--base-border-primary: var(--io-blue-700);--base-border-error: var(--io-red-700);--base-border-disabled: var(--io-neutrals-850);--base-border-panel-disabled: var(--io-neutrals-800);--base-border-separator: var(--io-neutrals-650);--base-border-focus-state-color: var(--io-neutrals-600);--base-form-background: var(--io-neutrals-750);--base-form-background-hover: var(--io-neutrals-750);--base-form-background-active: var(--io-neutrals-800);--base-form-background-disabled: var(--io-neutrals-900);--base-form-border-default: var(--io-neutrals-750);--base-form-border-hover: var(--io-neutrals-700);--base-form-border-active: var(--io-neutrals-700);--base-form-border-disabled: var(--base-border-disabled);--base-form-border-error: var(--base-border-error);--base-panel-background: var(--io-neutrals-900);--base-panel-background-lighter: var(--io-neutrals-850);--base-panel-background-header: var(--io-neutrals-800);--base-panel-border: var(--io-neutrals-800);--base-panel-border-separator: var(--io-neutrals-750);--base-panel-outer-border: var(--io-neutrals-650);--base-panel-form-background-disabled: var(--io-neutrals-850);--base-panel-form-border-disabled: var(--base-border-panel-disabled);--base-scroll-background: var(--io-neutrals-700);--base-scroll-background-hover: var(--io-neutrals-650);--base-surface-frame-background: var(--io-neutrals-1000);--base-surface-frame-border: var(--io-neutrals-700);--resizer-background: var(--io-neutrals-700);--resizer-background-hover: var(--io-neutrals-650);--resizer-background-active: var(--io-neutrals-500);--text-inactive-tertiary: var(--io-neutrals-500);--text-secondary: var(--io-neutrals-400);--text-states-default: var(--io-neutrals-300);--text-states-hover: var(--io-neutrals-50);--text-states-active: var(--io-neutrals-0);--text-states-active-inverted: var(--io-neutrals-900);--text-states-disabled: var(--io-neutrals-600);--text-states-panel-disabled: var(--io-neutrals-600);--text-severity-error: var(--io-red-700)}
 .light{--io-ace-active-line: var(--io-neutrals-150);--io-ace-object: var(--io-blue-600);--base-border-default: var(--io-neutrals-200);--base-border-hover: var(--io-neutrals-300);--base-border-active: var(--io-neutrals-500);--base-border-primary: var(--io-blue-700);--base-border-error: var(--io-red-700);--base-border-disabled: var(--io-neutrals-100);--base-border-panel-disabled: var(--io-neutrals-100);--base-border-focus-state-color: var(--io-neutrals-400);--base-border-separator: var(--io-neutrals-150);--base-form-background: var(--io-neutrals-50);--base-form-background-hover: var(--io-neutrals-0);--base-form-background-active: var(--io-neutrals-0);--base-form-background-disabled: var(--io-neutrals-50);--base-form-border-default: var(--base-border-default);--base-form-border-hover: var(--base-border-hover);--base-form-border-active: var(--base-border-hover);--base-form-border-disabled: var(--base-border-disabled);--base-form-border-error: var(--base-border-error);--base-panel-background: var(--io-neutrals-25);--base-panel-background-lighter: var(--io-neutrals-50);--base-panel-background-header: var(--io-neutrals-50);--base-panel-border: var(--io-neutrals-200);--base-panel-border-separator: var(--io-neutrals-200);--base-panel-outer-border: var(--io-neutrals-150);--base-panel-form-background-disabled: var(--io-neutrals-50);--base-panel-form-border-disabled: var(--base-border-panel-disabled);--base-scroll-background: var(--io-neutrals-150);--base-scroll-background-hover: var(--io-neutrals-200);--base-surface-frame-background: var(--io-neutrals-0);--base-surface-frame-border: var(--io-neutrals-200);--tabs-border: var(--base-panel-border);--window-tabs-background-active: var(--io-neutrals-100);--window-header-background: #e8e9ed;--workspace-header-background: var(--io-neutrals-100);--workspace-tabs-background-active: var(--io-neutrals-0);--workspace-tabs-background-hover: var(--io-neutrals-50);--workspace-controls-background-active: var(--io-neutrals-100);--workspace-controls-background-hover: var(--io-neutrals-100);--workspace-controls-background-hover-dark: var(--io-neutrals-150);--workspace-controls-color-hover: var(--io-neutrals-100);--severity-inverted-text: var(--text-states-active);--severity-text: var(--text-states-active-inverted);--checkbox-icon-color: var(--text-states-active-inverted);--radio-button-icon-color: var(--text-states-active-inverted);--toggle-icon-color-off: var(--io-neutrals-300);--toggle-icon-color-on: var(--text-states-active-inverted);--icon-background-active: var(--io-neutrals-100);--icon-background-default: var(--io-neutrals-50);--icon-background-hover: var(--io-neutrals-100);--icon-color-hover: var(--io-neutrals-800);--list-item-background-hover: var(--io-neutrals-100);--list-item-background-selected: var(--io-neutrals-100);--list-item-border: var(--io-neutrals-150);--buttons-secondary-background-active: var(--io-neutrals-100);--buttons-secondary-background-default: var(--io-neutrals-50);--buttons-secondary-background-hover: var(--io-neutrals-100);--buttons-primary-text-active: var(--text-states-active-inverted);--buttons-primary-text-hover: var(--text-states-active-inverted);--buttons-primary-text-inactive: var(--text-states-active-inverted);--buttons-danger-text-active: var(--text-states-active-inverted);--buttons-danger-text-hover: var(--text-states-active-inverted);--buttons-danger-text-inactive: var(--text-states-active-inverted);--progress-background-paused: var(--base-border-hover);--pill-background: var(--io-neutrals-150);--pill-border-default: var(--io-neutrals-150);--pill-text-primary: var(--text-states-active-inverted);--pill-text-success: var(--text-states-active-inverted);--pill-text-warning: var(--text-states-active);--pill-text-error: var(--text-states-active-inverted);--badge-background: var(--io-neutrals-100);--badge-text-primary: var(--text-states-active-inverted);--loader-background: radial-gradient(farthest-side, var(--io-neutrals-500) 94%, var(--io-neutrals-100)) center top / var(--spacing-4) var(--spacing-4) no-repeat, conic-gradient(var(--io-neutrals-100) 15%, var(--io-neutrals-500));--resizer-background: var(--io-neutrals-50);--resizer-background-hover: var(--io-neutrals-100);--resizer-background-active: var(--io-neutrals-150);--text-inactive-tertiary: var(--io-neutrals-500);--text-secondary: var(--io-neutrals-400);--text-states-default: var(--io-neutrals-700);--text-states-hover: var(--io-neutrals-950);--text-states-active: var(--io-neutrals-1000);--text-states-active-inverted: var(--io-neutrals-0);--text-states-disabled: var(--io-neutrals-400);--text-states-panel-disabled: var(--io-neutrals-400);--text-severity-error: var(--io-red-700)}
@@ -168,11 +168,11 @@ button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,.i
 .io-control-disabled .io-toggle .slider::after,.io-control-disabled .io-toggle input:checked~.slider::after{color:var(--toggle-text-disabled)}
 label{align-items:center;font-weight:400;color:var(--input-text-inactive);transition-duration:120ms;transition-property:color}
 .io-input,body .jsoneditor-modal select,body .jsoneditor-modal input[type=Number],body .jsoneditor-modal input[type=text],body .jsoneditor-modal input[type=search],body .jsoneditor-modal #query,body .jsoneditor-search input,.io-textarea,body .jsoneditor-modal textarea{flex-grow:1;width:100%;padding:var(--input-vertical-padding) var(--input-horizontal-padding);border:var(--input-border-size) solid var(--base-form-border-default);border-radius:var(--input-border-radius);font-family:var(--io-font-family);font-size:var(--io-font-size);line-height:var(--spacing-14);color:var(--input-text-inactive);background-color:var(--input-background);outline-color:rgba(0,0,0,0);transition-property:border,outline,color}
-.io-input:focus-visible,body .jsoneditor-modal select:focus-visible,body .jsoneditor-modal input[type=Number]:focus-visible,body .jsoneditor-modal input[type=text]:focus-visible,body .jsoneditor-modal input[type=search]:focus-visible,body .jsoneditor-modal #query:focus-visible,body .jsoneditor-search input:focus-visible,.io-textarea:focus-visible,body .jsoneditor-modal textarea:focus-visible{outline-color:var(--base-border-focus-state-color);outline-offset:var(--input-focus-offsets);transition-duration:60ms}
 .io-input::-webkit-search-cancel-button,body .jsoneditor-modal select::-webkit-search-cancel-button,body .jsoneditor-modal input[type=Number]::-webkit-search-cancel-button,body .jsoneditor-modal input[type=text]::-webkit-search-cancel-button,body .jsoneditor-modal input[type=search]::-webkit-search-cancel-button,body .jsoneditor-modal #query::-webkit-search-cancel-button,body .jsoneditor-search input::-webkit-search-cancel-button,.io-textarea::-webkit-search-cancel-button,body .jsoneditor-modal textarea::-webkit-search-cancel-button{display:none}
+.io-input::placeholder,body .jsoneditor-modal select::placeholder,body .jsoneditor-modal input[type=Number]::placeholder,body .jsoneditor-modal input[type=text]::placeholder,body .jsoneditor-modal input[type=search]::placeholder,body .jsoneditor-modal #query::placeholder,body .jsoneditor-search input::placeholder,.io-textarea::placeholder,body .jsoneditor-modal textarea::placeholder{color:var(--input-text-inactive)}
+.io-input:focus-visible,body .jsoneditor-modal select:focus-visible,body .jsoneditor-modal input[type=Number]:focus-visible,body .jsoneditor-modal input[type=text]:focus-visible,body .jsoneditor-modal input[type=search]:focus-visible,body .jsoneditor-modal #query:focus-visible,body .jsoneditor-search input:focus-visible,.io-textarea:focus-visible,body .jsoneditor-modal textarea:focus-visible{outline-color:var(--base-border-focus-state-color);outline-offset:var(--input-focus-offsets);transition-duration:60ms}
 .io-input:active,body .jsoneditor-modal select:active,body .jsoneditor-modal input[type=Number]:active,body .jsoneditor-modal input[type=text]:active,body .jsoneditor-modal input[type=search]:active,body .jsoneditor-modal #query:active,body .jsoneditor-search input:active,.io-textarea:active,body .jsoneditor-modal textarea:active{color:var(--input-text-active)}
 .io-input:hover,body .jsoneditor-modal select:hover,body .jsoneditor-modal input[type=Number]:hover,body .jsoneditor-modal input[type=text]:hover,body .jsoneditor-modal input[type=search]:hover,body .jsoneditor-modal #query:hover,body .jsoneditor-search input:hover,.io-textarea:hover,body .jsoneditor-modal textarea:hover{border-color:var(--base-form-border-hover);color:var(--input-text-hover)}
-.io-input::placeholder,body .jsoneditor-modal select::placeholder,body .jsoneditor-modal input[type=Number]::placeholder,body .jsoneditor-modal input[type=text]::placeholder,body .jsoneditor-modal input[type=search]::placeholder,body .jsoneditor-modal #query::placeholder,body .jsoneditor-search input::placeholder,.io-textarea::placeholder,body .jsoneditor-modal textarea::placeholder{color:var(--input-text-inactive)}
 .io-input:read-only:not(:disabled):hover,body .jsoneditor-modal select:read-only:not(:disabled):hover,body .jsoneditor-modal input[type=Number]:read-only:not(:disabled):hover,body .jsoneditor-modal input[type=text]:read-only:not(:disabled):hover,body .jsoneditor-modal input[type=search]:read-only:not(:disabled):hover,body .jsoneditor-modal #query:read-only:not(:disabled):hover,body .jsoneditor-search input:read-only:not(:disabled):hover,.io-input:read-only:not(:disabled):active,body .jsoneditor-modal select:read-only:not(:disabled):active,body .jsoneditor-modal input[type=Number]:read-only:not(:disabled):active,body .jsoneditor-modal input[type=text]:read-only:not(:disabled):active,body .jsoneditor-modal input[type=search]:read-only:not(:disabled):active,body .jsoneditor-modal #query:read-only:not(:disabled):active,body .jsoneditor-search input:read-only:not(:disabled):active,.io-textarea:read-only:not(:disabled):hover,body .jsoneditor-modal textarea:read-only:not(:disabled):hover,.io-textarea:read-only:not(:disabled):active,body .jsoneditor-modal textarea:read-only:not(:disabled):active{border-color:var(--base-form-border-default);color:var(--input-text-inactive)}
 .io-input:-webkit-autofill,body .jsoneditor-modal select:-webkit-autofill,body .jsoneditor-modal input[type=Number]:-webkit-autofill,body .jsoneditor-modal input[type=text]:-webkit-autofill,body .jsoneditor-modal input[type=search]:-webkit-autofill,body .jsoneditor-modal #query:-webkit-autofill,body .jsoneditor-search input:-webkit-autofill,.io-input:-webkit-autofill:hover .io-input:-webkit-autofill:focus,body .jsoneditor-modal select:-webkit-autofill:hover .io-input:-webkit-autofill:focus,body .jsoneditor-modal input[type=Number]:-webkit-autofill:hover .io-input:-webkit-autofill:focus,body .jsoneditor-modal input[type=text]:-webkit-autofill:hover .io-input:-webkit-autofill:focus,body .jsoneditor-modal input[type=search]:-webkit-autofill:hover .io-input:-webkit-autofill:focus,body .jsoneditor-modal #query:-webkit-autofill:hover .io-input:-webkit-autofill:focus,body .jsoneditor-modal #query:-webkit-autofill:hover select:-webkit-autofill:focus,body .jsoneditor-modal #query:-webkit-autofill:hover input[type=Number]:-webkit-autofill:focus,body .jsoneditor-modal #query:-webkit-autofill:hover input[type=text]:-webkit-autofill:focus,body .jsoneditor-modal #query:-webkit-autofill:hover input[type=search]:-webkit-autofill:focus,body .jsoneditor-search input:-webkit-autofill:hover .io-input:-webkit-autofill:focus,.io-input:-internal-autofill-selected,body .jsoneditor-modal select:-internal-autofill-selected,body .jsoneditor-modal input[type=Number]:-internal-autofill-selected,body .jsoneditor-modal input[type=text]:-internal-autofill-selected,body .jsoneditor-modal input[type=search]:-internal-autofill-selected,body .jsoneditor-modal #query:-internal-autofill-selected,body .jsoneditor-search input:-internal-autofill-selected,.io-textarea:-webkit-autofill,body .jsoneditor-modal textarea:-webkit-autofill,.io-input:-webkit-autofill:hover .io-textarea:-webkit-autofill:focus,body .jsoneditor-modal select:-webkit-autofill:hover .io-textarea:-webkit-autofill:focus,body .jsoneditor-modal input[type=Number]:-webkit-autofill:hover .io-textarea:-webkit-autofill:focus,body .jsoneditor-modal input[type=text]:-webkit-autofill:hover .io-textarea:-webkit-autofill:focus,body .jsoneditor-modal input[type=search]:-webkit-autofill:hover .io-textarea:-webkit-autofill:focus,body .jsoneditor-modal #query:-webkit-autofill:hover .io-textarea:-webkit-autofill:focus,body .jsoneditor-modal #query:-webkit-autofill:hover textarea:-webkit-autofill:focus,body .jsoneditor-search input:-webkit-autofill:hover .io-textarea:-webkit-autofill:focus,.io-textarea:-internal-autofill-selected,body .jsoneditor-modal textarea:-internal-autofill-selected,.io-textarea:-webkit-autofill:hover .io-input:-webkit-autofill:focus,body .jsoneditor-modal textarea:-webkit-autofill:hover .io-input:-webkit-autofill:focus,.io-textarea:-webkit-autofill:hover .io-textarea:-webkit-autofill:focus,body .jsoneditor-modal textarea:-webkit-autofill:hover .io-textarea:-webkit-autofill:focus{box-shadow:inset 0 0 0 var(--spacing-16) var(--input-background);-webkit-text-fill-color:var(--input-text-active)}
 .io-control-checkbox,.io-control-radio,.io-control-toggle{display:flex;flex-shrink:0;align-items:center}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@interopio/groups-ui-react",
-    "version": "4.4.0",
+    "version": "4.5.0-next.0",
     "description": "React library for building a Web Group App for io.Connect Desktop.",
     "keywords": [
         "interop",
@@ -37,8 +37,8 @@
         "overlayscrollbars": "^2.8.3"
     },
     "devDependencies": {
-        "@interopio/components-react": "^4.4.0",
-        "@interopio/theme": "^4.4.0",
+        "@interopio/components-react": "^4.5.0-next.0",
+        "@interopio/theme": "^4.5.0-next.0",
         "@interopio/react-hooks": "^4.4.0"
     },
     "peerDependencies": {
@@ -50,6 +50,7 @@
         "node": ">=10"
     },
     "publishConfig": {
+        "@interopio:registry": "https://registry.npmjs.org",
         "access": "public"
     }
-}
+}