@dnanpm/styleguide 3.8.1 → 3.8.3

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

@@ -8,17 +8,12 @@ var React = require('react');
 var ReactModal = require('react-modal');
 var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
+var common = require('../../utils/common.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var Box = require('../Box/Box.js');
-var ButtonClose = require('../Button/ButtonClose.js');
-var Icon = require('../Icon/Icon.js');
-var common = require('../../utils/common.js');
+var ButtonClose = require('../ButtonClose/ButtonClose.js');
 var Floater = require('../Floater/Floater.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var ReactModal__default = /*#__PURE__*/_interopDefaultLegacy(ReactModal);
+var Icon = require('../Icon/Icon.js');
 
 const sizeMap = {
     small: '375px',
@@ -30,7 +25,7 @@ const GlobalStyle = styled.createGlobalStyle `
         overflow: hidden;
     }
 `;
-const StyledReactModal = styled["default"](ReactModal__default["default"]) `
+const StyledReactModal = styled.default(ReactModal) `
     position: fixed;
     top: 0;
     right: 0;
@@ -65,7 +60,7 @@ const StyledReactModal = styled["default"](ReactModal__default["default"]) `
         width: ${sizeMap[size]};
     `};
 `;
-const StyledReactModalOverlay = styled["default"].div `
+const StyledReactModalOverlay = styled.default.div `
     display: flex;
     justify-content: center;
     align-items: center;
@@ -75,7 +70,7 @@ const StyledReactModalOverlay = styled["default"].div `
     left: 0;
     right: 0;
     z-index: 9999;
-    background-color: ${theme["default"].color.background.plum.default}${theme["default"].color.transparency.T40};
+    background-color: ${theme.default.color.background.plum.default}${theme.default.color.transparency.T40};
     animation: fadeIn 0.2s ease-in-out;
 
     &.ReactModal__Overlay--before-close {
@@ -85,30 +80,30 @@ const StyledReactModalOverlay = styled["default"].div `
 
     @keyframes fadeIn {
         0% {
-            background-color: ${theme["default"].color.background.plum.default}${theme["default"].color.transparency.T0};
+            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};
+            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};
+            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};
+            background-color: ${theme.default.color.background.plum.default}${theme.default.color.transparency.T0};
         }
     }
 `;
-const StyledReactModalContent = styled["default"].div `
+const StyledReactModalContent = styled.default.div `
     &:focus {
         outline: none;
     }
 `;
-const StyledBox = styled["default"](Box["default"]) `
+const StyledBox = styled.default(Box.default) `
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -119,15 +114,15 @@ const StyledBox = styled["default"](Box["default"]) `
     padding: 0;
     border: 0 none;
 `;
-const Header = styled["default"].div `
+const Header = styled.default.div `
     display: flex;
     flex-direction: column;
     gap: 0.25rem;
-    border-bottom: 1px solid ${theme["default"].color.line.L03};
+    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};
+    ? theme.default.color.background.white.default
+    : theme.default.color.background.plum.E02};
     width: 100%;
 
     h2,
@@ -135,58 +130,58 @@ const Header = styled["default"].div `
         margin: 0;
     }
 `;
-const Title = styled["default"].h2 `
-    font-size: ${({ size }) => (size === 'small' ? theme["default"].fontSize.h2S : theme["default"].fontSize.h2M)};
-    color: ${({ variant }) => variant === 'light' ? theme["default"].color.default.black : theme["default"].color.default.white};
+const Title = styled.default.h2 `
+    font-size: ${({ size }) => (size === 'small' ? theme.default.fontSize.h2S : theme.default.fontSize.h2M)};
+    color: ${({ variant }) => variant === 'light' ? theme.default.color.default.black : theme.default.color.default.white};
 `;
-const Subtitle = styled["default"].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 Subtitle = styled.default.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 = styled["default"](ButtonClose["default"]) `
+const CloseButton = styled.default(ButtonClose.default) `
     margin: 0;
     padding: 0.625rem;
-    border-radius: 0 0 0 ${theme["default"].radius.default};
+    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};
+    ? theme.default.color.background.sand.E01
+    : theme.default.color.background.plum.default};
 `;
-const Content = styled["default"].div `
+const Content = styled.default.div `
     padding: ${({ padding }) => padding};
     margin: 0;
 `;
