@dnanpm/styleguide 3.7.0 → 3.7.2

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

@@ -0,0 +1,20 @@
+declare const _default: {
+    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;
+};
+export default _default;

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

@@ -2,23 +2,23 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const lineHeight = {
-    default: '1.5rem',
-    xl: '1.625rem',
-    s: '1.125rem',
-    xs: '1rem',
-    xxs: '0.875rem',
-    auto: 'inherit',
-    h1XL: '3rem',
-    h1L: '2.875rem',
-    h1M: '2.5rem',
-    h1S: '2.25rem',
-    h2M: '2.25rem',
-    h2S: '2rem',
-    h3: '1.875rem',
-    h4: '1.5rem',
-    h5: '1rem', // 16px
-};
+const lineHeight = {
+    default: '1.5rem',
+    xl: '1.625rem',
+    s: '1.125rem',
+    xs: '1rem',
+    xxs: '0.875rem',
+    auto: 'inherit',
+    h1XL: '3rem',
+    h1L: '2.875rem',
+    h1M: '2.5rem',
+    h1S: '2.25rem',
+    h2M: '2.25rem',
+    h2S: '2rem',
+    h3: '1.875rem',
+    h4: '1.5rem',
+    h5: '1rem', // 16px
+};
 var lineHeight$1 = Object.assign({ h1: lineHeight.h1L, h2: lineHeight.h2M }, lineHeight);
 
 exports["default"] = lineHeight$1;

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

@@ -0,0 +1,34 @@
+export declare const desktopNavMaxHeight = "5.25rem";
+export declare const navIconSize = "1.5rem";
+export declare const navIconSizeMobile = "2rem";
+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;
+    desktopNavMaxHeight: string;
+    navIconSize: string;
+    navIconSizeMobile: string;
+    subMenuWidth: string;
+    subMenuWidthXl: string;
+    headerMaxHeight: string;
+};
+export default navigation;

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

@@ -2,38 +2,38 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const desktopNavMaxHeight = '5.25rem';
-const navIconSize = '1.5rem';
-const navIconSizeMobile = '2rem';
-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'; // 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,
-    desktopNavMaxHeight,
-    navIconSize,
-    navIconSizeMobile,
-    subMenuWidth,
-    subMenuWidthXl,
-    headerMaxHeight,
+const desktopNavMaxHeight = '5.25rem';
+const navIconSize = '1.5rem';
+const navIconSizeMobile = '2rem';
+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'; // 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,
+    desktopNavMaxHeight,
+    navIconSize,
+    navIconSizeMobile,
+    subMenuWidth,
+    subMenuWidthXl,
+    headerMaxHeight,
 };
 
 exports.IconContainerMinWidth = IconContainerMinWidth;

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

@@ -0,0 +1,29 @@
+declare const radius: {
+    /**
+     * 0.5rem (8px)
+     */
+    default: string;
+    /**
+     * 0.25rem (4px)
+     */
+    s: string;
+    /**
+     * 0.125rem (2px)
+     */
+    xs: string;
+    /**
+     * 50%
+     *
+     * Visually rendered with radius of 50% of element width AND 50% of element height
+     * E.g.: Element with width 100px and height 32px will be rendered with radius 50px on "x" axis and 16px on "y" axis
+     */
+    circle: string;
+    /**
+     * 100rem
+     *
+     * Visually rendered with radius of half the size of the smaller side of element due to https://www.w3.org/TR/css-backgrounds-3/#corner-overlap rule
+     * E.g.: Element with width 100px and height 32px will be rendered with radius 16px on both axis (all corners)
+     */
+    pill: string;
+};
+export default radius;

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

