@dnanpm/styleguide 3.1.0 → 3.2.0

package/build/cjs/components/ProgressIndicator/ProgressIndicator.d.ts

@@ -1,3 +1,4 @@
+import type { MouseEvent } from 'react';
 import React from 'react';
 type ProgressIndicatorStatus = 'error';
 interface Props {
@@ -14,7 +15,7 @@ interface Props {
      * On Progress Indicator Item label or number click callback
      * Use `e.currentTarget.parentElement` to get Progress Indicator Item element
      */
-    onStepClick?: (stepIndex: number, e: React.MouseEvent<HTMLElement>) => void;
+    onStepClick?: (stepIndex: number, e: MouseEvent<HTMLElement>) => void;
     /**
      * Allows to change version of component to small
      */

package/build/cjs/components/RadioButton/RadioButton.d.ts

@@ -1,3 +1,4 @@
+import type { ChangeEvent } from 'react';
 import React from 'react';
 interface Props {
     /**
@@ -21,7 +22,7 @@ interface Props {
     /**
      * On radio button change callback
      */
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
     /**
      * Allows to set the radio button as checked
      *

package/build/cjs/components/ReadMore/ReadMore.d.ts

@@ -1,18 +1,18 @@
-import React from 'react';
+import type { FunctionComponent, MouseEvent, ReactNode } from 'react';
 interface ReadMoreProps {
     /** The label for show more link */
     showMoreText?: string;
     /** The label for show less link */
     showLessText?: string;
     /** Text content for component */
-    children: React.ReactNode;
+    children: ReactNode;
     /** Allows to pass a custom className */
     className?: string;
     /** Allows to pass custom onClick */
-    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
     /** Init in expanded state and immediately close on client for better SEO */
     seoInitExpanded?: boolean;
 }
 /** @visibleName Read More */
-declare const ReadMore: React.FunctionComponent<ReadMoreProps>;
+declare const ReadMore: FunctionComponent<ReadMoreProps>;
 export default ReadMore;

package/build/cjs/components/Search/Search.d.ts

@@ -1,3 +1,4 @@
+import type { ChangeEvent, FocusEvent, KeyboardEvent, MouseEvent } from 'react';
 import React from 'react';
 interface Props {
     /**
@@ -19,27 +20,27 @@ interface Props {
     /**
      * On search input change callback
      */
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
     /**
      * On search input blur callback
      */
-    onBlur?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onBlur?: (e: ChangeEvent<HTMLInputElement>) => void;
     /**
      * On search input focus callback
      */
-    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (e: FocusEvent<HTMLInputElement>) => void;
     /**
      * On search input key press callback
      */
-    onKeyPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    onKeyPress?: (e: KeyboardEvent<HTMLInputElement>) => void;
     /**
      * On search input key down callback
      */
-    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
     /**
      * On button click callback
      */
-    onButtonClick?: (e: React.MouseEvent<Element, MouseEvent>) => void;
+    onButtonClick?: (e: MouseEvent<HTMLElement>) => void;
     /**
      * Allow to set search input element focus on page load
      */

package/build/cjs/components/Search/Search.js

@@ -63,7 +63,7 @@ const Button = styled["default"](ButtonIcon["default"]) `
 const Search = (_a) => {
     var _b;
     var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
-    const inputRef = React__default["default"].useRef(null);
+    const inputRef = React.useRef(null);
     const handleButtonClick = (e) => {
         if (inputRef && inputRef.current) {
             inputRef.current.focus();

package/build/cjs/components/SecondaryNavigation/SecondaryNavigation.d.ts

@@ -1,8 +1,25 @@
+import type { ComponentType, ReactNode } from 'react';
 import React from 'react';
+import type { LangProps } from '../../types/language';
+interface MenuItem {
+    id: string;
+    icon?: string;
+    target?: string;
+    titles: LangProps;
+    urls: LangProps;
+}
 interface SNDataProps {
     name?: string;
     categoryId?: string;
-    pages?: object[] | null;
+    pages?: MenuItem[] | null;
+}
+interface NextJSSecondaryNavLinkProps {
+    linkUrl: string;
+    linkTitle: string;
+    iconName: string;
+    showNotification: boolean;
+    collapseSize: number;
+    children?: ReactNode;
 }
 interface Props {
     /**
@@ -21,7 +38,7 @@ interface Props {
     /**
      * pass nextJS component for enabling nextJS routing
      */
-    nextJSSecondaryNavLink?: any;
+    nextJSSecondaryNavLink?: ComponentType<NextJSSecondaryNavLinkProps>;
     /**
      * width in pixels where navigation collapses to a dropdown
      *

package/build/cjs/components/SecondaryNavigation/SecondaryNavigation.js

@@ -140,10 +140,9 @@ const IconWrapper = styled["default"].span `
         background-color: ${theme["default"].color.default.pink};
     }
 `;
-const isMenuItemLinkAbsolute = (menuItemLink) => menuItemLink.includes('http');
 /** @visibleName Secondary Navigation */
-const SecondaryNavigation = ({ currentUrl = '', data, lang = 'fi', nextJSSecondaryNavLink: NextJSSecondaryNavLink = false, collapseSize = 767, 'data-testid': dataTestId, 'max-width': componentMaxWidth, className, matchFullUrl = true, mobileOnly = false, highlightIds = [], whiteBg = false, }) => {
-    var _a;
+const SecondaryNavigation = ({ currentUrl = '', data, lang = 'fi', nextJSSecondaryNavLink: NextJSSecondaryNavLink, collapseSize = 767, 'data-testid': dataTestId, 'max-width': componentMaxWidth, className, matchFullUrl = true, mobileOnly = false, highlightIds = [], whiteBg = false, }) => {
+    var _a, _b, _c, _d;
     const [isSecondaryNavOpen, setIsSecondaryNavOpen] = React.useState(false);
     const toggleNav = () => {
         setIsSecondaryNavOpen(!isSecondaryNavOpen);
@@ -159,39 +158,34 @@ const SecondaryNavigation = ({ currentUrl = '', data, lang = 'fi', nextJSSeconda
             setIsSecondaryNavOpen(false);
         }
     });
-    const selectedElement = data.pages
-        ? data.pages.find((listElement) => currentUrl === listElement.urls[lang])
-        : undefined;
-    const shouldHighlightSelectedElement = selectedElement && highlightIds.some((el) => el === selectedElement.id);
+    const selectedElement = (_a = data.pages) === null || _a === void 0 ? void 0 : _a.find(listElement => currentUrl === listElement.urls[lang]);
+    const shouldHighlightSelectedElement = (_b = (selectedElement && highlightIds.some(el => el === selectedElement.id))) !== null && _b !== void 0 ? _b : false;
+    const checkIsMenuItemLinkAbsolute = (menuItemLink) => menuItemLink.includes('http');
     return (React__default["default"].createElement(SecondaryNavigationWrapper, { ref: ref, collapseSize: collapseSize, "data-testid": dataTestId, className: className, mobileOnly: mobileOnly, whiteBg: whiteBg },
         selectedElement && (React__default["default"].createElement(MobileSelector, { onClick: toggleNav, collapseSize: collapseSize, "data-testid": "secondary-navigation-dropdown-selector" },
             React__default["default"].createElement(MobileSelectorTitleWrapper, null,
-                ((_a = selectedElement.icon) === null || _a === void 0 ? void 0 : _a.length) > 0 && (React__default["default"].createElement(IconWrapper, { showNotification: shouldHighlightSelectedElement, collapseSize: collapseSize },
+                (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.icon) && (React__default["default"].createElement(IconWrapper, { showNotification: shouldHighlightSelectedElement, collapseSize: collapseSize },
                     React__default["default"].createElement(Icon["default"], { name: selectedElement.icon }))),
                 React__default["default"].createElement("span", null, selectedElement.titles[lang])),
             React__default["default"].createElement(MobileSelectorArrow, { isOpen: isSecondaryNavOpen },
                 React__default["default"].createElement(Icon["default"], { icon: hlChevronDown["default"] })))),
-        React__default["default"].createElement(SecondaryNavigationList, { id: data.name || `secondary-navigation-category-${data.categoryId}`, isOpen: isSecondaryNavOpen, collapseSize: collapseSize, componentMaxWidth: componentMaxWidth, "data-testid": "secondary-nav-menu-ul" }, data.pages
-            ? data.pages.map((listElement, index) => {
-                const linkUrl = listElement.urls[lang];
-                const linkTitle = listElement.titles[lang];
-                const iconName = listElement.icon || '';
-                const isActive = matchFullUrl
-                    ? currentUrl === linkUrl
-                    : currentUrl.indexOf(linkUrl) > -1;
-                const showNotification = highlightIds.some((el) => el === listElement.id);
-                const isNextJsLink = NextJSSecondaryNavLink && !isMenuItemLinkAbsolute(linkUrl);
-                return (React__default["default"].createElement(SecondaryNavigationListElement, { key: listElement.id, isActive: isActive, onClick: closeNav, collapseSize: collapseSize },
-                    isNextJsLink && (React__default["default"].createElement(NextJSSecondaryNavLink, { linkUrl: linkUrl, linkTitle: linkTitle, iconName: iconName, showNotification: showNotification, collapseSize: collapseSize, "data-testid": `secondary-nav-item-link-${index + 1}` }, isActive && (React__default["default"].createElement(MobileSelectorCheck, { collapseSize: collapseSize },
-                        React__default["default"].createElement(Icon["default"], { icon: hlCheck["default"] }))))),
-                    !isNextJsLink && (React__default["default"].createElement("a", { href: linkUrl, "data-testid": `secondary-nav-item-link-${index + 1}` },
-                        iconName.length > 0 && (React__default["default"].createElement(IconWrapper, { showNotification: showNotification, collapseSize: collapseSize },
-                            React__default["default"].createElement(Icon["default"], { name: iconName }))),
-                        React__default["default"].createElement("span", null, linkTitle),
-                        isActive && (React__default["default"].createElement(MobileSelectorCheck, { collapseSize: collapseSize },
-                            React__default["default"].createElement(Icon["default"], { icon: hlCheck["default"] })))))));
-            })
-            : null)));
+        React__default["default"].createElement(SecondaryNavigationList, { id: data.name || `secondary-navigation-category-${(_c = data.categoryId) !== null && _c !== void 0 ? _c : ''}`, isOpen: isSecondaryNavOpen, collapseSize: collapseSize, componentMaxWidth: componentMaxWidth, "data-testid": "secondary-nav-menu-ul" }, (_d = data.pages) === null || _d === void 0 ? void 0 : _d.map((listElement, index) => {
+            const linkUrl = listElement.urls[lang];
+            const linkTitle = listElement.titles[lang];
+            const iconName = listElement.icon || '';
+            const isActive = matchFullUrl
+                ? currentUrl === linkUrl
+                : currentUrl.indexOf(linkUrl) > -1;
+            const showNotification = highlightIds.some(el => el === listElement.id);
+            const isMenuItemLinkAbsolute = checkIsMenuItemLinkAbsolute(linkUrl);
+            return (React__default["default"].createElement(SecondaryNavigationListElement, { key: listElement.id, isActive: isActive, onClick: closeNav, collapseSize: collapseSize }, NextJSSecondaryNavLink && !isMenuItemLinkAbsolute ? (React__default["default"].createElement(NextJSSecondaryNavLink, { linkUrl: linkUrl, linkTitle: linkTitle, iconName: iconName, showNotification: showNotification, collapseSize: collapseSize, "data-testid": `secondary-nav-item-link-${index + 1}` }, isActive && (React__default["default"].createElement(MobileSelectorCheck, { collapseSize: collapseSize },
+                React__default["default"].createElement(Icon["default"], { icon: hlCheck["default"] }))))) : (React__default["default"].createElement("a", { href: linkUrl, "data-testid": `secondary-nav-item-link-${index + 1}` },
+                iconName && (React__default["default"].createElement(IconWrapper, { showNotification: showNotification, collapseSize: collapseSize },
+                    React__default["default"].createElement(Icon["default"], { name: iconName }))),
+                React__default["default"].createElement("span", null, linkTitle),
+                isActive && (React__default["default"].createElement(MobileSelectorCheck, { collapseSize: collapseSize },
+                    React__default["default"].createElement(Icon["default"], { icon: hlCheck["default"] })))))));
+        }))));
 };
 
 exports["default"] = SecondaryNavigation;

package/build/cjs/components/Selectbox/Selectbox.js

@@ -36,9 +36,9 @@ const ErrorMessage = styled["default"].div `
 `;
 const customTheme = Object.assign(Object.assign({}, Select.defaultTheme), { borderRadius: 0, colors: Object.assign(Object.assign({}, Select.defaultTheme.colors), { primary50: theme["default"].color.background.sand.E02, primary25: theme["default"].color.background.sand.E01, primary: theme["default"].color.background.sand.E02 }) });
 const getStyles = () => ({
-    control: (_styles, state) => (Object.assign(Object.assign({ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: `0 ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)}`, width: '100%', height: styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 4), backgroundColor: state.isDisabled
+    control: (_styles, state) => (Object.assign(Object.assign({ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: `0 ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)}`, width: '100%', minHeight: styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 4), backgroundColor: state.isDisabled
             ? theme["default"].color.background.sand.E01
-            : theme["default"].color.background.white.default, borderRadius: theme["default"].radius.s, border: `1px solid ${theme["default"].color.line.L01}` }, (state.selectProps.errorState && {
+            : theme["default"].color.background.white.default, borderRadius: theme["default"].radius.s, border: `1px solid ${theme["default"].color.line.L01}`, overflow: 'auto' }, (state.selectProps.errorState && {
         borderBottom: `4px solid ${theme["default"].color.notification.error}`,
     })), (!state.menuIsOpen && {
         ':focus-within': {

package/build/cjs/components/Selectbox/__tests__/Selectbox.spec.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/build/cjs/components/Tabs/Tab.d.ts

@@ -1,10 +1,12 @@
-import React from 'react';
+import type { ReactNode } from 'react';
+import React, { PureComponent } from 'react';
 import type { Type } from './Tabs';
 export interface TabProps {
     activeTab?: string;
     label: string;
     tabStyle?: Type;
     onClick?: (tab: string) => void;
+    children?: ReactNode;
 }
 export interface TabStyleProps {
     isActive?: boolean;
@@ -164,7 +166,7 @@ export declare const TabStyle: import("styled-components").StyledComponent<"li",
         h1: string;
         h2: string;
     };
-    media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
+    media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
     radius: {
         default: string;
         s: string;
@@ -173,7 +175,7 @@ export declare const TabStyle: import("styled-components").StyledComponent<"li",
         pill: string;
     };
 }, TabStyleProps, never>;
-declare class Tab extends React.PureComponent<TabProps> {
+declare class Tab extends PureComponent<TabProps> {
     onClick: () => void;
     render(): React.JSX.Element;
 }

package/build/cjs/components/Tabs/Tab.js

@@ -47,7 +47,7 @@ const TabStyle = styled["default"].li `
             background-color: transparent;
         `}
 `;
