@dnanpm/styleguide 3.10.0 → 3.11.0

package/build/es/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/es/components/MainHeaderNavigation/ChildComponents/MainNavTooltipMenu.js

@@ -2,7 +2,7 @@ import { __rest } from 'tslib';
 import React__default, { useContext, useRef, useEffect } from 'react';
 import useCloseOutsideOrElementClicked from '../../../hooks/useCloseOutsideOrElementClicked.js';
 import useDocHeight from '../../../hooks/useDocHeight.js';
-import styled from '../../../themes/styled.js';
+import { styled } from 'styled-components';
 import theme from '../../../themes/theme.js';
 import { IconContainerMinWidth, navIconSize, navMaxHeight } from '../../../themes/themeComponents/navigation.js';
 import { getMultipliedSize } from '../../../utils/styledUtils.js';

package/build/es/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/es/components/MainHeaderNavigation/ChildComponents/MainNavTooltipMenuExportedStyles.js

@@ -1,4 +1,4 @@
-import styled from '../../../themes/styled.js';
+import { styled } from 'styled-components';
 import theme from '../../../themes/theme.js';
 import { IconContainerWidth } from '../../../themes/themeComponents/navigation.js';
 

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

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

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

@@ -1,7 +1,7 @@
 import { ChevronLeft, ChevronRight } from '@dnanpm/icons';
 import React__default, { useContext, useRef, useMemo } from 'react';
 import { animated, useSpring } from 'react-spring';
-import styled from '../../../themes/styled.js';
+import { styled } from 'styled-components';
 import theme from '../../../themes/theme.js';
 import { menuLevelsAmount, navMaxHeight, mobileNavMaxWidth, headerMaxHeight } from '../../../themes/themeComponents/navigation.js';
 import { getMultipliedSize } from '../../../utils/styledUtils.js';

package/build/es/components/MainHeaderNavigation/MainHeaderNavigation.js

@@ -4,7 +4,7 @@ import { prop, indexBy } from 'ramda';
 import React__default, { useRef, useMemo, useState, useEffect } from 'react';
 import useScrollPosition from '../../hooks/useScrollPosition.js';
 import useWindowSize from '../../hooks/useWindowSize.js';
-import styled, { createGlobalStyle, keyframes } from '../../themes/styled.js';
+import { createGlobalStyle, keyframes, styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 import { navMaxHeight, headerLogoSize } from '../../themes/themeComponents/navigation.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';