@descope/web-components-ui 1.0.40 → 1.0.42

package/dist/index.esm.js

@@ -11,202 +11,247 @@ import Color from 'color';
 
 const DESCOPE_PREFIX = 'descope';
 
-const kebabCase = str => str
-.replace(/([a-z])([A-Z])/g, "$1-$2")
-.replace(/[\s_.]+/g, '-')
-.toLowerCase();
+const kebabCase = (str) =>
+	str
+		.replace(/([a-z])([A-Z])/g, '$1-$2')
+		.replace(/[\s_.]+/g, '-')
+		.toLowerCase();
 
 const kebabCaseJoin = (...args) => kebabCase(args.join('-'));
 
-const getCssVarName = (...args) => `--${kebabCaseJoin(...args.filter(arg => !!arg))}`;
+const getCssVarName = (...args) =>
+	`--${kebabCaseJoin(...args.filter((arg) => !!arg))}`;
 
-const createCssVarFallback = (first, ...rest) => `var(${first}${rest.length ? ` , ${createCssVarFallback(...rest)}` : ''})`;
+const createCssVarFallback = (first, ...rest) =>
+	`var(${first}${rest.length ? ` , ${createCssVarFallback(...rest)}` : ''})`;
 
-const createCssSelector = (baseSelector = '', relativeSelectorOrSelectorFn = '') => 
-  typeof relativeSelectorOrSelectorFn === 'function' ? 
-    relativeSelectorOrSelectorFn(baseSelector) : 
-    `${baseSelector}${relativeSelectorOrSelectorFn}`;
+const createCssSelector = (
+	baseSelector = '',
+	relativeSelectorOrSelectorFn = ''
+) =>
+	typeof relativeSelectorOrSelectorFn === 'function'
+		? relativeSelectorOrSelectorFn(baseSelector)
+		: `${baseSelector}${relativeSelectorOrSelectorFn}`;
 
 class StyleBuilder {
-  constructor() {
-    this.styleMap = new Map();
-  }
-
-  add(selector, property, value) {
-    if (!this.styleMap.has(selector)) {
-      this.styleMap.set(selector, []);
-    }
-
-    this.styleMap.set(selector, [...this.styleMap.get(selector), { property, value }]);
-  }
-
-  toString() {
-    return Array.from(this.styleMap.entries()).reduce((style, [selector, propValArr]) =>
-      style += `${selector} { \n${propValArr.map(({ property, value }) => `${property}: ${value}`).join(';\n')} \n}\n\n`
-      , '')
-  }
+	constructor() {
+		this.styleMap = new Map();
+	}
+
+	add(selector, property, value) {
+		if (!this.styleMap.has(selector)) {
+			this.styleMap.set(selector, []);
+		}
+
+		this.styleMap.set(selector, [
+			...this.styleMap.get(selector),
+			{ property, value }
+		]);
+	}
+
+	toString() {
+		return Array.from(this.styleMap.entries()).reduce(
+			(style, [selector, propValArr]) =>
+				(style += `${selector} { \n${propValArr
+					.map(({ property, value }) => `${property}: ${value}`)
+					.join(';\n')} \n}\n\n`),
+			''
+		);
+	}
 }
 
 const normalizeConfig = (attr, config) => {
-  const defaultMapping = { selector: '', property: kebabCase(attr) };
+	const defaultMapping = { selector: '', property: kebabCase(attr) };
 
-  if (!config || !Object.keys(config).length) return [defaultMapping];
+	if (!config || !Object.keys(config).length) return [defaultMapping];
 
-  if (Array.isArray(config)) return config.map(entry => Object.assign({}, defaultMapping, entry));
+	if (Array.isArray(config))
+		return config.map((entry) => Object.assign({}, defaultMapping, entry));
 
-  return [Object.assign({}, defaultMapping, config)];
+	return [Object.assign({}, defaultMapping, config)];
 };
 
 const createStyle = (componentName, baseSelector, mappings) => {
-  const style = new StyleBuilder();
+	const style = new StyleBuilder();
 
-  Object.keys(mappings).forEach((attr) => {
-    const attrConfig = normalizeConfig(attr, mappings[attr]);
+	Object.keys(mappings).forEach((attr) => {
+		const attrConfig = normalizeConfig(attr, mappings[attr]);
 
-    const cssVarName = getCssVarName(componentName, attr);
+		const cssVarName = getCssVarName(componentName, attr);
 
-    attrConfig.forEach(({ selector: relativeSelectorOrSelectorFn, property }) => {
-      style.add(
-        createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
-        property,
-        createCssVarFallback(cssVarName)
-      );
-    });
-  });
+		attrConfig.forEach(
+			({ selector: relativeSelectorOrSelectorFn, property }) => {
+				style.add(
+					createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
+					property,
+					createCssVarFallback(cssVarName)
+				);
+			}
+		);
+	});
 
-  return style.toString();
+	return style.toString();
 };
 
 const createCssVarsList = (componentName, mappings) =>
