@dnanpm/styleguide 3.10.0 → 3.11.0

package/build/cjs/components/MainHeaderNavigation/globalNavStyles.js

@@ -1,16 +1,16 @@
 'use strict';
 
-var styled = require('../../themes/styled.js');
+var styledComponents = require('styled-components');
 var theme = require('../../themes/theme.js');
 var navigation = require('../../themes/themeComponents/navigation.js');
 var common = require('../../utils/common.js');
 var styledUtils = require('../../utils/styledUtils.js');
 
-const LogoLink = styled.default.a `
+const LogoLink = styledComponents.styled.a `
     height: ${navigation.navMaxHeight};
     flex: 0 0 auto;
 `;
-const DesktopMenuContainer = styled.default.nav `
+const DesktopMenuContainer = styledComponents.styled.nav `
     display: none;
     flex-direction: column;
     position: absolute;
@@ -24,7 +24,7 @@ const DesktopMenuContainer = styled.default.nav `
         overflow: initial;
     }
 `;
-const MobileMenuButton = styled.default.button `
+const MobileMenuButton = styledComponents.styled.button `
     font-family: inherit;
     border: 0;
     padding: 0;
@@ -46,7 +46,7 @@ const MobileMenuButton = styled.default.button `
         fill: ${theme.default.color.text.black};
     }
 `;
-const HeaderIconContainer = styled.default.div `
+const HeaderIconContainer = styledComponents.styled.div `
     display: flex;
     height: ${navigation.navMaxHeight};
     flex: 0 0 auto;
@@ -66,7 +66,7 @@ const HeaderIconContainer = styled.default.div `
         gap: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
     }
 `;
-const MenuItem = styled.default.li `
+const MenuItem = styledComponents.styled.li `
     display: ${p => (p.isFeaturedItem ? 'grid' : 'flex')};
     align-items: center;
     grid-template-columns: ${p => (p.isFeaturedItem ? '1fr 1fr' : '1fr')};
@@ -90,7 +90,7 @@ const MenuItem = styled.default.li `
         `}
     }
 `;
-const MenuLink = styled.default.a `
+const MenuLink = styledComponents.styled.a `
     overflow: visible;
     text-decoration: none;
     color: ${p => (p.isActive ? theme.default.color.text.pink : theme.default.color.text.black)};
@@ -101,7 +101,7 @@ const MenuLink = styled.default.a `
         }
     }
 `;
-const MenuLinkWithChildren = styled.default.a `
+const MenuLinkWithChildren = styledComponents.styled.a `
     line-height: ${theme.default.lineHeight.xs};
     display: block;
     font-family: inherit;
@@ -114,7 +114,7 @@ const MenuLinkWithChildren = styled.default.a `
     }
 
 `;
-const MenuList = styled.default.ul `
+const MenuList = styledComponents.styled.ul `
     display: flex;
     flex-direction: row;
     gap: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1.5)};
@@ -140,7 +140,7 @@ const MenuList = styled.default.ul `
         }
     }
 `;
-const FeaturedBlock = styled.default.li `
+const FeaturedBlock = styledComponents.styled.li `
     background-color: ${theme.default.color.background.sand.E01};
     padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1)};
     display: grid;

package/build/cjs/components/MainNavigation/ChildComponents/BusinessMenu.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var styled = require('../../../themes/styled.js');
+var styledComponents = require('styled-components');
 var theme = require('../../../themes/theme.js');
 var styledUtils = require('../../../utils/styledUtils.js');
 var NavContext = require('../context/NavContext.js');
@@ -12,7 +12,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const BusinessMenuLink = styled.default.a `
+const BusinessMenuLink = styledComponents.styled.a `
     color: ${p => (p.isActive ? theme.default.color.text.pink : theme.default.color.text.black)};
     display: block;
     text-decoration: none;
@@ -26,11 +26,11 @@ const BusinessMenuLink = styled.default.a `
         outline: none;
     }
 `;
