@orangelogic/design-system 2.47.0 → 2.48.0

package/library/components/video.js

@@ -1,10 +1,10 @@
 import { a as Ab, c as ps, g as kn } from "../chunks/_commonjsHelpers.ByX85dGu.js";
-import { r as Tb, C as Eb, R as wb } from "../chunks/image.B0y0mQS7.js";
+import { r as Tb, C as Eb, R as wb } from "../chunks/image.qBD2O7kA.js";
 import Sb from "./resize-observer.js";
 import { c as Cb } from "../chunks/component.styles.DtouHn2g.js";
 import { b as Mb } from "../chunks/browser.Va59Ix3P.js";
 import { i as Db, n as ki, x as Kc, c as Pb } from "../chunks/custom-element.fmLrnDZr.js";
-import { L as Lb } from "../chunks/i18n.D33BKrRs.js";
+import { L as Lb } from "../chunks/i18n.CXUGdxzx.js";
 import { w as Bn } from "../chunks/watch.BCJD77bD.js";
 import { r as Fn } from "../chunks/state.Dt9F_SuS.js";
 import { e as ao } from "../chunks/query.BBf1UFkC.js";

package/library/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@orangelogic/design-system",
   "type": "module",
-  "version": "2.47.0",
+  "version": "2.48.0",
   "license": "UNLICENSED",
   "types": "library/types.d.ts",
   "scripts": {

package/library/packages/atoms/src/components/divider/divider.d.ts

@@ -5,6 +5,8 @@ import { CSSResultGroup } from 'lit';
  * @summary Dividers are used to visually separate or group elements.
  *
  * @cssproperty --color - The color of the divider.
+ * @cssproperty --label-color - The color of the label.
+ * @cssproperty --label-font-size - The font size of the label.
  * @cssproperty --width - The width of the divider.
  * @cssproperty --spacing - The spacing of the divider.
  * @cssproperty --border-style - The style of the divider.
@@ -15,6 +17,9 @@ export default class CxDivider extends CortexElement {
     static readonly styles: CSSResultGroup;
     /** Draws the divider in a vertical orientation. */
     vertical: boolean;
+    /** Label above the divider. If not filled, the label will not be rendered.
+     *  This attribute is only available for the horizontal orientation. */
+    label: string;
     /**
      * Applies component's padding over the spacing custom property.
      */
@@ -24,6 +29,7 @@ export default class CxDivider extends CortexElement {
      * Applies the direction of the divider
      */
     handleVerticalChange(): void;
+    render(): import('lit').TemplateResult<1> | undefined;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/library/packages/atoms/src/components/format-time/format-time.d.ts

@@ -0,0 +1,40 @@
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { DisplayStyle, FormatTimeInputUnit, UnitsFormat } from '../../../../types/src/time';
+import { CSSResultGroup } from 'lit';
+
+export declare function fromDurationAttribute(value: string | null): number | null;
+export declare function toDurationAttribute(value: number | null): string | null;
+/**
+ * @summary Formats a duration in milliseconds or seconds.
+ * @description Does not compute time from dates, only formats a given millisecond duration.
+
+ * @cssproperty --cx-format-time-color - Controls the text color of the formatted output.
+ * @cssproperty --cx-format-time-font-size - Controls the font size of the formatted output.
+ * @cssproperty --cx-format-time-font-weight - Controls the font weight of the formatted output.
+ */
+export default class CxFormatTime extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {};
+    private readonly localize;
+    /** Duration value. When null/undefined/empty, placeholder is shown. */
+    duration: number | null;
+    /** Text shown when duration is null or undefined. */
+    placeholder: string;
+    /** Which units to include. Default "d-h-m" (days, hours, minutes). */
+    unitsFormat: UnitsFormat;
+    /** Locale used to format the duration output. Defaults "en" */
+    locale: string;
+    /** Display style used to format the duration output. Defaults to "long". */
+    displayStyle: DisplayStyle;
+    /** Input unit: "ms" (default) or "s". Value is converted to ms internally. */
+    inputUnit: FormatTimeInputUnit;
+    formattedDuration: string;
+    updateFormattedDuration(): void;
+    private normalizeDurationToMilliseconds;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-format-time': CxFormatTime;
+    }
+}

package/library/packages/atoms/src/components/format-time/format-time.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').CSSResult;
+export default _default;

package/library/packages/atoms/src/components/icon/custom-icons/amazon_s3.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    svg: import('lit').TemplateResult<1>;
+};
+export default _default;

package/library/packages/atoms/src/components/icon/custom-icons/orangelogic.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    svg: import('lit').TemplateResult<1>;
+};
+export default _default;

package/library/packages/atoms/src/components/tab-group/tab-group.d.ts

