@dnanpm/styleguide 2.3.0 → 3.1.0

package/build/cjs/assets/bundle-8de31ca3.css

@@ -0,0 +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');
+}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Props as AccordionItemProps } from './AccordionItem';
+import type { Props as AccordionItemProps } from '../AccordionItem/AccordionItem';
 interface Props extends Omit<AccordionItemProps, 'title' | 'id' | 'children' | 'onClick' | 'onKeyDown'> {
     /**
      * Content of Accordion
@@ -15,6 +15,6 @@ interface Props extends Omit<AccordionItemProps, 'title' | 'id' | 'children' | '
     autoCollapsible?: boolean;
 }
 /** @visibleName Accordion */
-declare const Accordion: ({ autoCollapsible, highlightSelected, hasCloseButton, ...props }: Props) => JSX.Element | null;
+declare const Accordion: ({ type, autoCollapsible, highlightSelected, hasCloseButton, ...props }: Props) => React.JSX.Element | null;
 /** @component */
 export default Accordion;

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

@@ -4,20 +4,40 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
-var AccordionItem = require('./AccordionItem.js');
+var styled = require('styled-components');
+var theme = require('../../themes/theme.js');
+var styledUtils = require('../../utils/styledUtils.js');
+var AccordionItem = require('../AccordionItem/AccordionItem.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
+const AccordionContainer = styled__default["default"].div `
+    ${p => p.type === 'box' &&
+    styled.css `
+            & > * {
+                margin: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1)} 0;
+            }
+
+            & > *:first-of-type {
+                margin-top: 0;
+            }
+
+            & > *:last-of-type {
+                margin-bottom: 0;
+            }
+        `}
+`;
 /** @visibleName Accordion */
 const Accordion = (_a) => {
-    var { autoCollapsible = false, highlightSelected = true, hasCloseButton = false } = _a, props = tslib.__rest(_a, ["autoCollapsible", "highlightSelected", "hasCloseButton"]);
+    var { type = 'box', autoCollapsible = false, highlightSelected = type === 'panel', hasCloseButton = false } = _a, props = tslib.__rest(_a, ["type", "autoCollapsible", "highlightSelected", "hasCloseButton"]);
     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__default["default"].Children.map(props.children, (child, index) => {
+            if (React__default["default"].isValidElement(child) && child.type === AccordionItem["default"]) {
                 initialItemList[getAccordionItemId(index, child.props.title)] = Boolean(props.isExpanded);
             }
         });
@@ -40,17 +60,17 @@ 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__default["default"].Children.map(props.children, (child, index) => {
+        if (React__default["default"].isValidElement(child) && child.type === AccordionItem["default"]) {
             const id = getAccordionItemId(index, child.props.title);
-            return (React__default['default'].createElement(AccordionItem['default'], { id: id, key: id, 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));
+            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));
         }
         return null;
     });
     if (!accordionItems) {
         return null;
     }
-    return React__default['default'].createElement("div", { className: props.className }, accordionItems);
+    return (React__default["default"].createElement(AccordionContainer, { type: type, className: props.className }, accordionItems));
 };
 
-exports.default = Accordion;
+exports["default"] = Accordion;

