@dnanpm/styleguide 3.8.2 → 3.8.3

package/build/cjs/components/AmountSelector/AmountSelector.js

@@ -8,7 +8,7 @@ var React = require('react');
 var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
-var ButtonArrow = require('../Button/ButtonArrow.js');
+var ButtonArrow = require('../ButtonArrow/ButtonArrow.js');
 var Icon = require('../Icon/Icon.js');
 
 const Container = styled.default.div `

package/build/cjs/components/{Button → ButtonArrow}/ButtonArrow.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import React from 'react';
-import type { Props as ButtonProps } from './Button';
+import type { Props as ButtonProps } from '../Button/Button';
 type ButtonArrowDirection = 'up' | 'right' | 'down' | 'left';
 type ButtonArrowVariant = 'primary' | 'secondary';
 type Props = ({

package/build/cjs/components/{Button → ButtonArrow}/ButtonArrow.js

@@ -8,9 +8,9 @@ var React = require('react');
 var styled = require('styled-components');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
+var ButtonPrimary = require('../ButtonPrimary/ButtonPrimary.js');
+var ButtonSecondary = require('../ButtonSecondary/ButtonSecondary.js');
 var Icon = require('../Icon/Icon.js');
-var ButtonPrimary = require('./ButtonPrimary.js');
-var ButtonSecondary = require('./ButtonSecondary.js');
 
 const iconsMap = {
     up: icons.ChevronUp,

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

@@ -0,0 +1,70 @@
+import type { MouseEvent, ReactNode } from 'react';
+import React from 'react';
+type Size = 'small' | 'medium' | 'large';
+type ButtonType = 'submit' | 'button' | 'reset';
+interface Props {
+    /**
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     *  Name of the button element
+     */
+    name?: string;
+    /**
+     * Allows to change the HTML type of button element. Ignored when `href` is defined
+     *
+     * @param {ButtonType} submit Button submits the form data
+     * @param {ButtonType} button No functionality when pressed
+     * @param {ButtonType} reset Button resets all the controls to their initial values
+     *
+     * @default 'submit'
+     */
+    type?: ButtonType;
+    /**
+     * Allows to change layout of the component based on size
+     *
+     * @param {Size} small Renders component in compact layout
+     * @param {Size} medium Default
+     * @param {Size} large Renders component with enlarged title and subtitle
+     *
+     * @default 'medium'
+     */
+    size?: Size;
+    /**
+     * Allows to change the type of resulting HTML element from button (`<button></button>`) to anchor (`<a href="..."></a>`)
+     */
+    href?: string;
+    /**
+     * Allows to define title
+     */
+    title: string;
+    /**
+     * Allows to define subtitle
+     */
+    subtitle?: string;
+    /**
+     * Allows to define visual content
+     */
+    children: ReactNode;
+    /**
+     * On button click callback
+     */
+    onClick?: (e: MouseEvent<HTMLElement>) => void;
+    /**
+     * Allows to change icon from `ChevronRight` to `Open`
+     */
+    isExternal?: boolean;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+/** @visibleName Button Card */
+declare const ButtonCard: ({ type, size, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default ButtonCard;

package/build/cjs/components/ButtonCard/ButtonCard.js

@@ -0,0 +1,135 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var icons = require('@dnanpm/icons');
+var React = require('react');
+var styled = require('styled-components');
+var theme = require('../../themes/theme.js');
+var Box = require('../Box/Box.js');
+var Icon = require('../Icon/Icon.js');
+
+const ButtonCardWrapper = styled.button `
+    display: block;
+    padding: 0;
+    border: 0 none;
+    width: 100%;
+    background-color: transparent;
+    cursor: pointer;
+    font-family: ${theme.default.fontFamily.default};
+    font-size: ${theme.default.fontSize.default};
+    line-height: ${theme.default.lineHeight.default};
+    color: ${theme.default.color.text.black};
+
+    &:focus-visible {
+        border: 1px solid ${theme.default.color.focus.light};
+        box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.dark};
+        border-radius: ${theme.default.radius.default};
+        outline: none;
+
+        & > div {
+            border: 0 none;
+        }
+    }
+
+    &:hover {
+        color: ${theme.default.color.text.black};
+        text-decoration: none;
+    }
+`;
+const StyledBox = styled(Box.default) `
+    display: flex;
+    gap: ${({ size }) => (size === 'small' ? '0.313rem' : '1rem')};
+    border: 1px solid ${theme.default.color.line.L03};
+    padding: ${({ size }) => (size === 'small' ? '0.625rem' : '1rem')};
+    ${({ size }) => size === 'small' && 'flex-direction: column'};
+    ${({ size }) => size !== 'small' && 'align-items: center'};
+`;
+const VisualContent = styled.div `
+    display: flex;
+    align-items: center;
+    width: ${({ size }) => (size === 'small' ? '2.5rem' : '3.75rem')};
+    height: ${({ size }) => (size === 'small' ? '2.5rem' : '3.75rem')};
+`;
+const TextContentWrapper = styled.div `
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    justify-content: space-between;
+    gap: ${({ size }) => (size === 'small' ? '0.625rem' : '1rem')};
+    min-width: 0;
+`;
+const TextContent = styled.div `
+    display: flex;
+    align-items: flex-start;
+    flex-direction: column;
+    min-width: 0;
+`;
+const Title = styled.div `
+    font-size: ${theme.default.fontSize.default};
+    line-height: ${theme.default.lineHeight.default};
+    font-weight: ${theme.default.fontWeight.bold};
+
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    max-width: 100%;
+
+    ${({ size }) => size === 'small' &&
+    `
+        font-size: ${theme.default.fontSize.s};
+        line-height: ${theme.default.lineHeight.s};
+        font-weight: ${theme.default.fontWeight.medium};
+    `}
+
+    ${({ size }) => size === 'large' &&
+    `
+        font-size: ${theme.default.fontSize.xl};
+    `};
+`;
+const Subtitle = styled.div `
+    color: ${theme.default.color.text.gray};
+    font-size: ${theme.default.fontSize.s};
+    line-height: ${theme.default.lineHeight.s};
+    font-weight: ${theme.default.fontWeight.medium};
+
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    max-width: 100%;
+
+    ${({ size }) => size === 'small' &&
+    `
+        font-size: ${theme.default.fontSize.xs};
+        line-height: ${theme.default.lineHeight.xxs};
+    `}
+
+    ${({ size }) => size === 'large' &&
+    `
+        font-size: ${theme.default.fontSize.default};
+    `};
+`;
+const CtaIcon = styled(Icon.default) `
+    color: ${theme.default.color.text.pink};
+
+    ${ButtonCardWrapper}:hover & {
+        color: ${theme.default.color.hover.pink};
+    }
+`;
+/** @visibleName Button Card */
+const ButtonCard = (_a) => {
+    var { type = 'submit', size = 'medium', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", "size", 'data-testid']);
+    return (React.createElement(ButtonCardWrapper, Object.assign({ id: props.id, as: props.href ? 'a' : undefined, type: props.href ? undefined : type, href: props.href, onClick: props.onClick, className: props.className, "data-testid": dataTestId }, (!props.href && {
+        name: props.name,
+    })),
+        React.createElement(StyledBox, { elevation: "low", size: size },
+            React.createElement(VisualContent, { size: size, "data-testid": dataTestId && `${dataTestId}-content` }, props.children),
+            React.createElement(TextContentWrapper, { size: size },
+                React.createElement(TextContent, null,
+                    React.createElement(Title, { size: size, "data-testid": dataTestId && `${dataTestId}-title` }, props.title),
+                    props.subtitle && (React.createElement(Subtitle, { size: size, "data-testid": dataTestId && `${dataTestId}-subtitle` }, props.subtitle))),
+                React.createElement(CtaIcon, { icon: props.isExternal ? icons.Open : icons.ChevronRight, size: size === 'small' ? '1rem' : '1.5rem', "data-testid": dataTestId && `${dataTestId}-cta` })))));
+};
+
+exports.default = ButtonCard;

package/build/cjs/components/{Button → ButtonClose}/ButtonClose.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Props as ButtonProps } from './Button';
+import type { Props as ButtonProps } from '../Button/Button';
 interface Props extends Pick<ButtonProps, 'id' | 'name' | 'children' | 'onClick' | 'onMouseDown' | 'className' | 'data-testid'> {
     /**
      * Allows to pass aria label for screen readers

package/build/cjs/components/{Button → ButtonIcon}/ButtonIcon.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
+import type { Props as ButtonProps } from '../Button/Button';
 import type { Props as IconProps } from '../Icon/Icon';
-import type { Props as ButtonProps } from './Button';
 interface Props extends Omit<ButtonProps, 'fullWidth'> {
     /**
      * Icon shown in icon button component

package/build/cjs/components/{Button → ButtonPrimary}/ButtonPrimary.d.ts

@@ -1,4 +1,4 @@
-import Button from './Button';
+import Button from '../Button/Button';
 /** @visibleName Button Primary */
 declare const ButtonPrimary: typeof Button;
 /** @component */

package/build/cjs/components/{Button → ButtonPrimary}/ButtonPrimary.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var styled = require('styled-components');
 var theme = require('../../themes/theme.js');
-var Button = require('./Button.js');
+var Button = require('../Button/Button.js');
 
 /** @visibleName Button Primary */
 const ButtonPrimary = styled(Button.default) `

