@dnanpm/styleguide 4.0.9 → 4.0.10

package/build/cjs/components/DnaLogo/DnaLogo.js

@@ -11,61 +11,97 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 const colorVariationsMap = {
-    default: {
-        background: '#FF007D',
-        text: '#FFFFFF',
-    },
-    white: {
-        background: '#FFFFFF',
-        text: '#FF007D',
-    },
-    'logotype-pink': {
-        text: '#FF007D',
-    },
-    'logotype-white': {
-        text: '#FFFFFF',
-    },
-    'logotype-black': {
-        text: '#000000',
-    },
+  default: {
+    background: '#FF007D',
+    text: '#FFFFFF'
+  },
+  white: {
+    background: '#FFFFFF',
+    text: '#FF007D'
+  },
+  'logotype-pink': {
+    text: '#FF007D'
+  },
+  'logotype-white': {
+    text: '#FFFFFF'
+  },
+  'logotype-black': {
+    text: '#000000'
+  }
 };
-const Container = styledComponents.styled.span `
-    display: inline-flex;
-    width: ${({ size }) => size};
-    height: ${({ size }) => size};
-    ${({ $margin }) => $margin && `margin: ${$margin}`};
-
-    svg {
-        width: ${({ size }) => size};
-        height: ${({ size }) => size};
-    }
-`;
-const Emblem = ({ type }) => {
-    const currentVariation = colorVariationsMap[type];
-    return (React__default.default.createElement("svg", { viewBox: "0 0 666.7 666.7" },
-        React__default.default.createElement("g", null,
-            React__default.default.createElement("path", { fill: currentVariation.background, d: "M0,0v666.7h666.7V0H0z" }),
-            React__default.default.createElement("path", { fill: currentVariation.text, d: "M403,451h-41.9V285.5c0-15.7-12.7-28.4-28.4-28.4h-29.4V451h-41.9V215.2h71.3c38.8,0,70.3,31.5,70.3,70.3V451z\n                " }),
-            React__default.default.createElement("path", { fill: currentVariation.text, d: "M226.4,286.2c0-39.2-31.8-71-71-71H84.9V451h70.6c39.2,0,71-31.8,71-71L226.4,286.2z M184.5,380.7\n                c0,15.7-12.8,28.5-28.5,28.5h-29.3v-152H156c15.7,0,28.5,12.8,28.5,28.5V380.7z" }),
-            React__default.default.createElement("path", { fill: currentVariation.text, d: "M511.5,213.6h-1c-38.8,0-70.3,31.5-70.3,70.3V451h41.9v-84.4h57.8V451h41.9V283.9\n                C581.8,245.2,550.3,213.6,511.5,213.6z M539.9,327.2h-57.8v-43.3c0-15.7,12.7-28.4,28.4-28.4h1c15.7,0,28.4,12.7,28.4,28.4V327.2z" }))));
+const Container = styledComponents.styled.span.withConfig({
+  displayName: "DnaLogo__Container",
+  componentId: "sc-1c7shtt-0"
+})(["display:inline-flex;width:", ";height:", ";", ";svg{width:", ";height:", ";}"], ({
+  size
+}) => size, ({
+  size
+}) => size, ({
+  $margin
+}) => $margin && `margin: ${$margin}`, ({
+  size
+}) => size, ({
+  size
+}) => size);
+const Emblem = ({
+  type
+}) => {
+  const currentVariation = colorVariationsMap[type];
+  return /*#__PURE__*/React__default.default.createElement("svg", {
+    viewBox: "0 0 666.7 666.7"
+  }, /*#__PURE__*/React__default.default.createElement("g", null, /*#__PURE__*/React__default.default.createElement("path", {
+    fill: currentVariation.background,
+    d: "M0,0v666.7h666.7V0H0z"
+  }), /*#__PURE__*/React__default.default.createElement("path", {
+    fill: currentVariation.text,
+    d: "M403,451h-41.9V285.5c0-15.7-12.7-28.4-28.4-28.4h-29.4V451h-41.9V215.2h71.3c38.8,0,70.3,31.5,70.3,70.3V451z\n                "
+  }), /*#__PURE__*/React__default.default.createElement("path", {
+    fill: currentVariation.text,
+    d: "M226.4,286.2c0-39.2-31.8-71-71-71H84.9V451h70.6c39.2,0,71-31.8,71-71L226.4,286.2z M184.5,380.7\n                c0,15.7-12.8,28.5-28.5,28.5h-29.3v-152H156c15.7,0,28.5,12.8,28.5,28.5V380.7z"
+  }), /*#__PURE__*/React__default.default.createElement("path", {
+    fill: currentVariation.text,
+    d: "M511.5,213.6h-1c-38.8,0-70.3,31.5-70.3,70.3V451h41.9v-84.4h57.8V451h41.9V283.9\n                C581.8,245.2,550.3,213.6,511.5,213.6z M539.9,327.2h-57.8v-43.3c0-15.7,12.7-28.4,28.4-28.4h1c15.7,0,28.4,12.7,28.4,28.4V327.2z"
+  })));
 };
-const Logotype = ({ type }) => {
-    const currentVariation = colorVariationsMap[type];
-    return (React__default.default.createElement("svg", { viewBox: "0 0 600 286.6" },
-        React__default.default.createElement("g", null,
-            React__default.default.createElement("path", { fill: currentVariation.text, d: "M299.3,3.3h-85.2v281.8h50.1V53.4h35.1c18.8,0,34,15.2,34,34v197.8h50.1V87.3C383.3,41,345.6,3.3,299.3,3.3z" }),
-            React__default.default.createElement("path", { fill: currentVariation.text, d: "M87.4,3.3H3v281.9h84.4c46.8,0,84.8-38,84.8-84.8l0-112.2C172.2,41.3,134.2,3.3,87.4,3.3z M122.1,201.1\n                    c0,18.8-15.3,34.1-34.1,34.1h-35V53.4h35c18.8,0,34.1,15.3,34.1,34.1L122.1,201.1z" }),
-            React__default.default.createElement("path", { fill: currentVariation.text, d: "M513,1.4h-1.2c-46.3,0-84,37.7-84,84v199.8h50.1V183.4l69.1,0v101.8H597V85.4C597,39.1,559.3,1.4,513,1.4z\n                    M546.9,137.2h-69.1V85.4c0-18.7,15.2-34,34-34h1.2c18.7,0,34,15.2,34,34V137.2z" }))));
+const Logotype = ({
+  type
+}) => {
+  const currentVariation = colorVariationsMap[type];
+  return /*#__PURE__*/React__default.default.createElement("svg", {
+    viewBox: "0 0 600 286.6"
+  }, /*#__PURE__*/React__default.default.createElement("g", null, /*#__PURE__*/React__default.default.createElement("path", {
+    fill: currentVariation.text,
+    d: "M299.3,3.3h-85.2v281.8h50.1V53.4h35.1c18.8,0,34,15.2,34,34v197.8h50.1V87.3C383.3,41,345.6,3.3,299.3,3.3z"
+  }), /*#__PURE__*/React__default.default.createElement("path", {
+    fill: currentVariation.text,
+    d: "M87.4,3.3H3v281.9h84.4c46.8,0,84.8-38,84.8-84.8l0-112.2C172.2,41.3,134.2,3.3,87.4,3.3z M122.1,201.1\n                    c0,18.8-15.3,34.1-34.1,34.1h-35V53.4h35c18.8,0,34.1,15.3,34.1,34.1L122.1,201.1z"
+  }), /*#__PURE__*/React__default.default.createElement("path", {
+    fill: currentVariation.text,
+    d: "M513,1.4h-1.2c-46.3,0-84,37.7-84,84v199.8h50.1V183.4l69.1,0v101.8H597V85.4C597,39.1,559.3,1.4,513,1.4z\n                    M546.9,137.2h-69.1V85.4c0-18.7,15.2-34,34-34h1.2c18.7,0,34,15.2,34,34V137.2z"
+  })));
 };
 /** @visibleName DNA Logo */
-const DnaLogo = (_a) => {
-    var { type = 'default', size = '2rem' } = _a, props = tslib.__rest(_a, ["type", "size"]);
-    let margin = null;
-    if (props.protectedArea) {
-        const matches = /(\d+)(.+)/.exec(size);
-        margin = matches && `${Number(matches[1]) * 0.25}${matches[2]}`;
-    }
-    return (React__default.default.createElement(Container, { size: size, "$margin": margin, className: props.className, onClick: props.onClick }, type.indexOf('logotype') === -1 ? React__default.default.createElement(Emblem, { type: type }) : React__default.default.createElement(Logotype, { type: type })));
+const DnaLogo = _a => {
+  var {
+      type = 'default',
+      size = '2rem'
+    } = _a,
+    props = tslib.__rest(_a, ["type", "size"]);
+  let margin = null;
+  if (props.protectedArea) {
+    const matches = /(\d+)(.+)/.exec(size);
+    margin = matches && `${Number(matches[1]) * 0.25}${matches[2]}`;
+  }
+  return /*#__PURE__*/React__default.default.createElement(Container, {
+    size: size,
+    "$margin": margin,
+    className: props.className,
+    onClick: props.onClick
+  }, type.indexOf('logotype') === -1 ? /*#__PURE__*/React__default.default.createElement(Emblem, {
+    type: type
+  }) : /*#__PURE__*/React__default.default.createElement(Logotype, {
+    type: type
+  }));
 };
 
 exports.default = DnaLogo;

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

@@ -19,178 +19,183 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var ReactModal__default = /*#__PURE__*/_interopDefaultCompat(ReactModal);
 
 const sizeMap = {
-    small: '375px',
-    medium: '768px',
-    large: '1080px',
+  small: '375px',
+  medium: '768px',
+  large: '1080px'
 };
 const animationMap = {
-    small: ['0.4', '0.2'],
-    medium: ['0.5', '0.3'],
-    large: ['0.6', '0.4'],
+  small: ['0.4', '0.2'],
+  medium: ['0.5', '0.3'],
+  large: ['0.6', '0.4']
 };
-const GlobalStyle = styledComponents.createGlobalStyle `
-    body.ReactModal__Body--open {
-        overflow: hidden;
-    }
-`;
-const slideOut = (side) => styledComponents.keyframes `
-    0% {
-        transform: translateX(0%);
-    }
-    100% {
-        transform: translateX(${side === 'left' && '-'}100%);
-    }
-`;
-const slideIn = styledComponents.keyframes `
-    100% {
-        transform: translateX(0%);
-    }
-`;
-const StyledReactModal = styledComponents.styled(ReactModal__default.default) `
-    position: fixed;
-    top: 0;
-    ${({ $side }) => ($side === 'left' ? 'left: 0' : 'right: 0')};
-    width: ${({ $size }) => sizeMap[$size]};
-    height: 100dvh;
-    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;
-
-    &.ReactModal__Content--before-close {
-        animation: ${({ $side }) => slideOut($side)} ${({ $size }) => animationMap[$size][1]}s
-            forwards;
-    }
-
-    @media (max-width: ${sizeMap.small}) {
-        max-width: 100vw;
-        width: 100vw;
-    }
-`;
-const StyledReactModalOverlay = styledComponents.styled.div `
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 9999;
-    background-color: ${theme.default.color.background.plum.default}${theme.default.color.transparency.T40};
-    animation: fadeIn 0.2s ease-in-out;
-
-    &.ReactModal__Overlay--before-close {
-        animation: fadeOut 0.2s ease-in-out;
-        animation-delay: 0.1s;
-    }
-
-    @keyframes fadeIn {
-        0% {
-            background-color: ${theme.default.color.background.plum.default}${theme.default.color.transparency.T0};
-        }
-
-        100% {
-            background-color: ${theme.default.color.background.plum.default}${theme.default.color.transparency.T40};
-        }
-    }
-
-    @keyframes fadeOut {
-        0% {
-            background-color: ${theme.default.color.background.plum.default}${theme.default.color.transparency.T40};
-        }
-
-        100% {
-            background-color: ${theme.default.color.background.plum.default}${theme.default.color.transparency.T0};
-        }
-    }
-`;
-const StyledReactModalContent = styledComponents.styled.div `
-    &:focus {
-        outline: none;
-    }
-`;
-const StyledBox = styledComponents.styled(Box.default) `
-    display: flex;
-    flex-direction: column;
-    border-radius: 0;
-    height: 100%;
-    position: relative;
-    border: 0;
-`;
-const ContentContainer = styledComponents.styled.div `
-    flex: 1 1 auto;
-    overflow: auto;
-    display: flex;
-    flex-direction: column;
-`;
-const Header = styledComponents.styled.div `
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-    border-bottom: 1px solid ${theme.default.color.line.L03};
-    padding: 1.25rem;
-    background-color: ${({ $variant }) => $variant === 'light'
-    ? theme.default.color.background.white.default
-    : theme.default.color.background.plum.E02};
-    width: 100%;
-
-    h2,
-    p {
-        margin: 0;
-    }
-`;
-const Title = styledComponents.styled.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 = styledComponents.styled.p `
-    font-size: ${({ $size }) => ($size === 'small' ? theme.default.fontSize.l : theme.default.fontSize.xl)};
-    color: ${({ $variant }) => $variant === 'light' ? theme.default.color.default.black : theme.default.color.default.white};
-`;
-const CloseButton = styledComponents.styled(ButtonClose.default) `
-    margin: 0;
-    padding: 0.5rem;
-    border-radius: 0 0 0 ${theme.default.radius.default};
-    background-color: ${({ $variant }) => $variant === 'light'
-    ? theme.default.color.background.sand.E01
-    : theme.default.color.background.plum.default};
-`;
-const Content = styledComponents.styled.div `
-    padding: ${({ $padding }) => $padding};
-    margin: 0;
-`;
-const Footer = styledComponents.styled.div `
-    padding: 1.25rem;
-    margin: 0;
-    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));
+const GlobalStyle = styledComponents.createGlobalStyle(["body.ReactModal__Body--open{overflow:hidden;}"]);
+const slideOut = side => styledComponents.keyframes(["0%{transform:translateX(0%);}100%{transform:translateX(", "100%);}"], side === 'left' && '-');
+const slideIn = styledComponents.keyframes(["100%{transform:translateX(0%);}"]);
+const StyledReactModal = styledComponents.styled(ReactModal__default.default).withConfig({
+  displayName: "Drawer__StyledReactModal",
+  componentId: "sc-lxk2c6-0"
+})(["position:fixed;top:0;", ";width:", ";height:100dvh;max-height:100%;max-width:calc(100vw - ", ");transform:translateX(", "100%);animation:", " ", "s forwards;&.ReactModal__Content--before-close{animation:", " ", "s forwards;}@media (max-width:", "){max-width:100vw;width:100vw;}"], ({
+  $side
+}) => $side === 'left' ? 'left: 0' : 'right: 0', ({
+  $size
+}) => sizeMap[$size], styledUtils.getMultipliedSize(theme.default.base.baseWidth, 4), ({
+  $side
+}) => $side === 'left' && '-', slideIn, ({
+  $size
+}) => animationMap[$size][0], ({
+  $side
+}) => slideOut($side), ({
+  $size
+}) => animationMap[$size][1], sizeMap.small);
+const StyledReactModalOverlay = styledComponents.styled.div.withConfig({
+  displayName: "Drawer__StyledReactModalOverlay",
+  componentId: "sc-lxk2c6-1"
+})(["display:flex;justify-content:center;align-items:center;position:fixed;top:0;bottom:0;left:0;right:0;z-index:9999;background-color:", "", ";animation:fadeIn 0.2s ease-in-out;&.ReactModal__Overlay--before-close{animation:fadeOut 0.2s ease-in-out;animation-delay:0.1s;}@keyframes fadeIn{0%{background-color:", "", ";}100%{background-color:", "", ";}}@keyframes fadeOut{0%{background-color:", "", ";}100%{background-color:", "", ";}}"], theme.default.color.background.plum.default, theme.default.color.transparency.T40, theme.default.color.background.plum.default, theme.default.color.transparency.T0, theme.default.color.background.plum.default, theme.default.color.transparency.T40, theme.default.color.background.plum.default, theme.default.color.transparency.T40, theme.default.color.background.plum.default, theme.default.color.transparency.T0);
+const StyledReactModalContent = styledComponents.styled.div.withConfig({
+  displayName: "Drawer__StyledReactModalContent",
+  componentId: "sc-lxk2c6-2"
+})(["&:focus{outline:none;}"]);
+const StyledBox = styledComponents.styled(Box.default).withConfig({
+  displayName: "Drawer__StyledBox",
+  componentId: "sc-lxk2c6-3"
+})(["display:flex;flex-direction:column;border-radius:0;height:100%;position:relative;border:0;"]);
+const ContentContainer = styledComponents.styled.div.withConfig({
+  displayName: "Drawer__ContentContainer",
+  componentId: "sc-lxk2c6-4"
+})(["flex:1 1 auto;overflow:auto;display:flex;flex-direction:column;"]);
+const Header = styledComponents.styled.div.withConfig({
+  displayName: "Drawer__Header",
+  componentId: "sc-lxk2c6-5"
+})(["display:flex;flex-direction:column;gap:0.25rem;border-bottom:1px solid ", ";padding:1.25rem;background-color:", ";width:100%;h2,p{margin:0;}"], theme.default.color.line.L03, ({
+  $variant
+}) => $variant === 'light' ? theme.default.color.background.white.default : theme.default.color.background.plum.E02);
+const Title = styledComponents.styled.h2.withConfig({
+  displayName: "Drawer__Title",
+  componentId: "sc-lxk2c6-6"
+})(["font-size:", ";line-height:", ";color:", ";"], ({
+  $size
+}) => $size === 'small' ? theme.default.fontSize.h2S : theme.default.fontSize.h2M, ({
+  $size
+}) => $size === 'small' ? theme.default.lineHeight.h2S : theme.default.lineHeight.h2M, ({
+  $variant
+}) => $variant === 'light' ? theme.default.color.default.black : theme.default.color.default.white);
+const Subtitle = styledComponents.styled.p.withConfig({
+  displayName: "Drawer__Subtitle",
+  componentId: "sc-lxk2c6-7"
+})(["font-size:", ";color:", ";"], ({
+  $size
+}) => $size === 'small' ? theme.default.fontSize.l : theme.default.fontSize.xl, ({
+  $variant
+}) => $variant === 'light' ? theme.default.color.default.black : theme.default.color.default.white);
+const CloseButton = styledComponents.styled(ButtonClose.default).withConfig({
+  displayName: "Drawer__CloseButton",
+  componentId: "sc-lxk2c6-8"
+})(["margin:0;padding:0.5rem;border-radius:0 0 0 ", ";background-color:", ";"], theme.default.radius.default, ({
+  $variant
+}) => $variant === 'light' ? theme.default.color.background.sand.E01 : theme.default.color.background.plum.default);
+const Content = styledComponents.styled.div.withConfig({
+  displayName: "Drawer__Content",
+  componentId: "sc-lxk2c6-9"
+})(["padding:", ";margin:0;"], ({
+  $padding
+}) => $padding);
+const Footer = styledComponents.styled.div.withConfig({
+  displayName: "Drawer__Footer",
+  componentId: "sc-lxk2c6-10"
+})(["padding:1.25rem;margin:0;width:100%;border-top:1px solid ", ";background-color:", ";", ";"], theme.default.color.line.L04, theme.default.color.background.white.default, common.default({
+  elevation: 'high',
+  shadow: '1 0 0 0'
+}));
+const ModalOverlay = ({
+  ref,
+  onClick,
+  onMouseDown,
+  className
+}, contentElement) => (/*#__PURE__*/React__default.default.createElement(StyledReactModalOverlay, {
+  ref: ref,
+  onClick: onClick,
+  onMouseDown: onMouseDown,
+  className: className
+}, contentElement));
 const ModalContent = (_a, children) => {
-    var { id, ref, tabIndex, role, onKeyDown, onMouseDown, onMouseUp, onClick, className } = _a, contentProps = tslib.__rest(_a, ["id", "ref", "tabIndex", "role", "onKeyDown", "onMouseDown", "onMouseUp", "onClick", "className"]);
-    return (React__default.default.createElement(StyledReactModalContent, { id: id, ref: ref, tabIndex: tabIndex, role: role, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onClick: onClick, "aria-label": contentProps['aria-label'], "aria-modal": contentProps['aria-modal'], className: className }, children));
+  var {
+      id,
+      ref,
+      tabIndex,
+      role,
+      onKeyDown,
+      onMouseDown,
+      onMouseUp,
+      onClick,
+      className
+    } = _a,
+    contentProps = tslib.__rest(_a, ["id", "ref", "tabIndex", "role", "onKeyDown", "onMouseDown", "onMouseUp", "onClick", "className"]);
+  return /*#__PURE__*/React__default.default.createElement(StyledReactModalContent, {
+    id: id,
+    ref: ref,
+    tabIndex: tabIndex,
+    role: role,
+    onKeyDown: onKeyDown,
+    onMouseDown: onMouseDown,
+    onMouseUp: onMouseUp,
+    onClick: onClick,
+    "aria-label": contentProps['aria-label'],
+    "aria-modal": contentProps['aria-modal'],
+    className: className
+  }, children);
 };
-const Drawer = (_a) => {
-    var { appElement = '#__next', size = 'medium', side = 'right', variant = 'light', padding = '1.25rem', closeButton = true, isClosable = true, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["appElement", "size", "side", "variant", "padding", "closeButton", "isClosable", 'data-testid']);
-    ReactModal__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, { "data-testid": dataTestId, elevation: "extraHigh", padding: "0" },
-                React__default.default.createElement(ContentContainer, null,
-                    (props.title || props.subtitle) && (React__default.default.createElement(Header, { "$variant": variant, "data-testid": dataTestId && `${dataTestId}-header` },
-                        props.title && (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(Footer, { "data-testid": dataTestId && `${dataTestId}-footer` }, props.footer)))),
-        React__default.default.createElement(GlobalStyle, null)));
+const Drawer = _a => {
+  var {
+      appElement = '#__next',
+      size = 'medium',
+      side = 'right',
+      variant = 'light',
+      padding = '1.25rem',
+      closeButton = true,
+      isClosable = true,
+      'data-testid': dataTestId
+    } = _a,
+    props = tslib.__rest(_a, ["appElement", "size", "side", "variant", "padding", "closeButton", "isClosable", 'data-testid']);
+  ReactModal__default.default.setAppElement(appElement);
+  return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/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
+  }, /*#__PURE__*/React__default.default.createElement(StyledBox, {
+    "data-testid": dataTestId,
+    elevation: "extraHigh",
+    padding: "0"
+  }, /*#__PURE__*/React__default.default.createElement(ContentContainer, null, (props.title || props.subtitle) && (/*#__PURE__*/React__default.default.createElement(Header, {
+    "$variant": variant,
+    "data-testid": dataTestId && `${dataTestId}-header`
+  }, props.title && (/*#__PURE__*/React__default.default.createElement(Title, {
+    "$size": size,
+    "$variant": variant
+  }, props.title)), props.subtitle && (/*#__PURE__*/React__default.default.createElement(Subtitle, {
+    "$size": size,
+    "$variant": variant
+  }, props.subtitle)))), closeButton && isClosable && (/*#__PURE__*/React__default.default.createElement(CloseButton, {
+    onClick: props.onRequestClose,
+    "aria-label": props.closeLabel,
+    "data-testid": dataTestId && `${dataTestId}-close-button`,
+    "$variant": variant
+  }, /*#__PURE__*/React__default.default.createElement(icons.Close, {
+    color: variant === 'light' ? theme.default.color.default.plum : theme.default.color.default.white
+  }))), /*#__PURE__*/React__default.default.createElement(Content, {
+    "data-testid": dataTestId && `${dataTestId}-content`,
+    "$padding": padding
+  }, props.children)), props.footer && (/*#__PURE__*/React__default.default.createElement(Footer, {
+    "data-testid": dataTestId && `${dataTestId}-footer`
+  }, props.footer)))), /*#__PURE__*/React__default.default.createElement(GlobalStyle, null));
 };
 
 exports.default = Drawer;

package/build/cjs/components/EmptyState/EmptyState.js

@@ -15,19 +15,31 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const ContentWrapper = styledComponents.styled.div `
-    display: grid;
-    grid-gap: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
-    justify-items: center;
-    line-height: ${theme.default.lineHeight.default};
-`;
+const ContentWrapper = styledComponents.styled.div.withConfig({
+  displayName: "EmptyState__ContentWrapper",
+  componentId: "sc-14ype0e-0"
+})(["display:grid;grid-gap:", ";justify-items:center;line-height:", ";"], styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2), theme.default.lineHeight.default);
 /** @visibleName Empty State */
-const EmptyState = (_a) => {
-    var { icon = icons.Info, iconSize = '2rem', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["icon", "iconSize", 'data-testid']);
-    return (React__default.default.createElement(Box.default, { id: props.id, padding: "1.875rem", className: props.className, "data-testid": dataTestId, role: "region", ariaLabel: props.ariaLabel },
-        React__default.default.createElement(ContentWrapper, null,
-            React__default.default.createElement(Icon.default, { icon: icon, size: iconSize, color: theme.default.color.default.pink, "aria-hidden": true }),
-            React__default.default.createElement("div", null, props.children))));
+const EmptyState = _a => {
+  var {
+      icon = icons.Info,
+      iconSize = '2rem',
+      'data-testid': dataTestId
+    } = _a,
+    props = tslib.__rest(_a, ["icon", "iconSize", 'data-testid']);
+  return /*#__PURE__*/React__default.default.createElement(Box.default, {
+    id: props.id,
+    padding: "1.875rem",
+    className: props.className,
+    "data-testid": dataTestId,
+    role: "region",
+    ariaLabel: props.ariaLabel
+  }, /*#__PURE__*/React__default.default.createElement(ContentWrapper, null, /*#__PURE__*/React__default.default.createElement(Icon.default, {
+    icon: icon,
+    size: iconSize,
+    color: theme.default.color.default.pink,
+    "aria-hidden": true
+  }), /*#__PURE__*/React__default.default.createElement("div", null, props.children)));
 };
 
 exports.default = EmptyState;