@dnanpm/styleguide 3.1.0 → 3.3.0

package/README.md

@@ -1,86 +1,86 @@
-# DNA Styleguide
-
-Styles and styled components for DNA.
-
-## Installation
-
-1. Run install command in repository where styleguide should be added
-    - Example 
-    ```shell
-    npm install @dnanpm/styleguide
-    ```
-
-## Usage example
-
-### Theme
-
-```js
-import { createStyled, theme as defaultTheme } from '@dnanpm/styleguide';
-
-const color = {
-    ...defaultTheme.color,
-    background: '#000000',
-};
-
-const iconSize = {
-    default: '0.75em',
-    defaultMobile: '2em',
-};
-
-const theme = {
-    ...defaultTheme,
-    colors,
-    iconSize,
-};
-
-export type ThemeInterface = typeof theme;
-export const { styled, css } = createStyled<ThemeInterface>();
-export default theme;
-```
-
-```js
-import theme from './theme';
-
-class MyApp {
-    public render() {
-        const { Component, pageProps } = this.props;
-
-        return (
-            <ThemeProvider theme={theme}>
-                <Component {...pageProps} />
-            </ThemeProvider>
-        );
-    }
-}
-```
-
-### Button
-
-```js
-import { ButtonPrimary } from '@dnanpm/styleguide';
-
-interface Props {
-    myProp?: string;
-}
-
-const MyComponent = ({
-    myProp,
-}: Props) => {
-    return (
-        <ButtonPrimary>{myProp || 'Lorem Ipsum'}</ButtonPrimary>
-    );
-};
-
-export default MyComponent;
-```
-
-## IE11 Support NextJS
-
-In `next.config.js` you need to use [next-transpile-modules](https://www.npmjs.com/package/next-transpile-modules) package to allow nextjs to be able to transpile styleguide and related es6 modules based on babel config.
-
-```js
-// next.config.js
-const withTM = require('next-transpile-modules')(['@dnanpm/styleguide', "react-spring"]);
-
-module.exports = withTM();
-```
+# DNA Styleguide
+
+Styles and styled components for DNA.
+
+## Installation
+
+1. Run install command in repository where styleguide should be added
+    - Example 
+    ```shell
+    npm install @dnanpm/styleguide
+    ```
+
+## Usage example
+
+### Theme
+
+```js
+import { createStyled, theme as defaultTheme } from '@dnanpm/styleguide';
+
+const color = {
+    ...defaultTheme.color,
+    background: '#000000',
+};
+
+const iconSize = {
+    default: '0.75em',
+    defaultMobile: '2em',
+};
+
+const theme = {
+    ...defaultTheme,
+    colors,
+    iconSize,
+};
+
+export type ThemeInterface = typeof theme;
+export const { styled, css } = createStyled<ThemeInterface>();
+export default theme;
+```
+
+```js
+import theme from './theme';
+
+class MyApp {
+    public render() {
+        const { Component, pageProps } = this.props;
+
+        return (
+            <ThemeProvider theme={theme}>
+                <Component {...pageProps} />
+            </ThemeProvider>
+        );
+    }
+}
+```
+
+### Button
+
+```js
+import { ButtonPrimary } from '@dnanpm/styleguide';
+
+interface Props {
+    myProp?: string;
+}
+
+const MyComponent = ({
+    myProp,
+}: Props) => {
+    return (
+        <ButtonPrimary>{myProp || 'Lorem Ipsum'}</ButtonPrimary>
+    );
+};
+
+export default MyComponent;
+```
+
+## IE11 Support NextJS
+
+In `next.config.js` you need to use [next-transpile-modules](https://www.npmjs.com/package/next-transpile-modules) package to allow nextjs to be able to transpile styleguide and related es6 modules based on babel config.
+
+```js
+// next.config.js
+const withTM = require('next-transpile-modules')(['@dnanpm/styleguide', "react-spring"]);
+
+module.exports = withTM();
+```

package/build/cjs/{assets/bundle-8de31ca3.css → 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://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');
+}

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

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import React from 'react';
 import type { Props as AccordionItemProps } from '../AccordionItem/AccordionItem';
 interface Props extends Omit<AccordionItemProps, 'title' | 'id' | 'children' | 'onClick' | 'onKeyDown'> {
@@ -6,7 +7,7 @@ interface Props extends Omit<AccordionItemProps, 'title' | 'id' | 'children' | '
      *
      * @type AccordionItem
      */
-    children: React.ReactNode;
+    children: ReactNode;
     /**
      * Allows only one AccordionItem to be opened when set to true
      *

package/build/cjs/components/Accordion/Accordion.js

@@ -36,8 +36,8 @@ const Accordion = (_a) => {
     const initialItemList = {};
     const getAccordionItemId = (index, title) => `${title.replace(/\s+/g, '')}-${index}`;
     if (props.isExpanded) {
-        React__default["default"].Children.map(props.children, (child, index) => {
-            if (React__default["default"].isValidElement(child) && child.type === AccordionItem["default"]) {
+        React.Children.map(props.children, (child, index) => {
+            if (React.isValidElement(child) && child.type === AccordionItem["default"]) {
                 initialItemList[getAccordionItemId(index, child.props.title)] = Boolean(props.isExpanded);
             }
         });
@@ -60,8 +60,8 @@ const Accordion = (_a) => {
             toggleExpanded((_b = (_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.id);
         }
     };
-    const accordionItems = React__default["default"].Children.map(props.children, (child, index) => {
-        if (React__default["default"].isValidElement(child) && child.type === AccordionItem["default"]) {
+    const accordionItems = React.Children.map(props.children, (child, index) => {
+        if (React.isValidElement(child) && child.type === AccordionItem["default"]) {
             const id = getAccordionItemId(index, child.props.title);
             return (React__default["default"].createElement(AccordionItem["default"], { id: id, key: id, type: type, title: child.props.title, isExpanded: itemList[id], highlightSelected: highlightSelected, hasCloseButton: hasCloseButton, openLabel: props.openLabel, closeLabel: props.closeLabel, onClick: handleClick, onKeyDown: handleKeyDown, className: child.props.className }, child.props.children));
         }

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

@@ -1,3 +1,4 @@
+import type { KeyboardEvent, MouseEvent, ReactNode } from 'react';
 import React from 'react';
 type AccordionItemType = 'box' | 'panel';
 export interface Props {
@@ -21,7 +22,7 @@ export interface Props {
     /**
      * Content of Accordion Item
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * Allows to expand or collapse the component
      *
@@ -54,12 +55,12 @@ export interface Props {
      * On component title and close button mouse click callback
      * Use `e.currentTarget.parentElement` to get AccordionItem element
      */
-    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+    onClick?: (e: MouseEvent<HTMLElement>) => void;
     /**
      * On component title and close button keyboard key down callback
      * Use `e.currentTarget.parentElement` to get AccordionItem element
      */
-    onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;
+    onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void;
     /**
      * Allows to pass a custom className
      */

package/build/cjs/components/AccordionItem/AccordionItem.js

@@ -3,16 +3,14 @@
 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 useElementDimensions = require('../../hooks/useElementDimensions.js');
+var useResizeObserver = require('../../hooks/useResizeObserver.js');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var Box = require('../Box/Box.js');
 var Icon = require('../Icon/Icon.js');
-var hlChevronDown = require('../Icons/hlChevronDown.js');
-var hlChevronUp = require('../Icons/hlChevronUp.js');
-var hlX = require('../Icons/hlX.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -69,16 +67,16 @@ const AccordionItemCloseButton = styled__default["default"].div `
 const AccordionItem = (_a) => {
     var { type = 'box', hasCloseButton = false, highlightSelected = type === 'panel' } = _a, props = tslib.__rest(_a, ["type", "hasCloseButton", "highlightSelected"]);
     // Get height when element dimensions change
-    const { height: contentHeight, ref: contentRef } = useElementDimensions["default"]();
+    const { height: contentHeight, ref: contentRef } = useResizeObserver["default"]();
     const itemContent = (React__default["default"].createElement(AccordionItemContainer, { id: props.id, type: type, "aria-expanded": Boolean(props.isExpanded), className: props.className },
         React__default["default"].createElement(AccordionItemTitle, { tabIndex: 0, onClick: props.onClick, onKeyDown: props.onKeyDown, isExpanded: Boolean(props.isExpanded), highlightSelected: highlightSelected, role: "button" },
             props.title,
-            props.isExpanded ? (React__default["default"].createElement(Icon["default"], { icon: hlChevronUp["default"], color: theme["default"].color.default.black, position: "right", "aria-label": props.closeLabel })) : (React__default["default"].createElement(Icon["default"], { icon: hlChevronDown["default"], color: theme["default"].color.default.black, position: "right", "aria-label": props.openLabel }))),
+            props.isExpanded ? (React__default["default"].createElement(Icon["default"], { icon: icons.ChevronUp, color: theme["default"].color.default.black, position: "right", "aria-label": props.closeLabel })) : (React__default["default"].createElement(Icon["default"], { icon: icons.ChevronDown, color: theme["default"].color.default.black, position: "right", "aria-label": props.openLabel }))),
         React__default["default"].createElement(AccordionItemContentWrapper, { maxHeight: contentHeight, isExpanded: props.isExpanded },
             React__default["default"].createElement(AccordionItemContent, { ref: contentRef }, props.children)),
         hasCloseButton && props.isExpanded && (React__default["default"].createElement(AccordionItemCloseButton, { tabIndex: 0, onClick: props.onClick, onKeyDown: props.onKeyDown, "aria-label": props.closeLabel, role: "button" },
             React__default["default"].createElement("span", null, props.closeLabel),
-            React__default["default"].createElement(Icon["default"], { icon: hlX["default"] })))));
+            React__default["default"].createElement(Icon["default"], { icon: icons.Close })))));
     return type === 'box' ? (React__default["default"].createElement(Box["default"], { elevation: props.isExpanded ? 'low' : 'none', padding: "0" }, itemContent)) : (itemContent);
 };
 

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

