@rededor/cura 0.2.0 → 0.3.0

package/dist/cjs/app-globals-5f5b9fbf.js

@@ -0,0 +1,398 @@
+'use strict';
+
+/**
+ * Cura Default Theme
+ */
+const ThemeDefault = {
+  /* Colors */
+  color: {
+    primary: {
+      '100': '#71C5E8',
+      '300': '#449CD5',
+      '500': '#005EB8',
+      '700': '#004890',
+      '900': '#002855'
+    },
+    secondary: {
+      '100': '#F5ECE3',
+      '300': '#DDC0A2',
+      '500': '#CCA074',
+      '700': '#886B4D',
+      '900': '#292017'
+    },
+    accent: {
+      '100': '#F9E8D5',
+      '300': '#E4A04F',
+      '500': '#DF8D2C',
+      '700': '#955E1D',
+      '900': '#2D1C09'
+    }
+  },
+  /* Spacing */
+  spacing: {
+    base: 4,
+  },
+  /* Fonts */
+  font: {
+    size: '14px',
+    color: '#4A4A4A',
+    body: "'Roboto', Arial, Helvetica, sans-serif",
+    heading: "'Roboto', Arial, Helvetica, sans-serif",
+    display: "'Roboto', Arial, Helvetica, sans-serif",
+    weights: {
+      thin: 100,
+      light: 300,
+      regular: 400,
+      medium: 500,
+      bold: 700,
+      black: 900
+    },
+  }
+};
+
+/**
+ * Maternity Theme
+ */
+const ThemeMaternity = Object.assign(Object.assign({}, ThemeDefault), { 
+  /* Custom */
+  /* Colors */
+  color: {
+    primary: {
+      '100': '#FCEFF6',
+      '300': '#FFBFE5',
+      '500': '#CD4D9A',
+      '700': '#99126C',
+      '900': '#00133B'
+    },
+    secondary: {
+      '100': '#EDF3FF',
+      '300': '#BDD2FF',
+      '500': '#189AB4',
+      '700': '#001C58',
+      '900': '#430E31'
+    }
+  } });
+
+const ThemePresets = {
+  'default': ThemeDefault,
+  'maternidade': ThemeMaternity
+};
+
+/**
+ * Static
+ */
+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',
+    },
+    info: {
+      lighter: '#CFE2FF',
+      light: '#95BFFF',
+      base: '#6EA8FF',
+      dark: '#517BBB',
+      darker: '#253855',
+      depth100: '#CFE2FF',
+      depth300: '#95BFFF',
+      depth500: '#6EA8FF',
+      depth700: '#517BBB',
+      depth900: '#253855',
+    },
+    error: {
+      lighter: '#FBDDDD',
+      light: '#F28F8F',
+      base: '#EB5757',
+      dark: '#9D3A3A',
+      darker: '#2F1111',
+      depth100: '#FBDDDD',
+      depth300: '#F28F8F',
+      depth500: '#EB5757',
+      depth700: '#9D3A3A',
+      depth900: '#2F1111',
+    },
+    warning: {
+      lighter: '#FCFAC4',
+      light: '#F8F489',
+      base: '#F5EF4E',
+      dark: '#A39F34',
+      darker: '#313010',
+      depth100: '#FCFAC4',
+      depth300: '#F8F489',
+      depth500: '#F5EF4E',
+      depth700: '#A39F34',
+      depth900: '#313010',
+    },
+    /* 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',
+    },
+  },
+  /* Icons */
+  icons: {
+    'sizes': ['128', '72', '64', '48', '40', '32', '24', '20', '16'],
+    'strokes': ['5.25', '3.5', '3.25', '2.75', '2.5', '2.25', '2', '1.75', '1.5'],
+    'default-size': '24',
+  },
+  /* Breakpoints */
+  breakpoints: {
+    small: '576px',
+    medium: '768px',
+    large: '992px',
+    xlarge: '1200px',
+  },
+};
+
+class CuraThemeColorsModule {
+  constructor() {
+    this.NeutralDepthAlias = {
+      'purewhite': '0',
+      'white': '100',
+      'pale': '200',
+      'lighter': '300',
+      'light': '400',
+      'base': '500',
+      'medium': '600',
+      'dark': '700',
+      'darker': '800',
+      'black': '900',
+    };
+    this.ColorDepthAlias = {
+      'lighter': '100',
+      'light': '300',
+      'base': '500',
+      'dark': '700',
+      'darker': '900'
+    };
+  }
+  /**
+   * Get theme color.
+   * @param colorWithDepth string Ex.: primary-light
+   * @returns css color property. Color definition or related css var from the theme.
+   */
+  getColor(colorWithDepth = "primary-base") {
+    const { color, depth } = this.splitColorDepth(colorWithDepth);
+    const staticColor = this.getStatic(color, depth);
+    if (staticColor)
+      return staticColor;
+    return this.getDynamic(color, depth);
+  }
+  /**
+   * Internal: Look for static color by name and depth.
+   * @param color Color name.
+   * @param depth Depth number or alias.
+   * @returns Static color definition.
+   */
+  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;
+  }
+  /**
+   * Internal: Look for theme dynamic colors.
+   * @param color Color name.
+   * @param depth Depth number or alias.
+   * @returns Related CSS variable defined by the theme.
+   */
+  getDynamic(color, depth) {
+    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)`;
+  }
+  /**
+   * Internal: Split color strings
+   * @param colorWithDepth Color string [color]-[depth]. Ex.: primary-dark or primary-700.
+   * @returns Object { color: string, depth: string }.
+   */
+  splitColorDepth(colorWithDepth) {
+    const [color, depth] = colorWithDepth.toLowerCase().split(/-(.*)/);
+    return { color: color !== null && color !== void 0 ? color : "primary", depth: depth !== null && depth !== void 0 ? depth : "base" };
+  }
+}
+
+class CuraThemeFontsModule {
+  constructor() {
+    /**
+     * Get the CSS variable related to the font size base defined by the theme.
+     * @returns Related CSS variable as a string.
+     */
+    this.getSize = () => `var(--cura-font-size)`;
+    /**
+     * Get CSS variable related to the font color defined by the theme.
+     * @returns Related CSS variable as a string.
+     */
+    this.getColor = () => `var(--cura-font-color)`;
+  }
+  /**
+   * Get the CSS variable related to the font family defined by the theme.
+   * @param type 'body' | 'heading' | 'display'
+   * @returns Related css variable as a string.
+   */
+  getFamily(type = "body") {
+    const curaFontFamilyCSSVar = `--cura-font-${type.toLowerCase()}`;
+    return getComputedStyle(document.body).getPropertyValue(curaFontFamilyCSSVar)
+      ? `var(${curaFontFamilyCSSVar})`
+      : 'var(--cura-font-body)';
+  }
+  /**
+   * Get the CSS variables related to font weights defined by the theme.
+   * @returns Object with CSS vars weights definitions for thin, light, regular, medium, bold and black fonts.
+   */
+  getWeights() {
+    const weights = {};
+    Object.keys(ThemeDefault.font.weights).forEach((key) => weights[key] = `var(--cura-font-weights-${key})`);
+    return weights;
+  }
+}
+
+class CuraThemeModule {
+  constructor() {
+    this.prefix = '--cura';
+    this.colors = new CuraThemeColorsModule();
+    this.fonts = new CuraThemeFontsModule();
+    /* 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.groupPath = (a, b) => `${a}-${b}`;
+    this.isObject = (val) => {
+      return val && typeof val === 'object' && !Array.isArray(val);
+    };
+    /** Deep merge objects */
+    this.mergeObject = (from, to) => {
+      const entries = Object.entries(from);
+      for (let e of entries) {
+        if (this.isObject(e[1])) {
+          this.mergeObject(e[1], to[e[0]]);
+        }
+        else {
+          to[e[0]] = e[1];
+        }
+      }
+    };
+    /** Set css vars from preset object */
+    this.buildCssVars = (path, obj) => {
+      const entries = Object.entries(obj);
+      for (let e of entries) {
+        if (this.isObject(e[1])) {
+          this.buildCssVars(this.groupPath(path, e[0]), e[1]);
+        }
+        else {
+          this.setCssVar(e, path);
+        }
+      }
+    };
+    this.body = window.document.documentElement.querySelector('body');
+  }
+  /**
+   * Load a theme.
+   * @param theme Theme tag.
+   */
+  load(theme = 'default') {
+    const preset = ThemePresets[theme] ? ThemePresets[theme] : ThemePresets.default;
+    this.buildCssVars(this.prefix, preset);
+  }
+  /**
+   * Define a custom theme
+   * @param customTheme Custom theme object definition
+   */
+  setCustom(customTheme) {
+    const customTag = customTheme.name;
+    if (customTag in ThemePresets) {
+      console.log('Error building custom theme. Theme %s already exists. Loading default theme.', customTag);
+      this.load('default');
+    }
+    else {
+      const preset = customTheme.fromPreset && customTheme.fromPreset in ThemePresets
+        ? ThemePresets[customTheme.fromPreset]
+        : ThemePresets.default;
+      const newTheme = Object.assign({}, JSON.parse(JSON.stringify(preset)));
+      this.mergeObject(customTheme.definitions, newTheme);
+      ThemePresets[customTag] = newTheme;
+      this.load(customTag);
+    }
+  }
+}
+
+class CuraAPI {
+  constructor(config) {
+    this.localAssetsPath = config && config.localAssetsPath ? config.localAssetsPath : `/assets`;
+    const themeModule = new CuraThemeModule();
+    this.theme = {
+      load: function (themeTag) { themeModule.load(themeTag); },
+      setCustom: function (customThemeDefinitions) { themeModule.setCustom(customThemeDefinitions); },
+      colors: {
+        getColor: function (colorWithDepth) { return themeModule.colors.getColor(colorWithDepth); },
+      },
+      fonts: {
+        getFamily: function (type) { return themeModule.fonts.getFamily(type); },
+        getWeights: function () { return themeModule.fonts.getWeights(); },
+        getSize: function () { return themeModule.fonts.getSize(); },
+        getColor: function () { return themeModule.fonts.getColor(); }
+      }
+    };
+    if (config && config.customTheme) {
+      this.theme.setCustom(config.customTheme);
+    }
+    else {
+      const theme = config && config.theme ? config.theme : 'default';
+      this.theme.load(theme);
+    }
+  }
+}
+
+function appGlobalScript () {
+  const config = window.CuraInit;
+  window.CuraAPI = config ? new CuraAPI(config) : new CuraAPI();
+  const api = window.CuraAPI;
+  window.dispatchEvent(new CustomEvent("CuraAPIReady", { detail: { api } }));
+  if (config && typeof config.onReady === 'function')
+    config.onReady(api);
+}
+
+const globalScripts = appGlobalScript;
+
+exports.globalScripts = globalScripts;

package/dist/cjs/cura-display_3.cjs.entry.js

@@ -0,0 +1,187 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-8686299e.js');
+
+const curaDisplayCss = ":host{display:block;font-size:var(--font-size);text-transform:uppercase}:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-family:var(--font-family);font-size:4.285em;font-weight:var(--font-weight-black);color:var(--color-body);line-height:120%;letter-spacing:-4%}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:6.21em}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:3em;font-weight:var(--font-weight-bold)}@media screen and (min-width: 768px) and (max-width: 1366px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:4.92em}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:7.07em}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:3.428em}}@media screen and (min-width: 1367px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:6.14em;line-height:125%}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:8.857em;letter-spacing:-6%}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:4.285em;letter-spacing:-2%}}:host ::slotted(b),:host ::slotted(strong){font-weight:var(--font-weight-bold)}:host ::slotted(a){font-weight:var(--font-weight-bold);color:var(--color-link);text-decoration:none;text-underline-offset:10%;cursor:pointer}:host ::slotted(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 CuraDisplay = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Heading level for semantics.
+     * Values: 1(default)-6.
+     */
+    this.level = 1;
+    /**
+     * Heading style size.
+     * Values: small | regular(default) | large.
+     */
+    this.size = 'regular';
+  }
+  connectedCallback() {
+    this.weights = window.CuraAPI.theme.fonts.getWeights();
+    this.setFontProperties();
+    this.setColors();
+  }
+  getClasses() {
+    const classes = {};
+    classes[this.size.toLowerCase()] = true;
+    return classes;
+  }
+  setFontProperties() {
+    this.styles = {
+      '--font-family': window.CuraAPI.theme.fonts.getFamily('display'),
+      '--font-size': window.CuraAPI.theme.fonts.getSize(),
+      '--font-weight-bold': this.weights.bold,
+      '--font-weight-black': this.weights.black
+    };
+    this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());
+  }
+  setColors() {
+    const fontColor = window.CuraAPI.theme.fonts.getColor();
+    this.styles['--color-body'] = fontColor || window.CuraAPI.theme.colors.getColor('neutral-darker');
+    this.styles['--color-link'] = window.CuraAPI.theme.colors.getColor('primary-700');
+  }
+  setHostProperty(prop, value) {
+    this.host.style.setProperty(prop, value);
+  }
+  getHeadingTag() {
+    const tags = {
+      '1': index.h("h1", { style: this.styles, class: this.getClasses() }, index.h("slot", null)),
+      '2': index.h("h2", { style: this.styles, class: this.getClasses() }, index.h("slot", null)),
+      '3': index.h("h3", { style: this.styles, class: this.getClasses() }, index.h("slot", null)),
+      '4': index.h("h4", { style: this.styles, class: this.getClasses() }, index.h("slot", null)),
+      '5': index.h("h5", { style: this.styles, class: this.getClasses() }, index.h("slot", null)),
+      '6': index.h("h6", { style: this.styles, class: this.getClasses() }, index.h("slot", null)),
+      'default': index.h("h1", { style: this.styles, class: this.getClasses() }, index.h("slot", null))
+    };
+    return tags[`${this.level}`] || tags['default'];
+  }
+  render() {
+    return (index.h(index.Host, null, this.getHeadingTag()));
+  }
+  get host() { return index.getElement(this); }
+};
+CuraDisplay.style = curaDisplayCss;
+
+const curaHeadingCss = ":host{display:block;font-size:var(--font-size)}:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-family:var(--font-family);font-size:1.71em;font-weight:var(--font-weight-regular);color:var(--color-body);line-height:130%;letter-spacing:0%}:host h1.bold-weight,:host h2.bold-weight,:host h3.bold-weight,:host h4.bold-weight,:host h5.bold-weight,:host h6.bold-weight{font-weight:var(--font-weight-medium)}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.07em;letter-spacing:-2%}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.214em;line-height:150%;letter-spacing:0%}:host h1.small.bold-weight,:host h2.small.bold-weight,:host h3.small.bold-weight,:host h4.small.bold-weight,:host h5.small.bold-weight,:host h6.small.bold-weight{font-weight:var(--font-weight-bold)}@media screen and (min-width: 768px) and (max-width: 1366px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:2em}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.357em}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.357em}}@media screen and (min-width: 1367px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:2.5em;line-height:135%;letter-spacing:-2%}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.92em}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.71em;line-height:160%;letter-spacing:0%}}:host ::slotted(b),:host ::slotted(strong){font-weight:var(--font-weight-bold)}:host ::slotted(a){font-weight:var(--font-weight-bold);color:var(--color-link);text-decoration:none;text-underline-offset:10%;cursor:pointer}:host ::slotted(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 CuraHeading = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Heading level for semantics.
+     * Values: 1(default)-6.
+     */
+    this.level = 1;
+    /**
+     * Heading style size.
+     * Values: small | regular(default) | large.
+     */
+    this.size = 'regular';
+    /**
+     * Heading font weight.
+     * Values: regular(default) | bold.
+     */
+    this.weight = 'regular';
+  }
+  connectedCallback() {
+    this.weights = window.CuraAPI.theme.fonts.getWeights();
+    this.setFontProperties();
+    this.setColors();
+  }
+  getClasses() {
+    const classes = {};
+    classes[this.size.toLowerCase()] = true;
+    classes[`${this.weight.toLowerCase()}-weight`] = true;
+    return classes;
+  }
+  setFontProperties() {
+    this.styles = {
+      '--font-family': window.CuraAPI.theme.fonts.getFamily('heading'),
+      '--font-size': window.CuraAPI.theme.fonts.getSize(),
+      '--font-weight-regular': this.weights.regular,
+      '--font-weight-medium': this.weights.medium,
+      '--font-weight-bold': this.weights.bold,
+      '--font-weight-black': this.weights.black
+    };
+    this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());
+  }
+  setColors() {
+    const fontColor = window.CuraAPI.theme.fonts.getColor();
+    this.styles['--color-body'] = fontColor || window.CuraAPI.theme.colors.getColor('neutral-darker');
+    this.styles['--color-link'] = window.CuraAPI.theme.colors.getColor('primary-700');
+  }
+  setHostProperty(prop, value) {
+    this.host.style.setProperty(prop, value);
+  }
+  getHeadingTag() {
+    const tags = {
+      '1': index.h("h1", { style: this.styles, class: this.getClasses() }, index.h("slot", null)),
+      '2': index.h("h2", { style: this.styles, class: this.getClasses() }, index.h("slot", null)),
+      '3': index.h("h3", { style: this.styles, class: this.getClasses() }, index.h("slot", null)),
+      '4': index.h("h4", { style: this.styles, class: this.getClasses() }, index.h("slot", null)),
+      '5': index.h("h5", { style: this.styles, class: this.getClasses() }, index.h("slot", null)),
+      '6': index.h("h6", { style: this.styles, class: this.getClasses() }, index.h("slot", null)),
+      'default': index.h("h1", { style: this.styles, class: this.getClasses() }, index.h("slot", null))
+    };
+    return tags[`${this.level}`] || tags['default'];
+  }
+  render() {
+    return (index.h(index.Host, null, this.getHeadingTag()));
+  }
+  get host() { return index.getElement(this); }
+};
+CuraHeading.style = curaHeadingCss;
+
+const curaParagraphCss = ":host{display:block;font-size:var(--font-size)}:host p{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%}:host p.large{font-size:1.21em;line-height:150%;letter-spacing:0%}:host p.small{font-size:0.85em;line-height:135%;letter-spacing:4%}:host p.caption{font-size:0.71em;line-height:135%;letter-spacing:6%}@media screen and (min-width: 768px) and (max-width: 1366px){:host p{font-size:1.14em;line-height:145%}:host p.large{font-size:1.35em;line-height:150%}:host p.small{font-size:1em;line-height:135%}:host p.caption{font-size:0.85em;line-height:135%;letter-spacing:6%}}@media screen and (min-width: 1367px){:host p{font-size:1.42em;line-height:150%;letter-spacing:0%}:host p.large{font-size:1.71em;line-height:160%}:host p.small{font-size:1.21em;line-height:145%;letter-spacing:0%}:host p.caption{font-size:1em;line-height:145%;letter-spacing:2%}}:host ::slotted(b),:host ::slotted(strong){font-weight:var(--font-weight-bold)}:host ::slotted(a){font-weight:var(--font-weight-medium);color:var(--color-link);text-underline-offset:10%}:host ::slotted(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 CuraParagraph = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Set size of body text.
+     * Values: regular (default) | large | small | caption.
+     */
+    this.size = 'regular';
+  }
+  connectedCallback() {
+    this.weights = window.CuraAPI.theme.fonts.getWeights();
+    this.setFontProperties();
+    this.setColors();
+  }
+  setsizeClass() {
+    const sizeclass = {};
+    sizeclass[this.size.toLowerCase()] = true;
+    return sizeclass;
+  }
+  setFontProperties() {
+    this.styles = {
+      '--font-family': window.CuraAPI.theme.fonts.getFamily('body'),
+      '--font-size': window.CuraAPI.theme.fonts.getSize(),
+      '--font-weight-regular': this.weights.regular,
+      '--font-weight-medium': this.weights.medium,
+      '--font-weight-bold': this.weights.bold
+    };
+    this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());
+  }
+  setColors() {
+    const fontColor = window.CuraAPI.theme.fonts.getColor();
+    this.styles['--color-body'] = fontColor || window.CuraAPI.theme.colors.getColor(`neutral-darker`);
+    this.styles['--color-link'] = window.CuraAPI.theme.colors.getColor('primary-700');
+  }
+  setHostProperty(prop, value) {
+    this.host.style.setProperty(prop, value);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("p", { style: this.styles, class: this.setsizeClass() }, index.h("slot", null))));
+  }
+  get host() { return index.getElement(this); }
+};
+CuraParagraph.style = curaParagraphCss;
+
+exports.cura_display = CuraDisplay;
+exports.cura_heading = CuraHeading;
+exports.cura_paragraph = CuraParagraph;

package/dist/cjs/cura-icon.cjs.entry.js

@@ -0,0 +1,59 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-8686299e.js');
+
+const curaIconCss = ":host{width:var(--size);height:var(--size)}:host svg{display:inline-block;stroke:var(--color);width:var(--size);height:var(--size);stroke-width:var(--stroke);fill:none}";
+
+const CuraIcon = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.name = '';
+    this.color = 'neutral-base';
+    this.iconset = 'default';
+    this.disabled = false;
+    this.sizes = {
+      "128": { size: 128, stroke: 5.25 },
+      "72": { size: 72, stroke: 3.5 },
+      "64": { size: 64, stroke: 3.25 },
+      "48": { size: 48, stroke: 2.75 },
+      "40": { size: 40, stroke: 2.5 },
+      "32": { size: 32, stroke: 2.25 },
+      "24": { size: 24, stroke: 2 },
+      "20": { size: 20, stroke: 1.75 },
+      "16": { size: 16, stroke: 1.5 },
+      "default": { size: 24, stroke: 2 }
+    };
+  }
+  sizeHandler(size) {
+    const scaledStroke = (iconSize) => {
+      return `${this.sizes[iconSize].stroke * (this.sizes.default.size / this.sizes[iconSize].size)}px`;
+    };
+    this.setHostProperty('--size', this.sizes[`${size}`] ? `${this.sizes[size].size}px` : `${this.sizes.default.size}px`);
+    this.setHostProperty('--stroke', this.sizes[`${size}`] ? scaledStroke(size) : scaledStroke("default"));
+  }
+  colorHandler() {
+    this.setHostProperty('--color', window.CuraAPI.theme.colors.getColor(this.disabled ? 'neutral-light' : this.color));
+  }
+  connectedCallback() {
+    this.assetsPath = window.CuraAPI.localAssetsPath;
+    this.sizeHandler(this.size);
+    this.colorHandler();
+  }
+  setHostProperty(prop, value) {
+    this.host.style.setProperty(prop, value);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("svg", { version: "1.1", viewBox: "0 0 24 24", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg" }, index.h("use", { xlinkHref: `${this.assetsPath}/icons/iconset-${this.iconset}.svg#${this.name}` }))));
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "size": ["sizeHandler"],
+    "color": ["colorHandler"],
+    "disabled": ["colorHandler"]
+  }; }
+};
+CuraIcon.style = curaIconCss;
+
+exports.cura_icon = CuraIcon;