@ukic/canary-web-components 2.0.0-canary.4 → 2.0.0-canary.41

package/dist/types/components.d.ts

@@ -5,18 +5,78 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { IcDataTableColumnObject, IcDataTableDensityOptions, IcDataTableSortOrderOptions } from "./components/ic-data-table/ic-data-table.types";
-import { IcPaginationAlignmentOptions, IcPaginationControlTypes, IcPaginationTypes } from "./components/ic-pagination/ic-pagination.types";
+import { IcCardSizes } from "./components/ic-card-horizontal/ic-card-horizontal.types";
+import { IcDataTableColumnObject, IcDataTableDataType, IcDataTableDensityOptions, IcDataTableRowHeights, IcDataTableSortOrderOptions, IcDataTableTruncationTypes, IcDensityUpdateEventDetail, IcSortEventDetail } from "./components/ic-data-table/ic-data-table.types";
+import { IcActivationTypes, IcMenuOption, IcThemeForegroundNoDefault } from "@ukic/web-components/dist/types/utils/types";
+import { IcDateFormat, IcInformationStatusOrEmpty, IcPaginationBarOptions, IcSearchMatchPositions, IcSizes, IcThemeForegroundNoDefault as IcThemeForegroundNoDefault1, IcValueEventDetail, IcWeekDays } from "./utils/types";
+import { IcMenuChangeEventDetail, IcMenuOptionIdEventDetail, IcOptionSelectEventDetail, IcSearchBarSearchModes } from "@ukic/web-components/dist/types/components";
+import { IcPaginationAlignmentOptions, IcPaginationLabelTypes, IcPaginationTypes } from "@ukic/web-components/dist/types/components/ic-pagination/ic-pagination.types";
 import { IcThemeForeground } from "@ukic/web-components/dist/types/interface";
-export { IcDataTableColumnObject, IcDataTableDensityOptions, IcDataTableSortOrderOptions } from "./components/ic-data-table/ic-data-table.types";
-export { IcPaginationAlignmentOptions, IcPaginationControlTypes, IcPaginationTypes } from "./components/ic-pagination/ic-pagination.types";
+import { IcPageChangeEventDetail } from "./components/ic-pagination-bar/ic-pagination-bar.types";
+export { IcCardSizes } from "./components/ic-card-horizontal/ic-card-horizontal.types";
+export { IcDataTableColumnObject, IcDataTableDataType, IcDataTableDensityOptions, IcDataTableRowHeights, IcDataTableSortOrderOptions, IcDataTableTruncationTypes, IcDensityUpdateEventDetail, IcSortEventDetail } from "./components/ic-data-table/ic-data-table.types";
+export { IcActivationTypes, IcMenuOption, IcThemeForegroundNoDefault } from "@ukic/web-components/dist/types/utils/types";
+export { IcDateFormat, IcInformationStatusOrEmpty, IcPaginationBarOptions, IcSearchMatchPositions, IcSizes, IcThemeForegroundNoDefault as IcThemeForegroundNoDefault1, IcValueEventDetail, IcWeekDays } from "./utils/types";
+export { IcMenuChangeEventDetail, IcMenuOptionIdEventDetail, IcOptionSelectEventDetail, IcSearchBarSearchModes } from "@ukic/web-components/dist/types/components";
+export { IcPaginationAlignmentOptions, IcPaginationLabelTypes, IcPaginationTypes } from "@ukic/web-components/dist/types/components/ic-pagination/ic-pagination.types";
 export { IcThemeForeground } from "@ukic/web-components/dist/types/interface";