package/build/{es/components/Button → cjs/components/ButtonRound}/ButtonRound.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Props as ButtonProps } from './Button';
+import type { Props as ButtonProps } from '../Button/Button';
 type Props = Omit<ButtonProps, 'small' | 'fullWidth' | 'loading'>;
 /**
  * @visibleName Button Round

package/build/cjs/components/{Button → ButtonRound}/ButtonRound.js

@@ -7,7 +7,7 @@ var React = require('react');
 var styled = require('styled-components');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
-var ButtonPrimary = require('./ButtonPrimary.js');
+var ButtonPrimary = require('../ButtonPrimary/ButtonPrimary.js');
 
 const ButtonElement = styled(ButtonPrimary.default) `
     display: flex;

package/build/cjs/components/{Button → ButtonSecondary}/ButtonSecondary.d.ts

@@ -1,4 +1,4 @@
-import Button from './Button';
+import Button from '../Button/Button';
 /** @visibleName Button Secondary */
 declare const ButtonSecondary: typeof Button;
 /** @component */

package/build/cjs/components/{Button → ButtonSecondary}/ButtonSecondary.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var styled = require('styled-components');
 var theme = require('../../themes/theme.js');
-var Button = require('./Button.js');
+var Button = require('../Button/Button.js');
 
 /** @visibleName Button Secondary */
 const ButtonSecondary = styled(Button.default) `

package/build/cjs/components/Carousel/Carousel.js

@@ -9,8 +9,8 @@ var useWindowSize = require('../../hooks/useWindowSize.js');
 var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
-var ButtonArrow = require('../Button/ButtonArrow.js');
-var ButtonIcon = require('../Button/ButtonIcon.js');
+var ButtonArrow = require('../ButtonArrow/ButtonArrow.js');
+var ButtonIcon = require('../ButtonIcon/ButtonIcon.js');
 
 const CarouselWrapper = styled.default.div ``;
 const Header = styled.default.div `

package/build/cjs/components/DateTimePicker/DateTimePicker.js

@@ -9,7 +9,7 @@ var ReactDatePicker = require('react-datepicker');
 var styled = require('styled-components');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
