@dnanpm/styleguide 3.10.0 → 3.11.0

package/build/cjs/components/MainHeaderNavigation/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 navigation = require('../../../themes/themeComponents/navigation.js');
 var styledUtils = require('../../../utils/styledUtils.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/MainHeaderNavigation/ChildComponents/MainNavTooltipMenu.d.ts

@@ -23,174 +23,9 @@ interface MainNavTooltipMenuProps<ContentProps extends object = object> extends
     /** Adjust menu to be full width after this number. default xs (480). */
     fullWidthBreakpoint?: number;
 }
-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 MainNavTooltipMenu: <ContentProps extends object = object>({ ariaLabel, children, closeWhenTagClicked, contentComponent, contentWidth, fullWidthBreakpoint, fullWidthDesktop, globalStateString, tooltipRight, zIndex, ...props }: MainNavTooltipMenuProps<ContentProps>) => React.JSX.Element;
 export default MainNavTooltipMenu;

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

@@ -6,7 +6,7 @@ var tslib = require('tslib');
 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');
@@ -19,7 +19,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const IconContainer = styled.default.div `
+const IconContainer = styledComponents.styled.div `
     margin: 0;
     display: flex;
     flex-direction: column;
@@ -45,7 +45,7 @@ const IconContainer = styled.default.div `
         }
     }
 `;
-const Tooltip = styled.default.div `
+const Tooltip = styledComponents.styled.div `
     min-height: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 5)};
     // Ensure that the tooltip's content is always visible within the viewport. So, the max-height is the viewport height minus the header's height + some margin.
     max-height: calc(var(--vh100, 100vh) - ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 12)});
@@ -62,13 +62,13 @@ const Tooltip = styled.default.div `
         right: ${p => (p.fullWidthDesktop ? 0 : p.tooltipRight)};
     }
 `;
-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.navMaxHeight};

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

@@ -1,172 +1,7 @@
-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;
     isLoggedIn?: boolean;
-}, never>;
+}>> & string;
 export default TooltipWrapper;
 export { TooltipWrapper };

package/build/cjs/components/MainHeaderNavigation/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;

package/build/cjs/components/MainHeaderNavigation/ChildComponents/MinicartTooltip.js

@@ -15,9 +15,9 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 const MinicartTooltip = ({ minicartAmount, minicartAmountLabel, minicartLabel, onCartButtonClick, }) => {
     const { navZIndex, minicartComponent } = React.useContext(NavContext.default);
-    return (React__default.default.createElement(MainNavTooltipMenu.default, { ariaLabel: minicartLabel, closeWhenTagClicked: ['a', 'button'], onCartButtonClick: onCartButtonClick, contentComponent: minicartComponent, contentWidth: "35rem", fullWidthBreakpoint: theme.default.breakpoints.md, globalStateString: "minicart", tooltipRight: "5rem", zIndex: navZIndex + 1 },
+    return (React__default.default.createElement(MainNavTooltipMenu.default, { closeWhenTagClicked: ['a', 'button'], onCartButtonClick: onCartButtonClick, contentComponent: minicartComponent, contentWidth: "35rem", fullWidthBreakpoint: theme.default.breakpoints.md, globalStateString: "minicart", tooltipRight: "5rem", zIndex: navZIndex + 1 },
         React__default.default.createElement(icons.Cart, null),
-        React__default.default.createElement("span", { "aria-hidden": true }, minicartLabel),
+        React__default.default.createElement("span", { "aria-hidden": !!minicartAmountLabel }, minicartLabel),
         minicartAmount > 0 && (React__default.default.createElement(NotificationBadge.default, { "data-testid": "header-minicart-amount", right: "5px", top: "-5px", visuallyHiddenText: minicartAmountLabel }, minicartAmount))));
 };
 

package/build/cjs/components/MainHeaderNavigation/ChildComponents/MobileMenu.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var icons = require('@dnanpm/icons');
 var React = require('react');
 var reactSpring = require('react-spring');
-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');
@@ -18,7 +18,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const MobileMenuWrapper = styled.default(reactSpring.animated.div) `
+const MobileMenuWrapper = styledComponents.styled(reactSpring.animated.div) `
     width: ${100 * navigation.menuLevelsAmount}%;
     display: flex;
     button {
@@ -27,8 +27,8 @@ const MobileMenuWrapper = styled.default(reactSpring.animated.div) `
     }
 `;
 const mobileMenu = `calc(100vh - ${navigation.headerMaxHeight})`;
-const MenuLinkBackLink = styled.default(globalNavStyles.MenuLink) ``;
-const MobileMenuContainer = styled.default.div `
+const MenuLinkBackLink = styledComponents.styled(globalNavStyles.MenuLink) ``;
+const MobileMenuContainer = styledComponents.styled.div `
     width: 100%;
     position: absolute;
     top: ${navigation.navMaxHeight};

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

@@ -8,7 +8,7 @@ var ramda = require('ramda');
 var React = require('react');
 var useScrollPosition = require('../../hooks/useScrollPosition.js');
 var useWindowSize = require('../../hooks/useWindowSize.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');
@@ -29,7 +29,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const GlobalStyle = styled.createGlobalStyle `
+const GlobalStyle = styledComponents.createGlobalStyle `
     body.overflow-hidden {
         overflow: hidden;
     }
@@ -44,7 +44,7 @@ const isIosDevice = () => {
     return false;
 };
 const iosDevice = isIosDevice();
-const fadeIn = styled.keyframes `
+const fadeIn = styledComponents.keyframes `
     0% {
         opacity: 0;
         transform: translateY(-5px);
@@ -74,7 +74,7 @@ const resumeBodyScroll = () => {
         });
     }
 };
-const PageOverlay = styled.default.div `
+const PageOverlay = styledComponents.styled.div `
     position: fixed;
     animation: ${fadeIn} 0.2s ease-in-out;
     top: 0;
@@ -91,7 +91,7 @@ const checkThreshold = (prevPos, currPos) => {
     }
     return currPos - prevPos > scrollThreshold;
 };
-const GlobalNavigationContainer = styled.default.header `
+const GlobalNavigationContainer = styledComponents.styled.header `
     z-index: ${({ navZIndex }) => navZIndex};
     position: sticky;
     top: 0;
@@ -106,7 +106,7 @@ const GlobalNavigationContainer = styled.default.header `
         background-color: ${theme.default.color.background.plum.E02};
     }
 `;
-const NavigationWrapper = styled.default.div `
+const NavigationWrapper = styledComponents.styled.div `
     display: flex;
     width: 100%;
     max-width: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 256)};