@ukic/react 2.0.0-alpha.121

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Ionic
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/components.d.ts

@@ -0,0 +1,50 @@
+/// <reference types="react" />
+import type { JSX } from '@ukic/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 IcBreadcrumbs: import("react").ForwardRefExoticComponent<JSX.IcBreadcrumbs & Omit<import("react").HTMLAttributes<HTMLIcBreadcrumbsElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcBreadcrumbsElement>>;
+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 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 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 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 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 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 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 IcTabList: import("react").ForwardRefExoticComponent<JSX.IcTabList & Omit<import("react").HTMLAttributes<HTMLIcTabListElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIcTabListElement>>;
+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 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>>;

package/dist/components.js

@@ -0,0 +1,54 @@
+/* eslint-disable */
+/* tslint:disable */
+/* auto-generated react proxies */
+import { createReactComponent } from './react-component-lib';
+import { defineCustomElements } from '@ukic/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 IcBreadcrumbs = /*@__PURE__*/ createReactComponent('ic-breadcrumbs');
+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 IcClassificationBanner = /*@__PURE__*/ createReactComponent('ic-classification-banner');
+export const IcDataEntity = /*@__PURE__*/ createReactComponent('ic-data-entity');
+export const IcDataRow = /*@__PURE__*/ createReactComponent('ic-data-row');
+export const IcDivider = /*@__PURE__*/ createReactComponent('ic-divider');
+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 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 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 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 IcTabList = /*@__PURE__*/ createReactComponent('ic-tab-list');
+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 IcTooltip = /*@__PURE__*/ createReactComponent('ic-tooltip');
+export const IcTopNavigation = /*@__PURE__*/ createReactComponent('ic-top-navigation');
+export const IcTypography = /*@__PURE__*/ createReactComponent('ic-typography');

package/dist/core/core.css

