@ukic/canary-react 2.0.0-canary.3 → 2.0.0-canary.31

package/README.md

@@ -1,68 +1,68 @@
-# [Canary]: The UK Intelligence Community React UI Kit
-
-[![OGL V3 License](https://img.shields.io/badge/license-OGLv3-blue.svg)](https://github.com/mi6/ic-design-system/tree/main/LICENSE)
-[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/mi6/ic-design-system/tree/main/LICENSE)
-
-The [Intelligence Community Design System](https://design.sis.gov.uk) helps the United Kingdom's Intelligence Community (MI6, GCHQ, MI5, and partners) to quickly build powerful capabilities that are accessible and easy to use.
-
-This is a joint project led by [MI6](https://www.sis.gov.uk), working with [GCHQ](https://www.gchq.gov.uk) and [MI5](https://www.mi5.gov.uk).
-
-## Installing
-
-To install the components:
-
-### Step one
-
-In the root of your project:
-
-```shell
-// using npm
-npm install @ukic/canary-react @ukic/fonts
-
-// using yarn
-rm package-lock.json
-yarn add @ukic/canary-react @ukic/fonts
-```
-
-### Step two
-
-Import the component(s) in your React files.
-
-```jsx
-import { IcComponent } from "@ukic/canary-react";
-```
-
-### Step three
-
-To get the correct styling with the ICDS components, import the core CSS file.
-
-Add the following into the top level CSS file for your project.
-
-```css
-@import "@ukic/fonts/dist/fonts.css";
-@import "@ukic/canary-react/dist/core/core.css";
-```
-
-In order to be rendered consistently across browsers and in line with modern standards, each of the ICDS components uses styles from a global CSS file based on [Normalize.css](https://necolas.github.io/normalize.css/). 
-
-If you would like to import these styles to apply them to the rest of your project and slotted elements used within any of the ICDS components, add the following into the top level CSS file as well.
-
-```css
-@import "@ukic/canary-react/dist/core/normalize.css";
-```
-
-### Step four
-
-The `@ukic/canary-react` package will need to be transformed before you can use these components in Jest tests.
-
-Add a `transformIgnorePatterns` field with the value `["/node_modules/(?!@ukic/canary-react)"]` to your Jest config.
-
-## Security
-
-If you've found a vulnerability, we want to know so that we can fix it. [Our security policy](https://github.com/mi6/ic-ui-kit/blob/main/SECURITY.md) tells you how to do this.
-
-## License
-
-Unless stated otherwise, the codebase is released under the [MIT License](https://opensource.org/licenses/MIT). This covers both the codebase and any sample code in the documentation. The documentation is and available under the terms of the [Open Government License v3.0](https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/).
-
+# [Canary]: The UK Intelligence Community React UI Kit
+
+[![OGL V3 License](https://img.shields.io/badge/license-OGLv3-blue.svg)](https://github.com/mi6/ic-design-system/tree/main/LICENSE)
+[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/mi6/ic-design-system/tree/main/LICENSE)
+
+The [Intelligence Community Design System](https://design.sis.gov.uk) helps the United Kingdom's Intelligence Community (MI6, GCHQ, MI5, and partners) to quickly build powerful capabilities that are accessible and easy to use.
+
+This is a joint project led by [MI6](https://www.sis.gov.uk), working with [GCHQ](https://www.gchq.gov.uk) and [MI5](https://www.mi5.gov.uk).
+
+## Installing
+
+To install the components:
+
+### Step one
+
+In the root of your project:
+
+```shell
+// using npm
+npm install @ukic/canary-react @ukic/fonts
+
+// using yarn
+rm package-lock.json
+yarn add @ukic/canary-react @ukic/fonts
+```
+
+### Step two
+
+To get the correct styling with the ICDS components, import the core CSS file.
+
+Add the following into the top level CSS file for your project.
+
+```css
+@import "@ukic/fonts/dist/fonts.css";
+@import "@ukic/canary-react/dist/core/core.css";
+```
+
+In order to be rendered consistently across browsers and in line with modern standards, each of the ICDS components uses styles from a global CSS file based on [Normalize.css](https://necolas.github.io/normalize.css/). 
+
+If you would like to import these styles to apply them to the rest of your project and slotted elements used within any of the ICDS components, add the following into the top level CSS file as well.
+
+```css
+@import "@ukic/canary-react/dist/core/normalize.css";
+```
+
+### Step three
+
+Import the component(s) in your React files.
+
+```jsx
+import { IcComponent } from "@ukic/canary-react";
+```
+
+### Step four
+
+The `@ukic/canary-react` package will need to be transformed before you can use these components in Jest tests.
+
+Add a `transformIgnorePatterns` field with the value `["/node_modules/(?!@ukic/canary-react)"]` to your Jest config.
+
+## Security
+
+If you've found a vulnerability, we want to know so that we can fix it. [Our security policy](https://github.com/mi6/ic-ui-kit/blob/main/SECURITY.md) tells you how to do this.
+
+## License
+
+Unless stated otherwise, the codebase is released under the [MIT License](https://opensource.org/licenses/MIT). This covers both the codebase and any sample code in the documentation. The documentation is and available under the terms of the [Open Government License v3.0](https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/).
+
 © Crown copyright 2022

package/dist/components.d.ts

@@ -1,63 +1,11 @@
-/// <reference types="react" />
 import type { JSX } from '@ukic/canary-web-components';
-export declare const IcAlert: import("react").ForwardRefExoticComponent<JSX.IcAlert & Omit<import("react").HTMLAttributes<HTMLIcAlertElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcAlertElement>>;
-export declare const IcBackToTop: import("react").ForwardRefExoticComponent<JSX.IcBackToTop & Omit<import("react").HTMLAttributes<HTMLIcBackToTopElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcBackToTopElement>>;
-export declare const IcBreadcrumb: import("react").ForwardRefExoticComponent<JSX.IcBreadcrumb & Omit<import("react").HTMLAttributes<HTMLIcBreadcrumbElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcBreadcrumbElement>>;
-export declare const IcBreadcrumbGroup: import("react").ForwardRefExoticComponent<JSX.IcBreadcrumbGroup & Omit<import("react").HTMLAttributes<HTMLIcBreadcrumbGroupElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcBreadcrumbGroupElement>>;
-export declare const IcButton: import("react").ForwardRefExoticComponent<JSX.IcButton & Omit<import("react").HTMLAttributes<HTMLIcButtonElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcButtonElement>>;
-export declare const IcCard: import("react").ForwardRefExoticComponent<JSX.IcCard & Omit<import("react").HTMLAttributes<HTMLIcCardElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcCardElement>>;
-export declare const IcCheckbox: import("react").ForwardRefExoticComponent<JSX.IcCheckbox & Omit<import("react").HTMLAttributes<HTMLIcCheckboxElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcCheckboxElement>>;
-export declare const IcCheckboxGroup: import("react").ForwardRefExoticComponent<JSX.IcCheckboxGroup & Omit<import("react").HTMLAttributes<HTMLIcCheckboxGroupElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcCheckboxGroupElement>>;
-export declare const IcChip: import("react").ForwardRefExoticComponent<JSX.IcChip & Omit<import("react").HTMLAttributes<HTMLIcChipElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcChipElement>>;
-export declare const IcClassificationBanner: import("react").ForwardRefExoticComponent<JSX.IcClassificationBanner & Omit<import("react").HTMLAttributes<HTMLIcClassificationBannerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcClassificationBannerElement>>;
-export declare const IcDataEntity: import("react").ForwardRefExoticComponent<JSX.IcDataEntity & Omit<import("react").HTMLAttributes<HTMLIcDataEntityElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcDataEntityElement>>;
-export declare const IcDataRow: import("react").ForwardRefExoticComponent<JSX.IcDataRow & Omit<import("react").HTMLAttributes<HTMLIcDataRowElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcDataRowElement>>;
+export declare const IcCardHorizontal: import("react").ForwardRefExoticComponent<JSX.IcCardHorizontal & Omit<import("react").HTMLAttributes<HTMLIcCardHorizontalElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcCardHorizontalElement>>;
 export declare const IcDataTable: import("react").ForwardRefExoticComponent<JSX.IcDataTable & Omit<import("react").HTMLAttributes<HTMLIcDataTableElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcDataTableElement>>;
-export declare const IcDialog: import("react").ForwardRefExoticComponent<JSX.IcDialog & Omit<import("react").HTMLAttributes<HTMLIcDialogElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcDialogElement>>;
-export declare const IcDivider: import("react").ForwardRefExoticComponent<JSX.IcDivider & Omit<import("react").HTMLAttributes<HTMLIcDividerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcDividerElement>>;
-export declare const IcEmptyState: import("react").ForwardRefExoticComponent<JSX.IcEmptyState & Omit<import("react").HTMLAttributes<HTMLIcEmptyStateElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcEmptyStateElement>>;
-export declare const IcFooter: import("react").ForwardRefExoticComponent<JSX.IcFooter & Omit<import("react").HTMLAttributes<HTMLIcFooterElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcFooterElement>>;
-export declare const IcFooterLink: import("react").ForwardRefExoticComponent<JSX.IcFooterLink & Omit<import("react").HTMLAttributes<HTMLIcFooterLinkElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcFooterLinkElement>>;
-export declare const IcFooterLinkGroup: import("react").ForwardRefExoticComponent<JSX.IcFooterLinkGroup & Omit<import("react").HTMLAttributes<HTMLIcFooterLinkGroupElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcFooterLinkGroupElement>>;
-export declare const IcHero: import("react").ForwardRefExoticComponent<JSX.IcHero & Omit<import("react").HTMLAttributes<HTMLIcHeroElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcHeroElement>>;
-export declare const IcHorizontalScroll: import("react").ForwardRefExoticComponent<JSX.IcHorizontalScroll & Omit<import("react").HTMLAttributes<HTMLIcHorizontalScrollElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcHorizontalScrollElement>>;
-export declare const IcInputComponentContainer: import("react").ForwardRefExoticComponent<JSX.IcInputComponentContainer & Omit<import("react").HTMLAttributes<HTMLIcInputComponentContainerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcInputComponentContainerElement>>;
-export declare const IcInputContainer: import("react").ForwardRefExoticComponent<JSX.IcInputContainer & Omit<import("react").HTMLAttributes<HTMLIcInputContainerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcInputContainerElement>>;
-export declare const IcInputLabel: import("react").ForwardRefExoticComponent<JSX.IcInputLabel & Omit<import("react").HTMLAttributes<HTMLIcInputLabelElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcInputLabelElement>>;
-export declare const IcInputValidation: import("react").ForwardRefExoticComponent<JSX.IcInputValidation & Omit<import("react").HTMLAttributes<HTMLIcInputValidationElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcInputValidationElement>>;
-export declare const IcLink: import("react").ForwardRefExoticComponent<JSX.IcLink & Omit<import("react").HTMLAttributes<HTMLIcLinkElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcLinkElement>>;
-export declare const IcLoadingIndicator: import("react").ForwardRefExoticComponent<JSX.IcLoadingIndicator & Omit<import("react").HTMLAttributes<HTMLIcLoadingIndicatorElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcLoadingIndicatorElement>>;
-export declare const IcMenu: import("react").ForwardRefExoticComponent<JSX.IcMenu & Omit<import("react").HTMLAttributes<HTMLIcMenuElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcMenuElement>>;
-export declare const IcMenuGroup: import("react").ForwardRefExoticComponent<JSX.IcMenuGroup & Omit<import("react").HTMLAttributes<HTMLIcMenuGroupElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcMenuGroupElement>>;
-export declare const IcMenuItem: import("react").ForwardRefExoticComponent<JSX.IcMenuItem & Omit<import("react").HTMLAttributes<HTMLIcMenuItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcMenuItemElement>>;
-export declare const IcNavigationButton: import("react").ForwardRefExoticComponent<JSX.IcNavigationButton & Omit<import("react").HTMLAttributes<HTMLIcNavigationButtonElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcNavigationButtonElement>>;
-export declare const IcNavigationGroup: import("react").ForwardRefExoticComponent<JSX.IcNavigationGroup & Omit<import("react").HTMLAttributes<HTMLIcNavigationGroupElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcNavigationGroupElement>>;
-export declare const IcNavigationItem: import("react").ForwardRefExoticComponent<JSX.IcNavigationItem & Omit<import("react").HTMLAttributes<HTMLIcNavigationItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcNavigationItemElement>>;
-export declare const IcNavigationMenu: import("react").ForwardRefExoticComponent<JSX.IcNavigationMenu & Omit<import("react").HTMLAttributes<HTMLIcNavigationMenuElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcNavigationMenuElement>>;
-export declare const IcPageHeader: import("react").ForwardRefExoticComponent<JSX.IcPageHeader & Omit<import("react").HTMLAttributes<HTMLIcPageHeaderElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcPageHeaderElement>>;
-export declare const IcPagination: import("react").ForwardRefExoticComponent<JSX.IcPagination & Omit<import("react").HTMLAttributes<HTMLIcPaginationElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcPaginationElement>>;
+export declare const IcDataTableTitleBar: import("react").ForwardRefExoticComponent<JSX.IcDataTableTitleBar & Omit<import("react").HTMLAttributes<HTMLIcDataTableTitleBarElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcDataTableTitleBarElement>>;
+export declare const IcDateInput: import("react").ForwardRefExoticComponent<JSX.IcDateInput & Omit<import("react").HTMLAttributes<HTMLIcDateInputElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcDateInputElement>>;
+export declare const IcDatePicker: import("react").ForwardRefExoticComponent<JSX.IcDatePicker & Omit<import("react").HTMLAttributes<HTMLIcDatePickerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcDatePickerElement>>;
+export declare const IcMenuWithMulti: import("react").ForwardRefExoticComponent<JSX.IcMenuWithMulti & Omit<import("react").HTMLAttributes<HTMLIcMenuWithMultiElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcMenuWithMultiElement>>;
 export declare const IcPaginationBar: import("react").ForwardRefExoticComponent<JSX.IcPaginationBar & Omit<import("react").HTMLAttributes<HTMLIcPaginationBarElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcPaginationBarElement>>;
-export declare const IcPaginationItem: import("react").ForwardRefExoticComponent<JSX.IcPaginationItem & Omit<import("react").HTMLAttributes<HTMLIcPaginationItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcPaginationItemElement>>;
-export declare const IcPopoverMenu: import("react").ForwardRefExoticComponent<JSX.IcPopoverMenu & Omit<import("react").HTMLAttributes<HTMLIcPopoverMenuElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcPopoverMenuElement>>;
-export declare const IcRadioGroup: import("react").ForwardRefExoticComponent<JSX.IcRadioGroup & Omit<import("react").HTMLAttributes<HTMLIcRadioGroupElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcRadioGroupElement>>;
-export declare const IcRadioOption: import("react").ForwardRefExoticComponent<JSX.IcRadioOption & Omit<import("react").HTMLAttributes<HTMLIcRadioOptionElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcRadioOptionElement>>;
-export declare const IcSearchBar: import("react").ForwardRefExoticComponent<JSX.IcSearchBar & Omit<import("react").HTMLAttributes<HTMLIcSearchBarElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcSearchBarElement>>;
-export declare const IcSectionContainer: import("react").ForwardRefExoticComponent<JSX.IcSectionContainer & Omit<import("react").HTMLAttributes<HTMLIcSectionContainerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcSectionContainerElement>>;
-export declare const IcSelect: import("react").ForwardRefExoticComponent<JSX.IcSelect & Omit<import("react").HTMLAttributes<HTMLIcSelectElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcSelectElement>>;
-export declare const IcSideNavigation: import("react").ForwardRefExoticComponent<JSX.IcSideNavigation & Omit<import("react").HTMLAttributes<HTMLIcSideNavigationElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcSideNavigationElement>>;
-export declare const IcSkeleton: import("react").ForwardRefExoticComponent<JSX.IcSkeleton & Omit<import("react").HTMLAttributes<HTMLIcSkeletonElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcSkeletonElement>>;
-export declare const IcStatusTag: import("react").ForwardRefExoticComponent<JSX.IcStatusTag & Omit<import("react").HTMLAttributes<HTMLIcStatusTagElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcStatusTagElement>>;
-export declare const IcStep: import("react").ForwardRefExoticComponent<JSX.IcStep & Omit<import("react").HTMLAttributes<HTMLIcStepElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcStepElement>>;
-export declare const IcStepper: import("react").ForwardRefExoticComponent<JSX.IcStepper & Omit<import("react").HTMLAttributes<HTMLIcStepperElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcStepperElement>>;
-export declare const IcSwitch: import("react").ForwardRefExoticComponent<JSX.IcSwitch & Omit<import("react").HTMLAttributes<HTMLIcSwitchElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcSwitchElement>>;
-export declare const IcTab: import("react").ForwardRefExoticComponent<JSX.IcTab & Omit<import("react").HTMLAttributes<HTMLIcTabElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcTabElement>>;
-export declare const IcTabContext: import("react").ForwardRefExoticComponent<JSX.IcTabContext & Omit<import("react").HTMLAttributes<HTMLIcTabContextElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcTabContextElement>>;
-export declare const IcTabGroup: import("react").ForwardRefExoticComponent<JSX.IcTabGroup & Omit<import("react").HTMLAttributes<HTMLIcTabGroupElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcTabGroupElement>>;
-export declare const IcTabPanel: import("react").ForwardRefExoticComponent<JSX.IcTabPanel & Omit<import("react").HTMLAttributes<HTMLIcTabPanelElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcTabPanelElement>>;
-export declare const IcTextField: import("react").ForwardRefExoticComponent<JSX.IcTextField & Omit<import("react").HTMLAttributes<HTMLIcTextFieldElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcTextFieldElement>>;
-export declare const IcTheme: import("react").ForwardRefExoticComponent<JSX.IcTheme & Omit<import("react").HTMLAttributes<HTMLIcThemeElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcThemeElement>>;
-export declare const IcToast: import("react").ForwardRefExoticComponent<JSX.IcToast & Omit<import("react").HTMLAttributes<HTMLIcToastElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcToastElement>>;
-export declare const IcToastRegion: import("react").ForwardRefExoticComponent<JSX.IcToastRegion & Omit<import("react").HTMLAttributes<HTMLIcToastRegionElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcToastRegionElement>>;
-export declare const IcTooltip: import("react").ForwardRefExoticComponent<JSX.IcTooltip & Omit<import("react").HTMLAttributes<HTMLIcTooltipElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcTooltipElement>>;
-export declare const IcTopNavigation: import("react").ForwardRefExoticComponent<JSX.IcTopNavigation & Omit<import("react").HTMLAttributes<HTMLIcTopNavigationElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcTopNavigationElement>>;
-export declare const IcTypography: import("react").ForwardRefExoticComponent<JSX.IcTypography & Omit<import("react").HTMLAttributes<HTMLIcTypographyElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcTypographyElement>>;
+export declare const IcSelectWithMulti: import("react").ForwardRefExoticComponent<JSX.IcSelectWithMulti & Omit<import("react").HTMLAttributes<HTMLIcSelectWithMultiElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcSelectWithMultiElement>>;
+export declare const IcTreeItem: import("react").ForwardRefExoticComponent<JSX.IcTreeItem & Omit<import("react").HTMLAttributes<HTMLIcTreeItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcTreeItemElement>>;
+export declare const IcTreeView: import("react").ForwardRefExoticComponent<JSX.IcTreeView & Omit<import("react").HTMLAttributes<HTMLIcTreeViewElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcTreeViewElement>>;

package/dist/components.js

@@ -4,64 +4,13 @@
 import { createReactComponent } from './react-component-lib';
 import { defineCustomElements } from '@ukic/canary-web-components/loader';
 defineCustomElements();
-export const IcAlert = /*@__PURE__*/ createReactComponent('ic-alert');
-export const IcBackToTop = /*@__PURE__*/ createReactComponent('ic-back-to-top');
-export const IcBreadcrumb = /*@__PURE__*/ createReactComponent('ic-breadcrumb');
-export const IcBreadcrumbGroup = /*@__PURE__*/ createReactComponent('ic-breadcrumb-group');
-export const IcButton = /*@__PURE__*/ createReactComponent('ic-button');
-export const IcCard = /*@__PURE__*/ createReactComponent('ic-card');
-export const IcCheckbox = /*@__PURE__*/ createReactComponent('ic-checkbox');
-export const IcCheckboxGroup = /*@__PURE__*/ createReactComponent('ic-checkbox-group');
-export const IcChip = /*@__PURE__*/ createReactComponent('ic-chip');
-export const IcClassificationBanner = /*@__PURE__*/ createReactComponent('ic-classification-banner');
-export const IcDataEntity = /*@__PURE__*/ createReactComponent('ic-data-entity');
-export const IcDataRow = /*@__PURE__*/ createReactComponent('ic-data-row');
-export const IcDataTable = /*@__PURE__*/ createReactComponent('ic-data-table');
-export const IcDialog = /*@__PURE__*/ createReactComponent('ic-dialog');
-export const IcDivider = /*@__PURE__*/ createReactComponent('ic-divider');
-export const IcEmptyState = /*@__PURE__*/ createReactComponent('ic-empty-state');
-export const IcFooter = /*@__PURE__*/ createReactComponent('ic-footer');
-export const IcFooterLink = /*@__PURE__*/ createReactComponent('ic-footer-link');
-export const IcFooterLinkGroup = /*@__PURE__*/ createReactComponent('ic-footer-link-group');
-export const IcHero = /*@__PURE__*/ createReactComponent('ic-hero');
-export const IcHorizontalScroll = /*@__PURE__*/ createReactComponent('ic-horizontal-scroll');
-export const IcInputComponentContainer = /*@__PURE__*/ createReactComponent('ic-input-component-container');
-export const IcInputContainer = /*@__PURE__*/ createReactComponent('ic-input-container');
-export const IcInputLabel = /*@__PURE__*/ createReactComponent('ic-input-label');
-export const IcInputValidation = /*@__PURE__*/ createReactComponent('ic-input-validation');
-export const IcLink = /*@__PURE__*/ createReactComponent('ic-link');
-export const IcLoadingIndicator = /*@__PURE__*/ createReactComponent('ic-loading-indicator');
-export const IcMenu = /*@__PURE__*/ createReactComponent('ic-menu');
-export const IcMenuGroup = /*@__PURE__*/ createReactComponent('ic-menu-group');
-export const IcMenuItem = /*@__PURE__*/ createReactComponent('ic-menu-item');
-export const IcNavigationButton = /*@__PURE__*/ createReactComponent('ic-navigation-button');
-export const IcNavigationGroup = /*@__PURE__*/ createReactComponent('ic-navigation-group');
-export const IcNavigationItem = /*@__PURE__*/ createReactComponent('ic-navigation-item');
-export const IcNavigationMenu = /*@__PURE__*/ createReactComponent('ic-navigation-menu');
-export const IcPageHeader = /*@__PURE__*/ createReactComponent('ic-page-header');
-export const IcPagination = /*@__PURE__*/ createReactComponent('ic-pagination');
-export const IcPaginationBar = /*@__PURE__*/ createReactComponent('ic-pagination-bar');
-export const IcPaginationItem = /*@__PURE__*/ createReactComponent('ic-pagination-item');
-export const IcPopoverMenu = /*@__PURE__*/ createReactComponent('ic-popover-menu');
-export const IcRadioGroup = /*@__PURE__*/ createReactComponent('ic-radio-group');
-export const IcRadioOption = /*@__PURE__*/ createReactComponent('ic-radio-option');
-export const IcSearchBar = /*@__PURE__*/ createReactComponent('ic-search-bar');
-export const IcSectionContainer = /*@__PURE__*/ createReactComponent('ic-section-container');
-export const IcSelect = /*@__PURE__*/ createReactComponent('ic-select');
-export const IcSideNavigation = /*@__PURE__*/ createReactComponent('ic-side-navigation');
-export const IcSkeleton = /*@__PURE__*/ createReactComponent('ic-skeleton');
-export const IcStatusTag = /*@__PURE__*/ createReactComponent('ic-status-tag');
-export const IcStep = /*@__PURE__*/ createReactComponent('ic-step');
-export const IcStepper = /*@__PURE__*/ createReactComponent('ic-stepper');
-export const IcSwitch = /*@__PURE__*/ createReactComponent('ic-switch');
-export const IcTab = /*@__PURE__*/ createReactComponent('ic-tab');
-export const IcTabContext = /*@__PURE__*/ createReactComponent('ic-tab-context');
-export const IcTabGroup = /*@__PURE__*/ createReactComponent('ic-tab-group');
-export const IcTabPanel = /*@__PURE__*/ createReactComponent('ic-tab-panel');
-export const IcTextField = /*@__PURE__*/ createReactComponent('ic-text-field');
-export const IcTheme = /*@__PURE__*/ createReactComponent('ic-theme');
-export const IcToast = /*@__PURE__*/ createReactComponent('ic-toast');
-export const IcToastRegion = /*@__PURE__*/ createReactComponent('ic-toast-region');
-export const IcTooltip = /*@__PURE__*/ createReactComponent('ic-tooltip');
-export const IcTopNavigation = /*@__PURE__*/ createReactComponent('ic-top-navigation');
-export const IcTypography = /*@__PURE__*/ createReactComponent('ic-typography');
+export var IcCardHorizontal = /*@__PURE__*/ createReactComponent('ic-card-horizontal');
+export var IcDataTable = /*@__PURE__*/ createReactComponent('ic-data-table');
+export var IcDataTableTitleBar = /*@__PURE__*/ createReactComponent('ic-data-table-title-bar');
+export var IcDateInput = /*@__PURE__*/ createReactComponent('ic-date-input');
+export var IcDatePicker = /*@__PURE__*/ createReactComponent('ic-date-picker');
+export var IcMenuWithMulti = /*@__PURE__*/ createReactComponent('ic-menu-with-multi');
+export var IcPaginationBar = /*@__PURE__*/ createReactComponent('ic-pagination-bar');
+export var IcSelectWithMulti = /*@__PURE__*/ createReactComponent('ic-select-with-multi');
+export var IcTreeItem = /*@__PURE__*/ createReactComponent('ic-tree-item');
+export var IcTreeView = /*@__PURE__*/ createReactComponent('ic-tree-view');

package/dist/core/core.css

@@ -4,7 +4,7 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-primary-text)}a
     inset 0 0 0 8px var(--ic-architectural-white);--ic-border-focus-dark:0 0 0 2px white, 0 0 0 5px rgba(255 255 255 / 52%);--ic-elevation-raised:0 0 2px rgb(0 0 0 / 50%);--ic-elevation-overlay:0 2px 8px rgb(0 0 0 / 20%);--ic-elevation-modal:0 4px 16px rgb(0 0 0 / 25%);--ic-elevation-inset:inset 0 4px 16px rgb(0 0 0 / 25%),
     inset 0 -4px 16px rgb(0 0 0 / 25%);--ic-easing-transition-fast:var(--ic-transition-duration-fast)
     cubic-bezier(0.165, 0.84, 0.44, 1);--ic-easing-transition-slow:var(--ic-transition-duration-slow)
-    cubic-bezier(0.165, 0.84, 0.44, 1);--ic-transition-duration-fast:100ms;--ic-transition-duration-slow:300ms;--ic-border-disabled:var(--ic-space-1px) dashed var(--ic-architectural-200);--ic-border-light:var(--ic-space-1px) solid var(--ic-architectural-200);--ic-border-default:var(--ic-space-1px) solid var(--ic-architectural-400);--ic-border-hover:var(--ic-space-1px) solid var(--ic-architectural-500);--ic-border-pressed:var(--ic-space-1px) solid var(--ic-architectural-600);--ic-hc-border:var(--ic-space-1px) solid transparent;--ic-error-border-default:var(--ic-space-xxxs) solid var(--ic-status-error);--ic-error-border-hover:var(--ic-space-xxxs) solid
+    cubic-bezier(0.165, 0.84, 0.44, 1);--ic-transition-duration-fast:100ms;--ic-transition-duration-slow:300ms;--ic-border-width:0.0625rem;--ic-border-disabled:var(--ic-space-1px) dashed var(--ic-architectural-200);--ic-border-light:var(--ic-space-1px) solid var(--ic-architectural-200);--ic-border-default:var(--ic-space-1px) solid var(--ic-architectural-400);--ic-border-hover:var(--ic-space-1px) solid var(--ic-architectural-500);--ic-border-pressed:var(--ic-space-1px) solid var(--ic-architectural-600);--ic-hc-border:var(--ic-space-1px) solid transparent;--ic-error-border-default:var(--ic-space-xxxs) solid var(--ic-status-error);--ic-error-border-hover:var(--ic-space-xxxs) solid
     var(--ic-status-error-hover);--ic-error-border-pressed:var(--ic-space-xxxs) solid
     var(--ic-status-error-pressed);--ic-success-border-default:var(--ic-space-xxxs) solid
     var(--ic-status-success);--ic-success-border-hover:var(--ic-space-xxxs) solid
@@ -12,7 +12,7 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-primary-text)}a
     var(--ic-status-success-pressed);--ic-warning-border-default:var(--ic-space-xxxs) solid
     var(--ic-status-warning);--ic-warning-border-hover:var(--ic-space-xxxs) solid
     var(--ic-status-warning-hover);--ic-warning-border-pressed:var(--ic-space-xxxs) solid
-    var(--ic-status-warning-pressed);--ic-font-body-family:"Open Sans", "Helvetica Neue", "Arial", "sans-serif";--ic-font-heading-family:"Nunito Sans", sans-serif;--ic-font-code-family:"Source Code Pro", monospace;--ic-font-weight-extrabold:800;--ic-font-weight-bold:700;--ic-font-weight-semibold:600;--ic-font-weight-regular:400;--ic-font-size-h1:2.625rem;--ic-font-size-h2:2.125rem;--ic-font-size-h3:1.5rem;--ic-font-size-h4:1.25rem;--ic-font-size-regular:1rem;--ic-font-size-label:0.875rem;--ic-font-size-caption:0.75rem;--ic-font-line-height-h1:3.5rem;--ic-font-line-height-h2:3.5rem;--ic-font-line-height-h3:2.5rem;--ic-font-line-height-h4:2rem;--ic-font-line-height-subtitle-large:1.5rem;--ic-font-line-height-subtitle-small:1.5rem;--ic-font-line-height-body:1.5rem;--ic-font-line-height-caption:1.25rem;--ic-font-line-height-code:1.5rem;--ic-font-letter-spacing-0pt025:0.025rem;--ic-font-letter-spacing-0pt005:0.005rem;--ic-font-letter-spacing-0pt0025:0.0025rem;--ic-font-letter-spacing-0pt0015:0.0015rem;--ic-font-h1:var(--ic-font-weight-extrabold) var(--ic-font-size-h1) /
+    var(--ic-status-warning-pressed);--ic-font-body-family:"Open Sans", "Helvetica Neue", "Arial", "sans-serif";--ic-font-heading-family:"Nunito Sans", sans-serif;--ic-font-code-family:"Source Code Pro", monospace;--ic-font-weight-extrabold:800;--ic-font-weight-bold:700;--ic-font-weight-semibold:600;--ic-font-weight-regular:400;--ic-font-size-h1:2.625rem;--ic-font-size-h2:2.125rem;--ic-font-size-h3:1.5rem;--ic-font-size-h4:1.25rem;--ic-font-size-regular:1rem;--ic-font-size-label:0.875rem;--ic-font-size-caption:0.75rem;--ic-font-size-badge-small:0.563rem;--ic-font-line-height-h1:3.5rem;--ic-font-line-height-h2:3.5rem;--ic-font-line-height-h3:2.5rem;--ic-font-line-height-h4:2rem;--ic-font-line-height-subtitle-large:1.5rem;--ic-font-line-height-subtitle-small:1.5rem;--ic-font-line-height-body:1.5rem;--ic-font-line-height-caption:1.25rem;--ic-font-line-height-code:1.5rem;--ic-font-line-height-badge:0.875rem;--ic-font-line-height-badge-small:0.75rem;--ic-font-letter-spacing-0pt025:0.025rem;--ic-font-letter-spacing-0pt005:0.005rem;--ic-font-letter-spacing-0pt0025:0.0025rem;--ic-font-letter-spacing-0pt0015:0.0015rem;--ic-font-h1:var(--ic-font-weight-extrabold) var(--ic-font-size-h1) /
     var(--ic-font-line-height-h1) var(--ic-font-heading-family);--ic-font-h2:var(--ic-font-weight-bold) var(--ic-font-size-h2) /
     var(--ic-font-line-height-h2) var(--ic-font-heading-family);--ic-font-h3:var(--ic-font-weight-regular) var(--ic-font-size-h3) /
     var(--ic-font-line-height-h3) var(--ic-font-body-family);--ic-font-h4:var(--ic-font-weight-semibold) var(--ic-font-size-h4) /
@@ -28,7 +28,10 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-primary-text)}a
     var(--ic-font-code-family);--ic-font-code-small:var(--ic-font-weight-semibold) var(--ic-font-size-label) /
     var(--ic-font-line-height-code) var(--ic-font-code-family);--ic-font-code-extra-small:var(--ic-font-weight-regular)
     var(--ic-font-size-caption) / var(--ic-font-line-height-code)
-    var(--ic-font-code-family);--ic-keyline-darken-rgb:rgb(0 0 0 / 20%);--ic-keyline-darken:1px solid var(--ic-keyline-darken-rgb);--ic-keyline-lighten-rgb:rgb(255 255 255 / 20%);--ic-keyline-lighten:1px solid var(--ic-keyline-lighten-rgb);--ic-status-success-light:#e8fef3;--ic-status-success-r:0;--ic-status-success-g:112;--ic-status-success-b:60;--ic-status-success-a:1;--ic-status-success:rgb(
+    var(--ic-font-code-family);--ic-font-badge:var(--ic-font-weight-semibold) var(--ic-font-size-caption) /
+    var(--ic-font-line-height-badge) var(--ic-font-body-family);--ic-font-badge-small:var(--ic-font-weight-semibold)
+    var(--ic-font-size-badge-small) / var(--ic-font-line-height-badge-small)
+    var(--ic-font-body-family);--ic-keyline-darken-rgb:rgb(0 0 0 / 20%);--ic-keyline-darken:1px solid var(--ic-keyline-darken-rgb);--ic-keyline-lighten-rgb:rgb(255 255 255 / 20%);--ic-keyline-lighten:1px solid var(--ic-keyline-lighten-rgb);--ic-status-success-light:#e8fef3;--ic-status-success-r:0;--ic-status-success-g:112;--ic-status-success-b:60;--ic-status-success-a:1;--ic-status-success:rgb(
     var(--ic-status-success-r) var(--ic-status-success-g)
       var(--ic-status-success-b) / var(--ic-status-success-a)
   );--ic-status-success-hover:rgb(
@@ -59,7 +62,7 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-primary-text)}a
   );--ic-status-error-pressed:rgb(
     calc(var(--ic-status-error-r) * 0.6) calc(var(--ic-status-error-g) * 0.6)
       calc(var(--ic-status-error-b) * 0.6) / var(--ic-status-error-a)
-  );--ic-status-error-dark:#610a05;--ic-status-info-light:#e1f0fc;--ic-status-info-contrast:#488fe3;--ic-status-info:#124db3;--ic-status-info-dark:#041144;--ic-status-anomalous-light:#efdbff;--ic-status-anomalous-contrast:#b764fb;--ic-status-anomalous:#7c25c2;--ic-status-anomalous-dark:#350f54;--ic-status-unknown-light:var(--ic-architectural-40);--ic-status-unknown-contrast:var(--ic-architectural-300);--ic-status-unknown:var(--ic-architectural-500);--ic-status-unknown-dark:var(--ic-architectural-800);--ic-status-warning-mid:var(--ic-status-warning);--ic-status-warning-mid-hover:var(--ic-status-warning-hover);--ic-status-warning-mid-pressed:var(--ic-status-warning-pressed);--ic-status-success-background:var(--ic-status-success-light);--ic-status-warning-background:var(--ic-status-warning-light);--ic-status-error-background:var(--ic-status-error-light);--ic-status-info-background:var(--ic-status-info-light);--ic-architectural-20:#f9fafa;--ic-architectural-40:#f4f4f5;--ic-architectural-60:#eeeff0;--ic-architectural-80:#e8e9eb;--ic-architectural-100:#e1e3e5;--ic-architectural-200:#c4c8cd;--ic-architectural-300:#a7acb3;--ic-architectural-400:#8a919b;--ic-architectural-500:#6c7580;--ic-architectural-600:#575e68;--ic-architectural-700:#41464d;--ic-architectural-800:#2c2f34;--ic-architectural-900:#0b0c0c;--ic-architectural-white:#fff;--ic-architectural-black:#000;--ic-color-primary-text:#0b0c0c;--ic-color-white-text:#fff;--ic-color-secondary-text:#41464d;--ic-color-tertiary-text:#6c7580;--ic-action-default:#1759bc;--ic-action-default-hover:#0b399c;--ic-action-default-active:#07277e;--ic-action-default-active-alpha:rgba(23 89 188 / 50%);--ic-action-default-bg-hover:rgb(23 89 188 / 10%);--ic-action-default-bg-active:rgb(23 89 188 / 20%);--ic-action-default-bg-hover-no-alpha:#e7eef8;--ic-action-default-bg-active-no-alpha:#d0def2;--ic-action-destructive:#d4351c;--ic-action-destructive-hover:#ad1e0e;--ic-action-destructive-active:#8b1209;--ic-action-light:#fff;--ic-action-light-hover:#c4c8cd;--ic-action-light-active:#a7acb3;--ic-action-light-bg-hover:rgb(255 255 255 / 10%);--ic-action-light-bg-active:rgb(255 255 255 / 20%);--ic-action-dark:#0b0c0c;--ic-action-dark-hover:#2c2f34;--ic-action-dark-active:#41464d;--ic-action-dark-bg-hover:rgb(65 70 77 / 10%);--ic-action-dark-bg-active:rgb(65 70 77 / 20%);--ic-classification-official:#2b71c7;--ic-classification-official-foreground:#fff;--ic-classification-secret:#f39c2c;--ic-classification-secret-foreground:#000;--ic-classification-top-secret:#a00;--ic-classification-top-secret-foreground:#fff;--ic-classification-not-set:#616161;--ic-classification-not-set-foreground:#fff;--ic-theme-blue-primary-r:27;--ic-theme-blue-primary-g:60;--ic-theme-blue-primary-b:121;--ic-theme-blue-primary-a:1;--ic-theme-lighten-20:rgb(255 255 255 / 20%);--ic-theme-lighten-40:rgb(255 255 255 / 40%);--ic-theme-primary-r:var(--ic-theme-blue-primary-r);--ic-theme-primary-g:var(--ic-theme-blue-primary-g);--ic-theme-primary-b:var(--ic-theme-blue-primary-b);--ic-theme-primary-a:var(--ic-theme-blue-primary-a);--ic-theme-primary:rgb(
+  );--ic-status-error-dark:#610a05;--ic-status-info-light:#e1f0fc;--ic-status-info-contrast:#488fe3;--ic-status-info:rgb(18 77 179);--ic-status-info-dark:#041144;--ic-status-anomalous-light:#efdbff;--ic-status-anomalous-contrast:#b764fb;--ic-status-anomalous:#7c25c2;--ic-status-anomalous-dark:#350f54;--ic-status-unknown-light:var(--ic-architectural-40);--ic-status-unknown-contrast:var(--ic-architectural-300);--ic-status-unknown:var(--ic-architectural-500);--ic-status-unknown-dark:var(--ic-architectural-800);--ic-status-warning-mid:var(--ic-status-warning);--ic-status-warning-mid-hover:var(--ic-status-warning-hover);--ic-status-warning-mid-pressed:var(--ic-status-warning-pressed);--ic-status-success-background:var(--ic-status-success-light);--ic-status-warning-background:var(--ic-status-warning-light);--ic-status-error-background:var(--ic-status-error-light);--ic-status-info-background:var(--ic-status-info-light);--ic-architectural-20:#f9fafa;--ic-architectural-40:#f4f4f5;--ic-architectural-60:#eeeff0;--ic-architectural-80:#e8e9eb;--ic-architectural-100:#e1e3e5;--ic-architectural-200:#c4c8cd;--ic-architectural-300:#a7acb3;--ic-architectural-400:#8a919b;--ic-architectural-500:#6c7580;--ic-architectural-600:#575e68;--ic-architectural-700:#41464d;--ic-architectural-800:#2c2f34;--ic-architectural-900:#0b0c0c;--ic-architectural-white:#fff;--ic-architectural-black:#000;--ic-color-primary-text:#0b0c0c;--ic-color-white-text:#fff;--ic-color-secondary-text:#41464d;--ic-color-tertiary-text:#6c7580;--ic-action-default:#1759bc;--ic-action-default-hover:#0b399c;--ic-action-default-active:#07277e;--ic-action-default-active-alpha:rgba(23 89 188 / 50%);--ic-action-default-bg-hover:rgb(23 89 188 / 10%);--ic-action-default-bg-active:rgb(23 89 188 / 20%);--ic-action-default-bg-hover-no-alpha:#e7eef8;--ic-action-default-bg-active-no-alpha:#d0def2;--ic-action-destructive:#d4351c;--ic-action-destructive-hover:#ad1e0e;--ic-action-destructive-active:#8b1209;--ic-action-light:#fff;--ic-action-light-hover:#c4c8cd;--ic-action-light-active:#a7acb3;--ic-action-light-bg-hover:rgb(255 255 255 / 10%);--ic-action-light-bg-active:rgb(255 255 255 / 20%);--ic-action-dark:#0b0c0c;--ic-action-dark-hover:#2c2f34;--ic-action-dark-active:#41464d;--ic-action-dark-bg-hover:rgb(65 70 77 / 10%);--ic-action-dark-bg-active:rgb(65 70 77 / 20%);--ic-action-dark-bg-hover-no-alpha:#ececed;--ic-action-dark-bg-active-no-alpha:#d9dadb;--ic-classification-official:#2b71c7;--ic-classification-official-foreground:#fff;--ic-classification-secret:#f39c2c;--ic-classification-secret-foreground:#000;--ic-classification-top-secret:#a00;--ic-classification-top-secret-foreground:#fff;--ic-classification-not-set:#616161;--ic-classification-not-set-foreground:#fff;--ic-theme-blue-primary-r:27;--ic-theme-blue-primary-g:60;--ic-theme-blue-primary-b:121;--ic-theme-blue-primary-a:1;--ic-theme-lighten-20:rgb(255 255 255 / 20%);--ic-theme-lighten-40:rgb(255 255 255 / 40%);--ic-theme-primary-r:var(--ic-theme-blue-primary-r);--ic-theme-primary-g:var(--ic-theme-blue-primary-g);--ic-theme-primary-b:var(--ic-theme-blue-primary-b);--ic-theme-primary-a:var(--ic-theme-blue-primary-a);--ic-theme-primary:rgb(
     var(--ic-theme-primary-r) var(--ic-theme-primary-g)
       var(--ic-theme-primary-b) / var(--ic-theme-primary-a)
   );--ic-theme-secondary:rgb(
@@ -101,4 +104,4 @@ html{font-family:var(--ic-font-body-family);color:var(--ic-color-primary-text)}a
     min(255, calc(var(--ic-theme-calc) + 65))
       min(255, calc(var(--ic-theme-calc) + 70))
       min(255, calc(var(--ic-theme-calc) + 77)) / 20%
-  );--ic-hyperlink:#1759bc;--ic-hyperlink-visited:#330072;--ic-hyperlink-hover:#7c2855;--ic-hyperlink-contrast:#5c98f2;--ic-hyperlink-contrast-visited:#bc75ff;--ic-hyperlink-contrast-hover:#db76ac;--ic-focus-blue:#0044d7;--ic-focus-glow:#80a1e8;--ic-hc-focus-outline:3px solid transparent;--ic-table-row-selected:#c7d7ef;--ic-breakpoint-xs:0;--ic-breakpoint-sm:576px;--ic-breakpoint-md:768px;--ic-breakpoint-lg:992px;--ic-breakpoint-xl:1200px;--ic-space-1px:0.063rem;--ic-space-xxxs:0.125rem;--ic-space-xxs:0.25rem;--ic-space-xs:0.5rem;--ic-space-sm:0.75rem;--ic-space-md:1rem;--ic-space-lg:1.5rem;--ic-space-xl:2rem;--ic-space-xxl:3rem;--ic-z-index-base-value:0;--ic-z-index-page-header:calc(var(--ic-z-index-base-value) + 10);--ic-z-index-back-to-top:calc(var(--ic-z-index-base-value) + 20);--ic-z-index-menu:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-popover:calc(var(--ic-z-index-base-value) + 50);--ic-z-index-navigation-item:calc(var(--ic-z-index-base-value) + 50);--ic-z-index-navigation-menu:calc(var(--ic-z-index-base-value) + 60);--ic-z-index-sticky-page-header:calc(var(--ic-z-index-base-value) + 60);--ic-z-index-side-navigation:calc(var(--ic-z-index-base-value) + 60);--ic-z-index-dialog:calc(var(--ic-z-index-base-value) + 100);--ic-z-index-toast:calc(var(--ic-z-index-base-value) + 110);--ic-z-index-tooltip:calc(var(--ic-z-index-base-value) + 110);--ic-z-index-classification-banner:calc(var(--ic-z-index-base-value) + 200)}
+  );--ic-hyperlink:#1759bc;--ic-hyperlink-visited:#330072;--ic-hyperlink-hover:#7c2855;--ic-hyperlink-contrast:#5c98f2;--ic-hyperlink-contrast-visited:#bc75ff;--ic-hyperlink-contrast-hover:#db76ac;--ic-focus-blue:#0044d7;--ic-focus-glow:#80a1e8;--ic-hc-focus-outline:3px solid transparent;--ic-table-row-selected:#c7d7ef;--ic-breakpoint-xs:0;--ic-breakpoint-sm:576px;--ic-breakpoint-md:768px;--ic-breakpoint-lg:992px;--ic-breakpoint-xl:1200px;--ic-space-1px:0.063rem;--ic-space-xxxs:0.125rem;--ic-space-xxs:0.25rem;--ic-space-xs:0.5rem;--ic-space-sm:0.75rem;--ic-space-md:1rem;--ic-space-lg:1.5rem;--ic-space-xl:2rem;--ic-space-xxl:3rem;--ic-z-index-base-value:0;--ic-z-index-page-header:calc(var(--ic-z-index-base-value) + 10);--ic-z-index-back-to-top:calc(var(--ic-z-index-base-value) + 20);--ic-z-index-popover:calc(var(--ic-z-index-base-value) + 50);--ic-z-index-sticky-page-header:calc(var(--ic-z-index-base-value) + 60);--ic-z-index-date-picker:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-navigation-item:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-navigation-menu:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-menu:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-side-navigation:calc(var(--ic-z-index-base-value) + 70);--ic-z-index-dialog:calc(var(--ic-z-index-base-value) + 100);--ic-z-index-toast:calc(var(--ic-z-index-base-value) + 110);--ic-z-index-tooltip:calc(var(--ic-z-index-base-value) + 110);--ic-z-index-classification-banner:calc(var(--ic-z-index-base-value) + 200)}