-const Footer = styled["default"].div `
+const Footer = styled.default.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};
+    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' })};
+    ${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 ModalOverlay = ({ ref, onClick, onMouseDown, className }, contentElement) => (React.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));
+    return (React.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', variant = 'light', padding = '1.25rem', closeButton = true, isClosable = true, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["appElement", "size", "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 },
-            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(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))),
-                    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))))),
-        React__default["default"].createElement(GlobalStyle, null)));
+    ReactModal.setAppElement(appElement);
+    return (React.createElement(React.Fragment, null,
+        React.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 },
+            React.createElement(StyledBox, { elevation: "extraHigh", margin: props.margin, "data-testid": dataTestId },
+                React.createElement("div", null,
+                    React.createElement(Floater.default, null, closeButton && isClosable && (React.createElement(CloseButton, { onClick: props.onRequestClose, "aria-label": props.closeLabel, "data-testid": dataTestId && `${dataTestId}-close-button`, variant: variant },
+                        React.createElement(Icon.default, { icon: icons.Close, color: variant === 'light'
+                                ? theme.default.color.default.plum
+                                : theme.default.color.default.white })))),
+                    React.createElement(Header, { variant: variant, "data-testid": dataTestId && `${dataTestId}-header` },
+                        React.createElement(Title, { size: size, variant: variant }, props.title),
+                        props.subtitle && (React.createElement(Subtitle, { size: size, variant: variant }, props.subtitle))),
+                    React.createElement(Content, { "data-testid": dataTestId && `${dataTestId}-content`, padding: padding }, props.children)),
+                props.footer && (React.createElement(Floater.default, { position: "bottom" },
+                    React.createElement(Footer, { "data-testid": dataTestId && `${dataTestId}-footer` }, props.footer))))),
+        React.createElement(GlobalStyle, null)));
 };
 
-exports["default"] = Drawer;
+exports.default = Drawer;

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

@@ -11,23 +11,19 @@ var styledUtils = require('../../utils/styledUtils.js');
 var Box = require('../Box/Box.js');
 var Icon = require('../Icon/Icon.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-const ContentWrapper = styled["default"].div `
+const ContentWrapper = styled.default.div `
     display: grid;
-    grid-gap: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2)};
+    grid-gap: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
     justify-items: center;
-    line-height: ${theme["default"].lineHeight.default};
+    line-height: ${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 },
-        React__default["default"].createElement(ContentWrapper, null,
-            React__default["default"].createElement(Icon["default"], { icon: icon, size: iconSize, color: theme["default"].color.default.pink }),
-            React__default["default"].createElement("div", null, props.children))));
+    return (React.createElement(Box.default, { id: props.id, padding: "1.875rem", className: props.className, "data-testid": dataTestId },
+        React.createElement(ContentWrapper, null,
+            React.createElement(Icon.default, { icon: icon, size: iconSize, color: theme.default.color.default.pink }),
+            React.createElement("div", null, props.children))));
 };
 
-exports["default"] = EmptyState;
+exports.default = EmptyState;

package/build/cjs/components/Expander/Expander.js

@@ -7,44 +7,40 @@ var icons = require('@dnanpm/icons');
 var React = require('react');
 var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
-var ButtonIcon = require('../Button/ButtonIcon.js');
+var ButtonIcon = require('../ButtonIcon/ButtonIcon.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-const Container = styled["default"].div `
+const Container = styled.default.div `
     display: flex;
     flex-direction: column;
 `;
-const StyledButtonIcon = styled["default"](ButtonIcon["default"]) `
-    color: ${theme["default"].color.text.pink};
+const StyledButtonIcon = styled.default(ButtonIcon.default) `
+    color: ${theme.default.color.text.pink};
     align-self: flex-end;
 
     &:hover {
-        color: ${theme["default"].color.hover.pink};
+        color: ${theme.default.color.hover.pink};
         text-decoration: none;
     }
 
     &:active {
-        color: ${theme["default"].color.text.pink};
+        color: ${theme.default.color.text.pink};
     }
 `;
-const ContentWrapper = styled["default"].div `
+const ContentWrapper = styled.default.div `
     display: flex;
     flex-direction: column;
     margin: 0.625rem 0;
 `;
