@dnanpm/styleguide 3.1.0 → 3.2.0

package/build/es/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/es/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/es/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/es/components/Search/Search.js

@@ -1,5 +1,5 @@
 import { __rest } from 'tslib';
-import React__default from 'react';
+import React__default, { useRef } from 'react';
 import styled from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
@@ -55,7 +55,7 @@ const Button = styled(ButtonIcon) `
 const Search = (_a) => {
     var _b;
     var { 'data-testid': dataTestId } = _a, props = __rest(_a, ['data-testid']);
-    const inputRef = React__default.useRef(null);
+    const inputRef = useRef(null);
     const handleButtonClick = (e) => {
         if (inputRef && inputRef.current) {
             inputRef.current.focus();

package/build/es/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/es/components/SecondaryNavigation/SecondaryNavigation.js

@@ -132,10 +132,9 @@ const IconWrapper = styled.span `
         background-color: ${theme.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] = useState(false);
     const toggleNav = () => {
         setIsSecondaryNavOpen(!isSecondaryNavOpen);
@@ -151,39 +150,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.createElement(SecondaryNavigationWrapper, { ref: ref, collapseSize: collapseSize, "data-testid": dataTestId, className: className, mobileOnly: mobileOnly, whiteBg: whiteBg },
         selectedElement && (React__default.createElement(MobileSelector, { onClick: toggleNav, collapseSize: collapseSize, "data-testid": "secondary-navigation-dropdown-selector" },
             React__default.createElement(MobileSelectorTitleWrapper, null,
-                ((_a = selectedElement.icon) === null || _a === void 0 ? void 0 : _a.length) > 0 && (React__default.createElement(IconWrapper, { showNotification: shouldHighlightSelectedElement, collapseSize: collapseSize },
+                (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.icon) && (React__default.createElement(IconWrapper, { showNotification: shouldHighlightSelectedElement, collapseSize: collapseSize },
                     React__default.createElement(Icon, { name: selectedElement.icon }))),
                 React__default.createElement("span", null, selectedElement.titles[lang])),
             React__default.createElement(MobileSelectorArrow, { isOpen: isSecondaryNavOpen },
                 React__default.createElement(Icon, { icon: hlChevronDown })))),
-        React__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.createElement(SecondaryNavigationListElement, { key: listElement.id, isActive: isActive, onClick: closeNav, collapseSize: collapseSize },
-                    isNextJsLink && (React__default.createElement(NextJSSecondaryNavLink, { linkUrl: linkUrl, linkTitle: linkTitle, iconName: iconName, showNotification: showNotification, collapseSize: collapseSize, "data-testid": `secondary-nav-item-link-${index + 1}` }, isActive && (React__default.createElement(MobileSelectorCheck, { collapseSize: collapseSize },
-                        React__default.createElement(Icon, { icon: HlCheck }))))),
-                    !isNextJsLink && (React__default.createElement("a", { href: linkUrl, "data-testid": `secondary-nav-item-link-${index + 1}` },
-                        iconName.length > 0 && (React__default.createElement(IconWrapper, { showNotification: showNotification, collapseSize: collapseSize },
-                            React__default.createElement(Icon, { name: iconName }))),
-                        React__default.createElement("span", null, linkTitle),
-                        isActive && (React__default.createElement(MobileSelectorCheck, { collapseSize: collapseSize },
-                            React__default.createElement(Icon, { icon: HlCheck })))))));
-            })
-            : null)));
+        React__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.createElement(SecondaryNavigationListElement, { key: listElement.id, isActive: isActive, onClick: closeNav, collapseSize: collapseSize }, NextJSSecondaryNavLink && !isMenuItemLinkAbsolute ? (React__default.createElement(NextJSSecondaryNavLink, { linkUrl: linkUrl, linkTitle: linkTitle, iconName: iconName, showNotification: showNotification, collapseSize: collapseSize, "data-testid": `secondary-nav-item-link-${index + 1}` }, isActive && (React__default.createElement(MobileSelectorCheck, { collapseSize: collapseSize },
+                React__default.createElement(Icon, { icon: HlCheck }))))) : (React__default.createElement("a", { href: linkUrl, "data-testid": `secondary-nav-item-link-${index + 1}` },
+                iconName && (React__default.createElement(IconWrapper, { showNotification: showNotification, collapseSize: collapseSize },
+                    React__default.createElement(Icon, { name: iconName }))),
+                React__default.createElement("span", null, linkTitle),
+                isActive && (React__default.createElement(MobileSelectorCheck, { collapseSize: collapseSize },
+                    React__default.createElement(Icon, { icon: HlCheck })))))));
+        }))));
 };
 
 export { SecondaryNavigation as default };

package/build/es/components/Selectbox/Selectbox.js

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

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

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

package/build/es/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/es/components/Tabs/Tab.js