package/build/cjs/components/{Accordion → AccordionItem}/AccordionItem.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+type AccordionItemType = 'box' | 'panel';
 export interface Props {
     /**
      * Accordion item title
@@ -8,6 +9,15 @@ export interface Props {
      * Unique ID for the component
      */
     id?: string;
+    /**
+     * Allows to change the styling of component
+     *
+     * @param {AccordionItemType} box Styled as Box component with level set to `none`
+     * @param {AccordionItemType} panel With transparent background and line as separation
+     *
+     * @default 'box'
+     */
+    type?: AccordionItemType;
     /**
      * Content of Accordion Item
      */
@@ -19,10 +29,11 @@ export interface Props {
      */
     isExpanded?: boolean;
     /**
-     * Allows to remove item title highlight when it is in expanded state
-     * Removes also highlight of CSS :hover and :active states
+     * Allows to set item title highlight of Accordion Item when it is in expanded state.
+     * Affects also highlight of CSS :hover and :active states
      *
-     * @default true
+     * @default true For `panel` type
+     * @default false For `box` type
      */
     highlightSelected?: boolean;
     /**
@@ -55,6 +66,6 @@ export interface Props {
     className?: string;
 }
 /** @visibleName Accordion Item */
-declare const AccordionItem: ({ hasCloseButton, highlightSelected, ...props }: Props) => JSX.Element;
+declare const AccordionItem: ({ type, hasCloseButton, highlightSelected, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default AccordionItem;

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

@@ -0,0 +1,85 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var styled = require('styled-components');
+var useElementDimensions = require('../../hooks/useElementDimensions.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 }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const AccordionItemContainer = styled__default["default"].div `
+    ${p => p.type === 'panel' &&
+    styled.css `
+            border-bottom: 1px solid ${theme["default"].color.line.L02};
+        `}
+`;
+const AccordionItemTitle = styled__default["default"].div `
+    font-size: ${theme["default"].fontSize.default};
+    line-height: ${theme["default"].lineHeight.default};
+    font-weight: ${theme["default"].fontWeight.bold};
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    cursor: pointer;
+    padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1.6)}
+        ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 2)};
+    color: ${p => p.isExpanded && p.highlightSelected ? theme["default"].color.default.pink : theme["default"].color.default.black};
+    transition: color 0.2s;
+    ${p => p.highlightSelected &&
+    styled.css `
+            &:hover,
+            &:active {
+                color: ${theme["default"].color.default.pink};
+                text-decoration: none;
+            }
+        `}
+`;
+const AccordionItemContentWrapper = styled__default["default"].div `
+    overflow: hidden;
+    transition: all 0.2s ease;
+    height: ${p => (p.isExpanded ? p.maxHeight / 16 + 1.25 : 0)}rem;
+    padding: 0 ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 2)};
+    visibility: ${p => (p.isExpanded ? 'visible' : 'hidden')};
+`;
+const AccordionItemContent = styled__default["default"].div `
+    padding-bottom: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1.6)};
+`;
+const AccordionItemCloseButton = styled__default["default"].div `
+    display: flex;
+    justify-content: flex-end;
+    line-height: ${theme["default"].lineHeight.default};
+    margin-bottom: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1.6)};
+    padding: 0 ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 2)};
+    gap: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1)};
+    cursor: pointer;
+`;
+/** @visibleName Accordion Item */
+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 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 }))),
+        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"] })))));
+    return type === 'box' ? (React__default["default"].createElement(Box["default"], { elevation: props.isExpanded ? 'low' : 'none', padding: "0" }, itemContent)) : (itemContent);
+};
+
+exports["default"] = AccordionItem;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 interface Props {
     /**
      * Unique ID for the input element
@@ -41,11 +41,16 @@ interface Props {
      */
     disabled?: boolean;
     /**
-     * Controls if input element's value can be updated directly
+     * Allows to update input element's value directly
      *
      * @default true
      */
     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
+     */
+    removable?: boolean;
     /**
      * Allows to pass testid string for testing purposes
      */
@@ -54,13 +59,8 @@ interface Props {
      * Allows to pass a custom className
      */
     className?: string;
-    /**
-     * Allows the `onChange` function to be called even after `min` property value is reached.
-     * When defined and `min` property value is reached, the `hlMinus` button  changes to `hlTrash` button
-     */
-    removable?: boolean;
 }
 /** @visibleName Amount Selector */
-declare const AmountSelector: ({ onChange, value, step, min, max, disabled, readonly, "data-testid": dataTestId, ...props }: Props) => JSX.Element;
+declare const AmountSelector: ({ onChange, value, step, min, max, disabled, readonly, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default AmountSelector;

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

@@ -7,15 +7,8 @@ var React = require('react');
 var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
-require('../Buttons/ButtonDefault.js');
-require('../Buttons/ButtonPrimary.js');
-var ButtonSecondary = require('../Buttons/ButtonSecondary.js');
-require('../Buttons/ButtonTertiary.js');
-require('../Buttons/ButtonRoundStyles.js');
-require('../Buttons/CloseButton.js');
+var ButtonArrow = require('../Button/ButtonArrow.js');
 var Icon = require('../Icon/Icon.js');
-require('../Buttons/ButtonIconStyles.js');
-require('../Buttons/ButtonIconPrimaryStyles.js');
 var hlMinus = require('../Icons/hlMinus.js');
 var hlPlus = require('../Icons/hlPlus.js');
 var hlTrash = require('../Icons/hlTrash.js');
@@ -24,30 +17,65 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const Container = styled['default'].div `
+const Container = styled["default"].div `
     display: flex;
-    width: ${styledUtils.getMultipliedSize(theme['default'].base.baseWidth, 12)};
+    width: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 12)};
+`;
+const Button = styled["default"](ButtonArrow["default"]) `
+    display: inline-flex;
+    width: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 4)};
+    height: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 4)};
+    border-radius: 0;
 
-    input {
-        width: ${styledUtils.getMultipliedSize(theme['default'].base.baseWidth, 4)};
-        font-family: ${props => props.theme.fontFamily.default};
-        font-size: ${props => props.theme.fontSize.default};
-        border: 0 none;
-        text-align: center;
-        outline: none;
-        -webkit-appearance: none;
-        -moz-appearance: textfield;
-        &::-webkit-outer-spin-button,
-        &::-webkit-inner-spin-button {
-            display: none;
+    &:first-of-type {
+        border-top-left-radius: ${theme["default"].radius.s};
+        border-bottom-left-radius: ${theme["default"].radius.s};
+
+        &:focus {
+            z-index: 2;
         }
     }
+
+    &:last-of-type {
+        border-top-right-radius: ${theme["default"].radius.s};
+        border-bottom-right-radius: ${theme["default"].radius.s};
+    }
 `;