@@ -0,0 +1,57 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}html{font-family:var(--ic-font-body-family);color:var(--ic-color-primary-text)}a.ic-card-wrapper-link{text-decoration:none;outline:none;color:currentcolor}:root{--ic-border-radius:2px;--ic-border-radius-inset:11px;--ic-border-focus:0 0 0 2px var(--ic-architectural-white),
+    0 0 0 4px var(--ic-focus-blue), 0 0 0 8px var(--ic-focus-glow);--ic-border-focus-inset:inset 0 0 0 4px var(--ic-focus-glow),
+    inset 0 0 0 6px var(--ic-focus-blue),
+    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-overlay-z-index:1000;--ic-border-disabled:1px dashed var(--ic-architectural-200);--ic-font-body-family:"Open Sans", "Helvetica Neue", "Arial", "sans-serif";--ic-font-heading-family:"Nunito Sans", sans-serif;--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:4rem;--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-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) /
+    var(--ic-font-line-height-h4) var(--ic-font-body-family);--ic-font-subtitle-large:var(--ic-font-weight-bold)
+    var(--ic-font-size-regular) / var(--ic-font-line-height-subtitle-large)
+    var(--ic-font-body-family);--ic-font-subtitle-small:var(--ic-font-weight-semibold)
+    var(--ic-font-size-label) / var(--ic-font-line-height-subtitle-small)
+    var(--ic-font-body-family);--ic-font-body:var(--ic-font-weight-regular) var(--ic-font-size-regular) /
+    var(--ic-font-line-height-body) var(--ic-font-body-family);--ic-font-caption:var(--ic-font-weight-semibold) var(--ic-font-size-caption) /
+    var(--ic-font-line-height-caption) var(--ic-font-body-family);--ic-font-label:var(--ic-font-weight-semibold) var(--ic-font-size-label) /
+    var(--ic-font-line-height-body) 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-error:#d4351c;--ic-status-error-background:#ffe4e3;--ic-status-warning:#ffc107;--ic-status-warning-background:#fffbd8;--ic-status-warning-mid:#d07932;--ic-status-warning-dark:#7a4c3c;--ic-status-success:#00703c;--ic-status-success-background:#e8fef3;--ic-status-info:#3170c2;--ic-status-info-background:#e1f0fc;--ic-status-error-contrast:#f15b4e;--ic-status-warning-contrast:#ffc107;--ic-status-success-contrast:#1bb56c;--ic-status-info-contrast:#488fe3;--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-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:rgb(
+    var(--ic-theme-primary-r) var(--ic-theme-primary-g)
+      var(--ic-theme-primary-b)
+  );--ic-theme-secondary:rgb(
+    calc(var(--ic-theme-primary-r) * 0.8) calc(var(--ic-theme-primary-g) * 0.8)
+      calc(var(--ic-theme-primary-b) * 0.8)
+  );--ic-theme-tertiary:rgb(
+    calc(var(--ic-theme-primary-r) * 0.6) calc(var(--ic-theme-primary-g) * 0.6)
+      calc(var(--ic-theme-primary-b) * 0.6)
+  );--ic-theme-secondary-light:rgb(
+    calc(var(--ic-theme-primary-r) + ((255 - var(--ic-theme-primary-r)) * 0.2))
+      calc(
+        var(--ic-theme-primary-g) + ((255 - var(--ic-theme-primary-g)) * 0.2)
+      )
+      calc(
+        var(--ic-theme-primary-b) + ((255 - var(--ic-theme-primary-b)) * 0.2)
+      )
+  );--ic-theme-tertiary-light:rgb(
+    calc(var(--ic-theme-primary-r) + ((255 - var(--ic-theme-primary-r)) * 0.4))
+      calc(
+        var(--ic-theme-primary-g) + ((255 - var(--ic-theme-primary-g)) * 0.4)
+      )
+      calc(
+        var(--ic-theme-primary-b) + ((255 - var(--ic-theme-primary-b)) * 0.4)
+      )
+  );--ic-theme-primary-r-calc:calc(var(--ic-theme-primary-r) * 299);--ic-theme-primary-g-calc:calc(var(--ic-theme-primary-g) * 587);--ic-theme-primary-b-calc:calc(var(--ic-theme-primary-b) * 114);--ic-theme-primary-sum-calc:calc(
+    var(--ic-theme-primary-r-calc) + var(--ic-theme-primary-g-calc) +
+      var(--ic-theme-primary-b-calc)
+  );--ic-theme-primary-divide-calc:calc(var(--ic-theme-primary-sum-calc) / 1000);--ic-theme-primary-subtract-calc:calc(
+    var(--ic-theme-primary-divide-calc) - 128
+  );--ic-theme-primary-calc:calc(var(--ic-theme-primary-subtract-calc) * -1000);--ic-theme-calc:max(0, var(--ic-theme-primary-calc));--ic-theme-text:rgb(
+    calc(var(--ic-theme-calc) + 11) calc(var(--ic-theme-calc) + 12)
+      calc(var(--ic-theme-calc) + 12)
+  );--ic-theme-hover:rgb(
+    calc(var(--ic-theme-calc) + 65) calc(var(--ic-theme-calc) + 70)
+      calc(var(--ic-theme-calc) + 77) / 10%
+  );--ic-theme-active:rgb(
+    calc(var(--ic-theme-calc) + 65) calc(var(--ic-theme-calc) + 70)
+      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-breakpoint-xs:0;--ic-breakpoint-sm:576px;--ic-breakpoint-md:768px;--ic-breakpoint-lg:992px;--ic-breakpoint-xl:1200px;--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}

package/dist/index.d.ts

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

package/dist/index.js

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

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

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface HTMLStencilElement extends HTMLElement {
+    componentOnReady(): Promise<this>;
+}
+interface StencilReactInternalProps<ElementType> extends React.HTMLAttributes<ElementType> {
+    forwardedRef: React.RefObject<ElementType>;
+    ref?: React.Ref<any>;
+}
+export declare const createReactComponent: <PropType, ElementType extends HTMLStencilElement, ContextStateType = {}, ExpandedPropsTypes = {}>(tagName: string, ReactComponentContext?: React.Context<ContextStateType>, manipulatePropsFunction?: (originalProps: StencilReactInternalProps<ElementType>, propsToPass: any) => ExpandedPropsTypes, customElement?: any) => React.ForwardRefExoticComponent<React.PropsWithoutRef<PropType & Omit<React.HTMLAttributes<ElementType>, "style"> & import("./interfaces").StyleReactProps> & React.RefAttributes<ElementType>>;
+export {};

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