-var ButtonIcon = require('../Button/ButtonIcon.js');
+var ButtonIcon = require('../ButtonIcon/ButtonIcon.js');
 var Input = require('../Input/Input.js');
 
 /**

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

@@ -8,12 +8,12 @@ var React = require('react');
 var ReactModal = require('react-modal');
 var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
+var common = require('../../utils/common.js');
 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 ButtonClose = require('../ButtonClose/ButtonClose.js');
 var Floater = require('../Floater/Floater.js');
+var Icon = require('../Icon/Icon.js');
 
 const sizeMap = {
     small: '375px',

package/build/cjs/components/Expander/Expander.js

@@ -7,7 +7,7 @@ var icons = require('@dnanpm/icons');
 var React = require('react');
 var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
-var ButtonIcon = require('../Button/ButtonIcon.js');
+var ButtonIcon = require('../ButtonIcon/ButtonIcon.js');
 
 const Container = styled.default.div `
     display: flex;

package/build/cjs/components/Footer/Components/FooterComponents.js

@@ -5,7 +5,7 @@ var React = require('react');
 var styled = require('../../../themes/styled.js');
 var theme = require('../../../themes/theme.js');
 var styledUtils = require('../../../utils/styledUtils.js');
-var ButtonIcon = require('../../Button/ButtonIcon.js');
+var ButtonIcon = require('../../ButtonIcon/ButtonIcon.js');
 var Icon = require('../../Icon/Icon.js');
 var FooterContext = require('../context/FooterContext.js');
 

package/build/cjs/components/Input/Input.js

@@ -8,7 +8,7 @@ var React = require('react');
 var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
-var ButtonIcon = require('../Button/ButtonIcon.js');
+var ButtonIcon = require('../ButtonIcon/ButtonIcon.js');
 var Icon = require('../Icon/Icon.js');
 var LabelText = require('../LabelText/LabelText.js');
 

package/build/cjs/components/MainHeaderNavigation/ChildComponents/MainNavTooltipMenu.js

@@ -11,7 +11,7 @@ var theme = require('../../../themes/theme.js');
 var navigation = require('../../../themes/themeComponents/navigation.js');
 var styledUtils = require('../../../utils/styledUtils.js');
 var Box = require('../../Box/Box.js');
-var ButtonPrimary = require('../../Button/ButtonPrimary.js');
+var ButtonPrimary = require('../../ButtonPrimary/ButtonPrimary.js');
 var NavContext = require('../context/NavContext.js');
 var MainNavTooltipMenuExportedStyles = require('./MainNavTooltipMenuExportedStyles.js');
 

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

@@ -29,7 +29,10 @@ export interface MainNavigationProps {
     currentUrl?: string;
     notificationText?: string;
 }
-/** @visibleName Main Navigation */
+/**
+ * @visibleName Main Navigation
+ * @deprecated Use `MainHeaderNavigation` component
+ */
 declare const MainNavigation: ({ items, language, zIndex, languageSelector, search, searchText, searchComponent, minicart, minicartText, minicartComponent, minicartAmount, showMinicart, showLoginTooltip, login, loginText, loginComponent, isLoggedIn, collapseSize, nextJSLinkComponent, ribbon, ribbonData, className, currentUrl, notificationText, }: MainNavigationProps) => React.JSX.Element;
 /** @component */
 export default MainNavigation;

package/build/cjs/components/MainNavigation/MainNavigation.js

@@ -113,7 +113,10 @@ const initiateScrollToHeader = (componentRef) => {
         window.scrollTo({ top: componentRef.current.offsetTop, left: 0 });
     }
 };