-const Content = styled["default"].div `
+const Content = styled.default.div `
     padding: 0.625rem 0;
 `;
 const Expander = (_a) => {
     var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
-    return (React__default["default"].createElement(Container, { id: props.id, className: props.className, "data-testid": dataTestId },
-        React__default["default"].createElement(StyledButtonIcon, { icon: props.isExpanded ? icons.ChevronUp : icons.ChevronDown, onClick: props.onClick, isReversed: true }, props.buttonLabel),
-        props.isExpanded && (React__default["default"].createElement(ContentWrapper, null,
-            React__default["default"].createElement(Content, { "data-testid": dataTestId && `${dataTestId}-content` }, props.children),
-            props.closeButtonLabel && (React__default["default"].createElement(StyledButtonIcon, { icon: icons.Close, onClick: props.onClick, "data-testid": dataTestId && `${dataTestId}-close-button` }, props.closeButtonLabel))))));
+    return (React.createElement(Container, { id: props.id, className: props.className, "data-testid": dataTestId },
+        React.createElement(StyledButtonIcon, { icon: props.isExpanded ? icons.ChevronUp : icons.ChevronDown, onClick: props.onClick, isReversed: true }, props.buttonLabel),
+        props.isExpanded && (React.createElement(ContentWrapper, null,
+            React.createElement(Content, { "data-testid": dataTestId && `${dataTestId}-content` }, props.children),
+            props.closeButtonLabel && (React.createElement(StyledButtonIcon, { icon: icons.Close, onClick: props.onClick, "data-testid": dataTestId && `${dataTestId}-close-button` }, props.closeButtonLabel))))));
 };
 
-exports["default"] = Expander;
+exports.default = Expander;

package/build/cjs/components/Floater/Floater.js

@@ -6,11 +6,6 @@ var tslib = require('tslib');
 var React = require('react');
 var styled = require('styled-components');
 
-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 getInset = ({ position, offset }) => {
     const insetConfig = {
         top: [offset, 'auto', 'auto'],
@@ -18,14 +13,14 @@ const getInset = ({ position, offset }) => {
     };
     return `inset: ${insetConfig[position].join(' ')};`;
 };
-const Element = styled__default["default"].div `
+const Element = styled.div `
     position: sticky;
     ${({ zIndex }) => zIndex && `z-index: ${zIndex}`};
     ${({ position, offset }) => getInset({ position, offset })}
 `;
 const Floater = (_a) => {
     var { position = 'top', offset = '0', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["position", "offset", 'data-testid']);
-    return (React__default["default"].createElement(Element, { id: props.id, position: position, offset: offset, zIndex: props.zIndex, className: props.className, "data-testid": dataTestId }, props.children));
+    return (React.createElement(Element, { id: props.id, position: position, offset: offset, zIndex: props.zIndex, className: props.className, "data-testid": dataTestId }, props.children));
 };
 
-exports["default"] = Floater;
+exports.default = Floater;

package/build/cjs/components/Footer/Components/FooterComponents.js

@@ -1,29 +1,23 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var icons = require('@dnanpm/icons');
 var React = require('react');
 var styled = require('../../../themes/styled.js');
 var theme = require('../../../themes/theme.js');
 var styledUtils = require('../../../utils/styledUtils.js');
-var ButtonIcon = require('../../Button/ButtonIcon.js');
+var ButtonIcon = require('../../ButtonIcon/ButtonIcon.js');
 var Icon = require('../../Icon/Icon.js');
 var FooterContext = require('../context/FooterContext.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
 /* eslint-disable react/no-array-index-key */
-const LinksListEl = styled["default"].li `
+const LinksListEl = styled.default.li `
     a {
-        line-height: ${theme["default"].lineHeight.default};
-        color: ${theme["default"].color.default.white};
+        line-height: ${theme.default.lineHeight.default};
+        color: ${theme.default.color.default.white};
         &:hover,
         &:focus,
         &:active {
-            color: ${theme["default"].color.text.white + theme["default"].color.transparency.T80};
+            color: ${theme.default.color.text.white + theme.default.color.transparency.T80};
         }
     }
     button,
@@ -31,43 +25,43 @@ const LinksListEl = styled["default"].li `
         border: 0;
     }
 `;
-const BasicContainer = styled["default"].div `
-    padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 2)};
+const BasicContainer = styled.default.div `
+    padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)};
     display: grid;
