@dnanpm/styleguide 3.9.1 → 3.9.3

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

@@ -78,6 +78,10 @@ export interface Props {
      * Allows to pass testid string for testing purposes
      */
     'data-testid'?: string;
+    /**
+     * Allows to pass any data-* attribute
+     */
+    dataAttributes?: Record<`data-${string}`, string>;
 }
 export declare const shade: {
     pink: {

package/build/cjs/components/Button/Button.js

@@ -123,7 +123,7 @@ const Element = styled__default.default.button `
 /** @visibleName Button */
 const Button = (_a) => {
     var { type = 'submit', 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue } = _a, props = tslib.__rest(_a, ["type", 'data-testid', 'data-no-close', 'data-track-value']);
-    return (React__default.default.createElement(Element, Object.assign({ id: props.id, as: props.href ? 'a' : undefined, type: props.href ? undefined : type, href: props.href, onClick: props.onClick, onMouseDown: props.onMouseDown, small: props.small, darkBg: props.darkBg, fullWidth: props.fullWidth, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue }, (!props.href && {
+    return (React__default.default.createElement(Element, Object.assign({ id: props.id, as: props.href ? 'a' : undefined, type: props.href ? undefined : type, href: props.href, onClick: props.onClick, onMouseDown: props.onMouseDown, small: props.small, darkBg: props.darkBg, fullWidth: props.fullWidth, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue }, props.dataAttributes, (!props.href && {
         name: props.name,
         disabled: props.disabled,
     })), props.loading ? (React__default.default.createElement(PixelLoader.default, { color: props.darkBg ? theme.default.color.default.white : theme.default.color.default.plum })) : (React__default.default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, props.children))));

package/build/cjs/components/ButtonArrow/ButtonArrow.js

@@ -73,7 +73,7 @@ const buttonsMap = {
 const ButtonArrow = (_a) => {
     var { variant = 'primary', 'data-testid': dataTestId, 'data-track-value': dataTrackValue } = _a, props = tslib.__rest(_a, ["variant", 'data-testid', 'data-track-value']);
     const Element = buttonsMap[variant];
-    return (React__default.default.createElement(Element, { id: props.id, href: props.href, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, darkBg: props.darkBg, disabled: props.disabled, className: props.className, "data-testid": dataTestId, "data-track-value": dataTrackValue }, props.direction ? (React__default.default.createElement(Icon.default, { icon: iconsMap[props.direction], size: "1rem" })) : (React.isValidElement(props.icon) && props.icon.type === Icon.default && props.icon)));
+    return (React__default.default.createElement(Element, { id: props.id, href: props.href, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, darkBg: props.darkBg, disabled: props.disabled, className: props.className, "data-testid": dataTestId, "data-track-value": dataTrackValue, dataAttributes: props.dataAttributes }, props.direction ? (React__default.default.createElement(Icon.default, { icon: iconsMap[props.direction], size: "1rem" })) : (React.isValidElement(props.icon) && props.icon.type === Icon.default && props.icon)));
 };
 
 exports.default = ButtonArrow;

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

@@ -63,6 +63,10 @@ interface Props {
      * Allows to pass testid string for testing purposes
      */
     'data-testid'?: string;
+    /**
+     * Allows to pass any data-* attribute
+     */
+    dataAttributes?: Record<`data-${string}`, string>;
 }
 /** @visibleName Button Card */
 declare const ButtonCard: ({ type, size, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;

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

@@ -125,7 +125,7 @@ const CtaIcon = styled__default.default(Icon.default) `
 /** @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__default.default.createElement(ButtonCardWrapper, Object.assign({ id: props.id, as: props.href ? 'a' : undefined, type: props.href ? undefined : type, href: props.href, onClick: props.onClick, className: props.className, "data-testid": dataTestId }, (!props.href && {
+    return (React__default.default.createElement(ButtonCardWrapper, Object.assign({ id: props.id, as: props.href ? 'a' : undefined, type: props.href ? undefined : type, href: props.href, onClick: props.onClick, className: props.className, "data-testid": dataTestId }, props.dataAttributes, (!props.href && {
         name: props.name,
     })),
         React__default.default.createElement(StyledBox, { elevation: "low", size: size },

package/build/cjs/components/ButtonIcon/ButtonIcon.js

@@ -92,7 +92,7 @@ const ButtonElement = styled__default.default.button `
 const ButtonIcon = (_a) => {
     var { icon = icons.EditUnderline, 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue } = _a, props = tslib.__rest(_a, ["icon", 'data-testid', 'data-no-close', 'data-track-value']);
     const position = props.isReversed ? 'right' : 'left';
-    return (React__default.default.createElement(ButtonElement, { id: props.id, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, small: props.small, darkBg: props.darkBg, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, disabled: props.disabled, hideChildrenMobile: props.hideChildrenMobile, isReversed: props.isReversed, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue }, props.loading ? (React__default.default.createElement(PixelLoader.default, { color: props.darkBg ? theme.default.color.default.white : theme.default.color.default.black })) : (React__default.default.createElement(React__default.default.Fragment, null,
+    return (React__default.default.createElement(ButtonElement, Object.assign({ id: props.id, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, small: props.small, darkBg: props.darkBg, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, disabled: props.disabled, hideChildrenMobile: props.hideChildrenMobile, isReversed: props.isReversed, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue }, props.dataAttributes), props.loading ? (React__default.default.createElement(PixelLoader.default, { color: props.darkBg ? theme.default.color.default.white : theme.default.color.default.black })) : (React__default.default.createElement(React__default.default.Fragment, null,
         React__default.default.createElement(Icon.default, { icon: icon, color: props.darkBg ? theme.default.color.default.white : theme.default.color.default.pink, size: props.small ? '1.25rem' : '1.5rem', position: props.children ? position : undefined }),
         props.children && (React__default.default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, props.children))))));
 };

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

@@ -17,6 +17,12 @@ interface Props {
      * @default 1.2 In Mobile view
      */
     visibleItems?: number;
+    /**
+     * Allows to display a slide counter
+     *
+     * @default false
+     */
+    hasCounter?: boolean;
     /**
      * Allows to define carousel title
      */

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

@@ -134,6 +134,12 @@ const FooterButton = styled.default.div `
     grid-column: footerButton;
     text-align: right;
 `;
+const Counter = styled.default.span `
+    margin-top: 0.5rem;
+    font-size: ${theme.default.fontSize.s};
+    font-weight: ${theme.default.fontWeight.medium};
+    margin-right: 1rem;
+`;
 /** @visibleName Carousel */
 const Carousel = (_a) => {
     var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
@@ -298,6 +304,10 @@ const Carousel = (_a) => {
         React__default.default.createElement(Header, { "data-testid": dataTestId && `${dataTestId}-header` },
             props.title && React__default.default.createElement(Title, null, props.title),
             React__default.default.createElement(Navigation, null,
+                props.hasCounter && (React__default.default.createElement(Counter, null,
+                    slideScreensCount === 0 ? 0 : currentIndex + 1,
+                    "/",
+                    slideScreensCount)),
                 React__default.default.createElement(ButtonArrow.default, { direction: "left", "aria-label": "Previous", onClick: handleNavigationButtonPreviousClick, disabled: currentIndex <= 0 }),
                 React__default.default.createElement(ButtonArrow.default, { direction: "right", "aria-label": "Next", onClick: handleNavigationButtonNextClick, disabled: currentIndex + visibleItems >= React.Children.count(props.children) }))),
         React__default.default.createElement(Content, { "data-testid": dataTestId && `${dataTestId}-content` },

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

@@ -12,8 +12,6 @@ var common = require('../../utils/common.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var Box = require('../Box/Box.js');
 var ButtonClose = require('../ButtonClose/ButtonClose.js');
-var Floater = require('../Floater/Floater.js');
-var Icon = require('../Icon/Icon.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -52,10 +50,10 @@ const StyledReactModal = styled.default(ReactModal__default.default) `
     position: fixed;
     top: 0;
     ${({ side }) => (side === 'left' ? 'left: 0' : 'right: 0')};
-    width: 100vw;
+    width: ${({ size }) => sizeMap[size]};
     height: 100dvh;
-    max-width: 100vw;
     max-height: 100%;
+    max-width: calc(100vw - ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 4)});
     transform: translateX(${({ side }) => side === 'left' && '-'}100%);
     animation: ${slideIn} ${({ size }) => animationMap[size][0]}s forwards;
 
@@ -63,9 +61,10 @@ const StyledReactModal = styled.default(ReactModal__default.default) `
         animation: ${({ side }) => slideOut(side)} ${({ size }) => animationMap[size][1]}s forwards;
     }
 
-    ${({ size }) => styledUtils.media.sm `
-        width: ${sizeMap[size]};
-    `};
+    @media (max-width: ${sizeMap.small}) {
+        max-width: 100vw;
+        width: 100vw;
+    }
 `;
 const StyledReactModalOverlay = styled.default.div `
     display: flex;
@@ -113,13 +112,16 @@ const StyledReactModalContent = styled.default.div `
 const StyledBox = styled.default(Box.default) `
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
     border-radius: 0;
     height: 100%;
-    overflow-y: auto;
     position: relative;
-    padding: 0;
-    border: 0 none;
+    border: 0;
+`;
+const ContentContainer = styled.default.div `
+    flex: 1 1 auto;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
 `;
 const Header = styled.default.div `
     display: flex;
@@ -139,6 +141,7 @@ const Header = styled.default.div `
 `;
 const Title = styled.default.h2 `
     font-size: ${({ size }) => (size === 'small' ? theme.default.fontSize.h2S : theme.default.fontSize.h2M)};
+    line-height: ${({ size }) => (size === 'small' ? theme.default.lineHeight.h2S : theme.default.lineHeight.h2M)};
     color: ${({ variant }) => variant === 'light' ? theme.default.color.default.black : theme.default.color.default.white};
 `;
 const Subtitle = styled.default.p `
@@ -147,7 +150,7 @@ const Subtitle = styled.default.p `
 `;
 const CloseButton = styled.default(ButtonClose.default) `
     margin: 0;
-    padding: 0.625rem;
+    padding: 0.5rem;
     border-radius: 0 0 0 ${theme.default.radius.default};
     background-color: ${({ variant }) => variant === 'light'
     ? theme.default.color.background.sand.E01
@@ -163,7 +166,6 @@ const Footer = styled.default.div `
     width: 100%;
     border-top: 1px solid ${theme.default.color.line.L04};
     background-color: ${theme.default.color.background.white.default};
-
     ${common.default({ elevation: 'high', shadow: '1 0 0 0' })};
 `;
 const ModalOverlay = ({ ref, onClick, onMouseDown, className }, contentElement) => (React__default.default.createElement(StyledReactModalOverlay, { ref: ref, onClick: onClick, onMouseDown: onMouseDown, className: className }, contentElement));
@@ -176,18 +178,17 @@ const Drawer = (_a) => {
     ReactModal__default.default.setAppElement(appElement);
     return (React__default.default.createElement(React__default.default.Fragment, null,
         React__default.default.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__default.default.createElement(StyledBox, { elevation: "extraHigh", margin: props.margin, "data-testid": dataTestId },
-                React__default.default.createElement("div", null,
-                    React__default.default.createElement(Floater.default, null, closeButton && isClosable && (React__default.default.createElement(CloseButton, { onClick: props.onRequestClose, "aria-label": props.closeLabel, "data-testid": dataTestId && `${dataTestId}-close-button`, variant: variant },
-                        React__default.default.createElement(Icon.default, { icon: icons.Close, color: variant === 'light'
-                                ? theme.default.color.default.plum
-                                : theme.default.color.default.white })))),
+            React__default.default.createElement(StyledBox, { "data-testid": dataTestId, elevation: "extraHigh", margin: props.margin, padding: "0" },
+                React__default.default.createElement(ContentContainer, null,
                     React__default.default.createElement(Header, { variant: variant, "data-testid": dataTestId && `${dataTestId}-header` },
                         React__default.default.createElement(Title, { size: size, variant: variant }, props.title),
                         props.subtitle && (React__default.default.createElement(Subtitle, { size: size, variant: variant }, props.subtitle))),
+                    closeButton && isClosable && (React__default.default.createElement(CloseButton, { onClick: props.onRequestClose, "aria-label": props.closeLabel, "data-testid": dataTestId && `${dataTestId}-close-button`, variant: variant },
+                        React__default.default.createElement(icons.Close, { color: variant === 'light'
+                                ? theme.default.color.default.plum
+                                : theme.default.color.default.white }))),
                     React__default.default.createElement(Content, { "data-testid": dataTestId && `${dataTestId}-content`, padding: padding }, props.children)),
-                props.footer && (React__default.default.createElement(Floater.default, { position: "bottom" },
-                    React__default.default.createElement(Footer, { "data-testid": dataTestId && `${dataTestId}-footer` }, props.footer))))),
+                props.footer && (React__default.default.createElement(Footer, { "data-testid": dataTestId && `${dataTestId}-footer` }, props.footer)))),
         React__default.default.createElement(GlobalStyle, null)));
 };
 

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

@@ -78,6 +78,10 @@ export interface Props {
      * Allows to pass testid string for testing purposes
      */
     'data-testid'?: string;
+    /**
+     * Allows to pass any data-* attribute
+     */
+    dataAttributes?: Record<`data-${string}`, string>;
 }
 export declare const shade: {
     pink: {

package/build/es/components/Button/Button.js

@@ -114,7 +114,7 @@ const Element = styled__default.button `
 /** @visibleName Button */
 const Button = (_a) => {
     var { type = 'submit', 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue } = _a, props = __rest(_a, ["type", 'data-testid', 'data-no-close', 'data-track-value']);
-    return (React__default.createElement(Element, Object.assign({ id: props.id, as: props.href ? 'a' : undefined, type: props.href ? undefined : type, href: props.href, onClick: props.onClick, onMouseDown: props.onMouseDown, small: props.small, darkBg: props.darkBg, fullWidth: props.fullWidth, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue }, (!props.href && {
+    return (React__default.createElement(Element, Object.assign({ id: props.id, as: props.href ? 'a' : undefined, type: props.href ? undefined : type, href: props.href, onClick: props.onClick, onMouseDown: props.onMouseDown, small: props.small, darkBg: props.darkBg, fullWidth: props.fullWidth, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue }, props.dataAttributes, (!props.href && {
         name: props.name,
         disabled: props.disabled,
     })), props.loading ? (React__default.createElement(PixelLoader, { color: props.darkBg ? theme.color.default.white : theme.color.default.plum })) : (React__default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, props.children))));

package/build/es/components/ButtonArrow/ButtonArrow.js

@@ -64,7 +64,7 @@ const buttonsMap = {
 const ButtonArrow = (_a) => {
     var { variant = 'primary', 'data-testid': dataTestId, 'data-track-value': dataTrackValue } = _a, props = __rest(_a, ["variant", 'data-testid', 'data-track-value']);
     const Element = buttonsMap[variant];
-    return (React__default.createElement(Element, { id: props.id, href: props.href, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, darkBg: props.darkBg, disabled: props.disabled, className: props.className, "data-testid": dataTestId, "data-track-value": dataTrackValue }, props.direction ? (React__default.createElement(Icon, { icon: iconsMap[props.direction], size: "1rem" })) : (isValidElement(props.icon) && props.icon.type === Icon && props.icon)));
+    return (React__default.createElement(Element, { id: props.id, href: props.href, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, darkBg: props.darkBg, disabled: props.disabled, className: props.className, "data-testid": dataTestId, "data-track-value": dataTrackValue, dataAttributes: props.dataAttributes }, props.direction ? (React__default.createElement(Icon, { icon: iconsMap[props.direction], size: "1rem" })) : (isValidElement(props.icon) && props.icon.type === Icon && props.icon)));
 };
 
 export { ButtonArrow as default };

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

@@ -63,6 +63,10 @@ interface Props {
      * Allows to pass testid string for testing purposes
      */
     'data-testid'?: string;
+    /**
+     * Allows to pass any data-* attribute
+     */
+    dataAttributes?: Record<`data-${string}`, string>;
 }
 /** @visibleName Button Card */
 declare const ButtonCard: ({ type, size, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;

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

@@ -116,7 +116,7 @@ const CtaIcon = styled__default(Icon) `
 /** @visibleName Button Card */
 const ButtonCard = (_a) => {
     var { type = 'submit', size = 'medium', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", "size", 'data-testid']);
-    return (React__default.createElement(ButtonCardWrapper, Object.assign({ id: props.id, as: props.href ? 'a' : undefined, type: props.href ? undefined : type, href: props.href, onClick: props.onClick, className: props.className, "data-testid": dataTestId }, (!props.href && {
+    return (React__default.createElement(ButtonCardWrapper, Object.assign({ id: props.id, as: props.href ? 'a' : undefined, type: props.href ? undefined : type, href: props.href, onClick: props.onClick, className: props.className, "data-testid": dataTestId }, props.dataAttributes, (!props.href && {
         name: props.name,
     })),
         React__default.createElement(StyledBox, { elevation: "low", size: size },

package/build/es/components/ButtonIcon/ButtonIcon.js

@@ -83,7 +83,7 @@ const ButtonElement = styled__default.button `
 const ButtonIcon = (_a) => {
     var { icon = EditUnderline, 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue } = _a, props = __rest(_a, ["icon", 'data-testid', 'data-no-close', 'data-track-value']);
     const position = props.isReversed ? 'right' : 'left';
-    return (React__default.createElement(ButtonElement, { id: props.id, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, small: props.small, darkBg: props.darkBg, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, disabled: props.disabled, hideChildrenMobile: props.hideChildrenMobile, isReversed: props.isReversed, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue }, props.loading ? (React__default.createElement(PixelLoader, { color: props.darkBg ? theme.color.default.white : theme.color.default.black })) : (React__default.createElement(React__default.Fragment, null,
+    return (React__default.createElement(ButtonElement, Object.assign({ id: props.id, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, small: props.small, darkBg: props.darkBg, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, disabled: props.disabled, hideChildrenMobile: props.hideChildrenMobile, isReversed: props.isReversed, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue }, props.dataAttributes), props.loading ? (React__default.createElement(PixelLoader, { color: props.darkBg ? theme.color.default.white : theme.color.default.black })) : (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(Icon, { icon: icon, color: props.darkBg ? theme.color.default.white : theme.color.default.pink, size: props.small ? '1.25rem' : '1.5rem', position: props.children ? position : undefined }),
         props.children && (React__default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, props.children))))));
 };

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

@@ -17,6 +17,12 @@ interface Props {
      * @default 1.2 In Mobile view
      */
     visibleItems?: number;
+    /**
+     * Allows to display a slide counter
+     *
+     * @default false
+     */
+    hasCounter?: boolean;
     /**
      * Allows to define carousel title
      */

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

@@ -126,6 +126,12 @@ const FooterButton = styled.div `
     grid-column: footerButton;
     text-align: right;
 `;
+const Counter = styled.span `
+    margin-top: 0.5rem;
+    font-size: ${theme.fontSize.s};
+    font-weight: ${theme.fontWeight.medium};
+    margin-right: 1rem;
+`;
 /** @visibleName Carousel */
 const Carousel = (_a) => {
     var { 'data-testid': dataTestId } = _a, props = __rest(_a, ['data-testid']);
@@ -290,6 +296,10 @@ const Carousel = (_a) => {
         React__default.createElement(Header, { "data-testid": dataTestId && `${dataTestId}-header` },
             props.title && React__default.createElement(Title, null, props.title),
             React__default.createElement(Navigation, null,
+                props.hasCounter && (React__default.createElement(Counter, null,
+                    slideScreensCount === 0 ? 0 : currentIndex + 1,
+                    "/",
+                    slideScreensCount)),
                 React__default.createElement(ButtonArrow, { direction: "left", "aria-label": "Previous", onClick: handleNavigationButtonPreviousClick, disabled: currentIndex <= 0 }),
                 React__default.createElement(ButtonArrow, { direction: "right", "aria-label": "Next", onClick: handleNavigationButtonNextClick, disabled: currentIndex + visibleItems >= Children.count(props.children) }))),
         React__default.createElement(Content, { "data-testid": dataTestId && `${dataTestId}-content` },

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

@@ -5,11 +5,9 @@ import ReactModal from 'react-modal';
 import styled, { createGlobalStyle, keyframes } from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
 import getElevationShadow from '../../utils/common.js';
-import { media } from '../../utils/styledUtils.js';
+import { getMultipliedSize } from '../../utils/styledUtils.js';
 import Box from '../Box/Box.js';
 import ButtonClose from '../ButtonClose/ButtonClose.js';
-import Floater from '../Floater/Floater.js';
-import Icon from '../Icon/Icon.js';
 
 const sizeMap = {
     small: '375px',
@@ -43,10 +41,10 @@ const StyledReactModal = styled(ReactModal) `
     position: fixed;
     top: 0;
     ${({ side }) => (side === 'left' ? 'left: 0' : 'right: 0')};
-    width: 100vw;
+    width: ${({ size }) => sizeMap[size]};
     height: 100dvh;
-    max-width: 100vw;
     max-height: 100%;
+    max-width: calc(100vw - ${getMultipliedSize(theme.base.baseWidth, 4)});
     transform: translateX(${({ side }) => side === 'left' && '-'}100%);
     animation: ${slideIn} ${({ size }) => animationMap[size][0]}s forwards;
 
@@ -54,9 +52,10 @@ const StyledReactModal = styled(ReactModal) `
         animation: ${({ side }) => slideOut(side)} ${({ size }) => animationMap[size][1]}s forwards;
     }
 
-    ${({ size }) => media.sm `
-        width: ${sizeMap[size]};
-    `};
+    @media (max-width: ${sizeMap.small}) {
+        max-width: 100vw;
+        width: 100vw;
+    }
 `;
 const StyledReactModalOverlay = styled.div `
     display: flex;
@@ -104,13 +103,16 @@ const StyledReactModalContent = styled.div `
 const StyledBox = styled(Box) `
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
     border-radius: 0;
     height: 100%;
-    overflow-y: auto;
     position: relative;
-    padding: 0;
-    border: 0 none;
+    border: 0;
+`;
+const ContentContainer = styled.div `
+    flex: 1 1 auto;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
 `;
 const Header = styled.div `
     display: flex;
@@ -130,6 +132,7 @@ const Header = styled.div `
 `;
 const Title = styled.h2 `
     font-size: ${({ size }) => (size === 'small' ? theme.fontSize.h2S : theme.fontSize.h2M)};
+    line-height: ${({ size }) => (size === 'small' ? theme.lineHeight.h2S : theme.lineHeight.h2M)};
     color: ${({ variant }) => variant === 'light' ? theme.color.default.black : theme.color.default.white};
 `;
 const Subtitle = styled.p `
@@ -138,7 +141,7 @@ const Subtitle = styled.p `
 `;
 const CloseButton = styled(ButtonClose) `
     margin: 0;
-    padding: 0.625rem;
+    padding: 0.5rem;
     border-radius: 0 0 0 ${theme.radius.default};
     background-color: ${({ variant }) => variant === 'light'
     ? theme.color.background.sand.E01
@@ -154,7 +157,6 @@ const Footer = styled.div `
     width: 100%;
     border-top: 1px solid ${theme.color.line.L04};
     background-color: ${theme.color.background.white.default};
-
     ${getElevationShadow({ elevation: 'high', shadow: '1 0 0 0' })};
 `;
 const ModalOverlay = ({ ref, onClick, onMouseDown, className }, contentElement) => (React__default.createElement(StyledReactModalOverlay, { ref: ref, onClick: onClick, onMouseDown: onMouseDown, className: className }, contentElement));
@@ -167,18 +169,17 @@ const Drawer = (_a) => {
     ReactModal.setAppElement(appElement);
     return (React__default.createElement(React__default.Fragment, null,
         React__default.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__default.createElement(StyledBox, { elevation: "extraHigh", margin: props.margin, "data-testid": dataTestId },
-                React__default.createElement("div", null,
-                    React__default.createElement(Floater, null, closeButton && isClosable && (React__default.createElement(CloseButton, { onClick: props.onRequestClose, "aria-label": props.closeLabel, "data-testid": dataTestId && `${dataTestId}-close-button`, variant: variant },
-                        React__default.createElement(Icon, { icon: Close, color: variant === 'light'
-                                ? theme.color.default.plum
-                                : theme.color.default.white })))),
+            React__default.createElement(StyledBox, { "data-testid": dataTestId, elevation: "extraHigh", margin: props.margin, padding: "0" },
+                React__default.createElement(ContentContainer, null,
                     React__default.createElement(Header, { variant: variant, "data-testid": dataTestId && `${dataTestId}-header` },
                         React__default.createElement(Title, { size: size, variant: variant }, props.title),
                         props.subtitle && (React__default.createElement(Subtitle, { size: size, variant: variant }, props.subtitle))),
+                    closeButton && isClosable && (React__default.createElement(CloseButton, { onClick: props.onRequestClose, "aria-label": props.closeLabel, "data-testid": dataTestId && `${dataTestId}-close-button`, variant: variant },
+                        React__default.createElement(Close, { color: variant === 'light'
+                                ? theme.color.default.plum
+                                : theme.color.default.white }))),
                     React__default.createElement(Content, { "data-testid": dataTestId && `${dataTestId}-content`, padding: padding }, props.children)),
-                props.footer && (React__default.createElement(Floater, { position: "bottom" },
-                    React__default.createElement(Footer, { "data-testid": dataTestId && `${dataTestId}-footer` }, props.footer))))),
+                props.footer && (React__default.createElement(Footer, { "data-testid": dataTestId && `${dataTestId}-footer` }, props.footer)))),
         React__default.createElement(GlobalStyle, null)));
 };
 

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@dnanpm/styleguide",
     "sideEffects": false,
-    "version": "v3.9.1",
+    "version": "v3.9.3",
     "main": "build/cjs/index.js",
     "module": "build/es/index.js",
     "jsnext:main": "build/es/index.js",