@@ -0,0 +1,59 @@
+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';
+import { attachProps, createForwardRef, dashToPascalCase, defineCustomElement, isCoveredByReact, mergeRefs, } from './utils';
+export const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction, customElement) => {
+    defineCustomElement(tagName, customElement);
+    const displayName = dashToPascalCase(tagName);
+    const ReactComponent = class extends React.Component {
+        constructor(props) {
+            super(props);
+            this.setComponentElRef = (element) => {
+                this.componentEl = element;
+            };
+        }
+        componentDidMount() {
+            this.componentDidUpdate(this.props);
+        }
+        componentDidUpdate(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) => {
+                if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
+                    const eventName = name.substring(2).toLowerCase();
+                    if (typeof document !== 'undefined' && isCoveredByReact(eventName)) {
+                        acc[name] = cProps[name];
+                    }
+                }
+                else {
+                    acc[name] = cProps[name];
+                }
+                return acc;
+            }, {});
+            if (manipulatePropsFunction) {
+                propsToPass = manipulatePropsFunction(this.props, propsToPass);
+            }
+            const newProps = Object.assign(Object.assign({}, propsToPass), { ref: mergeRefs(forwardedRef, this.setComponentElRef), style });
+            return React.createElement(tagName, newProps, children);
+        }
+        static get displayName() {
+            return displayName;
+        }
+    };
+    // If context was passed to createReactComponent then conditionally add it to the Component Class
+    if (ReactComponentContext) {
+        ReactComponent.contextType = ReactComponentContext;
+    }
+    return createForwardRef(ReactComponent, displayName);
+};

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { OverlayEventDetail } from './interfaces';
+import { StencilReactForwardedRef } from './utils';
+interface OverlayElement extends HTMLElement {
+    present: () => Promise<void>;
+    dismiss: (data?: any, role?: string | undefined) => Promise<boolean>;
+}
+export interface ReactOverlayProps {
+    children?: React.ReactNode;
+    isOpen: boolean;
+    onDidDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
+    onDidPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
+    onWillDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
+    onWillPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
+}
+export declare const createOverlayComponent: <OverlayComponent extends object, OverlayType extends OverlayElement>(tagName: string, controller: {
+    create: (options: any) => Promise<OverlayType>;
+}, customElement?: any) => React.ForwardRefExoticComponent<React.PropsWithoutRef<OverlayComponent & ReactOverlayProps & {
+    forwardedRef?: StencilReactForwardedRef<OverlayType>;
+}> & React.RefAttributes<OverlayType>>;
+export {};

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