@@ -2,33 +2,33 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const radius = {
-    /**
-     * 0.5rem (8px)
-     */
-    default: '0.5rem',
-    /**
-     * 0.25rem (4px)
-     */
-    s: '0.25rem',
-    /**
-     * 0.125rem (2px)
-     */
-    xs: '0.125rem',
-    /**
-     * 50%
-     *
-     * Visually rendered with radius of 50% of element width AND 50% of element height
-     * E.g.: Element with width 100px and height 32px will be rendered with radius 50px on "x" axis and 16px on "y" axis
-     */
-    circle: '50%',
-    /**
-     * 100rem
-     *
-     * Visually rendered with radius of half the size of the smaller side of element due to https://www.w3.org/TR/css-backgrounds-3/#corner-overlap rule
-     * E.g.: Element with width 100px and height 32px will be rendered with radius 16px on both axis (all corners)
-     */
-    pill: '100rem',
+const radius = {
+    /**
+     * 0.5rem (8px)
+     */
+    default: '0.5rem',
+    /**
+     * 0.25rem (4px)
+     */
+    s: '0.25rem',
+    /**
+     * 0.125rem (2px)
+     */
+    xs: '0.125rem',
+    /**
+     * 50%
+     *
+     * Visually rendered with radius of 50% of element width AND 50% of element height
+     * E.g.: Element with width 100px and height 32px will be rendered with radius 50px on "x" axis and 16px on "y" axis
+     */
+    circle: '50%',
+    /**
+     * 100rem
+     *
+     * Visually rendered with radius of half the size of the smaller side of element due to https://www.w3.org/TR/css-backgrounds-3/#corner-overlap rule
+     * E.g.: Element with width 100px and height 32px will be rendered with radius 16px on both axis (all corners)
+     */
+    pill: '100rem',
 };
 
 exports["default"] = radius;

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

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

package/build/cjs/utils/common.js

@@ -4,25 +4,25 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var theme = require('../themes/theme.js');
 
-const getElevationShadow = ({ elevation, shadow, }) => {
-    const shadowConfig = {
-        none: [0, 0, 0],
-        low: [0, 2, 16, `${theme["default"].color.default.black}0f`],
-        high: [0, 6, 24, `${theme["default"].color.default.black}14`],
-        extraHigh: [0, 8, 64, `${theme["default"].color.default.black}29`],
-    };
-    const sidesMap = shadow === null || shadow === void 0 ? void 0 : shadow.split(' ').map(Number);
-    const clipSize = sidesMap &&
-        shadowConfig[elevation]
-            .filter((arg) => typeof arg === 'number')
-            .reduce((sum, v) => sum + v);
-    const boxShadow = `box-shadow: ${shadowConfig[elevation].join('px ')};`;
-    const clipPath = sidesMap && clipSize
-        ? `clip-path: inset(${sidesMap
-            .map(val => (val ? `-${clipSize}px` : '0px'))
-            .join(' ')});`
-        : '';
-    return `${boxShadow}${clipPath}`;
+const getElevationShadow = ({ elevation, shadow, }) => {
+    const shadowConfig = {
+        none: [0, 0, 0],
+        low: [0, 2, 16, `${theme["default"].color.default.black}0f`],
+        high: [0, 6, 24, `${theme["default"].color.default.black}14`],
+        extraHigh: [0, 8, 64, `${theme["default"].color.default.black}29`],
+    };
+    const sidesMap = shadow === null || shadow === void 0 ? void 0 : shadow.split(' ').map(Number);
+    const clipSize = sidesMap &&
+        shadowConfig[elevation]
+            .filter((arg) => typeof arg === 'number')
+            .reduce((sum, v) => sum + v);
+    const boxShadow = `box-shadow: ${shadowConfig[elevation].join('px ')};`;
+    const clipPath = sidesMap && clipSize
+        ? `clip-path: inset(${sidesMap
+            .map(val => (val ? `-${clipSize}px` : '0px'))
+            .join(' ')});`
+        : '';
+    return `${boxShadow}${clipPath}`;
 };
 
 exports["default"] = getElevationShadow;

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

@@ -0,0 +1,172 @@
+import * as styledComponents from 'styled-components';
+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>;
+    keyframes: (strings: TemplateStringsArray | styledComponents.CSSKeyframes, ...interpolations: styledComponents.SimpleInterpolation[]) => styledComponents.Keyframes;
+    ThemeProvider: styledComponents.BaseThemeProviderComponent<T, T>;
+    ServerStyleSheet: typeof styledComponents.ServerStyleSheet;
+};
+export default createStyled;

package/build/cjs/utils/createStyled.js

@@ -24,9 +24,9 @@ function _interopNamespace(e) {
 
 var styled__namespace = /*#__PURE__*/_interopNamespace(styled);
 
-const createStyled = () => {
-    const { default: styled, css, createGlobalStyle, keyframes, ThemeProvider, ServerStyleSheet, } = styled__namespace;
-    return { styled, css, createGlobalStyle, keyframes, ThemeProvider, ServerStyleSheet };
+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

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

package/build/cjs/utils/styledUtils.js

@@ -5,15 +5,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var styled = require('../themes/styled.js');
 var breakpoints = require('../themes/themeComponents/breakpoints.js');
 
-const getMultipliedSize = (base, multiply) => `${multiply * base.value}${base.unit}`;
-const getDividedSize = (base, divide) => `${base.value / divide}${base.unit}`;
-const media = Object.keys(breakpoints["default"]).reduce((acc, label) => {
+const getMultipliedSize = (base, multiply) => `${multiply * base.value}${base.unit}`;
+const getDividedSize = (base, divide) => `${base.value / divide}${base.unit}`;
+const media = Object.keys(breakpoints["default"]).reduce((acc, label) => {
     acc[label] = (literals, ...placeholders) => styled.css `
             @media (min-width: ${breakpoints["default"][label]}px) {
                 ${styled.css(literals, ...placeholders)};
             }
-        `.join('');
-    return acc;
+        `.join('');
+    return acc;
 }, {});
 
 exports.getDividedSize = getDividedSize;

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

@@ -0,0 +1,21 @@
+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'> {
+    /**
+     * Content of Accordion
+     *
+     * @type AccordionItem
+     */
+    children: ReactNode;
+    /**
+     * Allows only one AccordionItem to be opened when set to true
+     *
+     * @default false
+     */
+    autoCollapsible?: boolean;
+}
+/** @visibleName Accordion */
+declare const Accordion: ({ type, autoCollapsible, highlightSelected, hasCloseButton, ...props }: Props) => React.JSX.Element | null;
+/** @component */
+export default Accordion;

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

@@ -6,7 +6,7 @@ import { getMultipliedSize } from '../../utils/styledUtils.js';
 import AccordionItem from '../AccordionItem/AccordionItem.js';
 
 const AccordionContainer = styled__default.div `
-    ${p => p.type === 'box' &&
+    ${p => p.type === 'box' &&
     css `
             & > * {
                 margin: ${getMultipliedSize(theme.base.baseHeight, 1)} 0;
@@ -20,48 +20,48 @@ const AccordionContainer = styled__default.div `
                 margin-bottom: 0;
             }
         `}
-`;
-/** @visibleName Accordion */
-const Accordion = (_a) => {
-    var { type = 'box', autoCollapsible = false, highlightSelected = type === 'panel', hasCloseButton = false } = _a, props = __rest(_a, ["type", "autoCollapsible", "highlightSelected", "hasCloseButton"]);
-    const initialItemList = {};
-    const getAccordionItemId = (index, title) => `${title.replace(/\s+/g, '')}-${index}`;
-    if (props.isExpanded) {
-        Children.map(props.children, (child, index) => {
-            if (isValidElement(child) && child.type === AccordionItem) {
-                initialItemList[getAccordionItemId(index, child.props.title)] = Boolean(props.isExpanded);
-            }
-        });
-    }
-    const [itemList, setItemList] = useState(initialItemList);
-    const toggleExpanded = (currentItemId) => {
-        if (currentItemId) {
-            const currentItemState = itemList[currentItemId];
-            setItemList(Object.assign(Object.assign({}, (autoCollapsible ? {} : itemList)), { [currentItemId]: !currentItemState }));
-        }
-    };
-    const handleClick = (e) => {
-        var _a, _b;
-        toggleExpanded((_b = (_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.id);
-    };
-    const handleKeyDown = (e) => {
-        var _a, _b;
-        if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            toggleExpanded((_b = (_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.id);
-        }
-    };
-    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));
-        }
-        return null;
-    });
-    if (!accordionItems) {
-        return null;
-    }
-    return (React__default.createElement(AccordionContainer, { type: type, className: props.className }, accordionItems));
+`;
+/** @visibleName Accordion */
+const Accordion = (_a) => {
+    var { type = 'box', autoCollapsible = false, highlightSelected = type === 'panel', hasCloseButton = false } = _a, props = __rest(_a, ["type", "autoCollapsible", "highlightSelected", "hasCloseButton"]);
+    const initialItemList = {};
+    const getAccordionItemId = (index, title) => `${title.replace(/\s+/g, '')}-${index}`;
+    if (props.isExpanded) {
+        Children.map(props.children, (child, index) => {
+            if (isValidElement(child) && child.type === AccordionItem) {
+                initialItemList[getAccordionItemId(index, child.props.title)] = Boolean(props.isExpanded);
+            }
+        });
+    }
+    const [itemList, setItemList] = useState(initialItemList);
+    const toggleExpanded = (currentItemId) => {
+        if (currentItemId) {
+            const currentItemState = itemList[currentItemId];
+            setItemList(Object.assign(Object.assign({}, (autoCollapsible ? {} : itemList)), { [currentItemId]: !currentItemState }));
+        }
+    };
+    const handleClick = (e) => {
+        var _a, _b;
+        toggleExpanded((_b = (_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.id);
+    };
+    const handleKeyDown = (e) => {
+        var _a, _b;
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            toggleExpanded((_b = (_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.id);
+        }
+    };
+    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));
+        }
+        return null;
+    });
+    if (!accordionItems) {
+        return null;
+    }
+    return (React__default.createElement(AccordionContainer, { type: type, className: props.className }, accordionItems));
 };
 
 export { Accordion as default };