@scania/tegel-react 0.0.1

package/README.md

@@ -0,0 +1,63 @@
+[![Storybook](https://img.shields.io/badge/docs-storybook-ff69b4)](https://tegel-storybook.netlify.app/)
+![](https://img.shields.io/github/license/scania-digital-design-system/tegel)
+![Status: Beta](https://img.shields.io/badge/status-beta-red)
+![npm](https://img.shields.io/npm/v/%40scania%2Ftegel-angular)
+
+# @scania/tegel-react
+This is a ongoing project with the purpose to simplify the integration of Tegel in React apps.
+
+This guide [here](https://stenciljs.com/docs/react) has served as base for the configuration.
+
+Official website: https://tegel.scania.com/
+
+Storybook: https://tegel-storybook.netlify.app/
+
+The design system supports the design and development of digital solutions at Scania. The purpose is to secure a coherent, premium brand and user experience across all of Scania's digital touchpoints.
+
+## Status
+
+This package is currently in a **beta** stage. We are now working hard towards a 1.0 release, but if you want to try out the package today you can!
+
+## Installation
+
+
+1. Run `npm install @scania/tegel-react`
+2. In your App.tsx:
+
+```ts
+import { MyComponent, defineCustomElements } from '@scania/tegel-react';
+
+defineCustomElements();
+
+function App() {
+  return (
+    <div className="App">
+      <MyComponent first="Your" last="Name" />
+    </div>
+  );
+}
+
+export default App;
+```
+
+3. In your global css file (`styles.css`) import the tegel stylesheet.
+
+```css
+@import url('@scania/tegel/dist/tegel/tegel.css');
+```
+
+See all available components in the [Tegel Design System](https://tegel.scania.com/components/overview).
+
+## Browser support
+
+See the browser support section on [the Tegel website](https://tegel.scania.com/development/getting-started-development/introduction#browser-support).
+
+## Community
+
+Get in touch with the team and the community:
+
+- [Teams](https://teams.microsoft.com/l/team/19%3a1257007a64d44c64954acca27a9d4b46%40thread.skype/conversations?groupId=79f9bfeb-73e2-424d-9477-b236191ece5e&tenantId=3bc062e4-ac9d-4c17-b4dd-3aad637ff1ac)
+
+## License
+
+All CSS, HTML and JS code are available under the MIT license. The Scania brand identity, logos and photographs found in this repository are copyrighted Scania CV AB and are not available on an open source basis or to be used as examples or in any other way, if not specifically ordered by Scania CV AB.

package/dist/components/stencil-generated/index.js

@@ -0,0 +1,84 @@
+/* eslint-disable */
+/* tslint:disable */
+/* auto-generated react proxies */
+import { createReactComponent } from './react-component-lib';
+export const TdsAccordion = /*@__PURE__*/ createReactComponent('tds-accordion');
+export const TdsAccordionItem = /*@__PURE__*/ createReactComponent('tds-accordion-item');
+export const TdsBadge = /*@__PURE__*/ createReactComponent('tds-badge');
+export const TdsBanner = /*@__PURE__*/ createReactComponent('tds-banner');
+export const TdsBlock = /*@__PURE__*/ createReactComponent('tds-block');
+export const TdsBodyCell = /*@__PURE__*/ createReactComponent('tds-body-cell');
+export const TdsBreadcrumb = /*@__PURE__*/ createReactComponent('tds-breadcrumb');
+export const TdsBreadcrumbs = /*@__PURE__*/ createReactComponent('tds-breadcrumbs');
+export const TdsButton = /*@__PURE__*/ createReactComponent('tds-button');
+export const TdsCard = /*@__PURE__*/ createReactComponent('tds-card');
+export const TdsCheckbox = /*@__PURE__*/ createReactComponent('tds-checkbox');
+export const TdsChip = /*@__PURE__*/ createReactComponent('tds-chip');
+export const TdsCoreHeaderItem = /*@__PURE__*/ createReactComponent('tds-core-header-item');
+export const TdsDatetime = /*@__PURE__*/ createReactComponent('tds-datetime');
+export const TdsDivider = /*@__PURE__*/ createReactComponent('tds-divider');
+export const TdsDropdown = /*@__PURE__*/ createReactComponent('tds-dropdown');
+export const TdsDropdownOption = /*@__PURE__*/ createReactComponent('tds-dropdown-option');
+export const TdsFolderTab = /*@__PURE__*/ createReactComponent('tds-folder-tab');
+export const TdsFolderTabs = /*@__PURE__*/ createReactComponent('tds-folder-tabs');
+export const TdsFooter = /*@__PURE__*/ createReactComponent('tds-footer');
+export const TdsFooterGroup = /*@__PURE__*/ createReactComponent('tds-footer-group');
+export const TdsFooterItem = /*@__PURE__*/ createReactComponent('tds-footer-item');
+export const TdsHeader = /*@__PURE__*/ createReactComponent('tds-header');
+export const TdsHeaderBrandSymbol = /*@__PURE__*/ createReactComponent('tds-header-brand-symbol');
+export const TdsHeaderCell = /*@__PURE__*/ createReactComponent('tds-header-cell');
+export const TdsHeaderDropdown = /*@__PURE__*/ createReactComponent('tds-header-dropdown');
+export const TdsHeaderDropdownList = /*@__PURE__*/ createReactComponent('tds-header-dropdown-list');
+export const TdsHeaderDropdownListItem = /*@__PURE__*/ createReactComponent('tds-header-dropdown-list-item');
+export const TdsHeaderDropdownListUser = /*@__PURE__*/ createReactComponent('tds-header-dropdown-list-user');
+export const TdsHeaderHamburger = /*@__PURE__*/ createReactComponent('tds-header-hamburger');
+export const TdsHeaderItem = /*@__PURE__*/ createReactComponent('tds-header-item');
+export const TdsHeaderLauncher = /*@__PURE__*/ createReactComponent('tds-header-launcher');
+export const TdsHeaderLauncherButton = /*@__PURE__*/ createReactComponent('tds-header-launcher-button');
+export const TdsHeaderLauncherGrid = /*@__PURE__*/ createReactComponent('tds-header-launcher-grid');
+export const TdsHeaderLauncherGridItem = /*@__PURE__*/ createReactComponent('tds-header-launcher-grid-item');
+export const TdsHeaderLauncherGridTitle = /*@__PURE__*/ createReactComponent('tds-header-launcher-grid-title');
+export const TdsHeaderLauncherList = /*@__PURE__*/ createReactComponent('tds-header-launcher-list');
+export const TdsHeaderLauncherListItem = /*@__PURE__*/ createReactComponent('tds-header-launcher-list-item');
+export const TdsHeaderLauncherListTitle = /*@__PURE__*/ createReactComponent('tds-header-launcher-list-title');
+export const TdsHeaderTitle = /*@__PURE__*/ createReactComponent('tds-header-title');
+export const TdsIcon = /*@__PURE__*/ createReactComponent('tds-icon');
+export const TdsInlineTab = /*@__PURE__*/ createReactComponent('tds-inline-tab');
+export const TdsInlineTabs = /*@__PURE__*/ createReactComponent('tds-inline-tabs');
+export const TdsLink = /*@__PURE__*/ createReactComponent('tds-link');
+export const TdsMessage = /*@__PURE__*/ createReactComponent('tds-message');
+export const TdsModal = /*@__PURE__*/ createReactComponent('tds-modal');
+export const TdsNavigationTab = /*@__PURE__*/ createReactComponent('tds-navigation-tab');
+export const TdsNavigationTabs = /*@__PURE__*/ createReactComponent('tds-navigation-tabs');
+export const TdsPopoverCanvas = /*@__PURE__*/ createReactComponent('tds-popover-canvas');
+export const TdsPopoverCore = /*@__PURE__*/ createReactComponent('tds-popover-core');
+export const TdsPopoverMenu = /*@__PURE__*/ createReactComponent('tds-popover-menu');
+export const TdsPopoverMenuItem = /*@__PURE__*/ createReactComponent('tds-popover-menu-item');
+export const TdsRadioButton = /*@__PURE__*/ createReactComponent('tds-radio-button');
+export const TdsSideMenu = /*@__PURE__*/ createReactComponent('tds-side-menu');
+export const TdsSideMenuCloseButton = /*@__PURE__*/ createReactComponent('tds-side-menu-close-button');
+export const TdsSideMenuCollapseButton = /*@__PURE__*/ createReactComponent('tds-side-menu-collapse-button');
+export const TdsSideMenuDropdown = /*@__PURE__*/ createReactComponent('tds-side-menu-dropdown');
+export const TdsSideMenuDropdownList = /*@__PURE__*/ createReactComponent('tds-side-menu-dropdown-list');
+export const TdsSideMenuDropdownListItem = /*@__PURE__*/ createReactComponent('tds-side-menu-dropdown-list-item');
+export const TdsSideMenuItem = /*@__PURE__*/ createReactComponent('tds-side-menu-item');
+export const TdsSideMenuOverlay = /*@__PURE__*/ createReactComponent('tds-side-menu-overlay');
+export const TdsSideMenuUser = /*@__PURE__*/ createReactComponent('tds-side-menu-user');
+export const TdsSideMenuUserImage = /*@__PURE__*/ createReactComponent('tds-side-menu-user-image');
+export const TdsSideMenuUserLabel = /*@__PURE__*/ createReactComponent('tds-side-menu-user-label');
+export const TdsSlider = /*@__PURE__*/ createReactComponent('tds-slider');
+export const TdsSpinner = /*@__PURE__*/ createReactComponent('tds-spinner');
+export const TdsStep = /*@__PURE__*/ createReactComponent('tds-step');
+export const TdsStepper = /*@__PURE__*/ createReactComponent('tds-stepper');
+export const TdsTable = /*@__PURE__*/ createReactComponent('tds-table');
+export const TdsTableBody = /*@__PURE__*/ createReactComponent('tds-table-body');
+export const TdsTableBodyRow = /*@__PURE__*/ createReactComponent('tds-table-body-row');
+export const TdsTableBodyRowExpandable = /*@__PURE__*/ createReactComponent('tds-table-body-row-expandable');
+export const TdsTableFooter = /*@__PURE__*/ createReactComponent('tds-table-footer');
+export const TdsTableHeader = /*@__PURE__*/ createReactComponent('tds-table-header');
+export const TdsTableToolbar = /*@__PURE__*/ createReactComponent('tds-table-toolbar');
+export const TdsTextField = /*@__PURE__*/ createReactComponent('tds-text-field');
+export const TdsTextarea = /*@__PURE__*/ createReactComponent('tds-textarea');
+export const TdsToast = /*@__PURE__*/ createReactComponent('tds-toast');
+export const TdsToggle = /*@__PURE__*/ createReactComponent('tds-toggle');
+export const TdsTooltip = /*@__PURE__*/ createReactComponent('tds-tooltip');

package/dist/components/stencil-generated/react-component-lib/createComponent.js

@@ -0,0 +1,74 @@
+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, { createElement } from 'react';
+import { attachProps, camelToDashCase, createForwardRef, dashToPascalCase, isCoveredByReact, mergeRefs } from './utils';
+export const createReactComponent = (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;
+            };
+        }
+        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) => {
+                const value = cProps[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] = value;
+                    }
+                }
+                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;
+                    if (type === 'string' || type === 'boolean' || type === 'number') {
+                        acc[camelToDashCase(name)] = value;
+                    }
+                }
+                return acc;
+            }, {});
+            if (manipulatePropsFunction) {
+                propsToPass = manipulatePropsFunction(this.props, propsToPass);
+            }
+            const newProps = Object.assign(Object.assign({}, propsToPass), { ref: mergeRefs(forwardedRef, this.setComponentElRef), style });
+            /**
+             * We use createElement here instead of
+             * React.createElement to work around a
+             * bug in Vite (https://github.com/vitejs/vite/issues/6104).
+             * React.createElement causes all elements to be rendered
+             * as <tagname> instead of the actual Web Component.
+             */
+            return 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/components/stencil-generated/react-component-lib/createOverlayComponent.js

@@ -0,0 +1,96 @@
+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 { jsx as _jsx } from "react/jsx-runtime";
+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;
+        }
+        async componentDidUpdate(prevProps) {
+            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) {
+                await 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();
+            }
+        }
+        async present(prevProps) {
+            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 = await controller.create(Object.assign(Object.assign({}, elementProps), { component: this.el, componentProps: {} }));
+            setRef(this.props.forwardedRef, this.overlay);
+            attachProps(this.overlay, elementProps, prevProps);
+            await 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 _jsx(Overlay, Object.assign({}, props, { forwardedRef: ref }));
+    });
+};