-const StyledButtonSecondary = styled['default'](ButtonSecondary['default']) `
-    min-width: ${styledUtils.getMultipliedSize(theme['default'].base.baseWidth, 4)};
-    width: ${styledUtils.getMultipliedSize(theme['default'].base.baseWidth, 4)};
-    height: ${styledUtils.getMultipliedSize(theme['default'].base.baseHeight, 4)};
-    padding: ${styledUtils.getMultipliedSize(theme['default'].base.baseWidth, 0.6)};
+const Input = styled["default"].input `
+    width: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 4)};
+    height: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 4)};
+    font-family: ${theme["default"].fontFamily.default};
+    font-size: ${theme["default"].fontSize.default};
+    text-align: center;
+    border: 0 none;
+    border-radius: 0;
+    border-top: 1px solid ${theme["default"].color.line.L01};
+    border-bottom: 1px solid ${theme["default"].color.line.L01};
+
+    &:focus {
+        border: 2px solid ${theme["default"].color.focus.light};
+        box-shadow: 0px 0px 0px 2px ${theme["default"].color.focus.dark};
+        outline: none;
+        z-index: 2;
+    }
+
+    &:disabled,
+    &[disabled] {
+        background-color: ${theme["default"].color.background.sand.E02 + theme["default"].color.transparency.T30};
+        border: 1px solid ${theme["default"].color.line.L02 + theme["default"].color.transparency.T30};
+    }
+
+    &:read-only {
+        pointer-events: none;
+    }
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+        display: none;
+    }
+
+    -webkit-appearance: none;
+    -moz-appearance: textfield;
 `;
 /** @visibleName Amount Selector */
 const AmountSelector = (_a) => {
@@ -81,13 +109,11 @@ const AmountSelector = (_a) => {
             onChange(min);
         }
     };
-    return (React__default['default'].createElement(Container, { disabled: disabled, "data-testid": dataTestId, className: props.className },
-        React__default['default'].createElement(StyledButtonSecondary, { disabled: disabled, onClick: decrease, type: "button", "data-testid": dataTestId &&
-                `${dataTestId}${props.removable && isMinReached(value - step) ? '-remove' : '-decrease'}` },
-            React__default['default'].createElement(Icon['default'], { icon: props.removable && isMinReached(value - step) ? hlTrash['default'] : hlMinus['default'], color: theme['default'].color.black })),
-        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(StyledButtonSecondary, { disabled: disabled, onClick: increase, "data-testid": dataTestId ? `${dataTestId}-increase` : undefined, type: "button" },
-            React__default['default'].createElement(Icon['default'], { icon: hlPlus['default'], color: theme['default'].color.black }))));
+    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 &&
+                `${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 })));
 };
 
-exports.default = AmountSelector;
+exports["default"] = AmountSelector;

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import type { ElevationLevel } from '../../types/elevation';
+interface Props {
+    /**
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     * Content of Box component
+     */
+    children?: React.ReactNode;
+    /**
+     * Allows to change the elevation effect of component
+     *
+     * @param {ElevationLevel} none No elevation
+     * @param {ElevationLevel} low Low elevation effect
+     * @param {ElevationLevel} high High elevation effect
+     * @param {ElevationLevel} extraHigh Extra high elevation effect
+     *
+     * @default 'none'
+     */
+    elevation?: ElevationLevel;
+    /**
+     * Allows to change the shadow map. Order of map is top, right, bottom, and left (clockwise) with space as separator.
+     * Shadows are applied to sides with value `1` (`true`) and omitted from sides with value `0` (`false`)
+     *
+     * @default '1 1 1 1'
+     */
+    shadow?: string;
+    /**
+     * Allows to pass a custom width of component
+     *
+     * @default auto
+     */
+    width?: string;
+    /**
+     * Allows to pass a custom height of component
+     *
+     * @default auto
+     */
+    height?: string;
+    /**
+     * Allows to pass a custom margin
+     *
+     * @default '0'
+     */
+    margin?: string;
+    /**
+     * Allows to pass a custom padding
+     *
+     * @default '1.25rem'
+     */
+    padding?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+}
+declare const Box: ({ elevation, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default Box;

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

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var styled = require('styled-components');
+var theme = require('../../themes/theme.js');
+var common = require('../../utils/common.js');
+var styledUtils = require('../../utils/styledUtils.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const BoxWrapper = styled__default["default"].div `
+    border: 1px solid ${theme["default"].color.line.L04};
+    ${({ width }) => width && `width: ${width}`};
+    ${({ height }) => height && `height: ${height}`};
+    ${({ margin }) => margin && `margin: ${margin}`};
+    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 })}
+`;
+const Box = (_a) => {
+    var { elevation = 'none', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["elevation", 'data-testid']);
+    return (React__default["default"].createElement(BoxWrapper, { id: props.id, "$elevation": elevation, shadow: props.shadow, width: props.width, height: props.height, margin: props.margin, padding: props.padding, className: props.className, "data-testid": dataTestId }, props.children));
+};
+
+exports["default"] = Box;