npm - @rededor/cura-hydrate - Versions diffs - 0.3.4 → 0.5.0 - Mend

@rededor/cura-hydrate 0.3.4 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/index.js CHANGED Viewed

@@ -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,26 +5008,40 @@ const ThemeMaternity = Object.assign(Object.assign({}, ThemeDefault), {
   /* Colors */
   color: {
     primary: {
-      '100': '#FCEFF6',
-      '300': '#FFBFE5',
-      '500': '#CD4D9A',
-      '700': '#99126C',
-      '900': '#00133B'
+      '100': '248,227,226',
+      '300': '255,179,171',
+      '500': '218,113,111',
+      '700': '145,75,74',
+      '900': '73,38,37'
     },
     secondary: {
-      '100': '#EDF3FF',
-      '300': '#BDD2FF',
-      '500': '#189AB4',
-      '700': '#001C58',
-      '900': '#430E31'
+      '100': '253,251,249',
+      '300': '247,244,238',
+      '500': '245,236,227',
+      '700': '204,197,189',
+      '900': '163,157,151'
     },
     accent: {
-      '100': '#FCEFF6',
-      '300': '#FFBFE5',
-      '500': '#CD4D9A',
-      '700': '#99126C',
-      '900': '#00133B'
+      '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
+    },
   } });
 /**
@@ -5038,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',
@@ -5081,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
 };
 /**
@@ -5094,88 +5139,68 @@ const Static = {
   /* Colors */
   color: {
     success: {
-      lighter: '#DFF6E9',
-      light: '#94E1B5',
-      base: '#5FD290',
-      dark: '#3F8C60',
-      darker: '#132A1D',
-      depth100: '#DFF6E9',
-      depth300: '#94E1B5',
-      depth500: '#5FD290',
-      depth700: '#3F8C60',
-      depth900: '#132A1D',
+      '100': '223,246,233',
+      '300': '148,225,181',
+      '500': '95,210,144',
+      '700': '49,115,77',
+      '900': '19,42,29',
     },
     info: {
-      lighter: '#CFE2FF',
-      light: '#95BFFF',
-      base: '#6EA8FF',
-      dark: '#517BBB',
-      darker: '#253855',
-      depth100: '#CFE2FF',
-      depth300: '#95BFFF',
-      depth500: '#6EA8FF',
-      depth700: '#517BBB',
-      depth900: '#253855',
+      '100': '207,226,255',
+      '300': '149,191,255',
+      '500': '110,168,255',
+      '700': '66,100,153',
+      '900': '37,56,85',
     },
     error: {
-      lighter: '#FBDDDD',
-      light: '#F28F8F',
-      base: '#EB5757',
-      dark: '#9D3A3A',
-      darker: '#2F1111',
-      depth100: '#FBDDDD',
-      depth300: '#F28F8F',
-      depth500: '#EB5757',
-      depth700: '#9D3A3A',
-      depth900: '#2F1111',
+      '100': '251,221,221',
+      '300': '242,143,143',
+      '500': '235,87,87',
+      '700': '157,58,58',
+      '900': '47,17,17',
     },
     warning: {
-      lighter: '#FCFAC4',
-      light: '#F8F489',
-      base: '#F5EF4E',
-      dark: '#A39F34',
-      darker: '#313010',
-      depth100: '#FCFAC4',
-      depth300: '#F8F489',
-      depth500: '#F5EF4E',
-      depth700: '#A39F34',
-      depth900: '#313010',
+      '100': '252,250,196',
+      '300': '248,244,137',
+      '500': '245,239,78',
+      '700': '108,106,32',
+      '900': '49,48,16',
     },
-    /* neutral: {
-      'pure-white': '#FFFFFF',
-      white: '#F6F6F6',
-      pale: '#E9E9E9',
-      lighter: '#E2E2E2',
-      light: '#D4D4D4',
-      base: '#B7B7B7',
-      medium: '#929292',
-      dark: '#6E6E6E',
-      darker: '#4A4A4A',
-      black: '#262626',
-      depth0: '#FFFFFF',
-      depth100: '#F6F6F6',
-      depth200: '#E9E9E9',
-      depth300: '#E2E2E2',
-      depth400: '#D4D4D4',
-      depth500: '#B7B7B7',
-      depth600: '#929292',
-      depth700: '#6E6E6E',
-      depth800: '#4A4A4A',
-      depth900: '#262626',
-    }, */
     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: {
+    xsmall: {
+      min: 0,
+      max: 480
+    },
+    small: {
+      min: 481,
+      max: 768
+    },
+    medium: {
+      min: 769,
+      max: 992
+    },
+    large: {
+      min: 993,
+      max: 1919
+    },
+    xlarge: {
+      min: 1920,
+      max: 4096
+    }
+  }
 };
 class CuraThemeColorsModule {
@@ -5203,42 +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;
-    return ((_a = Static.color[color]) === null || _a === void 0 ? void 0 : _a[depth]) || ((_b = Static.color[color]) === null || _b === void 0 ? void 0 : _b[this.NeutralDepthAlias[depth]]) || null;
+  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 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) {
@@ -5295,17 +5326,31 @@ class CuraThemeFontsModule {
   }
 }
+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)
+        return breakpoint;
+    }
+    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.body.style.setProperty(varName, prop[1]);
+      this.rootElement.style.setProperty(varName, prop[1]);
     };
     this.groupPath = (a, b) => `${a}-${b}`;
     this.isObject = (val) => {
@@ -5335,7 +5380,7 @@ class CuraThemeModule {
         }
       }
     };
-    this.body = window.document.documentElement.querySelector('body');
+    this.rootElement = window.document.documentElement;
   }
   /**
    * Load a theme.
@@ -5375,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); },
@@ -5386,6 +5431,9 @@ class CuraAPI {
       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);
@@ -5889,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 => {
@@ -6165,41 +6214,208 @@ const cmpModules = new Map, getModule = e => {
  e["s-p"] = [], e["s-rc"] = [], hostRefs.set(e, o);
 }, styles = new Map;
-const curaButtonCss = "/*!@:host*/.sc-cura-button-h{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;padding:calc(var(--base-spacing) * 3.5px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 13px);display:-ms-flexbox;display:flex;width:100%;-ms-flex-align:center;align-items:center;background-color:var(--color-base);border-width:1px;border-color:var(--color-dark);border-style:solid;border-radius:4px;-webkit-transition:background-color 0.12s linear, border-color 0.12s linear, -webkit-box-shadow 0.12s linear;transition:background-color 0.12s linear, border-color 0.12s linear, -webkit-box-shadow 0.12s linear;transition:background-color 0.12s linear, box-shadow 0.12s linear, border-color 0.12s linear;transition:background-color 0.12s linear, box-shadow 0.12s linear, border-color 0.12s linear, -webkit-box-shadow 0.12s linear;cursor:pointer}/*!@:host button:hover, :host a:hover*/.sc-cura-button-h button.sc-cura-button:hover,.sc-cura-button-h a.sc-cura-button:hover{background-color:var(--color-light);border-color:var(--color-base);-webkit-box-shadow:0 4px 8px 0 var(--neutral-light);box-shadow:0 4px 8px 0 var(--neutral-light)}/*!@: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;color:var(--neutral-black)}/*!@: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, :host a.icon-right*/.sc-cura-button-h button.icon-right.sc-cura-button,.sc-cura-button-h a.icon-right.sc-cura-button{-ms-flex-direction:row-reverse;flex-direction:row-reverse}/*!@: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, :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)}/*!@: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 var(--neutral-light);box-shadow:0 3px 6px 0 var(--neutral-light)}/*!@: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)}/*!@: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 var(--neutral-light);box-shadow:0 2px 5px 0 var(--neutral-light)}/*!@: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);border-color:var(--neutral-base)}/*!@:host button.disabled:hover, :host a.disabled:hover*/.sc-cura-button-h button.disabled.sc-cura-button:hover,.sc-cura-button-h a.disabled.sc-cura-button:hover{-webkit-box-shadow:none;box-shadow:none}/*!@:host button.disabled .label, :host a.disabled .label*/.sc-cura-button-h button.disabled.sc-cura-button .label.sc-cura-button,.sc-cura-button-h a.disabled.sc-cura-button .label.sc-cura-button{color:var(--neutral-dark)}";
+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 {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.type = 'primary';
-    this.size = 'large';
+    this.size = 'medium';
     this.disabled = false;
     this.isLoading = false;
     this.iconName = undefined;
     this.iconset = 'default';
     this.iconPosition = 'left';
+    this.iconOnly = undefined;
     this.href = undefined;
     this.target = "_self";
     this.color = 'accent';
+    this.fontColor = 'dark';
+    this.textAlign = 'left';
     this.styles = {};
   }
   handleChangeColor() {
     this.setColors();
   }
   connectedCallback() {
+    this.weights = window.CuraAPI.theme.fonts.getWeights();
     this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();
     this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);
     this.styles['--neutral-light'] = window.CuraAPI.theme.colors.getColor(`neutral-light`);