-const BusinessMenuItem = styled.default.li `
+const BusinessMenuItem = styledComponents.styled.li `
     display: flex;
     overflow: hidden;
 `;
-const BusinessMenuList = styled.default.ul `
+const BusinessMenuList = styledComponents.styled.ul `
     display: ${({ isMobileMenu }) => (!isMobileMenu ? 'inline-flex' : 'block')};
     align-items: center;
     position: relative;

package/build/cjs/components/MainNavigation/ChildComponents/DesktopMenu.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var icons = require('@dnanpm/icons');
 var React = require('react');
 var useOutsideClick = require('../../../hooks/useOutsideClick.js');
-var styled = require('../../../themes/styled.js');
+var styledComponents = require('styled-components');
 var theme = require('../../../themes/theme.js');
 var navigation = require('../../../themes/themeComponents/navigation.js');
 var styledUtils = require('../../../utils/styledUtils.js');
@@ -19,7 +19,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const fadeIn = styled.keyframes `
+const fadeIn = styledComponents.keyframes `
     0% {
         opacity: 0;
         transform: translateY(-5px);
@@ -29,7 +29,7 @@ const fadeIn = styled.keyframes `
         transform: translateY(0px);
     }
 `;
-const fadeRight = styled.keyframes `
+const fadeRight = styledComponents.keyframes `
     0% {
         opacity: 0;
         transform: translateX(-5px);
@@ -39,16 +39,16 @@ const fadeRight = styled.keyframes `
         transform: translate(0px);
     }
 `;
-const fadeInAnimation = styled.css `
+const fadeInAnimation = styledComponents.css `
     animation: ${fadeIn} 0.3s ease-in-out;
 `;
-const fadeRightAnimation = styled.css `
+const fadeRightAnimation = styledComponents.css `
     animation: ${fadeRight} 0.3s ease-in-out;
 `;
-const noAnimation = styled.css `
+const noAnimation = styledComponents.css `
     animation: none;
 `;
-const SubMenuListRight = styled.default.div `
+const SubMenuListRight = styledComponents.styled.div `
     display: ${({ menuStates, navItemId }) => menuStates.level1 && menuStates.level2 && menuStates.level2 === navItemId
     ? 'block'
     : 'none'};
