@dnanpm/styleguide 3.5.1 → 3.7.0

package/build/cjs/components/Drawer/Drawer.js

@@ -12,6 +12,8 @@ var styledUtils = require('../../utils/styledUtils.js');
 var Box = require('../Box/Box.js');
 var ButtonClose = require('../Button/ButtonClose.js');
 var Icon = require('../Icon/Icon.js');
+var common = require('../../utils/common.js');
+var Floater = require('../Floater/Floater.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -63,7 +65,7 @@ const StyledReactModal = styled["default"](ReactModal__default["default"]) `
         width: ${sizeMap[size]};
     `};
 `;
-const StyledOverlay = styled["default"].div `
+const StyledReactModalOverlay = styled["default"].div `
     display: flex;
     justify-content: center;
     align-items: center;
@@ -101,30 +103,96 @@ const StyledOverlay = styled["default"].div `
         }
     }
 `;
+const StyledReactModalContent = styled["default"].div `
+    &:focus {
+        outline: none;
+    }
+`;
 const StyledBox = styled["default"](Box["default"]) `
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
     border-radius: 0;
     height: 100%;
     overflow-y: auto;
+    position: relative;
+    padding: 0;
+    border: 0 none;
 `;
-const StyledContent = styled["default"].div `
-    &:focus {
-        outline: none;
+const HeaderContainer = styled["default"].div `
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+`;
+const Header = styled["default"].div `
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    border-bottom: 1px solid ${theme["default"].color.line.L03};
+    padding: 1.25rem;
+    background-color: ${({ variant }) => variant === 'light'
+    ? theme["default"].color.background.white.default
+    : theme["default"].color.background.plum.E02};
+    width: 100%;
+
+    h2,
+    p {
+        margin: 0;
     }
 `;
-const ModalOverlay = ({ ref, onClick, onMouseDown, className }, contentElement) => (React__default["default"].createElement(StyledOverlay, { ref: ref, onClick: onClick, onMouseDown: onMouseDown, className: className }, contentElement));
+const Title = styled["default"].h2 `
+    font-size: ${({ size }) => (size === 'small' ? theme["default"].fontSize.h2S : theme["default"].fontSize.h2M)};
+    color: ${({ variant }) => variant === 'light' ? theme["default"].color.default.black : theme["default"].color.default.white};
+`;
+const Subtitle = styled["default"].p `
+    font-size: ${({ size }) => (size === 'small' ? theme["default"].fontSize.l : theme["default"].fontSize.xl)};
+    color: ${({ variant }) => variant === 'light' ? theme["default"].color.default.black : theme["default"].color.default.white};
+`;
+const CloseButton = styled["default"](ButtonClose["default"]) `
+    margin: 0;
+    padding: 0.625rem;
+    border-radius: 0 0 0 ${theme["default"].radius.default};
+    background-color: ${({ variant }) => variant === 'light'
+    ? theme["default"].color.background.sand.E01
+    : theme["default"].color.background.plum.default};
+`;
+const Content = styled["default"].div `
+    padding: ${({ padding }) => padding};
+    margin: 0;
+`;
+const Footer = styled["default"].div `
+    padding: 1.25rem;
+    margin: 0;
+    width: 100%;
+    border-top: 1px solid ${theme["default"].color.line.L04};
+    background-color: ${theme["default"].color.background.white.default};
+
+    ${common["default"]({ elevation: 'high', shadow: '1 0 0 0' })};
+`;
+const ModalOverlay = ({ ref, onClick, onMouseDown, className }, contentElement) => (React__default["default"].createElement(StyledReactModalOverlay, { ref: ref, onClick: onClick, onMouseDown: onMouseDown, className: className }, contentElement));
 const ModalContent = (_a, children) => {
-    var { ref, tabIndex, role, onKeyDown, onMouseDown, onMouseUp, onClick, className } = _a, contentProps = tslib.__rest(_a, ["ref", "tabIndex", "role", "onKeyDown", "onMouseDown", "onMouseUp", "onClick", "className"]);
-    return (React__default["default"].createElement(StyledContent, { ref: ref, tabIndex: tabIndex, role: role, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onClick: onClick, "aria-label": contentProps['aria-label'], "aria-modal": contentProps['aria-modal'], className: className }, children));
+    var { id, ref, tabIndex, role, onKeyDown, onMouseDown, onMouseUp, onClick, className } = _a, contentProps = tslib.__rest(_a, ["id", "ref", "tabIndex", "role", "onKeyDown", "onMouseDown", "onMouseUp", "onClick", "className"]);
+    return (React__default["default"].createElement(StyledReactModalContent, { id: id, ref: ref, tabIndex: tabIndex, role: role, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onClick: onClick, "aria-label": contentProps['aria-label'], "aria-modal": contentProps['aria-modal'], className: className }, children));
 };
 const Drawer = (_a) => {
-    var { appElement = '#__next', size = 'medium', closeButton = true, isClosable = true, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["appElement", "size", "closeButton", "isClosable", 'data-testid']);
+    var { appElement = '#__next', size = 'medium', variant = 'light', padding = '1.25rem', closeButton = true, isClosable = true, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["appElement", "size", "variant", "padding", "closeButton", "isClosable", 'data-testid']);
     ReactModal__default["default"].setAppElement(appElement);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(StyledReactModal, { id: props.id, isOpen: props.isOpen, overlayElement: ModalOverlay, contentElement: ModalContent, onRequestClose: props.onRequestClose, portalClassName: props.className, contentLabel: props.contentLabel, shouldCloseOnEsc: isClosable, shouldCloseOnOverlayClick: isClosable, closeTimeoutMS: 300, size: size },
-            React__default["default"].createElement(StyledBox, { elevation: "extraHigh", margin: props.margin, padding: props.padding, "data-testid": dataTestId },
-                props.children,
-                closeButton && isClosable && (React__default["default"].createElement(ButtonClose["default"], { onClick: props.onRequestClose, "aria-label": props.closeLabel, "data-testid": dataTestId && `${dataTestId}-close-button` },
-                    React__default["default"].createElement(Icon["default"], { icon: icons.Close }))))),
+            React__default["default"].createElement(StyledBox, { elevation: "extraHigh", margin: props.margin, "data-testid": dataTestId },
+                React__default["default"].createElement("div", null,
+                    React__default["default"].createElement(HeaderContainer, null,
+                        React__default["default"].createElement(Header, { variant: variant, "data-testid": dataTestId && `${dataTestId}-header` },
+                            React__default["default"].createElement(Title, { size: size, variant: variant }, props.title),
+                            props.subtitle && (React__default["default"].createElement(Subtitle, { size: size, variant: variant }, props.subtitle))),
+                        closeButton && isClosable && (React__default["default"].createElement(CloseButton, { onClick: props.onRequestClose, "aria-label": props.closeLabel, "data-testid": dataTestId && `${dataTestId}-close-button`, variant: variant },
+                            React__default["default"].createElement(Icon["default"], { icon: icons.Close, color: variant === 'light'
+                                    ? theme["default"].color.default.plum
+                                    : theme["default"].color.default.white })))),
+                    React__default["default"].createElement(Content, { "data-testid": dataTestId && `${dataTestId}-content`, padding: padding }, props.children)),
+                props.footer && (React__default["default"].createElement(Floater["default"], { position: "bottom" },
+                    React__default["default"].createElement(Footer, { "data-testid": dataTestId && `${dataTestId}-footer` }, props.footer))))),
         React__default["default"].createElement(GlobalStyle, null)));
 };
 

package/build/cjs/components/PriorityNavigation/PriorityNavigation.js

@@ -89,7 +89,7 @@ const NavigationList = styled["default"](CoreULStyles) `
 `;
 const DropdownList = styled["default"](CoreULStyles) `
     position: absolute;
-    top: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 5.6)};
+    top: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 6)};
     right: 0;
     z-index: 1;
     padding-bottom: 0.5rem;