-    this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);
     this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);
-    this.styles['--neutral-black'] = window.CuraAPI.theme.colors.getColor(`neutral-black`);
+    this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();
+    this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();
+    this.styles['--font-weight-medium'] = this.weights.medium;
+    this.styles['--text-align'] = this.textAlign;
     this.setColors();
   }
   getClasses() {
     const classes = {};
-    classes[`button-${this.type.toLowerCase()}`] = true;
     classes[`${this.size.toLowerCase()}`] = true;
     classes[`icon-${this.iconPosition.toLowerCase()}`] = true;
+    classes[`icon-only`] = this.iconOnly;
+    classes['inverted'] = this.fontColor === 'light';
     classes['disabled'] = this.disabled;
+    classes['isLoading'] = this.isLoading;
     return classes;
   }
   setColors() {
@@ -6209,11 +6425,22 @@ class CuraButton {
     if (!this.iconName)
       return '';
     const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;
-    const color = this.disabled ? 'neutral-dark' : `neutral-black`;
+    const color = this.getSymbolColor();
     return hAsync("cura-icon", { name: this.iconName, iconset: this.iconset, size: iconSize, color: color });
   }
+  getSymbolColor() {
+    return this.disabled
+      ? 'neutral-dark'
+      : this.fontColor === 'light'
+        ? 'neutral-white'
+        : 'neutral-black';
+  }
+  handleClick(e) {
+    if (this.disabled || this.isLoading)
+      e.preventDefault();
+  }
   render() {
-    return (hAsync(Host, null, this.href ? (hAsync("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles }, this.getIcon(), hAsync("span", { class: "label" }, hAsync("slot", null)))) : (hAsync("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null }, this.getIcon(), hAsync("span", { class: "label" }, hAsync("slot", null))))));
+    return (hAsync(Host, null, this.href ? (hAsync("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e) }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("span", { class: { label: true, inverted: this.fontColor === 'light' } }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: this.getSymbolColor() }))) : (hAsync("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e) }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("span", { class: { label: true, inverted: this.fontColor === 'light' } }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: this.getSymbolColor() })))));
   }
   static get watchers() { return {
     "color": ["handleChangeColor"]
@@ -6223,21 +6450,215 @@ class CuraButton {
     "$flags$": 9,
     "$tagName$": "cura-button",
     "$members$": {
-      "type": [513],
       "size": [513],
       "disabled": [516],
       "isLoading": [516, "is-loading"],
       "iconName": [513, "icon-name"],
       "iconset": [513],
       "iconPosition": [513, "icon-position"],
+      "iconOnly": [516, "icon-only"],
       "href": [513],
-      "target": [1],
+      "target": [513],
       "color": [1],
+      "fontColor": [513, "font-color"],
+      "textAlign": [513, "text-align"],
       "styles": [32]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
-    "$attrsToReflect$": [["type", "type"], ["size", "size"], ["disabled", "disabled"], ["isLoading", "is-loading"], ["iconName", "icon-name"], ["iconset", "iconset"], ["iconPosition", "icon-position"], ["href", "href"]]
+    "$attrsToReflect$": [["size", "size"], ["disabled", "disabled"], ["isLoading", "is-loading"], ["iconName", "icon-name"], ["iconset", "iconset"], ["iconPosition", "icon-position"], ["iconOnly", "icon-only"], ["href", "href"], ["target", "target"], ["fontColor", "font-color"], ["textAlign", "text-align"]]
+  }; }
+}
+const curaButtonOutlineCss = "/*!@:host*/.sc-cura-button-outline-h{--border-radius:4px;display:inline-block;vertical-align:middle}/*!@:host button, :host a*/.sc-cura-button-outline-h button.sc-cura-button-outline,.sc-cura-button-outline-h a.sc-cura-button-outline{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:transparent;border:none;-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-base);box-shadow:inset 0px 0px 0px 2px var(--color-base);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(.disabled):not(.isLoading):hover, :host a:not(.disabled):not(.isLoading):hover*/.sc-cura-button-outline-h button.sc-cura-button-outline:not(.disabled):not(.isLoading):hover,.sc-cura-button-outline-h a.sc-cura-button-outline:not(.disabled):not(.isLoading):hover{-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-light);box-shadow:inset 0px 0px 0px 2px var(--color-light)}/*!@:host button:not(.disabled):not(.isLoading):hover .label, :host a:not(.disabled):not(.isLoading):hover .label*/.sc-cura-button-outline-h button.sc-cura-button-outline:not(.disabled):not(.isLoading):hover .label.sc-cura-button-outline,.sc-cura-button-outline-h a.sc-cura-button-outline:not(.disabled):not(.isLoading):hover .label.sc-cura-button-outline{color:var(--color-light)}/*!@:host button:not(.disabled):not(.isLoading):hover cura-icon, :host a:not(.disabled):not(.isLoading):hover cura-icon*/.sc-cura-button-outline-h button.sc-cura-button-outline:not(.disabled):not(.isLoading):hover cura-icon.sc-cura-button-outline,.sc-cura-button-outline-h a.sc-cura-button-outline:not(.disabled):not(.isLoading):hover cura-icon.sc-cura-button-outline{--color:var(--color-light) !important}/*!@:host button:not(.disabled):not(.inverted):not(.isLoading):active, :host a:not(.disabled):not(.inverted):not(.isLoading):active*/.sc-cura-button-outline-h button.sc-cura-button-outline:not(.disabled):not(.inverted):not(.isLoading):active,.sc-cura-button-outline-h a.sc-cura-button-outline:not(.disabled):not(.inverted):not(.isLoading):active{-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-dark);box-shadow:inset 0px 0px 0px 2px var(--color-dark)}/*!@:host button:not(.disabled):not(.inverted):not(.isLoading):active .label, :host a:not(.disabled):not(.inverted):not(.isLoading):active .label*/.sc-cura-button-outline-h button.sc-cura-button-outline:not(.disabled):not(.inverted):not(.isLoading):active .label.sc-cura-button-outline,.sc-cura-button-outline-h a.sc-cura-button-outline:not(.disabled):not(.inverted):not(.isLoading):active .label.sc-cura-button-outline{color:var(--color-dark)}/*!@:host button:not(.disabled):not(.inverted):not(.isLoading):active cura-icon, :host a:not(.disabled):not(.inverted):not(.isLoading):active cura-icon*/.sc-cura-button-outline-h button.sc-cura-button-outline:not(.disabled):not(.inverted):not(.isLoading):active cura-icon.sc-cura-button-outline,.sc-cura-button-outline-h a.sc-cura-button-outline:not(.disabled):not(.inverted):not(.isLoading):active cura-icon.sc-cura-button-outline{--color:var(--color-dark) !important}/*!@:host button.medium, :host a.medium*/.sc-cura-button-outline-h button.medium.sc-cura-button-outline,.sc-cura-button-outline-h a.medium.sc-cura-button-outline{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-outline-h button.small.sc-cura-button-outline,.sc-cura-button-outline-h a.small.sc-cura-button-outline{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-outline-h button.sc-cura-button-outline .button-container.sc-cura-button-outline,.sc-cura-button-outline-h a.sc-cura-button-outline .button-container.sc-cura-button-outline{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-outline-h button.icon-right.sc-cura-button-outline .button-container.sc-cura-button-outline,.sc-cura-button-outline-h a.icon-right.sc-cura-button-outline .button-container.sc-cura-button-outline{-ms-flex-direction:row-reverse;flex-direction:row-reverse}/*!@:host button .label, :host a .label*/.sc-cura-button-outline-h button.sc-cura-button-outline .label.sc-cura-button-outline,.sc-cura-button-outline-h a.sc-cura-button-outline .label.sc-cura-button-outline{-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(--color-base)}/*!@:host button .label.inverted, :host a .label.inverted*/.sc-cura-button-outline-h button.sc-cura-button-outline .label.inverted.sc-cura-button-outline,.sc-cura-button-outline-h a.sc-cura-button-outline .label.inverted.sc-cura-button-outline{color:var(--neutral-white)}/*!@:host button.medium .label, :host a.medium .label*/.sc-cura-button-outline-h button.medium.sc-cura-button-outline .label.sc-cura-button-outline,.sc-cura-button-outline-h a.medium.sc-cura-button-outline .label.sc-cura-button-outline{font-size:1.14em}/*!@:host button.small .label, :host a.small .label*/.sc-cura-button-outline-h button.small.sc-cura-button-outline .label.sc-cura-button-outline,.sc-cura-button-outline-h a.small.sc-cura-button-outline .label.sc-cura-button-outline{font-size:1em}/*!@:host button.icon-left cura-icon, :host a.icon-left cura-icon*/.sc-cura-button-outline-h button.icon-left.sc-cura-button-outline cura-icon.sc-cura-button-outline,.sc-cura-button-outline-h a.icon-left.sc-cura-button-outline cura-icon.sc-cura-button-outline{margin-right:calc(var(--base-spacing) * 3px)}/*!@:host button.icon-right cura-icon, :host a.icon-right cura-icon*/.sc-cura-button-outline-h button.icon-right.sc-cura-button-outline cura-icon.sc-cura-button-outline,.sc-cura-button-outline-h a.icon-right.sc-cura-button-outline cura-icon.sc-cura-button-outline{margin-left:calc(var(--base-spacing) * 3px)}/*!@:host button.medium.icon-left cura-icon, :host a.medium.icon-left cura-icon*/.sc-cura-button-outline-h button.medium.icon-left.sc-cura-button-outline cura-icon.sc-cura-button-outline,.sc-cura-button-outline-h a.medium.icon-left.sc-cura-button-outline cura-icon.sc-cura-button-outline{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-outline-h button.medium.icon-right.sc-cura-button-outline cura-icon.sc-cura-button-outline,.sc-cura-button-outline-h a.medium.icon-right.sc-cura-button-outline cura-icon.sc-cura-button-outline{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-outline-h button.small.icon-left.sc-cura-button-outline cura-icon.sc-cura-button-outline,.sc-cura-button-outline-h a.small.icon-left.sc-cura-button-outline cura-icon.sc-cura-button-outline{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-outline-h button.small.icon-right.sc-cura-button-outline cura-icon.sc-cura-button-outline,.sc-cura-button-outline-h a.small.icon-right.sc-cura-button-outline cura-icon.sc-cura-button-outline{margin-left:calc(var(--base-spacing) * 2.5px)}/*!@:host button.disabled, :host a.disabled*/.sc-cura-button-outline-h button.disabled.sc-cura-button-outline,.sc-cura-button-outline-h a.disabled.sc-cura-button-outline{cursor:not-allowed;-webkit-box-shadow:inset 0px 0px 0px 2px var(--neutral-base);box-shadow:inset 0px 0px 0px 2px var(--neutral-base)}/*!@:host button.disabled .label, :host button.disabled .label.inverted, :host a.disabled .label, :host a.disabled .label.inverted*/.sc-cura-button-outline-h button.disabled.sc-cura-button-outline .label.sc-cura-button-outline,.sc-cura-button-outline-h button.disabled.sc-cura-button-outline .label.inverted.sc-cura-button-outline,.sc-cura-button-outline-h a.disabled.sc-cura-button-outline .label.sc-cura-button-outline,.sc-cura-button-outline-h a.disabled.sc-cura-button-outline .label.inverted.sc-cura-button-outline{color:var(--neutral-dark)}/*!@:host button.disabled.inverted, :host a.disabled.inverted*/.sc-cura-button-outline-h button.disabled.inverted.sc-cura-button-outline,.sc-cura-button-outline-h a.disabled.inverted.sc-cura-button-outline{opacity:0.6;-webkit-box-shadow:inset 0px 0px 0px 2px var(--neutral-white);box-shadow:inset 0px 0px 0px 2px var(--neutral-white)}/*!@:host button.disabled.inverted .label, :host button.disabled.inverted .label.inverted, :host a.disabled.inverted .label, :host a.disabled.inverted .label.inverted*/.sc-cura-button-outline-h button.disabled.inverted.sc-cura-button-outline .label.sc-cura-button-outline,.sc-cura-button-outline-h button.disabled.inverted.sc-cura-button-outline .label.inverted.sc-cura-button-outline,.sc-cura-button-outline-h a.disabled.inverted.sc-cura-button-outline .label.sc-cura-button-outline,.sc-cura-button-outline-h a.disabled.inverted.sc-cura-button-outline .label.inverted.sc-cura-button-outline{color:var(--neutral-white)}/*!@:host button.disabled.inverted cura-icon, :host a.disabled.inverted cura-icon*/.sc-cura-button-outline-h button.disabled.inverted.sc-cura-button-outline cura-icon.sc-cura-button-outline,.sc-cura-button-outline-h a.disabled.inverted.sc-cura-button-outline cura-icon.sc-cura-button-outline{--color:var(--neutral-white) !important}/*!@:host button.disabled.inverted cura-loader-circle, :host a.disabled.inverted cura-loader-circle*/.sc-cura-button-outline-h button.disabled.inverted.sc-cura-button-outline cura-loader-circle.sc-cura-button-outline,.sc-cura-button-outline-h a.disabled.inverted.sc-cura-button-outline cura-loader-circle.sc-cura-button-outline{--color:var(--neutral-white) !important}/*!@:host button.icon-only, :host a.icon-only*/.sc-cura-button-outline-h button.icon-only.sc-cura-button-outline,.sc-cura-button-outline-h a.icon-only.sc-cura-button-outline{padding:calc(var(--base-spacing) * 3.5px)}/*!@:host button.icon-only .label, :host a.icon-only .label*/.sc-cura-button-outline-h button.icon-only.sc-cura-button-outline .label.sc-cura-button-outline,.sc-cura-button-outline-h a.icon-only.sc-cura-button-outline .label.sc-cura-button-outline{display:none}/*!@:host button.icon-only cura-icon, :host a.icon-only cura-icon*/.sc-cura-button-outline-h button.icon-only.sc-cura-button-outline cura-icon.sc-cura-button-outline,.sc-cura-button-outline-h a.icon-only.sc-cura-button-outline cura-icon.sc-cura-button-outline{margin-left:0 !important;margin-right:0 !important}/*!@:host button.icon-only.medium, :host a.icon-only.medium*/.sc-cura-button-outline-h button.icon-only.medium.sc-cura-button-outline,.sc-cura-button-outline-h a.icon-only.medium.sc-cura-button-outline{padding:calc(var(--base-spacing) * 2.75px)}/*!@:host button.icon-only.small, :host a.icon-only.small*/.sc-cura-button-outline-h button.icon-only.small.sc-cura-button-outline,.sc-cura-button-outline-h a.icon-only.small.sc-cura-button-outline{padding:calc(var(--base-spacing) * 1.5px)}/*!@:host button.inverted, :host a.inverted*/.sc-cura-button-outline-h button.inverted.sc-cura-button-outline,.sc-cura-button-outline-h a.inverted.sc-cura-button-outline{-webkit-box-shadow:inset 0px 0px 0px 2px var(--neutral-white);box-shadow:inset 0px 0px 0px 2px var(--neutral-white)}/*!@:host button.inverted:not(.disabled):not(.isLoading):hover, :host a.inverted:not(.disabled):not(.isLoading):hover*/.sc-cura-button-outline-h button.inverted.sc-cura-button-outline:not(.disabled):not(.isLoading):hover,.sc-cura-button-outline-h a.inverted.sc-cura-button-outline:not(.disabled):not(.isLoading):hover{-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-lighter);box-shadow:inset 0px 0px 0px 2px var(--color-lighter)}/*!@:host button.inverted:not(.disabled):not(.isLoading):hover .label, :host a.inverted:not(.disabled):not(.isLoading):hover .label*/.sc-cura-button-outline-h button.inverted.sc-cura-button-outline:not(.disabled):not(.isLoading):hover .label.sc-cura-button-outline,.sc-cura-button-outline-h a.inverted.sc-cura-button-outline:not(.disabled):not(.isLoading):hover .label.sc-cura-button-outline{color:var(--color-lighter)}/*!@:host button.inverted:not(.disabled):not(.isLoading):hover cura-icon, :host a.inverted:not(.disabled):not(.isLoading):hover cura-icon*/.sc-cura-button-outline-h button.inverted.sc-cura-button-outline:not(.disabled):not(.isLoading):hover cura-icon.sc-cura-button-outline,.sc-cura-button-outline-h a.inverted.sc-cura-button-outline:not(.disabled):not(.isLoading):hover cura-icon.sc-cura-button-outline{--color:var(--color-lighter) !important}/*!@:host button.inverted:not(.disabled):not(.isLoading):active, :host a.inverted:not(.disabled):not(.isLoading):active*/.sc-cura-button-outline-h button.inverted.sc-cura-button-outline:not(.disabled):not(.isLoading):active,.sc-cura-button-outline-h a.inverted.sc-cura-button-outline:not(.disabled):not(.isLoading):active{-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-light);box-shadow:inset 0px 0px 0px 2px var(--color-light)}/*!@:host button.inverted:not(.disabled):not(.isLoading):active .label, :host a.inverted:not(.disabled):not(.isLoading):active .label*/.sc-cura-button-outline-h button.inverted.sc-cura-button-outline:not(.disabled):not(.isLoading):active .label.sc-cura-button-outline,.sc-cura-button-outline-h a.inverted.sc-cura-button-outline:not(.disabled):not(.isLoading):active .label.sc-cura-button-outline{color:var(--color-light)}/*!@:host button.inverted:not(.disabled):not(.isLoading):active cura-icon, :host a.inverted:not(.disabled):not(.isLoading):active cura-icon*/.sc-cura-button-outline-h button.inverted.sc-cura-button-outline:not(.disabled):not(.isLoading):active cura-icon.sc-cura-button-outline,.sc-cura-button-outline-h a.inverted.sc-cura-button-outline:not(.disabled):not(.isLoading):active cura-icon.sc-cura-button-outline{--color:var(--color-light) !important}/*!@:host button cura-loader-circle, :host a cura-loader-circle*/.sc-cura-button-outline-h button.sc-cura-button-outline cura-loader-circle.sc-cura-button-outline,.sc-cura-button-outline-h a.sc-cura-button-outline cura-loader-circle.sc-cura-button-outline{position:absolute;display:none}/*!@:host button.isLoading, :host a.isLoading*/.sc-cura-button-outline-h button.isLoading.sc-cura-button-outline,.sc-cura-button-outline-h a.isLoading.sc-cura-button-outline{cursor:wait}/*!@:host button.isLoading .button-container, :host a.isLoading .button-container*/.sc-cura-button-outline-h button.isLoading.sc-cura-button-outline .button-container.sc-cura-button-outline,.sc-cura-button-outline-h a.isLoading.sc-cura-button-outline .button-container.sc-cura-button-outline{opacity:0.3}/*!@:host button.isLoading.icon-only .button-container, :host a.isLoading.icon-only .button-container*/.sc-cura-button-outline-h button.isLoading.icon-only.sc-cura-button-outline .button-container.sc-cura-button-outline,.sc-cura-button-outline-h a.isLoading.icon-only.sc-cura-button-outline .button-container.sc-cura-button-outline{opacity:0}/*!@:host button.isLoading cura-loader-circle, :host a.isLoading cura-loader-circle*/.sc-cura-button-outline-h button.isLoading.sc-cura-button-outline cura-loader-circle.sc-cura-button-outline,.sc-cura-button-outline-h a.isLoading.sc-cura-button-outline cura-loader-circle.sc-cura-button-outline{display:block}";
+class CuraButtonOutline {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.size = 'large';
+    this.disabled = false;
+    this.isLoading = false;
+    this.iconName = undefined;
+    this.iconset = 'default';
+    this.iconPosition = 'left';
+    this.iconOnly = undefined;
+    this.href = undefined;
+    this.target = "_self";
+    this.color = 'accent';
+    this.fontColor = 'dark';
+    this.textAlign = 'left';
+    this.styles = {};
+  }
+  handleChangeColor() {
+    this.setColors();
+  }
+  connectedCallback() {
+    this.weights = window.CuraAPI.theme.fonts.getWeights();
+    this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();
+    this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);
+    this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);
+    this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);
+    this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();
+    this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();
+    this.styles['--font-weight-medium'] = this.weights.medium;
+    this.styles['--text-align'] = this.textAlign;
+    this.setColors();
+  }
+  getClasses() {
+    const classes = {};
+    classes[`${this.size.toLowerCase()}`] = true;
+    classes[`icon-${this.iconPosition.toLowerCase()}`] = true;
+    classes[`icon-only`] = this.iconOnly;
+    classes['inverted'] = this.fontColor === 'light';
+    classes['disabled'] = this.disabled;
+    classes['isLoading'] = this.isLoading;
+    return classes;
+  }
+  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`) });
+  }
+  getIcon() {
+    if (!this.iconName)
+      return '';
+    const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;
+    const color = this.getSymbolColor();
+    return hAsync("cura-icon", { name: this.iconName, iconset: this.iconset, size: iconSize, color: color });
+  }
+  getSymbolColor() {
+    return this.disabled
+      ? 'neutral-dark'
+      : this.fontColor === 'light'
+        ? 'neutral-white'
+        : `${this.color}-base`;
+  }
+  handleClick(e) {
+    if (this.disabled || this.isLoading)
+      e.preventDefault();
+  }
+  render() {
+    return (hAsync(Host, null, this.href ? (hAsync("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e) }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("span", { class: { label: true, inverted: this.fontColor === 'light' } }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: this.getSymbolColor() }))) : (hAsync("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e) }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("span", { class: { label: true, inverted: this.fontColor === 'light' } }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: this.getSymbolColor() })))));
+  }
+  static get watchers() { return {
+    "color": ["handleChangeColor"]
+  }; }
+  static get style() { return curaButtonOutlineCss; }
+  static get cmpMeta() { return {
+    "$flags$": 9,
+    "$tagName$": "cura-button-outline",
+    "$members$": {
+      "size": [513],
+      "disabled": [516],
+      "isLoading": [516, "is-loading"],
+      "iconName": [513, "icon-name"],
+      "iconset": [513],
+      "iconPosition": [513, "icon-position"],
+      "iconOnly": [516, "icon-only"],
+      "href": [513],
+      "target": [513],
+      "color": [1],
+      "fontColor": [513, "font-color"],
+      "textAlign": [513, "text-align"],
+      "styles": [32]
+    },
+    "$listeners$": undefined,
+    "$lazyBundleId$": "-",
+    "$attrsToReflect$": [["size", "size"], ["disabled", "disabled"], ["isLoading", "is-loading"], ["iconName", "icon-name"], ["iconset", "iconset"], ["iconPosition", "icon-position"], ["iconOnly", "icon-only"], ["href", "href"], ["target", "target"], ["fontColor", "font-color"], ["textAlign", "text-align"]]
+  }; }
+}
+const curaButtonTransparentCss = "/*!@:host*/.sc-cura-button-transparent-h{--border-radius:4px;display:inline-block;vertical-align:middle}/*!@:host button, :host a*/.sc-cura-button-transparent-h button.sc-cura-button-transparent,.sc-cura-button-transparent-h a.sc-cura-button-transparent{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:transparent;border-width:0px;border-color:transparent;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(.disabled):not(.isLoading):hover .label, :host a:not(.disabled):not(.isLoading):hover .label*/.sc-cura-button-transparent-h button.sc-cura-button-transparent:not(.disabled):not(.isLoading):hover .label.sc-cura-button-transparent,.sc-cura-button-transparent-h a.sc-cura-button-transparent:not(.disabled):not(.isLoading):hover .label.sc-cura-button-transparent{color:var(--color-light)}/*!@:host button:not(.disabled):not(.isLoading):hover cura-icon, :host a:not(.disabled):not(.isLoading):hover cura-icon*/.sc-cura-button-transparent-h button.sc-cura-button-transparent:not(.disabled):not(.isLoading):hover cura-icon.sc-cura-button-transparent,.sc-cura-button-transparent-h a.sc-cura-button-transparent:not(.disabled):not(.isLoading):hover cura-icon.sc-cura-button-transparent{--color:var(--color-light) !important}/*!@:host button:not(.disabled):not(.inverted):not(.isLoading):active .label, :host a:not(.disabled):not(.inverted):not(.isLoading):active .label*/.sc-cura-button-transparent-h button.sc-cura-button-transparent:not(.disabled):not(.inverted):not(.isLoading):active .label.sc-cura-button-transparent,.sc-cura-button-transparent-h a.sc-cura-button-transparent:not(.disabled):not(.inverted):not(.isLoading):active .label.sc-cura-button-transparent{color:var(--color-dark)}/*!@:host button:not(.disabled):not(.inverted):not(.isLoading):active cura-icon, :host a:not(.disabled):not(.inverted):not(.isLoading):active cura-icon*/.sc-cura-button-transparent-h button.sc-cura-button-transparent:not(.disabled):not(.inverted):not(.isLoading):active cura-icon.sc-cura-button-transparent,.sc-cura-button-transparent-h a.sc-cura-button-transparent:not(.disabled):not(.inverted):not(.isLoading):active cura-icon.sc-cura-button-transparent{--color:var(--color-dark) !important}/*!@:host button.medium, :host a.medium*/.sc-cura-button-transparent-h button.medium.sc-cura-button-transparent,.sc-cura-button-transparent-h a.medium.sc-cura-button-transparent{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-transparent-h button.small.sc-cura-button-transparent,.sc-cura-button-transparent-h a.small.sc-cura-button-transparent{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-transparent-h button.sc-cura-button-transparent .button-container.sc-cura-button-transparent,.sc-cura-button-transparent-h a.sc-cura-button-transparent .button-container.sc-cura-button-transparent{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-transparent-h button.icon-right.sc-cura-button-transparent .button-container.sc-cura-button-transparent,.sc-cura-button-transparent-h a.icon-right.sc-cura-button-transparent .button-container.sc-cura-button-transparent{-ms-flex-direction:row-reverse;flex-direction:row-reverse}/*!@:host button .label, :host a .label*/.sc-cura-button-transparent-h button.sc-cura-button-transparent .label.sc-cura-button-transparent,.sc-cura-button-transparent-h a.sc-cura-button-transparent .label.sc-cura-button-transparent{-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(--color-base)}/*!@:host button .label.inverted, :host a .label.inverted*/.sc-cura-button-transparent-h button.sc-cura-button-transparent .label.inverted.sc-cura-button-transparent,.sc-cura-button-transparent-h a.sc-cura-button-transparent .label.inverted.sc-cura-button-transparent{color:var(--neutral-white)}/*!@:host button.medium .label, :host a.medium .label*/.sc-cura-button-transparent-h button.medium.sc-cura-button-transparent .label.sc-cura-button-transparent,.sc-cura-button-transparent-h a.medium.sc-cura-button-transparent .label.sc-cura-button-transparent{font-size:1.14em}/*!@:host button.small .label, :host a.small .label*/.sc-cura-button-transparent-h button.small.sc-cura-button-transparent .label.sc-cura-button-transparent,.sc-cura-button-transparent-h a.small.sc-cura-button-transparent .label.sc-cura-button-transparent{font-size:1em}/*!@:host button.icon-left cura-icon, :host a.icon-left cura-icon*/.sc-cura-button-transparent-h button.icon-left.sc-cura-button-transparent cura-icon.sc-cura-button-transparent,.sc-cura-button-transparent-h a.icon-left.sc-cura-button-transparent cura-icon.sc-cura-button-transparent{margin-right:calc(var(--base-spacing) * 3px)}/*!@:host button.icon-right cura-icon, :host a.icon-right cura-icon*/.sc-cura-button-transparent-h button.icon-right.sc-cura-button-transparent cura-icon.sc-cura-button-transparent,.sc-cura-button-transparent-h a.icon-right.sc-cura-button-transparent cura-icon.sc-cura-button-transparent{margin-left:calc(var(--base-spacing) * 3px)}/*!@:host button.medium.icon-left cura-icon, :host a.medium.icon-left cura-icon*/.sc-cura-button-transparent-h button.medium.icon-left.sc-cura-button-transparent cura-icon.sc-cura-button-transparent,.sc-cura-button-transparent-h a.medium.icon-left.sc-cura-button-transparent cura-icon.sc-cura-button-transparent{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-transparent-h button.medium.icon-right.sc-cura-button-transparent cura-icon.sc-cura-button-transparent,.sc-cura-button-transparent-h a.medium.icon-right.sc-cura-button-transparent cura-icon.sc-cura-button-transparent{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-transparent-h button.small.icon-left.sc-cura-button-transparent cura-icon.sc-cura-button-transparent,.sc-cura-button-transparent-h a.small.icon-left.sc-cura-button-transparent cura-icon.sc-cura-button-transparent{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-transparent-h button.small.icon-right.sc-cura-button-transparent cura-icon.sc-cura-button-transparent,.sc-cura-button-transparent-h a.small.icon-right.sc-cura-button-transparent cura-icon.sc-cura-button-transparent{margin-left:calc(var(--base-spacing) * 2.5px)}/*!@:host button.disabled, :host a.disabled*/.sc-cura-button-transparent-h button.disabled.sc-cura-button-transparent,.sc-cura-button-transparent-h a.disabled.sc-cura-button-transparent{cursor:not-allowed;border-color:var(--neutral-base)}/*!@:host button.disabled .label, :host button.disabled .label.inverted, :host a.disabled .label, :host a.disabled .label.inverted*/.sc-cura-button-transparent-h button.disabled.sc-cura-button-transparent .label.sc-cura-button-transparent,.sc-cura-button-transparent-h button.disabled.sc-cura-button-transparent .label.inverted.sc-cura-button-transparent,.sc-cura-button-transparent-h a.disabled.sc-cura-button-transparent .label.sc-cura-button-transparent,.sc-cura-button-transparent-h a.disabled.sc-cura-button-transparent .label.inverted.sc-cura-button-transparent{color:var(--neutral-dark)}/*!@:host button.disabled.inverted, :host a.disabled.inverted*/.sc-cura-button-transparent-h button.disabled.inverted.sc-cura-button-transparent,.sc-cura-button-transparent-h a.disabled.inverted.sc-cura-button-transparent{opacity:0.6}/*!@:host button.disabled.inverted .label, :host button.disabled.inverted .label.inverted, :host a.disabled.inverted .label, :host a.disabled.inverted .label.inverted*/.sc-cura-button-transparent-h button.disabled.inverted.sc-cura-button-transparent .label.sc-cura-button-transparent,.sc-cura-button-transparent-h button.disabled.inverted.sc-cura-button-transparent .label.inverted.sc-cura-button-transparent,.sc-cura-button-transparent-h a.disabled.inverted.sc-cura-button-transparent .label.sc-cura-button-transparent,.sc-cura-button-transparent-h a.disabled.inverted.sc-cura-button-transparent .label.inverted.sc-cura-button-transparent{color:var(--neutral-white)}/*!@:host button.disabled.inverted cura-icon, :host a.disabled.inverted cura-icon*/.sc-cura-button-transparent-h button.disabled.inverted.sc-cura-button-transparent cura-icon.sc-cura-button-transparent,.sc-cura-button-transparent-h a.disabled.inverted.sc-cura-button-transparent cura-icon.sc-cura-button-transparent{--color:var(--neutral-white) !important}/*!@:host button.disabled.inverted cura-loader-circle, :host a.disabled.inverted cura-loader-circle*/.sc-cura-button-transparent-h button.disabled.inverted.sc-cura-button-transparent cura-loader-circle.sc-cura-button-transparent,.sc-cura-button-transparent-h a.disabled.inverted.sc-cura-button-transparent cura-loader-circle.sc-cura-button-transparent{--color:var(--neutral-white) !important}/*!@:host button.icon-only, :host a.icon-only*/.sc-cura-button-transparent-h button.icon-only.sc-cura-button-transparent,.sc-cura-button-transparent-h a.icon-only.sc-cura-button-transparent{padding:calc(var(--base-spacing) * 3.5px)}/*!@:host button.icon-only .label, :host a.icon-only .label*/.sc-cura-button-transparent-h button.icon-only.sc-cura-button-transparent .label.sc-cura-button-transparent,.sc-cura-button-transparent-h a.icon-only.sc-cura-button-transparent .label.sc-cura-button-transparent{display:none}/*!@:host button.icon-only cura-icon, :host a.icon-only cura-icon*/.sc-cura-button-transparent-h button.icon-only.sc-cura-button-transparent cura-icon.sc-cura-button-transparent,.sc-cura-button-transparent-h a.icon-only.sc-cura-button-transparent cura-icon.sc-cura-button-transparent{margin-left:0 !important;margin-right:0 !important}/*!@:host button.icon-only.medium, :host a.icon-only.medium*/.sc-cura-button-transparent-h button.icon-only.medium.sc-cura-button-transparent,.sc-cura-button-transparent-h a.icon-only.medium.sc-cura-button-transparent{padding:calc(var(--base-spacing) * 2.75px)}/*!@:host button.icon-only.small, :host a.icon-only.small*/.sc-cura-button-transparent-h button.icon-only.small.sc-cura-button-transparent,.sc-cura-button-transparent-h a.icon-only.small.sc-cura-button-transparent{padding:calc(var(--base-spacing) * 1.5px)}/*!@:host button.inverted:not(.isLoading):not(.disabled):hover .label, :host a.inverted:not(.isLoading):not(.disabled):hover .label*/.sc-cura-button-transparent-h button.inverted.sc-cura-button-transparent:not(.isLoading):not(.disabled):hover .label.sc-cura-button-transparent,.sc-cura-button-transparent-h a.inverted.sc-cura-button-transparent:not(.isLoading):not(.disabled):hover .label.sc-cura-button-transparent{color:var(--color-lighter)}/*!@:host button.inverted:not(.isLoading):not(.disabled):hover cura-icon, :host a.inverted:not(.isLoading):not(.disabled):hover cura-icon*/.sc-cura-button-transparent-h button.inverted.sc-cura-button-transparent:not(.isLoading):not(.disabled):hover cura-icon.sc-cura-button-transparent,.sc-cura-button-transparent-h a.inverted.sc-cura-button-transparent:not(.isLoading):not(.disabled):hover cura-icon.sc-cura-button-transparent{--color:var(--color-lighter) !important}/*!@:host button.inverted:not(.isLoading):not(.disabled):active .label, :host a.inverted:not(.isLoading):not(.disabled):active .label*/.sc-cura-button-transparent-h button.inverted.sc-cura-button-transparent:not(.isLoading):not(.disabled):active .label.sc-cura-button-transparent,.sc-cura-button-transparent-h a.inverted.sc-cura-button-transparent:not(.isLoading):not(.disabled):active .label.sc-cura-button-transparent{color:var(--color-light)}/*!@:host button.inverted:not(.isLoading):not(.disabled):active cura-icon, :host a.inverted:not(.isLoading):not(.disabled):active cura-icon*/.sc-cura-button-transparent-h button.inverted.sc-cura-button-transparent:not(.isLoading):not(.disabled):active cura-icon.sc-cura-button-transparent,.sc-cura-button-transparent-h a.inverted.sc-cura-button-transparent:not(.isLoading):not(.disabled):active cura-icon.sc-cura-button-transparent{--color:var(--color-light) !important}/*!@:host button cura-loader-circle, :host a cura-loader-circle*/.sc-cura-button-transparent-h button.sc-cura-button-transparent cura-loader-circle.sc-cura-button-transparent,.sc-cura-button-transparent-h a.sc-cura-button-transparent cura-loader-circle.sc-cura-button-transparent{position:absolute;display:none}/*!@:host button.isLoading, :host a.isLoading*/.sc-cura-button-transparent-h button.isLoading.sc-cura-button-transparent,.sc-cura-button-transparent-h a.isLoading.sc-cura-button-transparent{cursor:wait}/*!@:host button.isLoading .button-container, :host a.isLoading .button-container*/.sc-cura-button-transparent-h button.isLoading.sc-cura-button-transparent .button-container.sc-cura-button-transparent,.sc-cura-button-transparent-h a.isLoading.sc-cura-button-transparent .button-container.sc-cura-button-transparent{opacity:0.3}/*!@:host button.isLoading.icon-only .button-container, :host a.isLoading.icon-only .button-container*/.sc-cura-button-transparent-h button.isLoading.icon-only.sc-cura-button-transparent .button-container.sc-cura-button-transparent,.sc-cura-button-transparent-h a.isLoading.icon-only.sc-cura-button-transparent .button-container.sc-cura-button-transparent{opacity:0}/*!@:host button.isLoading cura-loader-circle, :host a.isLoading cura-loader-circle*/.sc-cura-button-transparent-h button.isLoading.sc-cura-button-transparent cura-loader-circle.sc-cura-button-transparent,.sc-cura-button-transparent-h a.isLoading.sc-cura-button-transparent cura-loader-circle.sc-cura-button-transparent{display:block}";
+class CuraButtonTransparent {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.size = 'large';
+    this.disabled = false;
+    this.isLoading = false;
+    this.iconName = undefined;
+    this.iconset = 'default';
+    this.iconPosition = 'left';
+    this.iconOnly = undefined;
+    this.href = undefined;
+    this.target = "_self";
+    this.color = 'accent';
+    this.fontColor = 'dark';
+    this.textAlign = 'left';
+    this.styles = {};
+  }
+  handleChangeColor() {
+    this.setColors();
+  }
+  connectedCallback() {
+    this.weights = window.CuraAPI.theme.fonts.getWeights();
+    this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();
+    this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);
+    this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);
+    this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);
+    this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();
+    this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();
+    this.styles['--font-weight-medium'] = this.weights.medium;
+    this.styles['--text-align'] = this.textAlign;
+    this.setColors();
+  }
+  getClasses() {
+    const classes = {};
+    classes[`${this.size.toLowerCase()}`] = true;
+    classes[`icon-${this.iconPosition.toLowerCase()}`] = true;
+    classes[`icon-only`] = this.iconOnly;
+    classes['inverted'] = this.fontColor === 'light';
+    classes['disabled'] = this.disabled;
+    classes['isLoading'] = this.isLoading;
+    return classes;
+  }
+  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`) });
+  }
+  getIcon() {
+    if (!this.iconName)
+      return '';
+    const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;
+    const color = this.getSymbolColor();
+    return hAsync("cura-icon", { name: this.iconName, iconset: this.iconset, size: iconSize, color: color });
+  }
+  getSymbolColor() {
+    return this.disabled
+      ? 'neutral-dark'
+      : this.fontColor === 'light'
+        ? 'neutral-white'
+        : `${this.color}-base`;
+  }
+  handleClick(e) {
+    if (this.disabled || this.isLoading)
+      e.preventDefault();
+  }
+  render() {
+    return (hAsync(Host, null, this.href ? (hAsync("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e) }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("span", { class: { label: true, inverted: this.fontColor === 'light' } }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: this.getSymbolColor() }))) : (hAsync("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e) }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("span", { class: { label: true, inverted: this.fontColor === 'light' } }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: this.getSymbolColor() })))));
+  }
+  static get watchers() { return {
+    "color": ["handleChangeColor"]
+  }; }
+  static get style() { return curaButtonTransparentCss; }
+  static get cmpMeta() { return {
+    "$flags$": 9,
+    "$tagName$": "cura-button-transparent",
+    "$members$": {
+      "size": [513],
+      "disabled": [516],
+      "isLoading": [516, "is-loading"],
+      "iconName": [513, "icon-name"],
+      "iconset": [513],
+      "iconPosition": [513, "icon-position"],
+      "iconOnly": [516, "icon-only"],
+      "href": [513],
+      "target": [513],
+      "color": [1],
+      "fontColor": [513, "font-color"],
+      "textAlign": [513, "text-align"],
+      "styles": [32]
+    },
+    "$listeners$": undefined,
+    "$lazyBundleId$": "-",
+    "$attrsToReflect$": [["size", "size"], ["disabled", "disabled"], ["isLoading", "is-loading"], ["iconName", "icon-name"], ["iconset", "iconset"], ["iconPosition", "icon-position"], ["iconOnly", "icon-only"], ["href", "href"], ["target", "target"], ["fontColor", "font-color"], ["textAlign", "text-align"]]
   }; }
 }
