@rededor/cura 0.5.4 → 1.0.0-alpha.0

package/dist/components/index.js

@@ -1,12 +1,18 @@
 import { CuraAccordion } from './cura-accordion.js';
 import { CuraAccordionItem } from './cura-accordion-item.js';
 import { CuraAlert } from './cura-alert.js';
+import { CuraAvatar } from './cura-avatar.js';
 import { CuraButton } from './cura-button.js';
 import { CuraButtonOutline } from './cura-button-outline.js';
 import { CuraButtonSelect } from './cura-button-select.js';
 import { CuraButtonTransparent } from './cura-button-transparent.js';
+import { CuraCalendar } from './cura-calendar.js';
+import { CuraCard } from './cura-card.js';
 import { CuraCheckbox } from './cura-checkbox.js';
 import { CuraDisplay } from './cura-display.js';
+import { CuraDropdownSearch } from './cura-dropdown-search.js';
+import { CuraDropdownSearchOption } from './cura-dropdown-search-option.js';
+import { CuraDropdownSearchOptionTitle } from './cura-dropdown-search-option-title.js';
 import { CuraHeading } from './cura-heading.js';
 import { CuraIcon } from './cura-icon.js';
 import { CuraIconsView } from './cura-icons-view.js';
@@ -16,548 +22,558 @@ import { CuraLoaderCircle } from './cura-loader-circle.js';
 import { CuraPageTemplate } from './cura-page-template.js';
 import { CuraParagraph } from './cura-paragraph.js';
 import { CuraRadio } from './cura-radio.js';
+import { CuraSelect } from './cura-select.js';
+import { CuraSelectOption } from './cura-select-option.js';
 import { CuraSwitch } from './cura-switch.js';
