@dnanpm/styleguide 2.3.0 → 3.1.0

package/build/es/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/es/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/es/components/Accordion/Accordion.js

@@ -1,15 +1,34 @@
 import { __rest } from 'tslib';
-import React, { useState } from 'react';
-import AccordionItem from './AccordionItem.js';
+import React__default, { useState } from 'react';
+import styled__default, { css } from 'styled-components';
+import theme from '../../themes/theme.js';
+import { getMultipliedSize } from '../../utils/styledUtils.js';
+import AccordionItem from '../AccordionItem/AccordionItem.js';
 
+const AccordionContainer = styled__default.div `
+    ${p => p.type === 'box' &&
+    css `
+            & > * {
+                margin: ${getMultipliedSize(theme.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 = __rest(_a, ["autoCollapsible", "highlightSelected", "hasCloseButton"]);
+    var { type = 'box', autoCollapsible = false, highlightSelected = type === 'panel', hasCloseButton = false } = _a, props = __rest(_a, ["type", "autoCollapsible", "highlightSelected", "hasCloseButton"]);
     const initialItemList = {};
     const getAccordionItemId = (index, title) => `${title.replace(/\s+/g, '')}-${index}`;
     if (props.isExpanded) {
-        React.Children.map(props.children, (child, index) => {
-            if (React.isValidElement(child) && child.type === AccordionItem) {
+        React__default.Children.map(props.children, (child, index) => {
+            if (React__default.isValidElement(child) && child.type === AccordionItem) {
                 initialItemList[getAccordionItemId(index, child.props.title)] = Boolean(props.isExpanded);
             }
         });
@@ -32,17 +51,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.Children.map(props.children, (child, index) => {
-        if (React.isValidElement(child) && child.type === AccordionItem) {
+    const accordionItems = React__default.Children.map(props.children, (child, index) => {
+        if (React__default.isValidElement(child) && child.type === AccordionItem) {
             const id = getAccordionItemId(index, child.props.title);
-            return (React.createElement(AccordionItem, { 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.createElement(AccordionItem, { 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.createElement("div", { className: props.className }, accordionItems);
+    return (React__default.createElement(AccordionContainer, { type: type, className: props.className }, accordionItems));
 };
 
-export default Accordion;
+export { Accordion as default };

package/build/es/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/es/components/AccordionItem/AccordionItem.js

@@ -0,0 +1,76 @@
+import { __rest } from 'tslib';
+import React__default from 'react';
+import styled__default, { css } from 'styled-components';
+import useResizeObserver from '../../hooks/useElementDimensions.js';
+import theme from '../../themes/theme.js';
+import { getMultipliedSize } from '../../utils/styledUtils.js';
+import Box from '../Box/Box.js';
+import Icon from '../Icon/Icon.js';
+import hlChevronDown from '../Icons/hlChevronDown.js';
+import hlChevronUp from '../Icons/hlChevronUp.js';
+import hlX from '../Icons/hlX.js';
+
+const AccordionItemContainer = styled__default.div `
+    ${p => p.type === 'panel' &&
+    css `
+            border-bottom: 1px solid ${theme.color.line.L02};
+        `}
+`;
+const AccordionItemTitle = styled__default.div `
+    font-size: ${theme.fontSize.default};
+    line-height: ${theme.lineHeight.default};
+    font-weight: ${theme.fontWeight.bold};
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    cursor: pointer;
+    padding: ${getMultipliedSize(theme.base.baseHeight, 1.6)}
+        ${getMultipliedSize(theme.base.baseHeight, 2)};
+    color: ${p => p.isExpanded && p.highlightSelected ? theme.color.default.pink : theme.color.default.black};
+    transition: color 0.2s;
+    ${p => p.highlightSelected &&
+    css `
+            &:hover,
+            &:active {
+                color: ${theme.color.default.pink};
+                text-decoration: none;
+            }
+        `}
+`;
+const AccordionItemContentWrapper = styled__default.div `
+    overflow: hidden;
+    transition: all 0.2s ease;
+    height: ${p => (p.isExpanded ? p.maxHeight / 16 + 1.25 : 0)}rem;
+    padding: 0 ${getMultipliedSize(theme.base.baseHeight, 2)};
+    visibility: ${p => (p.isExpanded ? 'visible' : 'hidden')};
+`;
+const AccordionItemContent = styled__default.div `
+    padding-bottom: ${getMultipliedSize(theme.base.baseHeight, 1.6)};
+`;
+const AccordionItemCloseButton = styled__default.div `
+    display: flex;
+    justify-content: flex-end;
+    line-height: ${theme.lineHeight.default};
+    margin-bottom: ${getMultipliedSize(theme.base.baseHeight, 1.6)};
+    padding: 0 ${getMultipliedSize(theme.base.baseHeight, 2)};
+    gap: ${getMultipliedSize(theme.base.baseHeight, 1)};
+    cursor: pointer;
+`;
+/** @visibleName Accordion Item */
+const AccordionItem = (_a) => {
+    var { type = 'box', hasCloseButton = false, highlightSelected = type === 'panel' } = _a, props = __rest(_a, ["type", "hasCloseButton", "highlightSelected"]);
+    // Get height when element dimensions change
+    const { height: contentHeight, ref: contentRef } = useResizeObserver();
+    const itemContent = (React__default.createElement(AccordionItemContainer, { id: props.id, type: type, "aria-expanded": Boolean(props.isExpanded), className: props.className },
+        React__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.createElement(Icon, { icon: hlChevronUp, color: theme.color.default.black, position: "right", "aria-label": props.closeLabel })) : (React__default.createElement(Icon, { icon: hlChevronDown, color: theme.color.default.black, position: "right", "aria-label": props.openLabel }))),
+        React__default.createElement(AccordionItemContentWrapper, { maxHeight: contentHeight, isExpanded: props.isExpanded },
+            React__default.createElement(AccordionItemContent, { ref: contentRef }, props.children)),
+        hasCloseButton && props.isExpanded && (React__default.createElement(AccordionItemCloseButton, { tabIndex: 0, onClick: props.onClick, onKeyDown: props.onKeyDown, "aria-label": props.closeLabel, role: "button" },
+            React__default.createElement("span", null, props.closeLabel),
+            React__default.createElement(Icon, { icon: hlX })))));
+    return type === 'box' ? (React__default.createElement(Box, { elevation: props.isExpanded ? 'low' : 'none', padding: "0" }, itemContent)) : (itemContent);
+};
+
+export { AccordionItem as default };

package/build/es/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/es/components/AmountSelector/AmountSelector.js

@@ -1,17 +1,10 @@
 import { __rest } from 'tslib';
-import React from 'react';
+import React__default from 'react';
 import styled from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
-import '../Buttons/ButtonDefault.js';
-import '../Buttons/ButtonPrimary.js';
-import ButtonSecondary from '../Buttons/ButtonSecondary.js';
-import '../Buttons/ButtonTertiary.js';
-import '../Buttons/ButtonRoundStyles.js';
-import '../Buttons/CloseButton.js';
+import ButtonArrow from '../Button/ButtonArrow.js';
 import Icon from '../Icon/Icon.js';
-import '../Buttons/ButtonIconStyles.js';
-import '../Buttons/ButtonIconPrimaryStyles.js';
 import hlMinus from '../Icons/hlMinus.js';
 import hlPlus from '../Icons/hlPlus.js';
 import hlTrash from '../Icons/hlTrash.js';
@@ -19,27 +12,62 @@ import hlTrash from '../Icons/hlTrash.js';
 const Container = styled.div `
     display: flex;
     width: ${getMultipliedSize(theme.base.baseWidth, 12)};
+`;
+const Button = styled(ButtonArrow) `
+    display: inline-flex;
+    width: ${getMultipliedSize(theme.base.baseWidth, 4)};
+    height: ${getMultipliedSize(theme.base.baseHeight, 4)};
+    border-radius: 0;
 
-    input {
-        width: ${getMultipliedSize(theme.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.radius.s};
+        border-bottom-left-radius: ${theme.radius.s};
+
+        &:focus {
+            z-index: 2;
         }
     }
+
+    &:last-of-type {
+        border-top-right-radius: ${theme.radius.s};
+        border-bottom-right-radius: ${theme.radius.s};
+    }
 `;
-const StyledButtonSecondary = styled(ButtonSecondary) `
-    min-width: ${getMultipliedSize(theme.base.baseWidth, 4)};
+const Input = styled.input `
     width: ${getMultipliedSize(theme.base.baseWidth, 4)};
     height: ${getMultipliedSize(theme.base.baseHeight, 4)};
-    padding: ${getMultipliedSize(theme.base.baseWidth, 0.6)};
+    font-family: ${theme.fontFamily.default};
+    font-size: ${theme.fontSize.default};
+    text-align: center;
+    border: 0 none;
+    border-radius: 0;
+    border-top: 1px solid ${theme.color.line.L01};
+    border-bottom: 1px solid ${theme.color.line.L01};
+
+    &:focus {
+        border: 2px solid ${theme.color.focus.light};
+        box-shadow: 0px 0px 0px 2px ${theme.color.focus.dark};
+        outline: none;
+        z-index: 2;
+    }
+
+    &:disabled,
+    &[disabled] {
+        background-color: ${theme.color.background.sand.E02 + theme.color.transparency.T30};
+        border: 1px solid ${theme.color.line.L02 + theme.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) => {
@@ -73,13 +101,11 @@ const AmountSelector = (_a) => {
             onChange(min);
         }
     };
-    return (React.createElement(Container, { disabled: disabled, "data-testid": dataTestId, className: props.className },
-        React.createElement(StyledButtonSecondary, { disabled: disabled, onClick: decrease, type: "button", "data-testid": dataTestId &&
-                `${dataTestId}${props.removable && isMinReached(value - step) ? '-remove' : '-decrease'}` },
-            React.createElement(Icon, { icon: props.removable && isMinReached(value - step) ? hlTrash : hlMinus, color: theme.color.black })),
-        React.createElement("input", { id: props.id, name: props.name, type: "number", onChange: handleChange, value: value, readOnly: readonly || disabled, disabled: disabled }),
-        React.createElement(StyledButtonSecondary, { disabled: disabled, onClick: increase, "data-testid": dataTestId ? `${dataTestId}-increase` : undefined, type: "button" },
-            React.createElement(Icon, { icon: hlPlus, color: theme.color.black }))));
+    return (React__default.createElement(Container, { "data-testid": dataTestId, className: props.className },
+        React__default.createElement(Button, { icon: React__default.createElement(Icon, { icon: props.removable && isMinReached(value - step) ? hlTrash : hlMinus, size: getMultipliedSize(theme.base.baseWidth, 2) }), variant: "secondary", onClick: decrease, disabled: disabled, type: "button", "data-testid": dataTestId &&
+                `${dataTestId}${props.removable && isMinReached(value - step) ? '-remove' : '-decrease'}` }),
+        React__default.createElement(Input, { id: props.id, name: props.name, type: "number", onChange: handleChange, value: value, readOnly: readonly || disabled, disabled: disabled }),
+        React__default.createElement(Button, { icon: React__default.createElement(Icon, { icon: hlPlus, size: getMultipliedSize(theme.base.baseWidth, 2) }), variant: "secondary", onClick: increase, disabled: disabled, type: "button", "data-testid": dataTestId ? `${dataTestId}-increase` : undefined })));
 };
 
-export default AmountSelector;
+export { AmountSelector as default };

package/build/es/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/es/components/Box/Box.js

@@ -0,0 +1,23 @@
+import { __rest } from 'tslib';
+import React__default from 'react';
+import styled__default from 'styled-components';
+import theme from '../../themes/theme.js';
+import { getElevationShadow } from '../../utils/common.js';
+import { getMultipliedSize } from '../../utils/styledUtils.js';
+
+const BoxWrapper = styled__default.div `
+    border: 1px solid ${theme.color.line.L04};
+    ${({ width }) => width && `width: ${width}`};
+    ${({ height }) => height && `height: ${height}`};
+    ${({ margin }) => margin && `margin: ${margin}`};
+    padding: ${({ padding }) => padding || getMultipliedSize(theme.base.baseHeight, 2)};
+    background-color: ${theme.color.default.white};
+    border-radius: ${theme.radius.default};
+    ${({ $elevation, shadow }) => $elevation !== 'none' && getElevationShadow({ elevation: $elevation, shadow })}
+`;
+const Box = (_a) => {
+    var { elevation = 'none', 'data-testid': dataTestId } = _a, props = __rest(_a, ["elevation", 'data-testid']);
+    return (React__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));
+};
+
+export { Box as default };