@@ -100,6 +100,12 @@ const DropdownList = styled["default"](CoreULStyles) `
     clip-path: inset(0% 0% ${({ isDropdownOpen }) => (isDropdownOpen ? '0%' : '100%')} 0%);
     transition: all 0.2s ease-in-out;
 
+    ${styledUtils.media.md `
+        & > li {
+            margin: auto 1.25rem;
+        }
+    `}
+
     ${common["default"]({ elevation: 'low' })}
 `;
 const reducer = (state, action) => {
@@ -112,7 +118,10 @@ const reducer = (state, action) => {
         case 'moveItemToDropdown': {
             const lastChild = state.navigationItems[state.navigationItems.length - 1];
             return Object.assign(Object.assign(Object.assign({}, state), { navigationItems: state.navigationItems.slice(0, -1), dropdownItems: [lastChild, ...state.dropdownItems] }), (((_b = action === null || action === void 0 ? void 0 : action.payload) === null || _b === void 0 ? void 0 : _b.lastItem) && {
-                lastItemWidth: [...state.lastItemWidth, action.payload.lastItem.clientWidth],
+                lastItemWidth: [
+                    ...state.lastItemWidth,
+                    action.payload.lastItem.offsetWidth + 40,
+                ],
             }));
         }
         case 'moveItemToNavigation': {
@@ -160,8 +169,9 @@ const PriorityNavigation = (_a) => {
     var { dropdownButtonLabel = 'Lisää', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["dropdownButtonLabel", 'data-testid']);
     const listsContainerRef = React.useRef(null);
     const navigationListRef = React.useRef(null);
+    const dropdownButtonRef = React.useRef(null);
     const { isMobile } = useWindowSize["default"](theme["default"].breakpoints.md);
-    const { width: listsContainerWidth } = useResizeObserver["default"](listsContainerRef);
+    const { width: wrapperContainerWidth } = useResizeObserver["default"](listsContainerRef);
     const [isMobileNavigationOpen, setIsMobileNavigationOpen] = React.useState(false);
     const toggleMobileNavigation = () => setIsMobileNavigationOpen(!isMobileNavigationOpen);
     const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
@@ -174,10 +184,13 @@ const PriorityNavigation = (_a) => {
     };
     const [state, dispatch] = React.useReducer(reducer, initialState);
     const checkHorizontalOverflow = useDebounce["default"](() => {
+        var _a, _b;
         if (navigationListRef.current && listsContainerRef.current) {
-            const listsContainerRefWidth = navigationListRef.current.scrollWidth;
+            const navigationListWidth = navigationListRef.current.scrollWidth;
+            const dropdownButtonWidth = ((_b = (_a = dropdownButtonRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 80) + 20;
+            console.log('dropdownButtonWidth', dropdownButtonWidth);
             if (state.navigationItems.length > 0 &&
-                listsContainerRefWidth + 80 > listsContainerWidth) {
+                navigationListWidth + dropdownButtonWidth > wrapperContainerWidth) {
                 dispatch({
                     type: 'moveItemToDropdown',
                     payload: {
@@ -186,10 +199,11 @@ const PriorityNavigation = (_a) => {
                 });
             }
             else if (state.dropdownItems.length > 0 &&
-                listsContainerWidth >
-                    listsContainerRefWidth +
+                wrapperContainerWidth >
+                    navigationListWidth +
                         state.lastItemWidth[state.lastItemWidth.length - 1] +
-                        100) {
+                        dropdownButtonWidth +
+                        20) {
                 dispatch({
                     type: 'moveItemToNavigation',
                 });
@@ -215,7 +229,7 @@ const PriorityNavigation = (_a) => {
     }, [
         state.navigationItems,
         state.dropdownItems,
-        listsContainerWidth,
+        wrapperContainerWidth,
         checkHorizontalOverflow,
         isMobile,
     ]);
@@ -238,8 +252,10 @@ const PriorityNavigation = (_a) => {
                 navigationItem.props.children,
                 navigationItem.props.isActive && isMobile && (React__default["default"].createElement(Icon["default"], { icon: icons.Check, color: theme["default"].color.default.pink })))))),
             !isMobile && Boolean(state.dropdownItems.length) && (React__default["default"].createElement(React__default["default"].Fragment, null,
-                React__default["default"].createElement(ButtonIcon["default"], { onClick: toggleDropdown, icon: isDropdownOpen ? icons.ChevronUp : icons.ChevronDown, isReversed: true }, dropdownButtonLabel),
-                React__default["default"].createElement(DropdownList, { isDropdownOpen: isDropdownOpen }, state.dropdownItems))))));
+                React__default["default"].createElement("div", { ref: dropdownButtonRef },
+                    React__default["default"].createElement(ButtonIcon["default"], { onClick: toggleDropdown, icon: isDropdownOpen ? icons.ChevronUp : icons.ChevronDown, isReversed: true }, dropdownButtonLabel)),
+                React__default["default"].createElement(DropdownList, { isDropdownOpen: isDropdownOpen }, state.dropdownItems.map(dropdownItem => React.isValidElement(dropdownItem) &&
+                    dropdownItem.type === PriorityNavigationItem["default"] && (React__default["default"].createElement(PriorityNavigationItem["default"], { id: dropdownItem.props.id, key: dropdownItem.key, onClick: dropdownItem.props.onClick || props.onClick, onKeyDown: dropdownItem.props.onKeyDown || props.onKeyDown, isActive: dropdownItem.props.isActive, className: dropdownItem.props.className, "data-testid": dropdownItem.props['data-testid'] }, dropdownItem.props.children)))))))));
 };
 
 exports["default"] = PriorityNavigation;

