@dnanpm/styleguide 4.0.9 → 4.0.10

package/build/cjs/hooks/useWindowSize.js

@@ -4,27 +4,27 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 
-const useWindowSize = (collapseSize) => {
-    const [width, setWidth] = React.useState();
-    const [height, setHeight] = React.useState();
-    React.useEffect(() => {
-        if (typeof window === 'undefined') {
-            return () => { };
-        }
-        const updateSize = () => {
-            setWidth(window.innerWidth);
-            setHeight(window.innerHeight);
-        };
-        window.addEventListener('resize', updateSize);
-        // Call handler right away so state gets updated with initial window size
-        updateSize();
-        return () => window.removeEventListener('resize', updateSize);
-    }, []);
-    return {
-        width,
-        height,
-        isMobile: Boolean(collapseSize && width && width < collapseSize),
+const useWindowSize = collapseSize => {
+  const [width, setWidth] = React.useState();
+  const [height, setHeight] = React.useState();
+  React.useEffect(() => {
+    if (typeof window === 'undefined') {
+      return () => {};
+    }
+    const updateSize = () => {
+      setWidth(window.innerWidth);
+      setHeight(window.innerHeight);
     };
+    window.addEventListener('resize', updateSize);
+    // Call handler right away so state gets updated with initial window size
+    updateSize();
+    return () => window.removeEventListener('resize', updateSize);
+  }, []);
+  return {
+    width,
+    height,
+    isMobile: Boolean(collapseSize && width && width < collapseSize)
+  };
 };
 
 exports.default = useWindowSize;

package/build/cjs/themes/globalStyles.js

@@ -5,7 +5,7 @@ var styledUtils = require('../utils/styledUtils.js');
 var styledComponents = require('styled-components');
 var theme = require('./theme.js');
 
-const globalStyles = styledComponents.css `
+const globalStyles = styledComponents.css`
     *,
     *:before,
     *:after {
@@ -66,7 +66,7 @@ const globalStyles = styledComponents.css `
         font-size: ${theme.default.fontSize.h1S};
         line-height: ${theme.default.lineHeight.h1S};
 
-        ${() => styledUtils.media.md `
+        ${() => styledUtils.media.md`
             font-size: ${theme.default.fontSize.h1L};
             line-height: ${theme.default.lineHeight.h1L};
         `}
@@ -99,7 +99,7 @@ const globalStyles = styledComponents.css `
         font-size: ${theme.default.fontSize.h2S};
         line-height: ${theme.default.lineHeight.h2S};
 
-        ${() => styledUtils.media.md `
+        ${() => styledUtils.media.md`
             font-size: ${theme.default.fontSize.h2M};
             line-height: ${theme.default.lineHeight.h2M};
         `};
@@ -188,7 +188,7 @@ const globalStyles = styledComponents.css `
         opacity: 0;
     }
 `;
-styledComponents.createGlobalStyle `
+styledComponents.createGlobalStyle`
     ${globalStyles}
 `;
 

package/build/cjs/themes/gridTheme.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const gridTheme = {
-    gutter: '0.9375rem', // 15px
+  gutter: '0.9375rem' // 15px
 };
 
 exports.default = gridTheme;

package/build/cjs/themes/theme.js

@@ -16,18 +16,18 @@ var lineHeight = require('./themeComponents/lineHeight.js');
 var radius = require('./themeComponents/radius.js');
 
 const theme = {
-    base: base.default,
-    breakpoints: breakpoints.default,
-    color: color.default,
-    fontFamily: fontFamily.default,
-    fontSize: fontSize.default,
-    fontWeight: fontWeight.default,
-    form: forms.default,
-    grid: gridTheme.default,
-    layout: layout.default,
-    lineHeight: lineHeight.default,
-    media: styledUtils.media,
-    radius: radius.default,
+  base: base.default,
+  breakpoints: breakpoints.default,
+  color: color.default,
+  fontFamily: fontFamily.default,
+  fontSize: fontSize.default,
+  fontWeight: fontWeight.default,
+  form: forms.default,
+  grid: gridTheme.default,
+  layout: layout.default,
+  lineHeight: lineHeight.default,
+  media: styledUtils.media,
+  radius: radius.default
 };
 
 exports.default = theme;

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

@@ -3,14 +3,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const base = {
-    baseHeight: {
-        value: 0.625,
-        unit: 'rem',
-    }, // 10px
-    baseWidth: {
-        value: 0.625,
-        unit: 'rem',
-    }, // 10px
+  baseHeight: {
+    value: 0.625,
+    unit: 'rem'
+  },
+  // 10px
+  baseWidth: {
+    value: 0.625,
+    unit: 'rem'
+  } // 10px
 };
 
 exports.default = base;

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

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const breakpoints = {
-    xxl: 1440,
-    xl: 1200,
-    lg: 992,
-    md: 768,
-    sm: 576,
-    xs: 480,
+  xxl: 1440,
+  xl: 1200,
+  lg: 992,
+  md: 768,
+  sm: 576,
+  xs: 480
 };
 
 exports.default = breakpoints;

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

@@ -3,90 +3,92 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const defaultColors = {
-    pink: '#DA0070',
-    plum: '#551C3E',
-    white: '#FFFFFF',
-    black: '#121212',
+  pink: '#DA0070',
+  plum: '#551C3E',
+  white: '#FFFFFF',
+  black: '#121212'
 };
 const accentColors = {
-    lemon: '#FFF347',
-    sky: '#2ECAF0',
-    orange: '#FFA633',
+  lemon: '#FFF347',
+  sky: '#2ECAF0',
+  orange: '#FFA633'
 };
 const color = {
-    default: defaultColors,
-    accent: accentColors,
-    active: {
-        pink: '#F7007F',
+  default: defaultColors,
+  accent: accentColors,
+  active: {
+    pink: '#F7007F'
+  },
+  hover: {
+    pink: '#AE005A'
+  },
+  text: Object.assign(Object.assign({}, defaultColors), {
+    gray: '#505050'
+  }),
+  line: {
+    L01: '#948B89',
+    L02: '#D4D2CE',
+    L03: '#E7E5E3',
+    L04: '#EFEEED'
+  },
+  notification: {
+    info: '#0B7C99',
+    success: '#008500',
+    warning: '#EB6600',
+    error: '#DD0A0A'
+  },
+  background: {
+    sand: {
+      default: '#FDFBFA',
+      E01: '#F8F4F1',
+      E02: '#EDE8E1'
     },
-    hover: {
-        pink: '#AE005A',
+    pink: {
+      default: defaultColors.pink,
+      E01: '#FF82C1',
+      E02: '#FFBFDF'
     },
-    text: Object.assign(Object.assign({}, defaultColors), { gray: '#505050' }),
-    line: {
-        L01: '#948B89',
-        L02: '#D4D2CE',
-        L03: '#E7E5E3',
-        L04: '#EFEEED',
+    plum: {
+      default: defaultColors.plum,
+      E01: '#69214C',
+      E02: '#792A59'
     },
-    notification: {
-        info: '#0B7C99',
-        success: '#008500',
-        warning: '#EB6600',
-        error: '#DD0A0A',
+    lemon: {
+      default: accentColors.lemon,
+      E01: '#FFF9A3',
+      E02: '#FFFABA'
     },
-    background: {
-        sand: {
-            default: '#FDFBFA',
-            E01: '#F8F4F1',
-            E02: '#EDE8E1',
-        },
-        pink: {
-            default: defaultColors.pink,
-            E01: '#FF82C1',
-            E02: '#FFBFDF',
-        },
-        plum: {
-            default: defaultColors.plum,
-            E01: '#69214C',
-            E02: '#792A59',
-        },
-        lemon: {
-            default: accentColors.lemon,
-            E01: '#FFF9A3',
-            E02: '#FFFABA',
-        },
-        sky: {
-            default: accentColors.sky,
-            E01: '#77DCF5',
-            E02: '#96E4F8',
-        },
-        orange: {
-            default: accentColors.orange,
-            E01: '#FFCA85',
-            E02: '#FFDBAD',
-        },
-        white: {
-            default: defaultColors.white,
-        },
+    sky: {
+      default: accentColors.sky,
+      E01: '#77DCF5',
+      E02: '#96E4F8'
     },
-    focus: {
-        dark: '#0064E2',
-        light: '#D8E9FF',
-    },
-    transparency: {
-        T0: '00',
-        T10: '1A',
-        T20: '33',
-        T30: '4D',
-        T40: '66',
-        T50: '80',
-        T60: '99',
-        T70: 'B3',
-        T80: 'CC',
-        T90: 'E6',
-        T100: 'FF',
+    orange: {
+      default: accentColors.orange,
+      E01: '#FFCA85',
+      E02: '#FFDBAD'
     },
+    white: {
+      default: defaultColors.white
+    }
+  },
+  focus: {
+    dark: '#0064E2',
+    light: '#D8E9FF'
+  },
+  transparency: {
+    T0: '00',
+    T10: '1A',
+    T20: '33',
+    T30: '4D',
+    T40: '66',
+    T50: '80',
+    T60: '99',
+    T70: 'B3',
+    T80: 'CC',
+    T90: 'E6',
+    T100: 'FF'
+  }
 };
 
 exports.default = color;

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const fontFamily = {
-    default: `"DNA Text", "Helvetica Neue", Helvetica, Arial, sans-serif`,
-    heading: `"DNA Heading", "Helvetica Neue", Helvetica, Arial, sans-serif`,
-    numerals: `"DNA Numerals", "DNA Text", "Helvetica Neue", Helvetica, Arial, sans-serif`,
+  default: `"DNA Text", "Helvetica Neue", Helvetica, Arial, sans-serif`,
+  heading: `"DNA Heading", "Helvetica Neue", Helvetica, Arial, sans-serif`,
+  numerals: `"DNA Numerals", "DNA Text", "Helvetica Neue", Helvetica, Arial, sans-serif`
 };
 
 exports.default = fontFamily;

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

@@ -3,21 +3,37 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const fontSize = {
-    default: '1rem', // 16px
-    xl: '1.25rem', // 20px
-    l: '1.125rem', // 18px
-    s: '0.875rem', // 14px
-    xs: '0.75rem', // 12px
-    h1XL: '2.875rem', // 46px
-    h1L: '2.5rem', // 40px
-    h1M: '2.125rem', // 34px
-    h1S: '1.875rem', // 30px
-    h2M: '1.875rem', // 30px
-    h2S: '1.625rem', // 26px
-    h3: '1.5rem', // 24px
-    h4: '1.25rem', // 20px
-    h5: '1rem', // 16px
+  default: '1rem',
+  // 16px
+  xl: '1.25rem',
+  // 20px
+  l: '1.125rem',
+  // 18px
+  s: '0.875rem',
+  // 14px
+  xs: '0.75rem',
+  // 12px
+  h1XL: '2.875rem',
+  // 46px
+  h1L: '2.5rem',
+  // 40px
+  h1M: '2.125rem',
+  // 34px
+  h1S: '1.875rem',
+  // 30px
+  h2M: '1.875rem',
+  // 30px
+  h2S: '1.625rem',
+  // 26px
+  h3: '1.5rem',
+  // 24px
+  h4: '1.25rem',
+  // 20px
+  h5: '1rem' // 16px
 };
-var fontSize$1 = Object.assign({ h1: fontSize.h1L, h2: fontSize.h2M }, fontSize);
+var fontSize$1 = Object.assign({
+  h1: fontSize.h1L,
+  h2: fontSize.h2M
+}, fontSize);
 
 exports.default = fontSize$1;

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

@@ -3,22 +3,22 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const fontWeight = {
-    /**
-     * 400
-     */
-    book: 400,
-    /**
-     * 500
-     */
-    medium: 500,
-    /**
-     * 700
-     */
-    bold: 700,
-    /**
-     * 900
-     */
-    black: 900,
+  /**
+   * 400
+   */
+  book: 400,
+  /**
+   * 500
+   */
+  medium: 500,
+  /**
+   * 700
+   */
+  bold: 700,
+  /**
+   * 900
+   */
+  black: 900
 };
 
 exports.default = fontWeight;

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

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const forms = {
-    smallSelectWidth: '12rem', // 192px
-    smallSelectHeight: '2.5rem', // 40px
+  smallSelectWidth: '12rem',
+  // 192px
+  smallSelectHeight: '2.5rem' // 40px
 };
 
 exports.default = forms;

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

@@ -14,34 +14,34 @@ Object.defineProperty(exports, '__esModule', { value: true });
  *     `;
  */
 const layout = {
-    /** Page-level layout constraints */
-    page: {
-        /** Minimum page width: 320px */
-        minWidth: 320,
-        /** Maximum page width: 2560px */
-        maxWidth: 2560,
-    },
-    /** Content area layout constraints */
-    content: {
-        /** Content max-width values (pure content area without padding) */
-        maxWidth: {
-            /** Wide/Normal content: 1200px */
-            wide: 1200,
-            /** Medium content: 860px */
-            medium: 860,
-            /** Narrow/Small content: 640px */
-            narrow: 640,
-        },
-        /** Container max-width values (content + 80px padding on each side) */
-        containerMaxWidth: {
-            /** Wide container: 1280px (1200 + 80) */
-            wide: 1280,
-            /** Medium container: 940px (860 + 80) */
-            medium: 940,
-            /** Narrow container: 720px (640 + 80) */
-            narrow: 720,
-        },
+  /** Page-level layout constraints */
+  page: {
+    /** Minimum page width: 320px */
+    minWidth: 320,
+    /** Maximum page width: 2560px */
+    maxWidth: 2560
+  },
+  /** Content area layout constraints */
+  content: {
+    /** Content max-width values (pure content area without padding) */
+    maxWidth: {
+      /** Wide/Normal content: 1200px */
+      wide: 1200,
+      /** Medium content: 860px */
+      medium: 860,
+      /** Narrow/Small content: 640px */
+      narrow: 640
     },
+    /** Container max-width values (content + 80px padding on each side) */
+    containerMaxWidth: {
+      /** Wide container: 1280px (1200 + 80) */
+      wide: 1280,
+      /** Medium container: 940px (860 + 80) */
+      medium: 940,
+      /** Narrow container: 720px (640 + 80) */
+      narrow: 720
+    }
+  }
 };
 
 exports.default = layout;

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

@@ -3,22 +3,38 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const lineHeight = {
-    default: '1.5rem', // 24px
-    xl: '1.625rem', // 26px
-    s: '1.125rem', // 18px
-    xs: '1rem', // 16px
-    xxs: '0.875rem', // 14px
-    auto: 'inherit',
-    h1XL: '3rem', // 48px
-    h1L: '2.875rem', // 46px
-    h1M: '2.5rem', // 40px
-    h1S: '2.25rem', // 36px
-    h2M: '2.25rem', // 36px
-    h2S: '2rem', // 32px
-    h3: '1.875rem', // 30px
-    h4: '1.5rem', // 24px
-    h5: '1rem', // 16px
+  default: '1.5rem',
+  // 24px
+  xl: '1.625rem',
+  // 26px
+  s: '1.125rem',
+  // 18px
+  xs: '1rem',
+  // 16px
+  xxs: '0.875rem',
+  // 14px
+  auto: 'inherit',
+  h1XL: '3rem',
+  // 48px
+  h1L: '2.875rem',
+  // 46px
+  h1M: '2.5rem',
+  // 40px
+  h1S: '2.25rem',
+  // 36px
+  h2M: '2.25rem',
+  // 36px
+  h2S: '2rem',
+  // 32px
+  h3: '1.875rem',
+  // 30px
+  h4: '1.5rem',
+  // 24px
+  h5: '1rem' // 16px
 };
-var lineHeight$1 = Object.assign({ h1: lineHeight.h1L, h2: lineHeight.h2M }, lineHeight);
+var lineHeight$1 = Object.assign({
+  h1: lineHeight.h1L,
+  h2: lineHeight.h2M
+}, lineHeight);
 
 exports.default = lineHeight$1;

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

@@ -19,19 +19,19 @@ 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,
+  menuLevelsAmount,
+  mobileNavMaxHeight,
+  navMaxHeight,
+  headerLogoSize,
+  mobileLogoSize,
+  desktopLogoSize,
+  menuItemMargin,
+  desktopNavMaxHeight,
+  navIconSize,
+  navIconSizeMobile,
+  subMenuWidth,
+  subMenuWidthXl,
+  headerMaxHeight
 };
 
 exports.IconContainerMinWidth = IconContainerMinWidth;

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

@@ -3,32 +3,32 @@
 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',
+  /**
+   * 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;