+export { IcPageChangeEventDetail } from "./components/ic-pagination-bar/ic-pagination-bar.types";
 export namespace Components {
+    interface IcCardHorizontal {
+        /**
+          * If `true`, the horizontal card will be a clickable variant, instead of static.
+         */
+        "clickable"?: boolean;
+        /**
+          * If `true`, the horizontal card will be disabled if it is clickable.
+         */
+        "disabled"?: boolean;
+        /**
+          * The heading for the horizontal card. This is required, unless a slotted heading is used.
+         */
+        "heading"?: string;
+        /**
+          * The URL that the clickable horizontal card link points to. If set, the clickable horizontal card will render as an "a" tag, otherwise it will render as a button.
+         */
+        "href"?: string | undefined;
+        /**
+          * The human language of the linked URL.
+         */
+        "hreflang"?: string;
+        /**
+          * The main body message of the horizontal card.
+         */
+        "message"?: string;
+        /**
+          * How much of the referrer to send when following the link.
+         */
+        "referrerpolicy"?: ReferrerPolicy;
+        /**
+          * The relationship of the linked URL as space-separated link types.
+         */
+        "rel"?: string;
+        /**
+          * Sets focus on the card.
+         */
+        "setFocus": () => Promise<void>;
+        /**
+          * The size of the horizontal card.
+         */
+        "size": IcCardSizes;
+        /**
+          * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
+         */
+        "target"?: string;
+    }
     interface IcDataTable {
         /**
           * The title for the table only visible to screen readers.
          */
         "caption": string;
+        /**
+          * Determines whether the column header should be truncated and display a tooltip. Default is `false`.
+         */
+        "columnHeaderTruncation": boolean;
         /**
           * The column headers for the table.
          */
@@ -24,30 +84,73 @@ export namespace Components {
         /**
           * The row content for the table.
          */
-        "data": { [key: string]: any }[];
+        "data"?: IcDataTableDataType[];
         /**
           * Set the density of the table including font and padding.
          */
         "density"?: IcDataTableDensityOptions;
+        /**
+          * If `true`, the built in sort functionality will be disabled. For example, if rows will already be sorted from an external source.
+         */
+        "disableAutoSort"?: boolean;
         /**
           * Applies a border to the table container.
          */
         "embedded"?: boolean;
+        /**
+          * Sets the row height on all rows in the table that aren't set using the `variableRowHeight` method.
+         */
+        "globalRowHeight"?: IcDataTableRowHeights;
+        /**
+          * Sets the table height. Can be set to `auto` or a specific value in `px`, `rem`, or `%`.
+         */
+        "height"?: string;
         /**
           * If `true`, column headers will not be visible.
          */
         "hideColumnHeaders"?: boolean;
         /**
-          * Sets the props for the pagination bar.
+          * If `true`, the selected row is highlighted using a background colour.
+         */
+        "highlightSelectedRow"?: boolean;
+        /**
+          * When set to `true`, the full table will show a loading state, featuring a radial indicator.
+         */
+        "loading"?: boolean;
+        /**
+          * Sets the props for the circular loading indicator used in the loading state.
          */
-        "paginationOptions"?: {
-    itemsPerPage?: { label: string; value: string }[];
-    type?: IcPaginationTypes;
-    control?: IcPaginationControlTypes;
-    itemsPerPageControl?: boolean;
-    goToPageControl?: boolean;
-    alignment?: IcPaginationAlignmentOptions;
+        "loadingOptions"?: {
+    appearance?: IcThemeForegroundNoDefault;
+    description?: string;
+    label?: string;
+    labelDuration?: number;
+    max?: number;
+    min?: number;
+    progress?: number;
+    showBackground?: boolean;
+    overlay?: boolean;
   };
+        /**
+          * Sets the maximum width of the data table. Can be set in `px`, `rem`, or `%`.
+         */
+        "maxWidth"?: string;
+        /**
+          * Sets the minimum width of the data table. Can be set in `px`, `rem`, or `%`.
+         */
+        "minWidth"?: string;
+        /**
+          * The minimum amount of time the `loading` state displays for before showing the data. Used to prevent flashing in the component.
+         */
+        "minimumLoadingDisplayDuration"?: number;
+        /**
+          * Sets the props for the built-in pagination bar. If the `pagination-bar` slot is used then this prop is ignored.
+         */
+        "paginationBarOptions"?: IcPaginationBarOptions;
+        /**
+          * Resets the `globalRowHeight` prop to number or auto and sets the `variableRowHeight` prop to `null`.
+         */
+        "resetRowHeights": (rowHeight?: number | "auto") => Promise<void>;
         /**
           * If `true`, adds a pagination bar to the bottom of the table.
          */
@@ -71,151 +174,347 @@ export namespace Components {
           * If `true`, row headers will remain to the left when scrolling horizontally.
          */
         "stickyRowHeaders"?: boolean;
+        /**
+          * Sets the layout of the table
+         */
+        "tableLayout"?: "fixed" | "auto";
+        /**
+          * Sets the method used to truncate long text in cells where textWrap is `false`. The `tooltip` truncation pattern allows the overflowing text to be seen in a tooltip. The `show-hide` truncation pattern allows the overflowing text to be shown and hidden using the ic-typography "See more"/"See less" buttons.
+         */
+        "truncationPattern"?: IcDataTableTruncationTypes;
+        /**
+          * If `true`, the table displays a linear loading indicator below the header row to indicate an updating state.
+         */
+        "updating"?: boolean;
+        /**
+          * Sets the props for the linear loading indicator used in the updating state.
+         */
+        "updatingOptions"?: {
+    appearance?: IcThemeForegroundNoDefault;
+    description?: string;
+    max?: number;
+    min?: number;
+    progress?: number;
+  };
+        /**
+          * Allows for custom setting of row heights on individual rows based on an individual value from the `data` prop and the row index. If the function returns `null`, that row's height will be set to the `globalRowHeight` property.
+         */
+        "variableRowHeight"?: (params: {
+    [key: string]: any;
+    index: number;
+  }) => IcDataTableRowHeights | null;
+        /**
+          * Sets the table width. Can be set to `auto` or a specific value in `px`, `rem`, or `%`.
+         */
+        "width"?: string;
     }
-    interface IcPaginationBar {
+    interface IcDataTableTitleBar {
         /**
-          * Sets the alignment of the items in the pagination bar.
+          * The description that is displayed below the `heading` and `metadata`. Can be overridden with the `description` slot.
          */
-        "alignment"?: IcPaginationAlignmentOptions;
+        "description"?: string;
         /**
-          * Sets the styling for the items in the pagination bar.
+          * The heading of the title bar. Can be overridden with the `heading` slot. If used with an `ic-data-table` it will default to the table's `caption` unless overridden.
          */
-        "appearance"?: IcThemeForeground;
+        "heading"?: string;
         /**
-          * The label which will be used in place of 'items' if paginationType is data. Should be capitalised.
+          * When `true`, the density select will not be rendered.
          */
-        "itemLabel"?: string;
+        "hideDensitySelect"?: boolean;
         /**
-          * The options which will be displayed for 'items per page' select input. Set a maximum of 4 options including a required 'All' option with value equal to total number of items.
+          * The metadata displayed next to the `heading`.
          */
-        "itemsPerPageOptions"?: {
-    label: string;
-    value: string;
-  }[];
+        "metadata"?: string;
+    }
+    interface IcDateInput {
         /**
-          * The label which will be used in place of 'Page' if paginationType is page. Should be capitalised.
+          * The format in which the date will be displayed.
          */
-        "pageLabel"?: string;
+        "dateFormat"?: IcDateFormat;
         /**
-          * Whether the displayed pagination is simple or complex.
+          * The days of the week to disable.
          */
-        "paginationControl"?: IcPaginationControlTypes;
+        "disableDays"?: IcWeekDays[];
         /**
-          * Whether total number of items and current item range or total number of pages and current page is displayed.
+          * The text to display as the validation message when `disableDays` is set and a disabled date is entered.
          */
-        "paginationType"?: IcPaginationTypes;
+        "disableDaysMessage"?: string;
         /**
-          * If `true`, the 'go to page' control should be displayed.
+          * If `true`, dates in the future are not allowed. A validation message will appear if a date in the future is entered.
          */
-        "showGoToPageControl"?: boolean;
+        "disableFuture"?: boolean;
         /**
-          * If `true`, the number of total items and current item range or number of total pages and current page should be displayed.
+          * The text to display as the validation message when `disableFuture` is true and a date in the future is entered.
          */
-        "showItemsPerPage"?: boolean;
+        "disableFutureMessage"?: string;
         /**
-          * If `true`, the select input to control 'items per page' should be displayed.
+          * If `true`, dates in the past are not allowed. A validation message will appear if a date in the past is entered.
          */
-        "showItemsPerPageControl"?: boolean;
+        "disablePast"?: boolean;
         /**
-          * Total number of items to be displayed across all pages.
+          * The text to display as the validation message when `disablePast` is true and a date in the past is entered.
          */
-        "totalItems": number;
-    }
-}
-export interface IcPaginationBarCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLIcPaginationBarElement;
-}
-declare global {
-    interface HTMLIcDataTableElement extends Components.IcDataTable, HTMLStencilElement {
-    }
-    var HTMLIcDataTableElement: {
-        prototype: HTMLIcDataTableElement;
-        new (): HTMLIcDataTableElement;
-    };
-    interface HTMLIcPaginationBarElementEventMap {
-        "icPageChange": { value: number };
-        "icItemsPerPageChange": { value: number };
-    }
-    interface HTMLIcPaginationBarElement extends Components.IcPaginationBar, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLIcPaginationBarElementEventMap>(type: K, listener: (this: HTMLIcPaginationBarElement, ev: IcPaginationBarCustomEvent<HTMLIcPaginationBarElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLIcPaginationBarElementEventMap>(type: K, listener: (this: HTMLIcPaginationBarElement, ev: IcPaginationBarCustomEvent<HTMLIcPaginationBarElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+        "disablePastMessage"?: string;
+        /**
+          * If `true`, the disabled state will be set.
+         */
+        "disabled"?: boolean;
+        /**
+          * Returns the value as a Date object
+          * @returns Date
+         */
+        "getDate": () => Promise<Date>;
+        /**
+          * The helper text that will be displayed for additional field guidance. This will default to the text "Use format" along with the `dateFormat` value.
+         */
+        "helperText"?: string;
+        /**
+          * If `true`, the helper text will be visually hidden, but still read out by screenreaders.
+         */
+        "hideHelperText": boolean;
+        /**
+          * If `true`, the label will be visually hidden, but will still be read out by screen readers.
+         */
+        "hideLabel"?: boolean;
+        /**
+          * The ID for the input.
+         */
+        "inputId"?: string;
+        /**
+          * The text to display as the validation message when an invalid date is entered.
+         */
+        "invalidDateMessage"?: string;
+        /**
+          * The label for the date input.
+         */
+        "label": string;
+        /**
+          * The latest date that will be allowed. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object. The value of this prop is ignored if `disableFuture` is set to `true`.
+         */
+        "max"?: string | Date;
+        /**
+          * The earliest date that will be allowed. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object. The value of this prop is ignored if `disablePast` is set to `true`.
+         */
+        "min"?: string | Date;
+        /**
+          * The name of the control, which is submitted with the form data.
+         */
+        "name": string;
+        /**
+          * If `true`, the input will require a value.
+         */
+        "required"?: boolean;
+        "setCalendarFocus": () => Promise<void>;
+        "setDisableDays": (days: IcWeekDays[]) => Promise<void>;
+        "showCalendarButton"?: boolean;
+        /**
+          * If `true`, a button which clears the date input when clicked will be displayed.
+         */
+        "showClearButton"?: boolean;
+        /**
+          * The size of the date input to be displayed.
+         */
+        "size"?: IcSizes;
+        "triggerIcChange": (d: Date) => Promise<void>;
+        /**
+          * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation.
+         */
+        "validationStatus"?: IcInformationStatusOrEmpty;
+        /**
+          * The text to display as the validation message. This will override the built-in date validation.
+         */
+        "validationText"?: string;
+        /**
+          * The value of the date input. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object.
+         */
+        "value"?: string | Date | null | undefined;
     }
-    var HTMLIcPaginationBarElement: {
-        prototype: HTMLIcPaginationBarElement;
-        new (): HTMLIcPaginationBarElement;
-    };
-    interface HTMLElementTagNameMap {
-        "ic-data-table": HTMLIcDataTableElement;
-        "ic-pagination-bar": HTMLIcPaginationBarElement;
+    interface IcDatePicker {
+        /**
+          * The format in which the date will be displayed.
+         */
+        "dateFormat"?: IcDateFormat;
+        /**
+          * The days of the week to disable.
+         */
+        "disableDays"?: IcWeekDays[];
+        /**
+          * The text to display as the validation message when `disableDays` is `true` and a disabled date is entered.
+         */
+        "disableDaysMessage"?: string;
+        /**
+          * If `true`, dates in the future are not allowed. A validation message will appear if a date in the future is entered.
+         */
+        "disableFuture"?: boolean;
+        /**
+          * The text to display as the validation message when `disableFuture` is `true` and a date in the future is entered.
+         */
+        "disableFutureMessage"?: string;
+        /**
+          * If `true`, dates in the past are not allowed. A validation message will appear if a date in the past is entered.
+         */
+        "disablePast"?: boolean;
+        /**
+          * The text to display as the validation message when `disablePast` is `true` and a date in the past is entered.
+         */
+        "disablePastMessage"?: string;
+        /**
+          * If `true`, the disabled state will be set.
+         */
+        "disabled"?: boolean;
+        /**
+          * The helper text that will be displayed for additional field guidance. This will default to the text "Use format" along with the `dateFormat` value.
+         */
+        "helperText"?: string;
+        /**
+          * If `true`, the helper text will be visually hidden, but still read out by screenreaders.
+         */
+        "hideHelperText": boolean;
+        /**
+          * If `true`, the label will be visually hidden, but the required label will still be read out by screen readers.
+         */
+        "hideLabel"?: boolean;
+        /**
+          * The ID for the input field. The default will be an automatically generated value.
+         */
+        "inputId"?: string;
+        /**
+          * The text to display as the validation message when an invalid date is entered.
+         */
+        "invalidDateMessage"?: string;
+        /**
+          * The label for the date input.
+         */
+        "label": string;
+        /**
+          * The latest date that will be allowed. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object. The value of this prop is ignored if `disableFuture` is set to `true`.
+         */
+        "max"?: string | Date;
+        /**
+          * The earliest date that will be allowed. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object. The value of this prop is ignored if `disablePast` is set to `true`.
+         */
+        "min"?: string | Date;
+        /**
+          * The name of the control, which is submitted with the form data.
+         */
+        "name"?: string;
+        /**
+          * The date visible when the calendar opens. Used if no date is currently selected. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object.
+         */
+        "openAtDate": string | Date;
+        /**
+          * If `true`, the input will require a value.
+         */
+        "required"?: boolean;
+        /**
+          * @deprecated This prop should not be used anymore. If `false` hides the date input control and just displays the calendar.
+         */
+        "showDateInput"?: boolean;
+        /**
+          * If `true`, days outside the current month will be visible in the date picker.
+         */
+        "showDaysOutsideMonth"?: boolean;
+        /**
+          * If `true`, the `Clear` button on the date picker will be visible.
+         */
+        "showPickerClearButton"?: boolean;
+        /**
+          * If `true`, the `Go to today` button on the date picker will be visible.
+         */
+        "showPickerTodayButton"?: boolean;
+        /**
+          * The size of the date picker to be displayed.
+         */
+        "size"?: IcSizes;
+        /**
+          * The first day of the week. `0` for Sunday, `1` for Monday, etc. Default is Monday.
+         */
+        "startOfWeek"?: IcWeekDays;
+        /**
+          * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation.
+         */
+        "validationStatus"?: IcInformationStatusOrEmpty;
+        /**
+          * The text to display as the validation message. This will override the built-in date validation.
+         */
+        "validationText"?: string;
+        /**
+          * The value of the date picker. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object.
+         */
+        "value"?: string | Date | null | undefined;
     }
-}
-declare namespace LocalJSX {
-    interface IcDataTable {
+    interface IcMenuWithMulti {
         /**
-          * The title for the table only visible to screen readers.
+          * Determines whether options manually set as values (by pressing 'Enter') when they receive focus using keyboard navigation.
          */
-        "caption": string;
+        "activationType"?: IcActivationTypes;
         /**
-          * The column headers for the table.
+          * The reference to an anchor element the menu will position itself from when rendered.
          */
-        "columns": IcDataTableColumnObject[];
+        "anchorEl": HTMLElement;
+        "autoFocusOnSelected": boolean;
         /**
-          * The row content for the table.
+          * If `true`, the menu will close when an option is selected.
          */
-        "data"?: { [key: string]: any }[];
+        "closeOnSelect": boolean;
         /**
-          * Set the density of the table including font and padding.
+          * If `true`, the menu will fill the width of the container.
          */
-        "density"?: IcDataTableDensityOptions;
+        "fullWidth": boolean;
+        "handleClickOpen": () => Promise<void>;
         /**
-          * Applies a border to the table container.
+          * Used alongside activationType If menu is opened via keyboard navigation (i.e. Enter, ArrowUp or ArrowDown), emit optionSelect custom event.
+          * @param event - keyboard event
          */
-        "embedded"?: boolean;
+        "handleKeyboardOpen": (event: KeyboardEvent) => Promise<void>;
+        "handleSetFirstOption": () => Promise<void>;
+        "initPopperJs": (anchor: HTMLElement) => Promise<void>;
         /**
-          * If `true`, column headers will not be visible.
+          * The reference to the input element.
          */
-        "hideColumnHeaders"?: boolean;
+        "inputEl": HTMLElement;
         /**
-          * Sets the props for the pagination bar.
+          * The label for the input element.
          */
-        "paginationOptions"?: {
-    itemsPerPage?: { label: string; value: string }[];
-    type?: IcPaginationTypes;
-    control?: IcPaginationControlTypes;
-    itemsPerPageControl?: boolean;
-    goToPageControl?: boolean;
-    alignment?: IcPaginationAlignmentOptions;
-  };
+        "inputLabel": string;
         /**
-          * If `true`, adds a pagination bar to the bottom of the table.
+          * The custom name for the label field for IcMenuOption.
          */
-        "showPagination"?: boolean;
+        "labelField": string;
         /**
-          * Sets the order columns will be sorted in and allows for 'default' sorts to be added.
+          * The ID of the menu.
          */
-        "sortOptions"?: {
-    sortOrders: IcDataTableSortOrderOptions[];
-    defaultColumn?: string;
-  };
+        "menuId": string;
         /**
-          * If `true`, allows table columns to be sorted using applied sort buttons.
+          * If `true`, the menu will be displayed open.
          */
-        "sortable"?: boolean;
+        "open": boolean;
         /**
-          * If `true`, column headers will remain at the top of the table when scrolling vertically.
+          * The possible menu selection options.
          */
-        "stickyColumnHeaders"?: boolean;
+        "options": IcMenuOption[];
+        "parentEl"?: HTMLElement;
         /**
-          * If `true`, row headers will remain to the left when scrolling horizontally.
+          * Specify the mode search bar uses to search. `navigation` allows for quick lookups of a set of values, `query` allows for more general searches.
          */
-        "stickyRowHeaders"?: boolean;
+        "searchMode"?: IcSearchBarSearchModes;
+        "selectOnEnter"?: boolean;
+        /**
+          * The size of the menu.
+         */
+        "size"?: IcSizes;
+        /**
+          * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
+         */
+        "small"?: boolean;
+        /**
+          * The value of the currently selected option - or array of values (if multiple options allowed).
+         */
+        "value": string | string[];
+        /**
+          * The custom name for the value field for IcMenuOption.
+         */
+        "valueField": string;
     }
     interface IcPaginationBar {
         /**
@@ -227,44 +526,48 @@ declare namespace LocalJSX {
          */
         "appearance"?: IcThemeForeground;
         /**
-          * The label which will be used in place of 'items' if paginationType is data. Should be capitalised.
+          * The current page number to be displayed on the pagination bar.
+         */
+        "currentPage"?: number;
+        /**
+          * If `true`, the 'All' option will be hidden from the 'items per page' select input.
+         */
+        "hideAllFromItemsPerPage"?: boolean;
+        /**
+          * If `true`, the number of total items and current item range or number of total pages and current page will be hidden.
+         */
+        "hideRangeLabel"?: boolean;
+        /**
+          * The text which will be used in place of 'Item' on the pagination bar.
          */
         "itemLabel"?: string;
         /**
-          * The options which will be displayed for 'items per page' select input. Set a maximum of 4 options including a required 'All' option with value equal to total number of items.
+          * The options which will be displayed for 'items per page' select input.
          */
         "itemsPerPageOptions"?: {
     label: string;
     value: string;
   }[];
         /**
-          * Emitted when the items per page option is changed.
-         */
-        "onIcItemsPerPageChange"?: (event: IcPaginationBarCustomEvent<{ value: number }>) => void;
-        /**
-          * Emitted when a page is navigated to via the 'go to' input.
+          * The text which will be used in place of 'Page' on the pagination bar.
          */
-        "onIcPageChange"?: (event: IcPaginationBarCustomEvent<{ value: number }>) => void;
+        "pageLabel"?: string;
         /**
-          * The label which will be used in place of 'Page' if paginationType is page. Should be capitalised.
+          * Whether total number of items and current item range or total number of pages and current page is displayed.
          */
-        "pageLabel"?: string;
+        "rangeLabelType"?: IcPaginationLabelTypes;
         /**
-          * Whether the displayed pagination is simple or complex.
+          * The items per page option to be selected.
          */
-        "paginationControl"?: IcPaginationControlTypes;
+        "selectedItemsPerPage"?: number;
         /**
-          * Whether total number of items and current item range or total number of pages and current page is displayed.
+          * If `true`, the pagination bar is set to the first page when the 'items per page' changes
          */
-        "paginationType"?: IcPaginationTypes;
+        "setToFirstPageOnPaginationChange"?: boolean;
         /**
           * If `true`, the 'go to page' control should be displayed.
          */
         "showGoToPageControl"?: boolean;
-        /**
-          * If `true`, the number of total items and current item range or number of total pages and current page should be displayed.
-         */
-        "showItemsPerPage"?: boolean;
         /**
           * If `true`, the select input to control 'items per page' should be displayed.
          */
@@ -273,18 +576,1299 @@ declare namespace LocalJSX {
           * Total number of items to be displayed across all pages.
          */
         "totalItems": number;
+        /**
+          * Whether the displayed pagination is simple or complex.
+         */
+        "type"?: IcPaginationTypes;
+    }
+    interface IcSelectWithMulti {
+        /**
+          * **[DEPRECATED]** This prop should not be used anymore.
+         */
+        "charactersUntilSuggestions"?: number;
+        /**
+          * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
+         */
+        "debounce"?: number;
+        /**
+          * If `true`, the built in filtering will be disabled for a searchable variant. For example, if options will already be filtered from external source.
+         */
+        "disableFilter"?: boolean;
+        /**
+          * If `true`, the disabled state will be set.
+         */
+        "disabled"?: boolean;
+        /**
+          * The text displayed when there are no options in the option list.
+         */
+        "emptyOptionListText": string;
+        /**
+          * The <form> element to associate the select with.
+         */
+        "form"?: string;
+        /**
+          * The URL that processes the information submitted by the select. It overrides the action attribute of the select's form owner. Does nothing if there is no form owner. This prop should only be used with searchable select and will only be applied if searchable is true.
+         */
+        "formaction"?: string;
+        /**
+          * The way the submitted form data is encoded. This prop should only be used with searchable select and will only be applied if searchable is true.
+         */
+        "formenctype"?: string;
+        /**
+          * The HTTP method used to submit the form. This prop should only be used with searchable select and will only be applied if searchable is true.
+         */
+        "formmethod"?: string;
+        /**
+          * If `true`, the form will not be validated when submitted. This prop should only be used with searchable select and will only be applied if searchable is true.
+         */
+        "formnovalidate"?: boolean;
+        /**
+          * The place to display the response from submitting the form. It overrides the target attribute of the select's form owner. This prop should only be used with searchable select and will only be applied if searchable is true.
+         */
+        "formtarget"?: string;
+        /**
+          * If `true`, the select element will fill the width of the container. This prop should only be used with searchable select and will only be applied if searchable is true.
+         */
+        "fullWidth": boolean;
+        /**
+          * The helper text that will be displayed for additional field guidance.
+         */
+        "helperText"?: string;
+        /**
+          * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
+         */
+        "hideLabel"?: boolean;
+        /**
+          * If `true`, descriptions of options will be included when filtering options in a searchable select. Only applies to built in filtering.
+         */
+        "includeDescriptionsInSearch"?: boolean;
+        /**
+          * If `true`, group titles of grouped options will be included when filtering options in a searchable select. Only applies to built in filtering.
+         */
+        "includeGroupTitlesInSearch"?: boolean;
+        /**
+          * The label for the select.
+         */
+        "label": string;
+        /**
+          * If `true`, the loading state will be triggered when fetching options asynchronously.
+         */
+        "loading"?: boolean;
+        /**
+          * The message displayed when external loading times out.
+         */
+        "loadingErrorLabel"?: string;
+        /**
+          * The message displayed whilst the options are being loaded externally.
+         */
+        "loadingLabel"?: string;
+        /**
+          * If `true`, multiple options can be selected.
+         */
+        "multiple"?: boolean;
+        /**
+          * The name of the control, which is submitted with the form data.
+         */
+        "name"?: string;
+        /**
+          * The possible selection options.
+         */
+        "options"?: IcMenuOption[];
+        /**
+          * The placeholder value to be displayed.
+         */
+        "placeholder"?: string;
+        /**
+          * If `true`, the readonly state will be set.
+         */
+        "readonly"?: boolean;
+        /**
+          * If `true`, the select will require a value.
+         */
+        "required"?: boolean;
+        /**
+          * Whether the search string of the searchable select should match the start of or anywhere in the options. Only applies to built in filtering.
+         */
+        "searchMatchPosition"?: IcSearchMatchPositions;
+        /**
+          * If `true`, a searchable variant of the select will be displayed which can be typed in to filter options. This functionality is only available on the single-select variant of the select component.
+         */
+        "searchable"?: boolean;
+        /**
+          * If `true`, the icOptionSelect event will be fired on enter instead of ArrowUp and ArrowDown.
+         */
+        "selectOnEnter"?: boolean;
+        /**
+          * Sets focus on the input box.
+         */
+        "setFocus": () => Promise<void>;
+        /**
+          * If `true`, a button which clears the select input when clicked will be displayed. The button will always appear on the searchable select.
+         */
+        "showClearButton"?: boolean;
+        /**
+          * The size of the select.
+         */
+        "size"?: IcSizes;
+        /**
+          * **[DEPRECATED]** This prop should not be used anymore. Set prop `size` to "small" instead.
+         */
+        "small"?: boolean;
+        /**
+          * If using external filtering, set a timeout for when loading takes too long.
+         */
+        "timeout"?: number;
+        /**
+          * The validation status - e.g. 'error' | 'warning' | 'success'.
+         */
+        "validationStatus"?: IcInformationStatusOrEmpty;
+        /**
+          * The text to display as the validation message.
+         */
+        "validationText"?: string;
+        /**
+          * The value of the select, reflected by the value of the currently selected option. For the searchable variant, the value is also reflected by the user input. For the multi-select variant, the value must be an array of option values.
+         */
+        "value"?: string | string[];
+    }
+    interface IcTreeItem {
+        "appearance"?: IcThemeForegroundNoDefault1;
+        /**
+          * If `true`, the tree item appears in the disabled state.
+         */
+        "disabled"?: boolean;
+        /**
+          * If `true`, the tree item appears in the expanded state.
+         */
+        "expanded": boolean;
+        "hasParentExpanded": boolean;
+        /**
+          * The URL that the tree item link points to. If set, the tree item will render as an "a" tag, otherwise it will render as a div.
+         */
+        "href"?: string | undefined;
+        /**
+          * The human language of the linked URL.
+         */
+        "hreflang"?: string;
+        "isParent": boolean;
+        /**
+          * The label of the tree item.
+         */
+        "label": string;
+        /**
+          * How much of the referrer to send when following the link.
+         */
+        "referrerpolicy"?: ReferrerPolicy;
+        /**
+          * The relationship of the linked URL as space-separated link types.
+         */
+        "rel"?: string;
+        /**
+          * If `true`, the tree item appears in the selected state.
+         */
+        "selected": boolean;
+        /**
+          * Sets focus on the native `input`.
+         */
+        "setFocus": () => Promise<void>;
+        "size"?: IcSizes;
+        /**
+          * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
+         */
+        "target"?: string;
+        /**
+          * If `true`, the tree item label will be truncated instead of text wrapping.
+         */
+        "truncateTreeItem"?: boolean;
+        "updateAriaLabel": () => Promise<void>;
+    }
+    interface IcTreeView {
+        /**
+          * The appearance of the tree view, e.g. dark, or light.
+         */
+        "appearance"?: IcThemeForegroundNoDefault1;
+        /**
+          * The heading of the tree view.
+         */
+        "heading"?: string;
+        /**
+          * The size of the tree view.
+         */
+        "size"?: IcSizes;
+        /**
+          * If `true`, the tree view heading will be truncated instead of text wrapping.
+         */
+        "truncateHeading"?: boolean;
+        /**
+          * If `true`, tree items will be truncated, unless they are individually overridden.
+         */
+        "truncateTreeItems"?: boolean;
+    }
+}
+export interface IcDataTableCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIcDataTableElement;
+}
+export interface IcDataTableTitleBarCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIcDataTableTitleBarElement;
+}
+export interface IcDateInputCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIcDateInputElement;
+}
+export interface IcDatePickerCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIcDatePickerElement;
+}
+export interface IcMenuWithMultiCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIcMenuWithMultiElement;
+}
+export interface IcPaginationBarCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIcPaginationBarElement;
+}
+export interface IcSelectWithMultiCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIcSelectWithMultiElement;
+}
+export interface IcTreeItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIcTreeItemElement;
+}
+declare global {
+    interface HTMLIcCardHorizontalElement extends Components.IcCardHorizontal, HTMLStencilElement {
+    }
+    var HTMLIcCardHorizontalElement: {
+        prototype: HTMLIcCardHorizontalElement;
+        new (): HTMLIcCardHorizontalElement;
+    };
+    interface HTMLIcDataTableElementEventMap {
+        "icRowHeightChange": void;
+        "icSelectedRowChange": object;
+        "icSortChange": IcSortEventDetail;
+    }
+    interface HTMLIcDataTableElement extends Components.IcDataTable, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIcDataTableElementEventMap>(type: K, listener: (this: HTMLIcDataTableElement, ev: IcDataTableCustomEvent<HTMLIcDataTableElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIcDataTableElementEventMap>(type: K, listener: (this: HTMLIcDataTableElement, ev: IcDataTableCustomEvent<HTMLIcDataTableElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLIcDataTableElement: {
+        prototype: HTMLIcDataTableElement;
+        new (): HTMLIcDataTableElement;
+    };
+    interface HTMLIcDataTableTitleBarElementEventMap {
+        "icTableDensityUpdate": IcDensityUpdateEventDetail;
+    }
+    interface HTMLIcDataTableTitleBarElement extends Components.IcDataTableTitleBar, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIcDataTableTitleBarElementEventMap>(type: K, listener: (this: HTMLIcDataTableTitleBarElement, ev: IcDataTableTitleBarCustomEvent<HTMLIcDataTableTitleBarElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIcDataTableTitleBarElementEventMap>(type: K, listener: (this: HTMLIcDataTableTitleBarElement, ev: IcDataTableTitleBarCustomEvent<HTMLIcDataTableTitleBarElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLIcDataTableTitleBarElement: {
+        prototype: HTMLIcDataTableTitleBarElement;
+        new (): HTMLIcDataTableTitleBarElement;
+    };
+    interface HTMLIcDateInputElementEventMap {
+        "calendarButtonClicked": { value: Date };
+        "icBlur": { value: Date };
+        "icChange": { value: Date };
+        "icFocus": { value: Date };
+    }
+    interface HTMLIcDateInputElement extends Components.IcDateInput, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIcDateInputElementEventMap>(type: K, listener: (this: HTMLIcDateInputElement, ev: IcDateInputCustomEvent<HTMLIcDateInputElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIcDateInputElementEventMap>(type: K, listener: (this: HTMLIcDateInputElement, ev: IcDateInputCustomEvent<HTMLIcDateInputElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLIcDateInputElement: {
+        prototype: HTMLIcDateInputElement;
+        new (): HTMLIcDateInputElement;
+    };
+    interface HTMLIcDatePickerElementEventMap {
+        "icChange": { value: Date };
+        "icSelectedDateChange": { value: Date };
+    }
+    interface HTMLIcDatePickerElement extends Components.IcDatePicker, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIcDatePickerElementEventMap>(type: K, listener: (this: HTMLIcDatePickerElement, ev: IcDatePickerCustomEvent<HTMLIcDatePickerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIcDatePickerElementEventMap>(type: K, listener: (this: HTMLIcDatePickerElement, ev: IcDatePickerCustomEvent<HTMLIcDatePickerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLIcDatePickerElement: {
+        prototype: HTMLIcDatePickerElement;
+        new (): HTMLIcDatePickerElement;
+    };
+    interface HTMLIcMenuWithMultiElementEventMap {
+        "menuKeyPress": { isNavKey: boolean; key: string };
+        "menuOptionId": IcMenuOptionIdEventDetail;
+        "menuOptionSelect": IcOptionSelectEventDetail;
+        "menuOptionSelectAll": { select: boolean };
+        "menuStateChange": IcMenuChangeEventDetail;
+        "retryButtonClicked": IcValueEventDetail;
+        "timeoutBlur": { ev: FocusEvent };
+        "ungroupedOptionsSet": { options: IcMenuOption[] };
+    }
+    interface HTMLIcMenuWithMultiElement extends Components.IcMenuWithMulti, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIcMenuWithMultiElementEventMap>(type: K, listener: (this: HTMLIcMenuWithMultiElement, ev: IcMenuWithMultiCustomEvent<HTMLIcMenuWithMultiElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIcMenuWithMultiElementEventMap>(type: K, listener: (this: HTMLIcMenuWithMultiElement, ev: IcMenuWithMultiCustomEvent<HTMLIcMenuWithMultiElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLIcMenuWithMultiElement: {
+        prototype: HTMLIcMenuWithMultiElement;
+        new (): HTMLIcMenuWithMultiElement;
+    };
+    interface HTMLIcPaginationBarElementEventMap {
+        "icPageChange": IcPageChangeEventDetail;
+        "icItemsPerPageChange": { value: number };
+    }
+    interface HTMLIcPaginationBarElement extends Components.IcPaginationBar, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIcPaginationBarElementEventMap>(type: K, listener: (this: HTMLIcPaginationBarElement, ev: IcPaginationBarCustomEvent<HTMLIcPaginationBarElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIcPaginationBarElementEventMap>(type: K, listener: (this: HTMLIcPaginationBarElement, ev: IcPaginationBarCustomEvent<HTMLIcPaginationBarElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLIcPaginationBarElement: {
+        prototype: HTMLIcPaginationBarElement;
+        new (): HTMLIcPaginationBarElement;
+    };
+    interface HTMLIcSelectWithMultiElementEventMap {
+        "icBlur": void;
+        "icChange": IcValueEventDetail;
+        "icClear": void;
+        "icFocus": void;
+        "icInput": IcValueEventDetail;
+        "icOptionSelect": IcOptionSelectEventDetail;
+        "icOptionDeselect": IcOptionSelectEventDetail;
+        "icRetryLoad": IcValueEventDetail;
+    }
+    interface HTMLIcSelectWithMultiElement extends Components.IcSelectWithMulti, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIcSelectWithMultiElementEventMap>(type: K, listener: (this: HTMLIcSelectWithMultiElement, ev: IcSelectWithMultiCustomEvent<HTMLIcSelectWithMultiElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIcSelectWithMultiElementEventMap>(type: K, listener: (this: HTMLIcSelectWithMultiElement, ev: IcSelectWithMultiCustomEvent<HTMLIcSelectWithMultiElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLIcSelectWithMultiElement: {
+        prototype: HTMLIcSelectWithMultiElement;
+        new (): HTMLIcSelectWithMultiElement;
+    };
+    interface HTMLIcTreeItemElementEventMap {
+        "icTreeItemSelected": { id: string };
+    }
+    interface HTMLIcTreeItemElement extends Components.IcTreeItem, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIcTreeItemElementEventMap>(type: K, listener: (this: HTMLIcTreeItemElement, ev: IcTreeItemCustomEvent<HTMLIcTreeItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIcTreeItemElementEventMap>(type: K, listener: (this: HTMLIcTreeItemElement, ev: IcTreeItemCustomEvent<HTMLIcTreeItemElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLIcTreeItemElement: {
+        prototype: HTMLIcTreeItemElement;
+        new (): HTMLIcTreeItemElement;
+    };
+    interface HTMLIcTreeViewElement extends Components.IcTreeView, HTMLStencilElement {
+    }
+    var HTMLIcTreeViewElement: {
+        prototype: HTMLIcTreeViewElement;
+        new (): HTMLIcTreeViewElement;
+    };
+    interface HTMLElementTagNameMap {
+        "ic-card-horizontal": HTMLIcCardHorizontalElement;
+        "ic-data-table": HTMLIcDataTableElement;
+        "ic-data-table-title-bar": HTMLIcDataTableTitleBarElement;
+        "ic-date-input": HTMLIcDateInputElement;
+        "ic-date-picker": HTMLIcDatePickerElement;
+        "ic-menu-with-multi": HTMLIcMenuWithMultiElement;
+        "ic-pagination-bar": HTMLIcPaginationBarElement;
+        "ic-select-with-multi": HTMLIcSelectWithMultiElement;
+        "ic-tree-item": HTMLIcTreeItemElement;
+        "ic-tree-view": HTMLIcTreeViewElement;
+    }
+}
+declare namespace LocalJSX {
+    interface IcCardHorizontal {
+        /**
+          * If `true`, the horizontal card will be a clickable variant, instead of static.
+         */
+        "clickable"?: boolean;
+        /**
+          * If `true`, the horizontal card will be disabled if it is clickable.
+         */
+        "disabled"?: boolean;
+        /**
+          * The heading for the horizontal card. This is required, unless a slotted heading is used.
+         */
+        "heading"?: string;
+        /**
+          * The URL that the clickable horizontal card link points to. If set, the clickable horizontal card will render as an "a" tag, otherwise it will render as a button.
+         */
+        "href"?: string | undefined;
+        /**
+          * The human language of the linked URL.
+         */
+        "hreflang"?: string;
+        /**
+          * The main body message of the horizontal card.
+         */
+        "message"?: string;
+        /**
+          * How much of the referrer to send when following the link.
+         */
+        "referrerpolicy"?: ReferrerPolicy;
+        /**
+          * The relationship of the linked URL as space-separated link types.
+         */
+        "rel"?: string;
+        /**
+          * The size of the horizontal card.
+         */
+        "size"?: IcCardSizes;
+        /**
+          * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
+         */
+        "target"?: string;
+    }
+    interface IcDataTable {
+        /**
+          * The title for the table only visible to screen readers.
+         */
+        "caption": string;
+        /**
+          * Determines whether the column header should be truncated and display a tooltip. Default is `false`.
+         */
+        "columnHeaderTruncation"?: boolean;
+        /**
+          * The column headers for the table.
+         */
+        "columns": IcDataTableColumnObject[];
+        /**
+          * The row content for the table.
+         */
+        "data"?: IcDataTableDataType[];
+        /**
+          * Set the density of the table including font and padding.
+         */
+        "density"?: IcDataTableDensityOptions;
+        /**
+          * If `true`, the built in sort functionality will be disabled. For example, if rows will already be sorted from an external source.
+         */
+        "disableAutoSort"?: boolean;
+        /**
+          * Applies a border to the table container.
+         */
+        "embedded"?: boolean;
+        /**
+          * Sets the row height on all rows in the table that aren't set using the `variableRowHeight` method.
+         */
+        "globalRowHeight"?: IcDataTableRowHeights;
+        /**
+          * Sets the table height. Can be set to `auto` or a specific value in `px`, `rem`, or `%`.
+         */
+        "height"?: string;
+        /**
+          * If `true`, column headers will not be visible.
+         */
+        "hideColumnHeaders"?: boolean;
+        /**
+          * If `true`, the selected row is highlighted using a background colour.
+         */
+        "highlightSelectedRow"?: boolean;
+        /**
+          * When set to `true`, the full table will show a loading state, featuring a radial indicator.
+         */
+        "loading"?: boolean;
+        /**
+          * Sets the props for the circular loading indicator used in the loading state.
+         */
+        "loadingOptions"?: {
+    appearance?: IcThemeForegroundNoDefault;
+    description?: string;
+    label?: string;
+    labelDuration?: number;
+    max?: number;
+    min?: number;
+    progress?: number;
+    showBackground?: boolean;
+    overlay?: boolean;
+  };
+        /**
+          * Sets the maximum width of the data table. Can be set in `px`, `rem`, or `%`.
+         */
+        "maxWidth"?: string;
+        /**
+          * Sets the minimum width of the data table. Can be set in `px`, `rem`, or `%`.
+         */
+        "minWidth"?: string;
+        /**
+          * The minimum amount of time the `loading` state displays for before showing the data. Used to prevent flashing in the component.
+         */
+        "minimumLoadingDisplayDuration"?: number;
+        /**
+          * Emitted when the `globalRowHeight` or `variableRowHeight` properties change in the data table.
+         */
+        "onIcRowHeightChange"?: (event: IcDataTableCustomEvent<void>) => void;
+        /**
+          * Emitted when the selected row changes in the data table.
+         */
+        "onIcSelectedRowChange"?: (event: IcDataTableCustomEvent<object>) => void;
+        /**
+          * Emitted when a column sort button is clicked.
+         */
+        "onIcSortChange"?: (event: IcDataTableCustomEvent<IcSortEventDetail>) => void;
+        /**
+          * Sets the props for the built-in pagination bar. If the `pagination-bar` slot is used then this prop is ignored.
+         */
+        "paginationBarOptions"?: IcPaginationBarOptions;
+        /**
+          * If `true`, adds a pagination bar to the bottom of the table.
+         */
+        "showPagination"?: boolean;
+        /**
+          * Sets the order columns will be sorted in and allows for 'default' sorts to be added.
+         */
+        "sortOptions"?: {
+    sortOrders: IcDataTableSortOrderOptions[];
+    defaultColumn?: string;
+  };
+        /**
+          * If `true`, allows table columns to be sorted using applied sort buttons.
+         */
+        "sortable"?: boolean;
+        /**
+          * If `true`, column headers will remain at the top of the table when scrolling vertically.
+         */
+        "stickyColumnHeaders"?: boolean;
+        /**
+          * If `true`, row headers will remain to the left when scrolling horizontally.
+         */
+        "stickyRowHeaders"?: boolean;
+        /**
+          * Sets the layout of the table
+         */
+        "tableLayout"?: "fixed" | "auto";
+        /**
+          * Sets the method used to truncate long text in cells where textWrap is `false`. The `tooltip` truncation pattern allows the overflowing text to be seen in a tooltip. The `show-hide` truncation pattern allows the overflowing text to be shown and hidden using the ic-typography "See more"/"See less" buttons.
+         */
+        "truncationPattern"?: IcDataTableTruncationTypes;
+        /**
+          * If `true`, the table displays a linear loading indicator below the header row to indicate an updating state.
+         */
+        "updating"?: boolean;
+        /**
+          * Sets the props for the linear loading indicator used in the updating state.
+         */
+        "updatingOptions"?: {
+    appearance?: IcThemeForegroundNoDefault;
+    description?: string;
+    max?: number;
+    min?: number;
+    progress?: number;
+  };
+        /**
+          * Allows for custom setting of row heights on individual rows based on an individual value from the `data` prop and the row index. If the function returns `null`, that row's height will be set to the `globalRowHeight` property.
+         */
+        "variableRowHeight"?: (params: {
+    [key: string]: any;
+    index: number;
+  }) => IcDataTableRowHeights | null;
+        /**
+          * Sets the table width. Can be set to `auto` or a specific value in `px`, `rem`, or `%`.
+         */
+        "width"?: string;
+    }
+    interface IcDataTableTitleBar {
+        /**
+          * The description that is displayed below the `heading` and `metadata`. Can be overridden with the `description` slot.
+         */
+        "description"?: string;
+        /**
+          * The heading of the title bar. Can be overridden with the `heading` slot. If used with an `ic-data-table` it will default to the table's `caption` unless overridden.
+         */
+        "heading"?: string;
+        /**
+          * When `true`, the density select will not be rendered.
+         */
+        "hideDensitySelect"?: boolean;
+        /**
+          * The metadata displayed next to the `heading`.
+         */
+        "metadata"?: string;
+        /**
+          * Emitted when the table density select value is changed.
+         */
+        "onIcTableDensityUpdate"?: (event: IcDataTableTitleBarCustomEvent<IcDensityUpdateEventDetail>) => void;
+    }
+    interface IcDateInput {
+        /**
+          * The format in which the date will be displayed.
+         */
+        "dateFormat"?: IcDateFormat;
+        /**
+          * The days of the week to disable.
+         */
+        "disableDays"?: IcWeekDays[];
+        /**
+          * The text to display as the validation message when `disableDays` is set and a disabled date is entered.
+         */
+        "disableDaysMessage"?: string;
+        /**
+          * If `true`, dates in the future are not allowed. A validation message will appear if a date in the future is entered.
+         */
+        "disableFuture"?: boolean;
+        /**
+          * The text to display as the validation message when `disableFuture` is true and a date in the future is entered.
+         */
+        "disableFutureMessage"?: string;
+        /**
+          * If `true`, dates in the past are not allowed. A validation message will appear if a date in the past is entered.
+         */
+        "disablePast"?: boolean;
+        /**
+          * The text to display as the validation message when `disablePast` is true and a date in the past is entered.
+         */
+        "disablePastMessage"?: string;
+        /**
+          * If `true`, the disabled state will be set.
+         */
+        "disabled"?: boolean;
+        /**
+          * The helper text that will be displayed for additional field guidance. This will default to the text "Use format" along with the `dateFormat` value.
+         */
+        "helperText"?: string;
+        /**
+          * If `true`, the helper text will be visually hidden, but still read out by screenreaders.
+         */
+        "hideHelperText"?: boolean;
+        /**
+          * If `true`, the label will be visually hidden, but will still be read out by screen readers.
+         */
+        "hideLabel"?: boolean;
+        /**
+          * The ID for the input.
+         */
+        "inputId"?: string;
+        /**
+          * The text to display as the validation message when an invalid date is entered.
+         */
+        "invalidDateMessage"?: string;
+        /**
+          * The label for the date input.
+         */
+        "label": string;
+        /**
+          * The latest date that will be allowed. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object. The value of this prop is ignored if `disableFuture` is set to `true`.
+         */
+        "max"?: string | Date;
+        /**
+          * The earliest date that will be allowed. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object. The value of this prop is ignored if `disablePast` is set to `true`.
+         */
+        "min"?: string | Date;
+        /**
+          * The name of the control, which is submitted with the form data.
+         */
+        "name"?: string;
+        /**
+          * Emitted when the input loses focus.
+         */
+        "onIcBlur"?: (event: IcDateInputCustomEvent<{ value: Date }>) => void;
+        /**
+          * Emitted when the value has changed.
+         */
+        "onIcChange"?: (event: IcDateInputCustomEvent<{ value: Date }>) => void;
+        /**
+          * Emitted when the input gains focus.
+         */
+        "onIcFocus"?: (event: IcDateInputCustomEvent<{ value: Date }>) => void;
+        /**
+          * If `true`, the input will require a value.
+         */
+        "required"?: boolean;
+        /**
+          * If `true`, a button which clears the date input when clicked will be displayed.
+         */
+        "showClearButton"?: boolean;
+        /**
+          * The size of the date input to be displayed.
+         */
+        "size"?: IcSizes;
+        /**
+          * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation.
+         */
+        "validationStatus"?: IcInformationStatusOrEmpty;
+        /**
+          * The text to display as the validation message. This will override the built-in date validation.
+         */
+        "validationText"?: string;
+        /**
+          * The value of the date input. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object.
+         */
+        "value"?: string | Date | null | undefined;
+    }
+    interface IcDatePicker {
+        /**
+          * The format in which the date will be displayed.
+         */
+        "dateFormat"?: IcDateFormat;
+        /**
+          * The days of the week to disable.
+         */
+        "disableDays"?: IcWeekDays[];
+        /**
+          * The text to display as the validation message when `disableDays` is `true` and a disabled date is entered.
+         */
+        "disableDaysMessage"?: string;
+        /**
+          * If `true`, dates in the future are not allowed. A validation message will appear if a date in the future is entered.
+         */
+        "disableFuture"?: boolean;
+        /**
+          * The text to display as the validation message when `disableFuture` is `true` and a date in the future is entered.
+         */
+        "disableFutureMessage"?: string;
+        /**
+          * If `true`, dates in the past are not allowed. A validation message will appear if a date in the past is entered.
+         */
+        "disablePast"?: boolean;
+        /**
+          * The text to display as the validation message when `disablePast` is `true` and a date in the past is entered.
+         */
+        "disablePastMessage"?: string;
+        /**
+          * If `true`, the disabled state will be set.
+         */
+        "disabled"?: boolean;
+        /**
+          * The helper text that will be displayed for additional field guidance. This will default to the text "Use format" along with the `dateFormat` value.
+         */
+        "helperText"?: string;
+        /**
+          * If `true`, the helper text will be visually hidden, but still read out by screenreaders.
+         */
+        "hideHelperText"?: boolean;
+        /**
+          * If `true`, the label will be visually hidden, but the required label will still be read out by screen readers.
+         */
+        "hideLabel"?: boolean;
+        /**
+          * The ID for the input field. The default will be an automatically generated value.
+         */
+        "inputId"?: string;
+        /**
+          * The text to display as the validation message when an invalid date is entered.
+         */
+        "invalidDateMessage"?: string;
+        /**
+          * The label for the date input.
+         */
+        "label": string;
+        /**
+          * The latest date that will be allowed. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object. The value of this prop is ignored if `disableFuture` is set to `true`.
+         */
+        "max"?: string | Date;
+        /**
+          * The earliest date that will be allowed. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object. The value of this prop is ignored if `disablePast` is set to `true`.
+         */
+        "min"?: string | Date;
+        /**
+          * The name of the control, which is submitted with the form data.
+         */
+        "name"?: string;
+        /**
+          * Emitted when the value has changed.
+         */
+        "onIcChange"?: (event: IcDatePickerCustomEvent<{ value: Date }>) => void;
+        /**
+          * Emitted when the selected date has changed.
+         */
+        "onIcSelectedDateChange"?: (event: IcDatePickerCustomEvent<{ value: Date }>) => void;
+        /**
+          * The date visible when the calendar opens. Used if no date is currently selected. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object.
+         */
+        "openAtDate"?: string | Date;
+        /**
+          * If `true`, the input will require a value.
+         */
+        "required"?: boolean;
+        /**
+          * @deprecated This prop should not be used anymore. If `false` hides the date input control and just displays the calendar.
+         */
+        "showDateInput"?: boolean;
+        /**
+          * If `true`, days outside the current month will be visible in the date picker.
+         */
+        "showDaysOutsideMonth"?: boolean;
+        /**
+          * If `true`, the `Clear` button on the date picker will be visible.
+         */
+        "showPickerClearButton"?: boolean;
+        /**
+          * If `true`, the `Go to today` button on the date picker will be visible.
+         */
+        "showPickerTodayButton"?: boolean;
+        /**
+          * The size of the date picker to be displayed.
+         */
+        "size"?: IcSizes;
+        /**
+          * The first day of the week. `0` for Sunday, `1` for Monday, etc. Default is Monday.
+         */
+        "startOfWeek"?: IcWeekDays;
+        /**
+          * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation.
+         */
+        "validationStatus"?: IcInformationStatusOrEmpty;
+        /**
+          * The text to display as the validation message. This will override the built-in date validation.
+         */
+        "validationText"?: string;
+        /**
+          * The value of the date picker. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object.
+         */
+        "value"?: string | Date | null | undefined;
+    }
+    interface IcMenuWithMulti {
+        /**
+          * Determines whether options manually set as values (by pressing 'Enter') when they receive focus using keyboard navigation.
+         */
+        "activationType"?: IcActivationTypes;
+        /**
+          * The reference to an anchor element the menu will position itself from when rendered.
+         */
+        "anchorEl": HTMLElement;
+        /**
+          * If `true`, the menu will close when an option is selected.
+         */
+        "closeOnSelect"?: boolean;
+        /**
+          * If `true`, the menu will fill the width of the container.
+         */
+        "fullWidth"?: boolean;
+        /**
+          * The reference to the input element.
+         */
+        "inputEl": HTMLElement;
+        /**
+          * The label for the input element.
+         */
+        "inputLabel": string;
+        /**
+          * The custom name for the label field for IcMenuOption.
+         */
+        "labelField"?: string;
+        /**
+          * The ID of the menu.
+         */
+        "menuId": string;
+        /**
+          * If `true`, the menu will be displayed open.
+         */
+        "open": boolean;
+        /**
+          * The possible menu selection options.
+         */
+        "options": IcMenuOption[];
+        /**
+          * Specify the mode search bar uses to search. `navigation` allows for quick lookups of a set of values, `query` allows for more general searches.
+         */
+        "searchMode"?: IcSearchBarSearchModes;
+        /**
+          * The size of the menu.
+         */
+        "size"?: IcSizes;
+        /**
+          * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
+         */
+        "small"?: boolean;
+        /**
+          * The value of the currently selected option - or array of values (if multiple options allowed).
+         */
+        "value": string | string[];
+        /**
+          * The custom name for the value field for IcMenuOption.
+         */
+        "valueField"?: string;
+    }
+    interface IcPaginationBar {
+        /**
+          * Sets the alignment of the items in the pagination bar.
+         */
+        "alignment"?: IcPaginationAlignmentOptions;
+        /**
+          * Sets the styling for the items in the pagination bar.
+         */
+        "appearance"?: IcThemeForeground;
+        /**
+          * The current page number to be displayed on the pagination bar.
+         */
+        "currentPage"?: number;
+        /**
+          * If `true`, the 'All' option will be hidden from the 'items per page' select input.
+         */
+        "hideAllFromItemsPerPage"?: boolean;
+        /**
+          * If `true`, the number of total items and current item range or number of total pages and current page will be hidden.
+         */
+        "hideRangeLabel"?: boolean;
+        /**
+          * The text which will be used in place of 'Item' on the pagination bar.
+         */
+        "itemLabel"?: string;
+        /**
+          * The options which will be displayed for 'items per page' select input.
+         */
+        "itemsPerPageOptions"?: {
+    label: string;
+    value: string;
+  }[];
+        /**
+          * Emitted when the items per page option is changed.
+         */
+        "onIcItemsPerPageChange"?: (event: IcPaginationBarCustomEvent<{ value: number }>) => void;
+        /**
+          * Emitted when a page is navigated to via the 'go to' input. The `detail` property contains `value` (i.e. the page number) and a `fromItemsPerPage` flag to indicate if the event was triggered by the `icItemsPerPageChange` event also occurring.
+         */
+        "onIcPageChange"?: (event: IcPaginationBarCustomEvent<IcPageChangeEventDetail>) => void;
+        /**
+          * The text which will be used in place of 'Page' on the pagination bar.
+         */
+        "pageLabel"?: string;
+        /**
+          * Whether total number of items and current item range or total number of pages and current page is displayed.
+         */
+        "rangeLabelType"?: IcPaginationLabelTypes;
+        /**
+          * The items per page option to be selected.
+         */
+        "selectedItemsPerPage"?: number;
+        /**
+          * If `true`, the pagination bar is set to the first page when the 'items per page' changes
+         */
+        "setToFirstPageOnPaginationChange"?: boolean;
+        /**
+          * If `true`, the 'go to page' control should be displayed.
+         */
+        "showGoToPageControl"?: boolean;
+        /**
+          * If `true`, the select input to control 'items per page' should be displayed.
+         */
+        "showItemsPerPageControl"?: boolean;
+        /**
+          * Total number of items to be displayed across all pages.
+         */
+        "totalItems": number;
+        /**
+          * Whether the displayed pagination is simple or complex.
+         */
+        "type"?: IcPaginationTypes;
+    }
+    interface IcSelectWithMulti {
+        /**
+          * **[DEPRECATED]** This prop should not be used anymore.
+         */
+        "charactersUntilSuggestions"?: number;
+        /**
+          * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
+         */
+        "debounce"?: number;
+        /**
+          * If `true`, the built in filtering will be disabled for a searchable variant. For example, if options will already be filtered from external source.
+         */
+        "disableFilter"?: boolean;
+        /**
+          * If `true`, the disabled state will be set.
+         */
+        "disabled"?: boolean;
+        /**
+          * The text displayed when there are no options in the option list.
+         */
+        "emptyOptionListText"?: string;
+        /**
+          * The <form> element to associate the select with.
+         */
+        "form"?: string;
+        /**
+          * The URL that processes the information submitted by the select. It overrides the action attribute of the select's form owner. Does nothing if there is no form owner. This prop should only be used with searchable select and will only be applied if searchable is true.
+         */
+        "formaction"?: string;
+        /**
+          * The way the submitted form data is encoded. This prop should only be used with searchable select and will only be applied if searchable is true.
+         */
+        "formenctype"?: string;
+        /**
+          * The HTTP method used to submit the form. This prop should only be used with searchable select and will only be applied if searchable is true.
+         */
+        "formmethod"?: string;
+        /**
+          * If `true`, the form will not be validated when submitted. This prop should only be used with searchable select and will only be applied if searchable is true.
+         */
+        "formnovalidate"?: boolean;
+        /**
+          * The place to display the response from submitting the form. It overrides the target attribute of the select's form owner. This prop should only be used with searchable select and will only be applied if searchable is true.
+         */
+        "formtarget"?: string;
+        /**
+          * If `true`, the select element will fill the width of the container. This prop should only be used with searchable select and will only be applied if searchable is true.
+         */
+        "fullWidth"?: boolean;
+        /**
+          * The helper text that will be displayed for additional field guidance.
+         */
+        "helperText"?: string;
+        /**
+          * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
+         */
+        "hideLabel"?: boolean;
+        /**
+          * If `true`, descriptions of options will be included when filtering options in a searchable select. Only applies to built in filtering.
+         */
+        "includeDescriptionsInSearch"?: boolean;
+        /**
+          * If `true`, group titles of grouped options will be included when filtering options in a searchable select. Only applies to built in filtering.
+         */
+        "includeGroupTitlesInSearch"?: boolean;
+        /**
+          * The label for the select.
+         */
+        "label": string;
+        /**
+          * If `true`, the loading state will be triggered when fetching options asynchronously.
+         */
+        "loading"?: boolean;
+        /**
+          * The message displayed when external loading times out.
+         */
+        "loadingErrorLabel"?: string;
+        /**
+          * The message displayed whilst the options are being loaded externally.
+         */
+        "loadingLabel"?: string;
+        /**
+          * If `true`, multiple options can be selected.
+         */
+        "multiple"?: boolean;
+        /**
+          * The name of the control, which is submitted with the form data.
+         */
+        "name"?: string;
+        /**
+          * Emitted when the select loses focus.
+         */
+        "onIcBlur"?: (event: IcSelectWithMultiCustomEvent<void>) => void;
+        /**
+          * Emitted when the value changes.
+         */
+        "onIcChange"?: (event: IcSelectWithMultiCustomEvent<IcValueEventDetail>) => void;
+        /**
+          * Emitted when the clear button is clicked.
+         */
+        "onIcClear"?: (event: IcSelectWithMultiCustomEvent<void>) => void;
+        /**
+          * Emitted when the select gains focus.
+         */
+        "onIcFocus"?: (event: IcSelectWithMultiCustomEvent<void>) => void;
+        /**
+          * Emitted when a keyboard input occurred.
+         */
+        "onIcInput"?: (event: IcSelectWithMultiCustomEvent<IcValueEventDetail>) => void;
+        /**
+          * Emitted when `multiple` is `true` and an option is deselected.
+         */
+        "onIcOptionDeselect"?: (event: IcSelectWithMultiCustomEvent<IcOptionSelectEventDetail>) => void;
+        /**
+          * Emitted when an option is selected. Selecting an option will also trigger an `icChange/onIcChange` due to the value being updated.
+         */
+        "onIcOptionSelect"?: (event: IcSelectWithMultiCustomEvent<IcOptionSelectEventDetail>) => void;
+        /**
+          * Emitted when the 'retry loading' button is clicked for a searchable variant.
+         */
+        "onIcRetryLoad"?: (event: IcSelectWithMultiCustomEvent<IcValueEventDetail>) => void;
+        /**
+          * The possible selection options.
+         */
+        "options"?: IcMenuOption[];
+        /**
+          * The placeholder value to be displayed.
+         */
+        "placeholder"?: string;
+        /**
+          * If `true`, the readonly state will be set.
+         */
+        "readonly"?: boolean;
+        /**
+          * If `true`, the select will require a value.
+         */
+        "required"?: boolean;
+        /**
+          * Whether the search string of the searchable select should match the start of or anywhere in the options. Only applies to built in filtering.
+         */
+        "searchMatchPosition"?: IcSearchMatchPositions;
+        /**
+          * If `true`, a searchable variant of the select will be displayed which can be typed in to filter options. This functionality is only available on the single-select variant of the select component.
+         */
+        "searchable"?: boolean;
+        /**
+          * If `true`, the icOptionSelect event will be fired on enter instead of ArrowUp and ArrowDown.
+         */
+        "selectOnEnter"?: boolean;
+        /**
+          * If `true`, a button which clears the select input when clicked will be displayed. The button will always appear on the searchable select.
+         */
+        "showClearButton"?: boolean;
+        /**
+          * The size of the select.
+         */
+        "size"?: IcSizes;
+        /**
+          * **[DEPRECATED]** This prop should not be used anymore. Set prop `size` to "small" instead.
+         */
+        "small"?: boolean;
+        /**
+          * If using external filtering, set a timeout for when loading takes too long.
+         */
+        "timeout"?: number;
+        /**
+          * The validation status - e.g. 'error' | 'warning' | 'success'.
+         */
+        "validationStatus"?: IcInformationStatusOrEmpty;
+        /**
+          * The text to display as the validation message.
+         */
+        "validationText"?: string;
+        /**
+          * The value of the select, reflected by the value of the currently selected option. For the searchable variant, the value is also reflected by the user input. For the multi-select variant, the value must be an array of option values.
+         */
+        "value"?: string | string[];
+    }
+    interface IcTreeItem {
+        /**
+          * If `true`, the tree item appears in the disabled state.
+         */
+        "disabled"?: boolean;
+        /**
+          * If `true`, the tree item appears in the expanded state.
+         */
+        "expanded"?: boolean;
+        /**
+          * The URL that the tree item link points to. If set, the tree item will render as an "a" tag, otherwise it will render as a div.
+         */
+        "href"?: string | undefined;
+        /**
+          * The human language of the linked URL.
+         */
+        "hreflang"?: string;
+        /**
+          * The label of the tree item.
+         */
+        "label"?: string;
+        /**
+          * Emitted when tree item is selected.
+         */
+        "onIcTreeItemSelected"?: (event: IcTreeItemCustomEvent<{ id: string }>) => void;
+        /**
+          * How much of the referrer to send when following the link.
+         */
+        "referrerpolicy"?: ReferrerPolicy;
+        /**
+          * The relationship of the linked URL as space-separated link types.
+         */
+        "rel"?: string;
+        /**
+          * If `true`, the tree item appears in the selected state.
+         */
+        "selected"?: boolean;
+        /**
+          * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
+         */
+        "target"?: string;
+        /**
+          * If `true`, the tree item label will be truncated instead of text wrapping.
+         */
+        "truncateTreeItem"?: boolean;
+    }
+    interface IcTreeView {
+        /**
+          * The appearance of the tree view, e.g. dark, or light.
+         */
+        "appearance"?: IcThemeForegroundNoDefault1;
+        /**
+          * The heading of the tree view.
+         */
+        "heading"?: string;
+        /**
+          * The size of the tree view.
+         */
+        "size"?: IcSizes;
+        /**
+          * If `true`, the tree view heading will be truncated instead of text wrapping.
+         */
+        "truncateHeading"?: boolean;
+        /**
+          * If `true`, tree items will be truncated, unless they are individually overridden.
+         */
+        "truncateTreeItems"?: boolean;
     }
     interface IntrinsicElements {
+        "ic-card-horizontal": IcCardHorizontal;
         "ic-data-table": IcDataTable;
+        "ic-data-table-title-bar": IcDataTableTitleBar;
+        "ic-date-input": IcDateInput;
+        "ic-date-picker": IcDatePicker;
+        "ic-menu-with-multi": IcMenuWithMulti;
         "ic-pagination-bar": IcPaginationBar;
+        "ic-select-with-multi": IcSelectWithMulti;
+        "ic-tree-item": IcTreeItem;
+        "ic-tree-view": IcTreeView;
     }
 }
 export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            "ic-card-horizontal": LocalJSX.IcCardHorizontal & JSXBase.HTMLAttributes<HTMLIcCardHorizontalElement>;
             "ic-data-table": LocalJSX.IcDataTable & JSXBase.HTMLAttributes<HTMLIcDataTableElement>;
+            "ic-data-table-title-bar": LocalJSX.IcDataTableTitleBar & JSXBase.HTMLAttributes<HTMLIcDataTableTitleBarElement>;
+            "ic-date-input": LocalJSX.IcDateInput & JSXBase.HTMLAttributes<HTMLIcDateInputElement>;
+            "ic-date-picker": LocalJSX.IcDatePicker & JSXBase.HTMLAttributes<HTMLIcDatePickerElement>;
+            "ic-menu-with-multi": LocalJSX.IcMenuWithMulti & JSXBase.HTMLAttributes<HTMLIcMenuWithMultiElement>;
             "ic-pagination-bar": LocalJSX.IcPaginationBar & JSXBase.HTMLAttributes<HTMLIcPaginationBarElement>;
+            "ic-select-with-multi": LocalJSX.IcSelectWithMulti & JSXBase.HTMLAttributes<HTMLIcSelectWithMultiElement>;
+            "ic-tree-item": LocalJSX.IcTreeItem & JSXBase.HTMLAttributes<HTMLIcTreeItemElement>;
+            "ic-tree-view": LocalJSX.IcTreeView & JSXBase.HTMLAttributes<HTMLIcTreeViewElement>;
         }
     }
 }