@maggioli-design-system/mds-input 4.0.0 → 4.2.0

package/dist/cjs/{index-e46754eb.js → index-3097681c.js}

@@ -58,6 +58,13 @@ const HYDRATED_CSS = '{visibility:hidden}[hydrated]{visibility:inherit}';
  */
 const EMPTY_OBJ = {};
 const isDef = (v) => v != null;
+/**
+ * Check whether a value is a 'complex type', defined here as an object or a
+ * function.
+ *
+ * @param o the value to check
+ * @returns whether it's a complex type or not
+ */
 const isComplexType = (o) => {
     // https://jsperf.com/typeof-fn-object/5
     o = typeof o;
@@ -114,6 +121,7 @@ const h = (nodeName, vnodeData, ...children) => {
     };
     walk(children);
     if (vnodeData) {
+        // normalize class / className attributes
         {
             const classData = vnodeData.className || vnodeData.class;
             if (classData) {
@@ -252,9 +260,9 @@ const registerStyle = (scopeId, cssText, allowCS) => {
     }
     styles.set(scopeId, style);
 };
-const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
+const addStyle = (styleContainerNode, cmpMeta, mode) => {
     var _a;
-    let scopeId = getScopeId(cmpMeta);
+    const scopeId = getScopeId(cmpMeta);
     const style = styles.get(scopeId);
     // if an element is NOT connected then getRootNode() will return the wrong root node
     // so the fallback is to always use the document for the root node in those cases
@@ -269,10 +277,8 @@ const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
             }
             if (!appliedStyles.has(scopeId)) {
                 {
-                    {
-                        styleElm = doc.createElement('style');
-                        styleElm.innerHTML = style;
-                    }
+                    styleElm = doc.createElement('style');
+                    styleElm.innerHTML = style;
                     // Apply CSP nonce to the style tag if it exists
                     const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
                     if (nonce != null) {
@@ -319,6 +325,21 @@ const getScopeId = (cmp, mode) => 'sc-' + (cmp.$tagName$);
  *
  * Modified for Stencil's compiler and vdom
  */
+/**
+ * When running a VDom render set properties present on a VDom node onto the
+ * corresponding HTML element.
+ *
+ * Note that this function has special functionality for the `class`,
+ * `style`, `key`, and `ref` attributes, as well as event handlers (like
+ * `onClick`, etc). All others are just passed through as-is.
+ *
+ * @param elm the HTMLElement onto which attributes should be set
+ * @param memberName the name of the attribute to set
+ * @param oldValue the old value for the attribute
+ * @param newValue the new value for the attribute
+ * @param isSvg whether we're in an svg context or not
+ * @param flags bitflags for Vdom variables
+ */
 const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
     if (oldValue !== newValue) {
         let isProp = isMemberInElement(elm, memberName);
@@ -523,16 +544,17 @@ const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) =>
  * @param vnodes a list of virtual DOM nodes to remove
  * @param startIdx the index at which to start removing nodes (inclusive)
  * @param endIdx the index at which to stop removing nodes (inclusive)
- * @param vnode a VNode
- * @param elm an element
  */
-const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
-    for (; startIdx <= endIdx; ++startIdx) {
-        if ((vnode = vnodes[startIdx])) {
-            elm = vnode.$elm$;
-            callNodeRefs(vnode);
-            // remove the vnode's element from the dom
-            elm.remove();
+const removeVnodes = (vnodes, startIdx, endIdx) => {
+    for (let index = startIdx; index <= endIdx; ++index) {
+        const vnode = vnodes[index];
+        if (vnode) {
+            const elm = vnode.$elm$;
+            nullifyVNodeRefs(vnode);
+            if (elm) {
+                // remove the vnode's element from the dom
+                elm.remove();
+            }
         }
     }
 };
@@ -780,10 +802,17 @@ const patch = (oldVNode, newVNode) => {
         elm.data = text;
     }
 };
-const callNodeRefs = (vNode) => {
+/**
+ * 'Nullify' any VDom `ref` callbacks on a VDom node or its children by
+ * calling them with `null`. This signals that the DOM element corresponding to
+ * the VDom node has been removed from the DOM.
+ *
+ * @param vNode a virtual DOM node
+ */
+const nullifyVNodeRefs = (vNode) => {
     {
         vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
-        vNode.$children$ && vNode.$children$.map(callNodeRefs);
+        vNode.$children$ && vNode.$children$.map(nullifyVNodeRefs);
     }
 };
 /**
@@ -797,17 +826,44 @@ const callNodeRefs = (vNode) => {
  * @param hostRef data needed to root and render the virtual DOM tree, such as
  * the DOM node into which it should be rendered.
  * @param renderFnResults the virtual DOM nodes to be rendered
+ * @param isInitialLoad whether or not this is the first call after page load
  */
-const renderVdom = (hostRef, renderFnResults) => {
+const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
     const hostElm = hostRef.$hostElement$;
     const cmpMeta = hostRef.$cmpMeta$;
     const oldVNode = hostRef.$vnode$ || newVNode(null, null);
+    // if `renderFnResults` is a Host node then we can use it directly. If not,
+    // we need to call `h` again to wrap the children of our component in a
+    // 'dummy' Host node (well, an empty vnode) since `renderVdom` assumes
+    // implicitly that the top-level vdom node is 1) an only child and 2)
+    // contains attrs that need to be set on the host element.
     const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
     hostTagName = hostElm.tagName;
     if (cmpMeta.$attrsToReflect$) {
         rootVnode.$attrs$ = rootVnode.$attrs$ || {};
         cmpMeta.$attrsToReflect$.map(([propName, attribute]) => (rootVnode.$attrs$[attribute] = hostElm[propName]));
     }
+    // On the first render and *only* on the first render we want to check for
+    // any attributes set on the host element which are also set on the vdom
+    // node. If we find them, we override the value on the VDom node attrs with
+    // the value from the host element, which allows developers building apps
+    // with Stencil components to override e.g. the `role` attribute on a
+    // component even if it's already set on the `Host`.
+    if (isInitialLoad && rootVnode.$attrs$) {
+        for (const key of Object.keys(rootVnode.$attrs$)) {
+            // We have a special implementation in `setAccessor` for `style` and
+            // `class` which reconciles values coming from the VDom with values
+            // already present on the DOM element, so we don't want to override those
+            // attributes on the VDom tree with values from the host element if they
+            // are present.
+            //
+            // Likewise, `ref` and `key` are special internal values for the Stencil
+            // runtime and we don't want to override those either.
+            if (hostElm.hasAttribute(key) && !['key', 'ref', 'style', 'class'].includes(key)) {
+                rootVnode.$attrs$[key] = hostElm[key];
+            }
+        }
+    }
     rootVnode.$tag$ = null;
     rootVnode.$flags$ |= 4 /* VNODE_FLAGS.isHost */;
     hostRef.$vnode$ = rootVnode;
@@ -838,20 +894,86 @@ const scheduleUpdate = (hostRef, isInitialLoad) => {
     const dispatch = () => dispatchHooks(hostRef, isInitialLoad);
     return writeTask(dispatch) ;
 };
+/**
+ * Dispatch initial-render and update lifecycle hooks, enqueuing calls to
+ * component lifecycle methods like `componentWillLoad` as well as
+ * {@link updateComponent}, which will kick off the virtual DOM re-render.
+ *
+ * @param hostRef a reference to a host DOM node
+ * @param isInitialLoad whether we're on the initial load or not
+ * @returns an empty Promise which is used to enqueue a series of operations for
+ * the component
+ */
 const dispatchHooks = (hostRef, isInitialLoad) => {
     const endSchedule = createTime('scheduleUpdate', hostRef.$cmpMeta$.$tagName$);
     const instance = hostRef.$lazyInstance$ ;
-    let promise;
+    // We're going to use this variable together with `enqueue` to implement a
+    // little promise-based queue. We start out with it `undefined`. When we add
+    // the first function to the queue we'll set this variable to be that
+    // function's return value. When we attempt to add subsequent values to the
+    // queue we'll check that value and, if it was a `Promise`, we'll then chain
+    // the new function off of that `Promise` using `.then()`. This will give our
+    // queue two nice properties:
+    //
+    // 1. If all functions added to the queue are synchronous they'll be called
+    //    synchronously right away.
+    // 2. If all functions added to the queue are asynchronous they'll all be
+    //    called in order after `dispatchHooks` exits.
+    let maybePromise;
     if (isInitialLoad) {
         {
-            promise = safeCall(instance, 'componentWillLoad');
+            // If `componentWillLoad` returns a `Promise` then we want to wait on
+            // whatever's going on in that `Promise` before we launch into
+            // rendering the component, doing other lifecycle stuff, etc. So
+            // in that case we assign the returned promise to the variable we
+            // declared above to hold a possible 'queueing' Promise
+            maybePromise = safeCall(instance, 'componentWillLoad');
         }
     }
     endSchedule();
-    return then(promise, () => updateComponent(hostRef, instance, isInitialLoad));
+    return enqueue(maybePromise, () => updateComponent(hostRef, instance, isInitialLoad));
 };
+/**
+ * This function uses a Promise to implement a simple first-in, first-out queue
+ * of functions to be called.
+ *
+ * The queue is ordered on the basis of the first argument. If it's
+ * `undefined`, then nothing is on the queue yet, so the provided function can
+ * be called synchronously (although note that this function may return a
+ * `Promise`). The idea is that then the return value of that enqueueing
+ * operation is kept around, so that if it was a `Promise` then subsequent
+ * functions can be enqueued by calling this function again with that `Promise`
+ * as the first argument.
+ *
+ * @param maybePromise either a `Promise` which should resolve before the next function is called or an 'empty' sentinel
+ * @param fn a function to enqueue
+ * @returns either a `Promise` or the return value of the provided function
+ */
+const enqueue = (maybePromise, fn) => isPromisey(maybePromise) ? maybePromise.then(fn) : fn();
+/**
+ * Check that a value is a `Promise`. To check, we first see if the value is an
+ * instance of the `Promise` global. In a few circumstances, in particular if
+ * the global has been overwritten, this is could be misleading, so we also do
+ * a little 'duck typing' check to see if the `.then` property of the value is
+ * defined and a function.
+ *
+ * @param maybePromise it might be a promise!
+ * @returns whether it is or not
+ */
+const isPromisey = (maybePromise) => maybePromise instanceof Promise ||
+    (maybePromise && maybePromise.then && typeof maybePromise.then === 'function');
+/**
+ * Update a component given reference to its host elements and so on.
+ *
+ * @param hostRef an object containing references to the element's host node,
+ * VDom nodes, and other metadata
+ * @param instance a reference to the underlying host element where it will be
+ * rendered
+ * @param isInitialLoad whether or not this function is being called as part of
+ * the first render cycle
+ */
 const updateComponent = async (hostRef, instance, isInitialLoad) => {
-    // updateComponent
+    var _a;
     const elm = hostRef.$hostElement$;
     const endUpdate = createTime('update', hostRef.$cmpMeta$.$tagName$);
     const rc = elm['s-rc'];
@@ -861,7 +983,7 @@ const updateComponent = async (hostRef, instance, isInitialLoad) => {
     }
     const endRender = createTime('render', hostRef.$cmpMeta$.$tagName$);
     {
-        callRender(hostRef, instance);
+        callRender(hostRef, instance, elm, isInitialLoad);
     }
     if (rc) {
         // ok, so turns out there are some child host elements
@@ -873,7 +995,7 @@ const updateComponent = async (hostRef, instance, isInitialLoad) => {
     endRender();
     endUpdate();
     {
-        const childrenPromises = elm['s-p'];
+        const childrenPromises = (_a = elm['s-p']) !== null && _a !== void 0 ? _a : [];
         const postUpdate = () => postUpdateComponent(hostRef);
         if (childrenPromises.length === 0) {
             postUpdate();
@@ -885,7 +1007,19 @@ const updateComponent = async (hostRef, instance, isInitialLoad) => {
         }
     }
 };
-const callRender = (hostRef, instance, elm) => {
+/**
+ * Handle making the call to the VDom renderer with the proper context given
+ * various build variables
+ *
+ * @param hostRef an object containing references to the element's host node,
+ * VDom nodes, and other metadata
+ * @param instance a reference to the underlying host element where it will be
+ * rendered
+ * @param elm the Host element for the component
+ * @param isInitialLoad whether or not this function is being called as part of
+ * @returns an empty promise
+ */
+const callRender = (hostRef, instance, elm, isInitialLoad) => {
     try {
         instance = instance.render() ;
         {
@@ -900,7 +1034,7 @@ const callRender = (hostRef, instance, elm) => {
                 // or we need to update the css class/attrs on the host element
                 // DOM WRITE!
                 {
-                    renderVdom(hostRef, instance);
+                    renderVdom(hostRef, instance, isInitialLoad);
                 }
             }
         }
@@ -970,9 +1104,6 @@ const safeCall = (instance, method, arg) => {
     }
     return undefined;
 };
-const then = (promise, thenFn) => {
-    return promise && promise.then ? promise.then(thenFn) : thenFn();
-};
 const addHydratedFlag = (elm) => elm.setAttribute('hydrated', '')
         ;
 const getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propName);
@@ -1089,12 +1220,12 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                     //      customElements.define('my-component', MyComponent);
                     //    </script>
                     //  ```
-                    //  In this case if we do not unshadow here and use the value of the shadowing property, attributeChangedCallback
+                    //  In this case if we do not un-shadow here and use the value of the shadowing property, attributeChangedCallback
                     //  will be called with `newValue = "some-value"` and will set the shadowed property (this.someAttribute = "another-value")
                     //  to the value that was set inline i.e. "some-value" from above example. When
-                    //  the connectedCallback attempts to unshadow it will use "some-value" as the initial value rather than "another-value"
+                    //  the connectedCallback attempts to un-shadow it will use "some-value" as the initial value rather than "another-value"
                     //
-                    //  The case where the attribute was NOT set inline but was not set programmatically shall be handled/unshadowed
+                    //  The case where the attribute was NOT set inline but was not set programmatically shall be handled/un-shadowed
                     //  by connectedCallback as this attributeChangedCallback will not fire.
                     //
                     //  https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties
@@ -1136,9 +1267,9 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
 const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) => {
     // initializeComponent
     if ((hostRef.$flags$ & 32 /* HOST_FLAGS.hasInitializedComponent */) === 0) {
+        // Let the runtime know that the component has been initialized
+        hostRef.$flags$ |= 32 /* HOST_FLAGS.hasInitializedComponent */;
         {
-            // we haven't initialized this element yet
-            hostRef.$flags$ |= 32 /* HOST_FLAGS.hasInitializedComponent */;
             // lazy loaded components
             // request the component's implementation to be
             // wired up with the host element
@@ -1211,6 +1342,8 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
         schedule();
     }
 };
+const fireConnectedCallback = (instance) => {
+};
 const connectedCallback = (elm) => {
     if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
         const hostRef = getHostRef(elm);
@@ -1249,12 +1382,25 @@ const connectedCallback = (elm) => {
                 initializeComponent(elm, hostRef, cmpMeta);
             }
         }
+        else {
+            // fire off connectedCallback() on component instance
+            if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$lazyInstance$) ;
+            else if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$onReadyPromise$) {
+                hostRef.$onReadyPromise$.then(() => fireConnectedCallback());
+            }
+        }
         endConnected();
     }
 };
-const disconnectedCallback = (elm) => {
+const disconnectInstance = (instance) => {
+};
+const disconnectedCallback = async (elm) => {
     if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
-        getHostRef(elm);
+        const hostRef = getHostRef(elm);
+        if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$lazyInstance$) ;
+        else if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$onReadyPromise$) {
+            hostRef.$onReadyPromise$.then(() => disconnectInstance());
+        }
     }
 };
 const bootstrapLazy = (lazyBundles, options = {}) => {

package/dist/cjs/loader.cjs.js

@@ -2,20 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e46754eb.js');
-
-/*
- Stencil Client Patch Esm v2.22.2 | MIT Licensed | https://stenciljs.com
- */
-const patchEsm = () => {
-    return index.promiseResolve();
-};
+const index = require('./index-3097681c.js');
 
 const defineCustomElements = (win, options) => {
-  if (typeof window === 'undefined') return Promise.resolve();
-  return patchEsm().then(() => {
+  if (typeof window === 'undefined') return undefined;
   return index.bootstrapLazy([["mds-input.cjs",[[1,"mds-input",{"autocomplete":[1],"autofocus":[4],"datalist":[16],"disabled":[4],"icon":[1],"max":[2],"maxlength":[2],"min":[1],"minlength":[2],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"variant":[513],"tip":[1],"step":[1],"type":[1],"value":[8],"hasFocus":[32],"setFocus":[64],"getInputElement":[64]}]]]], options);
-  });
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/mds-input.cjs.entry.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e46754eb.js');
+const index = require('./index-3097681c.js');
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
-const mdsInputCss = "*,::before,::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}::-webkit-backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}@tailwind utilities; :host{--mds-input-background:rgb(var(--tone-neutral));--mds-input-icon-color:var(--mds-input-variant-color);--mds-input-tip-background:84, 84, 84;--mds-input-ring:0 0 0 1px rgba(var(--mds-input-variant-color), 0.1);--mds-input-shadow:0 1px 3px 0 rgba(var(--mds-input-variant-color), 0.1), 0 1px 2px 0 rgba(var(--mds-input-variant-color), 0.06);--mds-input-variant-color:0, 0, 0;font-family:Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;font-size:1rem;line-height:1.5rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative;display:-ms-flexbox;display:flex}.input{font-family:Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;font-size:1rem;line-height:1.5rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0px;-webkit-box-sizing:border-box;box-sizing:border-box;min-height:3rem;width:100%;overflow:hidden;text-overflow:ellipsis;border-radius:0.5rem;border-style:none;border-color:transparent;padding-left:1rem;padding-right:1rem;padding-top:0.75rem;padding-bottom:0.75rem;--tw-text-opacity:1;color:rgba(var(--tone-neutral-02), var(--tw-text-opacity));-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);background-color:var(--mds-input-background);-webkit-box-shadow:var(--mds-input-ring), var(--mds-input-shadow);box-shadow:var(--mds-input-ring), var(--mds-input-shadow)}textarea.input:active{-webkit-transition-property:none;transition-property:none}textarea.input{max-height:16rem;min-height:6rem;border-bottom-right-radius:0px}.input:focus{outline:2px solid transparent;outline-offset:2px;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);--mds-input-ring:0 0 0 3px rgba(var(--mds-input-variant-color), 1);--mds-input-shadow:0 4px 6px -1px rgba(var(--mds-input-variant-color), 0.1), 0 2px 4px -1px rgba(var(--mds-input-variant-color), 0.06)}.input:disabled{--tw-bg-opacity:1;background-color:rgba(var(--tone-neutral-10), var(--tw-bg-opacity))}.input:disabled::-moz-placeholder{--tw-text-opacity:1;color:rgba(var(--tone-neutral-05), var(--tw-text-opacity))}.input:disabled::-webkit-input-placeholder{--tw-text-opacity:1;color:rgba(var(--tone-neutral-05), var(--tw-text-opacity))}.input:disabled:-ms-input-placeholder{--tw-text-opacity:1;color:rgba(var(--tone-neutral-05), var(--tw-text-opacity))}.input:disabled::-ms-input-placeholder{--tw-text-opacity:1;color:rgba(var(--tone-neutral-05), var(--tw-text-opacity))}.input:disabled,.input:disabled::placeholder{--tw-text-opacity:1;color:rgba(var(--tone-neutral-05), var(--tw-text-opacity))}.input.has-icon{padding-left:2.75rem}.tip{pointer-events:none;position:absolute;right:0.25rem;height:0.75rem;-ms-flex-pack:center;justify-content:center;border-radius:9999px;padding-left:0.5rem;padding-right:0.5rem;text-align:center;--tw-text-opacity:1;color:rgba(var(--tone-neutral), var(--tw-text-opacity));-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);line-height:0.75rem;background-color:rgb(var(--mds-input-tip-background))}.tip-variant{--mds-input-tip-background:var(--mds-input-icon-color)}.read-only{--tw-bg-opacity:1;background-color:rgba(var(--status-info-05), var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(var(--status-info-09), var(--tw-text-opacity))}.required{width:0.75rem;--tw-bg-opacity:1;background-color:rgba(var(--status-error-05), var(--tw-bg-opacity));padding:0px;color:rgba(var(--tone-neutral), var(--tw-text-opacity));--tw-text-opacity:0}.disabled{--tw-bg-opacity:1;background-color:rgba(var(--tone-neutral-05), var(--tw-bg-opacity))}.input:focus+.required{width:6rem;--tw-text-opacity:1}.icon{position:absolute;left:0.75rem;top:0.75rem;fill:rgb(var(--mds-input-icon-color))}.fixed{position:fixed}.absolute{position:absolute}.top-1{top:0.25rem}.bottom-1{bottom:0.25rem}.flex{display:-ms-flexbox;display:flex}.w-min{width:-moz-min-content;width:-webkit-min-content;width:min-content}.flex-col{-ms-flex-direction:column;flex-direction:column}.gap-y-2{row-gap:0.5rem}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-input-icon-color:10, 80, 212;--mds-input-variant-color:0, 0, 0}:host(:focus){--mds-input-variant-color:31, 101, 232;}:host([variant=info]){--mds-input-icon-color:25, 143, 182;--mds-input-variant-color:0, 0, 0}:host([variant=info]:focus){--mds-input-icon-color:21, 119, 151;--mds-input-variant-color:25, 143, 182;}:host([variant=success]){--mds-input-icon-color:26, 151, 91;--mds-input-variant-color:0, 0, 0}:host([variant=success]:focus){--mds-input-icon-color:22, 125, 76;--mds-input-variant-color:26, 151, 91;}:host([variant=warning]){--mds-input-icon-color:168, 126, 0;--mds-input-variant-color:0, 0, 0}:host([variant=warning]:focus){--mds-input-icon-color:139, 104, 0;--mds-input-variant-color:168, 126, 0;}:host([variant=error]){--mds-input-icon-color:234, 77, 73;--mds-input-variant-color:0, 0, 0}:host([variant=error]:focus){--mds-input-icon-color:215, 29, 25;--mds-input-variant-color:234, 77, 73;}";
+const mdsInputCss = "*,::before,::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}::-webkit-backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}::-ms-backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}@tailwind utilities; :host{--mds-input-background:rgb(var(--tone-neutral));--mds-input-icon-color:var(--mds-input-variant-color);--mds-input-tip-background:84, 84, 84;--mds-input-ring:0 0 0 1px rgba(var(--mds-input-variant-color), 0.1);--mds-input-shadow:0 1px 3px 0 rgba(var(--mds-input-variant-color), 0.1), 0 1px 2px 0 rgba(var(--mds-input-variant-color), 0.06);--mds-input-variant-color:0, 0, 0;font-family:Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;font-size:16px;line-height:1.5rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative;display:-ms-flexbox;display:flex}.input{font-family:Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;font-size:16px;line-height:1.5rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0px;-webkit-box-sizing:border-box;box-sizing:border-box;min-height:3rem;width:100%;overflow:hidden;text-overflow:ellipsis;border-radius:0.5rem;border-style:none;border-color:transparent;padding-left:1rem;padding-right:1rem;padding-top:0.75rem;padding-bottom:0.75rem;--tw-text-opacity:1;color:rgba(var(--tone-neutral-02), var(--tw-text-opacity));-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);background-color:var(--mds-input-background);-webkit-box-shadow:var(--mds-input-ring), var(--mds-input-shadow);box-shadow:var(--mds-input-ring), var(--mds-input-shadow)}textarea.input:active{-webkit-transition-property:none;transition-property:none}textarea.input{max-height:16rem;min-height:6rem;border-bottom-right-radius:0px}.input:focus{outline:2px solid transparent;outline-offset:2px;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);--mds-input-ring:0 0 0 3px rgba(var(--mds-input-variant-color), 1);--mds-input-shadow:0 4px 6px -1px rgba(var(--mds-input-variant-color), 0.1), 0 2px 4px -1px rgba(var(--mds-input-variant-color), 0.06)}.input:disabled{--tw-bg-opacity:1;background-color:rgba(var(--tone-neutral-10), var(--tw-bg-opacity))}.input:disabled::-moz-placeholder{--tw-text-opacity:1;color:rgba(var(--tone-neutral-05), var(--tw-text-opacity))}.input:disabled::-webkit-input-placeholder{--tw-text-opacity:1;color:rgba(var(--tone-neutral-05), var(--tw-text-opacity))}.input:disabled:-ms-input-placeholder{--tw-text-opacity:1;color:rgba(var(--tone-neutral-05), var(--tw-text-opacity))}.input:disabled::-ms-input-placeholder{--tw-text-opacity:1;color:rgba(var(--tone-neutral-05), var(--tw-text-opacity))}.input:disabled,.input:disabled::placeholder{--tw-text-opacity:1;color:rgba(var(--tone-neutral-05), var(--tw-text-opacity))}.input.has-icon{padding-left:2.75rem}.tip{pointer-events:none;position:absolute;right:0.25rem;height:0.75rem;-ms-flex-pack:center;justify-content:center;border-radius:9999px;padding-left:0.5rem;padding-right:0.5rem;text-align:center;--tw-text-opacity:1;color:rgba(var(--tone-neutral), var(--tw-text-opacity));-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);line-height:0.75rem;background-color:rgb(var(--mds-input-tip-background))}.tip-variant{--mds-input-tip-background:var(--mds-input-icon-color)}.read-only{--tw-bg-opacity:1;background-color:rgba(var(--status-info-05), var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(var(--status-info-09), var(--tw-text-opacity))}.required{width:0.75rem;--tw-bg-opacity:1;background-color:rgba(var(--status-error-05), var(--tw-bg-opacity));padding:0px;color:rgba(var(--tone-neutral), var(--tw-text-opacity));--tw-text-opacity:0}.disabled{--tw-bg-opacity:1;background-color:rgba(var(--tone-neutral-05), var(--tw-bg-opacity))}.input:focus+.required{width:6rem;--tw-text-opacity:1}.icon{position:absolute;left:0.75rem;top:0.75rem;fill:rgb(var(--mds-input-icon-color))}.fixed{position:fixed}.absolute{position:absolute}.bottom-1{bottom:0.25rem}.top-1{top:0.25rem}.flex{display:-ms-flexbox;display:flex}.w-min{width:-moz-min-content;width:-webkit-min-content;width:min-content}.flex-col{-ms-flex-direction:column;flex-direction:column}.gap-y-2{row-gap:0.5rem}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-input-icon-color:10, 80, 212;--mds-input-variant-color:0, 0, 0}:host(:focus){--mds-input-variant-color:31, 101, 232;}:host([variant=\"info\"]){--mds-input-icon-color:25, 143, 182;--mds-input-variant-color:0, 0, 0}:host([variant=\"info\"]:focus){--mds-input-icon-color:21, 119, 151;--mds-input-variant-color:25, 143, 182;}:host([variant=\"success\"]){--mds-input-icon-color:26, 151, 91;--mds-input-variant-color:0, 0, 0}:host([variant=\"success\"]:focus){--mds-input-icon-color:22, 125, 76;--mds-input-variant-color:26, 151, 91;}:host([variant=\"warning\"]){--mds-input-icon-color:168, 126, 0;--mds-input-variant-color:0, 0, 0}:host([variant=\"warning\"]:focus){--mds-input-icon-color:139, 104, 0;--mds-input-variant-color:168, 126, 0;}:host([variant=\"error\"]){--mds-input-icon-color:234, 77, 73;--mds-input-variant-color:0, 0, 0}:host([variant=\"error\"]:focus){--mds-input-icon-color:215, 29, 25;--mds-input-variant-color:234, 77, 73;}";
 
 const MdsInput = class {
   constructor(hostRef) {
@@ -18,7 +18,7 @@ const MdsInput = class {
     this.onInput = (ev) => {
       const input = ev.target;
       if (input) {
-        this.value = input.value || '';
+        this.value = input.value;
       }
       this.keyDownEvent.emit(ev);
     };
@@ -50,7 +50,7 @@ const MdsInput = class {
     this.minlength = undefined;
     this.name = undefined;
     this.pattern = undefined;
-    this.placeholder = undefined;
+    this.placeholder = '';
     this.readonly = false;
     this.required = false;
     this.variant = undefined;
@@ -73,7 +73,7 @@ const MdsInput = class {
    * Emits the change event when the component value changes
    */
   valueChanged() {
-    this.changeEvent.emit({ value: this.value === null ? this.value : this.value.toString() });
+    this.changeEvent.emit({ value: this.value });
   }
   /**
    * Sets focus on the specified `my-input`.
@@ -81,7 +81,7 @@ const MdsInput = class {
    * of the global `input.focus()`.
    */
   async setFocus() {
-    if (this.nativeInput !== null) {
+    if (this.nativeInput) {
       this.nativeInput.focus();
     }
   }
@@ -93,13 +93,14 @@ const MdsInput = class {
     return Promise.resolve(this.nativeInput);
   }
   getValue() {
-    return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();
+    var _a;
+    return typeof this.value === 'number' ? this.value.toString() : (_a = this.value) !== null && _a !== void 0 ? _a : '';
   }
   render() {
     const value = this.getValue();
     return (index.h(index.Host, null, this.type === 'textarea'
-      ? index.h("textarea", { class: clsx('input', this.icon && 'has-icon'), autoFocus: this.autofocus, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder || '', readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, tabIndex: this.tabindex, value: value })
-      : index.h("input", { class: clsx('input', this.icon && 'has-icon'), autoComplete: this.autocomplete, autoFocus: this.autofocus, disabled: this.disabled, max: this.max, maxLength: this.maxlength, min: this.min, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, pattern: this.pattern, list: this.datalist && 'datalist', placeholder: this.placeholder || '', readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, step: this.step, tabIndex: this.tabindex, type: this.type, value: value }), this.disabled && index.h("mds-text", { typography: "option", class: "tip top-1 disabled" }, "Disabilitato"), this.readonly && !this.disabled && index.h("mds-text", { typography: "option", class: "tip top-1 read-only" }, "Sola lettura"), this.required && !this.disabled && !this.readonly && index.h("mds-text", { typography: "option", class: "tip top-1 required" }, "Obbligatorio"), this.tip && index.h("mds-text", { typography: "option", class: clsx('tip bottom-1', this.variant && 'tip-variant') }, this.tip), this.datalist &&
+      ? index.h("textarea", { class: clsx('input', this.icon && 'has-icon'), autoFocus: this.autofocus, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, tabIndex: this.tabindex, value: value })
+      : index.h("input", { class: clsx('input', this.icon && 'has-icon'), autoComplete: this.autocomplete, autoFocus: this.autofocus, disabled: this.disabled, max: this.max, maxLength: this.maxlength, min: this.min, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, pattern: this.pattern, list: this.datalist && 'datalist', placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, step: this.step, tabIndex: this.tabindex, type: this.type, value: value }), this.disabled && index.h("mds-text", { typography: "option", class: "tip top-1 disabled" }, "Disabilitato"), this.readonly && !this.disabled && index.h("mds-text", { typography: "option", class: "tip top-1 read-only" }, "Sola lettura"), this.required && !this.disabled && !this.readonly && index.h("mds-text", { typography: "option", class: "tip top-1 required" }, "Obbligatorio"), this.tip && index.h("mds-text", { typography: "option", class: clsx('tip bottom-1', this.variant && 'tip-variant') }, this.tip), this.datalist &&
       index.h("datalist", { id: "datalist", class: "datalist" }, this.datalist.forEach(element => {
         index.h("option", { value: element });
       })), this.icon && index.h("mds-icon", { class: clsx('icon', this.variant), name: this.icon })));

package/dist/cjs/mds-input.cjs.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e46754eb.js');
+const index = require('./index-3097681c.js');
 
 /*
- Stencil Client Patch Browser v2.22.2 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.2.1 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('mds-input.cjs.js', document.baseURI).href));

package/dist/collection/collection-manifest.json

@@ -1,11 +1,11 @@
 {
   "entries": [
-    "./components/mds-input/mds-input.js"
+    "components/mds-input/mds-input.js"
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.22.2",
-    "typescriptVersion": "4.9.4"
+    "version": "4.2.1",
+    "typescriptVersion": "5.1.6"
   },
   "collections": [],
   "bundles": []

package/dist/collection/common/aria.js

@@ -6,11 +6,13 @@ const hash = (s) => {
   return h.toString();
 };
 const unslugName = (name) => {
-  return name.split('/').slice(-1).pop().replace(/-/g, ' ');
+  var _a, _b, _c;
+  return (_c = (_b = (_a = name.split('/')) === null || _a === void 0 ? void 0 : _a.slice(-1).pop()) === null || _b === void 0 ? void 0 : _b.replace(/-/g, ' ')) !== null && _c !== void 0 ? _c : name;
 };
 const setAttributeIfEmpty = (element, attribute, value) => {
+  var _a;
   if (element.hasAttribute(attribute)) {
-    return element.getAttribute(attribute);
+    return (_a = element.getAttribute(attribute)) !== null && _a !== void 0 ? _a : '';
   }
   element.setAttribute(attribute, value);
   return value;

package/dist/collection/common/keyboard-manager.js

@@ -31,7 +31,7 @@ export class KeyboardManager {
       }
     };
     this.detachEscapeBehavior = () => {
-      this.escapeCallback = null;
+      this.escapeCallback = () => { return; };
       if (typeof window !== undefined) {
         window.removeEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
       }

package/dist/collection/common/unit.js

@@ -0,0 +1,10 @@
+const cssDurationToMilliseconds = (duration, defaultValue = 1000) => {
+  if (duration.includes('s')) {
+    return Number(duration.replace('s', '')) * 1000;
+  }
+  if (duration.includes('ms')) {
+    return Number(duration.replace('s', ''));
+  }
+  return defaultValue;
+};
+export { cssDurationToMilliseconds, };