-  Object.keys(mappings).reduce(
-    (acc, attr) => Object.assign(acc, { [attr]: getCssVarName(componentName, attr) }),
-    {}
-  );
+	Object.keys(mappings).reduce(
+		(acc, attr) =>
+			Object.assign(acc, { [attr]: getCssVarName(componentName, attr) }),
+		{}
+	);
 
 // match the host selector with the inner element selector
 // e.g. when we want to set the same size for the host & the inner element this can be useful
-const matchHostStyle = (mappingObj) => [mappingObj, {...mappingObj, selector: () => `:host${mappingObj.selector || ''}`}];
-
-const createStyleMixin = ({  mappings = {} }) => (superclass) => {
-  const styleAttributes = Object.keys(mappings).map(key => kebabCaseJoin('st', key));
-  return class CustomStyleMixinClass extends superclass {
-    static get observedAttributes() {
-      const superAttrs = superclass.observedAttributes || [];
-      return [...superAttrs, ...styleAttributes]
-    }
-
-    static get cssVarList() {
-      return createCssVarsList(superclass.componentName, mappings)
-    }
-
-    #styleEle = null;
-
-    constructor() {
-      super();
-
-      this.#createComponentStyle();
-      this.#createAttrOverrideStyle();
-    }
-
-    #createAttrOverrideStyle() {
-      this.#styleEle = document.createElement('style');
-      this.#styleEle.id = 'style-mixin-overrides';
-
-      this.#styleEle.innerText = '* {}';
-      this.shadowRoot.prepend(this.#styleEle);
-    }
-
-    #updateAttrOverrideStyle(attrName, value) {
-      const style = this.#styleEle.sheet.cssRules[0].style;
-      const varName = getCssVarName(superclass.componentName, attrName.replace(/^st-/, ''));
-
-      if (value)
-        style.setProperty(varName, value);
-      else
-        style.removeProperty(varName);
-    }
-
-    #createComponentStyle() {
-      const themeStyle = document.createElement('style');
-      themeStyle.id = 'style-mixin-component';
-      themeStyle.innerHTML = createStyle(superclass.componentName, this.baseSelector, mappings);
-      this.shadowRoot.prepend(themeStyle);
-    }
-
-    attributeChangedCallback(attrName, oldValue, newValue) {
-      super.attributeChangedCallback?.(attrName, oldValue, newValue);
-
-      if (styleAttributes.includes(attrName)) {
-        this.#updateAttrOverrideStyle(attrName, newValue);
-      }
-    }
-  }
-};
+const matchHostStyle = (mappingObj) => [
+	mappingObj,
+	{ ...mappingObj, selector: () => `:host${mappingObj.selector || ''}` }
+];
+
+const createStyleMixin =
+	({ mappings = {} }) =>
+	(superclass) => {
+		const styleAttributes = Object.keys(mappings).map((key) =>
+			kebabCaseJoin('st', key)
+		);
+		return class CustomStyleMixinClass extends superclass {
+			static get observedAttributes() {
+				const superAttrs = superclass.observedAttributes || [];
+				return [...superAttrs, ...styleAttributes];
+			}
+
+			static get cssVarList() {
+				return createCssVarsList(superclass.componentName, mappings);
+			}
+
+			#styleEle = null;
+
+			constructor() {
+				super();
+
+				this.#createComponentStyle();
+				this.#createAttrOverrideStyle();
+			}
+
+			#createAttrOverrideStyle() {
+				this.#styleEle = document.createElement('style');
+				this.#styleEle.id = 'style-mixin-overrides';
+
+				this.#styleEle.innerText = '* {}';
+				this.shadowRoot.prepend(this.#styleEle);
+			}
+
+			#updateAttrOverrideStyle(attrName, value) {
+				const style = this.#styleEle.sheet.cssRules[0].style;
+				const varName = getCssVarName(
+					superclass.componentName,
+					attrName.replace(/^st-/, '')
+				);
+
+				if (value) style.setProperty(varName, value);
+				else style.removeProperty(varName);
+			}
+
+			#createComponentStyle() {
+				const themeStyle = document.createElement('style');
+				themeStyle.id = 'style-mixin-component';
+				themeStyle.innerHTML = createStyle(
+					superclass.componentName,
+					this.baseSelector,
+					mappings
+				);
+				this.shadowRoot.prepend(themeStyle);
+			}
+
+			attributeChangedCallback(attrName, oldValue, newValue) {
+				super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+				if (styleAttributes.includes(attrName)) {
+					this.#updateAttrOverrideStyle(attrName, newValue);
+				}
+			}
+
+    // we need to see if this is needed
+    // connectedCallback() {
+    //   super.connectedCallback?.();
+    //   if (this.shadowRoot.isConnected) {
+    //     Array.from(this.attributes).forEach(attr => {
+    //       if (styleAttributes.includes(attr.nodeName)) {
+    //         this.#updateAttrOverrideStyle(attr.nodeName, attr.value)
+    //       }
+    //     });
+    //   }
+    // }
+		};
+	};
 
 const draggableMixin = (superclass) =>