@@ -48,7 +48,7 @@ interface Props {
     readonly?: boolean;
     /**
      * Allows the `onChange` function to be called even after `min` property value is reached.
-     * When defined and `min` property value is reached, the `hlMinus` icon  changes to `hlTrash` icon
+     * When defined and `min` property value is reached, the `Minus` icon  changes to `Trash` icon
      */
     removable?: boolean;
     /**

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

@@ -3,15 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
+var icons = require('@dnanpm/icons');
 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 Icon = require('../Icon/Icon.js');
-var hlMinus = require('../Icons/hlMinus.js');
-var hlPlus = require('../Icons/hlPlus.js');
-var hlTrash = require('../Icons/hlTrash.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -110,10 +108,10 @@ const AmountSelector = (_a) => {
         }
     };
     return (React__default["default"].createElement(Container, { "data-testid": dataTestId, className: props.className },
-        React__default["default"].createElement(Button, { icon: React__default["default"].createElement(Icon["default"], { icon: props.removable && isMinReached(value - step) ? hlTrash["default"] : hlMinus["default"], size: styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2) }), variant: "secondary", onClick: decrease, disabled: disabled, type: "button", "data-testid": dataTestId &&
+        React__default["default"].createElement(Button, { icon: React__default["default"].createElement(Icon["default"], { icon: props.removable && isMinReached(value - step) ? icons.Trash : icons.Minus, size: styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2) }), variant: "secondary", onClick: decrease, disabled: disabled, type: "button", "data-testid": dataTestId &&
                 `${dataTestId}${props.removable && isMinReached(value - step) ? '-remove' : '-decrease'}` }),
         React__default["default"].createElement(Input, { id: props.id, name: props.name, type: "number", onChange: handleChange, value: value, readOnly: readonly || disabled, disabled: disabled }),
-        React__default["default"].createElement(Button, { icon: React__default["default"].createElement(Icon["default"], { icon: hlPlus["default"], size: styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2) }), variant: "secondary", onClick: increase, disabled: disabled, type: "button", "data-testid": dataTestId ? `${dataTestId}-increase` : undefined })));
+        React__default["default"].createElement(Button, { icon: React__default["default"].createElement(Icon["default"], { icon: icons.Plus, size: styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2) }), variant: "secondary", onClick: increase, disabled: disabled, type: "button", "data-testid": dataTestId ? `${dataTestId}-increase` : undefined })));
 };
 
 exports["default"] = AmountSelector;

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

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import React from 'react';
 import type { ElevationLevel } from '../../types/elevation';
 interface Props {
@@ -8,7 +9,7 @@ interface Props {
     /**
      * Content of Box component
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * Allows to change the elevation effect of component
      *

package/build/cjs/components/Box/Box.js

@@ -22,7 +22,7 @@ const BoxWrapper = styled__default["default"].div `
     padding: ${({ padding }) => padding || styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 2)};
     background-color: ${theme["default"].color.default.white};
     border-radius: ${theme["default"].radius.default};
-    ${({ $elevation, shadow }) => $elevation !== 'none' && common.getElevationShadow({ elevation: $elevation, shadow })}
+    ${({ $elevation, shadow }) => $elevation !== 'none' && common["default"]({ elevation: $elevation, shadow })}
 `;
 const Box = (_a) => {
     var { elevation = 'none', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["elevation", 'data-testid']);

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

@@ -1,3 +1,4 @@
+import type { MouseEvent, ReactNode } from 'react';
 import React from 'react';
 type ButtonType = 'submit' | 'button' | 'reset';
 export interface Props {
@@ -26,15 +27,15 @@ export interface Props {
     /**
      * Content of Button component
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * On Button click callback
      */
-    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+    onClick?: (e: MouseEvent<HTMLElement>) => void;
     /**
      * On Button mouse down callback
      */
-    onMouseDown?: (e: React.MouseEvent<HTMLElement>) => void;
+    onMouseDown?: (e: MouseEvent<HTMLElement>) => void;
     /**
      * Allows to change version of Button component to small
      */