-    gap: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 2)};
+    gap: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)};
     grid-template-columns: repeat(1, minmax(0, 1fr));
 
     @media (min-width: ${({ collapseSize }) => collapseSize + 1}px) {
         grid-template-columns: repeat(3, minmax(0, 1fr));
-        padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 4)} ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2)};
-        gap: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 4)};
+        padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 4)} ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
+        gap: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 4)};
     }
 `;
-const CategoryLinks = styled["default"].ul `
+const CategoryLinks = styled.default.ul `
     display: ${({ active }) => (active ? 'block' : 'none')};
     transition: all 0.3s ease-in-out, padding 0s linear ${({ active }) => (active ? '0s' : '0.3s')};
     max-height: ${({ active }) => (active ? '500' : '0')}px;
-    margin-top: -${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.5)};
-    margin-bottom: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1)};
+    margin-top: -${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.5)};
+    margin-bottom: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1)};
     padding: 0;
 `;
-const CategoryHeader = styled["default"].button `
+const CategoryHeader = styled.default.button `
     display: flex;
     width: 100%;
     align-items: center;
-    padding: 0 0 ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2)} 0;
+    padding: 0 0 ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)} 0;
     border: 0;
-    font-size: ${theme["default"].fontSize.default};
-    font-family: ${theme["default"].fontFamily.default};
-    font-weight: ${theme["default"].fontWeight.bold};
-    line-height: ${theme["default"].lineHeight.default};
-    color: ${theme["default"].color.text.white};
+    font-size: ${theme.default.fontSize.default};
+    font-family: ${theme.default.fontFamily.default};
+    font-weight: ${theme.default.fontWeight.bold};
+    line-height: ${theme.default.lineHeight.default};
+    color: ${theme.default.color.text.white};
     background: transparent;
     align-content: center;
 `;
-const CategoryWrapper = styled["default"].div `
+const CategoryWrapper = styled.default.div `
     @media (max-width: ${({ collapseSize }) => collapseSize}px) {
-        margin: 0 -${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2)};
+        margin: 0 -${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
     }
 
     @media (min-width: ${({ collapseSize }) => collapseSize + 1}px) {
@@ -80,17 +74,17 @@ const CategoryWrapper = styled["default"].div `
     }
 
     span.dnasg-icon {
-        margin-right: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 0.5)};
+        margin-right: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 0.5)};
         svg {
             transition: transform 0.2s ease-in;
             transform: ${({ active }) => (active && 'rotate(180deg)') || 'rotate(0deg)'};
         }
     }
 `;
-const CategoryContainer = styled["default"](BasicContainer) `
+const CategoryContainer = styled.default(BasicContainer) `
     @media (max-width: ${({ collapseSize }) => collapseSize}px) {
         gap: 0;
-        padding-top: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1)};
+        padding-top: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1)};
     }
 
     ${({ collapseSize }) => `
@@ -98,7 +92,7 @@ const CategoryContainer = styled["default"](BasicContainer) `
             ${CategoryLinks} {
                 display: flex;
                 flex-direction: column;
-                gap: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1)};
+                gap: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1)};
             }
         }
         ${LinksListEl} {
@@ -115,46 +109,46 @@ const CategoryContainer = styled["default"](BasicContainer) `
             }
         }
         ${CategoryHeader} {
-            font-size: ${theme["default"].fontSize.h4};
+            font-size: ${theme.default.fontSize.h4};
         }
         @media (max-width: ${collapseSize}px) {
             > div {
-                border-bottom: 1px solid ${theme["default"].color.default.white};
+                border-bottom: 1px solid ${theme.default.color.default.white};
             }
             ${CategoryHeader} {
                 justify-content: space-between;
-                font-size: ${theme["default"].fontSize.h4};
-                padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 2.7)} ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2)} ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 2.2)} ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2)};
+                font-size: ${theme.default.fontSize.h4};
+                padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2.7)} ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)} ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2.2)} ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
                 &:hover {
                     cursor: pointer;
                 }
             }
             ${LinksListEl} {
-                padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.5)}
-                        ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 2)};
+                padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.5)}
+                        ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)};
             }
         }
     `}
 `;
-const SocialMediaLinksContainer = styled["default"].div `
+const SocialMediaLinksContainer = styled.default.div `
     white-space: nowrap;
     text-align: center;
     a {
         display: inline-block;
-        margin: 0 ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
+        margin: 0 ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
     }
 `;
-const GeneralInformationContainer = styled["default"].div `
+const GeneralInformationContainer = styled.default.div `
     text-align: center;
     display: flex;
-    gap: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1.5)};
+    gap: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1.5)};
     flex-wrap: wrap;
     justify-content: center;
 `;