-  class DraggableMixinClass extends superclass {
-
-    #styleEle = null;
-
-    static get observedAttributes() {
-      const superAttrs = superclass.observedAttributes || [];
-      return [...superAttrs, 'draggable']
-    }
-
-    constructor() {
-      super();
-
-      this.#styleEle = document.createElement('style');
-      this.#styleEle.innerText = `${this.baseSelector} { cursor: inherit }`;
-    }
-
-    #handleDraggableStyle(isDraggable) {
-      if (isDraggable) {
-        this.shadowRoot.appendChild(this.#styleEle);
-      } else {
-        this.#styleEle.remove();
-      }
-    }
-
-    attributeChangedCallback(attrName, oldValue, newValue) {
-      super.attributeChangedCallback?.(attrName, oldValue, newValue);
-      if (attrName === 'draggable') {
-        this.#handleDraggableStyle(newValue === 'true');
-      }
-    }
-  };
+	class DraggableMixinClass extends superclass {
+		#styleEle = null;
+
+		static get observedAttributes() {
+			const superAttrs = superclass.observedAttributes || [];
+			return [...superAttrs, 'draggable'];
+		}
+
+		constructor() {
+			super();
+
+			this.#styleEle = document.createElement('style');
+			this.#styleEle.innerText = `${this.baseSelector} { cursor: inherit }`;
+		}
+
+		#handleDraggableStyle(isDraggable) {
+			if (isDraggable) {
+				this.shadowRoot.appendChild(this.#styleEle);
+			} else {
+				this.#styleEle.remove();
+			}
+		}
+
+		attributeChangedCallback(attrName, oldValue, newValue) {
+			super.attributeChangedCallback?.(attrName, oldValue, newValue);
+			if (attrName === 'draggable') {
+				this.#handleDraggableStyle(newValue === 'true');
+			}
+		}
+	};
 
 const observeAttributes = (ele, callback, excludeAttrs) => {
-  // sync all attrs on init
-  callback(...Array.from(ele.attributes).map(attr => attr.name));
-
-  const observer = new MutationObserver((mutationsList) => {
-    for (const mutation of mutationsList) {
-      if (mutation.type === "attributes" && !excludeAttrs.includes(mutation.attributeName)) {
-        callback(mutation.attributeName);
-      }
-    }
-  });
-
-  observer.observe(ele, { attributes: true });
-};
+	// sync all attrs on init
+	callback(...Array.from(ele.attributes).map((attr) => attr.name));
+
+	const observer = new MutationObserver((mutationsList) => {
+		for (const mutation of mutationsList) {
+			if (
+				mutation.type === 'attributes' &&
+				!excludeAttrs.includes(mutation.attributeName)
+			) {
+				callback(mutation.attributeName);
+			}
+		}
+	});
 
-const createSyncAttrsCb = (srcEle, targetEle) => (...attrNames) => {
-  attrNames.forEach(attrName => {
-    const srcAttrVal = srcEle.getAttribute(attrName);
-    if (srcAttrVal !== null) {
-      if (targetEle.getAttribute(attrName) !== srcAttrVal) {
-        targetEle.setAttribute(attrName, srcAttrVal);
-      }
-    } else {
-      targetEle.removeAttribute(attrName);
-    }
-  });
+	observer.observe(ele, { attributes: true });
 };
 