-class Tab extends React__default["default"].PureComponent {
+class Tab extends React.PureComponent {
     constructor() {
         super(...arguments);
         this.onClick = () => {

package/build/cjs/components/Tabs/Tabs.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import React from 'react';
 export type Type = 'gray' | 'underlined';
 interface TabsProps {
@@ -17,7 +18,7 @@ interface TabsProps {
     /**
      * The actual content
      */
-    children: React.ReactNode;
+    children: ReactNode;
     /**
      * Handles when tab is switched/changed
      */
@@ -39,9 +40,7 @@ export declare const Tablist: import("styled-components").StyledComponent<"ul",
             value: number;
             unit: string;
         };
-    }; /**
-     * The actual content
-     */
+    };
     breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
     color: {
         default: {
@@ -53,9 +52,7 @@ export declare const Tablist: import("styled-components").StyledComponent<"ul",
         accent: {
             lemon: string;
             sky: string;
-            orange: string; /**
-             * Allows to pass a custom className
-             */
+            orange: string;
         };
         hover: {
             pink: string;
@@ -77,13 +74,15 @@ export declare const Tablist: import("styled-components").StyledComponent<"ul",
             info: string;
             success: string;
             warning: string;
-            error: string; /**
-             * Handles when tab is switched/changed
-             */
-        };
+            error: string;
+        }; /**
+         * The actual content
+         */
         background: {
             sand: {
-                default: string;
+                default: string; /**
+                 * Handles when tab is switched/changed
+                 */
                 E01: string;
                 E02: string;
             };
@@ -162,9 +161,7 @@ export declare const Tablist: import("styled-components").StyledComponent<"ul",
         medium: number;
         bold: number;
         black: number;
-    }; /**
-     * Handles when tab is switched/changed
-     */
+    };
     form: {
         smallSelectWidth: string;
         smallSelectHeight: string;
@@ -183,6 +180,11 @@ export declare const Tablist: import("styled-components").StyledComponent<"ul",
         h1L: string;
         h1M: string;
         h1S: string; /**
+         * Allows to pass a custom className
+         */
+        h2M: string;
+        h2S: string;
+        h3: string; /**
          * Style of the tabs
          *
          * @param {Type} gray Default
@@ -190,15 +192,12 @@ export declare const Tablist: import("styled-components").StyledComponent<"ul",
          * @default 'gray'
          * @deprecated Underlined is provided only as legacy style
          */
-        h2M: string;
-        h2S: string;
-        h3: string;
         h4: string;
         h5: string;
         h1: string;
         h2: string;
     };
-    media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
+    media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
     radius: {
         default: string;
         s: string;

package/build/cjs/components/Tabs/Tabs.js

@@ -22,9 +22,9 @@ const TabContent = styled["default"].div `
 `;
 /** @visibleName Tabs */
 const Tabs = ({ children, className, tabStyle = 'gray', onChange, defaultTab }) => {
-    const [activeTab, setActiveTab] = React__default["default"].useState(defaultTab);
-    const tabs = React__default["default"].Children.map(children, child => {
-        if (React__default["default"].isValidElement(child) && child.type === Tab["default"]) {
+    const [activeTab, setActiveTab] = React.useState(defaultTab);
+    const tabs = React.Children.map(children, child => {
+        if (React.isValidElement(child) && child.type === Tab["default"]) {
             return child;
         }
         return null;

package/build/cjs/components/Textarea/Textarea.d.ts

@@ -1,3 +1,4 @@
+import type { ChangeEvent, FocusEvent, KeyboardEvent } from 'react';
 import React from 'react';
 interface Props {
     /**
@@ -27,23 +28,23 @@ interface Props {
     /**
      * On input change callback
      */
-    onChange?: (val: string, e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    onChange?: (val: string, e: ChangeEvent<HTMLTextAreaElement>) => void;
     /**
      * On input blur callback
      */
-    onBlur?: (val: string, e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    onBlur?: (val: string, e: FocusEvent<HTMLTextAreaElement>) => void;
     /**
      * On input focus callback
      */
-    onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
+    onFocus?: (e: FocusEvent<HTMLTextAreaElement>) => void;
     /**
      * On input key press callback
      */
-    onKeyPress?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+    onKeyPress?: (e: KeyboardEvent<HTMLTextAreaElement>) => void;
     /**
      * On input key down callback
      */
-    onKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+    onKeyDown?: (e: KeyboardEvent<HTMLTextAreaElement>) => void;
     /**
      * Allows to disable the component functionality
      *

package/build/cjs/components/Toaster/Toaster.d.ts

@@ -1,3 +1,4 @@
+import type { MouseEvent, ReactNode } from 'react';
 import React from 'react';
 type ToasterType = 'info' | 'success' | 'warning' | 'error';
 interface Props {
@@ -15,7 +16,7 @@ interface Props {
     /**
      * Content of the toaster
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * Allows to pass a custom className
      */
@@ -37,7 +38,7 @@ interface Props {
     /**
      * On close button click callback
      */
-    onClickCloseButton?: (e: React.MouseEvent<HTMLElement>) => void;
+    onClickCloseButton?: (e: MouseEvent<HTMLElement>) => void;
 }
 declare const Toaster: ({ type, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element | null;
 /** @component */

package/build/cjs/components/Tooltip/Tooltip.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import React from 'react';
 import type { ITooltip as ReactTooltipProps } from 'react-tooltip';
 type Position = 'left' | 'right' | 'middle';
@@ -20,7 +21,7 @@ interface Props {
     /**
      * Content of the component
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * Allows to set position of Tooltip icon relative to other content and adds appropriate margins
      *

package/build/cjs/components/Tooltip/Tooltip.js

@@ -53,7 +53,7 @@ const StyledReactTooltip = styled["default"](reactTooltip.Tooltip) `
     background-color: ${theme["default"].color.background.white.default};
     border-radius: ${theme["default"].radius.s};
 
-    ${common.getElevationShadow({ elevation: 'low' })}
+    ${common["default"]({ elevation: 'low' })}
 
     & .react-tooltip-arrow {
         width: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1.2)};

package/build/cjs/components/TooltipMenu/ChildComponents/TooltipMenuExportedStyles.d.ts

@@ -152,7 +152,7 @@ export declare const Tail: import("styled-components").StyledComponent<"div", {
         h1: string;
         h2: string;
     };
-    media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
+    media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
     radius: {
         default: string;
         s: string;
@@ -319,7 +319,7 @@ export declare const TailShadow: import("styled-components").StyledComponent<"di
         h1: string;
         h2: string;
     };
-    media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
+    media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
     radius: {
         default: string;
         s: string;

package/build/cjs/components/TooltipMenu/TooltipMenu.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import React from 'react';
 import type { Props as IconProps } from '../Icon/Icon';
 export interface TooltipMenuProps {
@@ -6,7 +7,7 @@ export interface TooltipMenuProps {
     /** Allows to pass a custom className */
     className?: string;
     /** Tooltip menu content */
-    children: React.ReactNode;
+    children: ReactNode;
     /** Text selector color.Default: #121212 */
     color?: string;
     /** Text selector active color. Default: #121212 */

package/build/cjs/components/index.d.ts

@@ -11,6 +11,7 @@ export { default as ButtonRound } from './Button/ButtonRound';
 export { default as ButtonSecondary } from './Button/ButtonSecondary';
 export { default as Checkbox } from './Checkbox/Checkbox';
 export { default as Chip } from './Chip/Chip';
+export { default as DateTimePicker } from './DateTimePicker/DateTimePicker';
 export { default as Divider } from './Divider/Divider';
 export { default as DnaLogo } from './DnaLogo/DnaLogo';
 export { default as Drawer } from './Drawer/Drawer';
@@ -22,6 +23,7 @@ export * from './Icons';
 export { default as Input } from './Input/Input';
 export { default as Label } from './Label/Label';
 export { default as LabelText } from './LabelText/LabelText';
+export { default as MainHeaderNavigation } from './MainHeaderNavigation/MainHeaderNavigation';
 export { default as MainNavigation } from './MainNavigation/MainNavigation';
 export { default as Modal } from './Modal/Modal';
 export { default as Notification } from './Notification/Notification';
@@ -36,7 +38,7 @@ export { default as SecondaryNavigation } from './SecondaryNavigation/SecondaryN
 export { default as Selectbox } from './Selectbox/Selectbox';
 export { default as Switch } from './Switch/Switch';
 export { default as Tab, TabStyle } from './Tabs/Tab';
-export { Tablist, default as Tabs } from './Tabs/Tabs';
+export { default as Tabs, Tablist } from './Tabs/Tabs';
 export { default as Textarea } from './Textarea/Textarea';
 export { default as Toaster } from './Toaster/Toaster';
 export { default as Tooltip } from './Tooltip/Tooltip';

package/build/cjs/hooks/useCloseOutsideOrElementClicked.js

@@ -16,10 +16,11 @@ const useCloseOutsideOrElementClicked = ({ ref, closeWhenTagClicked }, callback)
         const target = e.target;
         const parent = target.parentNode;
         const isElementInList = closeWhenTagClicked.some(tag => {
+            var _a, _b, _c;
             if (!target.parentNode) {
-                return tag === target.tagName.toLowerCase();
+                return tag === ((_a = target.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase());
             }
-            return tag === target.tagName.toLowerCase() || tag === parent.tagName.toLowerCase();
+            return tag === ((_b = target.tagName) === null || _b === void 0 ? void 0 : _b.toLowerCase()) || tag === ((_c = parent.tagName) === null || _c === void 0 ? void 0 : _c.toLowerCase());
         });
         if ((ref.current && !ref.current.contains(target)) ||
             (isElementInList && !target.dataset.noClose)) {

package/build/cjs/hooks/useDebounce.d.ts

@@ -0,0 +1,2 @@
+declare const useDebounce: (callback: () => void, delay?: number) => () => void;
+export default useDebounce;

package/build/cjs/hooks/useDebounce.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+const DEFAULT_DELAY = 400;
+const useDebounce = (
+// TODO: Eventually define generic type for function arguments if needed
+// callback: <T extends (...args: Parameters<T>) => void>(...args: T[]) => void,
+callback, delay = DEFAULT_DELAY) => {
+    const debounce = React.useRef();
+    return React.useCallback(() => {
+        if (debounce.current) {
+            clearTimeout(debounce.current);
+        }
+        debounce.current = setTimeout(() => {
+            callback();
+        }, delay);
+    }, [callback, delay]);
+};
+
+exports["default"] = useDebounce;

package/build/cjs/hooks/useDocHeight.d.ts

@@ -1 +1,2 @@
-export declare const useDocHeight: () => void;
+declare const useDocHeight: () => void;
+export default useDocHeight;

package/build/cjs/hooks/useDocHeight.js

@@ -3,35 +3,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var useDebounceFunc = require('./useDebounceFunc.js');
-
-function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
-        });
-    }
-    n["default"] = e;
-    return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var useDebounce = require('./useDebounce.js');
 
 const DEBOUNCE_DELAY = 100;
 const useDocHeight = () => {
-    const setDocHeight = React__namespace.useCallback(() => {
+    const setDocHeight = React.useCallback(() => {
         document.documentElement.style.setProperty('--vh100', `${window.innerHeight}px`);
     }, []);
-    const debounceSetDocHeight = useDebounceFunc.useDebounceFunc(setDocHeight, DEBOUNCE_DELAY);
-    React__namespace.useEffect(() => {
+    const debounceSetDocHeight = useDebounce["default"](setDocHeight, DEBOUNCE_DELAY);
+    React.useEffect(() => {
         setDocHeight();
         window.addEventListener('resize', debounceSetDocHeight);
         window.addEventListener('orientationchange', debounceSetDocHeight);
@@ -42,4 +22,4 @@ const useDocHeight = () => {
     }, [debounceSetDocHeight, setDocHeight]);
 };
 
-exports.useDocHeight = useDocHeight;
+exports["default"] = useDocHeight;

package/build/cjs/hooks/useResizeObserver.d.ts

@@ -0,0 +1,6 @@
+declare const useResizeObserver: () => {
+    ref: (instance: HTMLDivElement) => void;
+    width: number;
+    height: number;
+};
+export default useResizeObserver;