@rededor/cura-hydrate 0.4.4 → 0.5.0

package/index.js

@@ -4948,7 +4948,7 @@ function hydrateFactory($stencilWindow, $stencilHydrateOpts, $stencilHydrateResu
 
 
 const NAMESPACE = 'cura';
-const BUILD = /* cura */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, attachStyles: true, cloneNodeFix: false, cmpDidLoad: false, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: false, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: true, constructableCSS: false, cssAnnotations: true, cssVarShim: false, devTools: false, disconnectedCallback: false, dynamicImportShim: false, element: false, event: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: true, hydratedAttribute: false, hydratedClass: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: false, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: true, propString: true, reflect: true, safari10: false, scoped: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, shadowDomShim: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: true, taskQueue: true, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: false, vdomListener: true, vdomPropOrAttr: true, vdomRef: false, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
+const BUILD = /* cura */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: false, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: true, constructableCSS: false, cssAnnotations: true, cssVarShim: false, devTools: false, disconnectedCallback: true, dynamicImportShim: false, element: false, event: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: true, hydratedAttribute: false, hydratedClass: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, safari10: false, scoped: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, shadowDomShim: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: true, taskQueue: true, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: false, vdomListener: true, vdomPropOrAttr: true, vdomRef: false, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
 
 /**
  * Cura Default Theme
@@ -4957,25 +4957,25 @@ const ThemeDefault = {
   /* Colors */
   color: {
     primary: {
-      '100': '#71C5E8',
-      '300': '#449CD5',
-      '500': '#005EB8',
-      '700': '#004890',
-      '900': '#002855'
+      '100': '113,197,232',
+      '300': '68,142,205',
+      '500': '0,61,165',
+      '700': '0,48,117',
+      '900': '0,40,85'
     },
     secondary: {
-      '100': '#F5ECE3',
-      '300': '#DDC0A2',
-      '500': '#CCA074',
-      '700': '#886B4D',
-      '900': '#292017'
+      '100': '245,236,227',
+      '300': '221,192,162',
+      '500': '204,160,116',
+      '700': '136,107,77',
+      '900': '41,32,23'
     },
     accent: {
-      '100': '#FFC27B',
-      '300': '#FFA84A',
-      '500': '#FF8200',
-      '700': '#D7720A',
-      '900': '#9B5A1A'
+      '100': '255,194,123',
+      '300': '255,168,74',
+      '500': '255,130,0',
+      '700': '215,114,10',
+      '900': '155,90,26'
     }
   },
   /* Spacing */
@@ -5008,25 +5008,25 @@ const ThemeMaternity = Object.assign(Object.assign({}, ThemeDefault), {
   /* Colors */
   color: {
     primary: {
-      '100': '#F8E3E2',
-      '300': '#FFB3AB',
-      '500': '#DA716F',
-      '700': '#914B4A',
-      '900': '#492625'
+      '100': '248,227,226',
+      '300': '255,179,171',
+      '500': '218,113,111',
+      '700': '145,75,74',
+      '900': '73,38,37'
     },
     secondary: {
-      '100': '#FDFBF9',
-      '300': '#F7F4EE',
-      '500': '#F5ECE3',
-      '700': '#CCC5BD',
-      '900': '#A39D97'
+      '100': '253,251,249',
+      '300': '247,244,238',
+      '500': '245,236,227',
+      '700': '204,197,189',
+      '900': '163,157,151'
     },
     accent: {
-      '100': '#ECEFF9',
-      '300': '#8599CB',
-      '500': '#0B1497',
-      '700': '#070D65',
-      '900': '#040732'
+      '100': '236,239,249',
+      '300': '133,153,203',
+      '500': '11,20,151',
+      '700': '7,13,101',
+      '900': '4,7,50'
     }
   }, font: {
     size: '14px',
@@ -5052,32 +5052,32 @@ const ThemeOncology = Object.assign(Object.assign({}, ThemeDefault), {
   /* Colors */
   color: {
     primary: {
-      '100': '#AABEE1',
-      '300': '#557EC4',
-      '500': '#003DA6',
-      '700': '#00296F',
-      '900': '#000C21'
+      '100': '170,190,225',
+      '300': '85,126,196',
+      '500': '0,61,166',
+      '700': '0,41,111',
+      '900': '0,12,33'
     },
     secondary: {
-      '100': '#CDD7E3',
-      '300': '#9BAFC7',
-      '500': '#6886AB',
-      '700': '#365E8F',
-      '900': '#043673',
+      '100': '205,215,227',
+      '300': '155,175,199',
+      '500': '104,134,171',
+      '700': '54,95,143',
+      '900': '4,54,115',
     },
     accent: {
-      '100': '#99CFFF',
-      '300': '#47A9FF',
-      '500': '#0083F5',
-      '700': '#006DCC',
-      '900': '#0058A4',
+      '100': '153,207,255',
+      '300': '71,169,255',
+      '500': '0,131,245',
+      '700': '0,109,204',
+      '900': '0,88,164',
     },
     aux: {
-      '100': '#DAF2EF',
-      '300': '#84D4CA',
-      '500': '#47BFB0',
-      '700': '#2F7F75',
-      '900': '#0E2623',
+      '100': '218,242,239',
+      '300': '132,212,202',
+      '500': '71,191,176',
+      '700': '33,100,92',
+      '900': '14,38,35',
     },
   }, font: {
     size: '14px',
@@ -5095,10 +5095,41 @@ const ThemeOncology = Object.assign(Object.assign({}, ThemeDefault), {
     },
   } });
 
+/**
+ * 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'
+    }
+  } });
+
 const ThemePresets = {
   'default': ThemeDefault,
   'maternidade': ThemeMaternity,
   'oncologia': ThemeOncology,
+  'legacyDefault': ThemeLegacyDefault
 };
 
 /**
@@ -5108,44 +5139,44 @@ const Static = {
   /* Colors */
   color: {
     success: {
-      '100': '#DFF6E9',
-      '300': '#94E1B5',
-      '500': '#5FD290',
-      '700': '#3F8C60',
-      '900': '#132A1D',
+      '100': '223,246,233',
+      '300': '148,225,181',
+      '500': '95,210,144',
+      '700': '49,115,77',
+      '900': '19,42,29',
     },
     info: {
-      '100': '#CFE2FF',
-      '300': '#95BFFF',
-      '500': '#6EA8FF',
-      '700': '#517BBB',
-      '900': '#253855',
+      '100': '207,226,255',
+      '300': '149,191,255',
+      '500': '110,168,255',
+      '700': '66,100,153',
+      '900': '37,56,85',
     },
     error: {
-      '100': '#FBDDDD',
-      '300': '#F28F8F',
-      '500': '#EB5757',
-      '700': '#9D3A3A',
-      '900': '#2F1111',
+      '100': '251,221,221',
+      '300': '242,143,143',
+      '500': '235,87,87',
+      '700': '157,58,58',
+      '900': '47,17,17',
     },
     warning: {
-      '100': '#FCFAC4',
-      '300': '#F8F489',
-      '500': '#F5EF4E',
-      '700': '#A39F34',
-      '900': '#313010',
+      '100': '252,250,196',
+      '300': '248,244,137',
+      '500': '245,239,78',
+      '700': '108,106,32',
+      '900': '49,48,16',
     },
     neutral: {
-      '0': '#FFFFFF',
-      '100': '#F6F6F6',
-      '200': '#E9E9E9',
-      '300': '#E2E2E2',
-      '400': '#D4D4D4',
-      '500': '#B7B7B7',
-      '600': '#929292',
-      '700': '#6E6E6E',
-      '800': '#4A4A4A',
-      '900': '#262626',
+      '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: {
@@ -5197,47 +5228,48 @@ class CuraThemeColorsModule {
   /**
    * Get theme color.
    * @param colorWithDepth string Ex.: primary-light
-   * @returns css color property. Color definition or related css var from the theme.
+   * @returns RGBA value.
    */
-  getColor(colorWithDepth = "primary-base") {
+  getColor(colorWithDepth = "primary-base", opacity = 1) {
     const { color, depth } = this.splitColorDepth(colorWithDepth);
     const staticColor = this.getStatic(color, depth);
     if (staticColor)
       return staticColor;
-    return this.getDynamic(color, depth);
+    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 Static color definition.
+   * @returns RGBA value.
    */
-  getStatic(color, depth) {
-    var _a, _b, _c, _d;
+  getStatic(color, depth, opacity = 1) {
+    var _a, _b, _c;
     const colorObj = Static.color[color];
     if (!colorObj)
       return null;
-    return color === 'neutral'
-      ? ((_a = Static.color[color]) === null || _a === void 0 ? void 0 : _a[this.NeutralDepthAlias[depth]]) || ((_b = Static.color[color]) === null || _b === void 0 ? void 0 : _b[depth])
-      : ((_c = Static.color[color]) === null || _c === void 0 ? void 0 : _c[this.ColorDepthAlias[depth]]) || ((_d = Static.color[color]) === null || _d === void 0 ? void 0 : _d[depth]);
+    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 Depth number or alias.
-   * @returns Related CSS variable defined by the theme.
+   * @param depth Color depth.
+   * @returns RGBA value.
    */
-  getDynamic(color, depth) {
+  getDynamic(color, depth, opacity) {
     const themeVar = this.ColorDepthAlias[depth]
       ? `--cura-color-${color}-${this.ColorDepthAlias[depth]}`
       : `--cura-color-${color}-${depth}`;
-    return getComputedStyle(document.body).getPropertyValue(themeVar)
-      ? `var(${themeVar})`
-      : `var(--cura-color-primary-500)`;
+    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 or primary-700.
+   * @param colorWithDepth Color string [color]-[depth]. Ex.: primary-dark.
    * @returns Object { color: string, depth: string }.
    */
   splitColorDepth(colorWithDepth) {
@@ -5318,7 +5350,7 @@ class CuraThemeModule {
     /** Set css var based on object structure */
     this.setCssVar = (prop, path) => {
       const varName = this.groupPath(path, prop[0]);
-      this.body.style.setProperty(varName, prop[1]);
+      this.rootElement.style.setProperty(varName, prop[1]);
     };
     this.groupPath = (a, b) => `${a}-${b}`;
     this.isObject = (val) => {
@@ -5348,7 +5380,7 @@ class CuraThemeModule {
         }
       }
     };
-    this.body = window.document.documentElement.querySelector('body');
+    this.rootElement = window.document.documentElement;
   }
   /**
    * Load a theme.
@@ -5388,7 +5420,7 @@ class CuraAPI {
       load: function (themeTag) { themeModule.load(themeTag); },
       setCustom: function (customThemeDefinitions) { themeModule.setCustom(customThemeDefinitions); },
       colors: {
-        getColor: function (colorWithDepth) { return themeModule.colors.getColor(colorWithDepth); },
+        getColor: function (colorWithDepth, opacity) { return themeModule.colors.getColor(colorWithDepth, opacity); },
       },
       fonts: {
         getFamily: function (type) { return themeModule.fonts.getFamily(type); },
@@ -5905,9 +5937,10 @@ const callRender = (e, t, o) => {
  }
  return null;
 }, postUpdateComponent = e => {
- const t = e.$cmpMeta$.$tagName$, o = e.$hostElement$, n = createTime("postUpdate", t), l = e.$ancestorComponent$;
+ const t = e.$cmpMeta$.$tagName$, o = e.$hostElement$, n = createTime("postUpdate", t), s = e.$lazyInstance$ , l = e.$ancestorComponent$;
  64 & e.$flags$ ? (n()) : (e.$flags$ |= 64, addHydratedFlag(o), 
- n(), (e.$onReadyResolve$(o), l || appDidLoad())), (e.$onRenderResolve$ && (e.$onRenderResolve$(), 
+ (safeCall(s, "componentDidLoad"), 
+ BUILD.isDev ), n(), (e.$onReadyResolve$(o), l || appDidLoad())), (e.$onRenderResolve$ && (e.$onRenderResolve$(), 
  e.$onRenderResolve$ = void 0), 512 & e.$flags$ && nextTick((() => scheduleUpdate(e, !1))), 
  e.$flags$ &= -517);
 }, appDidLoad = e => {
@@ -6181,6 +6214,166 @@ const cmpModules = new Map, getModule = e => {
  e["s-p"] = [], e["s-rc"] = [], hostRefs.set(e, o);
 }, styles = new Map;
 
+const curaAccordionCss = "/*!@:host*/.sc-cura-accordion-h{display:block;color:var(--font-color);font-size:var(--font-size);font-size:var(--font-size);font-family:var(--font-family);font-weight:var(--font-weight-regular)}/*!@:host::after*/.sc-cura-accordion-h::after{content:\"\";display:block;border-bottom:solid 1px var(--neutral-base);width:100%}";
+
+class CuraAccordion {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.mutationObserverCallback = (mutations, _) => {
+      var _a;
+      for (const mutation of mutations) {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'opened' && ((_a = mutation.target) === null || _a === void 0 ? void 0 : _a['opened'])) {
+          if (this.behavior !== 'default')
+            continue;
+          this.host.querySelectorAll('cura-accordion-item').forEach(item => {
+            if (item != mutation.target) {
+              item.opened = false;
+            }
+          });
+        }
+        if (mutation.type === 'childList') {
+          const addedNodes = Array.from(mutation.addedNodes || []);
+          for (let node of addedNodes) {
+            this.setChildProperties(node);
+          }
+        }
+      }
+    };
+    this.mutationObserver = new MutationObserver(this.mutationObserverCallback);
+    this.color = 'primary';
+    this.activeColor = 'accent';
+    this.colorMode = 'dark';
+    this.iconSize = 32;
+    this.openIcon = 'down';
+    this.closeIcon = 'up';
+    this.iconColor = '';
+    this.iconActiveColor = '';
+    this.behavior = 'default';
+    this.styles = {};
+  }
+  handleChangeColor() {
+    this.setColors();
+  }
+  connectedCallback() {
+    const weights = window.CuraAPI.theme.fonts.getWeights();
+    this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();
+    this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor(`neutral-purewhite`);
+    this.styles['--neutral-lighter'] = window.CuraAPI.theme.colors.getColor(`neutral-lighter`);
+    this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);
+    this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();
+    this.styles['--font-color'] = window.CuraAPI.theme.fonts.getColor();
+    this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();
+    this.styles['--font-weight-regular'] = weights.regular;
+    this.setColors();
+  }
+  componentDidLoad() {
+    this.host.querySelectorAll('cura-accordion-item').forEach(item => {
+      this.setChildProperties(item);
+    });
+    const options = { childList: true, subtree: true, attributes: true };
+    this.mutationObserver.observe(this.host, options);
+  }
+  disconnectedCallback() {
+    this.mutationObserver.disconnect();
+  }
+  setChildProperties(item) {
+    // Theme
+    item.colorMode = this.colorMode;
+    item.iconColor = this.iconColor || this.color;
+    item.iconActiveColor = this.iconActiveColor || this.activeColor;
+    // Icon
+    item.iconSize = this.iconSize;
+    item.openIcon = this.openIcon;
+    item.closeIcon = this.closeIcon;
+  }
+  setColors() {
+    this.styles = Object.assign(Object.assign({}, this.styles), { '--color-lighter': window.CuraAPI.theme.colors.getColor(`${this.color}-lighter`), '--color-light': window.CuraAPI.theme.colors.getColor(`${this.color}-light`), '--color-base': window.CuraAPI.theme.colors.getColor(`${this.color}-base`), '--color-dark': window.CuraAPI.theme.colors.getColor(`${this.color}-dark`), '--color-active-lighter': window.CuraAPI.theme.colors.getColor(`${this.activeColor}-lighter`), '--color-active-light': window.CuraAPI.theme.colors.getColor(`${this.activeColor}-light`), '--color-active-base': window.CuraAPI.theme.colors.getColor(`${this.activeColor}-base`), '--color-active-dark': window.CuraAPI.theme.colors.getColor(`${this.activeColor}-dark`), '--icon-color-lighter': window.CuraAPI.theme.colors.getColor(`${this.iconColor || this.color}-lighter`), '--icon-color-light': window.CuraAPI.theme.colors.getColor(`${this.iconColor || this.color}-light`), '--icon-color-base': window.CuraAPI.theme.colors.getColor(`${this.iconColor || this.color}-base`), '--icon-color-dark': window.CuraAPI.theme.colors.getColor(`${this.iconColor || this.color}-dark`), '--icon-color-active-lighter': window.CuraAPI.theme.colors.getColor(`${this.iconActiveColor || this.activeColor}-lighter`), '--icon-color-active-light': window.CuraAPI.theme.colors.getColor(`${this.iconActiveColor || this.activeColor}-light`), '--icon-color-active-base': window.CuraAPI.theme.colors.getColor(`${this.iconActiveColor || this.activeColor}-base`), '--icon-color-active-dark': window.CuraAPI.theme.colors.getColor(`${this.iconActiveColor || this.activeColor}-dark`) });
+  }
+  render() {
+    return (hAsync(Host, { style: this.styles }, hAsync("slot", { name: 'accordion-item' })));
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "color": ["handleChangeColor"],
+    "activeColor": ["handleChangeColor"]
+  }; }
+  static get style() { return curaAccordionCss; }
+  static get cmpMeta() { return {
+    "$flags$": 9,
+    "$tagName$": "cura-accordion",
+    "$members$": {
+      "color": [513],
+      "activeColor": [513, "active-color"],
+      "colorMode": [513, "color-mode"],
+      "iconSize": [514, "icon-size"],
+      "openIcon": [513, "open-icon"],
+      "closeIcon": [513, "close-icon"],
+      "iconColor": [513, "icon-color"],
+      "iconActiveColor": [513, "icon-active-color"],
+      "behavior": [513],
+      "styles": [32]
+    },
+    "$listeners$": undefined,
+    "$lazyBundleId$": "-",
+    "$attrsToReflect$": [["color", "color"], ["activeColor", "active-color"], ["colorMode", "color-mode"], ["iconSize", "icon-size"], ["openIcon", "open-icon"], ["closeIcon", "close-icon"], ["iconColor", "icon-color"], ["iconActiveColor", "icon-active-color"], ["behavior", "behavior"]]
+  }; }
+}
+
+const curaAccordionItemCss = "/*!@:host*/.sc-cura-accordion-item-h{display:block}/*!@:host .accordion-item*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item{width:100%}/*!@:host .accordion-item .label*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .label.sc-cura-accordion-item{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}/*!@:host .accordion-item .label::before*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .label.sc-cura-accordion-item::before{content:\"\";display:block;border-top:solid 1px var(--neutral-base);width:100%}/*!@:host .accordion-item .label .label-container*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;gap:calc(var(--base-spacing) * 2px);min-height:40px;word-break:break-word;cursor:pointer;font-size:1.14em;font-weight:var(--font-weight-regular);color:var(--color-base);padding:0px}/*!@:host .accordion-item .label .label-container cura-icon*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item cura-icon.sc-cura-accordion-item{margin-right:4px}/*!@:host .accordion-item .label .label-container:hover*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:hover{color:var(--color-light)}/*!@:host .accordion-item .label .label-container:hover cura-icon*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:hover cura-icon.sc-cura-accordion-item{--color:var(--icon-color-light) !important}/*!@:host .accordion-item .label .label-container:active*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:active{color:var(--color-dark)}/*!@:host .accordion-item .label .label-container:active cura-icon*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:active cura-icon.sc-cura-accordion-item{--color:var(--icon-color-dark) !important}/*!@:host .accordion-item .content*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .content.sc-cura-accordion-item{font-size:1em;overflow:hidden;max-height:0;-webkit-transition:max-height 0.25s ease;transition:max-height 0.25s ease}/*!@:host .accordion-item .content .content-wrapper*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .content.sc-cura-accordion-item .content-wrapper.sc-cura-accordion-item{padding:calc(var(--base-spacing) * 2px) 0px;border-top:solid 1px var(--neutral-base)}/*!@:host .accordion-item.active .label .label-container*/.sc-cura-accordion-item-h .accordion-item.active.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item{color:var(--color-active-base)}/*!@:host .accordion-item.active .label .label-container:hover*/.sc-cura-accordion-item-h .accordion-item.active.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:hover{color:var(--color-active-light)}/*!@:host .accordion-item.active .label .label-container:hover cura-icon*/.sc-cura-accordion-item-h .accordion-item.active.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:hover cura-icon.sc-cura-accordion-item{--color:var(--icon-color-active-light) !important}/*!@:host .accordion-item.active .label .label-container:active*/.sc-cura-accordion-item-h .accordion-item.active.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:active{color:var(--color-active-dark)}/*!@:host .accordion-item.active .label .label-container:active cura-icon*/.sc-cura-accordion-item-h .accordion-item.active.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:active cura-icon.sc-cura-accordion-item{--color:var(--icon-color-active-dark) !important}/*!@:host .accordion-item.active .content*/.sc-cura-accordion-item-h .accordion-item.active.sc-cura-accordion-item .content.sc-cura-accordion-item{max-height:200vh;overflow-y:auto;-webkit-transition:max-height 0.5s ease 0.14s;transition:max-height 0.5s ease 0.14s}/*!@:host .accordion-item.inverted .label .label-container*/.sc-cura-accordion-item-h .accordion-item.inverted.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item{color:var(--neutral-lighter)}/*!@:host .accordion-item.inverted .label .label-container:hover*/.sc-cura-accordion-item-h .accordion-item.inverted.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:hover{color:var(--color-lighter)}/*!@:host .accordion-item.inverted .label .label-container:hover cura-icon*/.sc-cura-accordion-item-h .accordion-item.inverted.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:hover cura-icon.sc-cura-accordion-item{--color:var(--icon-color-lighter) !important}/*!@:host .accordion-item.inverted .label .label-container:active*/.sc-cura-accordion-item-h .accordion-item.inverted.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:active{color:var(--color-light)}/*!@:host .accordion-item.inverted .label .label-container:active cura-icon*/.sc-cura-accordion-item-h .accordion-item.inverted.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:active cura-icon.sc-cura-accordion-item{--color:var(--icon-color-light) !important}/*!@:host .accordion-item.active.inverted .label .label-container*/.sc-cura-accordion-item-h .accordion-item.active.inverted.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item{color:var(--neutral-purewhite)}/*!@:host .accordion-item.active.inverted .label .label-container:hover*/.sc-cura-accordion-item-h .accordion-item.active.inverted.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:hover{color:var(--color-active-lighter)}/*!@:host .accordion-item.active.inverted .label .label-container:hover cura-icon*/.sc-cura-accordion-item-h .accordion-item.active.inverted.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:hover cura-icon.sc-cura-accordion-item{--color:var(--icon-color-active-lighter) !important}/*!@:host .accordion-item.active.inverted .label .label-container:active*/.sc-cura-accordion-item-h .accordion-item.active.inverted.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:active{color:var(--color-active-light)}/*!@:host .accordion-item.active.inverted .label .label-container:active cura-icon*/.sc-cura-accordion-item-h .accordion-item.active.inverted.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:active cura-icon.sc-cura-accordion-item{--color:var(--icon-color-active-light) !important}@media (min-width: 768px) and (max-width: 1365px){/*!@:host .accordion-item .label .label-container*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item{font-size:1.29em}/*!@:host .accordion-item .content*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .content.sc-cura-accordion-item{font-size:1.14em}}@media (min-width: 1366px){/*!@:host .accordion-item .label .label-container*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item{font-size:1.29em}/*!@:host .accordion-item .content*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .content.sc-cura-accordion-item{font-size:1.14em}}";
+
+class CuraAccordionItem {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.label = '';
+    this.iconSize = 32;
+    this.openIcon = 'down';
+    this.closeIcon = 'up';
+    this.iconColor = '';
+    this.iconActiveColor = '';
+    this.colorMode = 'dark';
+    this.opened = false;
+    this.styles = {};
+  }
+  getIconColor() {
+    const inverted = this.colorMode === 'light';
+    const iconColor = inverted ? 'neutral-lighter' : `${this.iconColor}-base`;
+    const iconActiveColor = inverted ? 'neutral-purewhite' : `${this.iconActiveColor}-base`;
+    return this.opened ? iconActiveColor : iconColor;
+  }
+  getClasses() {
+    const classes = {};
+    classes['accordion-item'] = true;
+    classes['active'] = this.opened;
+    classes['inverted'] = this.colorMode === 'light';
+    return classes;
+  }
+  accordionItemClick(_) {
+    this.opened = !this.opened;
+  }
+  render() {
+    return (hAsync(Host, { slot: "accordion-item" }, hAsync("div", { class: this.getClasses(), style: this.styles }, hAsync("div", { class: "label", onClick: e => this.accordionItemClick(e) }, hAsync("div", { class: "label-container" }, hAsync("span", null, this.label), hAsync("cura-icon", { name: this.opened ? this.closeIcon : this.openIcon, size: this.iconSize, color: this.getIconColor() }))), hAsync("div", { class: 'content' }, hAsync("div", { class: "content-wrapper" }, hAsync("slot", null))))));
+  }
+  static get style() { return curaAccordionItemCss; }
+  static get cmpMeta() { return {
+    "$flags$": 9,
+    "$tagName$": "cura-accordion-item",
+    "$members$": {
+      "label": [513],
+      "iconSize": [514, "icon-size"],
+      "openIcon": [513, "open-icon"],
+      "closeIcon": [513, "close-icon"],
+      "iconColor": [513, "icon-color"],
+      "iconActiveColor": [513, "icon-active-color"],
+      "colorMode": [1, "color-mode"],
+      "opened": [1540],
+      "styles": [32]
+    },
+    "$listeners$": undefined,
+    "$lazyBundleId$": "-",
+    "$attrsToReflect$": [["label", "label"], ["iconSize", "icon-size"], ["openIcon", "open-icon"], ["closeIcon", "close-icon"], ["iconColor", "icon-color"], ["iconActiveColor", "icon-active-color"], ["opened", "opened"]]
+  }; }
+}
+
 const curaButtonCss = "/*!@:host*/.sc-cura-button-h{--border-radius:4px;display:inline-block;vertical-align:middle}/*!@:host button, :host a*/.sc-cura-button-h button.sc-cura-button,.sc-cura-button-h a.sc-cura-button{outline:none;-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;width:100%;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;text-decoration:none !important;font-size:var(--font-size);cursor:pointer;-webkit-transition:background-color 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;transition:background-color 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;border-radius:var(--border-radius);background-color:var(--color-base);border:none;padding:calc(var(--base-spacing) * 3.5px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 13px);min-width:calc(var(--base-spacing) * 13px)}/*!@:host button:not(.isLoading):not(.disabled):hover, :host a:not(.isLoading):not(.disabled):hover*/.sc-cura-button-h button.sc-cura-button:not(.isLoading):not(.disabled):hover,.sc-cura-button-h a.sc-cura-button:not(.isLoading):not(.disabled):hover{background-color:var(--color-light)}/*!@:host button:not(.isLoading):not(.disabled):active, :host a:not(.isLoading):not(.disabled):active*/.sc-cura-button-h button.sc-cura-button:not(.isLoading):not(.disabled):active,.sc-cura-button-h a.sc-cura-button:not(.isLoading):not(.disabled):active{background-color:var(--color-dark)}/*!@:host button:hover, :host a:hover*/.sc-cura-button-h button.sc-cura-button:hover,.sc-cura-button-h a.sc-cura-button:hover{-webkit-box-shadow:0 4px 8px 0 rgba(38, 38, 38, 0.16);box-shadow:0 4px 8px 0 rgba(38, 38, 38, 0.16)}/*!@:host button.medium:hover, :host a.medium:hover*/.sc-cura-button-h button.medium.sc-cura-button:hover,.sc-cura-button-h a.medium.sc-cura-button:hover{-webkit-box-shadow:0 3px 6px 0 rgba(38, 38, 38, 0.16);box-shadow:0 3px 6px 0 rgba(38, 38, 38, 0.16)}/*!@:host button.small:hover, :host a.small:hover*/.sc-cura-button-h button.small.sc-cura-button:hover,.sc-cura-button-h a.small.sc-cura-button:hover{-webkit-box-shadow:0 2px 5px 0 rgba(38, 38, 38, 0.16);box-shadow:0 2px 5px 0 rgba(38, 38, 38, 0.16)}/*!@:host button:active, :host button.disabled:hover, :host button.isLoading:hover, :host a:active, :host a.disabled:hover, :host a.isLoading:hover*/.sc-cura-button-h button.sc-cura-button:active,.sc-cura-button-h button.disabled.sc-cura-button:hover,.sc-cura-button-h button.isLoading.sc-cura-button:hover,.sc-cura-button-h a.sc-cura-button:active,.sc-cura-button-h a.disabled.sc-cura-button:hover,.sc-cura-button-h a.isLoading.sc-cura-button:hover{-webkit-box-shadow:none !important;box-shadow:none !important}/*!@:host button.medium, :host a.medium*/.sc-cura-button-h button.medium.sc-cura-button,.sc-cura-button-h a.medium.sc-cura-button{padding:calc(var(--base-spacing) * 2.75px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 11px);min-width:calc(var(--base-spacing) * 11px)}/*!@:host button.small, :host a.small*/.sc-cura-button-h button.small.sc-cura-button,.sc-cura-button-h a.small.sc-cura-button{padding:calc(var(--base-spacing) * 1.5px) calc(var(--base-spacing) * 3px);min-height:calc(var(--base-spacing) * 8px);min-width:calc(var(--base-spacing) * 8px)}/*!@:host button .button-container, :host a .button-container*/.sc-cura-button-h button.sc-cura-button .button-container.sc-cura-button,.sc-cura-button-h a.sc-cura-button .button-container.sc-cura-button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;opacity:1;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear}/*!@:host button.icon-right .button-container, :host a.icon-right .button-container*/.sc-cura-button-h button.icon-right.sc-cura-button .button-container.sc-cura-button,.sc-cura-button-h a.icon-right.sc-cura-button .button-container.sc-cura-button{-ms-flex-direction:row-reverse;flex-direction:row-reverse}/*!@:host button .label, :host a .label*/.sc-cura-button-h button.sc-cura-button .label.sc-cura-button,.sc-cura-button-h a.sc-cura-button .label.sc-cura-button{-ms-flex:1;flex:1;font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:1.43em;line-height:1.2em;text-align:var(--text-align, \"left\");color:var(--neutral-black)}/*!@:host button .label.inverted, :host a .label.inverted*/.sc-cura-button-h button.sc-cura-button .label.inverted.sc-cura-button,.sc-cura-button-h a.sc-cura-button .label.inverted.sc-cura-button{color:var(--neutral-white)}/*!@:host button.medium .label, :host a.medium .label*/.sc-cura-button-h button.medium.sc-cura-button .label.sc-cura-button,.sc-cura-button-h a.medium.sc-cura-button .label.sc-cura-button{font-size:1.14em}/*!@:host button.small .label, :host a.small .label*/.sc-cura-button-h button.small.sc-cura-button .label.sc-cura-button,.sc-cura-button-h a.small.sc-cura-button .label.sc-cura-button{font-size:1em}/*!@:host button.icon-left cura-icon, :host a.icon-left cura-icon*/.sc-cura-button-h button.icon-left.sc-cura-button cura-icon.sc-cura-button,.sc-cura-button-h a.icon-left.sc-cura-button cura-icon.sc-cura-button{margin-right:calc(var(--base-spacing) * 3px)}/*!@:host button.icon-right cura-icon, :host a.icon-right cura-icon*/.sc-cura-button-h button.icon-right.sc-cura-button cura-icon.sc-cura-button,.sc-cura-button-h a.icon-right.sc-cura-button cura-icon.sc-cura-button{margin-left:calc(var(--base-spacing) * 3px)}/*!@:host button.medium.icon-left cura-icon, :host a.medium.icon-left cura-icon*/.sc-cura-button-h button.medium.icon-left.sc-cura-button cura-icon.sc-cura-button,.sc-cura-button-h a.medium.icon-left.sc-cura-button cura-icon.sc-cura-button{margin-right:calc(var(--base-spacing) * 2.7px)}/*!@:host button.medium.icon-right cura-icon, :host a.medium.icon-right cura-icon*/.sc-cura-button-h button.medium.icon-right.sc-cura-button cura-icon.sc-cura-button,.sc-cura-button-h a.medium.icon-right.sc-cura-button cura-icon.sc-cura-button{margin-left:calc(var(--base-spacing) * 2.7px)}/*!@:host button.small.icon-left cura-icon, :host a.small.icon-left cura-icon*/.sc-cura-button-h button.small.icon-left.sc-cura-button cura-icon.sc-cura-button,.sc-cura-button-h a.small.icon-left.sc-cura-button cura-icon.sc-cura-button{margin-right:calc(var(--base-spacing) * 2.5px)}/*!@:host button.small.icon-right cura-icon, :host a.small.icon-right cura-icon*/.sc-cura-button-h button.small.icon-right.sc-cura-button cura-icon.sc-cura-button,.sc-cura-button-h a.small.icon-right.sc-cura-button cura-icon.sc-cura-button{margin-left:calc(var(--base-spacing) * 2.5px)}/*!@:host button.disabled, :host a.disabled*/.sc-cura-button-h button.disabled.sc-cura-button,.sc-cura-button-h a.disabled.sc-cura-button{cursor:not-allowed;background-color:var(--neutral-light)}/*!@:host button.disabled .label, :host button.disabled .label.inverted, :host a.disabled .label, :host a.disabled .label.inverted*/.sc-cura-button-h button.disabled.sc-cura-button .label.sc-cura-button,.sc-cura-button-h button.disabled.sc-cura-button .label.inverted.sc-cura-button,.sc-cura-button-h a.disabled.sc-cura-button .label.sc-cura-button,.sc-cura-button-h a.disabled.sc-cura-button .label.inverted.sc-cura-button{color:var(--neutral-dark)}/*!@:host button.icon-only, :host a.icon-only*/.sc-cura-button-h button.icon-only.sc-cura-button,.sc-cura-button-h a.icon-only.sc-cura-button{padding:calc(var(--base-spacing) * 3.5px)}/*!@:host button.icon-only .label, :host a.icon-only .label*/.sc-cura-button-h button.icon-only.sc-cura-button .label.sc-cura-button,.sc-cura-button-h a.icon-only.sc-cura-button .label.sc-cura-button{display:none}/*!@:host button.icon-only cura-icon, :host a.icon-only cura-icon*/.sc-cura-button-h button.icon-only.sc-cura-button cura-icon.sc-cura-button,.sc-cura-button-h a.icon-only.sc-cura-button cura-icon.sc-cura-button{margin-left:0 !important;margin-right:0 !important}/*!@:host button.icon-only.medium, :host a.icon-only.medium*/.sc-cura-button-h button.icon-only.medium.sc-cura-button,.sc-cura-button-h a.icon-only.medium.sc-cura-button{padding:calc(var(--base-spacing) * 2.75px)}/*!@:host button.icon-only.small, :host a.icon-only.small*/.sc-cura-button-h button.icon-only.small.sc-cura-button,.sc-cura-button-h a.icon-only.small.sc-cura-button{padding:calc(var(--base-spacing) * 1.5px)}/*!@:host button cura-loader-circle, :host a cura-loader-circle*/.sc-cura-button-h button.sc-cura-button cura-loader-circle.sc-cura-button,.sc-cura-button-h a.sc-cura-button cura-loader-circle.sc-cura-button{position:absolute;display:none}/*!@:host button.isLoading, :host a.isLoading*/.sc-cura-button-h button.isLoading.sc-cura-button,.sc-cura-button-h a.isLoading.sc-cura-button{cursor:wait}/*!@:host button.isLoading .button-container, :host a.isLoading .button-container*/.sc-cura-button-h button.isLoading.sc-cura-button .button-container.sc-cura-button,.sc-cura-button-h a.isLoading.sc-cura-button .button-container.sc-cura-button{opacity:0.3}/*!@:host button.isLoading.icon-only .button-container, :host a.isLoading.icon-only .button-container*/.sc-cura-button-h button.isLoading.icon-only.sc-cura-button .button-container.sc-cura-button,.sc-cura-button-h a.isLoading.icon-only.sc-cura-button .button-container.sc-cura-button{opacity:0}/*!@:host button.isLoading cura-loader-circle, :host a.isLoading cura-loader-circle*/.sc-cura-button-h button.isLoading.sc-cura-button cura-loader-circle.sc-cura-button,.sc-cura-button-h a.isLoading.sc-cura-button cura-loader-circle.sc-cura-button{display:block}";
 
 class CuraButton {
@@ -6689,7 +6882,7 @@ class CuraIcon {
   }; }
 }
 
-var iconsetdefaulticons = ["360", "accessibility", "addUser", "alertCircle", "alertTriangle", "arrowDown", "arrowDownCircle", "arrowLeft", "arrowLeftCircle", "arrowRight", "arrowRightCircle", "arrowUp", "arrowUpCircle", "attach", "avatarF", "avatarM", "biometry", "bloodGroup", "calendar", "cam", "camOff", "central", "chatCircle", "check", "checkBadge", "checkCircle", "checkDouble", "clock", "close", "closeCircle", "collapse", "config", "delete", "desktop", "doc", "down", "download", "duplicate", "edit", "exam", "expand", "facebook", "fileBmp", "fileJpg", "filePdf", "filePng", "fileUpload", "fileXls", "filter", "fullscreen", "gallery", "geotag", "geotagUnity", "google", "graph", "healthPlan", "height", "height2", "home", "horizontalList", "imageUp", "infoCircle", "instagram", "key", "lamp", "language", "language2", "languageEN", "languagePT", "lattes", "left", "like", "link", "linkExternal", "linkedin", "list", "login", "logout", "mail", "medDoc", "medEspec", "medImg", "medUser", "medical", "menuHamburguer", "menuKebab", "menuMeatballs", "mic", "micOff", "minus", "minusCircle", "minusSquare", "mobile", "news", "notification", "npsDeslike", "npsHate", "npsLike", "npsLove", "npsNeutral", "order", "partner", "phone", "play", "plus", "plusCircle", "plusSquare", "print", "profile", "profile2", "questionCircle", "questionSquare", "range", "reload", "ribbon", "right", "schedule", "scheduleHistorico", "search", "secure", "share", "sound", "soundOff", "subItem", "target", "team", "twitter", "unLink", "unSecure", "unity", "unlike", "up", "upload", "verticalList", "viewFalse", "viewTrue", "weight", "whatsapp", "wifi", "wifiOff", "youtube", "zoomIn", "zoomOut"];
+var iconsetdefaulticons = ["360", "accessibility", "addUser", "airdrop", "alertCircle", "alertTriangle", "arrowDown", "arrowDownCircle", "arrowLeft", "arrowLeftCircle", "arrowRight", "arrowRightCircle", "arrowUp", "arrowUpCircle", "attach", "avatarF", "avatarM", "biometry", "bloodGroup", "calendar", "cam", "camOff", "central", "chatCircle", "check", "checkBadge", "checkCircle", "checkDouble", "clock", "close", "closeCircle", "collapse", "config", "currency", "delete", "desktop", "doc", "down", "download", "duplicate", "edit", "exam", "examDoc", "expand", "facebook", "fileBmp", "fileJpg", "filePdf", "filePng", "fileUpload", "fileXls", "filter", "fullscreen", "gallery", "geotag", "geotagUnity", "geotagUnityGroup", "google", "graph", "healthPlan", "heart", "height", "height2", "home", "horizontalList", "imageUp", "infoCircle", "instagram", "key", "lamp", "language", "language2", "languageEN", "languagePT", "lattes", "left", "like", "link", "linkExternal", "linkedin", "list", "login", "logout", "mail", "maintenance", "medDoc", "medEspec", "medImg", "medUser", "medical", "menuHamburguer", "menuKebab", "menuMeatballs", "mic", "micOff", "minus", "minusCircle", "minusSquare", "mobile", "news", "notification", "npsDeslike", "npsHate", "npsLike", "npsLove", "npsNeutral", "order", "partner", "phone", "play", "plus", "plusCircle", "plusSquare", "print", "profile", "profileCircle", "questionCircle", "questionSquare", "range", "reload", "ribbon", "right", "schedule", "scheduleCheck", "scheduleHistorico", "search", "secure", "share", "siren", "sound", "soundOff", "subItem", "target", "team", "telegram", "twitter", "unLink", "unSecure", "unity", "unlike", "up", "upload", "verticalList", "viewFalse", "viewTrue", "weight", "whatsapp", "wifi", "wifiOff", "youtube", "zoomIn", "zoomOut"];
 
 const curaIconsViewCss = "/*!@:host*/.sc-cura-icons-view-h{display:block;padding:24px;font-family:\"Roboto\", Arial, Helvetica, sans-serif}/*!@.iconDetail*/.iconDetail.sc-cura-icons-view{display:block}/*!@.iconSizes*/.iconSizes.sc-cura-icons-view{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}/*!@.iconSizes .size*/.iconSizes.sc-cura-icons-view .size.sc-cura-icons-view{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;text-align:center;margin-right:9px;padding:8px}/*!@.iconSizes .size:last-child*/.iconSizes.sc-cura-icons-view .size.sc-cura-icons-view:last-child{margin-right:0}/*!@.iconSizes .size span*/.iconSizes.sc-cura-icons-view .size.sc-cura-icons-view span.sc-cura-icons-view{font-size:10px}/*!@.iconSizes.invert*/.iconSizes.invert.sc-cura-icons-view{margin-top:12px}/*!@.iconSizes.invert .size*/.iconSizes.invert.sc-cura-icons-view .size.sc-cura-icons-view{background-color:#262626;color:#F6F6F6;border-radius:3px}/*!@.icons*/.icons.sc-cura-icons-view{margin-top:28px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;position:relative}/*!@.icons .icon*/.icons.sc-cura-icons-view .icon.sc-cura-icons-view{position:relative;padding:4px;cursor:pointer;opacity:0.6;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear}/*!@.icons .icon span*/.icons.sc-cura-icons-view .icon.sc-cura-icons-view span.sc-cura-icons-view{font-size:12px;padding:6px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#000;color:#FFF;border-radius:2px;position:absolute;top:-2px;left:50%;-webkit-transform:translateX(-50%) translateY(-100%);transform:translateX(-50%) translateY(-100%);display:none}/*!@.icons .icon:hover*/.icons.sc-cura-icons-view .icon.sc-cura-icons-view:hover{opacity:1}/*!@.icons .icon:hover span*/.icons.sc-cura-icons-view .icon.sc-cura-icons-view:hover span.sc-cura-icons-view{display:block}";
 
@@ -6792,7 +6985,7 @@ class CuraPageTemplate {
   }; }
 }
 
-const curaParagraphCss = "/*!@:host*/.sc-cura-paragraph-h{display:block;font-size:var(--font-size)}/*!@:host p*/.sc-cura-paragraph-h p.sc-cura-paragraph{font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight-regular);color:var(--color-body);line-height:140%;letter-spacing:2%;-webkit-margin-before:var(--block-margin);margin-block-start:var(--block-margin);-webkit-margin-after:var(--block-margin);margin-block-end:var(--block-margin)}/*!@:host p.large*/.sc-cura-paragraph-h p.large.sc-cura-paragraph{font-size:1.21em;line-height:150%;letter-spacing:0%}/*!@:host p.small*/.sc-cura-paragraph-h p.small.sc-cura-paragraph{font-size:0.85em;line-height:135%;letter-spacing:4%}/*!@:host p.caption*/.sc-cura-paragraph-h p.caption.sc-cura-paragraph{font-size:0.71em;line-height:135%;letter-spacing:6%}@media (min-width: 768px) and (max-width: 1365px){/*!@:host p*/.sc-cura-paragraph-h p.sc-cura-paragraph{font-size:1.14em;line-height:145%}/*!@:host p.large*/.sc-cura-paragraph-h p.large.sc-cura-paragraph{font-size:1.35em;line-height:150%}/*!@:host p.small*/.sc-cura-paragraph-h p.small.sc-cura-paragraph{font-size:1em;line-height:135%}/*!@:host p.caption*/.sc-cura-paragraph-h p.caption.sc-cura-paragraph{font-size:0.85em;line-height:135%;letter-spacing:6%}}@media (min-width: 1366px){/*!@:host p*/.sc-cura-paragraph-h p.sc-cura-paragraph{font-size:1.42em;line-height:150%;letter-spacing:0%}/*!@:host p.large*/.sc-cura-paragraph-h p.large.sc-cura-paragraph{font-size:1.71em;line-height:160%}/*!@:host p.small*/.sc-cura-paragraph-h p.small.sc-cura-paragraph{font-size:1.21em;line-height:145%;letter-spacing:0%}/*!@:host p.caption*/.sc-cura-paragraph-h p.caption.sc-cura-paragraph{font-size:1em;line-height:145%;letter-spacing:2%}}/*!@:host ::slotted(b), :host ::slotted(strong)*/.sc-cura-paragraph-h .sc-cura-paragraph-s>b,.sc-cura-paragraph-h .sc-cura-paragraph-s>strong{font-weight:var(--font-weight-bold)}/*!@:host ::slotted(a)*/.sc-cura-paragraph-h .sc-cura-paragraph-s>a{font-weight:var(--font-weight-medium);color:var(--color-link);text-underline-offset:10%}/*!@:host ::slotted(abbr)*/.sc-cura-paragraph-h .sc-cura-paragraph-s>abbr{color:var(--color-link);-webkit-text-decoration:underline dashed 1px var(--color-link);text-decoration:underline dashed 1px var(--color-link);text-underline-offset:10%;cursor:default}";
+const curaParagraphCss = "/*!@:host*/.sc-cura-paragraph-h{display:block;font-size:var(--font-size)}/*!@:host p*/.sc-cura-paragraph-h p.sc-cura-paragraph{font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight-regular);color:var(--color-body);line-height:var(--line-height);-webkit-margin-before:var(--block-margin);margin-block-start:var(--block-margin);-webkit-margin-after:var(--block-margin);margin-block-end:var(--block-margin)}/*!@:host p.large*/.sc-cura-paragraph-h p.large.sc-cura-paragraph{font-size:1.21em;line-height:calc(var(--line-height) + 10%)}/*!@:host p.small*/.sc-cura-paragraph-h p.small.sc-cura-paragraph{font-size:0.85em;line-height:calc(var(--line-height) - 5%)}/*!@:host p.caption*/.sc-cura-paragraph-h p.caption.sc-cura-paragraph{font-size:0.71em;line-height:calc(var(--line-height) - 5%)}@media (min-width: 768px) and (max-width: 1365px){/*!@:host p*/.sc-cura-paragraph-h p.sc-cura-paragraph{font-size:1.14em;line-height:calc(var(--line-height) + 5%)}/*!@:host p.large*/.sc-cura-paragraph-h p.large.sc-cura-paragraph{font-size:1.35em;line-height:calc(var(--line-height) + 10%)}/*!@:host p.small*/.sc-cura-paragraph-h p.small.sc-cura-paragraph{font-size:1em;line-height:calc(var(--line-height) - 5%)}/*!@:host p.caption*/.sc-cura-paragraph-h p.caption.sc-cura-paragraph{font-size:0.85em;line-height:calc(var(--line-height) - 5%)}}@media (min-width: 1366px){/*!@:host p*/.sc-cura-paragraph-h p.sc-cura-paragraph{font-size:1.42em;line-height:calc(var(--line-height) + 10%)}/*!@:host p.large*/.sc-cura-paragraph-h p.large.sc-cura-paragraph{font-size:1.71em;line-height:calc(var(--line-height) + 20%)}/*!@:host p.small*/.sc-cura-paragraph-h p.small.sc-cura-paragraph{font-size:1.21em;line-height:calc(var(--line-height) + 5%)}/*!@:host p.caption*/.sc-cura-paragraph-h p.caption.sc-cura-paragraph{font-size:1em;line-height:calc(var(--line-height) + 5%)}}/*!@:host ::slotted(b), :host ::slotted(strong)*/.sc-cura-paragraph-h .sc-cura-paragraph-s>b,.sc-cura-paragraph-h .sc-cura-paragraph-s>strong{font-weight:var(--font-weight-bold)}/*!@:host ::slotted(a)*/.sc-cura-paragraph-h .sc-cura-paragraph-s>a{font-weight:var(--font-weight-medium);color:var(--color-link);text-underline-offset:10%}/*!@:host ::slotted(abbr)*/.sc-cura-paragraph-h .sc-cura-paragraph-s>abbr{color:var(--color-link);-webkit-text-decoration:underline dashed 1px var(--color-link);text-decoration:underline dashed 1px var(--color-link);text-underline-offset:10%;cursor:default}";
 
 class CuraParagraph {
   constructor(hostRef) {
@@ -6800,6 +6993,11 @@ class CuraParagraph {
     this.size = 'regular';
     this.inverted = false;
     this.spotColor = 'primary';
+    this.color = undefined;
+    this.styles = {};
+  }
+  handleChangeColor() {
+    this.setColors();
   }
   connectedCallback() {
     this.weights = window.CuraAPI.theme.fonts.getWeights();
@@ -6821,15 +7019,16 @@ class CuraParagraph {
     };
     this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());
     this.setHostProperty('--block-margin', '1.25em');
+    this.setHostProperty('--line-height', '140%');
   }
   setColors() {
-    const fontColor = this.inverted
-      ? window.CuraAPI.theme.colors.getColor('neutral-white')
-      : window.CuraAPI.theme.fonts.getColor();
-    this.styles['--color-body'] = fontColor || window.CuraAPI.theme.colors.getColor('neutral-darker');
-    this.styles['--color-link'] = this.inverted
-      ? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-lighter`)
-      : window.CuraAPI.theme.colors.getColor(`${this.spotColor}-dark`);
+    const fontColor = this.color ? window.CuraAPI.theme.colors.getColor(this.color) :
+      this.inverted
+        ? window.CuraAPI.theme.colors.getColor('neutral-white')
+        : window.CuraAPI.theme.fonts.getColor();
+    this.styles = Object.assign(Object.assign({}, this.styles), { '--color-body': fontColor || window.CuraAPI.theme.colors.getColor('neutral-darker'), '--color-link': this.inverted
+        ? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-lighter`)
+        : window.CuraAPI.theme.colors.getColor(`${this.spotColor}-dark`) });
   }
   setHostProperty(prop, value) {
     this.host.style.setProperty(prop, value);
@@ -6838,6 +7037,9 @@ class CuraParagraph {
     return (hAsync(Host, null, hAsync("p", { style: this.styles, class: this.setsizeClass() }, hAsync("slot", null))));
   }
   get host() { return getElement(this); }
+  static get watchers() { return {
+    "color": ["handleChangeColor"]
+  }; }
   static get style() { return curaParagraphCss; }
   static get cmpMeta() { return {
     "$flags$": 9,
@@ -6845,7 +7047,9 @@ class CuraParagraph {
     "$members$": {
       "size": [513],
       "inverted": [516],
-      "spotColor": [513, "spot-color"]
+      "spotColor": [513, "spot-color"],
+      "color": [8],
+      "styles": [32]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
@@ -6854,6 +7058,8 @@ class CuraParagraph {
 }
 
 registerComponents([
+  CuraAccordion,
+  CuraAccordionItem,
   CuraButton,
   CuraButtonOutline,
   CuraButtonTransparent,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rededor/cura-hydrate",
   "description": "cura component hydration app.",
-  "version": "0.4.4",
+  "version": "0.5.0",
   "main": "index.js",
   "types": "index.d.ts"
 }