+const createSyncAttrsCb =
+	(srcEle, targetEle) =>
+	(...attrNames) => {
+		attrNames.forEach((attrName) => {
+			const srcAttrVal = srcEle.getAttribute(attrName);
+			if (srcAttrVal !== null) {
+				if (targetEle.getAttribute(attrName) !== srcAttrVal) {
+					targetEle.setAttribute(attrName, srcAttrVal);
+				}
+			} else {
+				targetEle.removeAttribute(attrName);
+			}
+		});
+	};
+
 const syncAttrs = (ele1, ele2, excludeAttrs) => {
-  observeAttributes(ele1, createSyncAttrsCb(ele1, ele2), excludeAttrs);
-  observeAttributes(ele2, createSyncAttrsCb(ele2, ele1), excludeAttrs);
+	observeAttributes(ele1, createSyncAttrsCb(ele1, ele2), excludeAttrs);
+	observeAttributes(ele2, createSyncAttrsCb(ele2, ele1), excludeAttrs);
 };
 
 const createProxy = ({
@@ -341,26 +386,30 @@ const inputMixin = (superclass) =>
 	};
 
 const componentNameValidationMixin = (superclass) =>
-  class DraggableMixinClass extends superclass {
-    #checkComponentName() {
-      const currentComponentName = this.shadowRoot.host.tagName.toLowerCase();
-
-      if (!superclass.componentName) {
-        throw Error(`component name is not defined on super class, make sure you have a static get for "componentName"`)
-      }
-
-      if (currentComponentName !== superclass.componentName) {
-        throw Error(`component name mismatch, expected "${superclass.componentName}", current "${currentComponentName}"`)
-      }
-    }
-
-    connectedCallback() {
-      super.connectedCallback?.();
-      if (this.shadowRoot.isConnected) {
-        this.#checkComponentName();
-      }
-    }
-  };
+	class DraggableMixinClass extends superclass {
+		#checkComponentName() {
+			const currentComponentName = this.shadowRoot.host.tagName.toLowerCase();
+
+			if (!superclass.componentName) {
+				throw Error(
+					`component name is not defined on super class, make sure you have a static get for "componentName"`
+				);
+			}
+
+			if (currentComponentName !== superclass.componentName) {
+				throw Error(
+					`component name mismatch, expected "${superclass.componentName}", current "${currentComponentName}"`
+				);
+			}
+		}
+
+		connectedCallback() {
+			super.connectedCallback?.();
+			if (this.shadowRoot.isConnected) {
+				this.#checkComponentName();
+			}
+		}
+	};
 
 const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);
 
@@ -552,7 +601,7 @@ customElements.define(componentName$9, TextField);
 
 const template = document.createElement('template');
 
-const componentName$8 = getComponentName("combo");
+const componentName$8 = getComponentName('combo');
 
 template.innerHTML = `
   <descope-button></descope-button>
@@ -560,13 +609,13 @@ template.innerHTML = `
 `;
 
 class Combo extends HTMLElement {
-  constructor() {
-    super();
+	constructor() {
+		super();
 
-    this.attachShadow({ mode: 'open' }).appendChild(
-      template.content.cloneNode(true)
-    );
-  }
+		this.attachShadow({ mode: 'open' }).appendChild(
+			template.content.cloneNode(true)
+		);
+	}
 }
 
 customElements.define(componentName$8, Combo);
@@ -822,7 +871,7 @@ overrides$1 = `
 
 customElements.define(componentName$4, TextArea);
 