@@ -6273,12 +6694,12 @@ class CuraDisplay {
   }
   setColors() {
     const fontColor = this.inverted
-      ? window.CuraAPI.theme.colors.getColor('neutral-100')
+      ? 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}-100`)
-      : window.CuraAPI.theme.colors.getColor(`${this.spotColor}-700`);
+      ? 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);
@@ -6351,12 +6772,12 @@ class CuraHeading {
   }
   setColors() {
     const fontColor = this.inverted
-      ? window.CuraAPI.theme.colors.getColor('neutral-100')
+      ? 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}-100`)
-      : window.CuraAPI.theme.colors.getColor(`${this.spotColor}-700`);
+      ? 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);
@@ -6461,7 +6882,7 @@ class CuraIcon {
   }; }
 }
-var iconsetdefaulticons = ["360", "accessibility", "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", "deslike", "download", "duplicate", "edit", "exam", "expand", "facebook", "fileBmp", "fileJpg", "filePdf", "filePng", "fileUpload", "fileXls", "filter", "fullscreen", "gallery", "geotag", "google", "hate", "healthPlan", "height", "height2", "home", "horizontalList", "imageUp", "info2", "infoCircle", "instagram", "key", "language", "language2", "languageEN", "languagePT", "lattes", "like", "likeHand", "link", "linkExternal", "linkedin", "list", "login", "logout", "love", "mail", "mail2", "medical", "menuHamburguer", "menuKebab", "menuMeatballs", "mic", "micOff", "minus", "minusCircle", "minusSquare", "mobile", "neutral", "news", "notification", "order", "partner", "phone", "play", "plus", "plusCircle", "plusSquare", "print", "profile", "profile2", "pulldownG", "pulldownP", "pullupG", "pullupP", "questionCircle", "questionSquare", "range", "reload", "schedule", "search", "secure", "share", "share2", "sound", "soundOff", "subItem", "target", "team", "twitter", "unLink", "unSecure", "unlikeHand", "upload", "verticalList", "viewFalse", "viewTrue", "weight", "whatsapp", "wifi", "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}";
@@ -6491,6 +6912,45 @@ class CuraIconsView {
   }; }
 }