@@ -64,7 +64,7 @@ const SubMenuListRight = styled.default.div `
         width: ${navigation.subMenuWidthXl};
     `};
 `;
-const SubMenuItem = styled.default.li `
+const SubMenuItem = styledComponents.styled.li `
     display: block;
     position: relative;
     > a {
@@ -83,7 +83,7 @@ const SubMenuItem = styled.default.li `
         }
     }
 `;
-const DesktopMenuList = styled.default(globalNavStyles.MenuList) `
+const DesktopMenuList = styledComponents.styled(globalNavStyles.MenuList) `
     ul {
         padding-left: 0;
 
@@ -114,7 +114,7 @@ const DesktopMenuList = styled.default(globalNavStyles.MenuList) `
     }
     margin-top: -2px;
 `;
-const DesktopMenuItem = styled.default(globalNavStyles.MenuItem) `
+const DesktopMenuItem = styledComponents.styled(globalNavStyles.MenuItem) `
     &:first-child > ${globalNavStyles.MenuLinkWithChildren} {
         margin: 0 ${navigation.menuItemMargin};
     }
@@ -151,7 +151,7 @@ const DesktopMenuItem = styled.default(globalNavStyles.MenuItem) `
         }
     }
 `;
-const SubMenuList = styled.default.div `
+const SubMenuList = styledComponents.styled.div `
     position: absolute;
     left: -${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.5)};
     display: ${({ menuStates, navItemId }) => (menuStates === null || menuStates === void 0 ? void 0 : menuStates.level1) === navItemId ? 'block' : 'none'};

package/build/cjs/components/MainNavigation/ChildComponents/HeaderNavigationElements.d.ts

@@ -1,174 +1,9 @@
 import React from 'react';
 import type { MainNavigationProps } from '../MainNavigation';
-export declare const IconContainer: import("styled-components").StyledComponent<"div", {
-    base: {
-        baseHeight: {
-            value: number;
-            unit: string;
-        };
-        baseWidth: {
-            value: number;
-            unit: string;
-        };
-    };
-    breakpoints: import("../../../themes/themeComponents/breakpoints").ViewBreakpoints;
-    color: {
-        default: {
-            pink: string;
-            plum: string;
-            white: string;
-            black: string;
-        };
-        accent: {
-            lemon: string;
-            sky: string;
-            orange: string;
-        };
-        active: {
-            pink: string;
-        };
-        hover: {
-            pink: string;
-        };
-        text: {
-            gray: string;
-            pink: string;
-            plum: string;
-            white: string;
-            black: string;
-        };
-        line: {
-            L01: string;
-            L02: string;
-            L03: string;
-            L04: string;
-        };
-        notification: {
-            info: string;
-            success: string;
-            warning: string;
-            error: string;
-        };
-        background: {
-            sand: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            pink: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            plum: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            lemon: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            sky: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            orange: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            white: {
-                default: string;
-            };
-        };
-        focus: {
-            dark: string;
-            light: string;
-        };
-        transparency: {
-            T0: string;
-            T10: string;
-            T20: string;
-            T30: string;
-            T40: string;
-            T50: string;
-            T60: string;
-            T70: string;
-            T80: string;
-            T90: string;
-            T100: string;
-        };
-    };
-    fontFamily: {
-        default: string;
-        heading: string;
-        numerals: string;
-    };
-    fontSize: {
-        default: string;
-        xl: string;
-        l: string;
-        s: string;
-        xs: string;
-        h1XL: string;
-        h1L: string;
-        h1M: string;
-        h1S: string;
-        h2M: string;
-        h2S: string;
-        h3: string;
-        h4: string;
-        h5: string;
-        h1: string;
-        h2: string;
-    };
-    fontWeight: {
-        book: number;
-        medium: number;
-        bold: number;
-        black: number;
-    };
-    form: {
-        smallSelectWidth: string;
-        smallSelectHeight: string;
-    };
-    grid: {
-        gutter: string;
-    };
-    lineHeight: {
-        default: string;
-        xl: string;
-        s: string;
-        xs: string;
-        xxs: string;
-        auto: string;
-        h1XL: string;
-        h1L: string;
-        h1M: string;
-        h1S: string;
-        h2M: string;
-        h2S: string;
-        h3: string;
-        h4: string;
-        h5: string;
-        h1: string;
-        h2: string;
-    };
-    media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
-    radius: {
-        default: string;
-        s: string;
-        xs: string;
-        circle: string;
-        pill: string;
-    };
-}, {
+export declare const IconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     isActive?: boolean;
     collapseSize: number;
-}, never>;
+}>> & string;
 declare const HeaderNavigationElements: ({ navElementProps, }: {
     navElementProps: MainNavigationProps;
 }) => React.JSX.Element;

package/build/cjs/components/MainNavigation/ChildComponents/HeaderNavigationElements.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var icons = require('@dnanpm/icons');
 var React = require('react');
-var styled = require('../../../themes/styled.js');
+var styledComponents = require('styled-components');
 var theme = require('../../../themes/theme.js');
 var breakpoints = require('../../../themes/themeComponents/breakpoints.js');
 var navigation = require('../../../themes/themeComponents/navigation.js');
@@ -23,7 +23,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const DesktopMenuContainer = styled.default.div `
+const DesktopMenuContainer = styledComponents.styled.div `
     height: 100%;
     display: none;
     border-bottom: 1px solid ${theme.default.color.line.L03};
@@ -32,7 +32,7 @@ const DesktopMenuContainer = styled.default.div `
         padding-left: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 0.5)};
     }
 `;
-const IconContainer = styled.default.div `
+const IconContainer = styledComponents.styled.div `
     margin: 0;
     display: flex;
     flex-direction: column;
@@ -65,7 +65,7 @@ const IconContainer = styled.default.div `
             ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)};
     }
 `;
-const HeaderIconContainer = styled.default.div `
+const HeaderIconContainer = styledComponents.styled.div `
     display: flex;
     justify-content: flex-end;
     border-bottom: 1px solid ${theme.default.color.line.L03};
@@ -80,7 +80,7 @@ const HeaderIconContainer = styled.default.div `
         }
     }
 `;
-const HeaderIconWrapper = styled.default.div `
+const HeaderIconWrapper = styledComponents.styled.div `
     display: flex;
     flex: 1 1 100%;
     justify-content: space-between;
@@ -90,7 +90,7 @@ const HeaderIconWrapper = styled.default.div `
         flex: 0 0 100%;
     }
 `;
-const MobileMenuButton = styled.default.button `
+const MobileMenuButton = styledComponents.styled.button `
     display: block;
     @media (min-width: ${p => p.collapseSize + 1}px) {
         display: none;
@@ -110,12 +110,12 @@ const MobileMenuButton = styled.default.button `
     padding: 0;
     background: transparent;
 `;
-const MenuWrapper = styled.default.div `
+const MenuWrapper = styledComponents.styled.div `
     height: 50%;
     white-space: nowrap;
     align-self: flex-end;
 `;
