@dnanpm/styleguide 3.10.0 → 3.11.0

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

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

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

@@ -1,5 +1,5 @@
 import React__default, { useContext, useRef } from 'react';
-import styled from '../../../themes/styled.js';
+import { styled } from 'styled-components';
 import theme from '../../../themes/theme.js';
 import { getMultipliedSize } from '../../../utils/styledUtils.js';
 import NavContext from '../context/NavContext.js';

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

@@ -1,7 +1,7 @@
 import { ChevronRight } from '@dnanpm/icons';
 import React__default, { useContext, useRef, useEffect } from 'react';
 import useOutsideClick from '../../../hooks/useOutsideClick.js';
-import styled, { keyframes, css } from '../../../themes/styled.js';
+import { keyframes, css, styled } from 'styled-components';
 import theme from '../../../themes/theme.js';
 import { subMenuWidth, subMenuWidthXl, menuItemMargin } from '../../../themes/themeComponents/navigation.js';
 import { getMultipliedSize, media } from '../../../utils/styledUtils.js';

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

@@ -1,6 +1,6 @@
 import { Close, Menu } from '@dnanpm/icons';
 import React__default, { useContext } from 'react';
-import styled from '../../../themes/styled.js';
+import { styled } from 'styled-components';
 import theme from '../../../themes/theme.js';
 import breakpoints from '../../../themes/themeComponents/breakpoints.js';
 import { IconContainerWidth, navIconSizeMobile, navIconSize, wideMenuBreakpoint, mobileLogoSize, desktopLogoSize } from '../../../themes/themeComponents/navigation.js';

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

@@ -1,6 +1,6 @@
 import { Globe } from '@dnanpm/icons';
 import React__default, { useContext, useCallback } from 'react';
-import styled from '../../../themes/styled.js';
+import { styled } from 'styled-components';
 import theme from '../../../themes/theme.js';
 import { getMultipliedSize } from '../../../utils/styledUtils.js';
 import Icon from '../../Icon/Icon.js';

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

@@ -1,7 +1,7 @@
 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 { mobileNavMaxHeight, ribbonHeight, desktopNavMaxHeight } from '../../../themes/themeComponents/navigation.js';
 import { getMultipliedSize, media } from '../../../utils/styledUtils.js';

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

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

package/build/es/components/MainNavigation/ChildComponents/Ribbon.js

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import styled from '../../../themes/styled.js';
+import { styled } from 'styled-components';
 import theme from '../../../themes/theme.js';
 import { ribbonHeight } from '../../../themes/themeComponents/navigation.js';
 import { media, getMultipliedSize } from '../../../utils/styledUtils.js';

package/build/es/components/MainNavigation/MainNavigation.js

@@ -2,7 +2,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 { desktopNavMaxHeight, ribbonHeight, mobileNavMaxHeight } from '../../themes/themeComponents/navigation.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';