package/build/cjs/components/PriorityNavigationItem/PriorityNavigationItem.js

@@ -18,7 +18,7 @@ const Element = styled["default"].li `
     justify-content: space-between;
     list-style: none;
     position: relative;
-    padding: 1rem 1.25rem;
+    padding: 0.75rem 1.25rem;
     flex-shrink: 0;
 
     ${({ onClick }) => onClick &&
@@ -36,9 +36,9 @@ const Element = styled["default"].li `
     }
 
     ${({ isActive }) => styledUtils.media.md `
-        justify-content: center;
+        justify-content: left;
         padding: 1rem 0;
-        margin: auto 1.25rem;
+        margin: auto 1rem;
         border-top: 3px solid transparent;
         border-bottom: 3px solid ${isActive ? theme["default"].color.text.pink : 'transparent'};
     `}
@@ -53,10 +53,6 @@ const Element = styled["default"].li `
             color: ${theme["default"].color.hover.pink};
             text-decoration: none;
         }
-
-        ${styledUtils.media.md `
-            margin: auto;
-        `}
     }
 `;
 /**

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

@@ -7,6 +7,8 @@ var React = require('react');
 var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
+var Box = require('../Box/Box.js');
+var Divider = require('../Divider/Divider.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -18,26 +20,13 @@ const TabLabel = styled["default"].li `
     list-style: none;
     font-size: ${theme["default"].fontSize.default};
     line-height: ${theme["default"].lineHeight.default};
-    font-weight: ${theme["default"].fontWeight.book};
+    font-weight: ${({ isActive }) => (isActive ? theme["default"].fontWeight.bold : theme["default"].fontWeight.book)};
     background-color: ${({ isActive }) => isActive ? theme["default"].color.background.white.default : theme["default"].color.background.sand.E01};
+    border-radius: ${theme["default"].radius.default} ${theme["default"].radius.default} 0 0;
     border: 1px solid ${theme["default"].color.line.L03};
     border-bottom: 0 none;
     padding: 0.625rem 1.25rem;
     cursor: pointer;
-
-    && + * {
-        border-right: 0 none;
-    }
-
-    &:first-child {
-        border-right: 0 none;
-        border-radius: ${theme["default"].radius.default} 0 0 0;
-    }
-
-    &&:last-child {
-        border-right: 1px solid ${theme["default"].color.line.L03};
-        border-radius: 0 ${theme["default"].radius.default} 0 0;
-    }
 `;
 const TabStyle = styled["default"].li `
     display: inline-block;
@@ -49,11 +38,6 @@ const TabStyle = styled["default"].li `
     font-size: ${theme["default"].fontSize.default};
     line-height: ${theme["default"].lineHeight.default};
     font-weight: ${theme["default"].fontWeight.book};
-    margin-right: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 2)};
-
-    &:last-child {
-        margin-right: 0;
-    }
 
     ${({ isActive }) => isActive &&
     `
@@ -64,7 +48,6 @@ const TabStyle = styled["default"].li `
     ${({ $type }) => $type === 'underlined' &&
     `
             padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1.6)} 0;
-            margin-right: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 3)};
         `}
     
     ${({ isActive, $type }) => isActive &&
@@ -74,15 +57,44 @@ const TabStyle = styled["default"].li `
             background-color: transparent;
         `}
 `;
+const ContentContainer = styled["default"].div `
+    ${({ $type }) => {
+    if ($type === 'box' || $type === 'default') {
+        return `
+                border-top-left-radius: 0;
+            `;
+    }
+    if ($type === 'panel') {
+        return `
+                border-top: 1px solid ${theme["default"].color.line.L03};
+            `;
+    }
+    if ($type === 'underlined' || $type === 'gray') {
+        return `
+                margin-top: ${theme["default"].grid.gutter};
+            `;
+    }
+    return '';
+}}
+`;
 /** @visibleName Tab */
 const Tab = (_a) => {
-    var { type = 'default', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", 'data-testid']);
-    const onClickHandler = () => {
+    var { type = 'box', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", 'data-testid']);
+    const onClickHandler = (e) => {
         if (props.onClick) {
-            props.onClick(props.label);
+            props.onClick(props.label, e);
         }
     };
-    return type === 'default' ? (React__default["default"].createElement(TabLabel, { role: "tab", "$type": type, "aria-selected": props.activeTab ? props.activeTab === props.label : props.isActive, isActive: props.activeTab ? props.activeTab === props.label : props.isActive, onClick: onClickHandler }, props.label)) : (React__default["default"].createElement(TabStyle, { role: "tab", "aria-selected": props.activeTab ? props.activeTab === props.label : props.isActive, isActive: props.activeTab ? props.activeTab === props.label : props.isActive, "$type": props.tabStyle || type, onClick: onClickHandler }, props.label));
+    return type === 'box' || type === 'default' || type === 'panel' ? (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(TabLabel, { role: "tab", id: props.id, "$type": type, "aria-selected": props.activeTab ? props.activeTab === props.label : props.isActive, isActive: props.activeTab ? props.activeTab === props.label : props.isActive, onClick: onClickHandler }, props.label),
+        props.isStateless &&
+            (props.children && (props.activeTab === props.label || props.isActive) ? (React__default["default"].createElement(ContentContainer, { role: "tabpanel", "$type": props.tabStyle || type, as: (type === 'box' || type === 'default') && !props.tabStyle
+                    ? Box["default"]
+                    : undefined }, props.children)) : (React__default["default"].createElement(Divider["default"], { margin: "0" }))))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(TabStyle, { role: "tab", id: props.id, "$type": props.tabStyle || type, "aria-selected": props.activeTab ? props.activeTab === props.label : props.isActive, isActive: props.activeTab ? props.activeTab === props.label : props.isActive, onClick: onClickHandler }, props.label),
+        props.isStateless &&
+            props.children &&
+            (props.activeTab === props.label || props.isActive) && (React__default["default"].createElement(ContentContainer, { role: "tabpanel", "$type": props.tabStyle || type }, props.children))));
 };
 
 exports["default"] = Tab;

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

@@ -28,31 +28,76 @@ const Tablist = styled["default"].ul `
         }
     `}
 