-/** @visibleName Main Navigation */
+/**
+ * @visibleName Main Navigation
+ * @deprecated Use `MainHeaderNavigation` component
+ */
 const MainNavigation = ({ items = {}, language = 'fi', zIndex = 1030, languageSelector = false, search = true, searchText = 'Haku', searchComponent = false, minicart = true, minicartText = 'Ostoskori', minicartComponent = false, minicartAmount = 0, showMinicart = false, showLoginTooltip = false, login = true, loginText = 'Kirjaudu', loginComponent, isLoggedIn = false, collapseSize = 767, nextJSLinkComponent = false, ribbon = true, ribbonData, className, currentUrl = '', notificationText = '', }) => {
     const { isMobile } = useWindowSize.default(collapseSize);
     const props = {

package/build/cjs/components/Modal/Modal.js

@@ -10,7 +10,7 @@ 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 ButtonClose = require('../Button/ButtonClose.js');
+var ButtonClose = require('../ButtonClose/ButtonClose.js');
 var Icon = require('../Icon/Icon.js');
 
 const GlobalStyle = styled.createGlobalStyle `

package/build/cjs/components/Notification/Notification.js

@@ -7,7 +7,7 @@ var icons = require('@dnanpm/icons');
 var React = require('react');
 var styled = require('styled-components');
 var theme = require('../../themes/theme.js');
-var ButtonClose = require('../Button/ButtonClose.js');
+var ButtonClose = require('../ButtonClose/ButtonClose.js');
 var Icon = require('../Icon/Icon.js');
 
 const iconsMap = {

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

@@ -13,7 +13,7 @@ var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
 var common = require('../../utils/common.js');
 var styledUtils = require('../../utils/styledUtils.js');
-var ButtonIcon = require('../Button/ButtonIcon.js');
+var ButtonIcon = require('../ButtonIcon/ButtonIcon.js');
 var Icon = require('../Icon/Icon.js');
 var PriorityNavigationItem = require('../PriorityNavigationItem/PriorityNavigationItem.js');
 
@@ -64,6 +64,10 @@ const MobileDropdown = styled.default.button `
     line-height: ${theme.default.lineHeight.default};
     font-weight: ${theme.default.fontWeight.bold};
     border-bottom: 3px solid ${theme.default.color.default.pink};
+
+    & svg {
+        pointer-events: none;
+    }
 `;
 const MobileDropdownContent = styled.default.div `
     display: flex;

package/build/cjs/components/ReadMore/ReadMore.js

@@ -7,7 +7,7 @@ var icons = require('@dnanpm/icons');
 var React = require('react');
 var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
-var ButtonIcon = require('../Button/ButtonIcon.js');
+var ButtonIcon = require('../ButtonIcon/ButtonIcon.js');
 
 const Container = styled.default.div `
     display: flex;

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

@@ -8,7 +8,7 @@ var React = require('react');
 var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
-var ButtonIcon = require('../Button/ButtonIcon.js');
+var ButtonIcon = require('../ButtonIcon/ButtonIcon.js');
 
 const Container = styled.default.div `
     display: flex;

package/build/cjs/components/Toaster/Toaster.js

@@ -9,7 +9,7 @@ var styled = require('styled-components');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var Box = require('../Box/Box.js');
-var ButtonClose = require('../Button/ButtonClose.js');
+var ButtonClose = require('../ButtonClose/ButtonClose.js');
 var Icon = require('../Icon/Icon.js');
 
 const iconsMap = {

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

@@ -3,12 +3,13 @@ export { default as AccordionItem } from './AccordionItem/AccordionItem';
 export { default as AmountSelector } from './AmountSelector/AmountSelector';
 export { default as Box } from './Box/Box';
 export { default as Button } from './Button/Button';
-export { default as ButtonArrow } from './Button/ButtonArrow';
-export { default as ButtonClose } from './Button/ButtonClose';
-export { default as ButtonIcon } from './Button/ButtonIcon';
-export { default as ButtonPrimary } from './Button/ButtonPrimary';
-export { default as ButtonRound } from './Button/ButtonRound';
-export { default as ButtonSecondary } from './Button/ButtonSecondary';
+export { default as ButtonArrow } from './ButtonArrow/ButtonArrow';
+export { default as ButtonCard } from './ButtonCard/ButtonCard';
+export { default as ButtonClose } from './ButtonClose/ButtonClose';
+export { default as ButtonIcon } from './ButtonIcon/ButtonIcon';
+export { default as ButtonPrimary } from './ButtonPrimary/ButtonPrimary';
+export { default as ButtonRound } from './ButtonRound/ButtonRound';
+export { default as ButtonSecondary } from './ButtonSecondary/ButtonSecondary';
 export { default as Carousel } from './Carousel/Carousel';
 export { default as Checkbox } from './Checkbox/Checkbox';
 export { default as Chip } from './Chip/Chip';

package/build/cjs/index.js

@@ -5,12 +5,13 @@ var AccordionItem = require('./components/AccordionItem/AccordionItem.js');
 var AmountSelector = require('./components/AmountSelector/AmountSelector.js');
 var Box = require('./components/Box/Box.js');
 var Button = require('./components/Button/Button.js');
-var ButtonArrow = require('./components/Button/ButtonArrow.js');
-var ButtonClose = require('./components/Button/ButtonClose.js');
-var ButtonIcon = require('./components/Button/ButtonIcon.js');
-var ButtonPrimary = require('./components/Button/ButtonPrimary.js');
-var ButtonRound = require('./components/Button/ButtonRound.js');
-var ButtonSecondary = require('./components/Button/ButtonSecondary.js');
+var ButtonArrow = require('./components/ButtonArrow/ButtonArrow.js');
+var ButtonCard = require('./components/ButtonCard/ButtonCard.js');
+var ButtonClose = require('./components/ButtonClose/ButtonClose.js');
+var ButtonIcon = require('./components/ButtonIcon/ButtonIcon.js');
+var ButtonPrimary = require('./components/ButtonPrimary/ButtonPrimary.js');
+var ButtonRound = require('./components/ButtonRound/ButtonRound.js');
+var ButtonSecondary = require('./components/ButtonSecondary/ButtonSecondary.js');
 var Carousel = require('./components/Carousel/Carousel.js');
 var Checkbox = require('./components/Checkbox/Checkbox.js');
 var Chip = require('./components/Chip/Chip.js');
@@ -173,6 +174,7 @@ exports.AmountSelector = AmountSelector.default;
 exports.Box = Box.default;
 exports.Button = Button.default;
 exports.ButtonArrow = ButtonArrow.default;
+exports.ButtonCard = ButtonCard.default;
 exports.ButtonClose = ButtonClose.default;
 exports.ButtonIcon = ButtonIcon.default;
 exports.ButtonPrimary = ButtonPrimary.default;

package/build/es/components/AmountSelector/AmountSelector.js

@@ -4,7 +4,7 @@ import React__default from 'react';
 import styled from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
-import ButtonArrow from '../Button/ButtonArrow.js';
+import ButtonArrow from '../ButtonArrow/ButtonArrow.js';
 import Icon from '../Icon/Icon.js';
 
 const Container = styled.div `

package/build/es/components/{Button → ButtonArrow}/ButtonArrow.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import React from 'react';
-import type { Props as ButtonProps } from './Button';
+import type { Props as ButtonProps } from '../Button/Button';
 type ButtonArrowDirection = 'up' | 'right' | 'down' | 'left';
 type ButtonArrowVariant = 'primary' | 'secondary';
 type Props = ({

package/build/es/components/{Button → ButtonArrow}/ButtonArrow.js

@@ -4,9 +4,9 @@ import React__default, { isValidElement } from 'react';
 import styled__default from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
+import ButtonPrimary from '../ButtonPrimary/ButtonPrimary.js';
+import ButtonSecondary from '../ButtonSecondary/ButtonSecondary.js';
 import Icon from '../Icon/Icon.js';
-import ButtonPrimary from './ButtonPrimary.js';
-import ButtonSecondary from './ButtonSecondary.js';
 
 const iconsMap = {
     up: ChevronUp,

package/build/es/components/ButtonCard/ButtonCard.d.ts

@@ -0,0 +1,70 @@
+import type { MouseEvent, ReactNode } from 'react';
+import React from 'react';
+type Size = 'small' | 'medium' | 'large';
+type ButtonType = 'submit' | 'button' | 'reset';
+interface Props {
+    /**
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     *  Name of the button element
+     */
+    name?: string;
+    /**
+     * Allows to change the HTML type of button element. Ignored when `href` is defined
+     *
+     * @param {ButtonType} submit Button submits the form data
+     * @param {ButtonType} button No functionality when pressed
+     * @param {ButtonType} reset Button resets all the controls to their initial values
+     *
+     * @default 'submit'
+     */
+    type?: ButtonType;
+    /**
+     * Allows to change layout of the component based on size
+     *
+     * @param {Size} small Renders component in compact layout
+     * @param {Size} medium Default
+     * @param {Size} large Renders component with enlarged title and subtitle
+     *
+     * @default 'medium'
+     */
+    size?: Size;
+    /**
+     * Allows to change the type of resulting HTML element from button (`<button></button>`) to anchor (`<a href="..."></a>`)
+     */
+    href?: string;
+    /**
+     * Allows to define title
+     */
+    title: string;
+    /**
+     * Allows to define subtitle
+     */
+    subtitle?: string;
+    /**
+     * Allows to define visual content
+     */
+    children: ReactNode;
+    /**
+     * On button click callback
+     */
+    onClick?: (e: MouseEvent<HTMLElement>) => void;
+    /**
+     * Allows to change icon from `ChevronRight` to `Open`
+     */
+    isExternal?: boolean;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+/** @visibleName Button Card */
+declare const ButtonCard: ({ type, size, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default ButtonCard;

package/build/es/components/ButtonCard/ButtonCard.js

@@ -0,0 +1,131 @@
+import { __rest } from 'tslib';
+import { Open, ChevronRight } from '@dnanpm/icons';
+import React__default from 'react';
+import styled__default from 'styled-components';
+import theme from '../../themes/theme.js';
+import Box from '../Box/Box.js';
+import Icon from '../Icon/Icon.js';
+
+const ButtonCardWrapper = styled__default.button `
+    display: block;
+    padding: 0;
+    border: 0 none;
+    width: 100%;
+    background-color: transparent;
+    cursor: pointer;
+    font-family: ${theme.fontFamily.default};
+    font-size: ${theme.fontSize.default};
+    line-height: ${theme.lineHeight.default};
+    color: ${theme.color.text.black};
+
+    &:focus-visible {
+        border: 1px solid ${theme.color.focus.light};
+        box-shadow: 0px 0px 0px 2px ${theme.color.focus.dark};
+        border-radius: ${theme.radius.default};
+        outline: none;
+
+        & > div {
+            border: 0 none;
+        }
+    }
+
+    &:hover {
+        color: ${theme.color.text.black};
+        text-decoration: none;
+    }
+`;
+const StyledBox = styled__default(Box) `
+    display: flex;
+    gap: ${({ size }) => (size === 'small' ? '0.313rem' : '1rem')};
+    border: 1px solid ${theme.color.line.L03};
+    padding: ${({ size }) => (size === 'small' ? '0.625rem' : '1rem')};
+    ${({ size }) => size === 'small' && 'flex-direction: column'};
+    ${({ size }) => size !== 'small' && 'align-items: center'};
+`;
+const VisualContent = styled__default.div `
+    display: flex;
+    align-items: center;
+    width: ${({ size }) => (size === 'small' ? '2.5rem' : '3.75rem')};
+    height: ${({ size }) => (size === 'small' ? '2.5rem' : '3.75rem')};
+`;
+const TextContentWrapper = styled__default.div `
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    justify-content: space-between;
+    gap: ${({ size }) => (size === 'small' ? '0.625rem' : '1rem')};
+    min-width: 0;
+`;
+const TextContent = styled__default.div `
+    display: flex;
+    align-items: flex-start;
+    flex-direction: column;
+    min-width: 0;
+`;
+const Title = styled__default.div `
+    font-size: ${theme.fontSize.default};
+    line-height: ${theme.lineHeight.default};
+    font-weight: ${theme.fontWeight.bold};
+
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    max-width: 100%;
+
+    ${({ size }) => size === 'small' &&
+    `
+        font-size: ${theme.fontSize.s};
+        line-height: ${theme.lineHeight.s};
+        font-weight: ${theme.fontWeight.medium};
+    `}
+
+    ${({ size }) => size === 'large' &&
+    `
+        font-size: ${theme.fontSize.xl};
+    `};
+`;
+const Subtitle = styled__default.div `
+    color: ${theme.color.text.gray};
+    font-size: ${theme.fontSize.s};
+    line-height: ${theme.lineHeight.s};
+    font-weight: ${theme.fontWeight.medium};
+
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    max-width: 100%;
+
+    ${({ size }) => size === 'small' &&
+    `
+        font-size: ${theme.fontSize.xs};
+        line-height: ${theme.lineHeight.xxs};
+    `}
+
+    ${({ size }) => size === 'large' &&
+    `
+        font-size: ${theme.fontSize.default};
+    `};
+`;
+const CtaIcon = styled__default(Icon) `
+    color: ${theme.color.text.pink};
+
+    ${ButtonCardWrapper}:hover & {
+        color: ${theme.color.hover.pink};
+    }
+`;
+/** @visibleName Button Card */
+const ButtonCard = (_a) => {
+    var { type = 'submit', size = 'medium', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", "size", 'data-testid']);
+    return (React__default.createElement(ButtonCardWrapper, Object.assign({ id: props.id, as: props.href ? 'a' : undefined, type: props.href ? undefined : type, href: props.href, onClick: props.onClick, className: props.className, "data-testid": dataTestId }, (!props.href && {
+        name: props.name,
+    })),
+        React__default.createElement(StyledBox, { elevation: "low", size: size },
+            React__default.createElement(VisualContent, { size: size, "data-testid": dataTestId && `${dataTestId}-content` }, props.children),
+            React__default.createElement(TextContentWrapper, { size: size },
+                React__default.createElement(TextContent, null,
+                    React__default.createElement(Title, { size: size, "data-testid": dataTestId && `${dataTestId}-title` }, props.title),
+                    props.subtitle && (React__default.createElement(Subtitle, { size: size, "data-testid": dataTestId && `${dataTestId}-subtitle` }, props.subtitle))),
+                React__default.createElement(CtaIcon, { icon: props.isExternal ? Open : ChevronRight, size: size === 'small' ? '1rem' : '1.5rem', "data-testid": dataTestId && `${dataTestId}-cta` })))));
+};
+
+export { ButtonCard as default };

package/build/es/components/{Button → ButtonClose}/ButtonClose.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Props as ButtonProps } from './Button';
+import type { Props as ButtonProps } from '../Button/Button';
 interface Props extends Pick<ButtonProps, 'id' | 'name' | 'children' | 'onClick' | 'onMouseDown' | 'className' | 'data-testid'> {
     /**
      * Allows to pass aria label for screen readers

package/build/es/components/{Button → ButtonIcon}/ButtonIcon.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
+import type { Props as ButtonProps } from '../Button/Button';
 import type { Props as IconProps } from '../Icon/Icon';
-import type { Props as ButtonProps } from './Button';
 interface Props extends Omit<ButtonProps, 'fullWidth'> {
     /**
      * Icon shown in icon button component

package/build/es/components/{Button → ButtonPrimary}/ButtonPrimary.d.ts

@@ -1,4 +1,4 @@
-import Button from './Button';
+import Button from '../Button/Button';
 /** @visibleName Button Primary */
 declare const ButtonPrimary: typeof Button;
 /** @component */

package/build/es/components/{Button → ButtonPrimary}/ButtonPrimary.js

@@ -1,6 +1,6 @@
 import styled__default from 'styled-components';
 import theme from '../../themes/theme.js';
-import Button, { shade } from './Button.js';
+import Button, { shade } from '../Button/Button.js';
 
 /** @visibleName Button Primary */
 const ButtonPrimary = styled__default(Button) `

package/build/{cjs/components/Button → es/components/ButtonRound}/ButtonRound.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Props as ButtonProps } from './Button';
+import type { Props as ButtonProps } from '../Button/Button';
 type Props = Omit<ButtonProps, 'small' | 'fullWidth' | 'loading'>;
 /**
  * @visibleName Button Round

package/build/es/components/{Button → ButtonRound}/ButtonRound.js

@@ -3,7 +3,7 @@ import React__default from 'react';
 import styled__default from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
-import ButtonPrimary from './ButtonPrimary.js';
+import ButtonPrimary from '../ButtonPrimary/ButtonPrimary.js';
 
 const ButtonElement = styled__default(ButtonPrimary) `
     display: flex;

package/build/es/components/{Button → ButtonSecondary}/ButtonSecondary.d.ts

@@ -1,4 +1,4 @@
-import Button from './Button';
+import Button from '../Button/Button';
 /** @visibleName Button Secondary */
 declare const ButtonSecondary: typeof Button;
 /** @component */

package/build/es/components/{Button → ButtonSecondary}/ButtonSecondary.js

@@ -1,6 +1,6 @@
 import styled__default from 'styled-components';
 import theme from '../../themes/theme.js';
-import Button, { shade } from './Button.js';
+import Button, { shade } from '../Button/Button.js';
 
 /** @visibleName Button Secondary */
 const ButtonSecondary = styled__default(Button) `

package/build/es/components/Carousel/Carousel.js

@@ -5,8 +5,8 @@ import useWindowSize from '../../hooks/useWindowSize.js';
 import styled from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
 import { media, getMultipliedSize } from '../../utils/styledUtils.js';
-import ButtonArrow from '../Button/ButtonArrow.js';
-import ButtonIcon from '../Button/ButtonIcon.js';
+import ButtonArrow from '../ButtonArrow/ButtonArrow.js';
+import ButtonIcon from '../ButtonIcon/ButtonIcon.js';
 
 const CarouselWrapper = styled.div ``;
 const Header = styled.div `

package/build/es/components/DateTimePicker/DateTimePicker.js

@@ -5,7 +5,7 @@ import ReactDatePicker from 'react-datepicker';
 import styled__default from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
-import ButtonIcon from '../Button/ButtonIcon.js';
+import ButtonIcon from '../ButtonIcon/ButtonIcon.js';
 import Input from '../Input/Input.js';
 
 /**

package/build/es/components/Drawer/Drawer.js

@@ -4,12 +4,12 @@ import React__default from 'react';
 import ReactModal from 'react-modal';
 import styled, { createGlobalStyle } from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
+import getElevationShadow from '../../utils/common.js';
 import { media } from '../../utils/styledUtils.js';
 import Box from '../Box/Box.js';
-import ButtonClose from '../Button/ButtonClose.js';
-import Icon from '../Icon/Icon.js';
-import getElevationShadow from '../../utils/common.js';
+import ButtonClose from '../ButtonClose/ButtonClose.js';
 import Floater from '../Floater/Floater.js';
+import Icon from '../Icon/Icon.js';
 
 const sizeMap = {
     small: '375px',

package/build/es/components/Expander/Expander.js

@@ -3,7 +3,7 @@ import { ChevronUp, ChevronDown, Close } from '@dnanpm/icons';
 import React__default from 'react';
 import styled from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
-import ButtonIcon from '../Button/ButtonIcon.js';
+import ButtonIcon from '../ButtonIcon/ButtonIcon.js';
 
 const Container = styled.div `
     display: flex;

package/build/es/components/Footer/Components/FooterComponents.js

@@ -3,7 +3,7 @@ import React__default, { useContext } from 'react';
 import styled from '../../../themes/styled.js';
 import theme from '../../../themes/theme.js';
 import { getMultipliedSize } from '../../../utils/styledUtils.js';
-import ButtonIcon from '../../Button/ButtonIcon.js';
+import ButtonIcon from '../../ButtonIcon/ButtonIcon.js';
 import Icon from '../../Icon/Icon.js';
 import FooterContext from '../context/FooterContext.js';
 

package/build/es/components/Input/Input.js

@@ -4,7 +4,7 @@ import React__default, { useRef, useState, useEffect } from 'react';
 import styled from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize, getDividedSize } from '../../utils/styledUtils.js';
-import ButtonIcon from '../Button/ButtonIcon.js';
+import ButtonIcon from '../ButtonIcon/ButtonIcon.js';
 import Icon from '../Icon/Icon.js';
 import LabelText from '../LabelText/LabelText.js';
 

package/build/es/components/MainHeaderNavigation/ChildComponents/MainNavTooltipMenu.js

@@ -7,7 +7,7 @@ import theme from '../../../themes/theme.js';
 import { IconContainerMinWidth, navIconSize, navMaxHeight } from '../../../themes/themeComponents/navigation.js';
 import { getMultipliedSize } from '../../../utils/styledUtils.js';
 import Box from '../../Box/Box.js';
-import ButtonPrimary from '../../Button/ButtonPrimary.js';
+import ButtonPrimary from '../../ButtonPrimary/ButtonPrimary.js';
 import NavContext from '../context/NavContext.js';
 import TooltipWrapper from './MainNavTooltipMenuExportedStyles.js';
 

package/build/es/components/MainNavigation/MainNavigation.d.ts

@@ -29,7 +29,10 @@ export interface MainNavigationProps {
     currentUrl?: string;
     notificationText?: string;
 }
-/** @visibleName Main Navigation */
+/**
+ * @visibleName Main Navigation
+ * @deprecated Use `MainHeaderNavigation` component
+ */
 declare const MainNavigation: ({ items, language, zIndex, languageSelector, search, searchText, searchComponent, minicart, minicartText, minicartComponent, minicartAmount, showMinicart, showLoginTooltip, login, loginText, loginComponent, isLoggedIn, collapseSize, nextJSLinkComponent, ribbon, ribbonData, className, currentUrl, notificationText, }: MainNavigationProps) => React.JSX.Element;
 /** @component */
 export default MainNavigation;

package/build/es/components/MainNavigation/MainNavigation.js

@@ -109,7 +109,10 @@ const initiateScrollToHeader = (componentRef) => {
         window.scrollTo({ top: componentRef.current.offsetTop, left: 0 });
     }
 };
-/** @visibleName Main Navigation */
+/**
+ * @visibleName Main Navigation
+ * @deprecated Use `MainHeaderNavigation` component
+ */
 const MainNavigation = ({ items = {}, language = 'fi', zIndex = 1030, languageSelector = false, search = true, searchText = 'Haku', searchComponent = false, minicart = true, minicartText = 'Ostoskori', minicartComponent = false, minicartAmount = 0, showMinicart = false, showLoginTooltip = false, login = true, loginText = 'Kirjaudu', loginComponent, isLoggedIn = false, collapseSize = 767, nextJSLinkComponent = false, ribbon = true, ribbonData, className, currentUrl = '', notificationText = '', }) => {
     const { isMobile } = useWindowSize(collapseSize);
     const props = {

package/build/es/components/Modal/Modal.js

@@ -6,7 +6,7 @@ import styled, { createGlobalStyle } from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
 import { media, getMultipliedSize } from '../../utils/styledUtils.js';
 import Box from '../Box/Box.js';
-import ButtonClose from '../Button/ButtonClose.js';
+import ButtonClose from '../ButtonClose/ButtonClose.js';
 import Icon from '../Icon/Icon.js';
 
 const GlobalStyle = createGlobalStyle `

package/build/es/components/Notification/Notification.js

@@ -3,7 +3,7 @@ import { Close, Info, Check, Warning, Error } from '@dnanpm/icons';
 import React__default from 'react';
 import styled__default from 'styled-components';
 import theme from '../../themes/theme.js';
-import ButtonClose from '../Button/ButtonClose.js';
+import ButtonClose from '../ButtonClose/ButtonClose.js';
 import Icon from '../Icon/Icon.js';
 
 const iconsMap = {

package/build/es/components/PriorityNavigation/PriorityNavigation.js

@@ -9,7 +9,7 @@ import styled from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
 import getElevationShadow from '../../utils/common.js';
 import { media, getMultipliedSize } from '../../utils/styledUtils.js';
-import ButtonIcon from '../Button/ButtonIcon.js';
+import ButtonIcon from '../ButtonIcon/ButtonIcon.js';
 import Icon from '../Icon/Icon.js';
 import PriorityNavigationItem from '../PriorityNavigationItem/PriorityNavigationItem.js';
 
@@ -60,6 +60,10 @@ const MobileDropdown = styled.button `
     line-height: ${theme.lineHeight.default};
     font-weight: ${theme.fontWeight.bold};
     border-bottom: 3px solid ${theme.color.default.pink};
+
+    & svg {
+        pointer-events: none;
+    }
 `;
 const MobileDropdownContent = styled.div `
     display: flex;

package/build/es/components/ReadMore/ReadMore.js

@@ -3,7 +3,7 @@ import { ChevronUp, ChevronDown } from '@dnanpm/icons';
 import React__default, { useState, useEffect } from 'react';
 import styled from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
-import ButtonIcon from '../Button/ButtonIcon.js';
+import ButtonIcon from '../ButtonIcon/ButtonIcon.js';
 
 const Container = styled.div `
     display: flex;

package/build/es/components/Search/Search.js

@@ -4,7 +4,7 @@ import React__default, { useRef } from 'react';
 import styled from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
-import ButtonIcon from '../Button/ButtonIcon.js';
+import ButtonIcon from '../ButtonIcon/ButtonIcon.js';
 
 const Container = styled.div `
     display: flex;

package/build/es/components/Toaster/Toaster.js

@@ -5,7 +5,7 @@ import styled__default from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize, media } from '../../utils/styledUtils.js';
 import Box from '../Box/Box.js';
-import ButtonClose from '../Button/ButtonClose.js';
+import ButtonClose from '../ButtonClose/ButtonClose.js';
 import Icon from '../Icon/Icon.js';
 
 const iconsMap = {

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

@@ -3,12 +3,13 @@ export { default as AccordionItem } from './AccordionItem/AccordionItem';
 export { default as AmountSelector } from './AmountSelector/AmountSelector';
 export { default as Box } from './Box/Box';
 export { default as Button } from './Button/Button';
-export { default as ButtonArrow } from './Button/ButtonArrow';
-export { default as ButtonClose } from './Button/ButtonClose';
-export { default as ButtonIcon } from './Button/ButtonIcon';
-export { default as ButtonPrimary } from './Button/ButtonPrimary';
-export { default as ButtonRound } from './Button/ButtonRound';
-export { default as ButtonSecondary } from './Button/ButtonSecondary';
+export { default as ButtonArrow } from './ButtonArrow/ButtonArrow';
+export { default as ButtonCard } from './ButtonCard/ButtonCard';
+export { default as ButtonClose } from './ButtonClose/ButtonClose';
+export { default as ButtonIcon } from './ButtonIcon/ButtonIcon';
+export { default as ButtonPrimary } from './ButtonPrimary/ButtonPrimary';
+export { default as ButtonRound } from './ButtonRound/ButtonRound';
+export { default as ButtonSecondary } from './ButtonSecondary/ButtonSecondary';
 export { default as Carousel } from './Carousel/Carousel';
 export { default as Checkbox } from './Checkbox/Checkbox';
 export { default as Chip } from './Chip/Chip';

package/build/es/index.js

@@ -3,12 +3,13 @@ export { default as AccordionItem } from './components/AccordionItem/AccordionIt
 export { default as AmountSelector } from './components/AmountSelector/AmountSelector.js';
 export { default as Box } from './components/Box/Box.js';
 export { default as Button } from './components/Button/Button.js';
-export { default as ButtonArrow } from './components/Button/ButtonArrow.js';
-export { default as ButtonClose } from './components/Button/ButtonClose.js';
-export { default as ButtonIcon } from './components/Button/ButtonIcon.js';
-export { default as ButtonPrimary } from './components/Button/ButtonPrimary.js';
-export { default as ButtonRound } from './components/Button/ButtonRound.js';
-export { default as ButtonSecondary } from './components/Button/ButtonSecondary.js';
+export { default as ButtonArrow } from './components/ButtonArrow/ButtonArrow.js';
+export { default as ButtonCard } from './components/ButtonCard/ButtonCard.js';
+export { default as ButtonClose } from './components/ButtonClose/ButtonClose.js';
+export { default as ButtonIcon } from './components/ButtonIcon/ButtonIcon.js';
+export { default as ButtonPrimary } from './components/ButtonPrimary/ButtonPrimary.js';
+export { default as ButtonRound } from './components/ButtonRound/ButtonRound.js';
+export { default as ButtonSecondary } from './components/ButtonSecondary/ButtonSecondary.js';
 export { default as Carousel } from './components/Carousel/Carousel.js';
 export { default as Checkbox } from './components/Checkbox/Checkbox.js';
 export { default as Chip } from './components/Chip/Chip.js';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@dnanpm/styleguide",
     "sideEffects": false,
-    "version": "v3.8.2",
+    "version": "v3.8.3",
     "main": "build/cjs/index.js",
     "module": "build/es/index.js",
     "jsnext:main": "build/es/index.js",
@@ -40,7 +40,7 @@
         "not op_mini all"
     ],
     "devDependencies": {
-        "@babel/core": "^7.25.8",
+        "@babel/core": "^7.26.0",
         "@babel/preset-env": "^7.25.8",
         "@babel/preset-react": "^7.25.9",
         "@babel/preset-typescript": "^7.25.7",
@@ -73,7 +73,7 @@
         "eslint-plugin-jsdoc": "^39.9.1",
         "eslint-plugin-jsx-a11y": "^6.10.1",
         "eslint-plugin-prefer-arrow": "^1.2.3",
-        "eslint-plugin-react": "^7.37.1",
+        "eslint-plugin-react": "^7.37.2",
         "eslint-plugin-react-hooks": "^4.6.2",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
@@ -86,7 +86,7 @@
         "react-dom": "^18.3.1",
         "react-styleguidist": "^13.1.3",
         "rollup": "^3.29.4",
-        "rollup-plugin-import-css": "^3.5.5",
+        "rollup-plugin-import-css": "^3.5.6",
         "style-loader": "^3.3.3",
         "styled-components": "^5.3.11",
         "ts-jest": "^29.2.5",
@@ -105,8 +105,8 @@
     },
     "peerDependencies": {
         "@dnanpm/icons": "^2.x",
-        "react": "^17.x",
-        "react-dom": "^17.x",
+        "react": ">=17.x <=18.x",
+        "react-dom": ">=17.x <=18.x",
         "styled-components": "5.x"
     }
 }