-const LogoContainer = styled.default.div `
+const LogoContainer = styledComponents.styled.div `
     margin: 0;
     width: ${navigation.mobileLogoSize};
     height: ${navigation.mobileLogoSize};
@@ -124,7 +124,7 @@ const LogoContainer = styled.default.div `
         height: ${navigation.desktopLogoSize};
     }
 `;
-const HeaderIconWrapperNoMargin = styled.default.div `
+const HeaderIconWrapperNoMargin = styledComponents.styled.div `
     margin: 0;
 `;
 const RenderDesktopMenu = ({ collapseSize }) => (React__default.default.createElement(DesktopMenuContainer, { collapseSize: collapseSize },

package/build/cjs/components/MainNavigation/ChildComponents/LanguageSelector.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var icons = require('@dnanpm/icons');
 var React = require('react');
-var styled = require('../../../themes/styled.js');
+var styledComponents = require('styled-components');
 var theme = require('../../../themes/theme.js');
 var styledUtils = require('../../../utils/styledUtils.js');
 var Icon = require('../../Icon/Icon.js');
@@ -16,7 +16,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const MenuItem = styled.default(globalNavStyles.MenuLink) `
+const MenuItem = styledComponents.styled(globalNavStyles.MenuLink) `
     font-weight: ${theme.default.fontWeight.medium};
     margin: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1)} auto;
     text-align: center;

package/build/cjs/components/MainNavigation/ChildComponents/MainNavTooltipMenu.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var useCloseOutsideOrElementClicked = require('../../../hooks/useCloseOutsideOrElementClicked.js');
 var useDocHeight = require('../../../hooks/useDocHeight.js');
-var styled = require('../../../themes/styled.js');
+var styledComponents = require('styled-components');
 var theme = require('../../../themes/theme.js');
 var navigation = require('../../../themes/themeComponents/navigation.js');
 var styledUtils = require('../../../utils/styledUtils.js');
@@ -17,10 +17,10 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const Container = styled.default.div `
+const Container = styledComponents.styled.div `
     width: 100%;
 `;
-const Tooltip = styled.default.div `
+const Tooltip = styledComponents.styled.div `
     min-height: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 5)};
     max-height: calc(var(--vh100, 100vh) - ${navigation.mobileNavMaxHeight});
     width: 100%;
@@ -44,13 +44,13 @@ const Tooltip = styled.default.div `
         top: calc(${navigation.desktopNavMaxHeight} + ${navigation.ribbonHeight});
     }
 `;