package/dist/index.d.ts

@@ -1,2 +1 @@
 export * from "./components";
-export { SlottedSVG } from "./react-component-lib/slottedSVG";

package/dist/index.js

@@ -1,2 +1 @@
 export * from "./components";
-export { SlottedSVG } from "./react-component-lib/slottedSVG";

package/dist/react-component-lib/createComponent.js

@@ -1,3 +1,29 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -11,30 +37,32 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { createElement } from 'react';
 import { attachProps, camelToDashCase, createForwardRef, dashToPascalCase, isCoveredByReact, mergeRefs } from './utils';
-export const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction, defineCustomElement) => {
+export var createReactComponent = function (tagName, ReactComponentContext, manipulatePropsFunction, defineCustomElement) {
     if (defineCustomElement !== undefined) {
         defineCustomElement();
     }
-    const displayName = dashToPascalCase(tagName);
-    const ReactComponent = class extends React.Component {
-        constructor(props) {
-            super(props);
-            this.setComponentElRef = (element) => {
-                this.componentEl = element;
+    var displayName = dashToPascalCase(tagName);
+    var ReactComponent = /** @class */ (function (_super) {
+        __extends(class_1, _super);
+        function class_1(props) {
+            var _this = _super.call(this, props) || this;
+            _this.setComponentElRef = function (element) {
+                _this.componentEl = element;
             };
+            return _this;
         }
-        componentDidMount() {
+        class_1.prototype.componentDidMount = function () {
             this.componentDidUpdate(this.props);
-        }
-        componentDidUpdate(prevProps) {
+        };
+        class_1.prototype.componentDidUpdate = function (prevProps) {
             attachProps(this.componentEl, this.props, prevProps);
-        }
-        render() {
-            const _a = this.props, { children, forwardedRef, style, className, ref } = _a, cProps = __rest(_a, ["children", "forwardedRef", "style", "className", "ref"]);
-            let propsToPass = Object.keys(cProps).reduce((acc, name) => {
-                const value = cProps[name];
+        };
+        class_1.prototype.render = function () {
+            var _a = this.props, children = _a.children, forwardedRef = _a.forwardedRef, style = _a.style, className = _a.className, ref = _a.ref, cProps = __rest(_a, ["children", "forwardedRef", "style", "className", "ref"]);
+            var propsToPass = Object.keys(cProps).reduce(function (acc, name) {
+                var value = cProps[name];
                 if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
-                    const eventName = name.substring(2).toLowerCase();
+                    var eventName = name.substring(2).toLowerCase();
                     if (typeof document !== 'undefined' && isCoveredByReact(eventName)) {
                         acc[name] = value;
                     }
@@ -42,7 +70,7 @@ export const createReactComponent = (tagName, ReactComponentContext, manipulateP
                 else {
                     // we should only render strings, booleans, and numbers as attrs in html.
                     // objects, functions, arrays etc get synced via properties on mount.
-                    const type = typeof value;
+                    var type = typeof value;
                     if (type === 'string' || type === 'boolean' || type === 'number') {
                         acc[camelToDashCase(name)] = value;
                     }
@@ -52,7 +80,7 @@ export const createReactComponent = (tagName, ReactComponentContext, manipulateP
             if (manipulatePropsFunction) {
                 propsToPass = manipulatePropsFunction(this.props, propsToPass);
             }
-            const newProps = Object.assign(Object.assign({}, propsToPass), { ref: mergeRefs(forwardedRef, this.setComponentElRef), style });
+            var newProps = __assign(__assign({}, propsToPass), { ref: mergeRefs(forwardedRef, this.setComponentElRef), style: style });
             /**
              * We use createElement here instead of
              * React.createElement to work around a
@@ -61,11 +89,16 @@ export const createReactComponent = (tagName, ReactComponentContext, manipulateP
              * as <tagname> instead of the actual Web Component.
              */
             return createElement(tagName, newProps, children);
-        }
-        static get displayName() {
-            return displayName;
-        }
-    };
+        };
+        Object.defineProperty(class_1, "displayName", {
+            get: function () {
+                return displayName;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return class_1;
+    }(React.Component));
     // If context was passed to createReactComponent then conditionally add it to the Component Class
     if (ReactComponentContext) {
         ReactComponent.contextType = ReactComponentContext;

package/dist/react-component-lib/createOverlayComponent.js

@@ -1,3 +1,29 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -7,6 +33,33 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -21,88 +74,117 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { attachProps, dashToPascalCase, defineCustomElement, setRef } from './utils';
-export const createOverlayComponent = (tagName, controller, customElement) => {
+export var createOverlayComponent = function (tagName, controller, customElement) {
     defineCustomElement(tagName, customElement);
-    const displayName = dashToPascalCase(tagName);
-    const didDismissEventName = `on${displayName}DidDismiss`;
-    const didPresentEventName = `on${displayName}DidPresent`;
-    const willDismissEventName = `on${displayName}WillDismiss`;
-    const willPresentEventName = `on${displayName}WillPresent`;
-    let isDismissing = false;
-    class Overlay extends React.Component {
-        constructor(props) {
-            super(props);
+    var displayName = dashToPascalCase(tagName);
+    var didDismissEventName = "on".concat(displayName, "DidDismiss");
+    var didPresentEventName = "on".concat(displayName, "DidPresent");
+    var willDismissEventName = "on".concat(displayName, "WillDismiss");
+    var willPresentEventName = "on".concat(displayName, "WillPresent");
+    var isDismissing = false;
+    var Overlay = /** @class */ (function (_super) {
+        __extends(Overlay, _super);
+        function Overlay(props) {
+            var _this = _super.call(this, props) || this;
             if (typeof document !== 'undefined') {
-                this.el = document.createElement('div');
+                _this.el = document.createElement('div');
             }
-            this.handleDismiss = this.handleDismiss.bind(this);
-        }
-        static get displayName() {
-            return displayName;
+            _this.handleDismiss = _this.handleDismiss.bind(_this);
+            return _this;
         }
-        componentDidMount() {
+        Object.defineProperty(Overlay, "displayName", {
+            get: function () {
+                return displayName;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Overlay.prototype.componentDidMount = function () {
             if (this.props.isOpen) {
                 this.present();
             }
-        }
-        componentWillUnmount() {
+        };
+        Overlay.prototype.componentWillUnmount = function () {
             if (this.overlay) {
                 this.overlay.dismiss();
             }
-        }
-        handleDismiss(event) {
+        };
+        Overlay.prototype.handleDismiss = function (event) {
             if (this.props.onDidDismiss) {
                 this.props.onDidDismiss(event);
             }
             setRef(this.props.forwardedRef, null);
-        }
-        shouldComponentUpdate(nextProps) {
+        };
+        Overlay.prototype.shouldComponentUpdate = function (nextProps) {
             // Check if the overlay component is about to dismiss
             if (this.overlay && nextProps.isOpen !== this.props.isOpen && nextProps.isOpen === false) {
                 isDismissing = true;
             }
             return true;
-        }
-        componentDidUpdate(prevProps) {
-            return __awaiter(this, void 0, void 0, function* () {
-                if (this.overlay) {
-                    attachProps(this.overlay, this.props, prevProps);
-                }
-                if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) {
-                    this.present(prevProps);
-                }
-                if (this.overlay && prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false) {
-                    yield this.overlay.dismiss();
-                    isDismissing = false;
-                    /**
-                     * Now that the overlay is dismissed
-                     * we need to render again so that any
-                     * inner components will be unmounted
-                     */
-                    this.forceUpdate();
-                }
+        };
+        Overlay.prototype.componentDidUpdate = function (prevProps) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (this.overlay) {
+                                attachProps(this.overlay, this.props, prevProps);
+                            }
+                            if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) {
+                                this.present(prevProps);
+                            }
+                            if (!(this.overlay && prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false)) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this.overlay.dismiss()];
+                        case 1:
+                            _a.sent();
+                            isDismissing = false;
+                            /**
+                             * Now that the overlay is dismissed
+                             * we need to render again so that any
+                             * inner components will be unmounted
+                             */
+                            this.forceUpdate();
+                            _a.label = 2;
+                        case 2: return [2 /*return*/];
+                    }
+                });
             });
-        }
-        present(prevProps) {
-            return __awaiter(this, void 0, void 0, function* () {
-                const _a = this.props, { children, isOpen, onDidDismiss, onDidPresent, onWillDismiss, onWillPresent } = _a, cProps = __rest(_a, ["children", "isOpen", "onDidDismiss", "onDidPresent", "onWillDismiss", "onWillPresent"]);
-                const elementProps = Object.assign(Object.assign({}, cProps), { ref: this.props.forwardedRef, [didDismissEventName]: this.handleDismiss, [didPresentEventName]: (e) => this.props.onDidPresent && this.props.onDidPresent(e), [willDismissEventName]: (e) => this.props.onWillDismiss && this.props.onWillDismiss(e), [willPresentEventName]: (e) => this.props.onWillPresent && this.props.onWillPresent(e) });
-                this.overlay = yield controller.create(Object.assign(Object.assign({}, elementProps), { component: this.el, componentProps: {} }));
-                setRef(this.props.forwardedRef, this.overlay);
-                attachProps(this.overlay, elementProps, prevProps);
-                yield this.overlay.present();
+        };
+        Overlay.prototype.present = function (prevProps) {
+            return __awaiter(this, void 0, void 0, function () {
+                var _a, children, isOpen, onDidDismiss, onDidPresent, onWillDismiss, onWillPresent, cProps, elementProps, _b;
+                var _c;
+                var _this = this;
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
+                        case 0:
+                            _a = this.props, children = _a.children, isOpen = _a.isOpen, onDidDismiss = _a.onDidDismiss, onDidPresent = _a.onDidPresent, onWillDismiss = _a.onWillDismiss, onWillPresent = _a.onWillPresent, cProps = __rest(_a, ["children", "isOpen", "onDidDismiss", "onDidPresent", "onWillDismiss", "onWillPresent"]);
+                            elementProps = __assign(__assign({}, cProps), (_c = { ref: this.props.forwardedRef }, _c[didDismissEventName] = this.handleDismiss, _c[didPresentEventName] = function (e) { return _this.props.onDidPresent && _this.props.onDidPresent(e); }, _c[willDismissEventName] = function (e) { return _this.props.onWillDismiss && _this.props.onWillDismiss(e); }, _c[willPresentEventName] = function (e) { return _this.props.onWillPresent && _this.props.onWillPresent(e); }, _c));
+                            _b = this;
+                            return [4 /*yield*/, controller.create(__assign(__assign({}, elementProps), { component: this.el, componentProps: {} }))];
+                        case 1:
+                            _b.overlay = _d.sent();
+                            setRef(this.props.forwardedRef, this.overlay);
+                            attachProps(this.overlay, elementProps, prevProps);
+                            return [4 /*yield*/, this.overlay.present()];
+                        case 2:
+                            _d.sent();
+                            return [2 /*return*/];
+                    }
+                });
             });
-        }
-        render() {
+        };
+        Overlay.prototype.render = function () {
             /**
              * Continue to render the component even when
              * overlay is dismissing otherwise component
              * will be hidden before animation is done.
              */
             return ReactDOM.createPortal(this.props.isOpen || isDismissing ? this.props.children : null, this.el);
-        }
-    }
-    return React.forwardRef((props, ref) => {
-        return React.createElement(Overlay, Object.assign({}, props, { forwardedRef: ref }));
+        };
+        return Overlay;
+    }(React.Component));
+    return React.forwardRef(function (props, ref) {
+        return React.createElement(Overlay, __assign({}, props, { forwardedRef: ref }));
     });
 };

package/dist/react-component-lib/utils/attachProps.js

@@ -1,13 +1,14 @@
 import { camelToDashCase } from './case';
-export const attachProps = (node, newProps, oldProps = {}) => {
+export var attachProps = function (node, newProps, oldProps) {
+    if (oldProps === void 0) { oldProps = {}; }
     // some test frameworks don't render DOM elements, so we test here to make sure we are dealing with DOM first
     if (node instanceof Element) {
         // add any classes in className to the class list
-        const className = getClassName(node.classList, newProps, oldProps);
+        var className = getClassName(node.classList, newProps, oldProps);
         if (className !== '') {
             node.className = className;
         }
-        Object.keys(newProps).forEach((name) => {
+        Object.keys(newProps).forEach(function (name) {
             if (name === 'children' ||
                 name === 'style' ||
                 name === 'ref' ||
@@ -17,15 +18,15 @@ export const attachProps = (node, newProps, oldProps = {}) => {
                 return;
             }
             if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
-                const eventName = name.substring(2);
-                const eventNameLc = eventName[0].toLowerCase() + eventName.substring(1);
+                var eventName = name.substring(2);
+                var eventNameLc = eventName[0].toLowerCase() + eventName.substring(1);
                 if (!isCoveredByReact(eventNameLc)) {
                     syncEvent(node, eventNameLc, newProps[name]);
                 }
             }
             else {
                 node[name] = newProps[name];
-                const propType = typeof newProps[name];
+                var propType = typeof newProps[name];
                 if (propType === 'string') {
                     node.setAttribute(camelToDashCase(name), newProps[name]);
                 }
@@ -33,17 +34,17 @@ export const attachProps = (node, newProps, oldProps = {}) => {
         });
     }
 };
-export const getClassName = (classList, newProps, oldProps) => {
-    const newClassProp = newProps.className || newProps.class;
-    const oldClassProp = oldProps.className || oldProps.class;
+export var getClassName = function (classList, newProps, oldProps) {
+    var newClassProp = newProps.className || newProps.class;
+    var oldClassProp = oldProps.className || oldProps.class;
     // map the classes to Maps for performance
-    const currentClasses = arrayToMap(classList);
-    const incomingPropClasses = arrayToMap(newClassProp ? newClassProp.split(' ') : []);
-    const oldPropClasses = arrayToMap(oldClassProp ? oldClassProp.split(' ') : []);
-    const finalClassNames = [];
+    var currentClasses = arrayToMap(classList);
+    var incomingPropClasses = arrayToMap(newClassProp ? newClassProp.split(' ') : []);
+    var oldPropClasses = arrayToMap(oldClassProp ? oldClassProp.split(' ') : []);
+    var finalClassNames = [];
     // loop through each of the current classes on the component
     // to see if it should be a part of the classNames added
-    currentClasses.forEach((currentClass) => {
+    currentClasses.forEach(function (currentClass) {
         if (incomingPropClasses.has(currentClass)) {
             // add it as its already included in classnames coming in from newProps
             finalClassNames.push(currentClass);
@@ -54,13 +55,13 @@ export const getClassName = (classList, newProps, oldProps) => {
             finalClassNames.push(currentClass);
         }
     });
-    incomingPropClasses.forEach((s) => finalClassNames.push(s));
+    incomingPropClasses.forEach(function (s) { return finalClassNames.push(s); });
     return finalClassNames.join(' ');
 };
 /**
  * Transforms a React event name to a browser event name.
  */
-export const transformReactEventName = (eventNameSuffix) => {
+export var transformReactEventName = function (eventNameSuffix) {
     switch (eventNameSuffix) {
         case 'doubleclick':
             return 'dblclick';
@@ -71,24 +72,24 @@ export const transformReactEventName = (eventNameSuffix) => {
  * Checks if an event is supported in the current execution environment.
  * @license Modernizr 3.0.0pre (Custom Build) | MIT
  */
-export const isCoveredByReact = (eventNameSuffix) => {
+export var isCoveredByReact = function (eventNameSuffix) {
     if (typeof document === 'undefined') {
         return true;
     }
     else {
-        const eventName = 'on' + transformReactEventName(eventNameSuffix);
-        let isSupported = eventName in document;
+        var eventName = 'on' + transformReactEventName(eventNameSuffix);
+        var isSupported = eventName in document;
         if (!isSupported) {
-            const element = document.createElement('div');
+            var element = document.createElement('div');
             element.setAttribute(eventName, 'return;');
             isSupported = typeof element[eventName] === 'function';
         }
         return isSupported;
     }
 };
-export const syncEvent = (node, eventName, newEventHandler) => {
-    const eventStore = node.__events || (node.__events = {});
-    const oldEventHandler = eventStore[eventName];
+export var syncEvent = function (node, eventName, newEventHandler) {
+    var eventStore = node.__events || (node.__events = {});
+    var oldEventHandler = eventStore[eventName];
     // Remove old listener so they don't double up.
     if (oldEventHandler) {
         node.removeEventListener(eventName, oldEventHandler);
@@ -100,8 +101,8 @@ export const syncEvent = (node, eventName, newEventHandler) => {
         }
     }));
 };
-const arrayToMap = (arr) => {
-    const map = new Map();
-    arr.forEach((s) => map.set(s, s));
+var arrayToMap = function (arr) {
+    var map = new Map();
+    arr.forEach(function (s) { return map.set(s, s); });
     return map;
 };

package/dist/react-component-lib/utils/case.js

@@ -1,6 +1,8 @@
-export const dashToPascalCase = (str) => str
-    .toLowerCase()
-    .split('-')
-    .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
-    .join('');
-export const camelToDashCase = (str) => str.replace(/([A-Z])/g, (m) => `-${m[0].toLowerCase()}`);
+export var dashToPascalCase = function (str) {
+    return str
+        .toLowerCase()
+        .split('-')
+        .map(function (segment) { return segment.charAt(0).toUpperCase() + segment.slice(1); })
+        .join('');
+};
+export var camelToDashCase = function (str) { return str.replace(/([A-Z])/g, function (m) { return "-".concat(m[0].toLowerCase()); }); };

package/dist/react-component-lib/utils/dev.js

@@ -1,8 +1,8 @@
-export const isDevMode = () => {
+export var isDevMode = function () {
     return process && process.env && process.env.NODE_ENV === 'development';
 };
-const warnings = {};
-export const deprecationWarning = (key, message) => {
+var warnings = {};
+export var deprecationWarning = function (key, message) {
     if (isDevMode()) {
         if (!warnings[key]) {
             console.warn(message);

package/dist/react-component-lib/utils/index.js

@@ -1,5 +1,16 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import React from 'react';
-export const setRef = (ref, value) => {
+export var setRef = function (ref, value) {
     if (typeof ref === 'function') {
         ref(value);
     }
@@ -8,21 +19,25 @@ export const setRef = (ref, value) => {
         ref.current = value;
     }
 };
-export const mergeRefs = (...refs) => {
-    return (value) => {
-        refs.forEach((ref) => {
+export var mergeRefs = function () {
+    var refs = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        refs[_i] = arguments[_i];
+    }
+    return function (value) {
+        refs.forEach(function (ref) {
             setRef(ref, value);
         });
     };
 };
-export const createForwardRef = (ReactComponent, displayName) => {
-    const forwardRef = (props, ref) => {
-        return React.createElement(ReactComponent, Object.assign({}, props, { forwardedRef: ref }));
+export var createForwardRef = function (ReactComponent, displayName) {
+    var forwardRef = function (props, ref) {
+        return React.createElement(ReactComponent, __assign({}, props, { forwardedRef: ref }));
     };
     forwardRef.displayName = displayName;
     return React.forwardRef(forwardRef);
 };
-export const defineCustomElement = (tagName, customElement) => {
+export var defineCustomElement = function (tagName, customElement) {
     if (customElement !== undefined && typeof customElements !== 'undefined' && !customElements.get(tagName)) {
         customElements.define(tagName, customElement);
     }

package/package.json

@@ -3,19 +3,25 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "2.0.0-canary.3",
+  "version": "2.0.0-canary.31",
   "description": "React-wrapped web components compiled using StencilJS",
   "scripts": {
     "build": "npm run clean && npm run compile && npm run copy:core-css && npm run copy:normalize-css",
+    "cypress": "cypress run --component --headed",
+    "cypress:open": "cypress open",
+    "cypress:component": "cypress run --component --headless",
+    "cypress:ci": "cross-env CYPRESS_CI=true npm run cypress:component",
     "clean": "rimraf dist",
     "compile": "npm run tsc",
     "tsc": "tsc -p .",
     "rollup": "rollup -c",
-    "storybook": "start-storybook -p 6007 --no-manager-cache",
-    "build-storybook": "rimraf ./storybook-static && build-storybook -s public",
+    "storybook": "storybook dev -p 6009",
+    "build-storybook": "rimraf ./storybook-static && storybook build",
     "audit": "echo 'Audit for: @ukic/canary-react' && audit-ci -m --config ../../audit-ci.json",
-    "copy:core-css": "echo 'Copy core.css from: @ukic/canary-web-components' && mkdirp -p ./dist/core && ncp ../web-components/dist/core/core.css ./dist/core/core.css",
-    "copy:normalize-css": "echo 'Copy normalize.css from: @ukic/canary-web-components' && ncp ../web-components/dist/core/normalize.css ./dist/core/normalize.css"
+    "copy:core-css": "echo 'Copy core.css from: @ukic/canary-web-components' && mkdirp -p ./dist/core && ncp ../canary-web-components/dist/core/core.css ./dist/core/core.css",
+    "copy:normalize-css": "echo 'Copy normalize.css from: @ukic/canary-web-components' && ncp ../canary-web-components/dist/core/normalize.css ./dist/core/normalize.css",
+    "prettier": "prettier --config ../../.prettierrc.json --ignore-path ../../.prettierignore src --check",
+    "prettier:fix": "prettier --config ../../.prettierrc.json --ignore-path ../../.prettierignore src --write"
   },
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -24,28 +30,39 @@
     "dist/"
   ],
   "dependencies": {
-    "@ukic/canary-web-components": "^2.0.0-canary.3",
-    "@ukic/fonts": "^2.3.0"
+    "@ukic/canary-web-components": "^2.0.0-canary.31",
+    "@ukic/react": "^2.32.1",
+    "@ukic/web-components": "^2.32.1"
   },
   "devDependencies": {
     "@babel/core": "^7.16.0",
+    "@babel/preset-env": "^7.23.9",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@cypress/react": "^8.0.0",
+    "@cypress/webpack-preprocessor": "^6.0.0",
     "@mdi/js": "^7.2.96",
     "@stencil/react-output-target": "^0.5.3",
-    "@storybook/addon-a11y": "^6.4.8",
-    "@storybook/addon-actions": "^6.4.8",
-    "@storybook/addon-docs": "^6.4.8",
-    "@storybook/addon-essentials": "^6.4.8",
-    "@storybook/addon-links": "^6.4.8",
+    "@storybook/addon-a11y": "^7.6.10",
+    "@storybook/addon-actions": "^7.6.10",
+    "@storybook/addon-docs": "^7.6.10",
+    "@storybook/addon-essentials": "^7.6.10",
+    "@storybook/addon-links": "^7.6.10",
+    "@storybook/addon-mdx-gfm": "^7.6.10",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/builder-webpack5": "^6.5.14",
-    "@storybook/manager-webpack5": "^6.5.14",
-    "@storybook/react": "^6.5.15",
+    "@storybook/react": "^7.6.10",
+    "@storybook/react-webpack5": "^7.6.10",
     "@types/jest": "27.0.3",
     "@types/node": "^16.11.11",
     "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.11",
     "babel-loader": "^8.2.3",
-    "github-markdown-css": "^5.2.0",
+    "cross-env": "^7.0.3",
+    "cypress": "^13.3.1",
+    "cypress-axe": "^1.5.0",
+    "cypress-image-diff-js": "^1.32.0",
+    "eslint-plugin-cypress": "^2.15.1",
+    "github-markdown-css": "^5.5.0",
     "jest": "^27.4.1",
     "jest-dom": "^4.0.0",
     "mkdirp": "^1.0.4",
@@ -56,10 +73,15 @@
     "react-markdown": "^8.0.7",
     "react-router-dom": "^6.3.0",
     "remark-gfm": "^3.0.1",
+    "storybook": "^7.6.10",
+    "storybook-addon-performance": "^0.17.3",
+    "ts-loader": "^9.5.0",
     "typescript": "^4.5.2",
+    "url-loader": "^4.1.1",
     "webpack": "^5.76.0"
   },
   "peerDependencies": {
+    "@ukic/fonts": "^2.6.0",
     "react": "^16.7.0 || ^17.0.2 || ^18.2.0",
     "react-dom": "^16.7.0 || ^17.0.2 || ^18.2.0"
   },
@@ -72,5 +94,5 @@
     ]
   },
   "license": "MIT",
-  "gitHead": "7b5b2b9ab729be5ec1ebee35a87ab20cf4ac09ba"
+  "gitHead": "f980df4943f525b9ff377a859284bec90a5725da"
 }

package/dist/react-component-lib/slottedSVG.d.ts

@@ -1,2 +0,0 @@
-import { FC } from "react";
-export declare const SlottedSVG: FC<any>;

package/dist/react-component-lib/slottedSVG.js

@@ -1,24 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React from "react";
-const defaultProps = {
-    xmlns: "http://www.w3.org/2000/svg",
-};
-function slot(name = "") {
-    return { ref: (e) => (e ? e.setAttribute("slot", name) : null) };
-}
-export const SlottedSVG = (_a) => {
-    var { path, slot: slotName, children } = _a, props = __rest(_a, ["path", "slot", "children"]);
-    return (React.createElement("svg", Object.assign({}, slot(slotName), props, defaultProps),
-        !!path && React.createElement("path", { d: path }),
-        children));
-};