-const componentName$3 = getComponentName("date-picker");
+const componentName$3 = getComponentName('date-picker');
 
 const DatePicker = compose(
 	draggableMixin,
@@ -830,66 +879,66 @@ const DatePicker = compose(
 )(
 	createProxy({
 		componentName: componentName$3,
-		slots: ["prefix", "suffix"],
-		wrappedEleName: "vaadin-date-picker",
-		style: ``,
+		slots: ['prefix', 'suffix'],
+		wrappedEleName: 'vaadin-date-picker',
+		style: ``
 	})
 );
 
 customElements.define(componentName$3, DatePicker);
 
-const componentName$2 = getComponentName("container");
+const componentName$2 = getComponentName('container');
 
 class RawContainer extends HTMLElement {
-  static get componentName() {
-    return componentName$2
-  }
-  constructor() {
-    super();
-    const template = document.createElement('template');
-    template.innerHTML = `<slot></slot>`;
-
-    this.attachShadow({ mode: 'open' });
-    this.shadowRoot.appendChild(template.content.cloneNode(true));
-
-    this.baseSelector = ':host > slot';
-  }
+	static get componentName() {
+		return componentName$2;
+	}
+	constructor() {
+		super();
+		const template = document.createElement('template');
+		template.innerHTML = `<slot></slot>`;
+
+		this.attachShadow({ mode: 'open' });
+		this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+		this.baseSelector = ':host > slot';
+	}
 }
 
 const Container = compose(
-  createStyleMixin({
-    // todo: do we want to change the mapping structure to this? ['aa', 'aaa', {'color': [{ selector: '::part(label)' }]}],
-    mappings: {
-      'height': {},
-      'width': {},
-
-      'verticalPadding': [
-        { property: 'padding-top' },
-        { property: 'padding-bottom' }
-      ],
-      'horizontalPadding': [
-        { property: 'padding-left' },
-        { property: 'padding-right' }
-      ],
-
-      'display': {},
-      'flexDirection': {},
-      'justifyContent': {},
-      'alignItems': {},
-      'gap': {},
-
-      'backgroundColor': {},
-      'borderRadius': {},
-
-      'borderColor': {},
-      'borderStyle': {},
-      'borderWidth': {},
-
-      'boxShadow': {},
-    },
-  }),
-  draggableMixin,
-  componentNameValidationMixin,
+	createStyleMixin({
+		// todo: do we want to change the mapping structure to this? ['aa', 'aaa', {'color': [{ selector: '::part(label)' }]}],
+		mappings: {
+			height: {},
+			width: {},
+
+			verticalPadding: [
+				{ property: 'padding-top' },
+				{ property: 'padding-bottom' }
+			],
+			horizontalPadding: [
+				{ property: 'padding-left' },
+				{ property: 'padding-right' }
+			],
+
+			display: {},
+			flexDirection: {},
+			justifyContent: {},
+			alignItems: {},
+			gap: {},
+
+			backgroundColor: {},
+			borderRadius: {},
+
+			borderColor: {},
+			borderStyle: {},
+			borderWidth: {},
+
+			boxShadow: {}
+		}
+	}),
+	draggableMixin,
+	componentNameValidationMixin
 )(RawContainer);
 
 customElements.define(componentName$2, Container);
@@ -906,21 +955,25 @@ const transformTheme = (theme, path, getTransformation) => {
 	}, {});
 };
 
-const stringifyArray = (strArr) => strArr.map((str) => (str.includes(" ") ? `"${str}"` : str)).join(", ");
+const stringifyArray = (strArr) =>
+	strArr.map((str) => (str.includes(' ') ? `"${str}"` : str)).join(', ');
 
 const themeToCSSVarsObj = (theme) =>
 	transformTheme(theme, [], (path, val) => ({
-		[getVarName(path)]: Array.isArray(val) ? stringifyArray(val) : val,
+		[getVarName(path)]: Array.isArray(val) ? stringifyArray(val) : val
 	}));
 
 const getThemeRefs = (theme, prefix) =>
-	transformTheme(theme, [], (path) => set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`));
+	transformTheme(theme, [], (path) =>
+		set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)
+	);
 
 const globalsThemeToStyle = (theme, themeName = '') => `
 *[data-theme="${themeName}"] {
 	${Object.entries(themeToCSSVarsObj(theme)).reduce(
-	(acc, entry) => (acc += `${entry.join(":")};\n`), ''
-)}
+		(acc, entry) => (acc += `${entry.join(':')};\n`),
+		''
+	)}
 }
 `;
 
@@ -933,16 +986,22 @@ const componentsThemeToStyleObj = (componentsTheme) =>
 		// starts with underscore -> attribute selector
 
 		const attrsSelector = restPath.reduce((acc, section, idx) => {
-			if (section.startsWith('_')) return acc += `[${kebabCase(section.replace(/^_/, ''))}]`;
+			if (section.startsWith('_'))
+				return (acc += `[${kebabCase(section.replace(/^_/, ''))}="true"]`);
 
 			const nextSection = restPath[idx + 1];
 
 			if (typeof nextSection !== 'string' || nextSection.startsWith('_')) {
-				console.error('theme generator', `your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`);
+				console.error(
+					'theme generator',
+					`your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`
+				);
 				return acc;
 			}
 
-			return acc += `[${kebabCase(section)}="${restPath.splice(idx + 1, 1).join('')}"]`;
+			return (acc += `[${kebabCase(section)}="${restPath
+				.splice(idx + 1, 1)
+				.join('')}"]`);
 		}, '');
 
 		let selector = `${getComponentName(component)}${attrsSelector}`;