@@ -1,4 +1,4 @@
-import React__default from 'react';
+import React__default, { PureComponent } from 'react';
 import styled from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
@@ -39,7 +39,7 @@ const TabStyle = styled.li `
             background-color: transparent;
         `}
 `;
-class Tab extends React__default.PureComponent {
+class Tab extends PureComponent {
     constructor() {
         super(...arguments);
         this.onClick = () => {

package/build/es/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/es/components/Tabs/Tabs.js

@@ -1,4 +1,4 @@
-import React__default from 'react';
+import React__default, { useState, Children, isValidElement } from 'react';
 import styled from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
 import Tab from './Tab.js';
@@ -14,9 +14,9 @@ const TabContent = styled.div `
 `;
 /** @visibleName Tabs */
 const Tabs = ({ children, className, tabStyle = 'gray', onChange, defaultTab }) => {
-    const [activeTab, setActiveTab] = React__default.useState(defaultTab);
-    const tabs = React__default.Children.map(children, child => {
-        if (React__default.isValidElement(child) && child.type === Tab) {
+    const [activeTab, setActiveTab] = useState(defaultTab);
+    const tabs = Children.map(children, child => {
+        if (isValidElement(child) && child.type === Tab) {
             return child;
         }
         return null;

package/build/es/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/es/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/es/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/es/components/Tooltip/Tooltip.js

@@ -3,7 +3,7 @@ import React__default from 'react';
 import { Tooltip as Tooltip$1 } from 'react-tooltip';
 import styled from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
-import { getElevationShadow } from '../../utils/common.js';
+import getElevationShadow from '../../utils/common.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 import Icon from '../Icon/Icon.js';
 import hlInfo from '../Icons/hlInfo.js';

package/build/es/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/es/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/es/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/es/hooks/useCloseOutsideOrElementClicked.js

@@ -12,10 +12,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/es/hooks/useDebounce.d.ts

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

package/build/es/hooks/useDebounce.js

@@ -0,0 +1,19 @@
+import { useRef, useCallback } from '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 = useRef();
+    return useCallback(() => {
+        if (debounce.current) {
+            clearTimeout(debounce.current);
+        }
+        debounce.current = setTimeout(() => {
+            callback();
+        }, delay);
+    }, [callback, delay]);
+};
+
+export { useDebounce as default };

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

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

package/build/es/hooks/useDocHeight.js

@@ -1,13 +1,13 @@
-import * as React from 'react';
-import { useDebounceFunc } from './useDebounceFunc.js';
+import { useCallback, useEffect } from 'react';
+import useDebounce from './useDebounce.js';
 
 const DEBOUNCE_DELAY = 100;
 const useDocHeight = () => {
-    const setDocHeight = React.useCallback(() => {
+    const setDocHeight = useCallback(() => {
         document.documentElement.style.setProperty('--vh100', `${window.innerHeight}px`);
     }, []);
-    const debounceSetDocHeight = useDebounceFunc(setDocHeight, DEBOUNCE_DELAY);
-    React.useEffect(() => {
+    const debounceSetDocHeight = useDebounce(setDocHeight, DEBOUNCE_DELAY);
+    useEffect(() => {
         setDocHeight();
         window.addEventListener('resize', debounceSetDocHeight);
         window.addEventListener('orientationchange', debounceSetDocHeight);
@@ -18,4 +18,4 @@ const useDocHeight = () => {
     }, [debounceSetDocHeight, setDocHeight]);
 };
 
-export { useDocHeight };
+export { useDocHeight as default };

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

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

package/build/es/hooks/{useElementDimensions.js → useResizeObserver.js}

@@ -4,21 +4,21 @@ import { useState, useRef, useCallback, useEffect } from 'react';
  * Hook to get element dimensions when layout changes
  */
 const ResizeObserver = typeof window !== 'undefined' && window.ResizeObserver;
-function useResizeObserver() {
+const useResizeObserver = () => {
     const [size, setSize] = useState({ width: 0, height: 0 });
     const resizeObserver = useRef(null);
     const onResize = useCallback(entries => {
         const { width, height } = entries[0].contentRect;
         setSize({ width, height });
     }, []);
-    const ref = useCallback(node => {
-        if (node !== null && ResizeObserver) {
+    const ref = useCallback(instance => {
+        if (instance !== null && ResizeObserver) {
             if (resizeObserver.current) {
                 resizeObserver.current.disconnect();
             }
             resizeObserver.current = new ResizeObserver(onResize);
             if (resizeObserver.current) {
-                resizeObserver.current.observe(node);
+                resizeObserver.current.observe(instance);
             }
         }
     }, [onResize]);
@@ -28,6 +28,6 @@ function useResizeObserver() {
         }
     }, []);
     return { ref, width: size.width, height: size.height };
-}
+};
 
 export { useResizeObserver as default };