@dnanpm/styleguide 4.0.9 → 4.0.10

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

@@ -1,54 +1,66 @@
 import { createContext } from 'react';
 
-const NavContext = createContext({
-    backToPreviousCategoryLabel: '',
-    categoryCollectionText: '',
-    collapseSize: 767,
-    currentUrl: '',
-    featuredItemsAriaLabel: '',
-    getBackLink: () => ({
-        id: '',
-        pageIsLinkInDesktopNavigation: false,
-        pages: [],
-        titles: {},
-        urls: {},
-    }),
-    handleNavMenuClick: () => { },
-    isLoggedIn: false,
-    isMobileMenu: false,
-    isMobileMenuOpen: false,
-    items: {},
-    lang: '',
-    level1Items: {
-        level1: { id: '', pageIsLinkInDesktopNavigation: false, pages: [], titles: {}, urls: {} },
-    },
-    level2Items: {
-        level2: { id: '', pageIsLinkInDesktopNavigation: false, pages: [], titles: {}, urls: {} },
-    },
-    loginComponent: false,
-    menuLevel: {
-        level1: null,
-        animate1: true,
-        level2: null,
-        animate2: true,
-        level1Mobile: null,
-        level2Mobile: null,
-        scrollPosition: 0,
-        hideOnScroll: false,
-    },
-    navZIndex: 1030,
-    nextJSLinkComponent: false,
-    nextJSLinkLegacyBehavior: true,
-    resetMenuEvents: () => { },
-    searchComponent: false,
-    setTooltipItems: () => { },
-    showLoginTooltip: false,
-    showMinicart: true,
-    tooltipItems: {
-        minicart: false,
-        login: false,
-        search: false,
-    },
+const NavContext = /*#__PURE__*/createContext({
+  backToPreviousCategoryLabel: '',
+  categoryCollectionText: '',
+  collapseSize: 767,
+  currentUrl: '',
+  featuredItemsAriaLabel: '',
+  getBackLink: () => ({
+    id: '',
+    pageIsLinkInDesktopNavigation: false,
+    pages: [],
+    titles: {},
+    urls: {}
+  }),
+  handleNavMenuClick: () => {},
+  isLoggedIn: false,
+  isMobileMenu: false,
+  isMobileMenuOpen: false,
+  items: {},
+  lang: '',
+  level1Items: {
+    level1: {
+      id: '',
+      pageIsLinkInDesktopNavigation: false,
+      pages: [],
+      titles: {},
+      urls: {}
+    }
+  },
+  level2Items: {
+    level2: {
+      id: '',
+      pageIsLinkInDesktopNavigation: false,
+      pages: [],
+      titles: {},
+      urls: {}
+    }
+  },
+  loginComponent: false,
+  menuLevel: {
+    level1: null,
+    animate1: true,
+    level2: null,
+    animate2: true,
+    level1Mobile: null,
+    level2Mobile: null,
+    scrollPosition: 0,
+    hideOnScroll: false
+  },
+  navZIndex: 1030,
+  nextJSLinkComponent: false,
+  nextJSLinkLegacyBehavior: true,
+  resetMenuEvents: () => {},
+  searchComponent: false,
+  setTooltipItems: () => {},
+  showLoginTooltip: false,
+  showMinicart: true,
+  tooltipItems: {
+    minicart: false,
+    login: false,
+    search: false
+  }
 });
 
 export { NavContext as default };

package/build/es/components/MainHeaderNavigation/globalNavStyles.d.ts

@@ -1,24 +1,39 @@
-export declare const LogoLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
-export declare const DesktopMenuContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {
+export declare const LogoLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>>> & string;
+export declare const DesktopMenuContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "$collapseSize"> & {
     $collapseSize: number;
-}>> & string;
-export declare const MobileMenuButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
-export declare const HeaderIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "$collapseSize"> & {
     $collapseSize: number;
-}>> & string;
-export declare const MenuItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {
+}, never>>> & string;
+export declare const MobileMenuButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>> & string;
+export declare const HeaderIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$collapseSize"> & {
+    $collapseSize: number;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$collapseSize"> & {
+    $collapseSize: number;
+}, never>>> & string;
+export declare const MenuItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "$isActive" | "$isFeaturedItem"> & {
+    $isActive?: boolean;
+    $isFeaturedItem?: boolean;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "$isActive" | "$isFeaturedItem"> & {
     $isActive?: boolean;
     $isFeaturedItem?: boolean;
-}>> & string;
-export declare const MenuLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {
+}, never>>> & string;
+export declare const MenuLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "$isActive"> & {
     $isActive?: boolean;
-}>> & string;
-export declare const MenuLinkWithChildren: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "$isActive"> & {
+    $isActive?: boolean;
+}, never>>> & string;
+export declare const MenuLinkWithChildren: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "$isOpen"> & {
+    $isOpen?: boolean;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "$isOpen"> & {
     $isOpen?: boolean;
-}>> & string;
-export declare const MenuList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {
+}, never>>> & string;
+export declare const MenuList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "$isInView"> & {
     $isInView?: boolean;
-}>> & string;
-export declare const FeaturedBlock: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "$isInView"> & {
+    $isInView?: boolean;
+}, never>>> & string;
+export declare const FeaturedBlock: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "$collapseSize"> & {
+    $collapseSize: number;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "$collapseSize"> & {
     $collapseSize: number;
-}>> & string;
+}, never>>> & string;

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

@@ -4,178 +4,45 @@ import { navMaxHeight } from '../../themes/themeComponents/navigation.js';
 import getElevationShadow from '../../utils/common.js';
 import { getMultipliedSize, media } from '../../utils/styledUtils.js';
 
-const LogoLink = styled.a `
-    height: ${navMaxHeight};
-    flex: 0 0 auto;
-`;
-const DesktopMenuContainer = styled.nav `
-    display: none;
-    flex-direction: column;
-    position: absolute;
-    @media (min-width: ${p => p.$collapseSize + 1}px) {
-        position: initial;
-        width: auto;
-        max-width: unset;
-        height: ${navMaxHeight};
-        display: flex;
-        flex-direction: row;
-        overflow: initial;
-    }
-`;
-const MobileMenuButton = styled.button `
-    font-family: inherit;
-    border: 0;
-    padding: 0;
-    background: transparent;
-    &:focus,
-    &:active {
-        svg {
-            fill: ${theme.color.text.pink};
-        }
-    }
-    &:focus-visible {
-        outline: 0;
-        border-radius: ${theme.radius.s};
-        box-shadow:
-            0px 0px 0px 2px ${theme.color.focus.light},
-            0px 0px 0px 4px ${theme.color.focus.dark};
-        color: ${theme.color.text.black};
-    }
-    svg {
-        fill: ${theme.color.text.black};
-    }
-`;
-const HeaderIconContainer = styled.div `
-    display: flex;
-    height: ${navMaxHeight};
-    flex: 0 0 auto;
-    gap: ${getMultipliedSize(theme.base.baseWidth, 1)};
-    margin: 0 ${getMultipliedSize(theme.base.baseWidth, 1.5)} 0 auto;
-    button {
-        &:focus {
-            outline: none;
-        }
-    }
-    > div:last-child {
-        @media (min-width: ${p => p.$collapseSize + 1}px) {
-            display: none;
-        }
-    }
-    @media (min-width: ${p => p.$collapseSize + 1}px) {
-        gap: ${getMultipliedSize(theme.base.baseWidth, 2)};
-    }
-`;
-const MenuItem = styled.li `
-    display: ${p => (p.$isFeaturedItem ? 'grid' : 'flex')};
-    align-items: center;
-    grid-template-columns: ${p => (p.$isFeaturedItem ? '1fr 1fr' : '1fr')};
-    & > a {
-        padding: ${getMultipliedSize(theme.base.baseHeight, 0.5)}
-            ${getMultipliedSize(theme.base.baseWidth, 3)};
-    }
-    > button,
-    > a {
-        color: ${p => (p.$isActive ? theme.color.text.pink : theme.color.text.black)};
-        justify-content: ${p => (p.$isFeaturedItem ? 'flex-start' : 'space-between')};
-        font-size: ${theme.fontSize.s};
-        &:focus-visible {
-            outline: 0;
-            border-radius: ${theme.radius.s};
-            box-shadow:
-                0px 0px 0px 2px ${theme.color.focus.light},
-                0px 0px 0px 4px ${theme.color.focus.dark};
-        }
-        ${media.xl `
+const LogoLink = styled.a.withConfig({
+  displayName: "globalNavStyles__LogoLink",
+  componentId: "sc-yjbn2z-0"
+})(["height:", ";flex:0 0 auto;"], navMaxHeight);
+const DesktopMenuContainer = styled.nav.withConfig({
+  displayName: "globalNavStyles__DesktopMenuContainer",
+  componentId: "sc-yjbn2z-1"
+})(["display:none;flex-direction:column;position:absolute;@media (min-width:", "px){position:initial;width:auto;max-width:unset;height:", ";display:flex;flex-direction:row;overflow:initial;}"], p => p.$collapseSize + 1, navMaxHeight);
+const MobileMenuButton = styled.button.withConfig({
+  displayName: "globalNavStyles__MobileMenuButton",
+  componentId: "sc-yjbn2z-2"
+})(["font-family:inherit;border:0;padding:0;background:transparent;&:focus,&:active{svg{fill:", ";}}&:focus-visible{outline:0;border-radius:", ";box-shadow:0px 0px 0px 2px ", ",0px 0px 0px 4px ", ";color:", ";}svg{fill:", ";}"], theme.color.text.pink, theme.radius.s, theme.color.focus.light, theme.color.focus.dark, theme.color.text.black, theme.color.text.black);
+const HeaderIconContainer = styled.div.withConfig({
+  displayName: "globalNavStyles__HeaderIconContainer",
+  componentId: "sc-yjbn2z-3"
+})(["display:flex;height:", ";flex:0 0 auto;gap:", ";margin:0 ", " 0 auto;button{&:focus{outline:none;}}> div:last-child{@media (min-width:", "px){display:none;}}@media (min-width:", "px){gap:", ";}"], navMaxHeight, getMultipliedSize(theme.base.baseWidth, 1), getMultipliedSize(theme.base.baseWidth, 1.5), p => p.$collapseSize + 1, p => p.$collapseSize + 1, getMultipliedSize(theme.base.baseWidth, 2));
+const MenuItem = styled.li.withConfig({
+  displayName: "globalNavStyles__MenuItem",
+  componentId: "sc-yjbn2z-4"
+})(["display:", ";align-items:center;grid-template-columns:", ";& > a{padding:", " ", ";}> button,> a{color:", ";justify-content:", ";font-size:", ";&:focus-visible{outline:0;border-radius:", ";box-shadow:0px 0px 0px 2px ", ",0px 0px 0px 4px ", ";}", "}"], p => p.$isFeaturedItem ? 'grid' : 'flex', p => p.$isFeaturedItem ? '1fr 1fr' : '1fr', getMultipliedSize(theme.base.baseHeight, 0.5), getMultipliedSize(theme.base.baseWidth, 3), p => p.$isActive ? theme.color.text.pink : theme.color.text.black, p => p.$isFeaturedItem ? 'flex-start' : 'space-between', theme.fontSize.s, theme.radius.s, theme.color.focus.light, theme.color.focus.dark, media.xl`
             font-size: ${theme.fontSize.default};
-        `}
-    }
-`;
-const MenuLink = styled.a `
-    overflow: visible;
-    text-decoration: none;
-    color: ${p => (p.$isActive ? theme.color.text.pink : theme.color.text.black)};
-    > svg {
-            fill: ${theme.color.text.pink};
-            height: ${getMultipliedSize(theme.base.baseHeight, 2)};
-            width: ${getMultipliedSize(theme.base.baseWidth, 2)};
-        }
-    }
-`;
-const MenuLinkWithChildren = styled.a `
-    line-height: ${theme.lineHeight.xs};
-    display: block;
-    font-family: inherit;
-    white-space: normal;
-    color: ${p => (p.$isOpen ? theme.color.text.pink : theme.color.default.black)};
-    > svg {
-            transform: rotate( ${p => (p.$isOpen ? '270deg' : '90deg')});
-            transition: transform .2s ease-in-out;
-        }
-    }
-
-`;
-const MenuList = styled.ul `
-    display: flex;
-    flex-direction: row;
-    gap: ${getMultipliedSize(theme.base.baseHeight, 1.5)};
-    max-height: ${p => (typeof p.$isInView !== 'boolean' || p.$isInView ? 'auto' : '5px')};
-    margin: 0;
-    padding: 0;
-    background-color: ${theme.color.background.white};
-    transition: all 300ms ease-in-out;
-
-    ul {
-        li {
-            a {
-                display: flex;
-                align-items: center;
-            }
-        }
-    }
-    > li {
-        > a,
-        > button {
-            white-space: nowrap;
-            text-decoration: none;
-        }
-    }
-`;
-const FeaturedBlock = styled.li `
-    background-color: ${theme.color.background.sand.E01};
-    padding: ${getMultipliedSize(theme.base.baseHeight, 1)};
-    list-style: none;
-    grid-column: 4;
-    grid-row: 1/4;
-
-    @media (min-width: ${p => p.$collapseSize + 1}px) {
-        ${getElevationShadow({ elevation: 'high' })};
-        border-radius: 0
-        border-width: 0 0 0 1px;
-        background: ${theme.color.background.sand.default};
-        padding: ${getMultipliedSize(theme.base.baseHeight, 2)}
-            ${getMultipliedSize(theme.base.baseWidth, 2)}
-            ${getMultipliedSize(theme.base.baseHeight, 2)}
-            ${getMultipliedSize(theme.base.baseWidth, 3)};
-    }
-    section {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        @media (min-width: ${p => p.$collapseSize + 1}px) {
-            display: flex;
-            flex-direction: column;
-            gap: ${getMultipliedSize(theme.base.baseHeight, 1.5)};
-            align-items: stretch;
-            justify-content: flex-start;
-        }
-    }
-    a {
-        font-weight: ${theme.fontWeight.bold};
-        gap: ${getMultipliedSize(theme.base.baseHeight, 1)};
-        &:hover,
-        &:focus {
-            color: inherit;
-        }
-    }
-`;
+        `);
+const MenuLink = styled.a.withConfig({
+  displayName: "globalNavStyles__MenuLink",
+  componentId: "sc-yjbn2z-5"
+})(["overflow:visible;text-decoration:none;color:", ";> svg{fill:", ";height:", ";width:", ";}}"], p => p.$isActive ? theme.color.text.pink : theme.color.text.black, theme.color.text.pink, getMultipliedSize(theme.base.baseHeight, 2), getMultipliedSize(theme.base.baseWidth, 2));
+const MenuLinkWithChildren = styled.a.withConfig({
+  displayName: "globalNavStyles__MenuLinkWithChildren",
+  componentId: "sc-yjbn2z-6"
+})(["line-height:", ";display:block;font-family:inherit;white-space:normal;color:", ";> svg{transform:rotate( ", ");transition:transform .2s ease-in-out;}}"], theme.lineHeight.xs, p => p.$isOpen ? theme.color.text.pink : theme.color.default.black, p => p.$isOpen ? '270deg' : '90deg');
+const MenuList = styled.ul.withConfig({
+  displayName: "globalNavStyles__MenuList",
+  componentId: "sc-yjbn2z-7"
+})(["display:flex;flex-direction:row;gap:", ";max-height:", ";margin:0;padding:0;background-color:", ";transition:all 300ms ease-in-out;ul{li{a{display:flex;align-items:center;}}}> li{> a,> button{white-space:nowrap;text-decoration:none;}}"], getMultipliedSize(theme.base.baseHeight, 1.5), p => typeof p.$isInView !== 'boolean' || p.$isInView ? 'auto' : '5px', theme.color.background.white);
+const FeaturedBlock = styled.li.withConfig({
+  displayName: "globalNavStyles__FeaturedBlock",
+  componentId: "sc-yjbn2z-8"
+})(["background-color:", ";padding:", ";list-style:none;grid-column:4;grid-row:1/4;@media (min-width:", "px){", ";border-radius:0 border-width:0 0 0 1px;background:", ";padding:", " ", " ", " ", ";}section{display:grid;grid-template-columns:1fr 1fr;@media (min-width:", "px){display:flex;flex-direction:column;gap:", ";align-items:stretch;justify-content:flex-start;}}a{font-weight:", ";gap:", ";&:hover,&:focus{color:inherit;}}"], theme.color.background.sand.E01, getMultipliedSize(theme.base.baseHeight, 1), p => p.$collapseSize + 1, getElevationShadow({
+  elevation: 'high'
+}), theme.color.background.sand.default, getMultipliedSize(theme.base.baseHeight, 2), getMultipliedSize(theme.base.baseWidth, 2), getMultipliedSize(theme.base.baseHeight, 2), getMultipliedSize(theme.base.baseWidth, 3), p => p.$collapseSize + 1, getMultipliedSize(theme.base.baseHeight, 1.5), theme.fontWeight.bold, getMultipliedSize(theme.base.baseHeight, 1));
 
 export { DesktopMenuContainer, FeaturedBlock, HeaderIconContainer, LogoLink, MenuItem, MenuLink, MenuLinkWithChildren, MenuList, MobileMenuButton };