-export { setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
+export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
 
 /**
  * Cura Default Theme
  */
 const ThemeDefault = {
-  /* Colors */
-  color: {
-    primary: {
-      '100': '113,197,232',
-      '300': '68,142,205',
-      '500': '0,61,165',
-      '700': '0,48,117',
-      '900': '0,40,85'
+    /* Colors */
+    color: {
+        primary: {
+            '100': '113,197,232',
+            '300': '68,142,205',
+            '500': '0,61,165',
+            '700': '0,48,117',
+            '900': '0,40,85'
+        },
+        secondary: {
+            '100': '245,236,227',
+            '300': '221,192,162',
+            '500': '204,160,116',
+            '700': '136,107,77',
+            '900': '41,32,23'
+        },
+        accent: {
+            '100': '255,194,123',
+            '300': '255,168,74',
+            '500': '255,130,0',
+            '700': '215,114,10',
+            '900': '155,90,26'
+        }
     },
-    secondary: {
-      '100': '245,236,227',
-      '300': '221,192,162',
-      '500': '204,160,116',
-      '700': '136,107,77',
-      '900': '41,32,23'
+    /* Spacing */
+    spacing: {
+        base: 4,
     },
-    accent: {
-      '100': '255,194,123',
-      '300': '255,168,74',
-      '500': '255,130,0',
-      '700': '215,114,10',
-      '900': '155,90,26'
+    /* Fonts */
+    font: {
+        size: '14px',
+        color: '#4A4A4A',
+        body: "'Roboto', Arial, Helvetica, sans-serif",
+        heading: "'Roboto', Arial, Helvetica, sans-serif",
+        display: "'Roboto', Arial, Helvetica, sans-serif",
+        weights: {
+            thin: 100,
+            light: 300,
+            regular: 400,
+            medium: 500,
+            bold: 700,
+            black: 900
+        },
     }
-  },
-  /* Spacing */
-  spacing: {
-    base: 4,
-  },
-  /* Fonts */
-  font: {
-    size: '14px',
-    color: '#4A4A4A',
-    body: "'Roboto', Arial, Helvetica, sans-serif",
-    heading: "'Roboto', Arial, Helvetica, sans-serif",
-    display: "'Roboto', Arial, Helvetica, sans-serif",
-    weights: {
-      thin: 100,
-      light: 300,
-      regular: 400,
-      medium: 500,
-      bold: 700,
-      black: 900
-    },
-  }
 };
 
 /**
  * Maternity Theme
  */
 const ThemeMaternity = Object.assign(Object.assign({}, ThemeDefault), { 
-  /* Custom */
-  /* Colors */
-  color: {
-    primary: {
-      '100': '248,227,226',
-      '300': '255,179,171',
-      '500': '218,113,111',
-      '700': '145,75,74',
-      '900': '73,38,37'
-    },
-    secondary: {
-      '100': '253,251,249',
-      '300': '247,244,238',
-      '500': '245,236,227',
-      '700': '204,197,189',
-      '900': '163,157,151'
-    },
-    accent: {
-      '100': '236,239,249',
-      '300': '133,153,203',
-      '500': '11,20,151',
-      '700': '7,13,101',
-      '900': '4,7,50'
-    }
-  }, font: {
-    size: '14px',
-    color: '#4A4A4A',
-    body: "'Gotham', Arial, Helvetica, sans-serif",
-    heading: "'Gotham', Arial, Helvetica, sans-serif",
-    display: "'Gotham', Arial, Helvetica, sans-serif",
-    weights: {
-      thin: 325,
-      light: 325,
-      regular: 325,
-      medium: 350,
-      bold: 400,
-      black: 425
-    },
-  } });
+    /* Custom */
+    /* Colors */
+    color: {
+        primary: {
+            '100': '248,227,226',
+            '300': '255,179,171',
+            '500': '218,113,111',
+            '700': '145,75,74',
+            '900': '73,38,37'
+        },
+        secondary: {
+            '100': '253,251,249',
+            '300': '247,244,238',
+            '500': '245,236,227',
+            '700': '204,197,189',
+            '900': '163,157,151'
+        },
+        accent: {
+            '100': '236,239,249',
+            '300': '133,153,203',
+            '500': '11,20,151',
+            '700': '7,13,101',
+            '900': '4,7,50'
+        }
+    }, font: {
+        size: '14px',
+        color: '#4A4A4A',
+        body: "'Gotham', Arial, Helvetica, sans-serif",
+        heading: "'Gotham', Arial, Helvetica, sans-serif",
+        display: "'Gotham', Arial, Helvetica, sans-serif",
+        weights: {
+            thin: 325,
+            light: 325,
+            regular: 325,
+            medium: 350,
+            bold: 400,
+            black: 425
+        },
+    } });
 
 /**
  * Oncology Theme
  */
 const ThemeOncology = Object.assign(Object.assign({}, ThemeDefault), { 
-  /* Custom */
-  /* Colors */
-  color: {
-    primary: {
-      '100': '170,190,225',
-      '300': '85,126,196',
-      '500': '0,61,166',
-      '700': '0,41,111',
-      '900': '0,12,33'
-    },
-    secondary: {
-      '100': '205,215,227',
-      '300': '155,175,199',
-      '500': '104,134,171',
-      '700': '54,95,143',
-      '900': '4,54,115',
-    },
-    accent: {
-      '100': '153,207,255',
-      '300': '71,169,255',
-      '500': '0,131,245',
-      '700': '0,109,204',
-      '900': '0,88,164',
-    },
-    aux: {
-      '100': '218,242,239',
-      '300': '132,212,202',
-      '500': '71,191,176',
-      '700': '33,100,92',
-      '900': '14,38,35',
-    },
-  }, font: {
-    size: '14px',
-    color: '#4A4A4A',
-    body: "'Hanken Grotesk', Arial, Helvetica, sans-serif",
-    heading: "'Hanken Grotesk', Arial, Helvetica, sans-serif",
-    display: "'Hanken Grotesk', Arial, Helvetica, sans-serif",
-    weights: {
-      thin: 100,
-      light: 300,
-      regular: 400,
-      medium: 500,
-      bold: 700,
-      black: 900
-    },
-  } });
+    /* Custom */
+    /* Colors */
+    color: {
+        primary: {
+            '100': '170,190,225',
+            '300': '85,126,196',
+            '500': '0,61,166',
+            '700': '0,41,111',
+            '900': '0,12,33'
+        },
+        secondary: {
+            '100': '205,215,227',
+            '300': '155,175,199',
+            '500': '104,134,171',
+            '700': '54,95,143',
+            '900': '4,54,115',
+        },
+        accent: {
+            '100': '153,207,255',
+            '300': '71,169,255',
+            '500': '0,131,245',
+            '700': '0,109,204',
+            '900': '0,88,164',
+        },
+        aux: {
+            '100': '218,242,239',
+            '300': '132,212,202',
+            '500': '71,191,176',
+            '700': '33,100,92',
+            '900': '14,38,35',
+        },
+    }, font: {
+        size: '14px',
+        color: '#4A4A4A',
+        body: "'Hanken Grotesk', Arial, Helvetica, sans-serif",
+        heading: "'Hanken Grotesk', Arial, Helvetica, sans-serif",
+        display: "'Hanken Grotesk', Arial, Helvetica, sans-serif",
+        weights: {
+            thin: 100,
+            light: 300,
+            regular: 400,
+            medium: 500,
+            bold: 700,
+            black: 900
+        },
+    } });
 
 /**
  * Legacy Default Theme
  */
 const ThemeLegacyDefault = Object.assign(Object.assign({}, ThemeDefault), { 
-  /* Custom */
-  /* Colors */
-  color: {
-    primary: {
-      '100': '204,217,231',
-      '300': '85,128,174',
-      '500': '0,65,134',
-      '700': '0,43,89',
-      '900': '0,13,27'
-    },
-    secondary: {
-      '100': '238,232,206',
-      '300': '198,180,92',
-      '500': '170,142,11',
-      '700': '113,95,7',
-      '900': '34,28,2'
-    },
-    accent: {
-      '100': '249,232,213',
-      '300': '228,160,79',
-      '500': '223,141,44',
-      '700': '149,94,29',
-      '900': '45,28,9'
-    }
-  } });
+    /* Custom */
+    /* Colors */
+    color: {
+        primary: {
+            '100': '204,217,231',
+            '300': '85,128,174',
+            '500': '0,65,134',
+            '700': '0,43,89',
+            '900': '0,13,27'
+        },
+        secondary: {
+            '100': '238,232,206',
+            '300': '198,180,92',
+            '500': '170,142,11',
+            '700': '113,95,7',
+            '900': '34,28,2'
+        },
+        accent: {
+            '100': '249,232,213',
+            '300': '228,160,79',
+            '500': '223,141,44',
+            '700': '149,94,29',
+            '900': '45,28,9'
+        }
+    } });
 
 const ThemePresets = {
-  'default': ThemeDefault,
-  'maternidade': ThemeMaternity,
-  'oncologia': ThemeOncology,
-  'legacyDefault': ThemeLegacyDefault
+    'default': ThemeDefault,
+    'maternidade': ThemeMaternity,
+    'oncologia': ThemeOncology,
+    'legacyDefault': ThemeLegacyDefault
 };
 
 /**
  * Static
  */
 const Static = {
-  /* Colors */
-  color: {
-    success: {
-      '100': '223,246,233',
-      '300': '148,225,181',
-      '500': '95,210,144',
-      '700': '49,115,77',
-      '900': '19,42,29',
-    },
-    info: {
-      '100': '207,226,255',
-      '300': '149,191,255',
-      '500': '110,168,255',
-      '700': '66,100,153',
-      '900': '37,56,85',
-    },
-    error: {
-      '100': '251,221,221',
-      '300': '242,143,143',
-      '500': '235,87,87',
-      '700': '157,58,58',
-      '900': '47,17,17',
-    },
-    warning: {
-      '100': '252,250,196',
-      '300': '248,244,137',
-      '500': '245,239,78',
-      '700': '108,106,32',
-      '900': '49,48,16',
-    },
-    neutral: {
-      '0': '255,255,255',
-      '100': '246,246,246',
-      '200': '233,233,233',
-      '300': '226,226,226',
-      '400': '212,212,212',
-      '500': '183,183,183',
-      '600': '146,146,146',
-      '700': '110,110,110',
-      '800': '74,74,74',
-      '900': '38,38,38',
-    },
-  },
-  breakpoints: {
-    xsmall: {
-      min: 0,
-      max: 480
-    },
-    small: {
-      min: 481,
-      max: 768
-    },
-    medium: {
-      min: 769,
-      max: 992
+    /* Colors */
+    color: {
+        success: {
+            '100': '223,246,233',
+            '300': '148,225,181',
+            '500': '95,210,144',
+            '700': '49,115,77',
+            '900': '19,42,29',
+        },
+        info: {
+            '100': '207,226,255',
+            '300': '149,191,255',
+            '500': '110,168,255',
+            '700': '66,100,153',
+            '900': '37,56,85',
+        },
+        error: {
+            '100': '251,221,221',
+            '300': '242,143,143',
+            '500': '235,87,87',
+            '700': '157,58,58',
+            '900': '47,17,17',
+        },
+        warning: {
+            '100': '252,250,196',
+            '300': '248,244,137',
+            '500': '245,239,78',
+            '700': '108,106,32',
+            '900': '49,48,16',
+        },
+        neutral: {
+            '0': '255,255,255',
+            '100': '246,246,246',
+            '200': '233,233,233',
+            '300': '226,226,226',
+            '400': '212,212,212',
+            '500': '183,183,183',
+            '600': '146,146,146',
+            '700': '110,110,110',
+            '800': '74,74,74',
+            '900': '38,38,38',
+        },
     },
-    large: {
-      min: 993,
-      max: 1920
-    },
-    xlarge: {
-      min: 1921,
-      max: 4096
+    breakpoints: {
+        xsmall: {
+            min: 0,
+            max: 480
+        },
+        small: {
+            min: 481,
+            max: 768
+        },
+        medium: {
+            min: 769,
+            max: 992
+        },
+        large: {
+            min: 993,
+            max: 1920
+        },
+        xlarge: {
+            min: 1921,
+            max: 4096
+        }
     }
-  }
 };
 
 class CuraThemeColorsModule {
-  constructor() {
-    this.NeutralDepthAlias = {
-      'purewhite': '0',
-      'white': '100',
-      'pale': '200',
-      'lighter': '300',
-      'light': '400',
-      'base': '500',
-      'medium': '600',
-      'dark': '700',
-      'darker': '800',
-      'black': '900',
-    };
-    this.ColorDepthAlias = {
-      'lighter': '100',
-      'light': '300',
-      'base': '500',
-      'dark': '700',
-      'darker': '900'
-    };
-  }
-  /**
-   * Get theme color.
-   * @param colorWithDepth string Ex.: primary-light
-   * @returns RGBA value.
-   */
-  getColor(colorWithDepth = "primary-base", opacity = 1) {
-    const { color, depth } = this.splitColorDepth(colorWithDepth);
-    const staticColor = this.getStatic(color, depth, opacity);
-    if (staticColor)
-      return staticColor;
-    return this.getDynamic(color, depth, opacity);
-  }
-  /**
-   * Internal: Look for static color by name and depth.
-   * @param color Color name.
-   * @param depth Depth number or alias.
-   * @returns RGBA value.
-   */
-  getStatic(color, depth, opacity = 1) {
-    var _a, _b, _c;
-    const colorObj = Static.color[color];
-    if (!colorObj)
-      return null;
-    const alias = color === 'neutral' ? this.NeutralDepthAlias[depth] : this.ColorDepthAlias[depth];
-    return ((_a = Static.color[color]) === null || _a === void 0 ? void 0 : _a[alias])
-      ? `rgba(${(_b = Static.color[color]) === null || _b === void 0 ? void 0 : _b[alias]}, ${opacity})`
-      : `rgba(${(_c = Static.color[color]) === null || _c === void 0 ? void 0 : _c[depth]}, ${opacity})`;
-  }
-  /**
-   * Internal: Look for theme dynamic colors.
-   * @param color Color name.
-   * @param depth Color depth.
-   * @returns RGBA value.
-   */
-  getDynamic(color, depth, opacity) {
-    const themeVar = this.ColorDepthAlias[depth]
-      ? `--cura-color-${color}-${this.ColorDepthAlias[depth]}`
-      : `--cura-color-${color}-${depth}`;
-    return getComputedStyle(document.documentElement).getPropertyValue(themeVar)
-      ? `rgba(var(${themeVar}), ${opacity})`
-      : `rgba(var(--cura-color-primary-500), ${opacity})`;
-  }
-  /**
-   * Internal: Split color strings
-   * @param colorWithDepth Color string [color]-[depth]. Ex.: primary-dark.
-   * @returns Object { color: string, depth: string }.
-   */
-  splitColorDepth(colorWithDepth) {
-    const [color, depth] = colorWithDepth.toLowerCase().split(/-(.*)/);
-    return { color: color !== null && color !== void 0 ? color : "primary", depth: depth !== null && depth !== void 0 ? depth : "base" };
-  }
+    constructor() {
+        this.NeutralDepthAlias = {
+            'purewhite': '0',
+            'white': '100',
+            'pale': '200',
+            'lighter': '300',
+            'light': '400',
+            'base': '500',
+            'medium': '600',
+            'dark': '700',
+            'darker': '800',
+            'black': '900',
+        };
+        this.ColorDepthAlias = {
+            'lighter': '100',
+            'light': '300',
+            'base': '500',
+            'dark': '700',
+            'darker': '900'
+        };
+    }
+    /**
+     * Get theme color.
+     * @param colorWithDepth string Ex.: primary-light
+     * @returns RGBA value.
+     */
+    getColor(colorWithDepth = "primary-base", opacity = 1) {
+        const { color, depth } = this.splitColorDepth(colorWithDepth);
+        const staticColor = this.getStatic(color, depth, opacity);
+        if (staticColor)
+            return staticColor;
+        return this.getDynamic(color, depth, opacity);
+    }
+    /**
+     * Internal: Look for static color by name and depth.
+     * @param color Color name.
+     * @param depth Depth number or alias.
+     * @returns RGBA value.
+     */
+    getStatic(color, depth, opacity = 1) {
+        var _a, _b, _c;
+        const colorObj = Static.color[color];
+        if (!colorObj)
+            return null;
+        const alias = color === 'neutral' ? this.NeutralDepthAlias[depth] : this.ColorDepthAlias[depth];
+        return ((_a = Static.color[color]) === null || _a === void 0 ? void 0 : _a[alias])
+            ? `rgba(${(_b = Static.color[color]) === null || _b === void 0 ? void 0 : _b[alias]}, ${opacity})`
+            : `rgba(${(_c = Static.color[color]) === null || _c === void 0 ? void 0 : _c[depth]}, ${opacity})`;
+    }
+    /**
+     * Internal: Look for theme dynamic colors.
+     * @param color Color name.
+     * @param depth Color depth.
+     * @returns RGBA value.
+     */
+    getDynamic(color, depth, opacity) {
+        const themeVar = this.ColorDepthAlias[depth]
+            ? `--cura-color-${color}-${this.ColorDepthAlias[depth]}`
+            : `--cura-color-${color}-${depth}`;
+        return getComputedStyle(document.documentElement).getPropertyValue(themeVar)
+            ? `rgba(var(${themeVar}), ${opacity})`
+            : `rgba(var(--cura-color-primary-500), ${opacity})`;
+    }
+    /**
+     * Internal: Split color strings
+     * @param colorWithDepth Color string [color]-[depth]. Ex.: primary-dark.
+     * @returns Object { color: string, depth: string }.
+     */
+    splitColorDepth(colorWithDepth) {
+        const [color, depth] = colorWithDepth.toLowerCase().split(/-(.*)/);
+        return { color: color !== null && color !== void 0 ? color : "primary", depth: depth !== null && depth !== void 0 ? depth : "base" };
+    }
 }
 
 class CuraThemeSpacingModule {
-  constructor() {
-    this.curaSpacing = '--cura-spacing-base';
-  }
-  /** Returns the base spacing var defined in the theme */
-  getSpacing() {
-    if (getComputedStyle(document.body).getPropertyValue(this.curaSpacing)) {
-      return `var(${this.curaSpacing})`;
+    constructor() {
+        this.curaSpacing = '--cura-spacing-base';
+    }
+    /** Returns the base spacing var defined in the theme */
+    getSpacing() {
+        if (getComputedStyle(document.body).getPropertyValue(this.curaSpacing)) {
+            return `var(${this.curaSpacing})`;
+        }
+        return '4';
     }
-    return '4';
-  }
 }
 
 class CuraThemeFontsModule {
-  constructor() {
+    constructor() {
+        /**
+         * Get the CSS variable related to the font size base defined by the theme.
+         * @returns Related CSS variable as a string.
+         */
+        this.getSize = () => `var(--cura-font-size)`;
+        /**
+         * Get CSS variable related to the font color defined by the theme.
+         * @returns Related CSS variable as a string.
+         */
+        this.getColor = () => `var(--cura-font-color)`;
+    }
     /**
-     * Get the CSS variable related to the font size base defined by the theme.
-     * @returns Related CSS variable as a string.
+     * Get the CSS variable related to the font family defined by the theme.
+     * @param type 'body' | 'heading' | 'display'
+     * @returns Related css variable as a string.
      */
-    this.getSize = () => `var(--cura-font-size)`;
+    getFamily(type = "body") {
+        const curaFontFamilyCSSVar = `--cura-font-${type.toLowerCase()}`;
+        return getComputedStyle(document.body).getPropertyValue(curaFontFamilyCSSVar)
+            ? `var(${curaFontFamilyCSSVar})`
+            : 'var(--cura-font-body)';
+    }
     /**
-     * Get CSS variable related to the font color defined by the theme.
-     * @returns Related CSS variable as a string.
+     * Get the CSS variables related to font weights defined by the theme.
+     * @returns Object with CSS vars weights definitions for thin, light, regular, medium, bold and black fonts.
      */
-    this.getColor = () => `var(--cura-font-color)`;
-  }
-  /**
-   * Get the CSS variable related to the font family defined by the theme.
-   * @param type 'body' | 'heading' | 'display'
-   * @returns Related css variable as a string.
-   */
-  getFamily(type = "body") {
-    const curaFontFamilyCSSVar = `--cura-font-${type.toLowerCase()}`;
-    return getComputedStyle(document.body).getPropertyValue(curaFontFamilyCSSVar)
-      ? `var(${curaFontFamilyCSSVar})`
-      : 'var(--cura-font-body)';
-  }
-  /**
-   * Get the CSS variables related to font weights defined by the theme.
-   * @returns Object with CSS vars weights definitions for thin, light, regular, medium, bold and black fonts.
-   */
-  getWeights() {
-    const weights = {};
-    Object.keys(ThemeDefault.font.weights).forEach((key) => weights[key] = `var(--cura-font-weights-${key})`);
-    return weights;
-  }
+    getWeights() {
+        const weights = {};
+        Object.keys(ThemeDefault.font.weights).forEach((key) => weights[key] = `var(--cura-font-weights-${key})`);
+        return weights;
+    }
 }
 
 class CuraThemeBreakpointsModule {
-  constructor() { }
-  /** Returns the base spacing var defined in the theme */
-  get(size = null, position = null) {
-    if (size) {
-      const breakpoint = position ? Static.breakpoints[size][position] : Static.breakpoints[size];
-      if (breakpoint || breakpoint === 0)
-        return breakpoint;
+    constructor() { }
+    /** Returns the base spacing var defined in the theme */
+    get(size = null, position = null) {
+        if (size) {
+            const breakpoint = position ? Static.breakpoints[size][position] : Static.breakpoints[size];
+            if (breakpoint || breakpoint === 0)
+                return breakpoint;
+        }
+        return Static.breakpoints;
     }
-    return Static.breakpoints;
-  }
 }
 
 class CuraThemeModule {
-  constructor() {
-    this.prefix = '--cura';
-    this.colors = new CuraThemeColorsModule();
-    this.spacing = new CuraThemeSpacingModule();
-    this.fonts = new CuraThemeFontsModule();
-    this.breakpoints = new CuraThemeBreakpointsModule();
-    /* Private */
-    /** Set css var based on object structure */
-    this.setCssVar = (prop, path) => {
-      const varName = this.groupPath(path, prop[0]);
-      this.rootElement.style.setProperty(varName, prop[1]);
-    };
-    this.groupPath = (a, b) => `${a}-${b}`;
-    this.isObject = (val) => {
-      return val && typeof val === 'object' && !Array.isArray(val);
-    };
-    /** Deep merge objects */
-    this.mergeObject = (from, to) => {
-      const entries = Object.entries(from);
-      for (let e of entries) {
-        if (this.isObject(e[1])) {
-          this.mergeObject(e[1], to[e[0]]);
-        }
-        else {
-          to[e[0]] = e[1];
-        }
-      }
-    };
-    /** Set css vars from preset object */
-    this.buildCssVars = (path, obj) => {
-      const entries = Object.entries(obj);
-      for (let e of entries) {
-        if (this.isObject(e[1])) {
-          this.buildCssVars(this.groupPath(path, e[0]), e[1]);
+    constructor() {
+        this.prefix = '--cura';
+        this.colors = new CuraThemeColorsModule();
+        this.spacing = new CuraThemeSpacingModule();
+        this.fonts = new CuraThemeFontsModule();
+        this.breakpoints = new CuraThemeBreakpointsModule();
+        /* Private */
+        /** Set css var based on object structure */
+        this.setCssVar = (prop, path) => {
+            const varName = this.groupPath(path, prop[0]);
+            this.rootElement.style.setProperty(varName, prop[1]);
+        };
+        this.groupPath = (a, b) => `${a}-${b}`;
+        this.isObject = (val) => {
+            return val && typeof val === 'object' && !Array.isArray(val);
+        };
+        /** Deep merge objects */
+        this.mergeObject = (from, to) => {
+            const entries = Object.entries(from);
+            for (let e of entries) {
+                if (this.isObject(e[1])) {
+                    this.mergeObject(e[1], to[e[0]]);
+                }
+                else {
+                    to[e[0]] = e[1];
+                }
+            }
+        };
+        /** Set css vars from preset object */
+        this.buildCssVars = (path, obj) => {
+            const entries = Object.entries(obj);
+            for (let e of entries) {
+                if (this.isObject(e[1])) {
+                    this.buildCssVars(this.groupPath(path, e[0]), e[1]);
+                }
+                else {
+                    this.setCssVar(e, path);
+                }
+            }
+        };
+        this.rootElement = window.document.documentElement;
+    }
+    /**
+     * Load a theme.
+     * @param theme Theme tag.
+     */
+    load(theme = 'default') {
+        const preset = ThemePresets[theme] ? ThemePresets[theme] : ThemePresets.default;
+        this.buildCssVars(this.prefix, preset);
+    }
+    /**
+     * Define a custom theme
+     * @param customTheme Custom theme object definition
+     */
+    setCustom(customTheme) {
+        const customTag = customTheme.name;
+        if (customTag in ThemePresets) {
+            console.log('Error building custom theme. Theme %s already exists. Loading default theme.', customTag);
+            this.load('default');
         }
         else {
-          this.setCssVar(e, path);
+            const preset = customTheme.fromPreset && customTheme.fromPreset in ThemePresets
+                ? ThemePresets[customTheme.fromPreset]
+                : ThemePresets.default;
+            const newTheme = Object.assign({}, JSON.parse(JSON.stringify(preset)));
+            this.mergeObject(customTheme.definitions, newTheme);
+            ThemePresets[customTag] = newTheme;
+            this.load(customTag);
         }
-      }
-    };
-    this.rootElement = window.document.documentElement;
-  }
-  /**
-   * Load a theme.
-   * @param theme Theme tag.
-   */
-  load(theme = 'default') {
-    const preset = ThemePresets[theme] ? ThemePresets[theme] : ThemePresets.default;
-    this.buildCssVars(this.prefix, preset);
-  }
-  /**
-   * Define a custom theme
-   * @param customTheme Custom theme object definition
-   */
-  setCustom(customTheme) {
-    const customTag = customTheme.name;
-    if (customTag in ThemePresets) {
-      console.log('Error building custom theme. Theme %s already exists. Loading default theme.', customTag);
-      this.load('default');
-    }
-    else {
-      const preset = customTheme.fromPreset && customTheme.fromPreset in ThemePresets
-        ? ThemePresets[customTheme.fromPreset]
-        : ThemePresets.default;
-      const newTheme = Object.assign({}, JSON.parse(JSON.stringify(preset)));
-      this.mergeObject(customTheme.definitions, newTheme);
-      ThemePresets[customTag] = newTheme;
-      this.load(customTag);
     }
-  }
 }
 
 class CuraAPI {
-  constructor(config) {
-    this.localAssetsPath = config && config.localAssetsPath ? config.localAssetsPath : `/assets`;
-    const themeModule = new CuraThemeModule();
-    this.theme = {
-      load: function (themeTag) { themeModule.load(themeTag); },
-      setCustom: function (customThemeDefinitions) { themeModule.setCustom(customThemeDefinitions); },
-      colors: {
-        getColor: function (colorWithDepth, opacity) { return themeModule.colors.getColor(colorWithDepth, opacity); },
-      },
-      fonts: {
-        getFamily: function (type) { return themeModule.fonts.getFamily(type); },
-        getWeights: function () { return themeModule.fonts.getWeights(); },
-        getSize: function () { return themeModule.fonts.getSize(); },
-        getColor: function () { return themeModule.fonts.getColor(); }
-      },
-      spacing: {
-        getSpacing: function () { return themeModule.spacing.getSpacing(); },
-      },
-      breakpoints: {
-        get: function (size, position) { return themeModule.breakpoints.get(size, position); }
-      }
-    };
-    if (config && config.customTheme) {
-      this.theme.setCustom(config.customTheme);
-    }
-    else {
-      const theme = config && config.theme ? config.theme : 'default';
-      this.theme.load(theme);
+    constructor(config) {
+        this.localAssetsPath = config && config.localAssetsPath ? config.localAssetsPath : `/assets`;
+        const themeModule = new CuraThemeModule();
+        this.theme = {
+            load: function (themeTag) { themeModule.load(themeTag); },
+            setCustom: function (customThemeDefinitions) { themeModule.setCustom(customThemeDefinitions); },
+            colors: {
+                getColor: function (colorWithDepth, opacity) { return themeModule.colors.getColor(colorWithDepth, opacity); },
+            },
+            fonts: {
+                getFamily: function (type) { return themeModule.fonts.getFamily(type); },
+                getWeights: function () { return themeModule.fonts.getWeights(); },
+                getSize: function () { return themeModule.fonts.getSize(); },
+                getColor: function () { return themeModule.fonts.getColor(); }
+            },
+            spacing: {
+                getSpacing: function () { return themeModule.spacing.getSpacing(); },
+            },
+            breakpoints: {
+                get: function (size, position) { return themeModule.breakpoints.get(size, position); }
+            }
+        };
+        if (config && config.customTheme) {
+            this.theme.setCustom(config.customTheme);
+        }
+        else {
+            const theme = config && config.theme ? config.theme : 'default';
+            this.theme.load(theme);
+        }
     }
-  }
 }
 
 function appGlobalScript () {
-  const config = window.CuraInit;
-  window.CuraAPI = config ? new CuraAPI(config) : new CuraAPI();
-  const api = window.CuraAPI;
-  window.dispatchEvent(new CustomEvent("CuraAPIReady", { detail: { api } }));
-  if (config && typeof config.onReady === 'function')
-    config.onReady(api);
+    const config = window.CuraInit;
+    window.CuraAPI = config ? new CuraAPI(config) : new CuraAPI();
+    const api = window.CuraAPI;
+    window.dispatchEvent(new CustomEvent("CuraAPIReady", { detail: { api } }));
+    if (config && typeof config.onReady === 'function')
+        config.onReady(api);
 }
 
 const globalScripts = appGlobalScript;
 
 function CuraInit(options, w = window) {
-  w.CuraInit = options;
+    w.CuraInit = options;
 }
 
 globalScripts();
 const defineCustomElements = (opts) => {
-  if (typeof customElements !== 'undefined') {
-    [
-      CuraAccordion,
-      CuraAccordionItem,
-      CuraAlert,
-      CuraButton,
-      CuraButtonOutline,
-      CuraButtonSelect,
-      CuraButtonTransparent,
-      CuraCheckbox,
-      CuraDisplay,
-      CuraHeading,
-      CuraIcon,
-      CuraIconsView,
-      CuraInputText,
-      CuraLabel,
-      CuraLoaderCircle,
-      CuraPageTemplate,
-      CuraParagraph,
-      CuraRadio,
-      CuraSwitch,
-    ].forEach(cmp => {
-      if (!customElements.get(cmp.is)) {
-        customElements.define(cmp.is, cmp, opts);
-      }
-    });
-  }
+    if (typeof customElements !== 'undefined') {
+        [
+            CuraAccordion,
+            CuraAccordionItem,
+            CuraAlert,
+            CuraAvatar,
+            CuraButton,
+            CuraButtonOutline,
+            CuraButtonSelect,
+            CuraButtonTransparent,
+            CuraCalendar,
+            CuraCard,
+            CuraCheckbox,
+            CuraDisplay,
+            CuraDropdownSearch,
+            CuraDropdownSearchOption,
+            CuraDropdownSearchOptionTitle,
+            CuraHeading,
+            CuraIcon,
+            CuraIconsView,
+            CuraInputText,
+            CuraLabel,
+            CuraLoaderCircle,
+            CuraPageTemplate,
+            CuraParagraph,
+            CuraRadio,
+            CuraSelect,
+            CuraSelectOption,
+            CuraSwitch,
+        ].forEach(cmp => {
+            if (!customElements.get(cmp.is)) {
+                customElements.define(cmp.is, cmp, opts);
+            }
+        });
+    }
 };
 
 export { CuraInit, defineCustomElements };