@@ -951,12 +1010,17 @@ const componentsThemeToStyleObj = (componentsTheme) =>
 			[selector]: {
 				[property]: val
 			}
-		}
+		};
 	});
 
 const componentsThemeToStyle = (componentsTheme, themeName = '') =>
 	Object.entries(componentsThemeToStyleObj(componentsTheme)).reduce(
-		(acc, [selector, vars]) => (acc += `*[data-theme="${themeName}"] ${selector} { \n${Object.entries(vars).map(([key, val]) => `${key}: ${val}`).join(';\n')} \n}\n\n`),
+		(acc, [selector, vars]) =>
+			(acc += `*[data-theme="${themeName}"] ${selector} { \n${Object.entries(
+				vars
+			)
+				.map(([key, val]) => `${key}: ${val}`)
+				.join(';\n')} \n}\n\n`),
 		''
 	);
 
@@ -965,7 +1029,7 @@ ${globalsThemeToStyle(globals, themeName)}
 ${componentsThemeToStyle(components, themeName)}
 `;
 
-const useVar = varName => `var(${varName})`;
+const useVar = (varName) => `var(${varName})`;
 
 const createHelperVars = (theme, prefix) => {
 	const res = transformTheme(theme, [], (path, value) => {
@@ -977,17 +1041,20 @@ const createHelperVars = (theme, prefix) => {
 		const theme = set({}, [...modifiedPath, varName], value);
 		const useVars = { [property]: useVar(varName) };
 
-		return { theme, useVars, vars }
+		return { theme, useVars, vars };
 	});
 
-	return [res.theme, res.useVars, res.vars]
+	return [res.theme, res.useVars, res.vars];
 };
 
 const genDark = (c, percentage = 0.5) => c.darken(percentage).hex();
 const genLight = (c, percentage = 0.5) => c.lighten(percentage).hex();
 const genContrast = (c, percentage = 0.9) => {
 	const isDark = c.isDark();
-	return c.mix(Color(isDark ? 'white' : 'black'), percentage).saturate(1).hex();
+	return c
+		.mix(Color(isDark ? 'white' : 'black'), percentage)
+		.saturate(1)
+		.hex();
 };
 
 const genColor = (color) => {
@@ -997,8 +1064,8 @@ const genColor = (color) => {
 		main: mainColor.hex(),
 		dark: color.dark || genDark(mainColor),
 		light: color.light || genLight(mainColor),
-		contrast: color.contrast || genContrast(mainColor),
-	}
+		contrast: color.contrast || genContrast(mainColor)
+	};
 };
 
 const genColors = (colors) => {
@@ -1006,68 +1073,76 @@ const genColors = (colors) => {
 		const currentColor = colors[colorName];
 
 		return Object.assign(acc, {
-			[colorName]: genColor(currentColor),
-		})
+			[colorName]: genColor(currentColor)
+		});
 	}, {});
 };
 
 const colors = genColors({
 	surface: {
-		main: "lightgray",
-		light: "#fff",
-		dark: "#000",
+		main: 'lightgray',
+		light: '#fff',
+		dark: '#000'
 	},
-	primary: "#0082B5",
-	secondary: "#7D14EB",
-	success: "green",
-	error: "red",
+	primary: '#0082B5',
+	secondary: '#7D14EB',
+	success: 'green',
+	error: 'red'
 });
 
 const typography = {
 	h1: {
-		font: ["Courier New", "Arial", "sans-serif"],
-		weight: "700",
-		size: "48px",
+		font: ['Courier New', 'Arial', 'sans-serif'],
+		weight: '700',
+		size: '48px'
 	},
 	h2: {
-		font: ["Courier New", "sans-serif"],
-		weight: "500",
-		size: "38px",
+		font: ['Courier New', 'sans-serif'],
+		weight: '500',
+		size: '38px'
 	},
 	h3: {
-		font: ["Courier New", "sans-serif"],
-		weight: "300",
-		size: "28px",
-	},
+		font: ['Courier New', 'sans-serif'],
+		weight: '300',
+		size: '28px'
+	}
 };
 
 const spacing = {
-	xs: "2px",
-	sm: "4px",
-	md: "8px",
-	lg: "16px",
-	xl: "32px",
+	xs: '2px',
+	sm: '4px',
+	md: '8px',
+	lg: '16px',
+	xl: '32px'
 };
 
 const border = {
-	sm: "1px",
-	md: "2px",
-	lg: "3px",
+	sm: '1px',
+	md: '2px',
+	lg: '3px'
 };
 
 const radius = {
-	sm: "5px",
-	md: "25px",
-	lg: "50px",
+	sm: '5px',
+	md: '25px',
+	lg: '50px'
 };
 
 const shadow = {
-	color: colors.primary.main,
-	size: {
-		sm: `0 0 10px`,
-		md: `0 0 20px`,
-		lg: `0 0 30px`,
-	},
+		wide: {
+			sm: '0 2px 3px -0.5px',
+			md: '0 4px 6px -1px',
+			lg: '0 10px 15px -3px',
+			xl: '0 20px 25px -5px',
+			'2xl': '0 25px 50px -12px',
+		},
+		narrow: {
+			sm: '0 1px 2px -1px',
+			md: '0 2px 4px -2px',
+			lg: '0 4px 6px -4px',
+			xl: '0 8px 10px -6px',
+			'2xl': '0 16px 16px -8px',
+		}
 };
 
 var globals = {
@@ -1076,7 +1151,7 @@ var globals = {
 	spacing,
 	border,
 	radius,
-	shadow,
+	shadow
 };
 
 const globalRefs$3 = getThemeRefs(globals);
@@ -1087,7 +1162,7 @@ const mode = {
 	secondary: globalRefs$3.colors.secondary,
 	success: globalRefs$3.colors.success,
 	error: globalRefs$3.colors.error,
-	surface: globalRefs$3.colors.surface,
+	surface: globalRefs$3.colors.surface
 };
 
 const [helperTheme$1, helperRefs$1] = createHelperVars({ mode }, componentName$a);
@@ -1097,43 +1172,43 @@ const button = {
 
 	size: {
 		xs: {
-			[vars$6.height]: "10px",
-			[vars$6.fontSize]: "10px",
-			[vars$6.padding]: `0 ${globalRefs$3.spacing.xs}`,
+			[vars$6.height]: '10px',
+			[vars$6.fontSize]: '10px',
+			[vars$6.padding]: `0 ${globalRefs$3.spacing.xs}`
 		},
 		sm: {
-			[vars$6.height]: "20px",
-			[vars$6.fontSize]: "10px",
-			[vars$6.padding]: `0 ${globalRefs$3.spacing.sm}`,
+			[vars$6.height]: '20px',
+			[vars$6.fontSize]: '10px',
+			[vars$6.padding]: `0 ${globalRefs$3.spacing.sm}`
 		},
 		md: {
-			[vars$6.height]: "30px",
-			[vars$6.fontSize]: "14px",
-			[vars$6.padding]: `0 ${globalRefs$3.spacing.md}`,
+			[vars$6.height]: '30px',
+			[vars$6.fontSize]: '14px',
+			[vars$6.padding]: `0 ${globalRefs$3.spacing.md}`
 		},
 		lg: {
-			[vars$6.height]: "40px",
-			[vars$6.fontSize]: "20px",
-			[vars$6.padding]: `0 ${globalRefs$3.spacing.lg}`,
+			[vars$6.height]: '40px',
+			[vars$6.fontSize]: '20px',
+			[vars$6.padding]: `0 ${globalRefs$3.spacing.lg}`
 		},
 		xl: {
-			[vars$6.height]: "50px",
-			[vars$6.fontSize]: "25px",
-			[vars$6.padding]: `0 ${globalRefs$3.spacing.xl}`,
-		},
+			[vars$6.height]: '50px',
+			[vars$6.fontSize]: '25px',
+			[vars$6.padding]: `0 ${globalRefs$3.spacing.xl}`
+		}
 	},
 
 	[vars$6.borderRadius]: globalRefs$3.radius.lg,
-	[vars$6.cursor]: "pointer",
-	[vars$6.borderWidth]: "2px",
-	[vars$6.borderStyle]: "solid",
-	[vars$6.borderColor]: "transparent",
+	[vars$6.cursor]: 'pointer',
+	[vars$6.borderWidth]: '2px',
+	[vars$6.borderStyle]: 'solid',
+	[vars$6.borderColor]: 'transparent',
 
-	_fullwidth: {
-		[vars$6.width]: "100%",
+	_fullWidth: {
+		[vars$6.width]: '100%'
 	},
 	_loading: {
-		[vars$6.cursor]: "wait",
+		[vars$6.cursor]: 'wait'
 	},
 
 	variant: {
@@ -1141,11 +1216,11 @@ const button = {
 			[vars$6.color]: helperRefs$1.contrast,
 			[vars$6.backgroundColor]: helperRefs$1.main,
 			_hover: {
-				[vars$6.backgroundColor]: helperRefs$1.dark,
+				[vars$6.backgroundColor]: helperRefs$1.dark
 			},
 			_loading: {
-				[vars$6.backgroundColor]: helperRefs$1.main,
-			},
+				[vars$6.backgroundColor]: helperRefs$1.main
+			}
 		},
 		outline: {
 			[vars$6.color]: helperRefs$1.main,
@@ -1154,9 +1229,9 @@ const button = {
 				[vars$6.color]: helperRefs$1.dark,
 				[vars$6.borderColor]: helperRefs$1.dark,
 				_error: {
-					[vars$6.color]: helperRefs$1.error,
-				},
-			},
+					[vars$6.color]: helperRefs$1.error
+				}
+			}
 		},
 		link: {
 			[vars$6.color]: helperRefs$1.main,
@@ -1166,10 +1241,10 @@ const button = {
 			[vars$6.borderRadius]: 0,
 			_hover: {
 				[vars$6.color]: helperRefs$1.main,
-				[vars$6.textDecoration]: "underline",
-			},
-		},
-	},
+				[vars$6.textDecoration]: 'underline'
+			}
+		}
+	}
 };
 
 const globalRefs$2 = getThemeRefs(globals);
@@ -1231,7 +1306,7 @@ const textField = (vars) => ({
 		[vars.backgroundColor]: globalRefs$2.colors.surface.main
 	},
 
-	_fullwidth: {
+	_fullWidth: {
 		[vars.width]: '100%'
 	},
 
@@ -1274,12 +1349,12 @@ const textArea = {
 	[vars$3.borderStyle]: 'solid',
 	[vars$3.borderColor]: 'transparent',
 
-	_borderoffset: {
+	_borderOffset: {
 		[vars$3.outlineOffset]: '2px'
 	},
 
 	_bordered: {
-		[vars$3.inputBorderColor]: globalRefs$1.colors.surface.main
+		[vars$3.borderColor]: globalRefs$1.colors.surface.main
 	},
 
 	_focused: {
@@ -1287,7 +1362,7 @@ const textArea = {
 		[vars$3.outline]: `2px solid ${globalRefs$1.colors.surface.main}`
 	},
 
-	_fullwidth: {
+	_fullWidth: {
 		[vars$3.width]: '100%'
 	},
 
@@ -1421,10 +1496,8 @@ const horizontalAlignment = {
 	end: { horizontalAlignment: 'end' }
 };
 
-const [helperTheme, helperRefs, helperVars] = createHelperVars(
-	{ verticalAlignment, horizontalAlignment },
-	'container'
-);
+const [helperTheme, helperVars, helperRefs] =
+	createHelperVars({ verticalAlignment, horizontalAlignment }, 'container');
 
 const container = {
 	...helperTheme,
@@ -1475,15 +1548,15 @@ const container = {
 	},
 
 	shadow: {
-		sm: {
-			[vars.boxShadow]: `${globalRefs.shadow.size.sm} ${globalRefs.shadow.color}`
+		sm: { 
+			[vars.boxShadow]: `${globalRefs.shadow.size.sm} ${globalRefs.shadow.color}` 
+		},		
+		md: { 
+			[vars.boxShadow]: `${globalRefs.shadow.size.md} ${globalRefs.shadow.color}` 
+		},		
+		lg: { 
+			[vars.boxShadow]: `${globalRefs.shadow.size.lg} ${globalRefs.shadow.color}` 
 		},
-		md: {
-			[vars.boxShadow]: `${globalRefs.shadow.size.md} ${globalRefs.shadow.color}`
-		},
-		lg: {
-			[vars.boxShadow]: `${globalRefs.shadow.size.lg} ${globalRefs.shadow.color}`
-		}
 	},
 
 	borderRadius: {