@loadsmart/miranda-wc
Version:
Miranda Web Components component library
994 lines (960 loc) • 726 kB
JavaScript
import { toCSSValue as toCSSValue$1, getToken as getToken$2, toSpacingCSSValue } from './tokens.js';
/******************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
function __classPrivateFieldGet$1(receiver, state, kind, f) {
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
}
function __classPrivateFieldSet(receiver, state, value, kind, f) {
if (kind === "m") throw new TypeError("Private method is not writable");
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
}
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
var e = new Error(message);
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
};
/**
* @license
* Copyright 2019 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const t$5=globalThis,e$7=t$5.ShadowRoot&&(void 0===t$5.ShadyCSS||t$5.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$7=Symbol(),o$7=new WeakMap;let n$7 = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s$7)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$7&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$7.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$7.set(s,t));}return t}toString(){return this.cssText}};const r$8=t=>new n$7("string"==typeof t?t:t+"",void 0,s$7),i$9=(t,...e)=>{const o=1===t.length?t[0]:e.reduce(((e,s,o)=>e+(t=>{if(true===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1]),t[0]);return new n$7(o,t,s$7)},S$3=(s,o)=>{if(e$7)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t$5.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$5=e$7?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$8(e)})(t):t;
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/const{is:i$8,defineProperty:e$6,getOwnPropertyDescriptor:r$7,getOwnPropertyNames:h$3,getOwnPropertySymbols:o$6,getPrototypeOf:n$6}=Object,a$4=globalThis,c$4=a$4.trustedTypes,l$4=c$4?c$4.emptyScript:"",p$4=a$4.reactiveElementPolyfillSupport,d$3=(t,s)=>t,u$4={toAttribute(t,s){switch(s){case Boolean:t=t?l$4:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f$3=(t,s)=>!i$8(t,s),y$3={attribute:true,type:String,converter:u$4,reflect:false,hasChanged:f$3};Symbol.metadata??=Symbol("metadata"),a$4.litPropertyMetadata??=new WeakMap;let b$3 = class b extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=y$3){if(s.state&&(s.attribute=false),this._$Ei(),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),r=this.getPropertyDescriptor(t,i,s);void 0!==r&&e$6(this.prototype,t,r);}}static getPropertyDescriptor(t,s,i){const{get:e,set:h}=r$7(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get(){return e?.call(this)},set(s){const r=e?.call(this);h.call(this,s),this.requestUpdate(t,r,i);},configurable:true,enumerable:true}}static getPropertyOptions(t){return this.elementProperties.get(t)??y$3}static _$Ei(){if(this.hasOwnProperty(d$3("elementProperties")))return;const t=n$6(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d$3("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d$3("properties"))){const t=this.properties,s=[...h$3(t),...o$6(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$5(s));}else void 0!==s&&i.push(c$5(s));return i}static _$Eu(t,s){const i=s.attribute;return false===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=false,this.hasUpdated=false,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S$3(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(true),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$EC(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&true===i.reflect){const r=(void 0!==i.converter?.toAttribute?i.converter:u$4).toAttribute(s,i.type);this._$Em=t,null==r?this.removeAttribute(e):this.setAttribute(e,r),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u$4;this._$Em=e,this[e]=r.fromAttribute(s,t.type),this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){if(i??=this.constructor.getPropertyOptions(t),!(i.hasChanged??f$3)(this[t],s))return;this.P(t,s,i);} false===this.isUpdatePending&&(this._$ES=this._$ET());}P(t,s,i){this._$AL.has(t)||this._$AL.set(t,s),true===i.reflect&&this._$Em!==t&&(this._$Ej??=new Set).add(t);}async _$ET(){this.isUpdatePending=true;try{await this._$ES;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t) true!==i.wrapped||this._$AL.has(s)||void 0===this[s]||this.P(s,this[s],i);}let t=false;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EU();}catch(s){throw t=false,this._$EU(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=true,this.firstUpdated(t)),this.updated(t);}_$EU(){this._$AL=new Map,this.isUpdatePending=false;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return true}update(t){this._$Ej&&=this._$Ej.forEach((t=>this._$EC(t,this[t]))),this._$EU();}updated(t){}firstUpdated(t){}};b$3.elementStyles=[],b$3.shadowRootOptions={mode:"open"},b$3[d$3("elementProperties")]=new Map,b$3[d$3("finalized")]=new Map,p$4?.({ReactiveElement:b$3}),(a$4.reactiveElementVersions??=[]).push("2.0.4");
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const t$4=globalThis,i$7=t$4.trustedTypes,s$6=i$7?i$7.createPolicy("lit-html",{createHTML:t=>t}):void 0,e$5="$lit$",h$2=`lit$${Math.random().toFixed(9).slice(2)}$`,o$5="?"+h$2,n$5=`<${o$5}>`,r$6=document,l$3=()=>r$6.createComment(""),c$3=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a$3=Array.isArray,u$3=t=>a$3(t)||"function"==typeof t?.[Symbol.iterator],d$2="[ \t\n\f\r]",f$2=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v$1=/-->/g,_$1=/>/g,m$2=RegExp(`>|${d$2}(?:([^\\s"'>=/]+)(${d$2}*=${d$2}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p$3=/'/g,g$1=/"/g,$$1=/^(?:script|style|textarea|title)$/i,y$2=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x=y$2(1),b$2=y$2(2),T$1=Symbol.for("lit-noChange"),E$1=Symbol.for("lit-nothing"),A$1=new WeakMap,C$1=r$6.createTreeWalker(r$6,129);function P$1(t,i){if(!a$3(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s$6?s$6.createHTML(i):i}const V$1=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"<svg>":3===i?"<math>":"",c=f$2;for(let i=0;i<s;i++){const s=t[i];let a,u,d=-1,y=0;for(;y<s.length&&(c.lastIndex=y,u=c.exec(s),null!==u);)y=c.lastIndex,c===f$2?"!--"===u[1]?c=v$1:void 0!==u[1]?c=_$1:void 0!==u[2]?($$1.test(u[2])&&(r=RegExp("</"+u[2],"g")),c=m$2):void 0!==u[3]&&(c=m$2):c===m$2?">"===u[0]?(c=r??f$2,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?m$2:'"'===u[3]?g$1:p$3):c===g$1||c===p$3?c=m$2:c===v$1||c===_$1?c=f$2:(c=m$2,r=void 0);const x=c===m$2&&t[i+1].startsWith("/>")?" ":"";l+=c===f$2?s+n$5:d>=0?(o.push(a),s.slice(0,d)+e$5+s.slice(d)+h$2+x):s+h$2+(-2===d?i:x);}return [P$1(t,l+(t[s]||"<?>")+(2===i?"</svg>":3===i?"</math>":"")),o]};let N$1 = class N{constructor({strings:t,_$litType$:s},n){let r;this.parts=[];let c=0,a=0;const u=t.length-1,d=this.parts,[f,v]=V$1(t,s);if(this.el=N.createElement(f,n),C$1.currentNode=this.el.content,2===s||3===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=C$1.nextNode())&&d.length<u;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(e$5)){const i=v[a++],s=r.getAttribute(t).split(h$2),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:c,name:e[2],strings:s,ctor:"."===e[1]?H$1:"?"===e[1]?I$1:"@"===e[1]?L$1:k$1}),r.removeAttribute(t);}else t.startsWith(h$2)&&(d.push({type:6,index:c}),r.removeAttribute(t));if($$1.test(r.tagName)){const t=r.textContent.split(h$2),s=t.length-1;if(s>0){r.textContent=i$7?i$7.emptyScript:"";for(let i=0;i<s;i++)r.append(t[i],l$3()),C$1.nextNode(),d.push({type:2,index:++c});r.append(t[s],l$3());}}}else if(8===r.nodeType)if(r.data===o$5)d.push({type:2,index:c});else {let t=-1;for(;-1!==(t=r.data.indexOf(h$2,t+1));)d.push({type:7,index:c}),t+=h$2.length-1;}c++;}}static createElement(t,i){const s=r$6.createElement("template");return s.innerHTML=t,s}};function S$2(t,i,s=t,e){if(i===T$1)return i;let h=void 0!==e?s._$Co?.[e]:s._$Cl;const o=c$3(i)?void 0:i._$litDirective$;return h?.constructor!==o&&(h?._$AO?.(false),void 0===o?h=void 0:(h=new o(t),h._$AT(t,s,e)),void 0!==e?(s._$Co??=[])[e]=h:s._$Cl=h),void 0!==h&&(i=S$2(t,h._$AS(t,i.values),h,e)),i}let M$1 = class M{constructor(t,i){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=i;}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:i},parts:s}=this._$AD,e=(t?.creationScope??r$6).importNode(i,true);C$1.currentNode=e;let h=C$1.nextNode(),o=0,n=0,l=s[0];for(;void 0!==l;){if(o===l.index){let i;2===l.type?i=new R$1(h,h.nextSibling,this,t):1===l.type?i=new l.ctor(h,l.name,l.strings,this,t):6===l.type&&(i=new z$1(h,this,t)),this._$AV.push(i),l=s[++n];}o!==l?.index&&(h=C$1.nextNode(),o++);}return C$1.currentNode=r$6,e}p(t){let i=0;for(const s of this._$AV) void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++;}};let R$1 = class R{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=E$1,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cv=e?.isConnected??true;}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t?.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=S$2(this,t,i),c$3(t)?t===E$1||null==t||""===t?(this._$AH!==E$1&&this._$AR(),this._$AH=E$1):t!==this._$AH&&t!==T$1&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):u$3(t)?this.k(t):this._(t);}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t));}_(t){this._$AH!==E$1&&c$3(this._$AH)?this._$AA.nextSibling.data=t:this.T(r$6.createTextNode(t)),this._$AH=t;}$(t){const{values:i,_$litType$:s}=t,e="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=N$1.createElement(P$1(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else {const t=new M$1(e,this),s=t.u(this.options);t.p(i),this.T(s),this._$AH=t;}}_$AC(t){let i=A$1.get(t.strings);return void 0===i&&A$1.set(t.strings,i=new N$1(t)),i}k(t){a$3(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const h of t)e===i.length?i.push(s=new R(this.O(l$3()),this.O(l$3()),this,this.options)):s=i[e],s._$AI(h),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,i){for(this._$AP?.(false,true,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i;}}setConnected(t){ void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t));}};let k$1 = class k{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,i,s,e,h){this.type=1,this._$AH=E$1,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=h,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=E$1;}_$AI(t,i=this,s,e){const h=this.strings;let o=false;if(void 0===h)t=S$2(this,t,i,0),o=!c$3(t)||t!==this._$AH&&t!==T$1,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n<h.length-1;n++)r=S$2(this,e[s+n],i,n),r===T$1&&(r=this._$AH[n]),o||=!c$3(r)||r!==this._$AH[n],r===E$1?t=E$1:t!==E$1&&(t+=(r??"")+h[n+1]),this._$AH[n]=r;}o&&!e&&this.j(t);}j(t){t===E$1?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}};let H$1 = class H extends k$1{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===E$1?void 0:t;}};let I$1 = class I extends k$1{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==E$1);}};let L$1 = class L extends k$1{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5;}_$AI(t,i=this){if((t=S$2(this,t,i,0)??E$1)===T$1)return;const s=this._$AH,e=t===E$1&&s!==E$1||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==E$1&&(s===E$1||e);e&&this.element.removeEventListener(this.name,this,s),h&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t);}};let z$1 = class z{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s;}get _$AU(){return this._$AM._$AU}_$AI(t){S$2(this,t);}};const j$1=t$4.litHtmlPolyfillSupport;j$1?.(N$1,R$1),(t$4.litHtmlVersions??=[]).push("3.2.1");const B$1=(t,i,s)=>{const e=s?.renderBefore??i;let h=e._$litPart$;if(void 0===h){const t=s?.renderBefore??null;e._$litPart$=h=new R$1(i.insertBefore(l$3(),t),t,void 0,s??{});}return h._$AI(t),h};
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/let r$5 = class r extends b$3{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const s=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B$1(s,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return T$1}};r$5._$litElement$=true,r$5["finalized"]=true,globalThis.litElementHydrateSupport?.({LitElement:r$5});const i$6=globalThis.litElementPolyfillSupport;i$6?.({LitElement:r$5});(globalThis.litElementVersions??=[]).push("4.1.1");
/* eslint-disable no-underscore-dangle */
/**
* We use a global variable to enable/disable logging because it's easier to
* control from the outside in a non-component context.
* This is useful for testing and development.
*/
// Initialize the global variable
window.__MIRANDA_ENABLE_LOGGING__ = false;
try {
const isLoggingEnabledInStorybook = false === 'true';
if (isLoggingEnabledInStorybook) ;
else {
// Add a message to instruct developers how to enable logging
console.info('To enable logging for Miranda components, run this command in the console:', 'window.__MIRANDA_ENABLE_LOGGING__ = true');
}
}
catch {
// If there's an error (e.g., running in a non-browser environment), keep logging disabled
console.warn('Unable to determine logging status, defaulting to disabled');
}
function isLoggingEnabled() {
return window.__MIRANDA_ENABLE_LOGGING__ === true;
}
function log(fn, level, prefix, ...args) {
if (!isLoggingEnabled()) {
return;
}
fn(`[miranda|${level}] [${prefix}]`, ...args);
}
/**
* Creates a logger object that contains four levels of logging: debug, info, warn, and error.
* @param prefix kebab-case prefix to be added to the start of all log messages
* @default prefix 'miranda'
*/
function createLogger(prefix = 'miranda') {
const logger = {
debug: (...args) => log(console.debug, 'debug', prefix, ...args),
info: (...args) => log(console.log, 'info', prefix, ...args),
warn: (...args) => log(console.warn, 'warn', prefix, ...args),
error: (...args) => log(console.error, 'error', prefix, ...args),
};
return Object.freeze(logger);
}
createLogger();
/**
* Re-dispatches an event from the provided element.
*
* This function is useful for forwarding non-composed events, such as `change`
* events.
*
* @example
* class MyInput extends LitElement {
* render() {
* return html`<input @change=${this.redispatchEvent}>`;
* }
*
* protected redispatchEvent(event: Event) {
* redispatchEvent(this, event);
* }
* }
*
* Source: https://github.com/material-components/material-web/blob/c633e85192b20d7ad0930f131957ecefbb8a2f96/controller/events.ts
*
* @param element The element to dispatch the event from.
* @param event The event to re-dispatch.
* @return Whether or not the event was dispatched (if cancelable).
*/
function redispatchEvent(element, event) {
/**
* For composed events or bubbling events in SSR light DOM, stop their
* propagation and dispatch the copy.
*/
if (event.bubbles && (!element.shadowRoot || event.composed)) {
event.stopPropagation();
}
const copy = Reflect.construct(event.constructor, [event.type, event]);
const dispatched = element.dispatchEvent(copy);
if (!dispatched) {
event.preventDefault();
}
return dispatched;
}
/**
* Check if `event` happened on the given `element`.
* @returns `true` if the event happened on the given element, `false` otherwise.
*/
function isInsideElement(event, element) {
if (element.shadowRoot) {
return event.composedPath().includes(element);
}
if (event.target == null) {
return false;
}
return element.contains(event.target);
}
const logger$d = createLogger('miranda');
class Component extends r$5 {
static define(config) {
const { name, constructor } = config;
try {
window.customElements.define(name, constructor);
}
catch (error) {
logger$d.error(`Failed to define component ${name}: ${error}. Please, ensure definitions are compatible so the application does not break or have bugs due to overridden definitions.`);
}
}
constructor() {
super();
this.internals = null;
this.emit = (eventName, options) => {
const event = new CustomEvent(eventName, {
bubbles: true,
cancelable: true,
composed: true,
...options,
});
this.dispatchEvent(event);
};
/**
* Re-dispatches an event.
* This function is useful for forwarding non-composed events, such as `change`
* events.
*
* @example
* class MyInput extends LitElement {
* render() {
* return html`<input @change=${this.reemit}>`;
* }
*
* }
*
* @param event The event to re-dispatch.
*/
this.reemit = (event) => {
redispatchEvent(this, event);
};
if ('attachInternals' in this &&
typeof this.attachInternals === 'function' &&
this.internals == null) {
this.internals = this.attachInternals();
}
}
}
/**
* @license
* Copyright 2021 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
let s$5 = class s extends Event{constructor(s,t,e){super("context-request",{bubbles:true,composed:true}),this.context=s,this.callback=t,this.subscribe=e??false;}};
/**
* @license
* Copyright 2021 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
function n$4(n){return n}
/**
* @license
* Copyright 2021 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/let s$4 = class s{constructor(t,s,i,h){if(this.subscribe=false,this.provided=false,this.value=void 0,this.t=(t,s)=>{this.unsubscribe&&(this.unsubscribe!==s&&(this.provided=false,this.unsubscribe()),this.subscribe||this.unsubscribe()),this.value=t,this.host.requestUpdate(),this.provided&&!this.subscribe||(this.provided=true,this.callback&&this.callback(t,s)),this.unsubscribe=s;},this.host=t,void 0!==s.context){const t=s;this.context=t.context,this.callback=t.callback,this.subscribe=t.subscribe??false;}else this.context=s,this.callback=i,this.subscribe=h??false;this.host.addController(this);}hostConnected(){this.dispatchRequest();}hostDisconnected(){this.unsubscribe&&(this.unsubscribe(),this.unsubscribe=void 0);}dispatchRequest(){this.host.dispatchEvent(new s$5(this.context,this.t,this.subscribe));}};
/**
* @license
* Copyright 2021 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
let s$3 = class s{get value(){return this.o}set value(s){this.setValue(s);}setValue(s,t=false){const i=t||!Object.is(s,this.o);this.o=s,i&&this.updateObservers();}constructor(s){this.subscriptions=new Map,this.updateObservers=()=>{for(const[s,{disposer:t}]of this.subscriptions)s(this.o,t);},void 0!==s&&(this.value=s);}addCallback(s,t,i){if(!i)return void s(this.value);this.subscriptions.has(s)||this.subscriptions.set(s,{disposer:()=>{this.subscriptions.delete(s);},consumerHost:t});const{disposer:h}=this.subscriptions.get(s);s(this.value,h);}clearCallbacks(){this.subscriptions.clear();}};
/**
* @license
* Copyright 2021 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/let e$4 = class e extends Event{constructor(t){super("context-provider",{bubbles:true,composed:true}),this.context=t;}};let i$5 = class i extends s$3{constructor(s,e,i){super(void 0!==e.context?e.initialValue:i),this.onContextRequest=t=>{const s=t.composedPath()[0];t.context===this.context&&s!==this.host&&(t.stopPropagation(),this.addCallback(t.callback,s,t.subscribe));},this.onProviderRequest=s=>{const e=s.composedPath()[0];if(s.context!==this.context||e===this.host)return;const i=new Set;for(const[s,{consumerHost:e}]of this.subscriptions)i.has(s)||(i.add(s),e.dispatchEvent(new s$5(this.context,s,true)));s.stopPropagation();},this.host=s,void 0!==e.context?this.context=e.context:this.context=e,this.attachListeners(),this.host.addController?.(this);}attachListeners(){this.host.addEventListener("context-request",this.onContextRequest),this.host.addEventListener("context-provider",this.onProviderRequest);}hostConnected(){this.host.dispatchEvent(new e$4(this.context));}};
/**
* @license
* Copyright 2021 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/let t$3 = class t{constructor(){this.pendingContextRequests=new Map,this.onContextProvider=t=>{const s=this.pendingContextRequests.get(t.context);if(void 0===s)return;this.pendingContextRequests.delete(t.context);const{requests:o}=s;for(const{elementRef:s,callbackRef:n}of o){const o=s.deref(),c=n.deref();void 0===o||void 0===c||o.dispatchEvent(new s$5(t.context,c,true));}},this.onContextRequest=e=>{if(true!==e.subscribe)return;const t=e.composedPath()[0],s=e.callback;let o=this.pendingContextRequests.get(e.context);void 0===o&&this.pendingContextRequests.set(e.context,o={callbacks:new WeakMap,requests:[]});let n=o.callbacks.get(t);void 0===n&&o.callbacks.set(t,n=new WeakSet),n.has(s)||(n.add(s),o.requests.push({elementRef:new WeakRef(t),callbackRef:new WeakRef(s)}));};}attach(e){e.addEventListener("context-request",this.onContextRequest),e.addEventListener("context-provider",this.onContextProvider);}detach(e){e.removeEventListener("context-request",this.onContextRequest),e.removeEventListener("context-provider",this.onContextProvider);}};
function getFormAncestor(element, form) {
if (form) {
const rootNode = element.getRootNode();
if (rootNode instanceof ShadowRoot) {
return rootNode.getElementById(form);
}
return document.getElementById(form);
}
return null;
}
/**
* Perform a form submission without causing a browser navigation.
* @param form The form to submit.
*/
function performVirtualFormSubmission(element, form) {
if (form.checkValidity()) {
// Based on https://github.dev/adobe/spectrum-web-components/blob/main/packages/button/src/Button.ts
const proxy = document.createElement('button');
proxy.type = 'submit';
/**
* we do this to cover the case where the submitter has been associated with a form
* via the `form` attribute, but is not a descendant of the form.
* @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#form|MDN button element, form attribute}
*/
if (form.id) {
proxy.setAttribute('form', form.id);
}
element.appendChild(proxy);
/**
* we CANNOT `proxy.click()` here; that could create very nasty infinite loop in components
* that listen for click events.
*/
form.requestSubmit(proxy);
proxy.remove();
return true;
}
return false;
}
const fieldContext = n$4(Symbol('field'));
const WithFormComponentMixin = (superClass) => {
var _FormComponent_handleStatusChange;
class FormComponent extends superClass {
constructor() {
super(...arguments);
this.formDisabled = false;
/**
* If there's a m-field ancestor, we want to consume its context.
*/
this.field = new s$4(this, {
context: fieldContext,
subscribe: true,
callback: ({ status }) => {
this.status = status;
},
});
_FormComponent_handleStatusChange.set(this, (status) => {
/**
* If an m-field ancestor has a status, it has priority over any status
* provided to the component.
*/
this.status = this.field.value?.status ?? status;
});
}
static get properties() {
return {
/**
* FIXME: This is correct according to both lit docs and TS docs.
* If you have any clue about how to fix it, please feel free to submit a solution.
* Reference:
* - https://lit.dev/docs/composition/mixins/#typing-the-superclass
* - https://www.typescriptlang.org/docs/handbook/mixins.html#constrained-mixins
*/
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
...super.properties,
name: { type: String, reflect: true },
form: { type: String },
disabled: { type: Boolean, reflect: true },
status: { type: String, reflect: true },
};
}
update(changedProperties) {
if (changedProperties.has('status')) {
__classPrivateFieldGet$1(this, _FormComponent_handleStatusChange, "f").call(this, this.status);
}
super.update(changedProperties);
}
getAssociatedForm() {
if (this.internals) {
return this.internals.form;
}
return null;
}
get disabled() {
return this.hasAttribute('disabled') || this.formDisabled;
}
/**
* This Boolean attribute indicates that the user cannot interact with the control. If this
* attribute is not specified, the control inherits its setting from the containing element,
* for example [`<fieldset>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset);
* if there is no containing element when the `disabled` attribute is set, the control is enabled.
*/
set disabled(value) {
this.toggleAttribute('disabled', value);
}
/**
* Sets both the state and submission value of internals's target element to value.
*
* If value is null, the element won't participate in form submission.
*
* [MDN Reference](https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue)
*/
setFormValue(value, state) {
if (this.internals) {
this.internals.setFormValue(value, state);
}
}
formDisabledCallback(disabled) {
this.formDisabled = disabled;
}
getActualForm() {
const associatedForm = this.getAssociatedForm();
if (associatedForm) {
return associatedForm;
}
return getFormAncestor(this, this.form);
}
}
_FormComponent_handleStatusChange = new WeakMap();
FormComponent.formAssociated = true;
return FormComponent;
};
class FormComponent extends WithFormComponentMixin(Component) {
}
/**
* Get token as lit's `CSSResult`
* @param token Miranda token
*/
function getToken$1(token) {
return r$8(toCSSValue$1(token));
}
/**
* Get color token as lit's `CSSResult`
* @param token One of the color tokens
* @param alpha How opaque the color should be
*/
function getColor(token, alpha = 1) {
return r$8(toCSSValue$1(token, alpha));
}
/**
* Apply right margin.
*/
function mr(margin) {
return r$8(`
margin-inline-end: ${margin}
`);
}
/**
* Apply left margin.
*/
function ml(margin) {
return r$8(`
margin-inline-start: ${margin}
`);
}
/**
* Apply right/left margins.
*/
function mx(margin) {
return r$8(`
${ml(margin)};
${mr(margin)}
`);
}
/**
* Apply top margin.
*/
function mt(margin) {
return r$8(`
margin-block-start: ${margin}
`);
}
/**
* Apply bottom margin.
*/
function mb(margin) {
return r$8(`
margin-block-end: ${margin}
`);
}
/**
* Apply top/bottom margins.
*/
function my(margin) {
return r$8(`
${mt(margin)};
${mb(margin)}
`);
}
/**
* Apply right/left/top/bottom margins.
*/
function m$1(margin) {
return r$8(`
${mx(margin)};
${my(margin)}
`);
}
/**
* Convert a screen media query config to its CSS equivalent.
*
* Receives the style content to be applied inside this media query setup.
* Notice that we consume the raw token value for the media query because variables do not work in media or container queries.
* @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties MDN, Using CSS Custom Properties}
*/
function mediaDesktop(content) {
return r$8(`
@media screen and (min-width: ${getToken$2('media-screen-desktop')}) {
${content}
}
`);
}
/**
* Convert a screen media query config to its CSS equivalent.
*
* Receives the style content to be applied inside this media query setup.
* Notice that we consume the raw token value for the media query because variables do not work in media or container queries.
* @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties MDN, Using CSS Custom Properties}
*/
function mediaTablet(content) {
return r$8(`
@media screen and (min-width: ${getToken$2('media-screen-tablet')}) {
${content}
}
`);
}
/**
* Produces array for non-array value.
*
* @param value Value to be converted/returned.
* @return Returns `value` itself if it is an array or
* an array containing the provided `value`.
*/
function toArray(value) {
if (value == null) {
return [];
}
if (Array.isArray(value)) {
return value;
}
return [value];
}
const pseudoClassMap = {
active: [':active'],
disabled: ['.is-disabled', ':disabled'],
focus: ['.is-focused', ':focus', ':focus-visible', ':focus-within'],
hover: [':hover'],
visited: [':visited'],
};
function isPseudoClass(value) {
return Object.keys(pseudoClassMap).includes(value);
}
function isNegated(pseudoClass) {
return pseudoClass.startsWith('not.');
}
function joinIs(value) {
const array = toArray(value).filter((item) => item.trim() !== '');
if (array.length === 0) {
return '';
}
if (array.length === 1) {
return array[0];
}
return `:is(${array.join(', ')})`;
}
function toString(selectors, subSelectors, combinator, pseudoClasses) {
let result = joinIs(selectors);
for (const pseudoClass of pseudoClasses) {
if (isNegated(pseudoClass)) {
const posPseudoClass = pseudoClass.slice(4);
result = `${result}:not(${pseudoClassMap[posPseudoClass].join(', ')})`;
}
else {
result = `${result}${joinIs(pseudoClassMap[pseudoClass])}`;
}
}
const resultSubSelector = joinIs(subSelectors);
if (resultSubSelector) {
let resultCombinator = ` ${combinator} `;
if (combinator == null) {
resultCombinator = '';
}
if (combinator === ' ') {
resultCombinator = combinator;
}
return `${result}${resultCombinator}${resultSubSelector}`;
}
return result;
}
/**
* # on
*
* Style utility to compose pseudo-classes.
*
* ## List of supported pseudo-classes
* - active
* - disabled
* - focus
* - hover
* - visited
*
* ## Usage
* You can compose multiple pseudo-classes by chaining them. You can also negate
* some pseudo-class calling `.not` before it. The order that they are chained
* will be respected.
*
* ```js
* css`
* ${on('.button').not.disabled.not.active.focus} {
* color: tomato;
* }
* `;
* ```
* Will result in:
* ```css
* .button:not(.is-disabled, :disabled):not(:active):is(.is-focused, :focus, :focus-visible, :focus-within) {
* color: tomato;
* }
* ```
*
* @param selectors A single selector or a list of selectors that will have the
* pseudo-classes concatenated to it.
* @param subSelectors A single selector or a list of selectors that will be
* combined with the resulting selectors.
* @param combinator Will be used to combine the resulting selectors with the
* subSelectors. The default value is the [Descendant Combinator (`' '`)](https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator).
* If `null` is provided, no combinator will be used, i.e., they will be joined
* without any character between them.
*/
function on(selectors, subSelectors, combinator = ' ') {
const pseudoClasses = [];
let not = false;
/*
* It's not possible to instantiate a CSSResult manually as `lit` has a
* mecanism to prevent this.
* https://github.com/lit/lit/blob/main/packages/reactive-element/src/css-tag.ts#L58
*
* To circunvent this limitation, a `Proxy` arround an instance returned by
* the `unsafeCSS` is being created and it is overriding the getter for
* `cssText`, which holds the css text, allowing to customize the selector.
* Additional getters for each supported pseudo-class and a getter for the
* negating condition `not` are also being created at this time. These
* additional getters return the same proxy instance, so they can be
* chained.
*/
const augumentedCSSResult = new Proxy(r$8(''), {
get(target, prop, receiver) {
if (prop === 'cssText') {
return toString(selectors, subSelectors, combinator, pseudoClasses);
}
if (prop === 'not') {
not = !not;
return augumentedCSSResult;
}
if (isPseudoClass(prop)) {
pseudoClasses.push(not ? `not.${prop}` : prop);
not = false;
return augumentedCSSResult;
}
return Reflect.get(target, prop, receiver);
},
});
return augumentedCSSResult;
}
/**
* Apply right padding.
*/
function pr(padding) {
return r$8(`
padding-inline-start: ${padding}
`);
}
/**
* Apply left padding.
*/
function pl(padding) {
return r$8(`
padding-inline-end: ${padding}
`);
}
/**
* Apply right/left paddings.
*/
function px(padding) {
return r$8(`
${pl(padding)};
${pr(padding)}
`);
}
/**
* Apply top padding.
*/
function pt(padding) {
return r$8(`
padding-block-start: ${padding}
`);
}
/**
* Apply bottom padding.
*/
function pb(padding) {
return r$8(`
padding-block-end: ${padding}
`);
}
/**
* Apply top/bottom paddings.
*/
function py(padding) {
return r$8(`
${pt(padding)};
${pb(padding)}
`);
}
/**
* Apply right/left/top/bottom paddings.
*/
function p$2(padding) {
return r$8(`
${px(padding)};
${py(padding)}
`);
}
function skeleton() {
return r$8(`animation: skeleton-loading 1s linear infinite alternate;`);
}
skeleton.styles = () => {
return i$9 `
@keyframes skeleton-loading {
0% {
background-color: ${getColor('color-background-tertiary')};
border-color: ${getColor('color-background-tertiary')};
opacity: 0.3;
}
50% {
background-color: ${getColor('color-background-tertiary')};
border-color: ${getColor('color-background-tertiary')};
opacity: 0.6;
}
100% {
background-color: ${getColor('color-background-tertiary')};
border-color: ${getColor('color-background-tertiary')};
}
}
`;
};
/** @type {TransitionConfig} */
const DEFAULT_TRANSITION_CONFIG = {
property: 'all',
delay: '0s',
duration: '0.35s',
easing: 'ease-in-out',
};
function toTransition(config) {
const safeConfig = { ...DEFAULT_TRANSITION_CONFIG, ...config };
// property name | duration | easing function | delay
return r$8(`${safeConfig.property} ${safeConfig.duration} ${safeConfig.easing} ${safeConfig.delay}`);
}
/**
* Convert a transition config to its CSS equivalent.
*/
function transition(configs) {
const transitionStyle = toArray(configs)
.map((config) => toTransition(config))
.join(', ');
return r$8(`
transition: ${transitionStyle}
`);
}
const typographyVariants = [
'body-lg-bold',
'body-lg',
'body-md-bold-underline',
'body-md-bold',
'body-md-underline',
'body-md',
'body-sm-bold-underline',
'body-sm-bold',
'body-sm-underline',
'body-sm',
'button-lg',
'button-md',
'button-sm',
'chips-md',
'chips-sm',
'heading-lg-bold',
'heading-lg',
'heading-md-bold',
'heading-md',
'heading-sm-bold',
'heading-sm',
'hero-lg-bold',
'hero-lg',
'hero-md-bold',
'hero-md',
'hero-sm-bold',
'hero-sm',
'number-md',
'number-sm',
'table-header-md',
'table-header-sm',
];
/**
* Apply set of tokens for a given typography `variant`.
*/
function getVariant(variant) {
switch (variant) {
case 'hero-lg-bold':
return {
'font-family': 'font-family-title',
'line-height': 'line-height-6',
'font-size': 'font-size-9',
'font-weight': 'font-weight-bold',
};
case 'hero-lg':
return {
'font-family': 'font-family-title',
'line-height': 'line-height-6',
'font-size': 'font-size-9',
'font-weight': 'font-weight-regular',
};
case 'hero-md-bold':
return {
'font-family': 'font-family-title',
'line-height': 'line-height-6',
'font-size': 'font-size-8',
'font-weight': 'font-weight-bold',
};
case 'hero-md':
return {
'font-family': 'font-family-title',
'line-height': 'line-height-6',
'font-size': 'font-size-8',
'font-weight': 'font-weight-regular',
};
case 'hero-sm-bold':
return {
'font-family': 'font-family-title',
'line-height': 'line-height-6',
'font-size': 'font-size-7',
'font-weight': 'font-weight-bold',
};
case 'hero-sm':
return {
'font-family': 'font-family-title',
'line-height': 'line-height-6',
'font-size': 'font-size-7',
'font-weight': 'font-weight-regular',
};
case 'heading-lg-bold':
return {
'font-family': 'font-family-title',
'line-height': 'line-height-5',
'font-size': 'font-size-6',
'font-weight': 'font-weight-bold',
};
case 'heading-lg':
return {
'font-family': 'font-family-title',
'line-height': 'line-height-5',
'font-size': 'font-size-6',
'font-weight': 'font-weight-regular',
};
case 'heading-md-bold':
return {
'font-family': 'font-family-title',
'line-height': 'line-height-5',
'font-size': 'font-size-5',
'font-weight': 'font-weight-bold',
};
case 'heading-md':
return {
'font-family': 'font-family-title',
'line-height': 'line-height-5',
'font-size': 'font-size-5',
'font-weight': 'font-weight-regular',
};
case 'heading-sm-bold':
return {
'font-family': 'font-family-title',
'line-height': 'line-height-5',
'font-size': 'font-size-4',
'font-weight': 'font-weight-bold',
};
case 'heading-sm':
return {
'font-family': 'font-family-title',
'line-height': 'line-height-5',
'font-size': 'font-size-4',
'font-weight': 'font-weight-regular',
};
case 'body-lg-bold':
return {
'font-family': 'font-family-default',
'line-height': 'line-height-6',
'font-size': 'font-size-5',
'font-weight': 'font-weight-bold',
};
case 'body-lg':
return {
'font-family': 'font-family-default',
'line-height': 'line-height-6',
'font-size': 'font-size-5',
'font-weight': 'font-weight-regular',
};
case 'body-md':
case 'number-md':
return {
'font-family': 'font-family-default',
'line-height': 'line-height-5',
'font-size': 'font-size-3',
'font-weight': 'font-weight-regular',
};
case 'body-md-underline':
return {
'font-family': 'font-family-default',
'line-height': 'line-height-5',
'font-size': 'font-size-3',
'font-weight': 'font-weight-regular',
'text-decoration': 'underline',
};
case 'body-md-bold':
return {
'font-family': 'font-family-default',
'line-height': 'line-height-5',
'font-size': 'font-size-3',
'font-weight': 'font-weight-bold',
};
case 'body-md-bold-underline':
return {
'font-family': 'font-family-default',
'line-height': 'line-height-5',
'font-size': 'font-size-3',
'font-weight': 'font-weight-bold',
'text-decoration': 'underline',
};
case 'body-sm':
case 'number-sm':
return {
'font-family': 'font-family-default',
'line-height': 'line-height-4',
'font-size': 'font-size-2',
'font-weight': 'font-weight-regular',
};
case 'body-sm-underline':
return {
'font-family': 'font-family-default',
'line-height': 'line-height-4',
'font-size': 'font-size-2',
'font-weight': 'font-weight-regular',
'text-decoration': 'underline',
};
case 'body-sm-bold':
return {
'font-family': 'font-family-default',
'line-height': 'line-height-4',
'font-size': 'font-size-2',
'font-weight': 'font-weight-bold',
};
case 'body-sm-bold-underline':
return {
'font-family': 'font-family-default',
'line-height': 'line-height-4',
'font-size': 'font-size-2',
'font-weight': 'font-weight-bold',
'text-decoration': 'underline',
};
case 'button-lg':
return {
'font-family': 'font-family-default',
'line-height': 'line-height-1',
'font-size': 'font-size-4',
'font-weight': 'font-weight-bold',
};
case 'button-md':
return {
'font-family': 'font-family-default',
'line-height': 'line-height-1',
'font-size': 'font-size-3',
'font-weight': 'font-weight-bold',
};
case 'button-sm':
return {
'font-family': 'font-family-default',
'line-height': 'line-height-1',
'font-size': 'font-size-2',
'font-weight': 'font-weight-bold',
};
case 'table-header-md':
return {
'font-family': 'font-family-default',
'line-height': 'line-height-1',
'font-size': 'font-size-3',
'font-weight': 'font-weight-medium',
'text-transform': 'uppercase',
};
case 'table-header-sm':
return {
'font-family': 'font-family-default',
'line-height': 'line-height-1',
'font-size': 'font-size-2',
'font-weight': 'font-weight-regular',
};
case 'chips-md':
return {
'font-family': 'font-family-default',
'line-height': 'line-height-1',
'font-size': 'font-size-2',
'font-weight': 'font-weight-bold',
};
case 'chips-sm':
return {
'font-family': 'font-family-default',
'line-height': 'line-height-1',
'font-size': 'font-size-1',
'font-weight': 'font-weight-medium',
'text-transform': 'uppercase',
};
default:
return {};
}
}
function styleObjectToCSSString(styleOb