@dnanpm/styleguide 3.1.0 → 3.3.0

package/build/cjs/themes/styled.d.ts

@@ -152,7 +152,7 @@ declare const styled: import("styled-components").ThemedStyledInterface<{
         h1: string;
         h2: string;
     };
-    media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
+    media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
     radius: {
         default: string;
         s: string;
@@ -314,7 +314,7 @@ declare const styled: import("styled-components").ThemedStyledInterface<{
         h1: string;
         h2: string;
     };
-    media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
+    media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
     radius: {
         default: string;
         s: string;
@@ -476,7 +476,7 @@ declare const styled: import("styled-components").ThemedStyledInterface<{
         h1: string;
         h2: string;
     };
-    media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
+    media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
     radius: {
         default: string;
         s: string;
@@ -638,7 +638,7 @@ declare const styled: import("styled-components").ThemedStyledInterface<{
         h1: string;
         h2: string;
     };
-    media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
+    media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
     radius: {
         default: string;
         s: string;
@@ -800,7 +800,7 @@ declare const styled: import("styled-components").ThemedStyledInterface<{
         h1: string;
         h2: string;
     };
-    media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
+    media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
     radius: {
         default: string;
         s: string;
@@ -962,7 +962,7 @@ declare const styled: import("styled-components").ThemedStyledInterface<{
         h1: string;
         h2: string;
     };
-    media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
+    media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
     radius: {
         default: string;
         s: string;
@@ -1124,7 +1124,7 @@ declare const styled: import("styled-components").ThemedStyledInterface<{
         h1: string;
         h2: string;
     };
-    media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
+    media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
     radius: {
         default: string;
         s: string;

package/build/cjs/themes/theme.d.ts

@@ -152,7 +152,7 @@ declare const theme: {
         h1: string;
         h2: string;
     };
-    media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
+    media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
     radius: {
         default: string;
         s: string;

package/build/cjs/themes/themeComponents/navigation.d.ts

@@ -5,15 +5,22 @@ export declare const subMenuWidth = "13.75rem";
 export declare const subMenuWidthXl = "16.25rem";
 export declare const menuLevelsAmount = 3;
 export declare const mobileNavMaxHeight = "3.75rem";
+export declare const mobileNavMaxWidth = "480px";
+export declare const headerLogoSize = "3.75rem";
 export declare const mobileLogoSize = "3.75em";
 export declare const desktopLogoSize = "5.25em";
 export declare const menuItemMargin = "1rem";
 export declare const ribbonHeight = "1.5625rem";
 export declare const wideMenuBreakpoint = 1280;
 export declare const IconContainerWidth = "3.75rem";
+export declare const IconContainerMinWidth = "2.5rem";
+export declare const navMaxHeight = "3.75rem";
+export declare const headerMaxHeight = "6.125rem";
 declare const navigation: {
     menuLevelsAmount: number;
     mobileNavMaxHeight: string;
+    navMaxHeight: string;
+    headerLogoSize: string;
     mobileLogoSize: string;
     desktopLogoSize: string;
     menuItemMargin: string;
@@ -22,5 +29,6 @@ declare const navigation: {
     navIconSizeMobile: string;
     subMenuWidth: string;
     subMenuWidthXl: string;
+    headerMaxHeight: string;
 };
 export default navigation;

package/build/cjs/themes/themeComponents/navigation.js

@@ -9,15 +9,22 @@ const subMenuWidth = '13.75rem';
 const subMenuWidthXl = '16.25rem';
 const menuLevelsAmount = 3;
 const mobileNavMaxHeight = '3.75rem';
+const mobileNavMaxWidth = '480px';
+const headerLogoSize = '3.75rem';
 const mobileLogoSize = '3.75em';
 const desktopLogoSize = '5.25em';
 const menuItemMargin = '1rem';
 const ribbonHeight = '1.5625rem';
 const wideMenuBreakpoint = 1280;
-const IconContainerWidth = '3.75rem';
+const IconContainerWidth = '3.75rem'; // 60px
+const IconContainerMinWidth = '2.5rem'; // 40px
+const navMaxHeight = '3.75rem'; // 60px
+const headerMaxHeight = '6.125rem'; // 98px
 const navigation = {
     menuLevelsAmount,
     mobileNavMaxHeight,
+    navMaxHeight,
+    headerLogoSize,
     mobileLogoSize,
     desktopLogoSize,
     menuItemMargin,
@@ -26,18 +33,24 @@ const navigation = {
     navIconSizeMobile,
     subMenuWidth,
     subMenuWidthXl,
+    headerMaxHeight,
 };
 
+exports.IconContainerMinWidth = IconContainerMinWidth;
 exports.IconContainerWidth = IconContainerWidth;
 exports["default"] = navigation;
 exports.desktopLogoSize = desktopLogoSize;
 exports.desktopNavMaxHeight = desktopNavMaxHeight;
+exports.headerLogoSize = headerLogoSize;
+exports.headerMaxHeight = headerMaxHeight;
 exports.menuItemMargin = menuItemMargin;
 exports.menuLevelsAmount = menuLevelsAmount;
 exports.mobileLogoSize = mobileLogoSize;
 exports.mobileNavMaxHeight = mobileNavMaxHeight;
+exports.mobileNavMaxWidth = mobileNavMaxWidth;
 exports.navIconSize = navIconSize;
 exports.navIconSizeMobile = navIconSizeMobile;
+exports.navMaxHeight = navMaxHeight;
 exports.ribbonHeight = ribbonHeight;
 exports.subMenuWidth = subMenuWidth;
 exports.subMenuWidthXl = subMenuWidthXl;

package/build/cjs/utils/common.d.ts

@@ -1,5 +1,6 @@
 import type { ElevationLevel } from '../types/elevation.d';
-export declare const getElevationShadow: ({ elevation, shadow, }: {
+declare const getElevationShadow: ({ elevation, shadow, }: {
     elevation: ElevationLevel;
     shadow?: string | undefined;
 }) => string;
+export default getElevationShadow;

package/build/cjs/utils/common.js

@@ -25,4 +25,4 @@ const getElevationShadow = ({ elevation, shadow, }) => {
     return `${boxShadow}${clipPath}`;
 };
 
-exports.getElevationShadow = getElevationShadow;
+exports["default"] = getElevationShadow;

package/build/cjs/utils/createStyled.d.ts

@@ -1,6 +1,167 @@
 import * as styledComponents from 'styled-components';
-import type { ThemeInterface } from '../themes/theme';
-declare function createStyled<T extends ThemeInterface>(): {
+declare const createStyled: <T extends {
+    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;
+        };
+        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;
+    };
+}>() => {
     styled: styledComponents.ThemedStyledInterface<T>;
     css: styledComponents.ThemedCssFunction<T>;
     createGlobalStyle: <P extends object = {}>(first: TemplateStringsArray | styledComponents.CSSObject | styledComponents.InterpolationFunction<styledComponents.ThemedStyledProps<P, T>>, ...interpolations: styledComponents.Interpolation<styledComponents.ThemedStyledProps<P, T>>[]) => styledComponents.GlobalStyleComponent<P, T>;

package/build/cjs/utils/createStyled.js

@@ -24,9 +24,9 @@ function _interopNamespace(e) {
 
 var styled__namespace = /*#__PURE__*/_interopNamespace(styled);
 
-function createStyled() {
+const createStyled = () => {
     const { default: styled, css, createGlobalStyle, keyframes, ThemeProvider, ServerStyleSheet, } = styled__namespace;
     return { styled, css, createGlobalStyle, keyframes, ThemeProvider, ServerStyleSheet };
-}
+};
 
 exports["default"] = createStyled;

package/build/cjs/utils/styledUtils.d.ts

@@ -6,4 +6,4 @@ export declare const getDividedSize: (base: {
     value: number;
     unit: string;
 }, divide: number) => string;
-export declare const media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
+export declare const media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;

package/build/es/{assets/bundle-8de31ca3.css → build/assets/fonts/fonts.css}

@@ -1,129 +1,129 @@
-/* "DNA Text" font definition */
-@font-face {
-    font-family: 'DNA Text';
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAText-Regular.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAText-Regular.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Text';
-    font-style: normal;
-    font-weight: 500;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAText-Medium.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAText-Medium.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Text';
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAText-Bold.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAText-Bold.woff') format('woff');
-}
-
-/* "DNA Heading" font definition */
-@font-face {
-    font-family: 'DNA Heading';
-    font-style: normal;
-    font-weight: 600;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAHeading-DemiBold.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAHeading-DemiBold.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Heading';
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAHeading-Bold.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAHeading-Bold.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Heading';
-    font-style: normal;
-    font-weight: 900;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAHeading-Black.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAHeading-Black.woff') format('woff');
-}
-
-/* "DNA Numerals" font definition */
-@font-face {
-    font-family: 'DNA Numerals';
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNANumerals-Bold.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNANumerals-Bold.woff') format('woff');
-}
-
-/* Direct definitons of DNA fonts */
-@font-face {
-    font-family: 'DNA Text Regular';
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAText-Regular.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAText-Regular.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Text Medium';
-    font-style: normal;
-    font-weight: 500;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAText-Medium.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAText-Medium.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Text Bold';
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAText-Bold.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAText-Bold.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Heading Demi Bold';
-    font-style: normal;
-    font-weight: 600;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAHeading-DemiBold.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAHeading-DemiBold.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Heading Bold';
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAHeading-Bold.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAHeading-Bold.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Heading Black';
-    font-style: normal;
-    font-weight: 900;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAHeading-Black.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAHeading-Black.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Numerals Bold';
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNANumerals-Bold.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNANumerals-Bold.woff') format('woff');
-}
+/* "DNA Text" font definition */
+@font-face {
+    font-family: 'DNA Text';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAText-Regular.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAText-Regular.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Text';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAText-Medium.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAText-Medium.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Text';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAText-Bold.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAText-Bold.woff') format('woff');
+}
+
+/* "DNA Heading" font definition */
+@font-face {
+    font-family: 'DNA Heading';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAHeading-DemiBold.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAHeading-DemiBold.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Heading';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAHeading-Bold.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAHeading-Bold.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Heading';
+    font-style: normal;
+    font-weight: 900;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAHeading-Black.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAHeading-Black.woff') format('woff');
+}
+
+/* "DNA Numerals" font definition */
+@font-face {
+    font-family: 'DNA Numerals';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNANumerals-Bold.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNANumerals-Bold.woff') format('woff');
+}
+
+/* Direct definitons of DNA fonts */
+@font-face {
+    font-family: 'DNA Text Regular';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAText-Regular.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAText-Regular.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Text Medium';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAText-Medium.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAText-Medium.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Text Bold';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAText-Bold.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAText-Bold.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Heading Demi Bold';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAHeading-DemiBold.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAHeading-DemiBold.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Heading Bold';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAHeading-Bold.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAHeading-Bold.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Heading Black';
+    font-style: normal;
+    font-weight: 900;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNAHeading-Black.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNAHeading-Black.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Numerals Bold';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://banner.dna.fi/fonts/DNANumerals-Bold.woff2') format('woff2'),
+        url('https://banner.dna.fi/fonts/DNANumerals-Bold.woff') format('woff');
+}

package/build/es/components/Accordion/Accordion.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import React from 'react';
 import type { Props as AccordionItemProps } from '../AccordionItem/AccordionItem';
 interface Props extends Omit<AccordionItemProps, 'title' | 'id' | 'children' | 'onClick' | 'onKeyDown'> {
@@ -6,7 +7,7 @@ interface Props extends Omit<AccordionItemProps, 'title' | 'id' | 'children' | '
      *
      * @type AccordionItem
      */
-    children: React.ReactNode;
+    children: ReactNode;
     /**
      * Allows only one AccordionItem to be opened when set to true
      *

package/build/es/components/Accordion/Accordion.js

@@ -1,5 +1,5 @@
 import { __rest } from 'tslib';
-import React__default, { useState } from 'react';
+import React__default, { Children, isValidElement, useState } from 'react';
 import styled__default, { css } from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
@@ -27,8 +27,8 @@ const Accordion = (_a) => {
     const initialItemList = {};
     const getAccordionItemId = (index, title) => `${title.replace(/\s+/g, '')}-${index}`;
     if (props.isExpanded) {
-        React__default.Children.map(props.children, (child, index) => {
-            if (React__default.isValidElement(child) && child.type === AccordionItem) {
+        Children.map(props.children, (child, index) => {
+            if (isValidElement(child) && child.type === AccordionItem) {
                 initialItemList[getAccordionItemId(index, child.props.title)] = Boolean(props.isExpanded);
             }
         });
@@ -51,8 +51,8 @@ const Accordion = (_a) => {
             toggleExpanded((_b = (_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.id);
         }
     };
-    const accordionItems = React__default.Children.map(props.children, (child, index) => {
-        if (React__default.isValidElement(child) && child.type === AccordionItem) {
+    const accordionItems = Children.map(props.children, (child, index) => {
+        if (isValidElement(child) && child.type === AccordionItem) {
             const id = getAccordionItemId(index, child.props.title);
             return (React__default.createElement(AccordionItem, { id: id, key: id, type: type, title: child.props.title, isExpanded: itemList[id], highlightSelected: highlightSelected, hasCloseButton: hasCloseButton, openLabel: props.openLabel, closeLabel: props.closeLabel, onClick: handleClick, onKeyDown: handleKeyDown, className: child.props.className }, child.props.children));
         }