-const TooltipBox = styled.default(Box.default) `
+const TooltipBox = styledComponents.styled(Box.default) `
     border-top-left-radius: 0 !important;
     border-top-right-radius: 0 !important;
     min-height: inherit;
     max-height: inherit;
 `;
-const Caret = styled.default.div `
+const Caret = styledComponents.styled.div `
     position: absolute;
     z-index: ${p => p.zIndex + 1};
     top: ${navigation.mobileNavMaxHeight};

package/build/cjs/components/MainNavigation/ChildComponents/MainNavTooltipMenuExportedStyles.d.ts

@@ -1,171 +1,6 @@
-declare const TooltipWrapper: import("styled-components").StyledComponent<"button", {
-    base: {
-        baseHeight: {
-            value: number;
-            unit: string;
-        };
-        baseWidth: {
-            value: number;
-            unit: string;
-        };
-    };
-    breakpoints: import("../../../themes/themeComponents/breakpoints").ViewBreakpoints;
-    color: {
-        default: {
-            pink: string;
-            plum: string;
-            white: string;
-            black: string;
-        };
-        accent: {
-            lemon: string;
-            sky: string;
-            orange: string;
-        };
-        active: {
-            pink: string;
-        };
-        hover: {
-            pink: string;
-        };
-        text: {
-            gray: string;
-            pink: string;
-            plum: string;
-            white: string;
-            black: string;
-        };
-        line: {
-            L01: string;
-            L02: string;
-            L03: string;
-            L04: string;
-        };
-        notification: {
-            info: string;
-            success: string;
-            warning: string;
-            error: string;
-        };
-        background: {
-            sand: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            pink: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            plum: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            lemon: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            sky: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            orange: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            white: {
-                default: string;
-            };
-        };
-        focus: {
-            dark: string;
-            light: string;
-        };
-        transparency: {
-            T0: string;
-            T10: string;
-            T20: string;
-            T30: string;
-            T40: string;
-            T50: string;
-            T60: string;
-            T70: string;
-            T80: string;
-            T90: string;
-            T100: string;
-        };
-    };
-    fontFamily: {
-        default: string;
-        heading: string;
-        numerals: string;
-    };
-    fontSize: {
-        default: string;
-        xl: string;
-        l: string;
-        s: string;
-        xs: string;
-        h1XL: string;
-        h1L: string;
-        h1M: string;
-        h1S: string;
-        h2M: string;
-        h2S: string;
-        h3: string;
-        h4: string;
-        h5: string;
-        h1: string;
-        h2: string;
-    };
-    fontWeight: {
-        book: number;
-        medium: number;
-        bold: number;
-        black: number;
-    };
-    form: {
-        smallSelectWidth: string;
-        smallSelectHeight: string;
-    };
-    grid: {
-        gutter: string;
-    };
-    lineHeight: {
-        default: string;
-        xl: string;
-        s: string;
-        xs: string;
-        xxs: string;
-        auto: string;
-        h1XL: string;
-        h1L: string;
-        h1M: string;
-        h1S: string;
-        h2M: string;
-        h2S: string;
-        h3: string;
-        h4: string;
-        h5: string;
-        h1: string;
-        h2: string;
-    };
-    media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
-    radius: {
-        default: string;
-        s: string;
-        xs: string;
-        circle: string;
-        pill: string;
-    };
-}, {
+declare const TooltipWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
     collapseSize: number;
     isHighlighted?: boolean;
-}, never>;
+}>> & string;
 export default TooltipWrapper;
 export { TooltipWrapper };

package/build/cjs/components/MainNavigation/ChildComponents/MainNavTooltipMenuExportedStyles.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styled = require('../../../themes/styled.js');
+var styledComponents = require('styled-components');
 var theme = require('../../../themes/theme.js');
 var navigation = require('../../../themes/themeComponents/navigation.js');
 
-const TooltipWrapper = styled.default.button `
+const TooltipWrapper = styledComponents.styled.button `
     position: relative;
     border: none;
     margin: 0;