@@ -77,6 +77,7 @@ export default class CxTabGroup extends CortexElement {
     paginationCount: number;
     activePaginationIndex: number;
     tabWidth: number;
+    clampedTabsPerPage: number;
     /** The placement of the tabs. */
     placement: TabGroupPlacement;
     /**
@@ -104,6 +105,8 @@ export default class CxTabGroup extends CortexElement {
      * The number of tabs per page. This applies when overflow variant is pagination.
      */
     tabsPerPage: number;
+    /** The minimum width of the tab. */
+    minTabWidth: number;
     /** Minimum clamp width - The minimum width of the tab not to be clamped */
     private static readonly MIN_CLAMP_WIDTH;
     connectedCallback(): void;
@@ -177,7 +180,6 @@ export default class CxTabGroup extends CortexElement {
     handleAbsoluteHeightChange(): void;
     handleTabAlignmentChange(): void;
     handleTabsPerPageChange(): Promise<void>;
-    handleActivePaginationIndexChange(): void;
     /**
      * Setup ResizeObserver for all panels when keepHiddenHeight is enabled
      */

package/library/packages/atoms/src/components/table/table.d.ts

@@ -2,6 +2,7 @@ import { default as CxCheckbox } from '../checkbox/checkbox.ts';
 import { default as CxIconButton } from '../icon-button/icon-button.ts';
 import { default as CxLineClamp } from '../line-clamp/line-clamp.ts';
 import { default as CxSpace } from '../space/space.ts';
+import { default as CxSpinner } from '../spinner/spinner.ts';
 import { default as CxTag } from '../tag/tag.ts';
 import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
 import { PaginationCounter } from '../../../../types/src/pagination';
@@ -16,9 +17,9 @@ import { RowComponent, TabulatorFull as Tabulator } from './tabulator-tables';
  * @csspart table - The table element.
  *
  * @cssproperty [--width=100%] - The width of the table.
- * @cssproperty [--height=100%] - The height of the table. By setting a height on the table, the Virtual DOM is enabled and the render speed is improved.
- * @cssproperty [--min-height=200px] - The minimum height of the table.
- * @cssproperty [--max-height=100%] - The maximum height of the table.
+ * @cssproperty [--table-height=auto] - The height of the table. By setting a height on the table, the Virtual DOM is enabled and the render speed is improved.
+ * @cssproperty [--table-min-height=200px] - The minimum height of the table.
+ * @cssproperty [--table-max-height=auto] - The maximum height of the table.
  * @cssproperty [--color=var(--cx-color-neutral-700)] - The color of the table.
  * @cssproperty [--background-color=var(--cx-color-neutral-400)] - The background color of the table.
  * @cssproperty [--border-width=var(--cx-input-border-width)] - The width of the table border.
@@ -62,6 +63,7 @@ export default class CxTable extends CortexElement {
         'cx-icon-button': typeof CxIconButton;
         'cx-line-clamp': typeof CxLineClamp;
         'cx-space': typeof CxSpace;
+        'cx-spinner': typeof CxSpinner;
         'cx-table-row-actions': typeof CxTableRowActions;
         'cx-table-toolbar': typeof CxTableToolbar;
         'cx-tag': typeof CxTag;
@@ -612,6 +614,7 @@ export default class CxTable extends CortexElement {
     handleUseOverlayScrollbarChange(): void;
     constructor();
     runFirstUpdated(): void;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     private initOverlayScrollbars;
     private readonly checkHorizontalOverflow;

package/library/packages/atoms/src/components/table/tabulator-tables/core/RowManager.d.ts

@@ -28,7 +28,12 @@ export default class RowManager extends CoreFeature implements IRowManager {
     placeholderContents: HTMLElement | null;
     firstRender: boolean;
     renderMode?: RenderMode;
-    fixedHeight: boolean;
+    /**
+     * True when table has an explicit height (--table-height is set to a non-auto value (e.g. 100%, 500px));
+     * false when height is variable (--table-height is "auto" or unset).
+     * Computed on each read so it stays correct if --table-height is changed dynamically (e.g. via JS or CSS class).
+     */
+    get fixedHeight(): boolean;
     rows: IRow[];
     activeRowsPipeline: IRow[][];
     activeRows: IRow[];
@@ -132,6 +137,14 @@ export default class RowManager extends CoreFeature implements IRowManager {
     _positionPlaceholder(): void;
     styleRow(row: IRow, index: number): void;
     normalizeHeight(force?: boolean): void;
+    /**
+     * Detect whether the table has a fixed (explicit) height.
+     * We read the CSS custom property --table-height (used by the table's height: var(--table-height)), since
+     * getComputedStyle(el).height is always the resolved pixel value, never "auto".
+     * fixedHeight = true: --table-height is set to a non-auto value (e.g. 100%, 500px). Not content-driven.
+     * fixedHeight = false: --table-height is "auto" or unset — content-driven (variable) height.
+     */
+    private detectFixedHeight;
     adjustTableSize(): boolean;
     reinitialize(): void;
     blockRedraw(): void;

package/library/packages/atoms/src/components/table/tabulator-tables/core/Tabulator.d.ts

@@ -103,7 +103,6 @@ declare class Tabulator extends ModuleBinder implements ITabulator {
      * General Public Functions
      */
     redraw(force?: boolean): void;
-    setHeight(height: string | number): void;
     /**
      * Event Bus
      */

package/library/packages/atoms/src/components/table/tabulator-tables/modules/Page/Page.d.ts

@@ -41,6 +41,12 @@ export default class Page extends Module implements IPage {
     createElements(): void;
     generatePageSizeSelectList(): void;
     initializePageCounter(): void;
+    /**
+     * Pagination is mounted on `table.toolbar` (outside Tabulator's root element).
+     * Tabulator.destroy() only clears the table element, so we must detach on destroy
+     * or a full re-init (e.g. paginationSizeSelector change) leaves duplicate cx-pagination nodes.
+     */
+    cleanup(): void;
     initializePaginator(): void;
     initializeProgressive(mode: 'scroll' | 'load'): void;
     trackChanges(): void;

package/library/packages/atoms/src/index.d.ts

@@ -22,6 +22,7 @@ export { default as CxElementClamp } from './components/element-clamp/element-cl
 export { default as CxFormatBytes } from './components/format-bytes/format-bytes';
 export { default as CxFormatDate } from './components/format-date/format-date';
 export { default as CxFormatNumber } from './components/format-number/format-number';
+export { default as CxFormatTime } from './components/format-time/format-time';
 export { default as CxGrid } from './components/grid/grid';
 export { default as CxGridItem } from './components/grid-item/grid-item';
 export { default as CxHeader } from './components/header/header';

package/library/packages/events/src/events.d.ts

@@ -114,7 +114,6 @@ export * from './cx-show';
 export * from './cx-slide-change';
 export * from './cx-start';
 export * from './cx-swatch-add';
-export * from './cx-tab-group-pagination-change';
 export * from './cx-tab-hide';
 export * from './cx-tab-show';
 export * from './cx-table-advanced-search-click';

package/library/packages/molecules/src/timeline/timeline.d.ts

@@ -34,10 +34,12 @@ export default class CxTimeline extends CortexElement {
      * The number of tabs per page. This applies when overflow variant is pagination.
      */
     tabsPerPage: number;
-    private activePaginationIndex;
+    /**
+     * The minimum width of the tab.
+     */
+    minTabWidth: number;
     private handlePreviousClick;
     private handleNextClick;
-    private handlePaginationChange;
     render(): import('lit').TemplateResult<1>;
 }
 declare global {

package/library/packages/organisms/src/content-builder/configs/timeline.d.ts

@@ -3,6 +3,7 @@ import { LocalizeController } from '../../../../utils/src/custom-element/i18n';
 
 type Attributes = {
     data: string;
+    'min-tab-width': string;
     'navigation-arrows': boolean;
     'show-thumbnails': boolean;
     'tabs-per-page': number;

package/library/packages/organisms/src/content-builder/configs-controller.d.ts

@@ -202,6 +202,7 @@ export default class ConfigsController {
         'data-constraints': boolean;
     }>[] | import('../../../types/src/content-builder').PropertyConfig<{
         data: string;
+        'min-tab-width': string;
         'navigation-arrows': boolean;
         'show-thumbnails': boolean;
         'tabs-per-page': number;
@@ -377,6 +378,7 @@ export default class ConfigsController {
         'data-constraints': boolean;
     } | {
         data: string;
+        'min-tab-width': string;
         'navigation-arrows': boolean;
         'show-thumbnails': boolean;
         'tabs-per-page': number;

package/library/packages/types/src/table.d.ts

@@ -105,7 +105,6 @@ export interface ITabulator extends IModuleBinder {
     moveColumn(from: string, to: string, after?: boolean): void;
     scrollToColumn(field: ColumnLookup, position?: ScrollToColumnPosition, ifVisible?: boolean): Promise<void>;
     redraw(force?: boolean): void;
-    setHeight(height: string | number): void;
     on(key: string, callback: (...args: any[]) => any): void;
     off(key: string, callback?: (...args: any[]) => any): void;
     dispatchEvent(...args: any[]): any;
@@ -1651,12 +1650,6 @@ export interface OptionsColumns {
     resizableColumnFit?: boolean;
 }
 export interface OptionsGeneral {
-    /** Sets the height of the containing element, can be set to any valid height css value. If set to false (the default), the height of the table will resize to fit the table data. */
-    height?: string | number | false;
-    /** Can be set to any valid CSS value. By setting this you can allow your table to expand to fit the data, but not overflow its parent element. When there are too many rows to fit in the available space, the vertical scroll bar will be shown. This has the added benefit of improving load times on larger tables */
-    maxHeight?: string | number | boolean;
-    /** With a variable table height you can set the minimum height of the table either defined in the min-height CSS property for the element or set it using the minHeight option in the table constructor, this can be set to any valid CSS value. */
-    minHeight?: string | number | boolean;
     renderVertical?: RenderMode;
     renderHorizontal?: RenderMode;
     rowHeight?: number;

package/library/packages/types/src/time.d.ts

@@ -0,0 +1,44 @@
+export declare enum FormatTimeInputUnit {
+    Millisecond = "ms",
+    Second = "s"
+}
+export declare enum FormatTimeDurationField {
+    Days = "days",
+    Hours = "hours",
+    Minutes = "minutes",
+    Seconds = "seconds"
+}
+export declare enum UnitsFormat {
+    Day = "d",
+    DayHour = "d-h",
+    DayHourMinute = "d-h-m",
+    DayHourMinuteSecond = "d-h-m-s",
+    Hour = "h",
+    HourMinute = "h-m",
+    HourMinuteSecond = "h-m-s",
+    Minute = "m",
+    MinuteSecond = "m-s",
+    Second = "s"
+}
+export declare enum DisplayStyle {
+    Digital = "digital",
+    Long = "long",
+    Narrow = "narrow",
+    Short = "short"
+}
+export declare enum Locale {
+    English = "en"
+}
+export type DurationParts = Partial<Record<FormatTimeDurationField, number>>;
+export interface UnitConfig {
+    key: FormatTimeDurationField;
+    longPlural: string;
+    longSingular: string;
+    narrow: string;
+    short: string;
+}
+export declare const UNITS_CONFIG: UnitConfig[];
+export declare const SECOND_IN_MS = 1000;
+export declare const MINUTE_IN_MS: number;
+export declare const HOUR_IN_MS: number;
+export declare const DAY_IN_MS: number;

package/library/packages/utils/src/custom-element/i18n.d.ts

@@ -432,6 +432,7 @@ export interface Translation extends DefaultTranslation {
     ok: string;
     onHover: string;
     onThisPage: string;
+    ongoing: string;
     oopsSomethingWentWrong: string;
     opacity: string;
     openALink: string;

package/library/packages/utils/src/number/number.d.ts

@@ -30,3 +30,4 @@ export declare function extractValueAndUnit(value: string): {
     unit: string;
     value: number;
 } | null;
+export declare function formatNumberWithGrouping(value: number): string;

package/library/packages/utils/src/time/index.d.ts

@@ -0,0 +1 @@
+export * from './time';

package/library/packages/utils/src/time/time.d.ts

@@ -0,0 +1,11 @@
+import { DisplayStyle, DurationParts, FormatTimeDurationField, UnitsFormat } from '../../../types/src/time';
+
+export declare function formatWithIntlDurationFormat(durationParts: Partial<Record<FormatTimeDurationField.Days | FormatTimeDurationField.Hours | FormatTimeDurationField.Minutes | FormatTimeDurationField.Seconds, number>>, style: DisplayStyle, locale?: string): string;
+export declare function getDurationPartsByUnitsFormat(durationInMs: number, unitsFormat: UnitsFormat): Partial<{
+    days: number;
+    hours: number;
+    minutes: number;
+    seconds: number;
+}>;
+export declare function clearZeroDurationParts(durationParts: DurationParts): DurationParts;
+export declare function formatDurationPartsManually(durationParts: DurationParts, style: DisplayStyle): string;

package/library/react-web-component.d.ts

@@ -1,7 +1,7 @@
  /* eslint-disable */
               import { HTMLAttributes, DetailedHTMLProps } from 'react';
               
-          import { CxIcon, CxSpinner, CxIconButton, CxAlert, CxAnimatedImage, CxAnimation, CxAvatar, CxBadge, CxBreadcrumbItem, CxBreadcrumb, CxPopup, CxMenuItem, CxInput, CxMenu, CxTextarea, CxDropdown, CxButton, CxButtonGroup, CxCard, CxCheckbox, CxVisuallyHidden, CxColorPicker, CxTooltip, CxCopyButton, CxDetails, CxDivider, CxDialog, CxDotPagination, CxDotStatus, CxDrawer, CxElementClamp, CxFormatBytes, CxFormatDate, CxFormatNumber, CxGrid, CxGridItem, CxHeader, CxHubConnection, CxIframe, CxResizeObserver, CxSkeleton, CxSpace, CxImage, CxImageComparer, CxInclude, CxInputGroup, CxLineClamp, CxMarkdown, CxMenuLabel, CxMenuSection, CxMutationObserver, CxOption, CxTypography, CxTag, CxSelect, CxPagination, CxProgressBar, CxProgressRing, CxQrCode, CxRadio, CxRadioButton, CxRadioCard, CxRadioGroup, CxRange, CxRating, CxRelativeTime, CxSplitPanel, CxStep, CxStepper, CxSwitch, CxTab, CxTabPanel, CxTabGroup, CxTable, CxTimecode, CxTreeItem, CxTree, CxVideo, CxSidebarLayout, Cx3DViewer, CxAssetDataDisplay, CxAssetPicker, CxBicolorPicker, CxBorderInputGroup, CxColorSwatch, CxConfirmPopover, CxCornerPositionInputGroup, CxCropper, CxDashboardIframe, CxDataTabGroup, CxDetailsGroup, CxDownloadFormatPicker, CxDynamicSelect, CxFolderSelect, CxGraphView, CxIconPicker, CxListEditor, CxMasonry, CxPaddingInputGroup, CxPageOutline, CxPositionPicker, CxSearchBox, CxShadowInputGroup, CxShareOptionList, CxSidebar, CxSizeInputGroup, CxStepperWizard, CxStorybook, CxTimeline, CxTypeface, CxAssetLinkFormat, CxBentoGrid, CxCarousel, CxChatbot, CxClusterManagement, CxColorSwatchGroup, CxComment, CxFontKit, CxGallery, CxColumn, CxColumnGroup, CxText, CxRteCodeBlockToolbar, CxContentBuilder, CxDownloader, CxFileOnDemand, CxMultiSelect, CxTemplateSwitcher, CxTextToSpeech, CxVideoChaptersManager, CxVideoEditor, CxTemplateManager } from './apps/cortex/src/types';
+          import { CxIcon, CxSpinner, CxIconButton, CxAlert, CxAnimatedImage, CxAnimation, CxAvatar, CxBadge, CxBreadcrumbItem, CxBreadcrumb, CxPopup, CxMenuItem, CxInput, CxMenu, CxTextarea, CxDropdown, CxButton, CxButtonGroup, CxCard, CxCheckbox, CxVisuallyHidden, CxColorPicker, CxTooltip, CxCopyButton, CxDetails, CxDivider, CxDialog, CxDotPagination, CxDotStatus, CxDrawer, CxElementClamp, CxFormatBytes, CxFormatDate, CxFormatNumber, CxFormatTime, CxGrid, CxGridItem, CxHeader, CxHubConnection, CxIframe, CxResizeObserver, CxSkeleton, CxSpace, CxImage, CxImageComparer, CxInclude, CxInputGroup, CxLineClamp, CxMarkdown, CxMenuLabel, CxMenuSection, CxMutationObserver, CxOption, CxTypography, CxTag, CxSelect, CxPagination, CxProgressBar, CxProgressRing, CxQrCode, CxRadio, CxRadioButton, CxRadioCard, CxRadioGroup, CxRange, CxRating, CxRelativeTime, CxSplitPanel, CxStep, CxStepper, CxSwitch, CxTab, CxTabPanel, CxTabGroup, CxTable, CxTimecode, CxTreeItem, CxTree, CxVideo, CxSidebarLayout, Cx3DViewer, CxAssetDataDisplay, CxAssetPicker, CxBicolorPicker, CxBorderInputGroup, CxColorSwatch, CxConfirmPopover, CxCornerPositionInputGroup, CxCropper, CxDashboardIframe, CxDataTabGroup, CxDetailsGroup, CxDownloadFormatPicker, CxDynamicSelect, CxFolderSelect, CxGraphView, CxIconPicker, CxListEditor, CxMasonry, CxPaddingInputGroup, CxPageOutline, CxPositionPicker, CxSearchBox, CxShadowInputGroup, CxShareOptionList, CxSidebar, CxSizeInputGroup, CxStepperWizard, CxStorybook, CxTimeline, CxTypeface, CxAssetLinkFormat, CxBentoGrid, CxCarousel, CxChatbot, CxClusterManagement, CxColorSwatchGroup, CxComment, CxFontKit, CxGallery, CxColumn, CxColumnGroup, CxText, CxRteCodeBlockToolbar, CxContentBuilder, CxDownloader, CxFileOnDemand, CxMultiSelect, CxTemplateSwitcher, CxTextToSpeech, CxVideoChaptersManager, CxVideoEditor, CxTemplateManager } from './apps/cortex/src/types';
         
               
             export type CxMarkdownRendererObject = any;
@@ -1702,6 +1702,10 @@
           * Draws the divider in a vertical orientation.
         */
         vertical?: boolean;
+        /**
+          * Label above the divider. If not filled, the label will not be rendered. This attribute is only available for the horizontal orientation.
+        */
+        label?: string;
         /**
           * Applies component's padding over the spacing custom property.
         */
@@ -2165,6 +2169,52 @@
         /**
           * 
         */
+        preRender?: boolean;
+            } 
+            /**
+              * Formats a duration in milliseconds or seconds.
+            */
+            interface CxFormatTimeAttributes extends HTMLAttributes<CxFormatTime> {
+              
+        /**
+          * Duration value. When null/undefined/empty, placeholder is shown.
+        */
+        duration?: number;
+        /**
+          * Text shown when duration is null or undefined.
+        */
+        placeholder?: string;
+        /**
+          * Which units to include. Default "d-h-m" (days, hours, minutes).
+        */
+        unitsFormat?: 'd' | 'd-h' | 'd-h-m' | 'd-h-m-s' | 'h' | 'h-m' | 'h-m-s' | 'm' | 'm-s' | 's';
+        /**
+          * Locale used to format the duration output. Defaults "en"
+        */
+        locale?: string;
+        /**
+          * Display style used to format the duration output. Defaults to "long".
+        */
+        displayStyle?: 'digital' | 'long' | 'narrow' | 'short';
+        /**
+          * Input unit: "ms" (default) or "s". Value is converted to ms internally.
+        */
+        inputUnit?: 'ms' | 's';
+        /**
+          * Make localization attributes reactive eslint-disable-next-line lit/no-native-attributes
+        */
+        dir?: string;
+        /**
+          * eslint-disable-next-line lit/no-native-attributes
+        */
+        lang?: string;
+        /**
+          * 
+        */
+        theme?: 'light' | 'dark';
+        /**
+          * 
+        */
         preRender?: boolean;
             } 
             /**
@@ -4112,6 +4162,10 @@
           * The number of tabs per page. This applies when overflow variant is pagination.
         */
         tabsPerPage?: number;
+        /**
+          * The minimum width of the tab.
+        */
+        minTabWidth?: number;
         /**
           * Make localization attributes reactive eslint-disable-next-line lit/no-native-attributes
         */
@@ -6396,6 +6450,10 @@
           * The number of tabs per page. This applies when overflow variant is pagination.
         */
         tabsPerPage?: number;
+        /**
+          * The minimum width of the tab.
+        */
+        minTabWidth?: number;
         /**
           * Make localization attributes reactive eslint-disable-next-line lit/no-native-attributes
         */
@@ -7935,18 +7993,18 @@
         */
         preRender?: boolean;
             }
-              export type CxIconProps = DetailedHTMLProps<CxIconAttributes, CxIcon> & {class?: string};export type CxSpinnerProps = DetailedHTMLProps<CxSpinnerAttributes, CxSpinner> & {class?: string};export type CxIconButtonProps = DetailedHTMLProps<CxIconButtonAttributes, CxIconButton> & {class?: string};export type CxAlertProps = DetailedHTMLProps<CxAlertAttributes, CxAlert> & {class?: string};export type CxAnimatedImageProps = DetailedHTMLProps<CxAnimatedImageAttributes, CxAnimatedImage> & {class?: string};export type CxAnimationProps = DetailedHTMLProps<CxAnimationAttributes, CxAnimation> & {class?: string};export type CxAvatarProps = DetailedHTMLProps<CxAvatarAttributes, CxAvatar> & {class?: string};export type CxBadgeProps = DetailedHTMLProps<CxBadgeAttributes, CxBadge> & {class?: string};export type CxBreadcrumbItemProps = DetailedHTMLProps<CxBreadcrumbItemAttributes, CxBreadcrumbItem> & {class?: string};export type CxBreadcrumbProps = DetailedHTMLProps<CxBreadcrumbAttributes, CxBreadcrumb> & {class?: string};export type CxPopupProps = DetailedHTMLProps<CxPopupAttributes, CxPopup> & {class?: string};export type CxMenuItemProps = DetailedHTMLProps<CxMenuItemAttributes, CxMenuItem> & {class?: string};export type CxInputProps = DetailedHTMLProps<CxInputAttributes, CxInput> & {class?: string};export type CxMenuProps = DetailedHTMLProps<CxMenuAttributes, CxMenu> & {class?: string};export type CxTextareaProps = DetailedHTMLProps<CxTextareaAttributes, CxTextarea> & {class?: string};export type CxDropdownProps = DetailedHTMLProps<CxDropdownAttributes, CxDropdown> & {class?: string};export type CxButtonProps = DetailedHTMLProps<CxButtonAttributes, CxButton> & {class?: string};export type CxButtonGroupProps = DetailedHTMLProps<CxButtonGroupAttributes, CxButtonGroup> & {class?: string};export type CxCardProps = DetailedHTMLProps<CxCardAttributes, CxCard> & {class?: string};export type CxCheckboxProps = DetailedHTMLProps<CxCheckboxAttributes, CxCheckbox> & {class?: string};export type CxVisuallyHiddenProps = DetailedHTMLProps<CxVisuallyHiddenAttributes, CxVisuallyHidden> & {class?: string};export type CxColorPickerProps = DetailedHTMLProps<CxColorPickerAttributes, CxColorPicker> & {class?: string};export type CxTooltipProps = DetailedHTMLProps<CxTooltipAttributes, CxTooltip> & {class?: string};export type CxCopyButtonProps = DetailedHTMLProps<CxCopyButtonAttributes, CxCopyButton> & {class?: string};export type CxDetailsProps = DetailedHTMLProps<CxDetailsAttributes, CxDetails> & {class?: string};export type CxDividerProps = DetailedHTMLProps<CxDividerAttributes, CxDivider> & {class?: string};export type CxDialogProps = DetailedHTMLProps<CxDialogAttributes, CxDialog> & {class?: string};export type CxDotPaginationProps = DetailedHTMLProps<CxDotPaginationAttributes, CxDotPagination> & {class?: string};export type CxDotStatusProps = DetailedHTMLProps<CxDotStatusAttributes, CxDotStatus> & {class?: string};export type CxDrawerProps = DetailedHTMLProps<CxDrawerAttributes, CxDrawer> & {class?: string};export type CxElementClampProps = DetailedHTMLProps<CxElementClampAttributes, CxElementClamp> & {class?: string};export type CxFormatBytesProps = DetailedHTMLProps<CxFormatBytesAttributes, CxFormatBytes> & {class?: string};export type CxFormatDateProps = DetailedHTMLProps<CxFormatDateAttributes, CxFormatDate> & {class?: string};export type CxFormatNumberProps = DetailedHTMLProps<CxFormatNumberAttributes, CxFormatNumber> & {class?: string};export type CxGridProps = DetailedHTMLProps<CxGridAttributes, CxGrid> & {class?: string};export type CxGridItemProps = DetailedHTMLProps<CxGridItemAttributes, CxGridItem> & {class?: string};export type CxHeaderProps = DetailedHTMLProps<CxHeaderAttributes, CxHeader> & {class?: string};export type CxHubConnectionProps = DetailedHTMLProps<CxHubConnectionAttributes, CxHubConnection> & {class?: string};export type CxIframeProps = DetailedHTMLProps<CxIframeAttributes, CxIframe> & {class?: string};export type CxResizeObserverProps = DetailedHTMLProps<CxResizeObserverAttributes, CxResizeObserver> & {class?: string};export type CxSkeletonProps = DetailedHTMLProps<CxSkeletonAttributes, CxSkeleton> & {class?: string};export type CxSpaceProps = DetailedHTMLProps<CxSpaceAttributes, CxSpace> & {class?: string};export type CxImageProps = DetailedHTMLProps<CxImageAttributes, CxImage> & {class?: string};export type CxImageComparerProps = DetailedHTMLProps<CxImageComparerAttributes, CxImageComparer> & {class?: string};export type CxIncludeProps = DetailedHTMLProps<CxIncludeAttributes, CxInclude> & {class?: string};export type CxInputGroupProps = DetailedHTMLProps<CxInputGroupAttributes, CxInputGroup> & {class?: string};export type CxLineClampProps = DetailedHTMLProps<CxLineClampAttributes, CxLineClamp> & {class?: string};export type CxMarkdownProps = DetailedHTMLProps<CxMarkdownAttributes, CxMarkdown> & {class?: string};export type CxMenuLabelProps = DetailedHTMLProps<CxMenuLabelAttributes, CxMenuLabel> & {class?: string};export type CxMenuSectionProps = DetailedHTMLProps<CxMenuSectionAttributes, CxMenuSection> & {class?: string};export type CxMutationObserverProps = DetailedHTMLProps<CxMutationObserverAttributes, CxMutationObserver> & {class?: string};export type CxOptionProps = DetailedHTMLProps<CxOptionAttributes, CxOption> & {class?: string};export type CxTypographyProps = DetailedHTMLProps<CxTypographyAttributes, CxTypography> & {class?: string};export type CxTagProps = DetailedHTMLProps<CxTagAttributes, CxTag> & {class?: string};export type CxSelectProps = DetailedHTMLProps<CxSelectAttributes, CxSelect> & {class?: string};export type CxPaginationProps = DetailedHTMLProps<CxPaginationAttributes, CxPagination> & {class?: string};export type CxProgressBarProps = DetailedHTMLProps<CxProgressBarAttributes, CxProgressBar> & {class?: string};export type CxProgressRingProps = DetailedHTMLProps<CxProgressRingAttributes, CxProgressRing> & {class?: string};export type CxQrCodeProps = DetailedHTMLProps<CxQrCodeAttributes, CxQrCode> & {class?: string};export type CxRadioProps = DetailedHTMLProps<CxRadioAttributes, CxRadio> & {class?: string};export type CxRadioButtonProps = DetailedHTMLProps<CxRadioButtonAttributes, CxRadioButton> & {class?: string};export type CxRadioCardProps = DetailedHTMLProps<CxRadioCardAttributes, CxRadioCard> & {class?: string};export type CxRadioGroupProps = DetailedHTMLProps<CxRadioGroupAttributes, CxRadioGroup> & {class?: string};export type CxRangeProps = DetailedHTMLProps<CxRangeAttributes, CxRange> & {class?: string};export type CxRatingProps = DetailedHTMLProps<CxRatingAttributes, CxRating> & {class?: string};export type CxRelativeTimeProps = DetailedHTMLProps<CxRelativeTimeAttributes, CxRelativeTime> & {class?: string};export type CxSplitPanelProps = DetailedHTMLProps<CxSplitPanelAttributes, CxSplitPanel> & {class?: string};export type CxStepProps = DetailedHTMLProps<CxStepAttributes, CxStep> & {class?: string};export type CxStepperProps = DetailedHTMLProps<CxStepperAttributes, CxStepper> & {class?: string};export type CxSwitchProps = DetailedHTMLProps<CxSwitchAttributes, CxSwitch> & {class?: string};export type CxTabProps = DetailedHTMLProps<CxTabAttributes, CxTab> & {class?: string};export type CxTabPanelProps = DetailedHTMLProps<CxTabPanelAttributes, CxTabPanel> & {class?: string};export type CxTabGroupProps = DetailedHTMLProps<CxTabGroupAttributes, CxTabGroup> & {class?: string};export type CxTableProps = DetailedHTMLProps<CxTableAttributes, CxTable> & {class?: string};export type CxTimecodeProps = DetailedHTMLProps<CxTimecodeAttributes, CxTimecode> & {class?: string};export type CxTreeItemProps = DetailedHTMLProps<CxTreeItemAttributes, CxTreeItem> & {class?: string};export type CxTreeProps = DetailedHTMLProps<CxTreeAttributes, CxTree> & {class?: string};export type CxVideoProps = DetailedHTMLProps<CxVideoAttributes, CxVideo> & {class?: string};export type CxSidebarLayoutProps = DetailedHTMLProps<CxSidebarLayoutAttributes, CxSidebarLayout> & {class?: string};export type Cx3DViewerProps = DetailedHTMLProps<Cx3DViewerAttributes, Cx3DViewer> & {class?: string};export type CxAssetDataDisplayProps = DetailedHTMLProps<CxAssetDataDisplayAttributes, CxAssetDataDisplay> & {class?: string};export type CxAssetPickerProps = DetailedHTMLProps<CxAssetPickerAttributes, CxAssetPicker> & {class?: string};export type CxBicolorPickerProps = DetailedHTMLProps<CxBicolorPickerAttributes, CxBicolorPicker> & {class?: string};export type CxBorderInputGroupProps = DetailedHTMLProps<CxBorderInputGroupAttributes, CxBorderInputGroup> & {class?: string};export type CxColorSwatchProps = DetailedHTMLProps<CxColorSwatchAttributes, CxColorSwatch> & {class?: string};export type CxConfirmPopoverProps = DetailedHTMLProps<CxConfirmPopoverAttributes, CxConfirmPopover> & {class?: string};export type CxCornerPositionInputGroupProps = DetailedHTMLProps<CxCornerPositionInputGroupAttributes, CxCornerPositionInputGroup> & {class?: string};export type CxCropperProps = DetailedHTMLProps<CxCropperAttributes, CxCropper> & {class?: string};export type CxDashboardIframeProps = DetailedHTMLProps<CxDashboardIframeAttributes, CxDashboardIframe> & {class?: string};export type CxDataTabGroupProps = DetailedHTMLProps<CxDataTabGroupAttributes, CxDataTabGroup> & {class?: string};export type CxDetailsGroupProps = DetailedHTMLProps<CxDetailsGroupAttributes, CxDetailsGroup> & {class?: string};export type CxDownloadFormatPickerProps = DetailedHTMLProps<CxDownloadFormatPickerAttributes, CxDownloadFormatPicker> & {class?: string};export type CxDynamicSelectProps = DetailedHTMLProps<CxDynamicSelectAttributes, CxDynamicSelect> & {class?: string};export type CxFolderSelectProps = DetailedHTMLProps<CxFolderSelectAttributes, CxFolderSelect> & {class?: string};export type CxGraphViewProps = DetailedHTMLProps<CxGraphViewAttributes, CxGraphView> & {class?: string};export type CxIconPickerProps = DetailedHTMLProps<CxIconPickerAttributes, CxIconPicker> & {class?: string};export type CxListEditorProps = DetailedHTMLProps<CxListEditorAttributes, CxListEditor> & {class?: string};export type CxMasonryProps = DetailedHTMLProps<CxMasonryAttributes, CxMasonry> & {class?: string};export type CxPaddingInputGroupProps = DetailedHTMLProps<CxPaddingInputGroupAttributes, CxPaddingInputGroup> & {class?: string};export type CxPageOutlineProps = DetailedHTMLProps<CxPageOutlineAttributes, CxPageOutline> & {class?: string};export type CxPositionPickerProps = DetailedHTMLProps<CxPositionPickerAttributes, CxPositionPicker> & {class?: string};export type CxSearchBoxProps = DetailedHTMLProps<CxSearchBoxAttributes, CxSearchBox> & {class?: string};export type CxShadowInputGroupProps = DetailedHTMLProps<CxShadowInputGroupAttributes, CxShadowInputGroup> & {class?: string};export type CxShareOptionListProps = DetailedHTMLProps<CxShareOptionListAttributes, CxShareOptionList> & {class?: string};export type CxSidebarProps = DetailedHTMLProps<CxSidebarAttributes, CxSidebar> & {class?: string};export type CxSizeInputGroupProps = DetailedHTMLProps<CxSizeInputGroupAttributes, CxSizeInputGroup> & {class?: string};export type CxStepperWizardProps = DetailedHTMLProps<CxStepperWizardAttributes, CxStepperWizard> & {class?: string};export type CxStorybookProps = DetailedHTMLProps<CxStorybookAttributes, CxStorybook> & {class?: string};export type CxTimelineProps = DetailedHTMLProps<CxTimelineAttributes, CxTimeline> & {class?: string};export type CxTypefaceProps = DetailedHTMLProps<CxTypefaceAttributes, CxTypeface> & {class?: string};export type CxAssetLinkFormatProps = DetailedHTMLProps<CxAssetLinkFormatAttributes, CxAssetLinkFormat> & {class?: string};export type CxBentoGridProps = DetailedHTMLProps<CxBentoGridAttributes, CxBentoGrid> & {class?: string};export type CxCarouselProps = DetailedHTMLProps<CxCarouselAttributes, CxCarousel> & {class?: string};export type CxChatbotProps = DetailedHTMLProps<CxChatbotAttributes, CxChatbot> & {class?: string};export type CxClusterManagementProps = DetailedHTMLProps<CxClusterManagementAttributes, CxClusterManagement> & {class?: string};export type CxColorSwatchGroupProps = DetailedHTMLProps<CxColorSwatchGroupAttributes, CxColorSwatchGroup> & {class?: string};export type CxCommentProps = DetailedHTMLProps<CxCommentAttributes, CxComment> & {class?: string};export type CxFontKitProps = DetailedHTMLProps<CxFontKitAttributes, CxFontKit> & {class?: string};export type CxGalleryProps = DetailedHTMLProps<CxGalleryAttributes, CxGallery> & {class?: string};export type CxColumnProps = DetailedHTMLProps<CxColumnAttributes, CxColumn> & {class?: string};export type CxColumnGroupProps = DetailedHTMLProps<CxColumnGroupAttributes, CxColumnGroup> & {class?: string};export type CxTextProps = DetailedHTMLProps<CxTextAttributes, CxText> & {class?: string};export type CxRteCodeBlockToolbarProps = DetailedHTMLProps<CxRteCodeBlockToolbarAttributes, CxRteCodeBlockToolbar> & {class?: string};export type CxContentBuilderProps = DetailedHTMLProps<CxContentBuilderAttributes, CxContentBuilder> & {class?: string};export type CxDownloaderProps = DetailedHTMLProps<CxDownloaderAttributes, CxDownloader> & {class?: string};export type CxFileOnDemandProps = DetailedHTMLProps<CxFileOnDemandAttributes, CxFileOnDemand> & {class?: string};export type CxMultiSelectProps = DetailedHTMLProps<CxMultiSelectAttributes, CxMultiSelect> & {class?: string};export type CxTemplateSwitcherProps = DetailedHTMLProps<CxTemplateSwitcherAttributes, CxTemplateSwitcher> & {class?: string};export type CxTextToSpeechProps = DetailedHTMLProps<CxTextToSpeechAttributes, CxTextToSpeech> & {class?: string};export type CxVideoChaptersManagerProps = DetailedHTMLProps<CxVideoChaptersManagerAttributes, CxVideoChaptersManager> & {class?: string};export type CxVideoEditorProps = DetailedHTMLProps<CxVideoEditorAttributes, CxVideoEditor> & {class?: string};export type CxTemplateManagerProps = DetailedHTMLProps<CxTemplateManagerAttributes, CxTemplateManager> & {class?: string};
+              export type CxIconProps = DetailedHTMLProps<CxIconAttributes, CxIcon> & {class?: string};export type CxSpinnerProps = DetailedHTMLProps<CxSpinnerAttributes, CxSpinner> & {class?: string};export type CxIconButtonProps = DetailedHTMLProps<CxIconButtonAttributes, CxIconButton> & {class?: string};export type CxAlertProps = DetailedHTMLProps<CxAlertAttributes, CxAlert> & {class?: string};export type CxAnimatedImageProps = DetailedHTMLProps<CxAnimatedImageAttributes, CxAnimatedImage> & {class?: string};export type CxAnimationProps = DetailedHTMLProps<CxAnimationAttributes, CxAnimation> & {class?: string};export type CxAvatarProps = DetailedHTMLProps<CxAvatarAttributes, CxAvatar> & {class?: string};export type CxBadgeProps = DetailedHTMLProps<CxBadgeAttributes, CxBadge> & {class?: string};export type CxBreadcrumbItemProps = DetailedHTMLProps<CxBreadcrumbItemAttributes, CxBreadcrumbItem> & {class?: string};export type CxBreadcrumbProps = DetailedHTMLProps<CxBreadcrumbAttributes, CxBreadcrumb> & {class?: string};export type CxPopupProps = DetailedHTMLProps<CxPopupAttributes, CxPopup> & {class?: string};export type CxMenuItemProps = DetailedHTMLProps<CxMenuItemAttributes, CxMenuItem> & {class?: string};export type CxInputProps = DetailedHTMLProps<CxInputAttributes, CxInput> & {class?: string};export type CxMenuProps = DetailedHTMLProps<CxMenuAttributes, CxMenu> & {class?: string};export type CxTextareaProps = DetailedHTMLProps<CxTextareaAttributes, CxTextarea> & {class?: string};export type CxDropdownProps = DetailedHTMLProps<CxDropdownAttributes, CxDropdown> & {class?: string};export type CxButtonProps = DetailedHTMLProps<CxButtonAttributes, CxButton> & {class?: string};export type CxButtonGroupProps = DetailedHTMLProps<CxButtonGroupAttributes, CxButtonGroup> & {class?: string};export type CxCardProps = DetailedHTMLProps<CxCardAttributes, CxCard> & {class?: string};export type CxCheckboxProps = DetailedHTMLProps<CxCheckboxAttributes, CxCheckbox> & {class?: string};export type CxVisuallyHiddenProps = DetailedHTMLProps<CxVisuallyHiddenAttributes, CxVisuallyHidden> & {class?: string};export type CxColorPickerProps = DetailedHTMLProps<CxColorPickerAttributes, CxColorPicker> & {class?: string};export type CxTooltipProps = DetailedHTMLProps<CxTooltipAttributes, CxTooltip> & {class?: string};export type CxCopyButtonProps = DetailedHTMLProps<CxCopyButtonAttributes, CxCopyButton> & {class?: string};export type CxDetailsProps = DetailedHTMLProps<CxDetailsAttributes, CxDetails> & {class?: string};export type CxDividerProps = DetailedHTMLProps<CxDividerAttributes, CxDivider> & {class?: string};export type CxDialogProps = DetailedHTMLProps<CxDialogAttributes, CxDialog> & {class?: string};export type CxDotPaginationProps = DetailedHTMLProps<CxDotPaginationAttributes, CxDotPagination> & {class?: string};export type CxDotStatusProps = DetailedHTMLProps<CxDotStatusAttributes, CxDotStatus> & {class?: string};export type CxDrawerProps = DetailedHTMLProps<CxDrawerAttributes, CxDrawer> & {class?: string};export type CxElementClampProps = DetailedHTMLProps<CxElementClampAttributes, CxElementClamp> & {class?: string};export type CxFormatBytesProps = DetailedHTMLProps<CxFormatBytesAttributes, CxFormatBytes> & {class?: string};export type CxFormatDateProps = DetailedHTMLProps<CxFormatDateAttributes, CxFormatDate> & {class?: string};export type CxFormatNumberProps = DetailedHTMLProps<CxFormatNumberAttributes, CxFormatNumber> & {class?: string};export type CxFormatTimeProps = DetailedHTMLProps<CxFormatTimeAttributes, CxFormatTime> & {class?: string};export type CxGridProps = DetailedHTMLProps<CxGridAttributes, CxGrid> & {class?: string};export type CxGridItemProps = DetailedHTMLProps<CxGridItemAttributes, CxGridItem> & {class?: string};export type CxHeaderProps = DetailedHTMLProps<CxHeaderAttributes, CxHeader> & {class?: string};export type CxHubConnectionProps = DetailedHTMLProps<CxHubConnectionAttributes, CxHubConnection> & {class?: string};export type CxIframeProps = DetailedHTMLProps<CxIframeAttributes, CxIframe> & {class?: string};export type CxResizeObserverProps = DetailedHTMLProps<CxResizeObserverAttributes, CxResizeObserver> & {class?: string};export type CxSkeletonProps = DetailedHTMLProps<CxSkeletonAttributes, CxSkeleton> & {class?: string};export type CxSpaceProps = DetailedHTMLProps<CxSpaceAttributes, CxSpace> & {class?: string};export type CxImageProps = DetailedHTMLProps<CxImageAttributes, CxImage> & {class?: string};export type CxImageComparerProps = DetailedHTMLProps<CxImageComparerAttributes, CxImageComparer> & {class?: string};export type CxIncludeProps = DetailedHTMLProps<CxIncludeAttributes, CxInclude> & {class?: string};export type CxInputGroupProps = DetailedHTMLProps<CxInputGroupAttributes, CxInputGroup> & {class?: string};export type CxLineClampProps = DetailedHTMLProps<CxLineClampAttributes, CxLineClamp> & {class?: string};export type CxMarkdownProps = DetailedHTMLProps<CxMarkdownAttributes, CxMarkdown> & {class?: string};export type CxMenuLabelProps = DetailedHTMLProps<CxMenuLabelAttributes, CxMenuLabel> & {class?: string};export type CxMenuSectionProps = DetailedHTMLProps<CxMenuSectionAttributes, CxMenuSection> & {class?: string};export type CxMutationObserverProps = DetailedHTMLProps<CxMutationObserverAttributes, CxMutationObserver> & {class?: string};export type CxOptionProps = DetailedHTMLProps<CxOptionAttributes, CxOption> & {class?: string};export type CxTypographyProps = DetailedHTMLProps<CxTypographyAttributes, CxTypography> & {class?: string};export type CxTagProps = DetailedHTMLProps<CxTagAttributes, CxTag> & {class?: string};export type CxSelectProps = DetailedHTMLProps<CxSelectAttributes, CxSelect> & {class?: string};export type CxPaginationProps = DetailedHTMLProps<CxPaginationAttributes, CxPagination> & {class?: string};export type CxProgressBarProps = DetailedHTMLProps<CxProgressBarAttributes, CxProgressBar> & {class?: string};export type CxProgressRingProps = DetailedHTMLProps<CxProgressRingAttributes, CxProgressRing> & {class?: string};export type CxQrCodeProps = DetailedHTMLProps<CxQrCodeAttributes, CxQrCode> & {class?: string};export type CxRadioProps = DetailedHTMLProps<CxRadioAttributes, CxRadio> & {class?: string};export type CxRadioButtonProps = DetailedHTMLProps<CxRadioButtonAttributes, CxRadioButton> & {class?: string};export type CxRadioCardProps = DetailedHTMLProps<CxRadioCardAttributes, CxRadioCard> & {class?: string};export type CxRadioGroupProps = DetailedHTMLProps<CxRadioGroupAttributes, CxRadioGroup> & {class?: string};export type CxRangeProps = DetailedHTMLProps<CxRangeAttributes, CxRange> & {class?: string};export type CxRatingProps = DetailedHTMLProps<CxRatingAttributes, CxRating> & {class?: string};export type CxRelativeTimeProps = DetailedHTMLProps<CxRelativeTimeAttributes, CxRelativeTime> & {class?: string};export type CxSplitPanelProps = DetailedHTMLProps<CxSplitPanelAttributes, CxSplitPanel> & {class?: string};export type CxStepProps = DetailedHTMLProps<CxStepAttributes, CxStep> & {class?: string};export type CxStepperProps = DetailedHTMLProps<CxStepperAttributes, CxStepper> & {class?: string};export type CxSwitchProps = DetailedHTMLProps<CxSwitchAttributes, CxSwitch> & {class?: string};export type CxTabProps = DetailedHTMLProps<CxTabAttributes, CxTab> & {class?: string};export type CxTabPanelProps = DetailedHTMLProps<CxTabPanelAttributes, CxTabPanel> & {class?: string};export type CxTabGroupProps = DetailedHTMLProps<CxTabGroupAttributes, CxTabGroup> & {class?: string};export type CxTableProps = DetailedHTMLProps<CxTableAttributes, CxTable> & {class?: string};export type CxTimecodeProps = DetailedHTMLProps<CxTimecodeAttributes, CxTimecode> & {class?: string};export type CxTreeItemProps = DetailedHTMLProps<CxTreeItemAttributes, CxTreeItem> & {class?: string};export type CxTreeProps = DetailedHTMLProps<CxTreeAttributes, CxTree> & {class?: string};export type CxVideoProps = DetailedHTMLProps<CxVideoAttributes, CxVideo> & {class?: string};export type CxSidebarLayoutProps = DetailedHTMLProps<CxSidebarLayoutAttributes, CxSidebarLayout> & {class?: string};export type Cx3DViewerProps = DetailedHTMLProps<Cx3DViewerAttributes, Cx3DViewer> & {class?: string};export type CxAssetDataDisplayProps = DetailedHTMLProps<CxAssetDataDisplayAttributes, CxAssetDataDisplay> & {class?: string};export type CxAssetPickerProps = DetailedHTMLProps<CxAssetPickerAttributes, CxAssetPicker> & {class?: string};export type CxBicolorPickerProps = DetailedHTMLProps<CxBicolorPickerAttributes, CxBicolorPicker> & {class?: string};export type CxBorderInputGroupProps = DetailedHTMLProps<CxBorderInputGroupAttributes, CxBorderInputGroup> & {class?: string};export type CxColorSwatchProps = DetailedHTMLProps<CxColorSwatchAttributes, CxColorSwatch> & {class?: string};export type CxConfirmPopoverProps = DetailedHTMLProps<CxConfirmPopoverAttributes, CxConfirmPopover> & {class?: string};export type CxCornerPositionInputGroupProps = DetailedHTMLProps<CxCornerPositionInputGroupAttributes, CxCornerPositionInputGroup> & {class?: string};export type CxCropperProps = DetailedHTMLProps<CxCropperAttributes, CxCropper> & {class?: string};export type CxDashboardIframeProps = DetailedHTMLProps<CxDashboardIframeAttributes, CxDashboardIframe> & {class?: string};export type CxDataTabGroupProps = DetailedHTMLProps<CxDataTabGroupAttributes, CxDataTabGroup> & {class?: string};export type CxDetailsGroupProps = DetailedHTMLProps<CxDetailsGroupAttributes, CxDetailsGroup> & {class?: string};export type CxDownloadFormatPickerProps = DetailedHTMLProps<CxDownloadFormatPickerAttributes, CxDownloadFormatPicker> & {class?: string};export type CxDynamicSelectProps = DetailedHTMLProps<CxDynamicSelectAttributes, CxDynamicSelect> & {class?: string};export type CxFolderSelectProps = DetailedHTMLProps<CxFolderSelectAttributes, CxFolderSelect> & {class?: string};export type CxGraphViewProps = DetailedHTMLProps<CxGraphViewAttributes, CxGraphView> & {class?: string};export type CxIconPickerProps = DetailedHTMLProps<CxIconPickerAttributes, CxIconPicker> & {class?: string};export type CxListEditorProps = DetailedHTMLProps<CxListEditorAttributes, CxListEditor> & {class?: string};export type CxMasonryProps = DetailedHTMLProps<CxMasonryAttributes, CxMasonry> & {class?: string};export type CxPaddingInputGroupProps = DetailedHTMLProps<CxPaddingInputGroupAttributes, CxPaddingInputGroup> & {class?: string};export type CxPageOutlineProps = DetailedHTMLProps<CxPageOutlineAttributes, CxPageOutline> & {class?: string};export type CxPositionPickerProps = DetailedHTMLProps<CxPositionPickerAttributes, CxPositionPicker> & {class?: string};export type CxSearchBoxProps = DetailedHTMLProps<CxSearchBoxAttributes, CxSearchBox> & {class?: string};export type CxShadowInputGroupProps = DetailedHTMLProps<CxShadowInputGroupAttributes, CxShadowInputGroup> & {class?: string};export type CxShareOptionListProps = DetailedHTMLProps<CxShareOptionListAttributes, CxShareOptionList> & {class?: string};export type CxSidebarProps = DetailedHTMLProps<CxSidebarAttributes, CxSidebar> & {class?: string};export type CxSizeInputGroupProps = DetailedHTMLProps<CxSizeInputGroupAttributes, CxSizeInputGroup> & {class?: string};export type CxStepperWizardProps = DetailedHTMLProps<CxStepperWizardAttributes, CxStepperWizard> & {class?: string};export type CxStorybookProps = DetailedHTMLProps<CxStorybookAttributes, CxStorybook> & {class?: string};export type CxTimelineProps = DetailedHTMLProps<CxTimelineAttributes, CxTimeline> & {class?: string};export type CxTypefaceProps = DetailedHTMLProps<CxTypefaceAttributes, CxTypeface> & {class?: string};export type CxAssetLinkFormatProps = DetailedHTMLProps<CxAssetLinkFormatAttributes, CxAssetLinkFormat> & {class?: string};export type CxBentoGridProps = DetailedHTMLProps<CxBentoGridAttributes, CxBentoGrid> & {class?: string};export type CxCarouselProps = DetailedHTMLProps<CxCarouselAttributes, CxCarousel> & {class?: string};export type CxChatbotProps = DetailedHTMLProps<CxChatbotAttributes, CxChatbot> & {class?: string};export type CxClusterManagementProps = DetailedHTMLProps<CxClusterManagementAttributes, CxClusterManagement> & {class?: string};export type CxColorSwatchGroupProps = DetailedHTMLProps<CxColorSwatchGroupAttributes, CxColorSwatchGroup> & {class?: string};export type CxCommentProps = DetailedHTMLProps<CxCommentAttributes, CxComment> & {class?: string};export type CxFontKitProps = DetailedHTMLProps<CxFontKitAttributes, CxFontKit> & {class?: string};export type CxGalleryProps = DetailedHTMLProps<CxGalleryAttributes, CxGallery> & {class?: string};export type CxColumnProps = DetailedHTMLProps<CxColumnAttributes, CxColumn> & {class?: string};export type CxColumnGroupProps = DetailedHTMLProps<CxColumnGroupAttributes, CxColumnGroup> & {class?: string};export type CxTextProps = DetailedHTMLProps<CxTextAttributes, CxText> & {class?: string};export type CxRteCodeBlockToolbarProps = DetailedHTMLProps<CxRteCodeBlockToolbarAttributes, CxRteCodeBlockToolbar> & {class?: string};export type CxContentBuilderProps = DetailedHTMLProps<CxContentBuilderAttributes, CxContentBuilder> & {class?: string};export type CxDownloaderProps = DetailedHTMLProps<CxDownloaderAttributes, CxDownloader> & {class?: string};export type CxFileOnDemandProps = DetailedHTMLProps<CxFileOnDemandAttributes, CxFileOnDemand> & {class?: string};export type CxMultiSelectProps = DetailedHTMLProps<CxMultiSelectAttributes, CxMultiSelect> & {class?: string};export type CxTemplateSwitcherProps = DetailedHTMLProps<CxTemplateSwitcherAttributes, CxTemplateSwitcher> & {class?: string};export type CxTextToSpeechProps = DetailedHTMLProps<CxTextToSpeechAttributes, CxTextToSpeech> & {class?: string};export type CxVideoChaptersManagerProps = DetailedHTMLProps<CxVideoChaptersManagerAttributes, CxVideoChaptersManager> & {class?: string};export type CxVideoEditorProps = DetailedHTMLProps<CxVideoEditorAttributes, CxVideoEditor> & {class?: string};export type CxTemplateManagerProps = DetailedHTMLProps<CxTemplateManagerAttributes, CxTemplateManager> & {class?: string};
               declare global {
                 namespace JSX {
                   interface IntrinsicElements {
-                    ['cx-icon']: CxIconProps;['cx-spinner']: CxSpinnerProps;['cx-icon-button']: CxIconButtonProps;['cx-alert']: CxAlertProps;['cx-animated-image']: CxAnimatedImageProps;['cx-animation']: CxAnimationProps;['cx-avatar']: CxAvatarProps;['cx-badge']: CxBadgeProps;['cx-breadcrumb-item']: CxBreadcrumbItemProps;['cx-breadcrumb']: CxBreadcrumbProps;['cx-popup']: CxPopupProps;['cx-menu-item']: CxMenuItemProps;['cx-input']: CxInputProps;['cx-menu']: CxMenuProps;['cx-textarea']: CxTextareaProps;['cx-dropdown']: CxDropdownProps;['cx-button']: CxButtonProps;['cx-button-group']: CxButtonGroupProps;['cx-card']: CxCardProps;['cx-checkbox']: CxCheckboxProps;['cx-visually-hidden']: CxVisuallyHiddenProps;['cx-color-picker']: CxColorPickerProps;['cx-tooltip']: CxTooltipProps;['cx-copy-button']: CxCopyButtonProps;['cx-details']: CxDetailsProps;['cx-divider']: CxDividerProps;['cx-dialog']: CxDialogProps;['cx-dot-pagination']: CxDotPaginationProps;['cx-dot-status']: CxDotStatusProps;['cx-drawer']: CxDrawerProps;['cx-element-clamp']: CxElementClampProps;['cx-format-bytes']: CxFormatBytesProps;['cx-format-date']: CxFormatDateProps;['cx-format-number']: CxFormatNumberProps;['cx-grid']: CxGridProps;['cx-grid-item']: CxGridItemProps;['cx-header']: CxHeaderProps;['cx-hub-connection']: CxHubConnectionProps;['cx-iframe']: CxIframeProps;['cx-resize-observer']: CxResizeObserverProps;['cx-skeleton']: CxSkeletonProps;['cx-space']: CxSpaceProps;['cx-image']: CxImageProps;['cx-image-comparer']: CxImageComparerProps;['cx-include']: CxIncludeProps;['cx-input-group']: CxInputGroupProps;['cx-line-clamp']: CxLineClampProps;['cx-markdown']: CxMarkdownProps;['cx-menu-label']: CxMenuLabelProps;['cx-menu-section']: CxMenuSectionProps;['cx-mutation-observer']: CxMutationObserverProps;['cx-option']: CxOptionProps;['cx-typography']: CxTypographyProps;['cx-tag']: CxTagProps;['cx-select']: CxSelectProps;['cx-pagination']: CxPaginationProps;['cx-progress-bar']: CxProgressBarProps;['cx-progress-ring']: CxProgressRingProps;['cx-qr-code']: CxQrCodeProps;['cx-radio']: CxRadioProps;['cx-radio-button']: CxRadioButtonProps;['cx-radio-card']: CxRadioCardProps;['cx-radio-group']: CxRadioGroupProps;['cx-range']: CxRangeProps;['cx-rating']: CxRatingProps;['cx-relative-time']: CxRelativeTimeProps;['cx-split-panel']: CxSplitPanelProps;['cx-step']: CxStepProps;['cx-stepper']: CxStepperProps;['cx-switch']: CxSwitchProps;['cx-tab']: CxTabProps;['cx-tab-panel']: CxTabPanelProps;['cx-tab-group']: CxTabGroupProps;['cx-table']: CxTableProps;['cx-timecode']: CxTimecodeProps;['cx-tree-item']: CxTreeItemProps;['cx-tree']: CxTreeProps;['cx-video']: CxVideoProps;['cx-sidebar-layout']: CxSidebarLayoutProps;['cx-3d-viewer']: Cx3DViewerProps;['cx-asset-data-display']: CxAssetDataDisplayProps;['cx-asset-picker']: CxAssetPickerProps;['cx-bicolor-picker']: CxBicolorPickerProps;['cx-border-input-group']: CxBorderInputGroupProps;['cx-color-swatch']: CxColorSwatchProps;['cx-confirm-popover']: CxConfirmPopoverProps;['cx-corner-position-input-group']: CxCornerPositionInputGroupProps;['cx-cropper']: CxCropperProps;['cx-dashboard-iframe']: CxDashboardIframeProps;['cx-data-tab-group']: CxDataTabGroupProps;['cx-details-group']: CxDetailsGroupProps;['cx-download-format-picker']: CxDownloadFormatPickerProps;['cx-dynamic-select']: CxDynamicSelectProps;['cx-folder-select']: CxFolderSelectProps;['cx-graph-view']: CxGraphViewProps;['cx-icon-picker']: CxIconPickerProps;['cx-list-editor']: CxListEditorProps;['cx-masonry']: CxMasonryProps;['cx-padding-input-group']: CxPaddingInputGroupProps;['cx-page-outline']: CxPageOutlineProps;['cx-position-picker']: CxPositionPickerProps;['cx-search-box']: CxSearchBoxProps;['cx-shadow-input-group']: CxShadowInputGroupProps;['cx-share-option-list']: CxShareOptionListProps;['cx-sidebar']: CxSidebarProps;['cx-size-input-group']: CxSizeInputGroupProps;['cx-stepper-wizard']: CxStepperWizardProps;['cx-storybook']: CxStorybookProps;['cx-timeline']: CxTimelineProps;['cx-typeface']: CxTypefaceProps;['cx-asset-link-format']: CxAssetLinkFormatProps;['cx-bento-grid']: CxBentoGridProps;['cx-carousel']: CxCarouselProps;['cx-chatbot']: CxChatbotProps;['cx-cluster-management']: CxClusterManagementProps;['cx-color-swatch-group']: CxColorSwatchGroupProps;['cx-comment']: CxCommentProps;['cx-font-kit']: CxFontKitProps;['cx-gallery']: CxGalleryProps;['cx-column']: CxColumnProps;['cx-column-group']: CxColumnGroupProps;['cx-text']: CxTextProps;['cx-rte-code-block-toolbar']: CxRteCodeBlockToolbarProps;['cx-content-builder']: CxContentBuilderProps;['cx-downloader']: CxDownloaderProps;['cx-file-on-demand']: CxFileOnDemandProps;['cx-multi-select']: CxMultiSelectProps;['cx-template-switcher']: CxTemplateSwitcherProps;['cx-text-to-speech']: CxTextToSpeechProps;['cx-video-chapters-manager']: CxVideoChaptersManagerProps;['cx-video-editor']: CxVideoEditorProps;['cx-template-manager']: CxTemplateManagerProps;
+                    ['cx-icon']: CxIconProps;['cx-spinner']: CxSpinnerProps;['cx-icon-button']: CxIconButtonProps;['cx-alert']: CxAlertProps;['cx-animated-image']: CxAnimatedImageProps;['cx-animation']: CxAnimationProps;['cx-avatar']: CxAvatarProps;['cx-badge']: CxBadgeProps;['cx-breadcrumb-item']: CxBreadcrumbItemProps;['cx-breadcrumb']: CxBreadcrumbProps;['cx-popup']: CxPopupProps;['cx-menu-item']: CxMenuItemProps;['cx-input']: CxInputProps;['cx-menu']: CxMenuProps;['cx-textarea']: CxTextareaProps;['cx-dropdown']: CxDropdownProps;['cx-button']: CxButtonProps;['cx-button-group']: CxButtonGroupProps;['cx-card']: CxCardProps;['cx-checkbox']: CxCheckboxProps;['cx-visually-hidden']: CxVisuallyHiddenProps;['cx-color-picker']: CxColorPickerProps;['cx-tooltip']: CxTooltipProps;['cx-copy-button']: CxCopyButtonProps;['cx-details']: CxDetailsProps;['cx-divider']: CxDividerProps;['cx-dialog']: CxDialogProps;['cx-dot-pagination']: CxDotPaginationProps;['cx-dot-status']: CxDotStatusProps;['cx-drawer']: CxDrawerProps;['cx-element-clamp']: CxElementClampProps;['cx-format-bytes']: CxFormatBytesProps;['cx-format-date']: CxFormatDateProps;['cx-format-number']: CxFormatNumberProps;['cx-format-time']: CxFormatTimeProps;['cx-grid']: CxGridProps;['cx-grid-item']: CxGridItemProps;['cx-header']: CxHeaderProps;['cx-hub-connection']: CxHubConnectionProps;['cx-iframe']: CxIframeProps;['cx-resize-observer']: CxResizeObserverProps;['cx-skeleton']: CxSkeletonProps;['cx-space']: CxSpaceProps;['cx-image']: CxImageProps;['cx-image-comparer']: CxImageComparerProps;['cx-include']: CxIncludeProps;['cx-input-group']: CxInputGroupProps;['cx-line-clamp']: CxLineClampProps;['cx-markdown']: CxMarkdownProps;['cx-menu-label']: CxMenuLabelProps;['cx-menu-section']: CxMenuSectionProps;['cx-mutation-observer']: CxMutationObserverProps;['cx-option']: CxOptionProps;['cx-typography']: CxTypographyProps;['cx-tag']: CxTagProps;['cx-select']: CxSelectProps;['cx-pagination']: CxPaginationProps;['cx-progress-bar']: CxProgressBarProps;['cx-progress-ring']: CxProgressRingProps;['cx-qr-code']: CxQrCodeProps;['cx-radio']: CxRadioProps;['cx-radio-button']: CxRadioButtonProps;['cx-radio-card']: CxRadioCardProps;['cx-radio-group']: CxRadioGroupProps;['cx-range']: CxRangeProps;['cx-rating']: CxRatingProps;['cx-relative-time']: CxRelativeTimeProps;['cx-split-panel']: CxSplitPanelProps;['cx-step']: CxStepProps;['cx-stepper']: CxStepperProps;['cx-switch']: CxSwitchProps;['cx-tab']: CxTabProps;['cx-tab-panel']: CxTabPanelProps;['cx-tab-group']: CxTabGroupProps;['cx-table']: CxTableProps;['cx-timecode']: CxTimecodeProps;['cx-tree-item']: CxTreeItemProps;['cx-tree']: CxTreeProps;['cx-video']: CxVideoProps;['cx-sidebar-layout']: CxSidebarLayoutProps;['cx-3d-viewer']: Cx3DViewerProps;['cx-asset-data-display']: CxAssetDataDisplayProps;['cx-asset-picker']: CxAssetPickerProps;['cx-bicolor-picker']: CxBicolorPickerProps;['cx-border-input-group']: CxBorderInputGroupProps;['cx-color-swatch']: CxColorSwatchProps;['cx-confirm-popover']: CxConfirmPopoverProps;['cx-corner-position-input-group']: CxCornerPositionInputGroupProps;['cx-cropper']: CxCropperProps;['cx-dashboard-iframe']: CxDashboardIframeProps;['cx-data-tab-group']: CxDataTabGroupProps;['cx-details-group']: CxDetailsGroupProps;['cx-download-format-picker']: CxDownloadFormatPickerProps;['cx-dynamic-select']: CxDynamicSelectProps;['cx-folder-select']: CxFolderSelectProps;['cx-graph-view']: CxGraphViewProps;['cx-icon-picker']: CxIconPickerProps;['cx-list-editor']: CxListEditorProps;['cx-masonry']: CxMasonryProps;['cx-padding-input-group']: CxPaddingInputGroupProps;['cx-page-outline']: CxPageOutlineProps;['cx-position-picker']: CxPositionPickerProps;['cx-search-box']: CxSearchBoxProps;['cx-shadow-input-group']: CxShadowInputGroupProps;['cx-share-option-list']: CxShareOptionListProps;['cx-sidebar']: CxSidebarProps;['cx-size-input-group']: CxSizeInputGroupProps;['cx-stepper-wizard']: CxStepperWizardProps;['cx-storybook']: CxStorybookProps;['cx-timeline']: CxTimelineProps;['cx-typeface']: CxTypefaceProps;['cx-asset-link-format']: CxAssetLinkFormatProps;['cx-bento-grid']: CxBentoGridProps;['cx-carousel']: CxCarouselProps;['cx-chatbot']: CxChatbotProps;['cx-cluster-management']: CxClusterManagementProps;['cx-color-swatch-group']: CxColorSwatchGroupProps;['cx-comment']: CxCommentProps;['cx-font-kit']: CxFontKitProps;['cx-gallery']: CxGalleryProps;['cx-column']: CxColumnProps;['cx-column-group']: CxColumnGroupProps;['cx-text']: CxTextProps;['cx-rte-code-block-toolbar']: CxRteCodeBlockToolbarProps;['cx-content-builder']: CxContentBuilderProps;['cx-downloader']: CxDownloaderProps;['cx-file-on-demand']: CxFileOnDemandProps;['cx-multi-select']: CxMultiSelectProps;['cx-template-switcher']: CxTemplateSwitcherProps;['cx-text-to-speech']: CxTextToSpeechProps;['cx-video-chapters-manager']: CxVideoChaptersManagerProps;['cx-video-editor']: CxVideoEditorProps;['cx-template-manager']: CxTemplateManagerProps;
                   }
                 }
               };
               declare module "react" {
                 namespace JSX {
                   interface IntrinsicElements {
-                    ['cx-icon']: CxIconProps;['cx-spinner']: CxSpinnerProps;['cx-icon-button']: CxIconButtonProps;['cx-alert']: CxAlertProps;['cx-animated-image']: CxAnimatedImageProps;['cx-animation']: CxAnimationProps;['cx-avatar']: CxAvatarProps;['cx-badge']: CxBadgeProps;['cx-breadcrumb-item']: CxBreadcrumbItemProps;['cx-breadcrumb']: CxBreadcrumbProps;['cx-popup']: CxPopupProps;['cx-menu-item']: CxMenuItemProps;['cx-input']: CxInputProps;['cx-menu']: CxMenuProps;['cx-textarea']: CxTextareaProps;['cx-dropdown']: CxDropdownProps;['cx-button']: CxButtonProps;['cx-button-group']: CxButtonGroupProps;['cx-card']: CxCardProps;['cx-checkbox']: CxCheckboxProps;['cx-visually-hidden']: CxVisuallyHiddenProps;['cx-color-picker']: CxColorPickerProps;['cx-tooltip']: CxTooltipProps;['cx-copy-button']: CxCopyButtonProps;['cx-details']: CxDetailsProps;['cx-divider']: CxDividerProps;['cx-dialog']: CxDialogProps;['cx-dot-pagination']: CxDotPaginationProps;['cx-dot-status']: CxDotStatusProps;['cx-drawer']: CxDrawerProps;['cx-element-clamp']: CxElementClampProps;['cx-format-bytes']: CxFormatBytesProps;['cx-format-date']: CxFormatDateProps;['cx-format-number']: CxFormatNumberProps;['cx-grid']: CxGridProps;['cx-grid-item']: CxGridItemProps;['cx-header']: CxHeaderProps;['cx-hub-connection']: CxHubConnectionProps;['cx-iframe']: CxIframeProps;['cx-resize-observer']: CxResizeObserverProps;['cx-skeleton']: CxSkeletonProps;['cx-space']: CxSpaceProps;['cx-image']: CxImageProps;['cx-image-comparer']: CxImageComparerProps;['cx-include']: CxIncludeProps;['cx-input-group']: CxInputGroupProps;['cx-line-clamp']: CxLineClampProps;['cx-markdown']: CxMarkdownProps;['cx-menu-label']: CxMenuLabelProps;['cx-menu-section']: CxMenuSectionProps;['cx-mutation-observer']: CxMutationObserverProps;['cx-option']: CxOptionProps;['cx-typography']: CxTypographyProps;['cx-tag']: CxTagProps;['cx-select']: CxSelectProps;['cx-pagination']: CxPaginationProps;['cx-progress-bar']: CxProgressBarProps;['cx-progress-ring']: CxProgressRingProps;['cx-qr-code']: CxQrCodeProps;['cx-radio']: CxRadioProps;['cx-radio-button']: CxRadioButtonProps;['cx-radio-card']: CxRadioCardProps;['cx-radio-group']: CxRadioGroupProps;['cx-range']: CxRangeProps;['cx-rating']: CxRatingProps;['cx-relative-time']: CxRelativeTimeProps;['cx-split-panel']: CxSplitPanelProps;['cx-step']: CxStepProps;['cx-stepper']: CxStepperProps;['cx-switch']: CxSwitchProps;['cx-tab']: CxTabProps;['cx-tab-panel']: CxTabPanelProps;['cx-tab-group']: CxTabGroupProps;['cx-table']: CxTableProps;['cx-timecode']: CxTimecodeProps;['cx-tree-item']: CxTreeItemProps;['cx-tree']: CxTreeProps;['cx-video']: CxVideoProps;['cx-sidebar-layout']: CxSidebarLayoutProps;['cx-3d-viewer']: Cx3DViewerProps;['cx-asset-data-display']: CxAssetDataDisplayProps;['cx-asset-picker']: CxAssetPickerProps;['cx-bicolor-picker']: CxBicolorPickerProps;['cx-border-input-group']: CxBorderInputGroupProps;['cx-color-swatch']: CxColorSwatchProps;['cx-confirm-popover']: CxConfirmPopoverProps;['cx-corner-position-input-group']: CxCornerPositionInputGroupProps;['cx-cropper']: CxCropperProps;['cx-dashboard-iframe']: CxDashboardIframeProps;['cx-data-tab-group']: CxDataTabGroupProps;['cx-details-group']: CxDetailsGroupProps;['cx-download-format-picker']: CxDownloadFormatPickerProps;['cx-dynamic-select']: CxDynamicSelectProps;['cx-folder-select']: CxFolderSelectProps;['cx-graph-view']: CxGraphViewProps;['cx-icon-picker']: CxIconPickerProps;['cx-list-editor']: CxListEditorProps;['cx-masonry']: CxMasonryProps;['cx-padding-input-group']: CxPaddingInputGroupProps;['cx-page-outline']: CxPageOutlineProps;['cx-position-picker']: CxPositionPickerProps;['cx-search-box']: CxSearchBoxProps;['cx-shadow-input-group']: CxShadowInputGroupProps;['cx-share-option-list']: CxShareOptionListProps;['cx-sidebar']: CxSidebarProps;['cx-size-input-group']: CxSizeInputGroupProps;['cx-stepper-wizard']: CxStepperWizardProps;['cx-storybook']: CxStorybookProps;['cx-timeline']: CxTimelineProps;['cx-typeface']: CxTypefaceProps;['cx-asset-link-format']: CxAssetLinkFormatProps;['cx-bento-grid']: CxBentoGridProps;['cx-carousel']: CxCarouselProps;['cx-chatbot']: CxChatbotProps;['cx-cluster-management']: CxClusterManagementProps;['cx-color-swatch-group']: CxColorSwatchGroupProps;['cx-comment']: CxCommentProps;['cx-font-kit']: CxFontKitProps;['cx-gallery']: CxGalleryProps;['cx-column']: CxColumnProps;['cx-column-group']: CxColumnGroupProps;['cx-text']: CxTextProps;['cx-rte-code-block-toolbar']: CxRteCodeBlockToolbarProps;['cx-content-builder']: CxContentBuilderProps;['cx-downloader']: CxDownloaderProps;['cx-file-on-demand']: CxFileOnDemandProps;['cx-multi-select']: CxMultiSelectProps;['cx-template-switcher']: CxTemplateSwitcherProps;['cx-text-to-speech']: CxTextToSpeechProps;['cx-video-chapters-manager']: CxVideoChaptersManagerProps;['cx-video-editor']: CxVideoEditorProps;['cx-template-manager']: CxTemplateManagerProps;
+                    ['cx-icon']: CxIconProps;['cx-spinner']: CxSpinnerProps;['cx-icon-button']: CxIconButtonProps;['cx-alert']: CxAlertProps;['cx-animated-image']: CxAnimatedImageProps;['cx-animation']: CxAnimationProps;['cx-avatar']: CxAvatarProps;['cx-badge']: CxBadgeProps;['cx-breadcrumb-item']: CxBreadcrumbItemProps;['cx-breadcrumb']: CxBreadcrumbProps;['cx-popup']: CxPopupProps;['cx-menu-item']: CxMenuItemProps;['cx-input']: CxInputProps;['cx-menu']: CxMenuProps;['cx-textarea']: CxTextareaProps;['cx-dropdown']: CxDropdownProps;['cx-button']: CxButtonProps;['cx-button-group']: CxButtonGroupProps;['cx-card']: CxCardProps;['cx-checkbox']: CxCheckboxProps;['cx-visually-hidden']: CxVisuallyHiddenProps;['cx-color-picker']: CxColorPickerProps;['cx-tooltip']: CxTooltipProps;['cx-copy-button']: CxCopyButtonProps;['cx-details']: CxDetailsProps;['cx-divider']: CxDividerProps;['cx-dialog']: CxDialogProps;['cx-dot-pagination']: CxDotPaginationProps;['cx-dot-status']: CxDotStatusProps;['cx-drawer']: CxDrawerProps;['cx-element-clamp']: CxElementClampProps;['cx-format-bytes']: CxFormatBytesProps;['cx-format-date']: CxFormatDateProps;['cx-format-number']: CxFormatNumberProps;['cx-format-time']: CxFormatTimeProps;['cx-grid']: CxGridProps;['cx-grid-item']: CxGridItemProps;['cx-header']: CxHeaderProps;['cx-hub-connection']: CxHubConnectionProps;['cx-iframe']: CxIframeProps;['cx-resize-observer']: CxResizeObserverProps;['cx-skeleton']: CxSkeletonProps;['cx-space']: CxSpaceProps;['cx-image']: CxImageProps;['cx-image-comparer']: CxImageComparerProps;['cx-include']: CxIncludeProps;['cx-input-group']: CxInputGroupProps;['cx-line-clamp']: CxLineClampProps;['cx-markdown']: CxMarkdownProps;['cx-menu-label']: CxMenuLabelProps;['cx-menu-section']: CxMenuSectionProps;['cx-mutation-observer']: CxMutationObserverProps;['cx-option']: CxOptionProps;['cx-typography']: CxTypographyProps;['cx-tag']: CxTagProps;['cx-select']: CxSelectProps;['cx-pagination']: CxPaginationProps;['cx-progress-bar']: CxProgressBarProps;['cx-progress-ring']: CxProgressRingProps;['cx-qr-code']: CxQrCodeProps;['cx-radio']: CxRadioProps;['cx-radio-button']: CxRadioButtonProps;['cx-radio-card']: CxRadioCardProps;['cx-radio-group']: CxRadioGroupProps;['cx-range']: CxRangeProps;['cx-rating']: CxRatingProps;['cx-relative-time']: CxRelativeTimeProps;['cx-split-panel']: CxSplitPanelProps;['cx-step']: CxStepProps;['cx-stepper']: CxStepperProps;['cx-switch']: CxSwitchProps;['cx-tab']: CxTabProps;['cx-tab-panel']: CxTabPanelProps;['cx-tab-group']: CxTabGroupProps;['cx-table']: CxTableProps;['cx-timecode']: CxTimecodeProps;['cx-tree-item']: CxTreeItemProps;['cx-tree']: CxTreeProps;['cx-video']: CxVideoProps;['cx-sidebar-layout']: CxSidebarLayoutProps;['cx-3d-viewer']: Cx3DViewerProps;['cx-asset-data-display']: CxAssetDataDisplayProps;['cx-asset-picker']: CxAssetPickerProps;['cx-bicolor-picker']: CxBicolorPickerProps;['cx-border-input-group']: CxBorderInputGroupProps;['cx-color-swatch']: CxColorSwatchProps;['cx-confirm-popover']: CxConfirmPopoverProps;['cx-corner-position-input-group']: CxCornerPositionInputGroupProps;['cx-cropper']: CxCropperProps;['cx-dashboard-iframe']: CxDashboardIframeProps;['cx-data-tab-group']: CxDataTabGroupProps;['cx-details-group']: CxDetailsGroupProps;['cx-download-format-picker']: CxDownloadFormatPickerProps;['cx-dynamic-select']: CxDynamicSelectProps;['cx-folder-select']: CxFolderSelectProps;['cx-graph-view']: CxGraphViewProps;['cx-icon-picker']: CxIconPickerProps;['cx-list-editor']: CxListEditorProps;['cx-masonry']: CxMasonryProps;['cx-padding-input-group']: CxPaddingInputGroupProps;['cx-page-outline']: CxPageOutlineProps;['cx-position-picker']: CxPositionPickerProps;['cx-search-box']: CxSearchBoxProps;['cx-shadow-input-group']: CxShadowInputGroupProps;['cx-share-option-list']: CxShareOptionListProps;['cx-sidebar']: CxSidebarProps;['cx-size-input-group']: CxSizeInputGroupProps;['cx-stepper-wizard']: CxStepperWizardProps;['cx-storybook']: CxStorybookProps;['cx-timeline']: CxTimelineProps;['cx-typeface']: CxTypefaceProps;['cx-asset-link-format']: CxAssetLinkFormatProps;['cx-bento-grid']: CxBentoGridProps;['cx-carousel']: CxCarouselProps;['cx-chatbot']: CxChatbotProps;['cx-cluster-management']: CxClusterManagementProps;['cx-color-swatch-group']: CxColorSwatchGroupProps;['cx-comment']: CxCommentProps;['cx-font-kit']: CxFontKitProps;['cx-gallery']: CxGalleryProps;['cx-column']: CxColumnProps;['cx-column-group']: CxColumnGroupProps;['cx-text']: CxTextProps;['cx-rte-code-block-toolbar']: CxRteCodeBlockToolbarProps;['cx-content-builder']: CxContentBuilderProps;['cx-downloader']: CxDownloaderProps;['cx-file-on-demand']: CxFileOnDemandProps;['cx-multi-select']: CxMultiSelectProps;['cx-template-switcher']: CxTemplateSwitcherProps;['cx-text-to-speech']: CxTextToSpeechProps;['cx-video-chapters-manager']: CxVideoChaptersManagerProps;['cx-video-editor']: CxVideoEditorProps;['cx-template-manager']: CxTemplateManagerProps;
                   }
                 }
               };