-const GeneralInformationLink = styled["default"].a `
+const GeneralInformationLink = styled.default.a `
     &:after {
         content: '|';
-        padding-left: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1.5)};
+        padding-left: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1.5)};
     }
     &:hover,
     &:active,
@@ -179,32 +173,32 @@ const mapCorporateSelector = (languagesObject) => Object.keys(languagesObject.ur
     url: languagesObject.urls[e],
 }));
 const TopSection = ({ topSection }) => {
-    const { collapseSize, language } = React.useContext(FooterContext["default"]);
-    return (React__default["default"].createElement(BasicContainer, { collapseSize: collapseSize }, topSection === null || topSection === void 0 ? void 0 : topSection.map((section, index) => (React__default["default"].createElement("div", { key: `service-section-${index}`, "data-testid": `service-section-${index}` },
-        section.svgIconName[language] === 'user' && React__default["default"].createElement(Icon["default"], { icon: icons.User, size: "3rem" }),
-        section.svgIconName[language] === 'headset' && (React__default["default"].createElement(Icon["default"], { icon: icons.Headset, size: "3rem" })),
-        section.svgIconName[language] === 'shop' && React__default["default"].createElement(Icon["default"], { icon: icons.Shop, size: "3rem" }),
-        React__default["default"].createElement("h4", null, section.title[language]),
-        React__default["default"].createElement("ul", null, section.linkItems.map((item, i) => (React__default["default"].createElement(LinksListEl, { key: `category-link-${i}`, "data-testid": `category-link-${i}` }, item.openChat[language] ? (React__default["default"].createElement(ButtonIcon["default"], { darkBg: true, icon: icons.ArrowRight, className: "js-dna-chatbot-cta-btn" }, item.linkText[language])) : (React__default["default"].createElement("a", { href: item.linkURL[language] },
-            React__default["default"].createElement(Icon["default"], { icon: icons.ArrowRight }),
+    const { collapseSize, language } = React.useContext(FooterContext.default);
+    return (React.createElement(BasicContainer, { collapseSize: collapseSize }, topSection === null || topSection === void 0 ? void 0 : topSection.map((section, index) => (React.createElement("div", { key: `service-section-${index}`, "data-testid": `service-section-${index}` },
+        section.svgIconName[language] === 'user' && React.createElement(Icon.default, { icon: icons.User, size: "3rem" }),
+        section.svgIconName[language] === 'headset' && (React.createElement(Icon.default, { icon: icons.Headset, size: "3rem" })),
+        section.svgIconName[language] === 'shop' && React.createElement(Icon.default, { icon: icons.Shop, size: "3rem" }),
+        React.createElement("h4", null, section.title[language]),
+        React.createElement("ul", null, section.linkItems.map((item, i) => (React.createElement(LinksListEl, { key: `category-link-${i}`, "data-testid": `category-link-${i}` }, item.openChat[language] ? (React.createElement(ButtonIcon.default, { darkBg: true, icon: icons.ArrowRight, className: "js-dna-chatbot-cta-btn" }, item.linkText[language])) : (React.createElement("a", { href: item.linkURL[language] },
+            React.createElement(Icon.default, { icon: icons.ArrowRight }),
             item.linkText[language])))))))))));
 };
 const Categories = ({ categories }) => {
-    const { collapseSize, language, isCollapsed, setIsCollapsed, isMobileFooter } = React.useContext(FooterContext["default"]);
+    const { collapseSize, language, isCollapsed, setIsCollapsed, isMobileFooter } = React.useContext(FooterContext.default);
     const toggleCollapse = (currentIndex) => {
         if (isMobileFooter) {
             setIsCollapsed(Object.assign(Object.assign({}, isCollapsed), { [currentIndex]: !isCollapsed[currentIndex] }));
         }
     };
-    return (React__default["default"].createElement(CategoryContainer, { collapseSize: collapseSize, "data-testid": "category-container" }, categories === null || categories === void 0 ? void 0 : categories.map((category, index) => (React__default["default"].createElement(CategoryWrapper, { active: isCollapsed[index], collapseSize: collapseSize, "data-testid": `category-${index}`, key: `category-${index}` },
-        React__default["default"].createElement(CategoryHeader, { onClick: () => toggleCollapse(index) },
+    return (React.createElement(CategoryContainer, { collapseSize: collapseSize, "data-testid": "category-container" }, categories === null || categories === void 0 ? void 0 : categories.map((category, index) => (React.createElement(CategoryWrapper, { active: isCollapsed[index], collapseSize: collapseSize, "data-testid": `category-${index}`, key: `category-${index}` },
+        React.createElement(CategoryHeader, { onClick: () => toggleCollapse(index) },
             category.description[language],
-            React__default["default"].createElement(Icon["default"], { icon: icons.ChevronDown })),
-        React__default["default"].createElement(CategoryLinks, { active: isMobileFooter ? isCollapsed[index] : true, collapseSize: collapseSize }, category.category.map((categoryLink, linkIndex) => (React__default["default"].createElement(LinksListEl, { key: `category-${index}-link-${linkIndex}`, "data-testid": `category-${index}-link-${linkIndex}` },
-            React__default["default"].createElement("a", { href: categoryLink.urls[language] }, categoryLink.titles[language]))))))))));
+            React.createElement(Icon.default, { icon: icons.ChevronDown })),
+        React.createElement(CategoryLinks, { active: isMobileFooter ? isCollapsed[index] : true, collapseSize: collapseSize }, category.category.map((categoryLink, linkIndex) => (React.createElement(LinksListEl, { key: `category-${index}-link-${linkIndex}`, "data-testid": `category-${index}-link-${linkIndex}` },
+            React.createElement("a", { href: categoryLink.urls[language] }, categoryLink.titles[language]))))))))));
 };
 const GeneralInformation = ({ generalInformation }) => {
-    const { language } = React.useContext(FooterContext["default"]);
+    const { language } = React.useContext(FooterContext.default);
     if (!generalInformation) {
         return null;
     }
@@ -214,14 +208,14 @@ const GeneralInformation = ({ generalInformation }) => {
         cookie: 'ot-sdk-show-settings',
     };
     const orderedGeneralInformation = orderMap.map(id => new Map(Object.entries(generalInformation)).get(id));
-    return (React__default["default"].createElement(GeneralInformationContainer, { "data-testid": "general-information-section" },
-        orderedGeneralInformation.map((item, index) => item && (React__default["default"].createElement(GeneralInformationLink, { href: (item.urls && item.urls[language]) || '#!', className: item.type && typeToClassMap[item.type], key: `general-information-link-${index}` }, item.titles[language]))),
+    return (React.createElement(GeneralInformationContainer, { "data-testid": "general-information-section" },
+        orderedGeneralInformation.map((item, index) => item && (React.createElement(GeneralInformationLink, { href: (item.urls && item.urls[language]) || '#!', className: item.type && typeToClassMap[item.type], key: `general-information-link-${index}` }, item.titles[language]))),
         "DNA ",
         currentYear));
 };
 const SocialMediaLinks = ({ socialMedia }) => {
-    const { language } = React.useContext(FooterContext["default"]);
-    return (React__default["default"].createElement(SocialMediaLinksContainer, { "data-testid": "social-media-section" }, socialMedia &&
+    const { language } = React.useContext(FooterContext.default);
+    return (React.createElement(SocialMediaLinksContainer, { "data-testid": "social-media-section" }, socialMedia &&
         Object.keys(socialMedia || {}).map(socialMediaKey => {
             if (socialMediaKey === '__typename') {
                 return null;
@@ -230,8 +224,8 @@ const SocialMediaLinks = ({ socialMedia }) => {
                 socialMediaKey.toLowerCase().slice(1);
             const currentObject = socialMedia[socialMediaKey];
             const currentMediaUrl = currentObject === null || currentObject === void 0 ? void 0 : currentObject.urls[language];
-            return (React__default["default"].createElement("a", { href: currentMediaUrl, key: `social-media-link-${socialMediaKey}`, "aria-label": socialMediaName },
-                React__default["default"].createElement(Icon["default"], { icon: socialMediaIcons[socialMediaKey.toLowerCase()] })));
+            return (React.createElement("a", { href: currentMediaUrl, key: `social-media-link-${socialMediaKey}`, "aria-label": socialMediaName },
+                React.createElement(Icon.default, { icon: socialMediaIcons[socialMediaKey.toLowerCase()] })));
         })));
 };