@dnanpm/styleguide 3.5.0 → 3.6.0

package/build/cjs/build/assets/fonts/fonts.css

@@ -1,129 +1,129 @@
-/* "DNA Text" font definition */
-@font-face {
-    font-family: 'DNA Text';
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAText-Regular.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAText-Regular.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Text';
-    font-style: normal;
-    font-weight: 500;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAText-Medium.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAText-Medium.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Text';
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAText-Bold.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAText-Bold.woff') format('woff');
-}
-
-/* "DNA Heading" font definition */
-@font-face {
-    font-family: 'DNA Heading';
-    font-style: normal;
-    font-weight: 600;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAHeading-DemiBold.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAHeading-DemiBold.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Heading';
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAHeading-Bold.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAHeading-Bold.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Heading';
-    font-style: normal;
-    font-weight: 900;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAHeading-Black.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAHeading-Black.woff') format('woff');
-}
-
-/* "DNA Numerals" font definition */
-@font-face {
-    font-family: 'DNA Numerals';
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNANumerals-Bold.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNANumerals-Bold.woff') format('woff');
-}
-
-/* Direct definitons of DNA fonts */
-@font-face {
-    font-family: 'DNA Text Regular';
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAText-Regular.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAText-Regular.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Text Medium';
-    font-style: normal;
-    font-weight: 500;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAText-Medium.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAText-Medium.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Text Bold';
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAText-Bold.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAText-Bold.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Heading Demi Bold';
-    font-style: normal;
-    font-weight: 600;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAHeading-DemiBold.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAHeading-DemiBold.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Heading Bold';
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAHeading-Bold.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAHeading-Bold.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Heading Black';
-    font-style: normal;
-    font-weight: 900;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAHeading-Black.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAHeading-Black.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Numerals Bold';
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNANumerals-Bold.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNANumerals-Bold.woff') format('woff');
-}
+/* "DNA Text" font definition */
+@font-face {
+    font-family: 'DNA Text';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('https://www.dna.fi/fonts/DNAText-Regular.woff2') format('woff2'),
+        url('https://www.dna.fi/fonts/DNAText-Regular.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Text';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url('https://www.dna.fi/fonts/DNAText-Medium.woff2') format('woff2'),
+        url('https://www.dna.fi/fonts/DNAText-Medium.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Text';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://www.dna.fi/fonts/DNAText-Bold.woff2') format('woff2'),
+        url('https://www.dna.fi/fonts/DNAText-Bold.woff') format('woff');
+}
+
+/* "DNA Heading" font definition */
+@font-face {
+    font-family: 'DNA Heading';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url('https://www.dna.fi/fonts/DNAHeading-DemiBold.woff2') format('woff2'),
+        url('https://www.dna.fi/fonts/DNAHeading-DemiBold.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Heading';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://www.dna.fi/fonts/DNAHeading-Bold.woff2') format('woff2'),
+        url('https://www.dna.fi/fonts/DNAHeading-Bold.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Heading';
+    font-style: normal;
+    font-weight: 900;
+    font-display: swap;
+    src: url('https://www.dna.fi/fonts/DNAHeading-Black.woff2') format('woff2'),
+        url('https://www.dna.fi/fonts/DNAHeading-Black.woff') format('woff');
+}
+
+/* "DNA Numerals" font definition */
+@font-face {
+    font-family: 'DNA Numerals';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://www.dna.fi/fonts/DNANumerals-Bold.woff2') format('woff2'),
+        url('https://www.dna.fi/fonts/DNANumerals-Bold.woff') format('woff');
+}
+
+/* Direct definitons of DNA fonts */
+@font-face {
+    font-family: 'DNA Text Regular';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('https://www.dna.fi/fonts/DNAText-Regular.woff2') format('woff2'),
+        url('https://www.dna.fi/fonts/DNAText-Regular.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Text Medium';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url('https://www.dna.fi/fonts/DNAText-Medium.woff2') format('woff2'),
+        url('https://www.dna.fi/fonts/DNAText-Medium.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Text Bold';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://www.dna.fi/fonts/DNAText-Bold.woff2') format('woff2'),
+        url('https://www.dna.fi/fonts/DNAText-Bold.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Heading Demi Bold';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url('https://www.dna.fi/fonts/DNAHeading-DemiBold.woff2') format('woff2'),
+        url('https://www.dna.fi/fonts/DNAHeading-DemiBold.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Heading Bold';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://www.dna.fi/fonts/DNAHeading-Bold.woff2') format('woff2'),
+        url('https://www.dna.fi/fonts/DNAHeading-Bold.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Heading Black';
+    font-style: normal;
+    font-weight: 900;
+    font-display: swap;
+    src: url('https://www.dna.fi/fonts/DNAHeading-Black.woff2') format('woff2'),
+        url('https://www.dna.fi/fonts/DNAHeading-Black.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Numerals Bold';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://www.dna.fi/fonts/DNANumerals-Bold.woff2') format('woff2'),
+        url('https://www.dna.fi/fonts/DNANumerals-Bold.woff') format('woff');
+}

package/build/cjs/components/Button/ButtonIcon.js

@@ -29,6 +29,10 @@ const ButtonElement = styled__default["default"].button `
     border: 2px solid transparent;
     padding: ${styledUtils.getDividedSize(theme["default"].base.baseWidth, 5)} 0;
 
+    & svg {
+        pointer-events: none;
+    }
+
     ${({ isReversed }) => isReversed && `flex-direction: row-reverse;`}
 
     &:focus {

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { KeyboardEvent, MouseEvent, ReactNode } from 'react';
 import React from 'react';
 interface Props {
     /**
@@ -9,6 +9,14 @@ interface Props {
      * Content of the component
      */
     children?: ReactNode;
+    /**
+     * Allows to pass common mouse click callback to all children
+     */
+    onClick?: (e: MouseEvent<HTMLElement>) => void;
+    /**
+     * Allows to pass common keyboard key down callback to all children
+     */
+    onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void;
     /**
      * Allows to define aria-label attribute for nav HTML element
      */

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

@@ -103,11 +103,15 @@ const DropdownList = styled["default"](CoreULStyles) `
     ${common["default"]({ elevation: 'low' })}
 `;
 const reducer = (state, action) => {
-    var _a;
+    var _a, _b;
     switch (action.type) {
+        case 'resetNavigationState': {
+            const navigationItems = React.Children.toArray((_a = action === null || action === void 0 ? void 0 : action.payload) === null || _a === void 0 ? void 0 : _a.navigationItems);
+            return Object.assign(Object.assign({}, state), { navigationItems: navigationItems.slice(0, navigationItems.length - state.lastItemWidth.length), dropdownItems: navigationItems.slice(navigationItems.length - state.lastItemWidth.length) });
+        }
         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] }), (((_a = action === null || action === void 0 ? void 0 : action.payload) === null || _a === void 0 ? void 0 : _a.lastItem) && {
+            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],
             }));
         }
@@ -164,7 +168,7 @@ const PriorityNavigation = (_a) => {
     const toggleDropdown = () => setIsDropdownOpen(!isDropdownOpen);
     const navigationItems = React.useRef(new Map()).current;
     const initialState = {
-        navigationItems: props.children,
+        navigationItems: React.Children.toArray(props.children),
         dropdownItems: [],
         lastItemWidth: [],
     };
@@ -197,6 +201,9 @@ const PriorityNavigation = (_a) => {
             child.type === PriorityNavigationItem["default"] &&
             child.props.isActive));
     useOutsideClick["default"](listsContainerRef, () => {
+        if (isMobileNavigationOpen) {
+            setIsMobileNavigationOpen(false);
+        }
         if (isDropdownOpen) {
             setIsDropdownOpen(false);
         }
@@ -212,16 +219,24 @@ const PriorityNavigation = (_a) => {
         checkHorizontalOverflow,
         isMobile,
     ]);
-    const navigationListItems = React.Children.map([...state.navigationItems, ...(isMobile ? state.dropdownItems : [])], (navigationItem, index) => React.isValidElement(navigationItem) &&
-        navigationItem.type === PriorityNavigationItem["default"] && (React__default["default"].createElement(PriorityNavigationItem["default"], { id: navigationItem.props.id, key: navigationItem.key, isActive: navigationItem.props.isActive, className: navigationItem.props.className, "data-testid": navigationItem.props['data-testid'], innerRef: instance => instance && navigationItems.set(index, instance) },
-        navigationItem.props.children,
-        navigationItem.props.isActive && isMobile && (React__default["default"].createElement(Icon["default"], { icon: icons.Check, color: theme["default"].color.default.pink })))));
+    React.useEffect(() => {
+        dispatch({
+            type: 'resetNavigationState',
+            payload: {
+                navigationItems: props.children,
+            },
+        });
+        setIsMobileNavigationOpen(false);
+    }, [props.children]);
     return (React__default["default"].createElement(Container, { id: props.id, "aria-label": props.navigationLabel, className: props.className, "data-testid": dataTestId },
         React__default["default"].createElement(ListsContainer, { ref: listsContainerRef },
             isMobile && selectedItem && (React__default["default"].createElement(MobileDropdown, { onClick: toggleMobileNavigation },
                 selectedItem,
                 React__default["default"].createElement(Icon["default"], { icon: isMobileNavigationOpen ? icons.ChevronUp : icons.ChevronDown }))),
-            React__default["default"].createElement(NavigationList, { ref: navigationListRef, isMobileNavigationOpen: isMobileNavigationOpen }, navigationListItems),
+            React__default["default"].createElement(NavigationList, { ref: navigationListRef, isMobileNavigationOpen: isMobileNavigationOpen }, React.Children.map([...state.navigationItems, ...(isMobile ? state.dropdownItems : [])], (navigationItem, index) => React.isValidElement(navigationItem) &&
+                navigationItem.type === PriorityNavigationItem["default"] && (React__default["default"].createElement(PriorityNavigationItem["default"], { id: navigationItem.props.id, key: navigationItem.key, onClick: navigationItem.props.onClick || props.onClick, onKeyDown: navigationItem.props.onKeyDown || props.onKeyDown, isActive: navigationItem.props.isActive, className: navigationItem.props.className, "data-testid": navigationItem.props['data-testid'], innerRef: instance => instance && navigationItems.set(index, instance) },
+                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))))));

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

@@ -1 +1 @@
-import 'jest-styled-components';
+export {};

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

@@ -1,4 +1,4 @@
-import type { ReactNode, RefObject } from 'react';
+import type { KeyboardEvent, MouseEvent, ReactNode, RefObject } from 'react';
 import React from 'react';
 export interface Props {
     /**
@@ -10,13 +10,21 @@ export interface Props {
      */
     children?: ReactNode;
     /**
-     * A ref object, or a ref callback function
+     * On component mouse click callback
      */
-    innerRef?: RefObject<HTMLLIElement> | ((instance: HTMLLIElement | null) => void) | null;
+    onClick?: (e: MouseEvent<HTMLElement>) => void;
+    /**
+     * On component keyboard key down callback
+     */
+    onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void;
     /**
      * Allows to set component as active
      */
     isActive?: boolean;
+    /**
+     * A ref object, or a ref callback function
+     */
+    innerRef?: RefObject<HTMLLIElement> | ((instance: HTMLLIElement | null) => void) | null;
     /**
      * Allows to pass a custom className
      */

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

@@ -21,6 +21,20 @@ const Element = styled["default"].li `
     padding: 1rem 1.25rem;
     flex-shrink: 0;
 
+    ${({ onClick }) => onClick &&
+    `
+        cursor: pointer;
+    `};
+
+    &:focus-within {
+        & > * {
+            border-radius: ${theme["default"].radius.s};
+            border: 2px solid ${theme["default"].color.focus.light};
+            box-shadow: 0px 0px 0px 2px ${theme["default"].color.focus.dark};
+            outline: none;
+        }
+    }
+
     ${({ isActive }) => styledUtils.media.md `
         justify-content: center;
         padding: 1rem 0;
@@ -29,26 +43,20 @@ const Element = styled["default"].li `
         border-bottom: 3px solid ${isActive ? theme["default"].color.text.pink : 'transparent'};
     `}
 
-    & a {
+    & > * {
         display: block;
         color: ${({ isActive }) => (isActive ? theme["default"].color.text.pink : theme["default"].color.text.black)};
         ${({ isActive }) => isActive && `font-weight: ${theme["default"].fontWeight.bold}`};
         border: 2px solid transparent;
 
-        &:focus {
-            border-radius: ${theme["default"].radius.s};
-            border: 2px solid ${theme["default"].color.focus.light};
-            box-shadow: 0px 0px 0px 2px ${theme["default"].color.focus.dark};
-            outline: none;
+        &:hover {
+            color: ${theme["default"].color.hover.pink};
+            text-decoration: none;
         }
 
         ${styledUtils.media.md `
             margin: auto;
         `}
-
-        &:hover {
-            color: ${theme["default"].color.hover.pink};
-        }
     }
 `;
 /**
@@ -56,7 +64,7 @@ const Element = styled["default"].li `
  */
 const PriorityNavigationItem = (_a) => {
     var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
-    return (React__default["default"].createElement(Element, { id: props.id, ref: props.innerRef, isActive: props.isActive, className: props.className, "data-testid": dataTestId }, props.children));
+    return (React__default["default"].createElement(Element, { id: props.id, ref: props.innerRef, onClick: props.onClick, onKeyDown: props.onKeyDown, isActive: props.isActive, className: props.className, "data-testid": dataTestId }, props.children));
 };
 
 exports["default"] = PriorityNavigationItem;

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

@@ -1 +1 @@
-import 'jest-styled-components';
+export {};

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

@@ -1,10 +1,10 @@
-import type { ReactNode } from 'react';
+import type { MouseEvent, ReactNode } from 'react';
 import React from 'react';
-type Type = 'default' | 'underlined';
+type Type = 'box' | 'panel' | 'underlined';
 /**
- * @deprecated Use `default` or `underlined` types
+ * @deprecated Use `box`, `panel` or `underlined` types
  */
-type TypeDeprecated = 'gray';
+type TypeDeprecated = 'default' | 'gray';
 export interface Props {
     /**
      * Unique ID for the component
@@ -15,14 +15,16 @@ export interface Props {
      */
     label: string;
     /**
-     * Style of the tab
+     * Allows to change the styling of component
      *
-     * @param {Type} default Default style
-     * @param {Type} underlined Visually similar to anchor
+     * @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} gray DEPRECATED Use `default` or `underlined` types
+     * @param {TypeDeprecated} default DEPRECATED Use `box` type
+     * @param {TypeDeprecated} gray DEPRECATED Use `box`, `panel` or `underlined` types
      *
-     * @default 'default'
+     * @default 'box'
      */
     type?: Type | TypeDeprecated;
     /**
@@ -45,10 +47,19 @@ export interface Props {
      * 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) => void;
+    onClick?: (tab: string, e?: MouseEvent<HTMLElement>) => void;
     /**
      * Allows to pass testid string for testing purposes
      */

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/Tab/__tests__/Tab.spec.d.ts

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