package/dist/components/stencil-generated/react-component-lib/index.js

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

package/dist/components/stencil-generated/react-component-lib/interfaces.js

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

package/dist/components/stencil-generated/react-component-lib/utils/attachProps.js

@@ -0,0 +1,107 @@
+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(' ');
+};
+/**
+ * Transforms a React event name to a browser event name.
+ */
+export const transformReactEventName = (eventNameSuffix) => {
+    switch (eventNameSuffix) {
+        case 'doubleclick':
+            return 'dblclick';
+    }
+    return eventNameSuffix;
+};
+/**
+ * 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' + transformReactEventName(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/components/stencil-generated/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/components/stencil-generated/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/components/stencil-generated/react-component-lib/utils/index.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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 _jsx(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/dist/index.js

@@ -0,0 +1,2 @@
+export * from './components/stencil-generated';
+export { defineCustomElements } from '@scania/tegel/loader';

package/dist/types/components/stencil-generated/index.d.ts

@@ -0,0 +1,82 @@
+/// <reference types="react" />
+import type { JSX } from '@scania/tegel';
+export declare const TdsAccordion: import("react").ForwardRefExoticComponent<JSX.TdsAccordion & Omit<import("react").HTMLAttributes<HTMLTdsAccordionElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsAccordionElement>>;
+export declare const TdsAccordionItem: import("react").ForwardRefExoticComponent<JSX.TdsAccordionItem & Omit<import("react").HTMLAttributes<HTMLTdsAccordionItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsAccordionItemElement>>;
+export declare const TdsBadge: import("react").ForwardRefExoticComponent<JSX.TdsBadge & Omit<import("react").HTMLAttributes<HTMLTdsBadgeElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsBadgeElement>>;
+export declare const TdsBanner: import("react").ForwardRefExoticComponent<JSX.TdsBanner & Omit<import("react").HTMLAttributes<HTMLTdsBannerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsBannerElement>>;
+export declare const TdsBlock: import("react").ForwardRefExoticComponent<JSX.TdsBlock & Omit<import("react").HTMLAttributes<HTMLTdsBlockElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsBlockElement>>;
+export declare const TdsBodyCell: import("react").ForwardRefExoticComponent<JSX.TdsBodyCell & Omit<import("react").HTMLAttributes<HTMLTdsBodyCellElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsBodyCellElement>>;
+export declare const TdsBreadcrumb: import("react").ForwardRefExoticComponent<JSX.TdsBreadcrumb & Omit<import("react").HTMLAttributes<HTMLTdsBreadcrumbElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsBreadcrumbElement>>;
+export declare const TdsBreadcrumbs: import("react").ForwardRefExoticComponent<JSX.TdsBreadcrumbs & Omit<import("react").HTMLAttributes<HTMLTdsBreadcrumbsElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsBreadcrumbsElement>>;
+export declare const TdsButton: import("react").ForwardRefExoticComponent<JSX.TdsButton & Omit<import("react").HTMLAttributes<HTMLTdsButtonElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsButtonElement>>;
+export declare const TdsCard: import("react").ForwardRefExoticComponent<JSX.TdsCard & Omit<import("react").HTMLAttributes<HTMLTdsCardElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsCardElement>>;
+export declare const TdsCheckbox: import("react").ForwardRefExoticComponent<JSX.TdsCheckbox & Omit<import("react").HTMLAttributes<HTMLTdsCheckboxElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsCheckboxElement>>;
+export declare const TdsChip: import("react").ForwardRefExoticComponent<JSX.TdsChip & Omit<import("react").HTMLAttributes<HTMLTdsChipElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsChipElement>>;
+export declare const TdsCoreHeaderItem: import("react").ForwardRefExoticComponent<JSX.TdsCoreHeaderItem & Omit<import("react").HTMLAttributes<HTMLTdsCoreHeaderItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsCoreHeaderItemElement>>;
+export declare const TdsDatetime: import("react").ForwardRefExoticComponent<JSX.TdsDatetime & Omit<import("react").HTMLAttributes<HTMLTdsDatetimeElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsDatetimeElement>>;
+export declare const TdsDivider: import("react").ForwardRefExoticComponent<JSX.TdsDivider & Omit<import("react").HTMLAttributes<HTMLTdsDividerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsDividerElement>>;
+export declare const TdsDropdown: import("react").ForwardRefExoticComponent<JSX.TdsDropdown & Omit<import("react").HTMLAttributes<HTMLTdsDropdownElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsDropdownElement>>;
+export declare const TdsDropdownOption: import("react").ForwardRefExoticComponent<JSX.TdsDropdownOption & Omit<import("react").HTMLAttributes<HTMLTdsDropdownOptionElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsDropdownOptionElement>>;
+export declare const TdsFolderTab: import("react").ForwardRefExoticComponent<JSX.TdsFolderTab & Omit<import("react").HTMLAttributes<HTMLTdsFolderTabElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsFolderTabElement>>;
+export declare const TdsFolderTabs: import("react").ForwardRefExoticComponent<JSX.TdsFolderTabs & Omit<import("react").HTMLAttributes<HTMLTdsFolderTabsElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsFolderTabsElement>>;
+export declare const TdsFooter: import("react").ForwardRefExoticComponent<JSX.TdsFooter & Omit<import("react").HTMLAttributes<HTMLTdsFooterElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsFooterElement>>;
+export declare const TdsFooterGroup: import("react").ForwardRefExoticComponent<JSX.TdsFooterGroup & Omit<import("react").HTMLAttributes<HTMLTdsFooterGroupElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsFooterGroupElement>>;
+export declare const TdsFooterItem: import("react").ForwardRefExoticComponent<JSX.TdsFooterItem & Omit<import("react").HTMLAttributes<HTMLTdsFooterItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsFooterItemElement>>;
+export declare const TdsHeader: import("react").ForwardRefExoticComponent<JSX.TdsHeader & Omit<import("react").HTMLAttributes<HTMLTdsHeaderElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsHeaderElement>>;
+export declare const TdsHeaderBrandSymbol: import("react").ForwardRefExoticComponent<JSX.TdsHeaderBrandSymbol & Omit<import("react").HTMLAttributes<HTMLTdsHeaderBrandSymbolElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsHeaderBrandSymbolElement>>;
+export declare const TdsHeaderCell: import("react").ForwardRefExoticComponent<JSX.TdsHeaderCell & Omit<import("react").HTMLAttributes<HTMLTdsHeaderCellElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsHeaderCellElement>>;
+export declare const TdsHeaderDropdown: import("react").ForwardRefExoticComponent<JSX.TdsHeaderDropdown & Omit<import("react").HTMLAttributes<HTMLTdsHeaderDropdownElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsHeaderDropdownElement>>;
+export declare const TdsHeaderDropdownList: import("react").ForwardRefExoticComponent<JSX.TdsHeaderDropdownList & Omit<import("react").HTMLAttributes<HTMLTdsHeaderDropdownListElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsHeaderDropdownListElement>>;
+export declare const TdsHeaderDropdownListItem: import("react").ForwardRefExoticComponent<JSX.TdsHeaderDropdownListItem & Omit<import("react").HTMLAttributes<HTMLTdsHeaderDropdownListItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsHeaderDropdownListItemElement>>;
+export declare const TdsHeaderDropdownListUser: import("react").ForwardRefExoticComponent<JSX.TdsHeaderDropdownListUser & Omit<import("react").HTMLAttributes<HTMLTdsHeaderDropdownListUserElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsHeaderDropdownListUserElement>>;
+export declare const TdsHeaderHamburger: import("react").ForwardRefExoticComponent<JSX.TdsHeaderHamburger & Omit<import("react").HTMLAttributes<HTMLTdsHeaderHamburgerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsHeaderHamburgerElement>>;
+export declare const TdsHeaderItem: import("react").ForwardRefExoticComponent<JSX.TdsHeaderItem & Omit<import("react").HTMLAttributes<HTMLTdsHeaderItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsHeaderItemElement>>;
+export declare const TdsHeaderLauncher: import("react").ForwardRefExoticComponent<JSX.TdsHeaderLauncher & Omit<import("react").HTMLAttributes<HTMLTdsHeaderLauncherElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsHeaderLauncherElement>>;
+export declare const TdsHeaderLauncherButton: import("react").ForwardRefExoticComponent<JSX.TdsHeaderLauncherButton & Omit<import("react").HTMLAttributes<HTMLTdsHeaderLauncherButtonElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsHeaderLauncherButtonElement>>;
+export declare const TdsHeaderLauncherGrid: import("react").ForwardRefExoticComponent<JSX.TdsHeaderLauncherGrid & Omit<import("react").HTMLAttributes<HTMLTdsHeaderLauncherGridElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsHeaderLauncherGridElement>>;
+export declare const TdsHeaderLauncherGridItem: import("react").ForwardRefExoticComponent<JSX.TdsHeaderLauncherGridItem & Omit<import("react").HTMLAttributes<HTMLTdsHeaderLauncherGridItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsHeaderLauncherGridItemElement>>;
+export declare const TdsHeaderLauncherGridTitle: import("react").ForwardRefExoticComponent<JSX.TdsHeaderLauncherGridTitle & Omit<import("react").HTMLAttributes<HTMLTdsHeaderLauncherGridTitleElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsHeaderLauncherGridTitleElement>>;
+export declare const TdsHeaderLauncherList: import("react").ForwardRefExoticComponent<JSX.TdsHeaderLauncherList & Omit<import("react").HTMLAttributes<HTMLTdsHeaderLauncherListElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsHeaderLauncherListElement>>;
+export declare const TdsHeaderLauncherListItem: import("react").ForwardRefExoticComponent<JSX.TdsHeaderLauncherListItem & Omit<import("react").HTMLAttributes<HTMLTdsHeaderLauncherListItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsHeaderLauncherListItemElement>>;
+export declare const TdsHeaderLauncherListTitle: import("react").ForwardRefExoticComponent<JSX.TdsHeaderLauncherListTitle & Omit<import("react").HTMLAttributes<HTMLTdsHeaderLauncherListTitleElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsHeaderLauncherListTitleElement>>;
+export declare const TdsHeaderTitle: import("react").ForwardRefExoticComponent<JSX.TdsHeaderTitle & Omit<import("react").HTMLAttributes<HTMLTdsHeaderTitleElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsHeaderTitleElement>>;
+export declare const TdsIcon: import("react").ForwardRefExoticComponent<JSX.TdsIcon & Omit<import("react").HTMLAttributes<HTMLTdsIconElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsIconElement>>;
+export declare const TdsInlineTab: import("react").ForwardRefExoticComponent<JSX.TdsInlineTab & Omit<import("react").HTMLAttributes<HTMLTdsInlineTabElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsInlineTabElement>>;
+export declare const TdsInlineTabs: import("react").ForwardRefExoticComponent<JSX.TdsInlineTabs & Omit<import("react").HTMLAttributes<HTMLTdsInlineTabsElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsInlineTabsElement>>;
+export declare const TdsLink: import("react").ForwardRefExoticComponent<JSX.TdsLink & Omit<import("react").HTMLAttributes<HTMLTdsLinkElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsLinkElement>>;
+export declare const TdsMessage: import("react").ForwardRefExoticComponent<JSX.TdsMessage & Omit<import("react").HTMLAttributes<HTMLTdsMessageElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsMessageElement>>;
+export declare const TdsModal: import("react").ForwardRefExoticComponent<JSX.TdsModal & Omit<import("react").HTMLAttributes<HTMLTdsModalElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsModalElement>>;
+export declare const TdsNavigationTab: import("react").ForwardRefExoticComponent<JSX.TdsNavigationTab & Omit<import("react").HTMLAttributes<HTMLTdsNavigationTabElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsNavigationTabElement>>;
+export declare const TdsNavigationTabs: import("react").ForwardRefExoticComponent<JSX.TdsNavigationTabs & Omit<import("react").HTMLAttributes<HTMLTdsNavigationTabsElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsNavigationTabsElement>>;
+export declare const TdsPopoverCanvas: import("react").ForwardRefExoticComponent<JSX.TdsPopoverCanvas & Omit<import("react").HTMLAttributes<HTMLTdsPopoverCanvasElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsPopoverCanvasElement>>;
+export declare const TdsPopoverCore: import("react").ForwardRefExoticComponent<JSX.TdsPopoverCore & Omit<import("react").HTMLAttributes<HTMLTdsPopoverCoreElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsPopoverCoreElement>>;
+export declare const TdsPopoverMenu: import("react").ForwardRefExoticComponent<JSX.TdsPopoverMenu & Omit<import("react").HTMLAttributes<HTMLTdsPopoverMenuElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsPopoverMenuElement>>;
+export declare const TdsPopoverMenuItem: import("react").ForwardRefExoticComponent<JSX.TdsPopoverMenuItem & Omit<import("react").HTMLAttributes<HTMLTdsPopoverMenuItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsPopoverMenuItemElement>>;
+export declare const TdsRadioButton: import("react").ForwardRefExoticComponent<JSX.TdsRadioButton & Omit<import("react").HTMLAttributes<HTMLTdsRadioButtonElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsRadioButtonElement>>;
+export declare const TdsSideMenu: import("react").ForwardRefExoticComponent<JSX.TdsSideMenu & Omit<import("react").HTMLAttributes<HTMLTdsSideMenuElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsSideMenuElement>>;
+export declare const TdsSideMenuCloseButton: import("react").ForwardRefExoticComponent<JSX.TdsSideMenuCloseButton & Omit<import("react").HTMLAttributes<HTMLTdsSideMenuCloseButtonElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsSideMenuCloseButtonElement>>;
+export declare const TdsSideMenuCollapseButton: import("react").ForwardRefExoticComponent<JSX.TdsSideMenuCollapseButton & Omit<import("react").HTMLAttributes<HTMLTdsSideMenuCollapseButtonElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsSideMenuCollapseButtonElement>>;
+export declare const TdsSideMenuDropdown: import("react").ForwardRefExoticComponent<JSX.TdsSideMenuDropdown & Omit<import("react").HTMLAttributes<HTMLTdsSideMenuDropdownElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsSideMenuDropdownElement>>;
+export declare const TdsSideMenuDropdownList: import("react").ForwardRefExoticComponent<JSX.TdsSideMenuDropdownList & Omit<import("react").HTMLAttributes<HTMLTdsSideMenuDropdownListElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsSideMenuDropdownListElement>>;
+export declare const TdsSideMenuDropdownListItem: import("react").ForwardRefExoticComponent<JSX.TdsSideMenuDropdownListItem & Omit<import("react").HTMLAttributes<HTMLTdsSideMenuDropdownListItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsSideMenuDropdownListItemElement>>;
+export declare const TdsSideMenuItem: import("react").ForwardRefExoticComponent<JSX.TdsSideMenuItem & Omit<import("react").HTMLAttributes<HTMLTdsSideMenuItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsSideMenuItemElement>>;
+export declare const TdsSideMenuOverlay: import("react").ForwardRefExoticComponent<JSX.TdsSideMenuOverlay & Omit<import("react").HTMLAttributes<HTMLTdsSideMenuOverlayElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsSideMenuOverlayElement>>;
+export declare const TdsSideMenuUser: import("react").ForwardRefExoticComponent<JSX.TdsSideMenuUser & Omit<import("react").HTMLAttributes<HTMLTdsSideMenuUserElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsSideMenuUserElement>>;
+export declare const TdsSideMenuUserImage: import("react").ForwardRefExoticComponent<JSX.TdsSideMenuUserImage & Omit<import("react").HTMLAttributes<HTMLTdsSideMenuUserImageElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsSideMenuUserImageElement>>;
+export declare const TdsSideMenuUserLabel: import("react").ForwardRefExoticComponent<JSX.TdsSideMenuUserLabel & Omit<import("react").HTMLAttributes<HTMLTdsSideMenuUserLabelElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsSideMenuUserLabelElement>>;
+export declare const TdsSlider: import("react").ForwardRefExoticComponent<JSX.TdsSlider & Omit<import("react").HTMLAttributes<HTMLTdsSliderElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsSliderElement>>;
+export declare const TdsSpinner: import("react").ForwardRefExoticComponent<JSX.TdsSpinner & Omit<import("react").HTMLAttributes<HTMLTdsSpinnerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsSpinnerElement>>;
+export declare const TdsStep: import("react").ForwardRefExoticComponent<JSX.TdsStep & Omit<import("react").HTMLAttributes<HTMLTdsStepElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsStepElement>>;
+export declare const TdsStepper: import("react").ForwardRefExoticComponent<JSX.TdsStepper & Omit<import("react").HTMLAttributes<HTMLTdsStepperElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsStepperElement>>;
+export declare const TdsTable: import("react").ForwardRefExoticComponent<JSX.TdsTable & Omit<import("react").HTMLAttributes<HTMLTdsTableElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsTableElement>>;
+export declare const TdsTableBody: import("react").ForwardRefExoticComponent<JSX.TdsTableBody & Omit<import("react").HTMLAttributes<HTMLTdsTableBodyElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsTableBodyElement>>;
+export declare const TdsTableBodyRow: import("react").ForwardRefExoticComponent<JSX.TdsTableBodyRow & Omit<import("react").HTMLAttributes<HTMLTdsTableBodyRowElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsTableBodyRowElement>>;
+export declare const TdsTableBodyRowExpandable: import("react").ForwardRefExoticComponent<JSX.TdsTableBodyRowExpandable & Omit<import("react").HTMLAttributes<HTMLTdsTableBodyRowExpandableElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsTableBodyRowExpandableElement>>;
+export declare const TdsTableFooter: import("react").ForwardRefExoticComponent<JSX.TdsTableFooter & Omit<import("react").HTMLAttributes<HTMLTdsTableFooterElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsTableFooterElement>>;
+export declare const TdsTableHeader: import("react").ForwardRefExoticComponent<JSX.TdsTableHeader & Omit<import("react").HTMLAttributes<HTMLTdsTableHeaderElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsTableHeaderElement>>;
+export declare const TdsTableToolbar: import("react").ForwardRefExoticComponent<JSX.TdsTableToolbar & Omit<import("react").HTMLAttributes<HTMLTdsTableToolbarElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsTableToolbarElement>>;
+export declare const TdsTextField: import("react").ForwardRefExoticComponent<JSX.TdsTextField & Omit<import("react").HTMLAttributes<HTMLTdsTextFieldElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsTextFieldElement>>;
+export declare const TdsTextarea: import("react").ForwardRefExoticComponent<JSX.TdsTextarea & Omit<import("react").HTMLAttributes<HTMLTdsTextareaElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsTextareaElement>>;
+export declare const TdsToast: import("react").ForwardRefExoticComponent<JSX.TdsToast & Omit<import("react").HTMLAttributes<HTMLTdsToastElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsToastElement>>;
+export declare const TdsToggle: import("react").ForwardRefExoticComponent<JSX.TdsToggle & Omit<import("react").HTMLAttributes<HTMLTdsToggleElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsToggleElement>>;
+export declare const TdsTooltip: import("react").ForwardRefExoticComponent<JSX.TdsTooltip & Omit<import("react").HTMLAttributes<HTMLTdsTooltipElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLTdsTooltipElement>>;

package/dist/types/components/stencil-generated/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, defineCustomElement?: () => void) => React.ForwardRefExoticComponent<React.PropsWithoutRef<import("./utils").StencilReactExternalProps<PropType, ElementType>> & React.RefAttributes<ElementType>>;
+export {};

package/dist/types/components/stencil-generated/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/types/components/stencil-generated/react-component-lib/index.d.ts

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

package/dist/types/components/stencil-generated/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/types/components/stencil-generated/react-component-lib/utils/attachProps.d.ts

@@ -0,0 +1,16 @@
+export declare const attachProps: (node: HTMLElement, newProps: any, oldProps?: any) => void;
+export declare const getClassName: (classList: DOMTokenList, newProps: any, oldProps: any) => string;
+/**
+ * Transforms a React event name to a browser event name.
+ */
+export declare const transformReactEventName: (eventNameSuffix: string) => 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/types/components/stencil-generated/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/types/components/stencil-generated/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/types/components/stencil-generated/react-component-lib/utils/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { StyleReactProps } from '../interfaces';
+export type StencilReactExternalProps<PropType, ElementType> = PropType & Omit<React.HTMLAttributes<ElementType>, 'style'> & StyleReactProps;
+export 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<StencilReactExternalProps<PropType, ElementType>> & React.RefAttributes<ElementType>>;
+export declare const defineCustomElement: (tagName: string, customElement: any) => void;
+export * from './attachProps';
+export * from './case';

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components/stencil-generated';
+export { defineCustomElements } from '@scania/tegel/loader';

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@scania/tegel-react",
+  "version": "0.0.1",
+  "description": "React wrappers for Tegel package",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/types/index.d.ts",
+  "scripts": {
+    "test": "node ./__tests__/react-library.test.js",
+    "build": "npm run tsc",
+    "tsc": "tsc -p . --outDir ./dist"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/scania-digital-design-system/tegel.git"
+  },
+  "author": "",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/scania-digital-design-system/tegel/issues"
+  },
+  "homepage": "https://github.com/scania-digital-design-system/tegel#readme",
+  "dependencies": {
+    "@scania/tegel": "1.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.8.0",
+    "@types/react": "^18.2.24",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.2.2"
+  }
+}