-    ${({ $type }) => {
-    if ($type === 'default') {
-        return `margin: 0;`;
+    ${({ $type, isNarrowUnderlined }) => {
+    if ($type === 'box' || $type === 'default' || $type === 'panel') {
+        return `
+                margin: 0;
+                
+                & > li {
+                    border-right: 0 none;
+                    border-radius: 0;
+                }
+            
+                & > li:first-of-type {
+                    border-right: 0 none;
+                    border-top-left-radius: ${theme["default"].radius.default};
+                }
+            
+                & > li:last-of-type {
+                    border-right: 1px solid ${theme["default"].color.line.L03};
+                    border-top-right-radius: ${theme["default"].radius.default};
+                }
+            `;
     }
     if ($type === 'underlined') {
-        return `border-bottom: 1px solid ${theme["default"].color.line.L02};`;
+        return `
+                gap: ${isNarrowUnderlined ? '1.25rem' : '2.5rem'};
+                border-bottom: 1px solid ${theme["default"].color.line.L02};
+            `;
+    }
+    if ($type === 'gray') {
+        return `
+                gap: 1.25rem;
+            `;
     }
     return '';
 }}
 `;
-const StyledBox = styled["default"](Box["default"]) `
-    border-top-left-radius: 0;
-`;
-const TabContent = styled["default"].div `
-    margin-top: ${theme["default"].grid.gutter};
+const ContentContainer = styled["default"].div `
+    ${({ $type, isFullWidth }) => {
+    if ($type === 'box' || $type === 'default') {
+        return `
+                border-top-left-radius: 0;
+                ${isFullWidth ? 'border-top-right-radius: 0;' : ''}
+            `;
+    }
+    if ($type === 'panel') {
+        return `
+                border-top: 1px solid ${theme["default"].color.line.L03};
+            `;
+    }
+    if ($type === 'underlined' || $type === 'gray') {
+        return `
+                margin-top: ${theme["default"].grid.gutter};
+            `;
+    }
+    return '';
+}}
 `;
 /** @visibleName Tabs */
 const Tabs = (_a) => {
-    var { type = 'default', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", 'data-testid']);
+    var { type = 'box', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", 'data-testid']);
     const [activeTab, setActiveTab] = React.useState(props.defaultTab);
     const tabs = React.Children.map(props.children, child => React.isValidElement(child) && child.type === Tab["default"] ? child : null);
-    const onClickTabItem = (tab) => {
+    const onClickTabItem = (tab, e) => {
         setActiveTab(tab);
-        if (tab !== activeTab && props.onChange) {
-            props.onChange(tab);
+        if (tab !== activeTab) {
+            if (props.onChange) {
+                props.onChange(tab);
+            }
+            if (props.onClick && e) {
+                props.onClick(e);
+            }
         }
     };
     if (!tabs) {
@@ -63,8 +108,14 @@ const Tabs = (_a) => {
         setActiveTab((outerActiveTab === null || outerActiveTab === void 0 ? void 0 : outerActiveTab.props.label) || tabs[0].props.label);
     }
     return (React__default["default"].createElement("div", { className: props.className ? `tabs ${props.className}` : 'tabs', "data-testid": dataTestId },
-        React__default["default"].createElement(Tablist, { role: "tablist", "$type": props.tabStyle || type, isFullWidth: props.isFullWidth }, tabs.map(tab => (React__default["default"].createElement(Tab["default"], { key: tab.props.label, label: tab.props.label, type: props.tabStyle || type, isActive: tab.props.isActive ? tab.props.isActive : activeTab === tab.props.label, activeTab: tab.props.activeTab, onClick: onClickTabItem, className: tab.props.className, "data-testid": tab.props['data-testid'] })))),
-        type === 'default' && !props.tabStyle ? (React__default["default"].createElement(StyledBox, { role: "tabpanel" }, tabs.map(tab => tab.props.label !== activeTab ? undefined : tab.props.children))) : (React__default["default"].createElement(TabContent, { role: "tabpanel" }, tabs.map(tab => tab.props.label !== activeTab ? undefined : tab.props.children)))));
+        React__default["default"].createElement(Tablist, { role: "tablist", "$type": props.tabStyle || type, isFullWidth: props.isFullWidth, isNarrowUnderlined: props.isNarrowUnderlined }, React.Children.map(props.children, tab => React.isValidElement(tab) &&
+            tab.type === Tab["default"] && (React__default["default"].createElement(Tab["default"], { id: tab.props.id, key: tab.props.label, label: tab.props.label, type: props.tabStyle || type, isActive: tab.props.isActive
+                ? tab.props.isActive
+                : activeTab === tab.props.label, activeTab: tab.props.activeTab, onClick: onClickTabItem, className: tab.props.className, "data-testid": tab.props['data-testid'] })))),
+        React__default["default"].createElement(ContentContainer, { role: "tabpanel", "$type": props.tabStyle || type, isFullWidth: props.isFullWidth, as: (type === 'box' || type === 'default') && !props.tabStyle ? Box["default"] : undefined }, React.Children.map(props.children, tab => React.isValidElement(tab) &&
+            tab.type === Tab["default"] &&
+            (tab.props.isActive || tab.props.label === activeTab) &&
+            tab.props.children))));
 };
 
 exports["default"] = Tabs;

package/build/cjs/hooks/useResizeObserver.js

@@ -12,8 +12,8 @@ const useResizeObserver = (ref) => {
     const [size, setSize] = React.useState({ width: 0, height: 0 });
     const resizeObserver = React.useRef(null);
     const onResize = React.useCallback(entries => {
-        const { width, height } = entries[0].contentRect;
-        setSize({ width, height });
+        const { inlineSize, blockSize } = entries[0].borderBoxSize[0];
+        setSize({ width: inlineSize, height: blockSize });
     }, []);
     React.useEffect(() => {
         if ((ref === null || ref === void 0 ? void 0 : ref.current) && ResizeObserver) {

package/build/cjs/jest.config.d.ts

@@ -0,0 +1,3 @@
+import type { Config } from '@jest/types';
+declare const config: Config.InitialOptions;
+export default config;

package/build/cjs/jestAfterEnv.d.ts

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

package/build/{es → cjs/src}/components/Drawer/Drawer.d.ts

@@ -2,15 +2,33 @@ import type { ReactNode } from 'react';
 import React from 'react';
 import type { Props as ReactModalProps } from 'react-modal';
 type Size = 'small' | 'medium' | 'large';
+type Variant = 'light' | 'dark';
 interface Props {
     /**
      * Allows to control the state of component
      */
     isOpen: boolean;
+    /**
+     * Allows to define title shown in the header
+     */
+    title: string;
     /**
      * Unique ID for the component
      */
     id?: string;
+    /**
+     * Allows to change the color scheme of the component
+     *
+     * @param {Variant} light Sets header background color to `theme.color.background.white.default`
+     * @param {Variant} dark Sets header background color to `theme.color.background.plum.E02`
+     *
+     * @default 'light'
+     */
+    variant?: Variant;
+    /**
+     * Allows to define subtitle shown in the header
+     */
+    subtitle?: string;
     /**
      * Content of the component
      */
@@ -36,6 +54,7 @@ interface Props {
      * Allows to pass a custom margin
      *
      * @default '0'
+     * @deprecated Will be removed in the next major version
      */
     margin?: string;
     /**
@@ -69,6 +88,10 @@ interface Props {
      * @default true
      */
     isClosable?: boolean;
+    /**
+     * Allows to display the footer content
+     */
+    footer?: ReactNode;
     /**
      * Allows to pass a custom className
      */
@@ -78,5 +101,5 @@ interface Props {
      */
     'data-testid'?: string;
 }
-declare const Drawer: ({ appElement, size, closeButton, isClosable, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+declare const Drawer: ({ appElement, size, variant, padding, closeButton, isClosable, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 export default Drawer;

package/build/cjs/src/components/Drawer/__tests__/Drawer.spec.d.ts

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

package/build/cjs/src/components/PriorityNavigation/__tests__/PriorityNavigation.spec.d.ts

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

package/build/cjs/src/components/PriorityNavigationItem/__tests__/PriorityNavigationItem.spec.d.ts

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

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

@@ -0,0 +1,75 @@
+import type { MouseEvent, ReactNode } from 'react';
+import React from 'react';
+type Type = 'box' | 'panel' | 'underlined';
+/**
+ * @deprecated Use `box`, `panel` or `underlined` types
+ */
+type TypeDeprecated = 'default' | 'gray';
+export interface Props {
+    /**
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     * Allows to define tab label
+     */
+    label: string;
+    /**
+     * Allows to change the styling of component
+     *
+     * @param {Type} box Uses Box component as wrapper for content container
+     * @param {Type} panel Content container remains unstyled
+     * @param {Type} underlined Tab label is visually similar to anchor, with content container unstyled
+     *
+     * @param {TypeDeprecated} default DEPRECATED Use `box` type
+     * @param {TypeDeprecated} gray DEPRECATED Use `box`, `panel` or `underlined` types
+     *
+     * @default 'box'
+     */
+    type?: Type | TypeDeprecated;
+    /**
+     * Style of the tab
+     *
+     * @deprecated Use `type` property
+     */
+    tabStyle?: Type;
+    /**
+     * Content of the component
+     */
+    children?: ReactNode;
+    /**
+     * Allows to define currently active tab
+     *
+     * @deprecated Use `isActive` property
+     */
+    activeTab?: string;
+    /**
+     * Allows to set tab as active
+     */
+    isActive?: boolean;
+    /**
+     * Allows to enable updated internal state management.
+     * Note: In updated internal state management, this component acts as truly stateless and can be controlled with `isActive` property.
+     *
+     * @deprecated Will be removed in next major release
+     */
+    isStateless?: boolean;
+    /**
+     * On tab label click callback
+     *
+     * @deprecated Parameter `tab` has been deprecated. Use `e` parameter instead
+     */
+    onClick?: (tab: string, e?: MouseEvent<HTMLElement>) => void;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+}
+/** @visibleName Tab */
+declare const Tab: ({ type, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default Tab;

package/build/cjs/src/components/Tab/__tests__/Tab.spec.d.ts

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