@dnanpm/styleguide 3.8.2 → 3.9.0

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.d.ts

@@ -3,6 +3,7 @@ import React from 'react';
 import type { Props as ReactModalProps } from 'react-modal';
 type Size = 'small' | 'medium' | 'large';
 type Variant = 'light' | 'dark';
+type Side = 'left' | 'right';
 interface Props {
     /**
      * Allows to control the state of component
@@ -16,15 +17,6 @@ interface Props {
      * 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
      */
@@ -50,6 +42,24 @@ interface Props {
      * @default 'medium'
      */
     size?: Size;
+    /**
+     * 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 change the opening side of the component
+     *
+     * @param {Side} left Opens the drawer from the left side
+     * @param {Side} right Opens the drawer from the right side
+     *
+     * @default 'right'
+     */
+    side?: Side;
     /**
      * Allows to pass a custom margin
      *
@@ -101,5 +111,5 @@ interface Props {
      */
     'data-testid'?: string;
 }
-declare const Drawer: ({ appElement, size, variant, padding, closeButton, isClosable, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+declare const Drawer: ({ appElement, size, side, variant, padding, closeButton, isClosable, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 export default Drawer;

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

@@ -8,52 +8,54 @@ 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',
     medium: '768px',
     large: '1080px',
 };
+const animationMap = {
+    small: ['0.4', '0.2'],
+    medium: ['0.5', '0.3'],
+    large: ['0.6', '0.4'],
+};
 const GlobalStyle = styled.createGlobalStyle `
     body.ReactModal__Body--open {
         overflow: hidden;
     }
 `;
+const slideOut = (side) => styled.keyframes `
+    0% {
+        transform: translateX(0%);
+    }
+    100% {
+        transform: translateX(${side === 'left' && '-'}100%);
+    }
+`;
+const slideIn = styled.keyframes `
+    100% {
+        transform: translateX(0%);
+    }
+`;
 const StyledReactModal = styled.default(ReactModal) `
     position: fixed;
     top: 0;
-    right: 0;
+    ${({ side }) => (side === 'left' ? 'left: 0' : 'right: 0')};
     width: 100vw;
     height: 100dvh;
     max-width: 100vw;
     max-height: 100%;
-    transform: translateX(100%);
-    animation: slideIn 0.5s forwards;
+    transform: translateX(${({ side }) => side === 'left' && '-'}100%);
+    animation: ${slideIn} ${({ size }) => animationMap[size][0]}s forwards;
 
     &.ReactModal__Content--before-close {
-        animation: slideOut 0.3s forwards;
-    }
-
-    @keyframes slideIn {
-        100% {
-            transform: translateX(0%);
-        }
-    }
-
-    @keyframes slideOut {
-        0% {
-            transform: translateX(0%);
-        }
-
-        100% {
-            transform: translateX(100%);
-        }
+        animation: ${({ side }) => slideOut(side)} ${({ size }) => animationMap[size][1]}s forwards;
     }
 
     ${({ size }) => styledUtils.media.sm `
@@ -165,10 +167,10 @@ const ModalContent = (_a, children) => {
     return (React.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', 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']);
+    var { appElement = '#__next', size = 'medium', side = 'right', variant = 'light', padding = '1.25rem', closeButton = true, isClosable = true, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["appElement", "size", "side", "variant", "padding", "closeButton", "isClosable", 'data-testid']);
     ReactModal.setAppElement(appElement);
     return (React.createElement(React.Fragment, null,
-        React.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.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, side: side },
             React.createElement(StyledBox, { elevation: "extraHigh", margin: props.margin, "data-testid": dataTestId },
                 React.createElement("div", null,
                     React.createElement(Floater.default, null, closeButton && isClosable && (React.createElement(CloseButton, { onClick: props.onRequestClose, "aria-label": props.closeLabel, "data-testid": dataTestId && `${dataTestId}-close-button`, variant: variant },

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';