@@ -0,0 +1,108 @@
+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) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+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';
+import ReactDOM from 'react-dom';
+import { attachProps, dashToPascalCase, defineCustomElement, setRef, } from './utils';
+export const createOverlayComponent = (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);
+            if (typeof document !== 'undefined') {
+                this.el = document.createElement('div');
+            }
+            this.handleDismiss = this.handleDismiss.bind(this);
+        }
+        static get displayName() {
+            return displayName;
+        }
+        componentDidMount() {
+            if (this.props.isOpen) {
+                this.present();
+            }
+        }
+        componentWillUnmount() {
+            if (this.overlay) {
+                this.overlay.dismiss();
+            }
+        }
+        handleDismiss(event) {
+            if (this.props.onDidDismiss) {
+                this.props.onDidDismiss(event);
+            }
+            setRef(this.props.forwardedRef, null);
+        }
+        shouldComponentUpdate(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();
+                }
+            });
+        }
+        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();
+            });
+        }
+        render() {
+            /**
+             * 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 }));
+    });
+};

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

@@ -0,0 +1,2 @@
+export { createReactComponent } from './createComponent';
+export { createOverlayComponent } from './createOverlayComponent';

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

@@ -0,0 +1,2 @@
+export { createReactComponent } from './createComponent';
+export { createOverlayComponent } from './createOverlayComponent';

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

@@ -0,0 +1,29 @@
+export interface EventEmitter<T = any> {
+    emit: (data?: T) => CustomEvent<T>;
+}
+export interface StyleReactProps {
+    class?: string;
+    className?: string;
+    style?: {
+        [key: string]: any;
+    };
+}
+export interface OverlayEventDetail<T = any> {
+    data?: T;
+    role?: string;
+}
+export interface OverlayInterface {
+    el: HTMLElement;
+    animated: boolean;
+    keyboardClose: boolean;
+    overlayIndex: number;
+    presented: boolean;
+    enterAnimation?: any;
+    leaveAnimation?: any;
+    didPresent: EventEmitter<void>;
+    willPresent: EventEmitter<void>;
+    willDismiss: EventEmitter<OverlayEventDetail>;
+    didDismiss: EventEmitter<OverlayEventDetail>;
+    present(): Promise<void>;
+    dismiss(data?: any, role?: string): Promise<boolean>;
+}

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

@@ -0,0 +1 @@
+export {};

package/dist/react-component-lib/utils/attachProps.d.ts

@@ -0,0 +1,12 @@
+export declare const attachProps: (node: HTMLElement, newProps: any, oldProps?: any) => void;
+export declare const getClassName: (classList: DOMTokenList, newProps: any, oldProps: any) => string;
+/**
+ * Checks if an event is supported in the current execution environment.
+ * @license Modernizr 3.0.0pre (Custom Build) | MIT
+ */
+export declare const isCoveredByReact: (eventNameSuffix: string) => boolean;
+export declare const syncEvent: (node: Element & {
+    __events?: {
+        [key: string]: (e: Event) => any;
+    };
+}, eventName: string, newEventHandler?: (e: Event) => any) => void;

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

@@ -0,0 +1,97 @@
+import { camelToDashCase } from './case';
+export const attachProps = (node, newProps, 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);
+        if (className !== '') {
+            node.className = className;
+        }
+        Object.keys(newProps).forEach((name) => {
+            if (name === 'children' ||
+                name === 'style' ||
+                name === 'ref' ||
+                name === 'class' ||
+                name === 'className' ||
+                name === 'forwardedRef') {
+                return;
+            }
+            if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
+                const eventName = name.substring(2);
+                const 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];
+                if (propType === 'string') {
+                    node.setAttribute(camelToDashCase(name), newProps[name]);
+                }
+            }
+        });
+    }
+};
+export const getClassName = (classList, newProps, oldProps) => {
+    const newClassProp = newProps.className || newProps.class;
+    const 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 = [];
+    // 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) => {
+        if (incomingPropClasses.has(currentClass)) {
+            // add it as its already included in classnames coming in from newProps
+            finalClassNames.push(currentClass);
+            incomingPropClasses.delete(currentClass);
+        }
+        else if (!oldPropClasses.has(currentClass)) {
+            // add it as it has NOT been removed by user
+            finalClassNames.push(currentClass);
+        }
+    });
+    incomingPropClasses.forEach((s) => finalClassNames.push(s));
+    return finalClassNames.join(' ');
+};
+/**
+ * Checks if an event is supported in the current execution environment.
+ * @license Modernizr 3.0.0pre (Custom Build) | MIT
+ */
+export const isCoveredByReact = (eventNameSuffix) => {
+    if (typeof document === 'undefined') {
+        return true;
+    }
+    else {
+        const eventName = 'on' + eventNameSuffix;
+        let isSupported = eventName in document;
+        if (!isSupported) {
+            const 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];
+    // Remove old listener so they don't double up.
+    if (oldEventHandler) {
+        node.removeEventListener(eventName, oldEventHandler);
+    }
+    // Bind new listener.
+    node.addEventListener(eventName, (eventStore[eventName] = function handler(e) {
+        if (newEventHandler) {
+            newEventHandler.call(this, e);
+        }
+    }));
+};
+const arrayToMap = (arr) => {
+    const map = new Map();
+    arr.forEach((s) => map.set(s, s));
+    return map;
+};

package/dist/react-component-lib/utils/case.d.ts

@@ -0,0 +1,2 @@
+export declare const dashToPascalCase: (str: string) => string;
+export declare const camelToDashCase: (str: string) => string;

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

@@ -0,0 +1,6 @@
+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()}`);

package/dist/react-component-lib/utils/dev.d.ts

@@ -0,0 +1,2 @@
+export declare const isDevMode: () => boolean;
+export declare const deprecationWarning: (key: string, message: string) => void;

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

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

package/dist/react-component-lib/utils/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { StyleReactProps } from '../interfaces';
+export declare type StencilReactExternalProps<PropType, ElementType> = PropType & Omit<React.HTMLAttributes<ElementType>, 'style'> & StyleReactProps;
+export declare type StencilReactForwardedRef<T> = ((instance: T | null) => void) | React.MutableRefObject<T | null> | null;
+export declare const setRef: (ref: StencilReactForwardedRef<any> | React.Ref<any> | undefined, value: any) => void;
+export declare const mergeRefs: (...refs: (StencilReactForwardedRef<any> | React.Ref<any> | undefined)[]) => React.RefCallback<any>;
+export declare const createForwardRef: <PropType, ElementType>(ReactComponent: any, displayName: string) => React.ForwardRefExoticComponent<React.PropsWithoutRef<PropType & Omit<React.HTMLAttributes<ElementType>, "style"> & StyleReactProps> & React.RefAttributes<ElementType>>;
+export declare const defineCustomElement: (tagName: string, customElement: any) => void;
+export * from './attachProps';
+export * from './case';

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

@@ -0,0 +1,33 @@
+import React from 'react';
+export const setRef = (ref, value) => {
+    if (typeof ref === 'function') {
+        ref(value);
+    }
+    else if (ref != null) {
+        // Cast as a MutableRef so we can assign current
+        ref.current = value;
+    }
+};
+export const mergeRefs = (...refs) => {
+    return (value) => {
+        refs.forEach(ref => {
+            setRef(ref, value);
+        });
+    };
+};
+export const createForwardRef = (ReactComponent, displayName) => {
+    const forwardRef = (props, ref) => {
+        return React.createElement(ReactComponent, Object.assign({}, props, { forwardedRef: ref }));
+    };
+    forwardRef.displayName = displayName;
+    return React.forwardRef(forwardRef);
+};
+export const defineCustomElement = (tagName, customElement) => {
+    if (customElement !== undefined &&
+        typeof customElements !== 'undefined' &&
+        !customElements.get(tagName)) {
+        customElements.define(tagName, customElement);
+    }
+};
+export * from './attachProps';
+export * from './case';

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@ukic/react",
+  "sideEffects": false,
+  "version": "2.0.0-alpha.121",
+  "description": "React components compiled using web components and StencilJS",
+  "scripts": {
+    "build": "npm run clean && npm run compile && npm run copy:css",
+    "clean": "rm -rf dist",
+    "compile": "npm run tsc",
+    "tsc": "tsc -p .",
+    "rollup": "rollup -c",
+    "storybook": "start-storybook -p 6007 --no-manager-cache",
+    "build-storybook": "rm -rf ./storybook-static && build-storybook -s public",
+    "audit": "echo 'Audit for: @ukic/react' && audit-ci -m --config ../../audit-ci.json",
+    "copy:css": "echo 'Copy core css from: @ukic/web-components' && mkdirp -p ./dist/core && cp ../web-components/dist/core/core.css ./dist/core"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",  
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/"
+  ],
+  "dependencies": {
+    "@ukic/fonts": "^2.0.0-alpha.116",
+    "@ukic/web-components": "^2.0.0-alpha.121"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.16.0",
+    "@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-postcss": "^2.0.0",
+    "@storybook/react": "^6.4.8",
+    "@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",
+    "jest": "^27.4.1",
+    "jest-dom": "^4.0.0",
+    "mkdirp": "^1.0.4",
+    "np": "^7.6.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-hook-form": "^7.38.0",
+    "react-router-dom": "^6.3.0",
+    "typescript": "^4.5.2"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2 || ^18.2.0",
+    "react-dom": "^17.0.2 || ^18.2.0"
+  },
+  "jest": {
+    "preset": "ts-jest",
+    "setupTestFrameworkScriptFile": "<rootDir>/jest.setup.js",
+    "testPathIgnorePatterns": [
+      "node_modules",
+      "dist"
+    ]
+  }
+}