+const curaLoaderCircleCss = "/*!@:host*/.sc-cura-loader-circle-h{display:inline-block;width:var(--size);height:var(--size)}/*!@:host svg*/.sc-cura-loader-circle-h svg.sc-cura-loader-circle{width:var(--size);height:var(--size);-webkit-animation:rotate 0.7s linear infinite;animation:rotate 0.7s linear infinite}/*!@:host circle, :host path*/.sc-cura-loader-circle-h circle.sc-cura-loader-circle,.sc-cura-loader-circle-h path.sc-cura-loader-circle{stroke-miterlimit:10;stroke-linecap:round;stroke-linejoin:round}/*!@:host path*/.sc-cura-loader-circle-h path.sc-cura-loader-circle{stroke:var(--color)}/*!@:host stop*/.sc-cura-loader-circle-h stop.sc-cura-loader-circle{stop-color:var(--color)}/*!@:host linearGradient stop:first-child*/.sc-cura-loader-circle-h linearGradient.sc-cura-loader-circle stop.sc-cura-loader-circle:first-child{stop-opacity:0.14}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}";
+class CuraLoaderCircle {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.sizes = {
+      xlarge: 32,
+      large: 24,
+      medium: 20,
+      small: 16,
+      default: 16,
+    };
+    this.getPxSize = () => this.sizes[this.size] || this.sizes['default'];
+    this.size = 'medium';
+    this.color = 'neutral-white';
+  }
+  getStyles() {
+    return {
+      '--size': `${this.getPxSize()}px`,
+      '--color': window.CuraAPI.theme.colors.getColor(this.color)
+    };
+  }
+  render() {
+    return (hAsync(Host, { style: this.getStyles() }, hAsync("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("g", null, hAsync("circle", { cx: "8", cy: "8", r: "7", stroke: "url(#paint0_linear_13485_11488)", "stroke-width": "2" }), hAsync("path", { d: "M1 8C1 4.13401 4.11877 1 7.96596 1C9.53445 1 10.9819 1.52093 12.1462 2.4C12.8959 2.96601 13.5282 3.68049 14 4.5", "stroke-width": "2" })), hAsync("defs", null, hAsync("linearGradient", { id: "paint0_linear_13485_11488", x1: "15.7", y1: "4.5", x2: "4.15", y2: "11.5", gradientUnits: "userSpaceOnUse" }, hAsync("stop", null), hAsync("stop", { offset: "1" }))))));
+  }
+  static get style() { return curaLoaderCircleCss; }
+  static get cmpMeta() { return {
+    "$flags$": 9,
+    "$tagName$": "cura-loader-circle",
+    "$members$": {
+      "size": [513],
+      "color": [513]
+    },
+    "$listeners$": undefined,
+    "$lazyBundleId$": "-",
+    "$attrsToReflect$": [["size", "size"], ["color", "color"]]
+  }; }
+}
 const curaPageTemplateCss = "/*!@:host*/.sc-cura-page-template-h{display:block}/*!@:host .grid-template*/.sc-cura-page-template-h .grid-template.sc-cura-page-template{display:grid;grid-template-rows:auto;grid-template-columns:auto;grid-template-areas:\"sub-header\" \"header\" \"pre-content\" \"content-container\" \"post-body\" \"footer\" \"sub-footer\"}/*!@:host .grid-template #sub-header*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #sub-header.sc-cura-page-template{grid-area:sub-header}/*!@:host .grid-template #header*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #header.sc-cura-page-template{grid-area:header}/*!@:host .grid-template #pre-content*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #pre-content.sc-cura-page-template{grid-area:pre-content}/*!@:host .grid-template #content-container*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #content-container.sc-cura-page-template{grid-area:content-container}/*!@:host .grid-template #post-body*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #post-body.sc-cura-page-template{grid-area:post-body}/*!@:host .grid-template #footer*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #footer.sc-cura-page-template{grid-area:footer}/*!@:host .grid-template #sub-footer*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #sub-footer.sc-cura-page-template{grid-area:sub-footer}@media (max-width: 360px){/*!@:host .grid-template*/.sc-cura-page-template-h .grid-template.sc-cura-page-template{padding:0px}}@media (min-width: 768px) and (max-width: 1365px){/*!@:host .grid-template*/.sc-cura-page-template-h .grid-template.sc-cura-page-template{padding:0px}}@media (min-width: 1366px) and (max-width: 1919px){/*!@:host .grid-template*/.sc-cura-page-template-h .grid-template.sc-cura-page-template{padding:0px}/*!@:host .grid-template #content-container #sidebar-left ::slotted(div[slot=sidebar-left])*/.sc-cura-page-template-h .grid-template #content-container #sidebar-left .sc-cura-page-template-s>div[slot=sidebar-left]{margin-right:calc(var(--spacing) * 5px)}/*!@:host .grid-template #content-container #sidebar-right ::slotted(div[slot=sidebar-right])*/.sc-cura-page-template-h .grid-template #content-container #sidebar-right .sc-cura-page-template-s>div[slot=sidebar-right]{margin-left:calc(var(--spacing) * 5px)}/*!@:host .grid-template #content-container*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #content-container.sc-cura-page-template{display:-ms-flexbox;display:flex}/*!@:host .grid-template #content-container #content*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #content-container.sc-cura-page-template #content.sc-cura-page-template{-ms-flex-positive:1;flex-grow:1}/*!@:host .grid-template #content-container #sidebar-left, :host .grid-template #content-container #sidebar-right*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #content-container.sc-cura-page-template #sidebar-left.sc-cura-page-template,.sc-cura-page-template-h .grid-template.sc-cura-page-template #content-container.sc-cura-page-template #sidebar-right.sc-cura-page-template{max-width:20%}}@media (min-width: 1920px){/*!@:host .grid-template*/.sc-cura-page-template-h .grid-template.sc-cura-page-template{padding:0px}/*!@:host .grid-template #content-container #sidebar-left ::slotted(div[slot=sidebar-left])*/.sc-cura-page-template-h .grid-template #content-container #sidebar-left .sc-cura-page-template-s>div[slot=sidebar-left]{margin-right:calc(var(--spacing) * 7px)}/*!@:host .grid-template #content-container #sidebar-right ::slotted(div[slot=sidebar-right])*/.sc-cura-page-template-h .grid-template #content-container #sidebar-right .sc-cura-page-template-s>div[slot=sidebar-right]{margin-left:calc(var(--spacing) * 7px)}/*!@:host .grid-template #content-container*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #content-container.sc-cura-page-template{display:-ms-flexbox;display:flex}/*!@:host .grid-template #content-container #content*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #content-container.sc-cura-page-template #content.sc-cura-page-template{-ms-flex-positive:1;flex-grow:1}/*!@:host .grid-template #content-container #sidebar-left, :host .grid-template #content-container #sidebar-right*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #content-container.sc-cura-page-template #sidebar-left.sc-cura-page-template,.sc-cura-page-template-h .grid-template.sc-cura-page-template #content-container.sc-cura-page-template #sidebar-right.sc-cura-page-template{max-width:20%}/*!@:host .grid-template #content-container.centered*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #content-container.centered.sc-cura-page-template{max-width:1920px;justify-self:center}}";
 class CuraPageTemplate {
@@ -6525,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) {
@@ -6533,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();
@@ -6554,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-100')
-      : 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}-100`)
-      : window.CuraAPI.theme.colors.getColor(`${this.spotColor}-700`);
+    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);
@@ -6571,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,
@@ -6578,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$": "-",
@@ -6587,11 +7058,16 @@ class CuraParagraph {
 }
 registerComponents([
+  CuraAccordion,
+  CuraAccordionItem,
   CuraButton,
+  CuraButtonOutline,
+  CuraButtonTransparent,
   CuraDisplay,
   CuraHeading,
   CuraIcon,
   CuraIconsView,
+  CuraLoaderCircle,
   CuraPageTemplate,
   CuraParagraph,
 ]);