@randstad-uca/design-system 1.0.59 → 1.0.61

package/dist/index.js

@@ -1,31 +1,31 @@
-import{LitElement as t,html as e,nothing as i,css as o,isServer as r}from"lit";import{classMap as n}from"lit/directives/class-map.js";function a(t,e,i,o){var r,n=arguments.length,a=n<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,i,o);else for(var s=t.length-1;s>=0;s--)(r=t[s])&&(a=(n<3?r(a):n>3?r(e,i,a):r(e,i))||a);return n>3&&a&&Object.defineProperty(e,i,a),a}function s(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)}"function"==typeof SuppressedError&&SuppressedError;
+import{LitElement as t,html as e,nothing as i,css as r,isServer as o}from"lit";import{classMap as s}from"lit/directives/class-map.js";function n(t,e,i,r){var o,s=arguments.length,n=s<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,i,r);else for(var a=t.length-1;a>=0;a--)(o=t[a])&&(n=(s<3?o(n):s>3?o(e,i,n):o(e,i))||n);return s>3&&n&&Object.defineProperty(e,i,n),n}function a(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)}"function"==typeof SuppressedError&&SuppressedError;
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const d=t=>(e,i)=>{void 0!==i?i.addInitializer((()=>{customElements.define(t,e)})):customElements.define(t,e)},l=globalThis,c=l.ShadowRoot&&(void 0===l.ShadyCSS||l.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,p=Symbol(),h=new WeakMap;
+const l=t=>(e,i)=>{void 0!==i?i.addInitializer((()=>{customElements.define(t,e)})):customElements.define(t,e)},d=globalThis,c=d.ShadowRoot&&(void 0===d.ShadyCSS||d.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,h=Symbol(),p=new WeakMap;
 /**
  * @license
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */let u=class{constructor(t,e,i){if(this._$cssResult$=!0,i!==p)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const e=this.t;if(c&&void 0===t){const i=void 0!==e&&1===e.length;i&&(t=h.get(e)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),i&&h.set(e,t))}return t}toString(){return this.cssText}};const b=(t,e)=>{if(c)t.adoptedStyleSheets=e.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const i of e){const e=document.createElement("style"),o=l.litNonce;void 0!==o&&e.setAttribute("nonce",o),e.textContent=i.cssText,t.appendChild(e)}},m=c?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const i of t.cssRules)e+=i.cssText;return(t=>new u("string"==typeof t?t:t+"",void 0,p))(e)})(t):t,{is:g,defineProperty:y,getOwnPropertyDescriptor:f,getOwnPropertyNames:v,getOwnPropertySymbols:x,getPrototypeOf:w}=Object,k=globalThis,$=k.trustedTypes,S=$?$.emptyScript:"",C=k.reactiveElementPolyfillSupport,E=(t,e)=>t,D={toAttribute(t,e){switch(e){case Boolean:t=t?S:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let i=t;switch(e){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}},O=(t,e)=>!g(t,e),M={attribute:!0,type:String,converter:D,reflect:!1,useDefault:!1,hasChanged:O};
+ */let u=class{constructor(t,e,i){if(this._$cssResult$=!0,i!==h)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const e=this.t;if(c&&void 0===t){const i=void 0!==e&&1===e.length;i&&(t=p.get(e)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),i&&p.set(e,t))}return t}toString(){return this.cssText}};const b=c?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const i of t.cssRules)e+=i.cssText;return(t=>new u("string"==typeof t?t:t+"",void 0,h))(e)})(t):t,{is:g,defineProperty:m,getOwnPropertyDescriptor:y,getOwnPropertyNames:v,getOwnPropertySymbols:f,getPrototypeOf:x}=Object,w=globalThis,k=w.trustedTypes,$=k?k.emptyScript:"",S=w.reactiveElementPolyfillSupport,C=(t,e)=>t,E={toAttribute(t,e){switch(e){case Boolean:t=t?$:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let i=t;switch(e){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}},D=(t,e)=>!g(t,e),M={attribute:!0,type:String,converter:E,reflect:!1,useDefault:!1,hasChanged:D};
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */Symbol.metadata??=Symbol("metadata"),k.litPropertyMetadata??=new WeakMap;class F 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,e=M){if(e.state&&(e.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(t)&&((e=Object.create(e)).wrapped=!0),this.elementProperties.set(t,e),!e.noAccessor){const i=Symbol(),o=this.getPropertyDescriptor(t,i,e);void 0!==o&&y(this.prototype,t,o)}}static getPropertyDescriptor(t,e,i){const{get:o,set:r}=f(this.prototype,t)??{get(){return this[e]},set(t){this[e]=t}};return{get:o,set(e){const n=o?.call(this);r?.call(this,e),this.requestUpdate(t,n,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??M}static _$Ei(){if(this.hasOwnProperty(E("elementProperties")))return;const t=w(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(E("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(E("properties"))){const t=this.properties,e=[...v(t),...x(t)];for(const i of e)this.createProperty(i,t[i])}const t=this[Symbol.metadata];if(null!==t){const e=litPropertyMetadata.get(t);if(void 0!==e)for(const[t,i]of e)this.elementProperties.set(t,i)}this._$Eh=new Map;for(const[t,e]of this.elementProperties){const i=this._$Eu(t,e);void 0!==i&&this._$Eh.set(i,t)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const i=new Set(t.flat(1/0).reverse());for(const t of i)e.unshift(m(t))}else void 0!==t&&e.push(m(t));return e}static _$Eu(t,e){const i=e.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,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,e=this.constructor.elementProperties;for(const i of e.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 b(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach((t=>t.hostConnected?.()))}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()))}attributeChangedCallback(t,e,i){this._$AK(t,i)}_$ET(t,e){const i=this.constructor.elementProperties.get(t),o=this.constructor._$Eu(t,i);if(void 0!==o&&!0===i.reflect){const r=(void 0!==i.converter?.toAttribute?i.converter:D).toAttribute(e,i.type);this._$Em=t,null==r?this.removeAttribute(o):this.setAttribute(o,r),this._$Em=null}}_$AK(t,e){const i=this.constructor,o=i._$Eh.get(t);if(void 0!==o&&this._$Em!==o){const t=i.getPropertyOptions(o),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:D;this._$Em=o,this[o]=r.fromAttribute(e,t.type)??this._$Ej?.get(o)??null,this._$Em=null}}requestUpdate(t,e,i){if(void 0!==t){const o=this.constructor,r=this[t];if(i??=o.getPropertyOptions(t),!((i.hasChanged??O)(r,e)||i.useDefault&&i.reflect&&r===this._$Ej?.get(t)&&!this.hasAttribute(o._$Eu(t,i))))return;this.C(t,e,i)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(t,e,{useDefault:i,reflect:o,wrapped:r},n){i&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,n??e??this[t]),!0!==r||void 0!==n)||(this._$AL.has(t)||(this.hasUpdated||i||(e=void 0),this._$AL.set(t,e)),!0===o&&this._$Em!==t&&(this._$Eq??=new Set).add(t))}async _$EP(){this.isUpdatePending=!0;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,e]of this._$Ep)this[t]=e;this._$Ep=void 0}const t=this.constructor.elementProperties;if(t.size>0)for(const[e,i]of t){const{wrapped:t}=i,o=this[e];!0!==t||this._$AL.has(e)||void 0===o||this.C(e,void 0,i,o)}}let t=!1;const e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(e)):this._$EM()}catch(e){throw t=!1,this._$EM(),e}t&&this._$AE(e)}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Eq&&=this._$Eq.forEach((t=>this._$ET(t,this[t]))),this._$EM()}updated(t){}firstUpdated(t){}}F.elementStyles=[],F.shadowRootOptions={mode:"open"},F[E("elementProperties")]=new Map,F[E("finalized")]=new Map,C?.({ReactiveElement:F}),(k.reactiveElementVersions??=[]).push("2.1.0");
+ */Symbol.metadata??=Symbol("metadata"),w.litPropertyMetadata??=new WeakMap;class A 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,e=M){if(e.state&&(e.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(t)&&((e=Object.create(e)).wrapped=!0),this.elementProperties.set(t,e),!e.noAccessor){const i=Symbol(),r=this.getPropertyDescriptor(t,i,e);void 0!==r&&m(this.prototype,t,r)}}static getPropertyDescriptor(t,e,i){const{get:r,set:o}=y(this.prototype,t)??{get(){return this[e]},set(t){this[e]=t}};return{get:r,set(e){const s=r?.call(this);o?.call(this,e),this.requestUpdate(t,s,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??M}static _$Ei(){if(this.hasOwnProperty(C("elementProperties")))return;const t=x(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(C("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(C("properties"))){const t=this.properties,e=[...v(t),...f(t)];for(const i of e)this.createProperty(i,t[i])}const t=this[Symbol.metadata];if(null!==t){const e=litPropertyMetadata.get(t);if(void 0!==e)for(const[t,i]of e)this.elementProperties.set(t,i)}this._$Eh=new Map;for(const[t,e]of this.elementProperties){const i=this._$Eu(t,e);void 0!==i&&this._$Eh.set(i,t)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const i=new Set(t.flat(1/0).reverse());for(const t of i)e.unshift(b(t))}else void 0!==t&&e.push(b(t));return e}static _$Eu(t,e){const i=e.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,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,e=this.constructor.elementProperties;for(const i of e.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((t,e)=>{if(c)t.adoptedStyleSheets=e.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const i of e){const e=document.createElement("style"),r=d.litNonce;void 0!==r&&e.setAttribute("nonce",r),e.textContent=i.cssText,t.appendChild(e)}})(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach((t=>t.hostConnected?.()))}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()))}attributeChangedCallback(t,e,i){this._$AK(t,i)}_$ET(t,e){const i=this.constructor.elementProperties.get(t),r=this.constructor._$Eu(t,i);if(void 0!==r&&!0===i.reflect){const o=(void 0!==i.converter?.toAttribute?i.converter:E).toAttribute(e,i.type);this._$Em=t,null==o?this.removeAttribute(r):this.setAttribute(r,o),this._$Em=null}}_$AK(t,e){const i=this.constructor,r=i._$Eh.get(t);if(void 0!==r&&this._$Em!==r){const t=i.getPropertyOptions(r),o="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:E;this._$Em=r,this[r]=o.fromAttribute(e,t.type)??this._$Ej?.get(r)??null,this._$Em=null}}requestUpdate(t,e,i){if(void 0!==t){const r=this.constructor,o=this[t];if(i??=r.getPropertyOptions(t),!((i.hasChanged??D)(o,e)||i.useDefault&&i.reflect&&o===this._$Ej?.get(t)&&!this.hasAttribute(r._$Eu(t,i))))return;this.C(t,e,i)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(t,e,{useDefault:i,reflect:r,wrapped:o},s){i&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,s??e??this[t]),!0!==o||void 0!==s)||(this._$AL.has(t)||(this.hasUpdated||i||(e=void 0),this._$AL.set(t,e)),!0===r&&this._$Em!==t&&(this._$Eq??=new Set).add(t))}async _$EP(){this.isUpdatePending=!0;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,e]of this._$Ep)this[t]=e;this._$Ep=void 0}const t=this.constructor.elementProperties;if(t.size>0)for(const[e,i]of t){const{wrapped:t}=i,r=this[e];!0!==t||this._$AL.has(e)||void 0===r||this.C(e,void 0,i,r)}}let t=!1;const e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(e)):this._$EM()}catch(e){throw t=!1,this._$EM(),e}t&&this._$AE(e)}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Eq&&=this._$Eq.forEach((t=>this._$ET(t,this[t]))),this._$EM()}updated(t){}firstUpdated(t){}}A.elementStyles=[],A.shadowRootOptions={mode:"open"},A[C("elementProperties")]=new Map,A[C("finalized")]=new Map,S?.({ReactiveElement:A}),(w.reactiveElementVersions??=[]).push("2.1.0");
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const P={attribute:!0,type:String,converter:D,reflect:!1,hasChanged:O},j=(t=P,e,i)=>{const{kind:o,metadata:r}=i;let n=globalThis.litPropertyMetadata.get(r);if(void 0===n&&globalThis.litPropertyMetadata.set(r,n=new Map),"setter"===o&&((t=Object.create(t)).wrapped=!0),n.set(i.name,t),"accessor"===o){const{name:o}=i;return{set(i){const r=e.get.call(this);e.set.call(this,i),this.requestUpdate(o,r,t)},init(e){return void 0!==e&&this.C(o,void 0,t,e),e}}}if("setter"===o){const{name:o}=i;return function(i){const r=this[o];e.call(this,i),this.requestUpdate(o,r,t)}}throw Error("Unsupported decorator location: "+o)};function A(t){return(e,i)=>"object"==typeof i?j(t,e,i):((t,e,i)=>{const o=e.hasOwnProperty(i);return e.constructor.createProperty(i,t),o?Object.getOwnPropertyDescriptor(e,i):void 0})(t,e,i)}
+const O={attribute:!0,type:String,converter:E,reflect:!1,hasChanged:D},F=(t=O,e,i)=>{const{kind:r,metadata:o}=i;let s=globalThis.litPropertyMetadata.get(o);if(void 0===s&&globalThis.litPropertyMetadata.set(o,s=new Map),"setter"===r&&((t=Object.create(t)).wrapped=!0),s.set(i.name,t),"accessor"===r){const{name:r}=i;return{set(i){const o=e.get.call(this);e.set.call(this,i),this.requestUpdate(r,o,t)},init(e){return void 0!==e&&this.C(r,void 0,t,e),e}}}if("setter"===r){const{name:r}=i;return function(i){const o=this[r];e.call(this,i),this.requestUpdate(r,o,t)}}throw Error("Unsupported decorator location: "+r)};function _(t){return(e,i)=>"object"==typeof i?F(t,e,i):((t,e,i)=>{const r=e.hasOwnProperty(i);return e.constructor.createProperty(i,t),r?Object.getOwnPropertyDescriptor(e,i):void 0})(t,e,i)}
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */function T(t){return A({...t,state:!0,attribute:!1})}
+ */function T(t){return _({...t,state:!0,attribute:!1})}
 /**
  * @license
  * Copyright 2017 Google LLC
@@ -36,7 +36,7 @@ const P={attribute:!0,type:String,converter:D,reflect:!1,hasChanged:O},j=(t=P,e,
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-function z(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Reflect.decorate&&"object"!=typeof e&&Object.defineProperty(t,e,i),i))(e,i,{get(){return(e=>e.renderRoot?.querySelector(t)??null)(this)}})}let L=class extends t{constructor(){super(...arguments),this.label="",this.placeholder="",this.labelColor="",this.value="",this.required=!1,this.optional=!1,this.disabled=!1,this.error=!1,this.errorMessage=null,this.helper=null,this.helperAlign="left"}renderLabelContainer(){return e`
+function j(t,e){return(e,i,r)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Reflect.decorate&&"object"!=typeof e&&Object.defineProperty(t,e,i),i))(e,i,{get(){return(e=>e.renderRoot?.querySelector(t)??null)(this)}})}let P=class extends t{constructor(){super(...arguments),this.label="",this.placeholder="",this.labelColor="",this.value="",this.required=!1,this.optional=!1,this.disabled=!1,this.error=!1,this.errorMessage=null,this.helper=null,this.helperAlign="left"}renderLabelContainer(){return e`
             ${this.label?e`
                     <div class="label-container">
                         ${this.renderLabel()}
@@ -79,52 +79,52 @@ function z(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
                         ${this.helper}
                     </p>
                 `:i}
-        `}};a([A({type:String}),s("design:type",Object)],L.prototype,"label",void 0),a([A({type:String}),s("design:type",Object)],L.prototype,"placeholder",void 0),a([A({type:String}),s("design:type",Object)],L.prototype,"labelColor",void 0),a([A(),s("design:type",Object)],L.prototype,"value",void 0),a([A({type:Boolean}),s("design:type",Object)],L.prototype,"required",void 0),a([A({type:Boolean}),s("design:type",Object)],L.prototype,"optional",void 0),a([A({type:Boolean}),s("design:type",Object)],L.prototype,"disabled",void 0),a([A({type:Boolean,reflect:!0}),s("design:type",Object)],L.prototype,"error",void 0),a([A({type:String}),s("design:type",Object)],L.prototype,"errorMessage",void 0),a([A({type:String}),s("design:type",Object)],L.prototype,"helper",void 0),a([A({type:String}),s("design:type",String)],L.prototype,"helperAlign",void 0),a([A({type:String}),s("design:type",String)],L.prototype,"help",void 0),a([A({type:String}),s("design:type",String)],L.prototype,"helpLink",void 0),a([A({type:String}),s("design:type",String)],L.prototype,"helpLinkTooltipMessage",void 0),L=a([d("base-control")],L);const I=o`
+        `}};n([_({type:String}),a("design:type",Object)],P.prototype,"label",void 0),n([_({type:String}),a("design:type",Object)],P.prototype,"placeholder",void 0),n([_({type:String}),a("design:type",Object)],P.prototype,"labelColor",void 0),n([_(),a("design:type",Object)],P.prototype,"value",void 0),n([_({type:Boolean}),a("design:type",Object)],P.prototype,"required",void 0),n([_({type:Boolean}),a("design:type",Object)],P.prototype,"optional",void 0),n([_({type:Boolean}),a("design:type",Object)],P.prototype,"disabled",void 0),n([_({type:Boolean,reflect:!0}),a("design:type",Object)],P.prototype,"error",void 0),n([_({type:String}),a("design:type",Object)],P.prototype,"errorMessage",void 0),n([_({type:String}),a("design:type",Object)],P.prototype,"helper",void 0),n([_({type:String}),a("design:type",String)],P.prototype,"helperAlign",void 0),n([_({type:String}),a("design:type",String)],P.prototype,"help",void 0),n([_({type:String}),a("design:type",String)],P.prototype,"helpLink",void 0),n([_({type:String}),a("design:type",String)],P.prototype,"helpLinkTooltipMessage",void 0),P=n([l("base-control")],P);const L=r`
   font-family: 'Graphik', sans-serif;
   font-weight: 400;
   font-size: 12px;
   line-height: 15px;
   letter-spacing: 0%;
-`,_=o`
+`,z=r`
   font-family: 'Graphik', sans-serif;
   font-weight: 400;
   font-size: 14px;
   line-height: 25px;
   letter-spacing: 0%;
-`,B=o`
+`,I=r`
   font-family: 'Graphik', sans-serif;
   font-weight: 400;
   font-size: 16px;
   line-height: 25px;
   letter-spacing: 0%;
-`,N=o`
+`,N=r`
   font-family: 'Graphik', sans-serif;
   font-weight: 400;
   font-size: 18px;
   line-height: 30px;
   letter-spacing: 0%;
-`,R=o`
+`,B=r`
   font-family: 'Graphik', sans-serif;
   font-weight: 400;
   font-size: 18px;
   line-height: 30px;
   letter-spacing: 0%;
   vertical-align: middle;
-`,V=o`
+`,R=r`
   font-family: 'Graphik', sans-serif;
   font-weight: 400;
   font-size: 20px;
   line-height: 30px;
   letter-spacing: -1%;
   vertical-align: middle;
-`,q=o`
+`,V=r`
   font-family: 'Graphik', sans-serif;
   font-weight: 400;
   font-size: 26px;
   line-height: 30px;
   letter-spacing: -1%;
   vertical-align: middle;
-`;let W=class extends t{constructor(){super(...arguments),this.title="",this.isOpen=!1,this.isDesktop=window.innerWidth>940,this.handleResize=()=>{this.isDesktop=window.innerWidth>940}}static{this.styles=o`
+`;let U=class extends t{constructor(){super(...arguments),this.title="",this.isOpen=!1,this.isDesktop=window.innerWidth>940,this.handleResize=()=>{this.isDesktop=window.innerWidth>940}}static{this.styles=r`
     :host {
       display: flex;
       flex-direction: column;
@@ -143,8 +143,8 @@ function z(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
     }
 
     .title {
-      ${B}
-      color: var(--secondary-color);
+      ${I}
+      color: var( --secondary-color );
     }
 
     .icon-wrapper {
@@ -154,29 +154,36 @@ function z(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
       display: flex;
       align-items: center;
       justify-content: center;
-      transition: background-color 0.3s ease;
+      transition: background-color .5s ease-in-out;
     }
 
     .icon {
-      transition: transform 0.3s;
+      transition: transform .5s ease-in-out;
     }
 
     .content {
       overflow: hidden;
+      height: 0;
       max-height: 0;
-      transition: max-height 0.3s ease, padding-bottom 0.3s ease;
+      opacity: 0;
     }
 
     .content.open {
       max-height: 1000px;
       padding-bottom: 16px;
+      height: auto;
+      opacity: 1;
+    }
+
+    .content, .content.open {
+      transition: height .5s ease-in-out, opacity .5s ease-in-out, padding-bottom .3s ease-in-out;
     }
 
     :host::after {
       content: '';
       display: block;
       height: 1px;
-      background-color: var(--secondary-color-20);
+      background-color: var( --secondary-color-20 );
       width: 100%;
     }
 
@@ -184,33 +191,40 @@ function z(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
       .header {
         align-items: flex-start;
       }
+
       .header:hover .icon-wrapper {
-        background-color: var(--primary-color-5);
+        background-color: var( --primary-color-5 );
       }
     }
-  `}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this.handleResize)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this.handleResize)}toggle(){this.isOpen=!this.isOpen}renderIcon(){return this.isOpen?e`<randstad-icon name="arrow_up" size="24px" style="--icon-color: var(--primary-color);"></randstad-icon>`:e`<randstad-icon name="arrow_down" size="24px" style="--icon-color: var(--primary-color);"></randstad-icon>`}render(){return e`
+  `}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this.handleResize)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this.handleResize)}toggle(){this.isOpen=!this.isOpen}render(){const t=e`
+      <randstad-icon
+        name="${this.isOpen?"arrow_up":"arrow_down"}"
+        size="24"
+        .color=${"var( --primary-color )"}
+      >
+      </randstad-icon>
+    `;return e`
       <div class="header" @click=${this.toggle}>
         <div class="title">${this.title}</div>
+
         <div class="icon">
-          ${this.isDesktop?e`
-                <div class="icon-wrapper">
-                  ${this.renderIcon()}
-                </div>
-              `:this.renderIcon()}
+          ${this.isDesktop?e`<div class="icon-wrapper">${t}</div>`:t}
         </div>
       </div>
+
       <div class="content ${this.isOpen?"open":""}">
         <slot></slot>
       </div>
-    `}};a([A({type:String}),s("design:type",Object)],W.prototype,"title",void 0),a([T(),s("design:type",Object)],W.prototype,"isOpen",void 0),a([T(),s("design:type",Object)],W.prototype,"isDesktop",void 0),W=a([d("accordion-panel")],W);let Y=class extends t{static{this.styles=o`
+    `}};n([_({type:String}),a("design:type",Object)],U.prototype,"title",void 0),n([T(),a("design:type",Object)],U.prototype,"isOpen",void 0),n([T(),a("design:type",Object)],U.prototype,"isDesktop",void 0),U=n([l("accordion-panel")],U);let H=class extends t{static{this.styles=r`
     :host {
       display: flex;
       flex-direction: column;
       gap: 16px;
     }
-  `}render(){return e`<slot></slot>`}};Y=a([d("accordion-list")],Y);let U=class extends t{constructor(){super(...arguments),this.type="button",this.variant="button-primary",this.size="md",this.label="",this.loader=!1,this.iconPosition="left",this.iconName=null,this.disabled=!1,this.idevent=""}static{this.styles=o`
+  `}render(){return e`<slot></slot>`}};H=n([l("accordion-list")],H);let q=class extends t{constructor(){super(...arguments),this.type="button",this.variant="button-primary",this.size="md",this.label="",this.loader=!1,this.iconPosition="left",this.iconName=null,this.disabled=!1,this.idevent=""}static{this.styles=r`
     :host {
       display: inline-block;
+      --content-padding: 16px;
     }
 
     .button {
@@ -235,7 +249,7 @@ function z(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
       justify-content: center;
       gap: 4px;
       width: 100%;
-      padding: 16px;
+      padding: var( --content-padding );
       height: 100%;
     }
 
@@ -252,7 +266,7 @@ function z(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
     }
 
     .button-md {
-      ${B}
+      ${I}
       min-height: 57px;
     }
 
@@ -504,12 +518,11 @@ function z(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
       color: #6F758D;
       cursor: default;
     }
-
   `}handleClick(t){if(!this.disabled)if("submit"===this.type){const t=this.closest("form");t&&t.requestSubmit()}else if("reset"===this.type){const t=this.closest("form");t&&t.reset()}else this.idevent&&this.dispatchEvent(new CustomEvent("randstad-button-click",{detail:this.idevent,composed:!0,bubbles:!0,cancelable:!1}))}render(){const t={button:!0,[this.variant]:!0,loader:this.loader,[`button-${this.size}`]:["button-primary","button-secondary","button-tertiary"].includes(this.variant)},i="button-tertiary"===this.variant?"var(--primary-color)":"white";return e`
       <button
         part="button"
         type=${this.type}
-        class=${n(t)}
+        class=${s(t)}
         ?disabled=${this.disabled||this.loader}
         ?aria-busy=${this.loader}
         @click=${this.handleClick}
@@ -534,10 +547,12 @@ function z(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
             </div>
           `}
       </button>
-    `}};a([A({type:String}),s("design:type",String)],U.prototype,"type",void 0),a([A({type:String}),s("design:type",String)],U.prototype,"variant",void 0),a([A({type:String}),s("design:type",String)],U.prototype,"size",void 0),a([A({type:String}),s("design:type",Object)],U.prototype,"label",void 0),a([A({type:Boolean}),s("design:type",Object)],U.prototype,"loader",void 0),a([A({type:String,attribute:"icon-src"}),s("design:type",String)],U.prototype,"iconSrc",void 0),a([A({type:String}),s("design:type",String)],U.prototype,"iconPosition",void 0),a([A({type:String}),s("design:type",Object)],U.prototype,"iconName",void 0),a([A({type:Boolean,reflect:!0}),s("design:type",Boolean)],U.prototype,"disabled",void 0),a([A({type:String}),s("design:type",Object)],U.prototype,"idevent",void 0),U=a([d("randstad-button")],U);let H=class extends t{constructor(){super(...arguments),this.img="",this.name="",this.title="",this.description="",this.buttonLabel="Contactanos",this.cardId=""}static{this.styles=o`
+    `}};n([_({type:String}),a("design:type",String)],q.prototype,"type",void 0),n([_({type:String}),a("design:type",String)],q.prototype,"variant",void 0),n([_({type:String}),a("design:type",String)],q.prototype,"size",void 0),n([_({type:String}),a("design:type",Object)],q.prototype,"label",void 0),n([_({type:Boolean}),a("design:type",Object)],q.prototype,"loader",void 0),n([_({type:String,attribute:"icon-src"}),a("design:type",String)],q.prototype,"iconSrc",void 0),n([_({type:String}),a("design:type",String)],q.prototype,"iconPosition",void 0),n([_({type:String}),a("design:type",Object)],q.prototype,"iconName",void 0),n([_({type:Boolean,reflect:!0}),a("design:type",Boolean)],q.prototype,"disabled",void 0),n([_({type:String}),a("design:type",Object)],q.prototype,"idevent",void 0),q=n([l("randstad-button")],q);let W=class extends t{constructor(){super(...arguments),this.img="",this.name="",this.title="",this.description="",this.buttonLabel="",this.cardId=""}static{this.styles=r`
     :host {
       display: inline-block;
       font-family: "Graphik", sans-serif;
+      user-drag: none; /* Añade esta línea para deshabilitar el arrastre */
+      -webkit-user-drag: none; /* Para navegadores Webkit */
     }
 
     .image-container {
@@ -586,6 +601,11 @@ function z(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
       width: 100%;
       display: flex;
       flex-direction: column;
+      padding: 24px;
+    }
+
+    .image-container:hover .content-container  {
+      gap: 24px;
     }
 
     .title-wrapper {
@@ -603,6 +623,7 @@ function z(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
       opacity: 0;
       transform: translateY(40px);
       transition: max-height 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
+      transition-duration: .5s;
     }
 
     .image-container:hover .details {
@@ -610,10 +631,12 @@ function z(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
       opacity: 1;
       transform: translateY(0);
       overflow: visible;
+      transition-duration: .8s;
     }
 
     .description {
-      ${_}
+      ${z}
+      margin: 0;
     }
 
     ::part(button) {
@@ -621,6 +644,7 @@ function z(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
       border: 1px solid white;
       background: transparent;
       text-align: left;
+      margin-top: 24px;
     }
 
     ::part(button):hover {
@@ -630,35 +654,46 @@ function z(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
     ::part(button):active {
       background-color: rgba(255, 255, 255, 0.2);
     }    
-  `}render(){return e`
-      <div class="image-container" style="background-image: url(${this.img});">
+  `}handleButtonClick(t){t.stopPropagation(),this.onClick?this.onClick(t):this.dispatchEvent(new CustomEvent("card-button-click",{detail:t.detail,bubbles:!0,composed:!0}))}connectedCallback(){super.connectedCallback(),this.addEventListener("randstad-button-click",this.handleButtonClick)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("randstad-button-click",this.handleButtonClick)}render(){return e`
+      <div class="image-container" style="background-image: url( ${this.img} );">
         <div class="overlay-gradient"></div>
+
         <div class="overlay-hover"></div>
+
         <div class="content-container">
           <div class="title-wrapper">
             <h3 class="title">${this.name}</h3>
           </div>
+
           <div class="details">
             <p class="description">${this.description}</p>
-            ${this.cardId?e`<randstad-button
-              variant="button-tertiary"
-              .label=${this.buttonLabel}
-              idevent=${this.cardId}
-            ></randstad-button>`:e`<randstad-button
-              variant="button-tertiary"
-              .label=${this.buttonLabel}
-            ></randstad-button>`}
+
+            ${this.cardId?e`
+                <randstad-button
+                  variant="button-tertiary"
+                  .label=${this.buttonLabel}
+                  idevent=${this.cardId}
+                  @randstad-button-click=${this.handleButtonClick}
+                >
+                </randstad-button>`:e`
+                <randstad-button
+                  variant="button-tertiary"
+                  .label=${this.buttonLabel}
+                  @randstad-button-click=${this.handleButtonClick}
+                >
+                </randstad-button>
+              `}
           </div>
         </div>
       </div>
-    `}};a([A({type:String}),s("design:type",Object)],H.prototype,"img",void 0),a([A({type:String}),s("design:type",Object)],H.prototype,"name",void 0),a([A({type:String}),s("design:type",Object)],H.prototype,"title",void 0),a([A({type:String}),s("design:type",Object)],H.prototype,"description",void 0),a([A({type:String}),s("design:type",Object)],H.prototype,"buttonLabel",void 0),a([A({type:String}),s("design:type",Object)],H.prototype,"cardId",void 0),H=a([d("carousel-card")],H);let G=class extends t{constructor(){super(...arguments),this.checked=!1,this.error=!1,this.disabled=!1}static{this.styles=o`
+    `}};n([_({type:String}),a("design:type",Object)],W.prototype,"img",void 0),n([_({type:String}),a("design:type",Object)],W.prototype,"name",void 0),n([_({type:String}),a("design:type",Object)],W.prototype,"title",void 0),n([_({type:String}),a("design:type",Object)],W.prototype,"description",void 0),n([_({type:String}),a("design:type",Object)],W.prototype,"buttonLabel",void 0),n([_({type:String}),a("design:type",Object)],W.prototype,"cardId",void 0),n([_({type:Object}),a("design:type",Object)],W.prototype,"onClick",void 0),W=n([l("carousel-card")],W);let Y=class extends t{constructor(){super(...arguments),this.checked=!1,this.error=!1,this.disabled=!1}static{this.styles=r`
     :host {
       display: block;
       max-width: 100%;
     }
 
     label {
-      ${_}
+      ${z}
       display: flex;
       align-items: center;
       gap: 8px;
@@ -770,7 +805,7 @@ function z(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
           <slot></slot>
         </span>
       </label>
-    `}};a([A({type:Boolean,reflect:!0}),s("design:type",Object)],G.prototype,"checked",void 0),a([A({type:Boolean}),s("design:type",Object)],G.prototype,"error",void 0),a([A({type:Boolean}),s("design:type",Object)],G.prototype,"disabled",void 0),G=a([d("randstad-checkbox")],G);const K=o`
+    `}};n([_({type:Boolean,reflect:!0}),a("design:type",Object)],Y.prototype,"checked",void 0),n([_({type:Boolean}),a("design:type",Object)],Y.prototype,"error",void 0),n([_({type:Boolean}),a("design:type",Object)],Y.prototype,"disabled",void 0),Y=n([l("randstad-checkbox")],Y);const G=r`
   .label-container {
     display: flex;
     align-items: center;
@@ -789,7 +824,7 @@ function z(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
     top: 160%;
     right: 0;
     
-    background-color: var(--tooltip-background, #0F1941);
+    background-color: var( --tooltip-background, #0F1941 );
     color: var(--tooltip-color, #fff);
 
     padding: 8px 12px;
@@ -816,28 +851,28 @@ function z(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
     height: 0;
     border-style: solid;
     border-width: 0 6px 6px 6px; 
-    border-color: transparent transparent var(--tooltip-background, #0F1941) transparent; 
+    border-color: transparent transparent var( --tooltip-background, #0F1941 ) transparent; 
   }
 
   .tooltip-wrapper:hover .tooltip {
     visibility: visible;
     opacity: 1;
   }
-`,X=o`
+`,X=r`
   :host {
     display: block;
     font-family: "Graphik", sans-serif;
-    color: var(--secondary-randstad-dark-blue, #0f1941);
+    color: var( --secondary-randstad-dark-blue, #0f1941 );
     width: 100%;
   }
 
   .form-label {
-    ${B}
+    ${I}
     display: flex;
     align-items: baseline;
     flex-direction: row;
     gap: 4px;
-    color: var(--label-color, var(--secondary-color-80));
+    color: var( --label-color, var( --secondary-color-80 ) );
   }
 
   .input-container {
@@ -848,30 +883,30 @@ function z(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
 
   input::placeholder {
     ${N}
-    color: var(--secondary-color-40);
+    color: var( --secondary-color-40 );
   }
 
   .helper-description {
-    ${B}
-    color: var(--secondary-color-40);
+    ${I}
+    color: var( --secondary-color-40 );
     margin: 0;
   }
 
   .required {
-    color: var(--ui-negative);
+    color: var( --ui-negative );
   }
 
   .optional {
-    color: var(--secondary-color-60);
-    ${I}
+    color: var( --secondary-color-60 );
+    ${L}
   }
 
   randstad-icon {
-    color: var(--primary-color);
+    color: var( --primary-color );
   }
-`,Q=o`
+`,K=r`
     :host([error]) .input-wrapper, .form.error .form-input  {
-        border: 1px solid var(--ui-negative, red) !important;
+        border: 1px solid var( --ui-negative, red ) !important;
     }
 
     :host([error]) .input-wrapper:hover, .form.error:hover .form-input:hover {
@@ -879,161 +914,185 @@ function z(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
     }
 
     :host([error]) .input-wrapper.active, .form.error.active .form-input.active {
-        border: 1px solid var(--ui-negative, red) !important;
+        border: 1px solid var( --ui-negative, red ) !important;
         box-shadow: none !important;
     }
 
    .error-message {
-        ${B}
+        ${I}
         color: var(--ui-negative, #E00F0F);
         margin-top: 4px;
     }
-`;let J=class extends L{constructor(){super(...arguments),this.keydown=void 0,this.size="md",this.icon=null,this.typing=!1,this.type="text",this.isPasswordVisible=!1,this.cleanButton=!1}static{this.styles=o`
-    ${X}
-    ${Q}
-    ${K}
+`,Q=new CSSStyleSheet;Q.replaceSync(r`
+        ::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
 
-    .form {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-      width: 100%;
-    }
+        ::-webkit-scrollbar-track {
+            background: #E8E8E8;
+        }
 
-    .form-input {
-      ${N}
-      padding: 16px;
-      border: 1px solid var(--secondary-color-10);
-      border-radius: 4px;
-      outline: none;
-      transition: border-color 0.3s ease, box-shadow 0.3s ease;
-      width: 100%;
-      color: var(--secondary-color);
-    }
+        ::-webkit-scrollbar-thumb {
+            background-color: #7A7A7A;
+            border-radius: 100px;
+        }
 
-    /* Hover normal (sin error ni foco) */
-    .form:not(.error):not(:focus-within) .form-input:hover {
-      box-shadow: 0px 0px 0px 4px var(--form-hover-shadow);
-    }
+        ::-webkit-scrollbar-button {
+            display: none;
+        }
+    `.cssText);let J=class extends P{constructor(){super(...arguments),this.keydown=void 0,this.size="md",this.icon=null,this.typing=!1,this.type="text",this.isPasswordVisible=!1,this.cleanButton=!1}static{this.styles=[Q,r`
+      ${X}
+      ${K}
+      ${G}
 
-    /* Hover con error (sin foco) */
-    .form.error:not(:focus-within) .form-input:hover {
-      box-shadow: 0px 0px 0px 4px var(--ui-negative-pink-shadow);
-    }
+      .form {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        width: 100%;
+      }
 
-    .form-input:focus {
-      border: 2px solid var(--primary-color)
-    }
+      .form-input {
+        ${N}
+        padding: 16px;
+        border: 1px solid var(--secondary-color-10);
+        border-radius: 4px;
+        outline: none;
+        transition: border-color 0.3s ease, box-shadow 0.3s ease;
+        width: 100%;
+        color: var(--secondary-color);
+      }
 
-    .form.disabled .form-input, 
-    .form.disabled .toggle-password randstad-icon,
-    .form.disabled .clean-button randstad-icon {
-      background-color: var( --secondary-color-10 );
-      color: #9FA3B3;
-      cursor: default;
-    }
- 
-    .form.disabled .toggle-password,
-    .form.disabled .clean-button {
-      cursor: default;
-    }
+      /* Hover normal (sin error ni foco) */
+      .form:not(.error):not(:focus-within) .form-input:hover {
+        box-shadow: 0px 0px 0px 4px var(--form-hover-shadow);
+      }
 
-    .input-with-button {
-      display: flex;
-      align-items: center;
-      width: 100%;
-      position: relative;
-    }
+      /* Hover con error (sin foco) */
+      .form.error:not(:focus-within) .form-input:hover {
+        box-shadow: 0px 0px 0px 4px var(--ui-negative-pink-shadow);
+      }
 
-    .input-with-button input {
-      width: 100%;
-    }
+      .form-input:focus {
+        border: 2px solid var(--primary-color)
+      }
 
-    .input-with-button input[type="password"]{
-      padding-right: 40px;
-    }
+      .form.disabled .form-input, 
+      .form.disabled .toggle-password randstad-icon,
+      .form.disabled .clean-button randstad-icon {
+        background-color: var( --secondary-color-10 );
+        color: #9FA3B3;
+        cursor: default;
+      }
+  
+      .form.disabled .toggle-password,
+      .form.disabled .clean-button {
+        cursor: default;
+      }
 
-    .input-with-button button {
-      position: absolute;
-      right: 10px;
-      top: 50%;
-      transform: translateY(-50%);
-      background: transparent;
-      border: none;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 40px;
-      height: 40px;
-    }
+      .input-with-button {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        position: relative;
+      }
 
-    .toggle-password randstad-icon {
-      width: 100%;
-      height: 100%;
-      max-width: 32px;
-      max-height: 32px;
-    }
+      .input-with-button input {
+        width: 100%;
+      }
 
-    textarea {
-      ${N}
-      resize: none;
-    }
+      .input-with-button input[type="password"]{
+        padding-right: 40px;
+      }
 
-    textarea.form-input {
-      min-height: 30px;
-      width: 100%;
-    }
+      .input-with-button button {
+        position: absolute;
+        right: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 40px;
+        height: 40px;
+      }
 
-    .form.disabled textarea.form-input {
-      background-color: var(--secondary-color-10);
-      color: #9FA3B3;
-      cursor: default;
-    }
-    
-    .link-text {
-      ${B}
-      color: var(--primary-color);
-      cursor: pointer;
-      text-align: end;
-      text-decoration: none;
-      vertical-align: middle;
-      display: inline;
-      padding: 0;
-      margin: 0;
-      line-height: normal;
-    }
+      .toggle-password randstad-icon {
+        width: 100%;
+        height: 100%;
+        max-width: 32px;
+        max-height: 32px;
+      }
 
-    .link-text:hover {
-      color: var(--secondary-color);
-    }
+      textarea {
+        ${N}
+        resize: none;
+      }
 
-    .clean-button {
-      position: absolute;
-      right: 10px;
-      top: 50%;
-      transform: translateY(-50%);
-      background: transparent;
-      border: none;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 40px;
-      height: 40px;
-    }
+      textarea.form-input {
+        min-height: 30px;
+        width: 100%;
+      }
 
-    .clean-button randstad-icon {
-      width: 24px;
-      height: 24px;
-      color: var( --primary-color );
-    }
-  `}togglePassword(t){this.isPasswordVisible=!this.isPasswordVisible;const e=t.currentTarget.parentElement?.querySelector("input");e&&(e.type=this.isPasswordVisible?"text":"password"),this.requestUpdate()}handleInput(t){this.handleInputCustom(t);const e=t.target.value;void 0!==this.maxLength&&"textarea"!==this.type?this.value=e.slice(0,this.maxLength):this.value=e,this.dispatchEvent(new CustomEvent("valueChanged",{detail:this.value})),this.dispatchEvent(new Event("input",{bubbles:!0})),this.requestUpdate()}handleClear(){this.value="",this.dispatchEvent(new CustomEvent("valueChanged",{detail:this.value})),this.dispatchEvent(new Event("input",{bubbles:!0})),this.requestUpdate()}handleLinkClick(t){t.preventDefault(),this.linkRoute&&this.dispatchEvent(new CustomEvent("linkClicked",{detail:this.linkRoute,bubbles:!0,composed:!0}))}handleInputCustom(t){"number"===this.keydown?this.onlyNumeric(t):"text"===this.keydown&&this.onlyText(t)}onlyNumeric(t){const e=t.target,i=e.value.replace(/[^0-9]/g,"");e.value=i}onlyText(t){const e=t.target,i=e.value.replace(/[^a-zA-Z\sáéíóúñÁÉÍÓÚÑ]/g,"");e.value=i}handleKeyDown(t){if("Enter"!==t.key)return;const e=new Event("submit",{bubbles:!0,composed:!0,cancelable:!0}),i=this.closest("form");i&&i.dispatchEvent(e)}render(){const t=this.cleanButton&&this.value&&"password"!==this.type&&"textarea"!==this.type,o="textarea"===this.type?`height: ${this.heightTextArea??"30px"}; max-height: ${this.maxHeightTextArea??"30px"}; overflow-y: auto;`:"",r=e`
+      .form.disabled textarea.form-input {
+        background-color: var(--secondary-color-10);
+        color: #9FA3B3;
+        cursor: default;
+      }
+      
+      .link-text {
+        ${I}
+        color: var(--primary-color);
+        cursor: pointer;
+        text-align: end;
+        text-decoration: none;
+        vertical-align: middle;
+        display: inline;
+        padding: 0;
+        margin: 0;
+        line-height: normal;
+      }
+
+      .link-text:hover {
+        color: var(--secondary-color);
+      }
+
+      .clean-button {
+        position: absolute;
+        right: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 40px;
+        height: 40px;
+      }
+
+      .clean-button randstad-icon {
+        width: 24px;
+        height: 24px;
+        color: var( --primary-color );
+      }
+    `]}togglePassword(t){this.isPasswordVisible=!this.isPasswordVisible;const e=t.currentTarget.parentElement?.querySelector("input");e&&(e.type=this.isPasswordVisible?"text":"password"),this.requestUpdate()}handleInput(t){this.handleInputCustom(t);const e=t.target.value;void 0!==this.maxLength&&"textarea"!==this.type?this.value=e.slice(0,this.maxLength):this.value=e,this.dispatchEvent(new CustomEvent("valueChanged",{detail:this.value})),this.dispatchEvent(new Event("input",{bubbles:!0})),this.requestUpdate()}handleClear(){this.value="",this.dispatchEvent(new CustomEvent("valueChanged",{detail:this.value})),this.dispatchEvent(new Event("input",{bubbles:!0})),this.requestUpdate()}handleLinkClick(t){t.preventDefault(),this.linkRoute&&this.dispatchEvent(new CustomEvent("linkClicked",{detail:this.linkRoute,bubbles:!0,composed:!0}))}handleInputCustom(t){"number"===this.keydown?this.onlyNumeric(t):"text"===this.keydown&&this.onlyText(t)}onlyNumeric(t){const e=t.target,i=e.value.replace(/[^0-9]/g,"");e.value=i}onlyText(t){const e=t.target,i=e.value.replace(/[^a-zA-Z\sáéíóúñÁÉÍÓÚÑ]/g,"");e.value=i}handleKeyDown(t){if("Enter"!==t.key)return;const e=new Event("submit",{bubbles:!0,composed:!0,cancelable:!0}),i=this.closest("form");i&&i.dispatchEvent(e)}render(){const t=this.cleanButton&&this.value&&"password"!==this.type&&"textarea"!==this.type,r="textarea"===this.type?`height: ${this.heightTextArea??"30px"}; max-height: ${this.maxHeightTextArea??"30px"}; overflow-y: auto;`:"",o=e`
       ${this.labelColor?`--label-color: ${this.labelColor};`:""}
+    `,s=e`
+      <randstad-icon
+        name="${this.isPasswordVisible?"eye_crossed":"eye"}"
+        size="24px"
+      >
+      </randstad-icon>
     `;return e`
       <div
         class="form ${this.error?"error":""} ${this.disabled?"disabled":""}"
-        style="${r}"
+        style="${o}"
       >
         ${this.renderLabelContainer()}
 
@@ -1050,7 +1109,7 @@ function z(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
                   @input=${this.handleInput}
                   @keydown=${this.handleKeyDown}
                   maxlength=${this.maxLength??i}
-                  style="${o}"
+                  style="${r}"
                 >
                 </textarea>
               `:e`
@@ -1072,18 +1131,7 @@ function z(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
                       @click=${this.togglePassword}
                       ?disabled=${this.disabled}
                     >
-                      ${this.isPasswordVisible?e`
-                          <randstad-icon 
-                            name="eye_crossed" 
-                            size="24px"
-                          >
-                          </randstad-icon>
-                        `:e`
-                          <randstad-icon 
-                            name="eye" 
-                            size="24px"
-                          >
-                          </randstad-icon>`}
+                      ${s}
                     </button>`:i}
 
                 ${t?e`
@@ -1117,10 +1165,10 @@ function z(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
 
         ${this.renderHelper()} 
       </div>
-    `}};a([A({type:String}),s("design:type",Object)],J.prototype,"keydown",void 0),a([A({type:String}),s("design:type",String)],J.prototype,"size",void 0),a([A({type:String}),s("design:type",Object)],J.prototype,"icon",void 0),a([A({type:Boolean}),s("design:type",Boolean)],J.prototype,"typing",void 0),a([A({type:String}),s("design:type",String)],J.prototype,"type",void 0),a([A({type:String}),s("design:type",String)],J.prototype,"linkText",void 0),a([A({type:String}),s("design:type",String)],J.prototype,"linkRoute",void 0),a([A({type:Boolean,reflect:!0}),s("design:type",Object)],J.prototype,"isPasswordVisible",void 0),a([A({type:Boolean}),s("design:type",Boolean)],J.prototype,"cleanButton",void 0),a([A({type:Number}),s("design:type",Number)],J.prototype,"maxLength",void 0),a([A({type:String}),s("design:type",String)],J.prototype,"heightTextArea",void 0),a([A({type:String}),s("design:type",String)],J.prototype,"maxHeightTextArea",void 0),J=a([d("randstad-form")],J);let Z=class extends L{constructor(){super(...arguments),this.rows=""}static{this.styles=o`
+    `}};n([_({type:String}),a("design:type",Object)],J.prototype,"keydown",void 0),n([_({type:String}),a("design:type",String)],J.prototype,"size",void 0),n([_({type:String}),a("design:type",Object)],J.prototype,"icon",void 0),n([_({type:Boolean}),a("design:type",Boolean)],J.prototype,"typing",void 0),n([_({type:String}),a("design:type",String)],J.prototype,"type",void 0),n([_({type:String}),a("design:type",String)],J.prototype,"linkText",void 0),n([_({type:String}),a("design:type",String)],J.prototype,"linkRoute",void 0),n([_({type:Boolean,reflect:!0}),a("design:type",Object)],J.prototype,"isPasswordVisible",void 0),n([_({type:Boolean}),a("design:type",Boolean)],J.prototype,"cleanButton",void 0),n([_({type:Number}),a("design:type",Number)],J.prototype,"maxLength",void 0),n([_({type:String}),a("design:type",String)],J.prototype,"heightTextArea",void 0),n([_({type:String}),a("design:type",String)],J.prototype,"maxHeightTextArea",void 0),J=n([l("randstad-form")],J);let Z=class extends P{constructor(){super(...arguments),this.rows=""}static{this.styles=r`
     ${X}
-    ${Q}
     ${K}
+    ${G}
     
     :host {
       display: flex;
@@ -1152,28 +1200,63 @@ function z(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
 
         ${this.renderHelper()}
       </div>
-    `}};a([A({type:String}),s("design:type",String)],Z.prototype,"rows",void 0),Z=a([d("randstad-form-group")],Z);class tt extends t{constructor(){super(...arguments),this.name="",this.size="24px"}static{this.styles=o`
+    `}};n([_({type:String}),a("design:type",String)],Z.prototype,"rows",void 0),Z=n([l("randstad-form-group")],Z);
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const tt=2;let et=class{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}};
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const it=globalThis,rt=it.trustedTypes,ot=rt?rt.createPolicy("lit-html",{createHTML:t=>t}):void 0,st="$lit$",nt=`lit$${Math.random().toFixed(9).slice(2)}$`,at="?"+nt,lt=`<${at}>`,dt=document,ct=()=>dt.createComment(""),ht=t=>null===t||"object"!=typeof t&&"function"!=typeof t,pt=Array.isArray,ut="[ \t\n\f\r]",bt=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,gt=/-->/g,mt=/>/g,yt=RegExp(`>|${ut}(?:([^\\s"'>=/]+)(${ut}*=${ut}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),vt=/'/g,ft=/"/g,xt=/^(?:script|style|textarea|title)$/i,wt=Symbol.for("lit-noChange"),kt=Symbol.for("lit-nothing"),$t=new WeakMap,St=dt.createTreeWalker(dt,129);function Ct(t,e){if(!pt(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==ot?ot.createHTML(e):e}const Et=(t,e)=>{const i=t.length-1,r=[];let o,s=2===e?"<svg>":3===e?"<math>":"",n=bt;for(let e=0;e<i;e++){const i=t[e];let a,l,d=-1,c=0;for(;c<i.length&&(n.lastIndex=c,l=n.exec(i),null!==l);)c=n.lastIndex,n===bt?"!--"===l[1]?n=gt:void 0!==l[1]?n=mt:void 0!==l[2]?(xt.test(l[2])&&(o=RegExp("</"+l[2],"g")),n=yt):void 0!==l[3]&&(n=yt):n===yt?">"===l[0]?(n=o??bt,d=-1):void 0===l[1]?d=-2:(d=n.lastIndex-l[2].length,a=l[1],n=void 0===l[3]?yt:'"'===l[3]?ft:vt):n===ft||n===vt?n=yt:n===gt||n===mt?n=bt:(n=yt,o=void 0);const h=n===yt&&t[e+1].startsWith("/>")?" ":"";s+=n===bt?i+lt:d>=0?(r.push(a),i.slice(0,d)+st+i.slice(d)+nt+h):i+nt+(-2===d?e:h)}return[Ct(t,s+(t[i]||"<?>")+(2===e?"</svg>":3===e?"</math>":"")),r]};class Dt{constructor({strings:t,_$litType$:e},i){let r;this.parts=[];let o=0,s=0;const n=t.length-1,a=this.parts,[l,d]=Et(t,e);if(this.el=Dt.createElement(l,i),St.currentNode=this.el.content,2===e||3===e){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes)}for(;null!==(r=St.nextNode())&&a.length<n;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(st)){const e=d[s++],i=r.getAttribute(t).split(nt),n=/([.?@])?(.*)/.exec(e);a.push({type:1,index:o,name:n[2],strings:i,ctor:"."===n[1]?_t:"?"===n[1]?Tt:"@"===n[1]?jt:Ft}),r.removeAttribute(t)}else t.startsWith(nt)&&(a.push({type:6,index:o}),r.removeAttribute(t));if(xt.test(r.tagName)){const t=r.textContent.split(nt),e=t.length-1;if(e>0){r.textContent=rt?rt.emptyScript:"";for(let i=0;i<e;i++)r.append(t[i],ct()),St.nextNode(),a.push({type:2,index:++o});r.append(t[e],ct())}}}else if(8===r.nodeType)if(r.data===at)a.push({type:2,index:o});else{let t=-1;for(;-1!==(t=r.data.indexOf(nt,t+1));)a.push({type:7,index:o}),t+=nt.length-1}o++}}static createElement(t,e){const i=dt.createElement("template");return i.innerHTML=t,i}}function Mt(t,e,i=t,r){if(e===wt)return e;let o=void 0!==r?i._$Co?.[r]:i._$Cl;const s=ht(e)?void 0:e._$litDirective$;return o?.constructor!==s&&(o?._$AO?.(!1),void 0===s?o=void 0:(o=new s(t),o._$AT(t,i,r)),void 0!==r?(i._$Co??=[])[r]=o:i._$Cl=o),void 0!==o&&(e=Mt(t,o._$AS(t,e.values),o,r)),e}class At{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:e},parts:i}=this._$AD,r=(t?.creationScope??dt).importNode(e,!0);St.currentNode=r;let o=St.nextNode(),s=0,n=0,a=i[0];for(;void 0!==a;){if(s===a.index){let e;2===a.type?e=new Ot(o,o.nextSibling,this,t):1===a.type?e=new a.ctor(o,a.name,a.strings,this,t):6===a.type&&(e=new Pt(o,this,t)),this._$AV.push(e),a=i[++n]}s!==a?.index&&(o=St.nextNode(),s++)}return St.currentNode=dt,r}p(t){let e=0;for(const i of this._$AV)void 0!==i&&(void 0!==i.strings?(i._$AI(t,i,e),e+=i.strings.length-2):i._$AI(t[e])),e++}}class Ot{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,e,i,r){this.type=2,this._$AH=kt,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=i,this.options=r,this._$Cv=r?.isConnected??!0}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return void 0!==e&&11===t?.nodeType&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=Mt(this,t,e),ht(t)?t===kt||null==t||""===t?(this._$AH!==kt&&this._$AR(),this._$AH=kt):t!==this._$AH&&t!==wt&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):(t=>pt(t)||"function"==typeof t?.[Symbol.iterator])(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!==kt&&ht(this._$AH)?this._$AA.nextSibling.data=t:this.T(dt.createTextNode(t)),this._$AH=t}$(t){const{values:e,_$litType$:i}=t,r="number"==typeof i?this._$AC(t):(void 0===i.el&&(i.el=Dt.createElement(Ct(i.h,i.h[0]),this.options)),i);if(this._$AH?._$AD===r)this._$AH.p(e);else{const t=new At(r,this),i=t.u(this.options);t.p(e),this.T(i),this._$AH=t}}_$AC(t){let e=$t.get(t.strings);return void 0===e&&$t.set(t.strings,e=new Dt(t)),e}k(t){pt(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let i,r=0;for(const o of t)r===e.length?e.push(i=new Ot(this.O(ct()),this.O(ct()),this,this.options)):i=e[r],i._$AI(o),r++;r<e.length&&(this._$AR(i&&i._$AB.nextSibling,r),e.length=r)}_$AR(t=this._$AA.nextSibling,e){for(this._$AP?.(!1,!0,e);t!==this._$AB;){const e=t.nextSibling;t.remove(),t=e}}setConnected(t){void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t))}}class Ft{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,i,r,o){this.type=1,this._$AH=kt,this._$AN=void 0,this.element=t,this.name=e,this._$AM=r,this.options=o,i.length>2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=kt}_$AI(t,e=this,i,r){const o=this.strings;let s=!1;if(void 0===o)t=Mt(this,t,e,0),s=!ht(t)||t!==this._$AH&&t!==wt,s&&(this._$AH=t);else{const r=t;let n,a;for(t=o[0],n=0;n<o.length-1;n++)a=Mt(this,r[i+n],e,n),a===wt&&(a=this._$AH[n]),s||=!ht(a)||a!==this._$AH[n],a===kt?t=kt:t!==kt&&(t+=(a??"")+o[n+1]),this._$AH[n]=a}s&&!r&&this.j(t)}j(t){t===kt?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}}class _t extends Ft{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===kt?void 0:t}}class Tt extends Ft{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==kt)}}class jt extends Ft{constructor(t,e,i,r,o){super(t,e,i,r,o),this.type=5}_$AI(t,e=this){if((t=Mt(this,t,e,0)??kt)===wt)return;const i=this._$AH,r=t===kt&&i!==kt||t.capture!==i.capture||t.once!==i.once||t.passive!==i.passive,o=t!==kt&&(i===kt||r);r&&this.element.removeEventListener(this.name,this,i),o&&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)}}class Pt{constructor(t,e,i){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(t){Mt(this,t)}}const Lt=it.litHtmlPolyfillSupport;Lt?.(Dt,Ot),(it.litHtmlVersions??=[]).push("3.3.1");
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+class zt extends et{constructor(t){if(super(t),this.it=kt,t.type!==tt)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(t){if(t===kt||null==t)return this._t=void 0,this.it=t;if(t===wt)return t;if("string"!=typeof t)throw Error(this.constructor.directiveName+"() called with a non-string value");if(t===this.it)return this._t;this.it=t;const e=[t];return e.raw=e,this._t={_$litType$:this.constructor.resultType,strings:e,values:[]}}}zt.directiveName="unsafeHTML",zt.resultType=1;
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+class It extends zt{}It.directiveName="unsafeSVG",It.resultType=2;const Nt=(t=>(...e)=>({_$litDirective$:t,values:e}))(It);class Bt extends t{constructor(){super(...arguments),this.name="",this.size="24px",this.color="",this.svgContent=null}static{this.styles=r`
     :host {
       display: inline-flex;
-      width: var(--icon-size, 24px);
-      height: var(--icon-size, 24px);
+      width: var( --icon-size, 24px );
+      height: var( --icon-size, 24px );
       align-items: center;
       justify-content: center;
     }
 
     svg {
-      width: var(--icon-size, 24px);
-      height: var(--icon-size, 24px);
-      fill: var(--icon-color, currentColor);
+      width: var( --icon-size, 24px );
+      height: var( --icon-size, 24px );
+      fill: var( --icon-color, currentColor );
+    }
+
+    .custom-icon {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 100%;
     }
-  `}connectedCallback(){super.connectedCallback(),this.style.setProperty("--icon-size",this.size)}updated(t){t.has("size")&&this.style.setProperty("--icon-size",this.size)}async loadIcon(){try{const t=await fetch(`/assets/icons/${this.name}.svg`);if(!t.ok)throw new Error("Icon not found");const e=await t.text(),i=new DOMParser,o=i.parseFromString(e,"image/svg+xml").querySelector("svg");if(!o)throw new Error("No se encontró un elemento SVG válido");o.removeAttribute("fill"),o.setAttribute("width",this.size),o.setAttribute("height",this.size),o.querySelectorAll("[fill]").forEach((t=>t.removeAttribute("fill"))),o.setAttribute("fill","currentColor"),"innerHTML"in this.renderRoot&&(this.renderRoot.innerHTML=""),this.renderRoot.appendChild(o)}catch(t){console.error(`❌ Error cargando icono ${this.name}:`,t),"innerHTML"in this.renderRoot&&(this.renderRoot.innerHTML="<span>⚠️</span>")}}render(){return this.loadIcon(),null}}a([A({type:String}),s("design:type",Object)],tt.prototype,"name",void 0),a([A({type:String}),s("design:type",Object)],tt.prototype,"size",void 0),customElements.define("randstad-icon",tt);let et=class extends t{constructor(){super(...arguments),this.type="informative",this.icon="info",this.message="Este es un mensaje.",this.open=!1}static{this.styles=o`
+  `}updated(t){super.updated(t),t.has("size")&&this.style.setProperty("--icon-size",this.size),t.has("color")&&this.style.setProperty("--icon-color",this.color),t.has("name")&&this.name&&this.loadIcon()}async loadIcon(){try{const t=await fetch(`/assets/icons/${this.name}.svg`);if(!t.ok)throw new Error("Icon not found");let e=await t.text();e=e.replace(/fill="[^"]*"/g,""),e=e.replace(/fill='[^']*'/g,""),this.svgContent=e}catch(t){console.error(`❌ Error cargando icono ${this.name}:`,t),this.innerHTML=" <span>⚠️</span> "}}render(){return this.svgContent?e`
+      <div class="custom-icon" style="color: ${this.color};">
+        ${Nt(this.svgContent)}
+      </div>
+    `:e``}}n([_({type:String}),a("design:type",Object)],Bt.prototype,"name",void 0),n([_({type:String}),a("design:type",Object)],Bt.prototype,"size",void 0),n([_({type:String}),a("design:type",Object)],Bt.prototype,"color",void 0),n([T(),a("design:type",Object)],Bt.prototype,"svgContent",void 0),customElements.define("randstad-icon",Bt);let Rt=class extends t{constructor(){super(...arguments),this.type="informative",this.icon="info",this.message="Este es un mensaje.",this.open=!1}static{this.styles=r`
     :host {
       display: block;
       font-family: 'Graphik', sans-serif;
     }
 
     .container {
-      ${B}
+      ${I}
       display: flex;
       align-items: flex-start;
       gap: 8px;
@@ -1216,154 +1299,151 @@ function z(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
     }
   `}render(){return e`
       <div class="container ${this.open?"":"hidden"} ${this.type}">
-        <randstad-icon class="icon" name="${this.icon}" size="24px" style="color: var(--icon-color);"></randstad-icon>
+        <randstad-icon
+          name="${this.icon}"
+        >
+        </randstad-icon>
+
         <span class="message">${this.message}</span>
       </div>
-    `}};a([A({type:String}),s("design:type",String)],et.prototype,"type",void 0),a([A({type:String}),s("design:type",String)],et.prototype,"icon",void 0),a([A({type:String}),s("design:type",String)],et.prototype,"message",void 0),a([A({type:Boolean}),s("design:type",Boolean)],et.prototype,"open",void 0),et=a([d("randstad-notice")],et);let it=class extends t{constructor(){super(...arguments),this.open=!1,this.title="Título del modal",this.showNotice=!1,this.noticeType="informative",this.noticeMessage="",this.noticeIcon="info",this.showPrimaryButton=!1,this.primaryButtonLabel="Aceptar",this.showSecondaryButton=!1,this.secondaryButtonLabel="Cancelar",this.isFooterCustom=!1,this.isPrimaryLoader=!1,this.isPrimaryDisabled=!1,this.modalWidth="500px",this.scrollable=!1,this.setScrollableMode=()=>{this.scrollable=window.innerWidth>940}}static{this.styles=o`
-    :host {
-      font-family: 'Graphik', sans-serif;
-      display: none;
-    }
-
-    :host([open]) {
-      display: block;
-      z-index: 9999;
-    }
-
-    .overlay {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      z-index: 9999;
-      display: flex;
-      background: rgba(15, 25, 65, 0.4);
-      justify-content: center;
-      align-items: center;
-      overflow-y: auto;
-    }
-
-    .modal {
-      width: 100%;
-      background: var(--brand-off-white);
-      max-width: var(--modal-width);
-      max-height: 80vh;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-      display: flex;
-      flex-direction: column;
-      border-radius: 8px;
-    }
-
-    .modal-body {
-      overflow-y: auto;
-      flex: 1;
-    }
-    
-    .modal-footer {
-      justify-content: flex-end;
-    }
+    `}};n([_({type:String}),a("design:type",String)],Rt.prototype,"type",void 0),n([_({type:String}),a("design:type",String)],Rt.prototype,"icon",void 0),n([_({type:String}),a("design:type",String)],Rt.prototype,"message",void 0),n([_({type:Boolean}),a("design:type",Boolean)],Rt.prototype,"open",void 0),Rt=n([l("randstad-notice")],Rt);let Vt=class extends t{constructor(){super(...arguments),this.open=!1,this.title="Título del modal",this.showNotice=!1,this.noticeType="informative",this.noticeMessage="",this.noticeIcon="info",this.showPrimaryButton=!1,this.primaryButtonLabel="Aceptar",this.showSecondaryButton=!1,this.secondaryButtonLabel="Cancelar",this.isFooterCustom=!1,this.isPrimaryLoader=!1,this.isPrimaryDisabled=!1,this.modalWidth="500px",this.scrollable=!1,this.setScrollableMode=()=>{this.scrollable=window.innerWidth>940}}static{this.styles=[Q,r`
+      :host {
+        font-family: 'Graphik', sans-serif;
+        display: none;
+      }
 
-    .modal-footer.one-button randstad-button {
-      width: 100%;
-    }
+      :host([open]) {
+        display: block;
+        z-index: 9999;
+      }
 
-    .modal-footer.two-buttons randstad-button {
-      width: 50%;
-    }
+      .overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 9999;
+        display: flex;
+        background: rgba(15, 25, 65, 0.4);
+        justify-content: center;
+        align-items: center;
+        overflow-y: auto;
+      }
 
-    /* Estilos para dispositivos pequeños (<= 940px) */
-    @media (max-width: 940px) {
       .modal {
-        /* Se estira para ocupar casi toda la pantalla */
-        width: 96vw; 
-        height: 96vh;
-        max-width: none;
-        max-height: none;
-        margin: 0;
+        width: 100%;
+        height: 80dvh;
+        max-height: 80dvh;
+        background: var(--brand-off-white);
+        max-width: var(--modal-width);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        display: flex;
+        flex-direction: column;
+        border-radius: 8px;
+      }
+
+      .modal-body {
+        overflow-y: auto;
+        flex: 1;
       }
 
-      .modal-header,
-      .modal-body,
       .modal-footer {
-        padding: 0; 
+        justify-content: flex-end;
       }
 
-      .modal-header {
-        margin-bottom: 16px;
+      .modal-footer.one-button randstad-button {
+        width: 100%;
       }
-      
-      .modal-footer {
-        margin-top: 16px;
+
+      .modal-footer.two-buttons randstad-button {
+        width: 50%;
       }
-    }
 
-    /* Estilos comunes a ambos tamaños de pantalla */
-    .modal-header {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-      justify-content: space-between;
-      align-items: center;
-      padding: 24px;
-      border-bottom: 1px solid var(--secondary-color-20);
-    }
+      /* Estilos para dispositivos pequeños (<= 940px) */
+      @media (max-width: 940px) {
+        .modal {
+          /* Se estira para ocupar casi toda la pantalla */
+          width: 96dvw; 
+          height: 96dvh;
+          max-width: none;
+          max-height: none;
+          margin: 0;
+        }
 
-    .modal-header-content {
-      display: flex;
-      gap: 32px;
-      width: 100%;
-      justify-content: space-between;
-      align-items: center;
-    }
+        .modal-header,
+        .modal-body,
+        .modal-footer {
+          padding: 0; 
+        }
+      }
 
-    .titles-container {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-      flex-grow: 1;
-    }
+      /* Estilos comunes a ambos tamaños de pantalla */
+      .modal-header {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        justify-content: space-between;
+        align-items: center;
+        padding: 24px;
+        border-bottom: 1px solid var(--secondary-color-20);
+      }
 
-    .modal-title {
-      ${q}
-      margin: 0;
-      color: var(--secondary-color);
-    }
+      .modal-header-content {
+        display: flex;
+        gap: 32px;
+        width: 100%;
+        justify-content: space-between;
+        align-items: center;
+      }
 
-    .modal-subtitle {
-      ${B}
-      margin: 0;
-      color: var(--secondary-color-60);
-    }
+      .titles-container {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        flex-grow: 1;
+      }
 
-    .modal-header randstad-notice {
-      width: 100%;
-    }
+      .modal-title {
+        ${V}
+        margin: 0;
+        color: var(--secondary-color);
+      }
 
-    .modal-close {
-      background: none;
-      border: none;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 0;
-    }
+      .modal-subtitle {
+        ${I}
+        margin: 0;
+        color: var(--secondary-color-60);
+      }
 
-    .modal-body {
-      display: flex;
-      flex-direction: column;
-      padding: 24px;
-      gap: 16px;
-    }
+      .modal-header randstad-notice {
+        width: 100%;
+      }
 
-    .modal-footer {
-      display: flex;
-      padding: 24px;
-      gap: 16px;
-      border-top: 1px solid var(--secondary-color-20);
-    }
-  `}closeModal(){this.dispatchEvent(new CustomEvent("modal-close"))}connectedCallback(){super.connectedCallback(),this.setScrollableMode(),window.addEventListener("resize",this.setScrollableMode)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this.setScrollableMode)}getFooterClass(){return!this.isFooterCustom||this.showPrimaryButton||this.showSecondaryButton?this.showPrimaryButton&&this.showSecondaryButton?"two-buttons":"one-button":"footer-custom"}render(){return e`
+      .modal-close {
+        background: none;
+        border: none;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+      }
+
+      .modal-body {
+        display: flex;
+        flex-direction: column;
+        padding: 24px;
+        gap: 16px;
+      }
+
+      .modal-footer {
+        display: flex;
+        padding: 24px;
+        gap: 16px;
+        border-top: 1px solid var(--secondary-color-20);
+      }
+    `]}closeModal(){this.dispatchEvent(new CustomEvent("modal-close"))}connectedCallback(){super.connectedCallback(),this.setScrollableMode(),window.addEventListener("resize",this.setScrollableMode)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this.setScrollableMode)}getFooterClass(){return!this.isFooterCustom||this.showPrimaryButton||this.showSecondaryButton?this.showPrimaryButton&&this.showSecondaryButton?"two-buttons":"one-button":"footer-custom"}render(){return e`
       <div class="overlay" role="dialog" aria-modal="true">
         <div class="modal" style="--modal-width: ${this.modalWidth};">
           <div class="modal-header">
@@ -1375,18 +1455,23 @@ function z(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
               </div>
 
               <button class="modal-close" @click=${this.closeModal} aria-label="Cerrar modal">
-                <randstad-icon name="close" size="24px" style="--icon-color: var(--primary-color);"></randstad-icon>
+                <randstad-icon
+                  name="close"
+                  size="24"
+                  .color=${"var( --primary-color )"}
+                >
+                </randstad-icon>
               </button>
             </div>
 
             ${this.showNotice?e`
-                <randstad-notice
-                  .open=${!0}
-                  .type=${this.noticeType}
-                  .icon=${this.noticeIcon}
-                  .message=${this.noticeMessage}
-                >
-                </randstad-notice>
+                  <randstad-notice
+                    .open=${!0}
+                    .type=${this.noticeType}
+                    .icon=${this.noticeIcon}
+                    .message=${this.noticeMessage}
+                  >
+                  </randstad-notice>
                 `:i}
           </div>
 
@@ -1420,7 +1505,7 @@ function z(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
           </div>
         </div>
       </div>
-    `}};a([A({type:Boolean,reflect:!0}),s("design:type",Object)],it.prototype,"open",void 0),a([A({type:String}),s("design:type",Object)],it.prototype,"title",void 0),a([A({type:String}),s("design:type",String)],it.prototype,"subtitle",void 0),a([A({type:Boolean}),s("design:type",Object)],it.prototype,"showNotice",void 0),a([A({type:String}),s("design:type",String)],it.prototype,"noticeType",void 0),a([A({type:String}),s("design:type",Object)],it.prototype,"noticeMessage",void 0),a([A({type:String}),s("design:type",Object)],it.prototype,"noticeIcon",void 0),a([A({type:Boolean}),s("design:type",Object)],it.prototype,"showPrimaryButton",void 0),a([A({type:String}),s("design:type",Object)],it.prototype,"primaryButtonLabel",void 0),a([A({type:Boolean}),s("design:type",Object)],it.prototype,"showSecondaryButton",void 0),a([A({type:String}),s("design:type",Object)],it.prototype,"secondaryButtonLabel",void 0),a([A({type:Boolean}),s("design:type",Object)],it.prototype,"isFooterCustom",void 0),a([A({type:Boolean}),s("design:type",Object)],it.prototype,"isPrimaryLoader",void 0),a([A({type:Boolean}),s("design:type",Object)],it.prototype,"isPrimaryDisabled",void 0),a([A({type:String}),s("design:type",Object)],it.prototype,"modalWidth",void 0),a([T(),s("design:type",Object)],it.prototype,"scrollable",void 0),it=a([d("custom-modal")],it);let ot=class extends t{constructor(){super(...arguments),this.open=!1,this.type="default",this.icon="warning",this.title="Título del Popup",this.description="Descripción del popup",this.width="400px",this.buttonText="Aceptar",this.confirmText="Sí",this.cancelText="No",this.stackedActions=[],this._onBackgroundClick=t=>{const e=t.composedPath(),i=this.renderRoot.querySelector(".popup");i&&!e.includes(i)&&(this.dispatchEvent(new CustomEvent("popup-close",{detail:null})),this.open=!1)}}static{this.styles=o`
+    `}};n([_({type:Boolean,reflect:!0}),a("design:type",Object)],Vt.prototype,"open",void 0),n([_({type:String}),a("design:type",Object)],Vt.prototype,"title",void 0),n([_({type:String}),a("design:type",String)],Vt.prototype,"subtitle",void 0),n([_({type:Boolean}),a("design:type",Object)],Vt.prototype,"showNotice",void 0),n([_({type:String}),a("design:type",String)],Vt.prototype,"noticeType",void 0),n([_({type:String}),a("design:type",Object)],Vt.prototype,"noticeMessage",void 0),n([_({type:String}),a("design:type",Object)],Vt.prototype,"noticeIcon",void 0),n([_({type:Boolean}),a("design:type",Object)],Vt.prototype,"showPrimaryButton",void 0),n([_({type:String}),a("design:type",Object)],Vt.prototype,"primaryButtonLabel",void 0),n([_({type:Boolean}),a("design:type",Object)],Vt.prototype,"showSecondaryButton",void 0),n([_({type:String}),a("design:type",Object)],Vt.prototype,"secondaryButtonLabel",void 0),n([_({type:Boolean}),a("design:type",Object)],Vt.prototype,"isFooterCustom",void 0),n([_({type:Boolean}),a("design:type",Object)],Vt.prototype,"isPrimaryLoader",void 0),n([_({type:Boolean}),a("design:type",Object)],Vt.prototype,"isPrimaryDisabled",void 0),n([_({type:String}),a("design:type",Object)],Vt.prototype,"modalWidth",void 0),n([T(),a("design:type",Object)],Vt.prototype,"scrollable",void 0),Vt=n([l("custom-modal")],Vt);let Ut=class extends t{constructor(){super(...arguments),this.open=!1,this.type="default",this.icon="warning",this.title="Título del Popup",this.description="Descripción del popup",this.width="400px",this.buttonText="Aceptar",this.confirmText="Sí",this.cancelText="No",this.stackedActions=[],this._onBackgroundClick=t=>{const e=t.composedPath(),i=this.renderRoot.querySelector(".popup");i&&!e.includes(i)&&(this.dispatchEvent(new CustomEvent("popup-close",{detail:null})),this.open=!1)}}static{this.styles=r`
     :host {
       display: none;
       position: fixed;
@@ -1482,13 +1567,13 @@ function z(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
     }
 
     .popup-title {
-      ${V}
+      ${R}
       margin: 0;
       color: var(--secondary-color-80);
     }
 
     .popup-description {
-      ${B}
+      ${I}
       margin: 0;
       color: var(--secondary-color-60);
     }
@@ -1516,7 +1601,7 @@ function z(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
     }
 
     .action-item {
-      ${R};
+      ${B};
       display: flex;
       align-items: center;
       gap: 16px;
@@ -1578,8 +1663,9 @@ function z(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
                           <randstad-icon
                             name=${t.icon}
                             size="24px"
-                            style="--icon-color: var(--primary-color);"
-                          ></randstad-icon>
+                            .color=${"var( --primary-color )"}
+                          >
+                          </randstad-icon>
                         </div>
                         <span>${t.label}</span>
                       </div>
@@ -1611,7 +1697,7 @@ function z(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
               `}
         </div>
       </div>
-    `}};a([A({type:Boolean,reflect:!0}),s("design:type",Object)],ot.prototype,"open",void 0),a([A({type:String}),s("design:type",String)],ot.prototype,"type",void 0),a([A({type:String}),s("design:type",Object)],ot.prototype,"icon",void 0),a([A({type:String}),s("design:type",Object)],ot.prototype,"title",void 0),a([A({type:String}),s("design:type",Object)],ot.prototype,"description",void 0),a([A({type:String}),s("design:type",Object)],ot.prototype,"width",void 0),a([A({type:String}),s("design:type",Object)],ot.prototype,"buttonText",void 0),a([A({type:String}),s("design:type",Object)],ot.prototype,"confirmText",void 0),a([A({type:String}),s("design:type",Object)],ot.prototype,"cancelText",void 0),a([A({type:Array}),s("design:type",Array)],ot.prototype,"stackedActions",void 0),ot=a([d("custom-popup")],ot);let rt=class extends t{constructor(){super(...arguments),this.value=0,this.max=5}static{this.styles=o`
+    `}};n([_({type:Boolean,reflect:!0}),a("design:type",Object)],Ut.prototype,"open",void 0),n([_({type:String}),a("design:type",String)],Ut.prototype,"type",void 0),n([_({type:String}),a("design:type",Object)],Ut.prototype,"icon",void 0),n([_({type:String}),a("design:type",Object)],Ut.prototype,"title",void 0),n([_({type:String}),a("design:type",Object)],Ut.prototype,"description",void 0),n([_({type:String}),a("design:type",Object)],Ut.prototype,"width",void 0),n([_({type:String}),a("design:type",Object)],Ut.prototype,"buttonText",void 0),n([_({type:String}),a("design:type",Object)],Ut.prototype,"confirmText",void 0),n([_({type:String}),a("design:type",Object)],Ut.prototype,"cancelText",void 0),n([_({type:Array}),a("design:type",Array)],Ut.prototype,"stackedActions",void 0),Ut=n([l("custom-popup")],Ut);let Ht=class extends t{constructor(){super(...arguments),this.value=0,this.max=5}static{this.styles=r`
     :host {
       display: inline-block;
       width: 64px;
@@ -1624,7 +1710,7 @@ function z(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
     }
 
     .circle-text {
-      ${I};
+      ${L};
       text-align: center;
       vertical-align: middle;
       fill: var(--randstad-dark-blue-40);
@@ -1640,7 +1726,7 @@ function z(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
       stroke: var(--primary-light-blue);
       stroke-linecap: round;
     }
-  `}render(){const t=2*Math.PI*28,i=Math.max(this.max,1),o=t*(1-Math.min(this.value/i,1));return e`
+  `}render(){const t=2*Math.PI*28,i=Math.max(this.max,1),r=t*(1-Math.min(this.value/i,1));return e`
       <svg
         viewBox="0 0 64 64"
         role="img"
@@ -1664,7 +1750,7 @@ function z(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
           stroke-width="${6}"
           fill="none"
           stroke-dasharray="${t}"
-          stroke-dashoffset="${o}"
+          stroke-dashoffset="${r}"
           transform="rotate(-90 32 32)"
         />
         <!-- Texto -->
@@ -1672,18 +1758,18 @@ function z(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
           ${this.value} de ${this.max}
         </text>
       </svg>
-    `}};a([A({type:Number}),s("design:type",Object)],rt.prototype,"value",void 0),a([A({type:Number}),s("design:type",Object)],rt.prototype,"max",void 0),rt=a([d("progress-circle")],rt);
+    `}};n([_({type:Number}),a("design:type",Object)],Ht.prototype,"value",void 0),n([_({type:Number}),a("design:type",Object)],Ht.prototype,"max",void 0),Ht=n([l("progress-circle")],Ht);
 /**
  * @license
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-const nt=Symbol("attachableController");let at;r||(at=new MutationObserver((t=>{for(const e of t)e.target[nt]?.hostConnected()})));class st{get htmlFor(){return this.host.getAttribute("for")}set htmlFor(t){null===t?this.host.removeAttribute("for"):this.host.setAttribute("for",t)}get control(){return this.host.hasAttribute("for")?this.htmlFor&&this.host.isConnected?this.host.getRootNode().querySelector(`#${this.htmlFor}`):null:this.currentControl||this.host.parentElement}set control(t){t?this.attach(t):this.detach()}constructor(t,e){this.host=t,this.onControlChange=e,this.currentControl=null,t.addController(this),t[nt]=this,at?.observe(t,{attributeFilter:["for"]})}attach(t){t!==this.currentControl&&(this.setCurrentControl(t),this.host.removeAttribute("for"))}detach(){this.setCurrentControl(null),this.host.setAttribute("for","")}hostConnected(){this.setCurrentControl(this.control)}hostDisconnected(){this.setCurrentControl(null)}setCurrentControl(t){this.onControlChange(this.currentControl,t),this.currentControl=t}}
+const qt=Symbol("attachableController");let Wt;o||(Wt=new MutationObserver((t=>{for(const e of t)e.target[qt]?.hostConnected()})));class Yt{get htmlFor(){return this.host.getAttribute("for")}set htmlFor(t){null===t?this.host.removeAttribute("for"):this.host.setAttribute("for",t)}get control(){return this.host.hasAttribute("for")?this.htmlFor&&this.host.isConnected?this.host.getRootNode().querySelector(`#${this.htmlFor}`):null:this.currentControl||this.host.parentElement}set control(t){t?this.attach(t):this.detach()}constructor(t,e){this.host=t,this.onControlChange=e,this.currentControl=null,t.addController(this),t[qt]=this,Wt?.observe(t,{attributeFilter:["for"]})}attach(t){t!==this.currentControl&&(this.setCurrentControl(t),this.host.removeAttribute("for"))}detach(){this.setCurrentControl(null),this.host.setAttribute("for","")}hostConnected(){this.setCurrentControl(this.control)}hostDisconnected(){this.setCurrentControl(null)}setCurrentControl(t){this.onControlChange(this.currentControl,t),this.currentControl=t}}
 /**
  * @license
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
- */const dt=["focusin","focusout","pointerdown"];class lt extends t{constructor(){super(...arguments),this.visible=!1,this.inward=!1,this.attachableController=new st(this,this.onControlChange.bind(this))}get htmlFor(){return this.attachableController.htmlFor}set htmlFor(t){this.attachableController.htmlFor=t}get control(){return this.attachableController.control}set control(t){this.attachableController.control=t}attach(t){this.attachableController.attach(t)}detach(){this.attachableController.detach()}connectedCallback(){super.connectedCallback(),this.setAttribute("aria-hidden","true")}handleEvent(t){if(!t[ct]){switch(t.type){default:return;case"focusin":this.visible=this.control?.matches(":focus-visible")??!1;break;case"focusout":case"pointerdown":this.visible=!1}t[ct]=!0}}onControlChange(t,e){if(!r)for(const i of dt)t?.removeEventListener(i,this),e?.addEventListener(i,this)}update(t){t.has("visible")&&this.dispatchEvent(new Event("visibility-changed")),super.update(t)}}a([A({type:Boolean,reflect:!0})],lt.prototype,"visible",void 0),a([A({type:Boolean,reflect:!0})],lt.prototype,"inward",void 0);const ct=Symbol("handledByFocusRing"),pt=o`:host{animation-delay:0s,calc(var(--md-focus-ring-duration, 600ms)*.25);animation-duration:calc(var(--md-focus-ring-duration, 600ms)*.25),calc(var(--md-focus-ring-duration, 600ms)*.75);animation-timing-function:cubic-bezier(0.2, 0, 0, 1);box-sizing:border-box;color:var(--md-focus-ring-color, var(--md-sys-color-secondary, #625b71));display:none;pointer-events:none;position:absolute}:host([visible]){display:flex}:host(:not([inward])){animation-name:outward-grow,outward-shrink;border-end-end-radius:calc(var(--md-focus-ring-shape-end-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) + var(--md-focus-ring-outward-offset, 2px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) + var(--md-focus-ring-outward-offset, 2px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) + var(--md-focus-ring-outward-offset, 2px));border-start-start-radius:calc(var(--md-focus-ring-shape-start-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) + var(--md-focus-ring-outward-offset, 2px));inset:calc(-1*var(--md-focus-ring-outward-offset, 2px));outline:var(--md-focus-ring-width, 3px) solid currentColor}:host([inward]){animation-name:inward-grow,inward-shrink;border-end-end-radius:calc(var(--md-focus-ring-shape-end-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(--md-focus-ring-inward-offset, 0px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(--md-focus-ring-inward-offset, 0px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(--md-focus-ring-inward-offset, 0px));border-start-start-radius:calc(var(--md-focus-ring-shape-start-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(--md-focus-ring-inward-offset, 0px));border:var(--md-focus-ring-width, 3px) solid currentColor;inset:var(--md-focus-ring-inward-offset, 0px)}@keyframes outward-grow{from{outline-width:0}to{outline-width:var(--md-focus-ring-active-width, 8px)}}@keyframes outward-shrink{from{outline-width:var(--md-focus-ring-active-width, 8px)}}@keyframes inward-grow{from{border-width:0}to{border-width:var(--md-focus-ring-active-width, 8px)}}@keyframes inward-shrink{from{border-width:var(--md-focus-ring-active-width, 8px)}}@media(prefers-reduced-motion){:host{animation:none}}
+ */const Gt=["focusin","focusout","pointerdown"];class Xt extends t{constructor(){super(...arguments),this.visible=!1,this.inward=!1,this.attachableController=new Yt(this,this.onControlChange.bind(this))}get htmlFor(){return this.attachableController.htmlFor}set htmlFor(t){this.attachableController.htmlFor=t}get control(){return this.attachableController.control}set control(t){this.attachableController.control=t}attach(t){this.attachableController.attach(t)}detach(){this.attachableController.detach()}connectedCallback(){super.connectedCallback(),this.setAttribute("aria-hidden","true")}handleEvent(t){if(!t[Kt]){switch(t.type){default:return;case"focusin":this.visible=this.control?.matches(":focus-visible")??!1;break;case"focusout":case"pointerdown":this.visible=!1}t[Kt]=!0}}onControlChange(t,e){if(!o)for(const i of Gt)t?.removeEventListener(i,this),e?.addEventListener(i,this)}update(t){t.has("visible")&&this.dispatchEvent(new Event("visibility-changed")),super.update(t)}}n([_({type:Boolean,reflect:!0})],Xt.prototype,"visible",void 0),n([_({type:Boolean,reflect:!0})],Xt.prototype,"inward",void 0);const Kt=Symbol("handledByFocusRing"),Qt=r`:host{animation-delay:0s,calc(var(--md-focus-ring-duration, 600ms)*.25);animation-duration:calc(var(--md-focus-ring-duration, 600ms)*.25),calc(var(--md-focus-ring-duration, 600ms)*.75);animation-timing-function:cubic-bezier(0.2, 0, 0, 1);box-sizing:border-box;color:var(--md-focus-ring-color, var(--md-sys-color-secondary, #625b71));display:none;pointer-events:none;position:absolute}:host([visible]){display:flex}:host(:not([inward])){animation-name:outward-grow,outward-shrink;border-end-end-radius:calc(var(--md-focus-ring-shape-end-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) + var(--md-focus-ring-outward-offset, 2px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) + var(--md-focus-ring-outward-offset, 2px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) + var(--md-focus-ring-outward-offset, 2px));border-start-start-radius:calc(var(--md-focus-ring-shape-start-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) + var(--md-focus-ring-outward-offset, 2px));inset:calc(-1*var(--md-focus-ring-outward-offset, 2px));outline:var(--md-focus-ring-width, 3px) solid currentColor}:host([inward]){animation-name:inward-grow,inward-shrink;border-end-end-radius:calc(var(--md-focus-ring-shape-end-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(--md-focus-ring-inward-offset, 0px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(--md-focus-ring-inward-offset, 0px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(--md-focus-ring-inward-offset, 0px));border-start-start-radius:calc(var(--md-focus-ring-shape-start-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(--md-focus-ring-inward-offset, 0px));border:var(--md-focus-ring-width, 3px) solid currentColor;inset:var(--md-focus-ring-inward-offset, 0px)}@keyframes outward-grow{from{outline-width:0}to{outline-width:var(--md-focus-ring-active-width, 8px)}}@keyframes outward-shrink{from{outline-width:var(--md-focus-ring-active-width, 8px)}}@keyframes inward-grow{from{border-width:0}to{border-width:var(--md-focus-ring-active-width, 8px)}}@keyframes inward-shrink{from{border-width:var(--md-focus-ring-active-width, 8px)}}@media(prefers-reduced-motion){:host{animation:none}}
 `
 /**
  * @license
@@ -1694,81 +1780,81 @@ const nt=Symbol("attachableController");let at;r||(at=new MutationObserver((t=>{
  * @license
  * Copyright 2024 Google LLC
  * SPDX-License-Identifier: Apache-2.0
- */let ht=class extends lt{};ht.styles=[pt],ht=a([d("md-focus-ring")],ht);
+ */let Jt=class extends Xt{};Jt.styles=[Qt],Jt=n([l("md-focus-ring")],Jt);
 /**
  * @license
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-const ut="cubic-bezier(0.2, 0, 0, 1)";
+const Zt="cubic-bezier(0.2, 0, 0, 1)";
 /**
  * @license
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
- */var bt;!function(t){t[t.INACTIVE=0]="INACTIVE",t[t.TOUCH_DELAY=1]="TOUCH_DELAY",t[t.HOLDING=2]="HOLDING",t[t.WAITING_FOR_CLICK=3]="WAITING_FOR_CLICK"}(bt||(bt={}));const mt=["click","contextmenu","pointercancel","pointerdown","pointerenter","pointerleave","pointerup"],gt=r?null:window.matchMedia("(forced-colors: active)");class yt extends t{constructor(){super(...arguments),this.disabled=!1,this.hovered=!1,this.pressed=!1,this.rippleSize="",this.rippleScale="",this.initialSize=0,this.state=bt.INACTIVE,this.checkBoundsAfterContextMenu=!1,this.attachableController=new st(this,this.onControlChange.bind(this))}get htmlFor(){return this.attachableController.htmlFor}set htmlFor(t){this.attachableController.htmlFor=t}get control(){return this.attachableController.control}set control(t){this.attachableController.control=t}attach(t){this.attachableController.attach(t)}detach(){this.attachableController.detach()}connectedCallback(){super.connectedCallback(),this.setAttribute("aria-hidden","true")}render(){const t={hovered:this.hovered,pressed:this.pressed};return e`<div class="surface ${n(t)}"></div>`}update(t){t.has("disabled")&&this.disabled&&(this.hovered=!1,this.pressed=!1),super.update(t)}handlePointerenter(t){this.shouldReactToEvent(t)&&(this.hovered=!0)}handlePointerleave(t){this.shouldReactToEvent(t)&&(this.hovered=!1,this.state!==bt.INACTIVE&&this.endPressAnimation())}handlePointerup(t){if(this.shouldReactToEvent(t)){if(this.state!==bt.HOLDING)return this.state===bt.TOUCH_DELAY?(this.state=bt.WAITING_FOR_CLICK,void this.startPressAnimation(this.rippleStartEvent)):void 0;this.state=bt.WAITING_FOR_CLICK}}async handlePointerdown(t){if(this.shouldReactToEvent(t)){if(this.rippleStartEvent=t,!this.isTouch(t))return this.state=bt.WAITING_FOR_CLICK,void this.startPressAnimation(t);this.checkBoundsAfterContextMenu&&!this.inBounds(t)||(this.checkBoundsAfterContextMenu=!1,this.state=bt.TOUCH_DELAY,await new Promise((t=>{setTimeout(t,150)})),this.state===bt.TOUCH_DELAY&&(this.state=bt.HOLDING,this.startPressAnimation(t)))}}handleClick(){this.disabled||(this.state!==bt.WAITING_FOR_CLICK?this.state===bt.INACTIVE&&(this.startPressAnimation(),this.endPressAnimation()):this.endPressAnimation())}handlePointercancel(t){this.shouldReactToEvent(t)&&this.endPressAnimation()}handleContextmenu(){this.disabled||(this.checkBoundsAfterContextMenu=!0,this.endPressAnimation())}determineRippleSize(){const{height:t,width:e}=this.getBoundingClientRect(),i=Math.max(t,e),o=Math.max(.35*i,75),r=Math.floor(.2*i),n=Math.sqrt(e**2+t**2)+10;this.initialSize=r,this.rippleScale=""+(n+o)/r,this.rippleSize=`${r}px`}getNormalizedPointerEventCoords(t){const{scrollX:e,scrollY:i}=window,{left:o,top:r}=this.getBoundingClientRect(),n=e+o,a=i+r,{pageX:s,pageY:d}=t;return{x:s-n,y:d-a}}getTranslationCoordinates(t){const{height:e,width:i}=this.getBoundingClientRect(),o={x:(i-this.initialSize)/2,y:(e-this.initialSize)/2};let r;return r=t instanceof PointerEvent?this.getNormalizedPointerEventCoords(t):{x:i/2,y:e/2},r={x:r.x-this.initialSize/2,y:r.y-this.initialSize/2},{startPoint:r,endPoint:o}}startPressAnimation(t){if(!this.mdRoot)return;this.pressed=!0,this.growAnimation?.cancel(),this.determineRippleSize();const{startPoint:e,endPoint:i}=this.getTranslationCoordinates(t),o=`${e.x}px, ${e.y}px`,r=`${i.x}px, ${i.y}px`;this.growAnimation=this.mdRoot.animate({top:[0,0],left:[0,0],height:[this.rippleSize,this.rippleSize],width:[this.rippleSize,this.rippleSize],transform:[`translate(${o}) scale(1)`,`translate(${r}) scale(${this.rippleScale})`]},{pseudoElement:"::after",duration:450,easing:ut,fill:"forwards"})}async endPressAnimation(){this.rippleStartEvent=void 0,this.state=bt.INACTIVE;const t=this.growAnimation;let e=1/0;"number"==typeof t?.currentTime?e=t.currentTime:t?.currentTime&&(e=t.currentTime.to("ms").value),e>=225?this.pressed=!1:(await new Promise((t=>{setTimeout(t,225-e)})),this.growAnimation===t&&(this.pressed=!1))}shouldReactToEvent(t){if(this.disabled||!t.isPrimary)return!1;if(this.rippleStartEvent&&this.rippleStartEvent.pointerId!==t.pointerId)return!1;if("pointerenter"===t.type||"pointerleave"===t.type)return!this.isTouch(t);const e=1===t.buttons;return this.isTouch(t)||e}inBounds({x:t,y:e}){const{top:i,left:o,bottom:r,right:n}=this.getBoundingClientRect();return t>=o&&t<=n&&e>=i&&e<=r}isTouch({pointerType:t}){return"touch"===t}async handleEvent(t){if(!gt?.matches)switch(t.type){case"click":this.handleClick();break;case"contextmenu":this.handleContextmenu();break;case"pointercancel":this.handlePointercancel(t);break;case"pointerdown":await this.handlePointerdown(t);break;case"pointerenter":this.handlePointerenter(t);break;case"pointerleave":this.handlePointerleave(t);break;case"pointerup":this.handlePointerup(t)}}onControlChange(t,e){if(!r)for(const i of mt)t?.removeEventListener(i,this),e?.addEventListener(i,this)}}a([A({type:Boolean,reflect:!0})],yt.prototype,"disabled",void 0),a([T()],yt.prototype,"hovered",void 0),a([T()],yt.prototype,"pressed",void 0),a([z(".surface")],yt.prototype,"mdRoot",void 0);
+ */var te;!function(t){t[t.INACTIVE=0]="INACTIVE",t[t.TOUCH_DELAY=1]="TOUCH_DELAY",t[t.HOLDING=2]="HOLDING",t[t.WAITING_FOR_CLICK=3]="WAITING_FOR_CLICK"}(te||(te={}));const ee=["click","contextmenu","pointercancel","pointerdown","pointerenter","pointerleave","pointerup"],ie=o?null:window.matchMedia("(forced-colors: active)");class re extends t{constructor(){super(...arguments),this.disabled=!1,this.hovered=!1,this.pressed=!1,this.rippleSize="",this.rippleScale="",this.initialSize=0,this.state=te.INACTIVE,this.checkBoundsAfterContextMenu=!1,this.attachableController=new Yt(this,this.onControlChange.bind(this))}get htmlFor(){return this.attachableController.htmlFor}set htmlFor(t){this.attachableController.htmlFor=t}get control(){return this.attachableController.control}set control(t){this.attachableController.control=t}attach(t){this.attachableController.attach(t)}detach(){this.attachableController.detach()}connectedCallback(){super.connectedCallback(),this.setAttribute("aria-hidden","true")}render(){const t={hovered:this.hovered,pressed:this.pressed};return e`<div class="surface ${s(t)}"></div>`}update(t){t.has("disabled")&&this.disabled&&(this.hovered=!1,this.pressed=!1),super.update(t)}handlePointerenter(t){this.shouldReactToEvent(t)&&(this.hovered=!0)}handlePointerleave(t){this.shouldReactToEvent(t)&&(this.hovered=!1,this.state!==te.INACTIVE&&this.endPressAnimation())}handlePointerup(t){if(this.shouldReactToEvent(t)){if(this.state!==te.HOLDING)return this.state===te.TOUCH_DELAY?(this.state=te.WAITING_FOR_CLICK,void this.startPressAnimation(this.rippleStartEvent)):void 0;this.state=te.WAITING_FOR_CLICK}}async handlePointerdown(t){if(this.shouldReactToEvent(t)){if(this.rippleStartEvent=t,!this.isTouch(t))return this.state=te.WAITING_FOR_CLICK,void this.startPressAnimation(t);this.checkBoundsAfterContextMenu&&!this.inBounds(t)||(this.checkBoundsAfterContextMenu=!1,this.state=te.TOUCH_DELAY,await new Promise((t=>{setTimeout(t,150)})),this.state===te.TOUCH_DELAY&&(this.state=te.HOLDING,this.startPressAnimation(t)))}}handleClick(){this.disabled||(this.state!==te.WAITING_FOR_CLICK?this.state===te.INACTIVE&&(this.startPressAnimation(),this.endPressAnimation()):this.endPressAnimation())}handlePointercancel(t){this.shouldReactToEvent(t)&&this.endPressAnimation()}handleContextmenu(){this.disabled||(this.checkBoundsAfterContextMenu=!0,this.endPressAnimation())}determineRippleSize(){const{height:t,width:e}=this.getBoundingClientRect(),i=Math.max(t,e),r=Math.max(.35*i,75),o=Math.floor(.2*i),s=Math.sqrt(e**2+t**2)+10;this.initialSize=o,this.rippleScale=""+(s+r)/o,this.rippleSize=`${o}px`}getNormalizedPointerEventCoords(t){const{scrollX:e,scrollY:i}=window,{left:r,top:o}=this.getBoundingClientRect(),s=e+r,n=i+o,{pageX:a,pageY:l}=t;return{x:a-s,y:l-n}}getTranslationCoordinates(t){const{height:e,width:i}=this.getBoundingClientRect(),r={x:(i-this.initialSize)/2,y:(e-this.initialSize)/2};let o;return o=t instanceof PointerEvent?this.getNormalizedPointerEventCoords(t):{x:i/2,y:e/2},o={x:o.x-this.initialSize/2,y:o.y-this.initialSize/2},{startPoint:o,endPoint:r}}startPressAnimation(t){if(!this.mdRoot)return;this.pressed=!0,this.growAnimation?.cancel(),this.determineRippleSize();const{startPoint:e,endPoint:i}=this.getTranslationCoordinates(t),r=`${e.x}px, ${e.y}px`,o=`${i.x}px, ${i.y}px`;this.growAnimation=this.mdRoot.animate({top:[0,0],left:[0,0],height:[this.rippleSize,this.rippleSize],width:[this.rippleSize,this.rippleSize],transform:[`translate(${r}) scale(1)`,`translate(${o}) scale(${this.rippleScale})`]},{pseudoElement:"::after",duration:450,easing:Zt,fill:"forwards"})}async endPressAnimation(){this.rippleStartEvent=void 0,this.state=te.INACTIVE;const t=this.growAnimation;let e=1/0;"number"==typeof t?.currentTime?e=t.currentTime:t?.currentTime&&(e=t.currentTime.to("ms").value),e>=225?this.pressed=!1:(await new Promise((t=>{setTimeout(t,225-e)})),this.growAnimation===t&&(this.pressed=!1))}shouldReactToEvent(t){if(this.disabled||!t.isPrimary)return!1;if(this.rippleStartEvent&&this.rippleStartEvent.pointerId!==t.pointerId)return!1;if("pointerenter"===t.type||"pointerleave"===t.type)return!this.isTouch(t);const e=1===t.buttons;return this.isTouch(t)||e}inBounds({x:t,y:e}){const{top:i,left:r,bottom:o,right:s}=this.getBoundingClientRect();return t>=r&&t<=s&&e>=i&&e<=o}isTouch({pointerType:t}){return"touch"===t}async handleEvent(t){if(!ie?.matches)switch(t.type){case"click":this.handleClick();break;case"contextmenu":this.handleContextmenu();break;case"pointercancel":this.handlePointercancel(t);break;case"pointerdown":await this.handlePointerdown(t);break;case"pointerenter":this.handlePointerenter(t);break;case"pointerleave":this.handlePointerleave(t);break;case"pointerup":this.handlePointerup(t)}}onControlChange(t,e){if(!o)for(const i of ee)t?.removeEventListener(i,this),e?.addEventListener(i,this)}}n([_({type:Boolean,reflect:!0})],re.prototype,"disabled",void 0),n([T()],re.prototype,"hovered",void 0),n([T()],re.prototype,"pressed",void 0),n([j(".surface")],re.prototype,"mdRoot",void 0);
 /**
  * @license
  * Copyright 2024 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-const ft=o`:host{display:flex;margin:auto;pointer-events:none}:host([disabled]){display:none}@media(forced-colors: active){:host{display:none}}:host,.surface{border-radius:inherit;position:absolute;inset:0;overflow:hidden}.surface{-webkit-tap-highlight-color:rgba(0,0,0,0)}.surface::before,.surface::after{content:"";opacity:0;position:absolute}.surface::before{background-color:var(--md-ripple-hover-color, var(--md-sys-color-on-surface, #1d1b20));inset:0;transition:opacity 15ms linear,background-color 15ms linear}.surface::after{background:radial-gradient(closest-side, var(--md-ripple-pressed-color, var(--md-sys-color-on-surface, #1d1b20)) max(100% - 70px, 65%), transparent 100%);transform-origin:center center;transition:opacity 375ms linear}.hovered::before{background-color:var(--md-ripple-hover-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-ripple-hover-opacity, 0.08)}.pressed::after{opacity:var(--md-ripple-pressed-opacity, 0.12);transition-duration:105ms}
+const oe=r`:host{display:flex;margin:auto;pointer-events:none}:host([disabled]){display:none}@media(forced-colors: active){:host{display:none}}:host,.surface{border-radius:inherit;position:absolute;inset:0;overflow:hidden}.surface{-webkit-tap-highlight-color:rgba(0,0,0,0)}.surface::before,.surface::after{content:"";opacity:0;position:absolute}.surface::before{background-color:var(--md-ripple-hover-color, var(--md-sys-color-on-surface, #1d1b20));inset:0;transition:opacity 15ms linear,background-color 15ms linear}.surface::after{background:radial-gradient(closest-side, var(--md-ripple-pressed-color, var(--md-sys-color-on-surface, #1d1b20)) max(100% - 70px, 65%), transparent 100%);transform-origin:center center;transition:opacity 375ms linear}.hovered::before{background-color:var(--md-ripple-hover-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-ripple-hover-opacity, 0.08)}.pressed::after{opacity:var(--md-ripple-pressed-opacity, 0.12);transition-duration:105ms}
 `
 /**
  * @license
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
- */;let vt=class extends yt{};
+ */;let se=class extends re{};
 /**
  * @license
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-function xt(t){return t.currentTarget===t.target&&(t.composedPath()[0]===t.target&&(!t.target.disabled&&!function(t){const e=wt;e&&(t.preventDefault(),t.stopImmediatePropagation());return async function(){wt=!0,await null,wt=!1}
+function ne(t){return t.currentTarget===t.target&&(t.composedPath()[0]===t.target&&(!t.target.disabled&&!function(t){const e=ae;e&&(t.preventDefault(),t.stopImmediatePropagation());return async function(){ae=!0,await null,ae=!1}
 /**
  * @license
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
- */(),e}(t)))}vt.styles=[ft],vt=a([d("md-ripple")],vt);let wt=!1;const kt=Symbol("internals"),$t=Symbol("privateInternals");
+ */(),e}(t)))}se.styles=[oe],se=n([l("md-ripple")],se);let ae=!1;const le=Symbol("internals"),de=Symbol("privateInternals");
 /**
  * @license
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-const St=Symbol("createValidator"),Ct=Symbol("getValidityAnchor"),Et=Symbol("privateValidator"),Dt=Symbol("privateSyncValidity"),Ot=Symbol("privateCustomValidationMessage");
+const ce=Symbol("createValidator"),he=Symbol("getValidityAnchor"),pe=Symbol("privateValidator"),ue=Symbol("privateSyncValidity"),be=Symbol("privateCustomValidationMessage");
 /**
  * @license
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-const Mt=Symbol("isFocusable"),Ft=Symbol("privateIsFocusable"),Pt=Symbol("externalTabIndex"),jt=Symbol("isUpdatingTabIndex"),At=Symbol("updateTabIndex");
+const ge=Symbol("isFocusable"),me=Symbol("privateIsFocusable"),ye=Symbol("externalTabIndex"),ve=Symbol("isUpdatingTabIndex"),fe=Symbol("updateTabIndex");
 /**
  * @license
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-const Tt=Symbol("getFormValue"),zt=Symbol("getFormState");
+const xe=Symbol("getFormValue"),we=Symbol("getFormState");
 /**
  * @license
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-class Lt{constructor(t){this.getCurrentState=t,this.currentValidity={validity:{},validationMessage:""}}getValidity(){const t=this.getCurrentState();if(!(!this.prevState||!this.equals(this.prevState,t)))return this.currentValidity;const{validity:e,validationMessage:i}=this.computeValidity(t);return this.prevState=this.copy(t),this.currentValidity={validationMessage:i,validity:{badInput:e.badInput,customError:e.customError,patternMismatch:e.patternMismatch,rangeOverflow:e.rangeOverflow,rangeUnderflow:e.rangeUnderflow,stepMismatch:e.stepMismatch,tooLong:e.tooLong,tooShort:e.tooShort,typeMismatch:e.typeMismatch,valueMissing:e.valueMissing}},this.currentValidity}}
+class ke{constructor(t){this.getCurrentState=t,this.currentValidity={validity:{},validationMessage:""}}getValidity(){const t=this.getCurrentState();if(!(!this.prevState||!this.equals(this.prevState,t)))return this.currentValidity;const{validity:e,validationMessage:i}=this.computeValidity(t);return this.prevState=this.copy(t),this.currentValidity={validationMessage:i,validity:{badInput:e.badInput,customError:e.customError,patternMismatch:e.patternMismatch,rangeOverflow:e.rangeOverflow,rangeUnderflow:e.rangeUnderflow,stepMismatch:e.stepMismatch,tooLong:e.tooLong,tooShort:e.tooShort,typeMismatch:e.typeMismatch,valueMissing:e.valueMissing}},this.currentValidity}}
 /**
  * @license
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
- */class It extends Lt{computeValidity(t){this.radioElement||(this.radioElement=document.createElement("input"),this.radioElement.type="radio",this.radioElement.name="group");let e=!1,i=!1;for(const{checked:o,required:r}of t)r&&(e=!0),o&&(i=!0);return this.radioElement.checked=i,this.radioElement.required=e,{validity:{valueMissing:e&&!i},validationMessage:this.radioElement.validationMessage}}equals(t,e){if(t.length!==e.length)return!1;for(let i=0;i<t.length;i++){const o=t[i],r=e[i];if(o.checked!==r.checked||o.required!==r.required)return!1}return!0}copy(t){return t.map((({checked:t,required:e})=>({checked:t,required:e})))}}
+ */class $e extends ke{computeValidity(t){this.radioElement||(this.radioElement=document.createElement("input"),this.radioElement.type="radio",this.radioElement.name="group");let e=!1,i=!1;for(const{checked:r,required:o}of t)o&&(e=!0),r&&(i=!0);return this.radioElement.checked=i,this.radioElement.required=e,{validity:{valueMissing:e&&!i},validationMessage:this.radioElement.validationMessage}}equals(t,e){if(t.length!==e.length)return!1;for(let i=0;i<t.length;i++){const r=t[i],o=e[i];if(r.checked!==o.checked||r.required!==o.required)return!1}return!0}copy(t){return t.map((({checked:t,required:e})=>({checked:t,required:e})))}}
 /**
  * @license
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
- */class _t{get controls(){const t=this.host.getAttribute("name");return t&&this.root&&this.host.isConnected?Array.from(this.root.querySelectorAll(`[name="${t}"]`)):[this.host]}constructor(t){this.host=t,this.focused=!1,this.root=null,this.handleFocusIn=()=>{this.focused=!0,this.updateTabIndices()},this.handleFocusOut=()=>{this.focused=!1,this.updateTabIndices()},this.handleKeyDown=t=>{const e="ArrowDown"===t.key,i="ArrowUp"===t.key,o="ArrowLeft"===t.key,r="ArrowRight"===t.key;if(!(o||r||e||i))return;const n=this.controls;if(!n.length)return;t.preventDefault();const a="rtl"===getComputedStyle(this.host).direction?o||e:r||e,s=n.indexOf(this.host);let d=a?s+1:s-1;for(;d!==s;){d>=n.length?d=0:d<0&&(d=n.length-1);const t=n[d];if(!t.hasAttribute("disabled")){for(const e of n)e!==t&&(e.checked=!1,e.tabIndex=-1,e.blur());t.checked=!0,t.tabIndex=0,t.focus(),t.dispatchEvent(new Event("change",{bubbles:!0}));break}a?d++:d--}}}hostConnected(){this.root=this.host.getRootNode(),this.host.addEventListener("keydown",this.handleKeyDown),this.host.addEventListener("focusin",this.handleFocusIn),this.host.addEventListener("focusout",this.handleFocusOut),this.host.checked&&this.uncheckSiblings(),this.updateTabIndices()}hostDisconnected(){this.host.removeEventListener("keydown",this.handleKeyDown),this.host.removeEventListener("focusin",this.handleFocusIn),this.host.removeEventListener("focusout",this.handleFocusOut),this.updateTabIndices(),this.root=null}handleCheckedChange(){this.host.checked&&(this.uncheckSiblings(),this.updateTabIndices())}uncheckSiblings(){for(const t of this.controls)t!==this.host&&(t.checked=!1)}updateTabIndices(){const t=this.controls,e=t.find((t=>t.checked));if(e||this.focused){const i=e||this.host;i.tabIndex=0;for(const e of t)e!==i&&(e.tabIndex=-1)}else for(const e of t)e.tabIndex=0}}
+ */class Se{get controls(){const t=this.host.getAttribute("name");return t&&this.root&&this.host.isConnected?Array.from(this.root.querySelectorAll(`[name="${t}"]`)):[this.host]}constructor(t){this.host=t,this.focused=!1,this.root=null,this.handleFocusIn=()=>{this.focused=!0,this.updateTabIndices()},this.handleFocusOut=()=>{this.focused=!1,this.updateTabIndices()},this.handleKeyDown=t=>{const e="ArrowDown"===t.key,i="ArrowUp"===t.key,r="ArrowLeft"===t.key,o="ArrowRight"===t.key;if(!(r||o||e||i))return;const s=this.controls;if(!s.length)return;t.preventDefault();const n="rtl"===getComputedStyle(this.host).direction?r||e:o||e,a=s.indexOf(this.host);let l=n?a+1:a-1;for(;l!==a;){l>=s.length?l=0:l<0&&(l=s.length-1);const t=s[l];if(!t.hasAttribute("disabled")){for(const e of s)e!==t&&(e.checked=!1,e.tabIndex=-1,e.blur());t.checked=!0,t.tabIndex=0,t.focus(),t.dispatchEvent(new Event("change",{bubbles:!0}));break}n?l++:l--}}}hostConnected(){this.root=this.host.getRootNode(),this.host.addEventListener("keydown",this.handleKeyDown),this.host.addEventListener("focusin",this.handleFocusIn),this.host.addEventListener("focusout",this.handleFocusOut),this.host.checked&&this.uncheckSiblings(),this.updateTabIndices()}hostDisconnected(){this.host.removeEventListener("keydown",this.handleKeyDown),this.host.removeEventListener("focusin",this.handleFocusIn),this.host.removeEventListener("focusout",this.handleFocusOut),this.updateTabIndices(),this.root=null}handleCheckedChange(){this.host.checked&&(this.uncheckSiblings(),this.updateTabIndices())}uncheckSiblings(){for(const t of this.controls)t!==this.host&&(t.checked=!1)}updateTabIndices(){const t=this.controls,e=t.find((t=>t.checked));if(e||this.focused){const i=e||this.host;i.tabIndex=0;for(const e of t)e!==i&&(e.tabIndex=-1)}else for(const e of t)e.tabIndex=0}}
 /**
  * @license
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: Apache-2.0
- */var Bt;const Nt=Symbol("checked");let Rt=0;const Vt=function(t){var e;class i extends t{constructor(){super(...arguments),this[e]=""}get validity(){return this[Dt](),this[kt].validity}get validationMessage(){return this[Dt](),this[kt].validationMessage}get willValidate(){return this[Dt](),this[kt].willValidate}checkValidity(){return this[Dt](),this[kt].checkValidity()}reportValidity(){return this[Dt](),this[kt].reportValidity()}setCustomValidity(t){this[Ot]=t,this[Dt]()}requestUpdate(t,e,i){super.requestUpdate(t,e,i),this[Dt]()}firstUpdated(t){super.firstUpdated(t),this[Dt]()}[(e=Ot,Dt)](){if(r)return;this[Et]||(this[Et]=this[St]());const{validity:t,validationMessage:e}=this[Et].getValidity(),i=!!this[Ot],o=this[Ot]||e;this[kt].setValidity({...t,customError:i},o,this[Ct]()??void 0)}[St](){throw new Error("Implement [createValidator]")}[Ct](){throw new Error("Implement [getValidityAnchor]")}}return i}(function(t){class e extends t{get form(){return this[kt].form}get labels(){return this[kt].labels}get name(){return this.getAttribute("name")??""}set name(t){this.setAttribute("name",t)}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",t)}attributeChangedCallback(t,e,i){if("name"!==t&&"disabled"!==t)super.attributeChangedCallback(t,e,i);else{const i="disabled"===t?null!==e:e;this.requestUpdate(t,i)}}requestUpdate(t,e,i){super.requestUpdate(t,e,i),this[kt].setFormValue(this[Tt](),this[zt]())}[Tt](){throw new Error("Implement [getFormValue]")}[zt](){return this[Tt]()}formDisabledCallback(t){this.disabled=t}}return e.formAssociated=!0,a([A({noAccessor:!0})],e.prototype,"name",null),a([A({type:Boolean,noAccessor:!0})],e.prototype,"disabled",null),e}((qt=function(t){var e,i,o;class r extends t{constructor(){super(...arguments),this[e]=!0,this[i]=null,this[o]=!1}get[Mt](){return this[Ft]}set[Mt](t){this[Mt]!==t&&(this[Ft]=t,this[At]())}connectedCallback(){super.connectedCallback(),this[At]()}attributeChangedCallback(t,e,i){if("tabindex"===t){if(this.requestUpdate("tabIndex",Number(e??-1)),!this[jt])return this.hasAttribute("tabindex")?void(this[Pt]=this.tabIndex):(this[Pt]=null,void this[At]())}else super.attributeChangedCallback(t,e,i)}[(e=Ft,i=Pt,o=jt,At)](){const t=this[Mt]?0:-1,e=this[Pt]??t;this[jt]=!0,this.tabIndex=e,this[jt]=!1}}return a([A({noAccessor:!0})],r.prototype,"tabIndex",void 0),r}(t),class extends qt{get[kt](){return this[$t]||(this[$t]=this.attachInternals()),this[$t]}})));var qt;class Wt extends Vt{get checked(){return this[Nt]}set checked(t){const e=this.checked;e!==t&&(this[Nt]=t,this.requestUpdate("checked",e),this.selectionController.handleCheckedChange())}constructor(){super(),this.maskId="cutout"+ ++Rt,this[Bt]=!1,this.required=!1,this.value="on",this.selectionController=new _t(this),this.addController(this.selectionController),r||(this[kt].role="radio",this.addEventListener("click",this.handleClick.bind(this)),this.addEventListener("keydown",this.handleKeydown.bind(this)))}render(){const t={checked:this.checked};return e`
-      <div class="container ${n(t)}" aria-hidden="true">
+ */var Ce;const Ee=Symbol("checked");let De=0;const Me=function(t){var e;class i extends t{constructor(){super(...arguments),this[e]=""}get validity(){return this[ue](),this[le].validity}get validationMessage(){return this[ue](),this[le].validationMessage}get willValidate(){return this[ue](),this[le].willValidate}checkValidity(){return this[ue](),this[le].checkValidity()}reportValidity(){return this[ue](),this[le].reportValidity()}setCustomValidity(t){this[be]=t,this[ue]()}requestUpdate(t,e,i){super.requestUpdate(t,e,i),this[ue]()}firstUpdated(t){super.firstUpdated(t),this[ue]()}[(e=be,ue)](){if(o)return;this[pe]||(this[pe]=this[ce]());const{validity:t,validationMessage:e}=this[pe].getValidity(),i=!!this[be],r=this[be]||e;this[le].setValidity({...t,customError:i},r,this[he]()??void 0)}[ce](){throw new Error("Implement [createValidator]")}[he](){throw new Error("Implement [getValidityAnchor]")}}return i}(function(t){class e extends t{get form(){return this[le].form}get labels(){return this[le].labels}get name(){return this.getAttribute("name")??""}set name(t){this.setAttribute("name",t)}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",t)}attributeChangedCallback(t,e,i){if("name"!==t&&"disabled"!==t)super.attributeChangedCallback(t,e,i);else{const i="disabled"===t?null!==e:e;this.requestUpdate(t,i)}}requestUpdate(t,e,i){super.requestUpdate(t,e,i),this[le].setFormValue(this[xe](),this[we]())}[xe](){throw new Error("Implement [getFormValue]")}[we](){return this[xe]()}formDisabledCallback(t){this.disabled=t}}return e.formAssociated=!0,n([_({noAccessor:!0})],e.prototype,"name",null),n([_({type:Boolean,noAccessor:!0})],e.prototype,"disabled",null),e}((Ae=function(t){var e,i,r;class o extends t{constructor(){super(...arguments),this[e]=!0,this[i]=null,this[r]=!1}get[ge](){return this[me]}set[ge](t){this[ge]!==t&&(this[me]=t,this[fe]())}connectedCallback(){super.connectedCallback(),this[fe]()}attributeChangedCallback(t,e,i){if("tabindex"===t){if(this.requestUpdate("tabIndex",Number(e??-1)),!this[ve])return this.hasAttribute("tabindex")?void(this[ye]=this.tabIndex):(this[ye]=null,void this[fe]())}else super.attributeChangedCallback(t,e,i)}[(e=me,i=ye,r=ve,fe)](){const t=this[ge]?0:-1,e=this[ye]??t;this[ve]=!0,this.tabIndex=e,this[ve]=!1}}return n([_({noAccessor:!0})],o.prototype,"tabIndex",void 0),o}(t),class extends Ae{get[le](){return this[de]||(this[de]=this.attachInternals()),this[de]}})));var Ae;class Oe extends Me{get checked(){return this[Ee]}set checked(t){const e=this.checked;e!==t&&(this[Ee]=t,this.requestUpdate("checked",e),this.selectionController.handleCheckedChange())}constructor(){super(),this.maskId="cutout"+ ++De,this[Ce]=!1,this.required=!1,this.value="on",this.selectionController=new Se(this),this.addController(this.selectionController),o||(this[le].role="radio",this.addEventListener("click",this.handleClick.bind(this)),this.addEventListener("keydown",this.handleKeydown.bind(this)))}render(){const t={checked:this.checked};return e`
+      <div class="container ${s(t)}" aria-hidden="true">
         <md-ripple
           part="ripple"
           .control=${this}
@@ -1790,19 +1876,19 @@ class Lt{constructor(t){this.getCurrentState=t,this.currentValidity={validity:{}
 
         <div class="touch-target"></div>
       </div>
-    `}updated(){this[kt].ariaChecked=String(this.checked)}async handleClick(t){this.disabled||(await 0,t.defaultPrevented||(xt(t)&&this.focus(),this.checked=!0,this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0}))))}async handleKeydown(t){await 0," "!==t.key||t.defaultPrevented||this.click()}[(Bt=Nt,Tt)](){return this.checked?this.value:null}[zt](){return String(this.checked)}formResetCallback(){this.checked=this.hasAttribute("checked")}formStateRestoreCallback(t){this.checked="true"===t}[St](){return new It((()=>this.selectionController?this.selectionController.controls:[this]))}[Ct](){return this.container}}a([A({type:Boolean})],Wt.prototype,"checked",null),a([A({type:Boolean})],Wt.prototype,"required",void 0),a([A()],Wt.prototype,"value",void 0),a([z(".container")],Wt.prototype,"container",void 0);
+    `}updated(){this[le].ariaChecked=String(this.checked)}async handleClick(t){this.disabled||(await 0,t.defaultPrevented||(ne(t)&&this.focus(),this.checked=!0,this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0}))))}async handleKeydown(t){await 0," "!==t.key||t.defaultPrevented||this.click()}[(Ce=Ee,xe)](){return this.checked?this.value:null}[we](){return String(this.checked)}formResetCallback(){this.checked=this.hasAttribute("checked")}formStateRestoreCallback(t){this.checked="true"===t}[ce](){return new $e((()=>this.selectionController?this.selectionController.controls:[this]))}[he](){return this.container}}n([_({type:Boolean})],Oe.prototype,"checked",null),n([_({type:Boolean})],Oe.prototype,"required",void 0),n([_()],Oe.prototype,"value",void 0),n([j(".container")],Oe.prototype,"container",void 0);
 /**
  * @license
  * Copyright 2024 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-const Yt=o`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20px);outline:none;position:relative;vertical-align:top;width:var(--md-radio-icon-size, 20px);-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer;--md-ripple-hover-color: var(--md-radio-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-radio-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-radio-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-opacity: var(--md-radio-pressed-state-layer-opacity, 0.12)}:host([disabled]){cursor:default}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--md-radio-icon-size, 20px))/2)}.container{display:flex;height:100%;place-content:center;place-items:center;width:100%}md-focus-ring{height:44px;inset:unset;width:44px}.checked{--md-ripple-hover-color: var(--md-radio-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-opacity: var(--md-radio-selected-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-radio-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-radio-selected-pressed-state-layer-opacity, 0.12)}.touch-target{height:48px;position:absolute;width:48px}:host([touch-target=none]) .touch-target{display:none}md-ripple{border-radius:50%;height:var(--md-radio-state-layer-size, 40px);inset:unset;width:var(--md-radio-state-layer-size, 40px)}.icon{fill:var(--md-radio-icon-color, var(--md-sys-color-on-surface-variant, #49454f));inset:0;position:absolute}.outer.circle{transition:fill 50ms linear}.inner.circle{opacity:0;transform-origin:center;transition:opacity 50ms linear}.checked .icon{fill:var(--md-radio-selected-icon-color, var(--md-sys-color-primary, #6750a4))}.checked .inner.circle{animation:inner-circle-grow 300ms cubic-bezier(0.05, 0.7, 0.1, 1);opacity:1}@keyframes inner-circle-grow{from{transform:scale(0)}to{transform:scale(1)}}:host([disabled]) .circle{animation-duration:0s;transition-duration:0s}:host(:hover) .icon{fill:var(--md-radio-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20))}:host(:focus-within) .icon{fill:var(--md-radio-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20))}:host(:active) .icon{fill:var(--md-radio-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20))}:host([disabled]) .icon{fill:var(--md-radio-disabled-unselected-icon-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-radio-disabled-unselected-icon-opacity, 0.38)}:host(:hover) .checked .icon{fill:var(--md-radio-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4))}:host(:focus-within) .checked .icon{fill:var(--md-radio-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4))}:host(:active) .checked .icon{fill:var(--md-radio-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4))}:host([disabled]) .checked .icon{fill:var(--md-radio-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-radio-disabled-selected-icon-opacity, 0.38)}}@layer hcm{@media(forced-colors: active){.icon{fill:CanvasText}:host([disabled]) .icon{fill:GrayText;opacity:1}}}
+const Fe=r`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20px);outline:none;position:relative;vertical-align:top;width:var(--md-radio-icon-size, 20px);-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer;--md-ripple-hover-color: var(--md-radio-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-radio-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-radio-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-opacity: var(--md-radio-pressed-state-layer-opacity, 0.12)}:host([disabled]){cursor:default}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--md-radio-icon-size, 20px))/2)}.container{display:flex;height:100%;place-content:center;place-items:center;width:100%}md-focus-ring{height:44px;inset:unset;width:44px}.checked{--md-ripple-hover-color: var(--md-radio-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-opacity: var(--md-radio-selected-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-radio-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-radio-selected-pressed-state-layer-opacity, 0.12)}.touch-target{height:48px;position:absolute;width:48px}:host([touch-target=none]) .touch-target{display:none}md-ripple{border-radius:50%;height:var(--md-radio-state-layer-size, 40px);inset:unset;width:var(--md-radio-state-layer-size, 40px)}.icon{fill:var(--md-radio-icon-color, var(--md-sys-color-on-surface-variant, #49454f));inset:0;position:absolute}.outer.circle{transition:fill 50ms linear}.inner.circle{opacity:0;transform-origin:center;transition:opacity 50ms linear}.checked .icon{fill:var(--md-radio-selected-icon-color, var(--md-sys-color-primary, #6750a4))}.checked .inner.circle{animation:inner-circle-grow 300ms cubic-bezier(0.05, 0.7, 0.1, 1);opacity:1}@keyframes inner-circle-grow{from{transform:scale(0)}to{transform:scale(1)}}:host([disabled]) .circle{animation-duration:0s;transition-duration:0s}:host(:hover) .icon{fill:var(--md-radio-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20))}:host(:focus-within) .icon{fill:var(--md-radio-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20))}:host(:active) .icon{fill:var(--md-radio-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20))}:host([disabled]) .icon{fill:var(--md-radio-disabled-unselected-icon-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-radio-disabled-unselected-icon-opacity, 0.38)}:host(:hover) .checked .icon{fill:var(--md-radio-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4))}:host(:focus-within) .checked .icon{fill:var(--md-radio-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4))}:host(:active) .checked .icon{fill:var(--md-radio-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4))}:host([disabled]) .checked .icon{fill:var(--md-radio-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-radio-disabled-selected-icon-opacity, 0.38)}}@layer hcm{@media(forced-colors: active){.icon{fill:CanvasText}:host([disabled]) .icon{fill:GrayText;opacity:1}}}
 `
 /**
  * @license
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
- */;let Ut=class extends Wt{};Ut.styles=[Yt],Ut=a([d("md-radio")],Ut);let Ht=class extends t{constructor(){super(...arguments),this.name="radio-group",this.checked=!1,this.disabled=!1,this.error=!1}static{this.styles=o`
+ */;let _e=class extends Oe{};_e.styles=[Fe],_e=n([l("md-radio")],_e);let Te=class extends t{constructor(){super(...arguments),this.name="radio-group",this.checked=!1,this.disabled=!1,this.error=!1}static{this.styles=r`
     :host {
       font-family: "Graphik", sans-serif;
     }
@@ -1868,343 +1954,332 @@ const Yt=o`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
         
         <span>${this.checked?"On":"Off"} ${this.error?"Error":""}</span>
       </label>
-    `}};a([A({type:String}),s("design:type",Object)],Ht.prototype,"name",void 0),a([A({type:Boolean}),s("design:type",Object)],Ht.prototype,"checked",void 0),a([A({type:Boolean}),s("design:type",Object)],Ht.prototype,"disabled",void 0),a([A({type:Boolean}),s("design:type",Object)],Ht.prototype,"error",void 0),Ht=a([d("custom-radio")],Ht);let Gt=class extends L{constructor(){super(...arguments),this.value="",this.defaultValue="",this.options=[],this.filterable=!0,this.isMobile=!1,this.highlightedIndex=-1,this._isCleared=!1,this.filteredOptions=[],this.filterValue="",this.isOpen=!1,this.mobileFilterValue="",this.debounceTimeout=null,this.updateResponsiveModeBound=this.updateResponsiveMode.bind(this)}static{this.styles=o`
-    ${X}
-    ${Q}
-    ${K}
+    `}};n([_({type:String}),a("design:type",Object)],Te.prototype,"name",void 0),n([_({type:Boolean}),a("design:type",Object)],Te.prototype,"checked",void 0),n([_({type:Boolean}),a("design:type",Object)],Te.prototype,"disabled",void 0),n([_({type:Boolean}),a("design:type",Object)],Te.prototype,"error",void 0),Te=n([l("custom-radio")],Te);let je=class extends P{constructor(){super(...arguments),this.value="",this.defaultValue="",this.options=[],this.filterable=!0,this.isMobile=!1,this.highlightedIndex=-1,this._isCleared=!1,this.filteredOptions=[],this.filterValue="",this.isOpen=!1,this.mobileFilterValue="",this.debounceTimeout=null,this.updateResponsiveModeBound=this.updateResponsiveMode.bind(this)}static{this.styles=[Q,r`
+      ${X}
+      ${K}
+      ${G}
+
+      /* --- Own Error Styles --- */
+      :host([error]) .input-container:not(.open) .input-wrapper:hover {
+        box-shadow: 0px 0px 0px 4px #E00F0F1A !important;
+      }
 
-    /* --- Own Error Styles --- */
-    :host([error]) .input-container:not(.open) .input-wrapper:hover {
-      box-shadow: 0px 0px 0px 4px #E00F0F1A !important;
-    }
+      :host([error]) .input-container.open:not(.mobile) .input-wrapper {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        border: 1px solid var(--ui-negative, red) !important;
+        border-bottom: 1px solid transparent !important;
+      }
 
-    :host([error]) .input-container.open:not(.mobile) .input-wrapper {
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-      border: 1px solid var(--ui-negative, red) !important;
-      border-bottom: 1px solid transparent !important;
-    }
+      :host([error]) .input-container:not(.mobile) .options-list {
+        border: 1px solid var(--ui-negative, red) !important;
+        border-top: none !important;
+        border-radius: 0 0 4px 4px;
+      }
 
-    :host([error]) .input-container:not(.mobile) .options-list {
-      border: 1px solid var(--ui-negative, red) !important;
-      border-top: none !important;
-      border-radius: 0 0 4px 4px;
-    }
+      /* Estilos para el estado disabled */
+      .input-wrapper.disabled .filter-input, .input-wrapper.disabled .filter-input, .input-wrapper.disabled .filter-fake {
+        background-color: var(--secondary-color-10);
+        color: #9FA3B3;
+        cursor: default;
+      }
 
-    /* Estilos para el estado disabled */
-    .input-wrapper.disabled .filter-input, .input-wrapper.disabled .filter-input, .input-wrapper.disabled .filter-fake {
-      background-color: var(--secondary-color-10);
-      color: #9FA3B3;
-      cursor: default;
-    }
+      .input-wrapper.disabled .icon-button,
+      .input-wrapper.disabled .icon-button randstad-icon,
+      .input-wrapper.disabled .icon-button .close-icon {
+        color: #9FA3B3;
+        cursor: default;
+      }
 
-    .input-wrapper.disabled .icon-button,
-    .input-wrapper.disabled .icon-button randstad-icon,
-    .input-wrapper.disabled .icon-button .close-icon {
-      color: #9FA3B3;
-      cursor: default;
-    }
+      /* Y si tienes un icono seleccionado que también debe cambiar de color */
+      .input-wrapper.disabled .icon-selected svg {
+        fill: #9FA3B3;
+      }
 
-    /* Y si tienes un icono seleccionado que también debe cambiar de color */
-    .input-wrapper.disabled .icon-selected svg {
-      fill: #9FA3B3;
-    }
+      .input-wrapper .icon-button .close-icon {
+        color: var(--primary-color);
+      }
 
-    .input-wrapper .icon-button .close-icon {
-      color: var(--primary-color);
-    }
+      .select-container {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        width: 100%;
+      }
 
-    .select-container {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-      width: 100%;
-    }
+      .input-container.focused:not(.open):not(.mobile) .input-wrapper {
+        border: 1px solid var(--primary-color);
+        border-radius: 4px;
+        box-shadow: none;
+        z-index: 11;
+      }
 
-    .input-container.focused:not(.open):not(.mobile) .input-wrapper {
-      border: 1px solid var(--primary-color);
-      border-radius: 4px;
-      box-shadow: none;
-      z-index: 11;
-    }
+      .input-container.focused:not(.open):not(.mobile) .input-wrapper:hover {
+        box-shadow: none;
+      }
 
-    .input-container.focused:not(.open):not(.mobile) .input-wrapper:hover {
-      box-shadow: none;
-    }
+      :host(:not([error])) .input-container.open:not(.mobile) {
+        border-radius: 4px;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
 
-    :host(:not([error])) .input-container.open:not(.mobile) {
-      border-radius: 4px;
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-    }
+      :host(:not([error])) .input-container.open:not(.mobile) .input-wrapper {
+        border: 1px solid var(--primary-color);
+        border-top-left-radius: 4px;
+        border-top-right-radius: 4px;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        border-bottom: 1px solid transparent;
+        box-shadow: none;
+        z-index: 11;
+      }
 
-    :host(:not([error])) .input-container.open:not(.mobile) .input-wrapper {
-      border: 1px solid var(--primary-color);
-      border-top-left-radius: 4px;
-      border-top-right-radius: 4px;
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-      border-bottom: 1px solid transparent;
-      box-shadow: none;
-      z-index: 11;
-    }
+      :host(:not([error])) .input-wrapper:hover {
+        box-shadow: 0px 0px 0px 4px #0F19411A;
+      }
 
-    :host(:not([error])) .input-wrapper:hover {
-      box-shadow: 0px 0px 0px 4px #0F19411A;
-    }
+      :host .input-container.open:not(.mobile)::after {
+        content: '';
+        position: absolute;
+        top: calc(100% - 1px);
+        left: 20px;
+        right: 20px;
+        height: 1px;
+        background-color: var(--gray-20);
+        z-index: 10;
+      }
 
-    :host .input-container.open:not(.mobile)::after {
-      content: '';
-      position: absolute;
-      top: calc(100% - 1px);
-      left: 20px;
-      right: 20px;
-      height: 1px;
-      background-color: var(--gray-20);
-      z-index: 10;
-    }
+      .input-wrapper {
+        border: 1px solid var(--secondary-color-10);
+        border-radius: 4px;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        width: 100%;
+        transition: box-shadow 0.2s ease-in-out;
+        background-color: white;
+      }
 
-    .input-wrapper {
-      border: 1px solid var(--secondary-color-10);
-      border-radius: 4px;
-      overflow: hidden;
-      display: flex;
-      align-items: center;
-      width: 100%;
-      transition: box-shadow 0.2s ease-in-out;
-      background-color: white;
-    }
+      .mobile-modal .filter-input {
+        border-bottom: 1px solid var(--gray-20);
+      }
 
-    .mobile-modal .filter-input {
-      border-bottom: 1px solid var(--gray-20);
-    }
+      .filter-input {
+        ${N};
+        padding: 16px;
+        padding-right: 40px;
+        border: none;
+        outline: none;
+        width: 100%;
+        box-sizing: border-box;
+        background: white;
+        cursor: pointer;
+        color: var(--secondary-color);
+        flex-grow: 1;
+      }
 
-    .filter-input {
-      ${N};
-      padding: 16px;
-      padding-right: 40px;
-      border: none;
-      outline: none;
-      width: 100%;
-      box-sizing: border-box;
-      background: white;
-      cursor: pointer;
-      color: var(--secondary-color);
-      flex-grow: 1;
-    }
+      .filter-input,
+      .filter-fake,
+      .input-wrapper,
+      .mobile-modal {
+        -webkit-tap-highlight-color: transparent !important;
+      }
 
-    .filter-input,
-    .filter-fake,
-    .input-wrapper,
-    .mobile-modal {
-      -webkit-tap-highlight-color: transparent !important;
-    }
+      .filter-input::placeholder {
+        ${N};
+        color: var(--secondary-color-40);
+      }
 
-    .filter-input::placeholder {
-      ${N};
-      color: var(--secondary-color-40);
-    }
+      .icon-button {
+        position: absolute;
+        right: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+        padding: 0;
+      }
 
-    .icon-button {
-      position: absolute;
-      right: 10px;
-      top: 50%;
-      transform: translateY(-50%);
-      background: transparent;
-      border: none;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 24px;
-      height: 24px;
-      padding: 0;
-    }
+      randstad-icon {
+        width: 24px;
+        height: 24px;
+        color: var(--primary-color);
+      }
 
-    randstad-icon {
-      width: 24px;
-      height: 24px;
-      color: var(--primary-color);
-    }
+      .options-list {
+        width: 100%;
+        position: absolute;
+        top: 99%;
+        left: 0;
+        right: 0;
+        max-height: 200px;
+        overflow-y: auto;
+        border: 1px solid var(--primary-color);
+        border-top: none;
+        border-radius: 0 0 4px 4px;
+        background: white;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        z-index: 10;
+      }
 
-    .options-list {
-      width: 100%;
-      position: absolute;
-      top: 99%;
-      left: 0;
-      right: 0;
-      max-height: 200px;
-      overflow-y: auto;
-      border: 1px solid var(--primary-color);
-      border-top: none;
-      border-radius: 0 0 4px 4px;
-      background: white;
-      list-style: none;
-      margin: 0;
-      padding: 0;
-      z-index: 10;
-    }
+      .options-list li {
+        ${N};
+        padding: 8px 16px 8px 16px;
+        cursor: pointer;
+        color: var(--secondary-color-80);
+        display: flex;
+        align-items: center;
+      }
 
-    .options-list li {
-      ${N};
-      padding: 8px 16px 8px 16px;
-      cursor: pointer;
-      color: var(--secondary-color-80);
-      display: flex;
-      align-items: center;
-    }
+      .options-list li.highlighted {
+        background-color: var(--primary-color-10);
+      }
 
-    .options-list li.highlighted {
-      background-color: var(--primary-color-10);
-    }
+      .mobile-modal {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background-color: white;
+        z-index: 1000;
+        border-radius: 12px 12px 0 0;
+        box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.15);
+        display: flex;
+        flex-direction: column;
+        padding: 0px;
+        animation: slideUp 0.5s ease-out;
+        max-height: 80dvh;
+        overflow-y: auto;
+      }
 
-    .mobile-modal {
-      position: fixed;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      background-color: white;
-      z-index: 1000;
-      border-radius: 12px 12px 0 0;
-      box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.15);
-      display: flex;
-      flex-direction: column;
-      padding: 0px;
-      gap: 12px;
-      animation: slideUp 0.5s ease-out;
-      max-height: 80vh;
-      overflow-y: auto;
-    }
+      .mobile-modal .options-list {
+        position: static;
+        max-height: none;
+        border: none;
+        box-shadow: none;
+      }
 
-    .mobile-modal .options-list {
-      position: static;
-      max-height: none;
-      border: none;
-      box-shadow: none;
-    }
+      .mobile-modal .modal-input-container {
+        position: relative;
+      }
 
-    .mobile-modal .modal-input-container {
-      position: relative;
-    }
+      .mobile-modal .modal-close-button {
+        position: absolute;
+        top: 50%;
+        right: 12px;
+        transform: translateY(-50%);
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        padding: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
 
-    .mobile-modal .modal-close-button {
-      position: absolute;
-      top: 50%;
-      right: 12px;
-      transform: translateY(-50%);
-      background: transparent;
-      border: none;
-      cursor: pointer;
-      padding: 4px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
+      .mobile-modal .modal-close-button randstad-icon {
+        width: 20px;
+        height: 20px;
+        color: var(--secondary-color-60);
+      }
 
-    .mobile-modal .modal-close-button randstad-icon {
-      width: 20px;
-      height: 20px;
-      color: var(--secondary-color-60);
-    }
-
-    .mobile-backdrop {
-      position: fixed;
-      inset: 0;
-      background-color: rgba(0, 0, 0, 0.4);
-      z-index: 999;
-      display: flex;
-      align-items: flex-end;
-    }
-
-    .filter-fake {
-      ${N};
-      padding: 15px;
-      padding-right: 40px;
-      width: 100%;
-      background: white;
-      box-sizing: border-box;
-      cursor: pointer;
-      color: var(--secondary-color-80);
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: flex;
-      align-items: center;
-    }
-
-    @keyframes slideUp {
-      from {
-        transform: translateY(100%);
-      }
-      to {
-        transform: translateY(0);
+      .mobile-backdrop {
+        position: fixed;
+        inset: 0;
+        background-color: rgba(0, 0, 0, 0.4);
+        z-index: 999;
+        display: flex;
+        align-items: flex-end;
       }
-    }
 
-    .options-list::-webkit-scrollbar {
-      width: 6px;
-    }
-
-    .options-list::-webkit-scrollbar-track {
-      background: transparent;
-    }
-
-    .options-list::-webkit-scrollbar-thumb {
-      background-color: var(--secondary-color-30);
-      border-radius: 4px;
-    }
-
-    .options-list::-webkit-scrollbar-button {
-      display: none;
-    }
-
-    /* Estilos por defecto del icon para mobile */
-    .icon-selected {
-      width: 24px;
-      height: auto;
-      margin-left: 4px;
-      padding-right: 12px; 
-      border-right: 1px solid var(--secondary-color-20);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-shrink: 0;
-    }
+      .filter-fake {
+        ${N};
+        padding: 15px;
+        padding-right: 40px;
+        width: 100%;
+        background: white;
+        box-sizing: border-box;
+        cursor: pointer;
+        color: var(--secondary-color-80);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: flex;
+        align-items: center;
+      }
 
-    .value-text {
-      margin-left: 8px; /* Aumentamos el margen para separar el texto en mobile */
-    }
+      @keyframes slideUp {
+        from {
+          transform: translateY(100%);
+        }
+        to {
+          transform: translateY(0);
+        }
+      }
 
-    /*
-     * Media query para aplicar estilos de escritorio (a partir de 941px)
-     */
-    @media (min-width: 941px) {
+      /* Estilos por defecto del icon para mobile */
       .icon-selected {
-      /* Estilos de escritorio para el icono, se anulan los de mobile */
-        margin-left: 16px;
-        padding-right: 18px;
+        width: 24px;
+        height: auto;
+        margin-left: 4px;
+        padding-right: 12px; 
+        border-right: 1px solid var(--secondary-color-20);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
       }
-      
+
       .value-text {
-      /* En escritorio no necesitamos este margen, lo reseteamos */
-        margin-left: 0;
+        margin-left: 8px; /* Aumentamos el margen para separar el texto en mobile */
       }
-    }
 
-    .icon-selected svg,
-    .icon-list svg {
-      display: block;
-      width: 100%;
-      height: auto;
-    }
+      /*
+      * Media query para aplicar estilos de escritorio (a partir de 941px)
+      */
+      @media (min-width: 941px) {
+        .icon-selected {
+        /* Estilos de escritorio para el icono, se anulan los de mobile */
+          margin-left: 16px;
+          padding-right: 18px;
+        }
+        
+        .value-text {
+        /* En escritorio no necesitamos este margen, lo reseteamos */
+          margin-left: 0;
+        }
+      }
 
-    .icon-list {
-      width: 24px;
-      height: auto;
-      margin-right: 8px;
-      flex-shrink: 0;
-    }
-  `}update(t){if(t.has("options")&&(this.filteredOptions=[...this.options]),t.has("defaultValue")||t.has("options")||t.has("value")){if(this._isCleared)return void super.update(t);const e=this.value||this.defaultValue,i=this.options.find((t=>"string"==typeof t?t===e:t.value===e));i?(this.filterValue="string"==typeof i?i:i.label,this.value="string"==typeof i?i:i.value):(this.filterValue="",this.value="")}super.update(t)}connectedCallback(){super.connectedCallback(),this.updateResponsiveMode(),window.addEventListener("resize",this.updateResponsiveModeBound),document.addEventListener("click",this.handleClickOutside.bind(this))}disconnectedCallback(){window.removeEventListener("resize",this.updateResponsiveModeBound),document.removeEventListener("click",this.handleClickOutside.bind(this)),super.disconnectedCallback()}updateResponsiveMode(){this.isMobile=window.innerWidth<=940}handleInputClick(t){this.isMobile&&(this.mobileFilterValue=""),this.disabled||(this.isOpen=!this.isOpen,this.requestUpdate())}handleInput(t){if(!this.filterable)return;this._isCleared=!1;const e=t.target.value,i=this.maxLength?e.slice(0,this.maxLength).toLowerCase():e.toLowerCase();this.filterValue=i,this.value="",this.filteredOptions=this.options.filter((t=>("string"==typeof t?t:t.label).toLowerCase().includes(this.filterValue.toLowerCase()))),this.isOpen=!0,this.debounceTimeout&&clearTimeout(this.debounceTimeout),this.debounceTimeout=window.setTimeout((()=>{this.filterValue.length>2&&this.dispatchEvent(new CustomEvent("filter-location",{detail:{value:this.filterValue},bubbles:!0,composed:!0}))}),300),this.requestUpdate()}handleMobileInput(t){this._isCleared=!1;const e=t.target.value,i=this.maxLength?e.slice(0,this.maxLength).toLowerCase():e.toLowerCase();this.mobileFilterValue=i,this.value="",this.filteredOptions=this.options.filter((t=>("string"==typeof t?t:t.label).toLowerCase().includes(i))),this.debounceTimeout&&clearTimeout(this.debounceTimeout),this.debounceTimeout=window.setTimeout((()=>{i.length>2&&this.dispatchEvent(new CustomEvent("filter-location",{detail:{value:i},bubbles:!0,composed:!0}))}),300)}handleSelect(t){this._isCleared=!1;const e="string"==typeof t?t:t.value;this.dispatchEvent(new CustomEvent("option-selected",{detail:{value:e},bubbles:!0,composed:!0})),this.filterValue="string"==typeof t?t:t.label,this.value=e,this.isOpen=!1,this.requestUpdate()}handleIconClick(){this.disabled||(this.filterable&&this.filterValue?(this._isCleared=!0,this.filterValue="",this.value="",this.filteredOptions=[...this.options],this.dispatchEvent(new CustomEvent("option-selected",{detail:{value:""},bubbles:!0,composed:!0})),this.isOpen=!1):this.isOpen=!this.isOpen,this.requestUpdate())}handleClickOutside(t){const e=t.target;e instanceof Node&&(this.contains(e)||(this.isOpen=!1,this.requestUpdate()))}handleKeyDown(t){const{key:e}=t;if(!this.isOpen&&("Enter"===e||" "===e))return t.preventDefault(),void(this.isOpen=!0);if(this.isOpen)if("ArrowDown"===e)t.preventDefault(),this.highlightedIndex=Math.min(this.highlightedIndex+1,this.filteredOptions.length-1),this.requestUpdate();else if("ArrowUp"===e)t.preventDefault(),this.highlightedIndex=Math.max(this.highlightedIndex-1,0),this.requestUpdate();else if("Enter"===e){t.preventDefault();const e=this.filteredOptions[this.highlightedIndex];e&&this.handleSelect(e)}else"Escape"===e&&(t.preventDefault(),this.isOpen=!1)}renderSelectedIcon(){const t=this.options.find((t=>"string"==typeof t?t===this.value:t.value===this.value));return t&&"string"!=typeof t&&t.icon&&"string"==typeof t.icon?e`<span class="icon-selected" .innerHTML="${t.icon}"></span>`:i}renderOptionIcon(t){return t&&"string"==typeof t?e`<span class="icon-list" .innerHTML="${t}"></span>`:i}render(){const t=this.isMobile;return e`
+      .icon-selected svg,
+      .icon-list svg {
+        display: block;
+        width: 100%;
+        height: auto;
+      }
+
+      .icon-list {
+        width: 24px;
+        height: auto;
+        margin-right: 8px;
+        flex-shrink: 0;
+      }
+    `]}update(t){if(t.has("options")&&(this.filteredOptions=[...this.options]),t.has("defaultValue")||t.has("options")||t.has("value")){if(this._isCleared)return void super.update(t);const e=this.value||this.defaultValue,i=this.options.find((t=>"string"==typeof t?t===e:t.value===e));i?(this.filterValue="string"==typeof i?i:i.label,this.value="string"==typeof i?i:i.value):(this.filterValue="",this.value="")}super.update(t)}connectedCallback(){super.connectedCallback(),this.updateResponsiveMode(),window.addEventListener("resize",this.updateResponsiveModeBound),document.addEventListener("click",this.handleClickOutside.bind(this))}disconnectedCallback(){window.removeEventListener("resize",this.updateResponsiveModeBound),document.removeEventListener("click",this.handleClickOutside.bind(this)),super.disconnectedCallback()}updateResponsiveMode(){this.isMobile=window.innerWidth<=940}handleInputClick(t){this.isMobile&&(this.mobileFilterValue=""),this.disabled||(this.isOpen=!this.isOpen,this.requestUpdate())}handleInput(t){if(!this.filterable)return;this._isCleared=!1;const e=t.target.value,i=this.maxLength?e.slice(0,this.maxLength).toLowerCase():e.toLowerCase();this.filterValue=i,this.value="",this.filteredOptions=this.options.filter((t=>("string"==typeof t?t:t.label).toLowerCase().includes(this.filterValue.toLowerCase()))),this.isOpen=!0,this.debounceTimeout&&clearTimeout(this.debounceTimeout),this.debounceTimeout=window.setTimeout((()=>{this.filterValue.length>2&&this.dispatchEvent(new CustomEvent("filter-location",{detail:{value:this.filterValue},bubbles:!0,composed:!0}))}),300),this.requestUpdate()}handleMobileInput(t){this._isCleared=!1;const e=t.target.value,i=this.maxLength?e.slice(0,this.maxLength).toLowerCase():e.toLowerCase();this.mobileFilterValue=i,this.value="",this.filteredOptions=this.options.filter((t=>("string"==typeof t?t:t.label).toLowerCase().includes(i))),this.debounceTimeout&&clearTimeout(this.debounceTimeout),this.debounceTimeout=window.setTimeout((()=>{i.length>2&&this.dispatchEvent(new CustomEvent("filter-location",{detail:{value:i},bubbles:!0,composed:!0}))}),300)}handleSelect(t){this._isCleared=!1;const e="string"==typeof t?t:t.value;this.dispatchEvent(new CustomEvent("option-selected",{detail:{value:e},bubbles:!0,composed:!0})),this.filterValue="string"==typeof t?t:t.label,this.value=e,this.isOpen=!1,this.requestUpdate()}handleIconClick(){this.disabled||(this.filterable&&this.filterValue?(this._isCleared=!0,this.filterValue="",this.value="",this.filteredOptions=[...this.options],this.dispatchEvent(new CustomEvent("option-selected",{detail:{value:""},bubbles:!0,composed:!0})),this.isOpen=!1):this.isOpen=!this.isOpen,this.requestUpdate())}handleClickOutside(t){const e=t.target;e instanceof Node&&(this.contains(e)||(this.isOpen=!1,this.requestUpdate()))}handleKeyDown(t){const{key:e}=t;if(!this.isOpen&&("Enter"===e||" "===e))return t.preventDefault(),void(this.isOpen=!0);if(this.isOpen)if("ArrowDown"===e)t.preventDefault(),this.highlightedIndex=Math.min(this.highlightedIndex+1,this.filteredOptions.length-1),this.requestUpdate();else if("ArrowUp"===e)t.preventDefault(),this.highlightedIndex=Math.max(this.highlightedIndex-1,0),this.requestUpdate();else if("Enter"===e){t.preventDefault();const e=this.filteredOptions[this.highlightedIndex];e&&this.handleSelect(e)}else"Escape"===e&&(t.preventDefault(),this.isOpen=!1)}renderSelectedIcon(){const t=this.options.find((t=>"string"==typeof t?t===this.value:t.value===this.value));return t&&"string"!=typeof t&&t.icon&&"string"==typeof t.icon?e`<span class="icon-selected" .innerHTML="${t.icon}"></span>`:i}renderOptionIcon(t){return t&&"string"==typeof t?e`<span class="icon-list" .innerHTML="${t}"></span>`:i}render(){const t=this.isMobile,r=e`
+      <randstad-icon
+        name="${this.isOpen&&this.filteredOptions.length>0?"arrow_up":"arrow_down"}"
+        size="24px"
+        .color=${"var( --primary-color )"}
+      >
+      </randstad-icon>
+    `;return e`
       <div class="select-container" style="${this.labelColor?` --label-color: ${this.labelColor}`:""}">
         ${this.renderLabelContainer()}
         
@@ -2247,21 +2322,21 @@ const Yt=o`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
                 @click="${this.handleIconClick}"
                 ?disabled="${this.disabled}"
               >
-                ${this.filterable&&this.filterValue?e`<randstad-icon name="close" size="24px"></randstad-icon>`:this.isOpen&&this.filteredOptions.length>0?e`<randstad-icon name="arrow_up" size="24px"></randstad-icon>`:e`<randstad-icon name="arrow_down" size="24px"></randstad-icon>`}
+                ${this.filterable&&this.filterValue?e`<randstad-icon name="close" size="24px"></randstad-icon>`:r}
               </button>
             </div>
 
             ${!t&&this.isOpen&&this.filteredOptions.length>0?e`
                 <ul class="options-list">
-                  ${this.filteredOptions.map(((t,i)=>{const o="string"==typeof t?t:t.label,r="object"==typeof t&&t.disabled,n="object"==typeof t?t.icon:void 0;return e`
+                  ${this.filteredOptions.map(((t,i)=>{const r="string"==typeof t?t:t.label,o="object"==typeof t&&t.disabled,s="object"==typeof t?t.icon:void 0;return e`
                       <li
-                        class="${r?"disabled":""} ${i===this.highlightedIndex?"highlighted":""}"
+                        class="${o?"disabled":""} ${i===this.highlightedIndex?"highlighted":""}"
                         role="option"
                         aria-selected="${i===this.highlightedIndex}"
-                        @click="${()=>{r||this.handleSelect(t)}}"
+                        @click="${()=>{o||this.handleSelect(t)}}"
                       >
-                        ${this.renderOptionIcon(n)}
-                        ${o}
+                        ${this.renderOptionIcon(s)}
+                        ${r}
                       </li>
                     `}))}
                 </ul>
@@ -2291,27 +2366,27 @@ const Yt=o`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
               </div>
               
               <ul class="options-list">
-                ${this.filteredOptions.map(((t,i)=>{const o="string"==typeof t?t:t.label,r="object"==typeof t&&t.disabled,n="object"==typeof t?t.icon:void 0;return e`
+                ${this.filteredOptions.map(((t,i)=>{const r="string"==typeof t?t:t.label,o="object"==typeof t&&t.disabled,s="object"==typeof t?t.icon:void 0;return e`
                     <li
-                      class="${r?"disabled":""} ${i===this.highlightedIndex?"highlighted":""}"
+                      class="${o?"disabled":""} ${i===this.highlightedIndex?"highlighted":""}"
                       role="option"
                       aria-selected="${i===this.highlightedIndex}"
-                      @click="${()=>{r||this.handleSelect(t)}}"
+                      @click="${()=>{o||this.handleSelect(t)}}"
                     >
-                      ${this.renderOptionIcon(n)}
-                      ${o}
+                      ${this.renderOptionIcon(s)}
+                      ${r}
                     </li>
                   `}))}
               </ul>
             </div>
           </div>
         `:i}
-    `}};a([A({type:Object}),s("design:type",Object)],Gt.prototype,"value",void 0),a([A({type:String,attribute:"default-value"}),s("design:type",Object)],Gt.prototype,"defaultValue",void 0),a([A({type:Array}),s("design:type",Array)],Gt.prototype,"options",void 0),a([A({type:Boolean}),s("design:type",Object)],Gt.prototype,"filterable",void 0),a([A({type:Number}),s("design:type",Number)],Gt.prototype,"maxLength",void 0),a([T(),s("design:type",Boolean)],Gt.prototype,"isMobile",void 0),a([T(),s("design:type",Object)],Gt.prototype,"highlightedIndex",void 0),a([T(),s("design:type",Boolean)],Gt.prototype,"_isCleared",void 0),a([T(),s("design:type",Array)],Gt.prototype,"filteredOptions",void 0),a([T(),s("design:type",Object)],Gt.prototype,"filterValue",void 0),a([T(),s("design:type",Object)],Gt.prototype,"isOpen",void 0),a([T(),s("design:type",Object)],Gt.prototype,"mobileFilterValue",void 0),Gt=a([d("filterable-select")],Gt);const Kt=new CSSStyleSheet;Kt.replaceSync("\n  @font-face {\n    font-family: 'Graphik';\n    src: url('/src/assets/font/Graphik-Regular.woff2') format('woff2'),\n         url('/src/assets/font/Graphik-Regular.woff') format('woff'),\n         url('/src/assets/font/Graphik-Regular.eot') format('embedded-opentype');\n    font-weight: normal;\n    font-style: normal;\n  }\n\n  .body-s {\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 100%;\n    letter-spacing: 0%;\n    color: green;\n  }\n\n  .body-l {\n    font-family: Graphik;\n    font-size: 18px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 30px;\n  }\n");class Xt extends t{static{this.styles=[Kt,o`
+    `}};n([_({type:Object}),a("design:type",Object)],je.prototype,"value",void 0),n([_({type:String,attribute:"default-value"}),a("design:type",Object)],je.prototype,"defaultValue",void 0),n([_({type:Array}),a("design:type",Array)],je.prototype,"options",void 0),n([_({type:Boolean}),a("design:type",Object)],je.prototype,"filterable",void 0),n([_({type:Number}),a("design:type",Number)],je.prototype,"maxLength",void 0),n([T(),a("design:type",Boolean)],je.prototype,"isMobile",void 0),n([T(),a("design:type",Object)],je.prototype,"highlightedIndex",void 0),n([T(),a("design:type",Boolean)],je.prototype,"_isCleared",void 0),n([T(),a("design:type",Array)],je.prototype,"filteredOptions",void 0),n([T(),a("design:type",Object)],je.prototype,"filterValue",void 0),n([T(),a("design:type",Object)],je.prototype,"isOpen",void 0),n([T(),a("design:type",Object)],je.prototype,"mobileFilterValue",void 0),je=n([l("filterable-select")],je);const Pe=new CSSStyleSheet;Pe.replaceSync("\n  @font-face {\n    font-family: 'Graphik';\n    src: url('/src/assets/font/Graphik-Regular.woff2') format('woff2'),\n      url('/src/assets/font/Graphik-Regular.woff') format('woff'),\n      url('/src/assets/font/Graphik-Regular.eot') format('embedded-opentype');\n    font-weight: normal;\n    font-style: normal;\n  }\n\n  .body-s {\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 100%;\n    letter-spacing: 0%;\n    color: green;\n  }\n\n  .body-l {\n    font-family: Graphik;\n    font-size: 18px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 30px;\n  }\n");class Le extends t{static{this.styles=[Pe,r`
       :host {
         display: flex;
         position: fixed;
         align-items: center;
-        max-width: 100vw;
+        max-width: 100dvw;
         height: auto;
         z-index: 9999;
       }
@@ -2372,11 +2447,11 @@ const Yt=o`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
       }
 
       :host(.mobile) .container {
-        width: 90vw !important;
+        width: 90dvw !important;
       }
 
       .container {
-        ${_};
+        ${z};
         display: flex;
         align-items: center;
         box-sizing: border-box;
@@ -2442,7 +2517,7 @@ const Yt=o`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
         <randstad-icon name=${this.icon} size="24px" color="white"></randstad-icon>
         <span class="message">${this.message}</span>
       </div>
-    `}}customElements.define("randstad-snackbar",Xt);let Qt=class extends t{constructor(){super(...arguments),this.totalSteps=4,this.currentStep=0}static{this.styles=o`
+    `}}customElements.define("randstad-snackbar",Le);let ze=class extends t{constructor(){super(...arguments),this.totalSteps=4,this.currentStep=0}static{this.styles=r`
     .stepper {
       display: flex;
       gap: 20px;
@@ -2542,7 +2617,7 @@ const Yt=o`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
           </div>
         `))}
       </div>
-    `}};a([A({type:Number}),s("design:type",Object)],Qt.prototype,"totalSteps",void 0),a([A({type:Number}),s("design:type",Object)],Qt.prototype,"currentStep",void 0),Qt=a([d("custom-stepper")],Qt);let Jt=class extends t{constructor(){super(...arguments),this.tabs=[],this.selected="",this.internalSelected="",this.showPrev=!1,this.showNext=!1,this.SCROLL_OFFSET=56,this.handleScroll=()=>{const t=this.renderRoot.querySelector(".tab-wrapper");if(!t)return;const{scrollLeft:e,scrollWidth:i,clientWidth:o}=t;this.showPrev=e>0,this.showNext=e+o<i-1}}static{this.styles=o`
+    `}};n([_({type:Number}),a("design:type",Object)],ze.prototype,"totalSteps",void 0),n([_({type:Number}),a("design:type",Object)],ze.prototype,"currentStep",void 0),ze=n([l("custom-stepper")],ze);let Ie=class extends t{constructor(){super(...arguments),this.tabs=[],this.selected="",this.internalSelected="",this.showPrev=!1,this.showNext=!1,this.SCROLL_OFFSET=56,this.handleScroll=()=>{const t=this.renderRoot.querySelector(".tab-wrapper");if(!t)return;const{scrollLeft:e,scrollWidth:i,clientWidth:r}=t;this.showPrev=e>0,this.showNext=e+r<i-1}}static{this.styles=r`
     :host {
       display: block;
       border-bottom: 1px solid #E7E8EC;
@@ -2555,7 +2630,7 @@ const Yt=o`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
     }
 
     .tab {
-      ${R};
+      ${B};
       display: flex;
       gap: 8px;
       flex-direction: row;
@@ -2653,11 +2728,11 @@ const Yt=o`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
 
     @media (max-width: 940px) {
       .tab {
-        ${B};
+        ${I};
         padding: 16px;
       }
     }
-  `}firstUpdated(){this.handleScroll()}updated(t){t.has("selected")&&(this.internalSelected=this.selected)}selectTab(t){this.internalSelected=t;const e=this.tabs.find((e=>e.value===t));e&&this.dispatchEvent(new CustomEvent("tab-change",{detail:e,bubbles:!0,composed:!0}))}scrollTabsLeft(){const t=this.renderRoot.querySelector(".tab-wrapper");if(!t)return;const e=t.scrollLeft,i=Array.from(t.querySelectorAll(".tab"));for(let o=i.length-1;o>=0;o--){const r=i[o].offsetLeft;if(r<e+this.SCROLL_OFFSET-1){const e=r-this.SCROLL_OFFSET;t.scrollTo({left:e,behavior:"smooth"});break}}setTimeout((()=>this.handleScroll()),300)}scrollTabsRight(){const t=this.renderRoot.querySelector(".tab-wrapper");if(!t)return;const e=t.scrollLeft,i=Array.from(t.querySelectorAll(".tab"));for(const o of i)if(o.offsetLeft>e+this.SCROLL_OFFSET){const e=o.offsetLeft-this.SCROLL_OFFSET;t.scrollTo({left:e,behavior:"smooth"});break}setTimeout((()=>this.handleScroll()),300)}render(){return e`
+  `}firstUpdated(){this.handleScroll()}updated(t){t.has("selected")&&(this.internalSelected=this.selected)}selectTab(t){this.internalSelected=t;const e=this.tabs.find((e=>e.value===t));e&&this.dispatchEvent(new CustomEvent("tab-change",{detail:e,bubbles:!0,composed:!0}))}scrollTabsLeft(){const t=this.renderRoot.querySelector(".tab-wrapper");if(!t)return;const e=t.scrollLeft,i=Array.from(t.querySelectorAll(".tab"));for(let r=i.length-1;r>=0;r--){const o=i[r].offsetLeft;if(o<e+this.SCROLL_OFFSET-1){const e=o-this.SCROLL_OFFSET;t.scrollTo({left:e,behavior:"smooth"});break}}setTimeout((()=>this.handleScroll()),300)}scrollTabsRight(){const t=this.renderRoot.querySelector(".tab-wrapper");if(!t)return;const e=t.scrollLeft,i=Array.from(t.querySelectorAll(".tab"));for(const r of i)if(r.offsetLeft>e+this.SCROLL_OFFSET){const e=r.offsetLeft-this.SCROLL_OFFSET;t.scrollTo({left:e,behavior:"smooth"});break}setTimeout((()=>this.handleScroll()),300)}render(){return e`
       <div class="scroll-container">
         ${this.showPrev?e`
           <button class="scroll-button prev" @click=${this.scrollTabsLeft}>
@@ -2681,7 +2756,17 @@ const Yt=o`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
           </button>
         `:null}
       </div>
-    `}};a([A({type:Array}),s("design:type",Array)],Jt.prototype,"tabs",void 0),a([A({type:String}),s("design:type",String)],Jt.prototype,"selected",void 0),a([T(),s("design:type",String)],Jt.prototype,"internalSelected",void 0),a([T(),s("design:type",Object)],Jt.prototype,"showPrev",void 0),a([T(),s("design:type",Object)],Jt.prototype,"showNext",void 0),Jt=a([d("tabs-bar")],Jt);const Zt=o`
+    `}};n([_({type:Array}),a("design:type",Array)],Ie.prototype,"tabs",void 0),n([_({type:String}),a("design:type",String)],Ie.prototype,"selected",void 0),n([T(),a("design:type",String)],Ie.prototype,"internalSelected",void 0),n([T(),a("design:type",Object)],Ie.prototype,"showPrev",void 0),n([T(),a("design:type",Object)],Ie.prototype,"showNext",void 0),Ie=n([l("tabs-bar")],Ie);let Ne=class extends P{constructor(){super(...arguments),this.files=[],this.simulatedDelay=0,this.loading=!1,this.progress=0,this.errorTextMessage=null}baseGetTextMaxFileSize(t){return t/1048576}getReadableFileTypes(t,e){const i=t.map((t=>e[t]||t));if(i.length<=1)return i.join("");const r=i.pop();return`${i.join(", ")} y ${r}`}validateFiles(t,e,i,r,o,s){for(const n of t){if(i.length>0&&!i.includes(n.type))return this.setError(s,r),!1;if(n.size>e)return this.setError(s,o),!1}return!0}async baseHandleFiles(t,e){const{baseMaxFiles:i,maxFileSize:r,acceptedFileTypes:o,errorMessageType:s,errorMessageSize:n,typeError:a}=e;if(this.setError(a,null),!t||this.disabled||this.loading)return;const l=Array.isArray(this.files)?this.files:[],d=Number.isFinite(i)&&i>0?i:1,c=d-l.length;if(c<=0){const t=`se ha alcanzado el número máximo de archivos (${d}).`;return void this.setError(a,t)}const h=Array.from(t).slice(0,c);if(0===h.length)return;if(!this.validateFiles(h,r,o,s,n,a))return;const p=this.simulatedDelay??0;if(p<=0)return this.files=[...l,...h],void this.dispatchEvent(new CustomEvent("files-changed",{detail:this.files}));this.loading=!0,this.progress=0,await this.updateComplete;const u=Date.now(),b=setInterval((()=>{const t=Date.now()-u,e=Math.min(Math.round(t/p*100),100);this.progress=e,this.progress>=100&&(clearInterval(b),this.files=[...l,...h],this.loading=!1,this.progress=0,this.dispatchEvent(new CustomEvent("files-changed",{detail:this.files})))}),10);this.fileInput&&(this.fileInput.value="")}baseOnFileInputChange(t,e){const i=t.target;this.baseHandleFiles(i.files,e),this.fileInput&&(this.fileInput.value="")}removeFile(t,e){this.files=this.files.filter(((e,i)=>i!==t)),this.dispatchEvent(new CustomEvent("files-changed",{detail:this.files})),0===this.files.length&&this.setError(e,null)}setError(t="file",e){"file"===t&&(this.error=!!e,this.errorMessage=e),"image"===t&&(this.errorTextMessage=e)}renderLoadingContainer(t){return e`
+            ${this.loading?e`
+                    <div class="progress-bar-container">
+                        <div class="progress-bar" role="progressbar" aria-label="Subiendo archivo…">
+                            <div class="progress-bar-fill" style="width: ${this.progress}%;"></div>
+                        </div>
+                    </div>
+                `:e`
+                    ${t}
+                `}
+        `}};n([_({type:Array}),a("design:type",Array)],Ne.prototype,"files",void 0),n([_({type:Number}),a("design:type",Object)],Ne.prototype,"simulatedDelay",void 0),n([T(),a("design:type",Object)],Ne.prototype,"loading",void 0),n([T(),a("design:type",Object)],Ne.prototype,"progress",void 0),n([T(),a("design:type",Object)],Ne.prototype,"errorTextMessage",void 0),n([j('input[ type="file" ]'),a("design:type",HTMLInputElement)],Ne.prototype,"fileInput",void 0),Ne=n([l("base-upload")],Ne);const Be=r`
    .progress-bar-container {
         min-height: 23px;
         display: flex;
@@ -2691,39 +2776,45 @@ const Yt=o`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
     .progress-bar {
         min-width: 80px;
         height: 8px;
-        background-color: var(--secondary-color-20);
+        background-color: var( --secondary-color-20 );
         border-radius: 999px;
         overflow: hidden;
     }
 
     .progress-bar-fill {
         height: 100%;
-        background-color: var(--primary-color);
+        background-color: var( --primary-color );
         transition: width 0.1s ease;
     }
-`;let te=class extends t{constructor(){super(...arguments),this.files=[],this.disabled=!1,this.simulatedDelay=0,this.loading=!1,this.progress=0,this.isDragging=!1}static{this.styles=o`
-    ${Zt}
+`,Re={"image/jpg":".jpg","image/jpeg":".jpeg","image/png":".png"},Ve={"application/pdf":".pdf","application/msword":".doc","application/vnd.openxmlformats-officedocument.wordprocessingml.document":".docx",...Re,"text/plain":".txt"};let Ue=class extends Ne{constructor(){super(...arguments),this.acceptedFileTypes=["image/jpeg","image/png","image/jpg"],this.maxFiles=3,this.maxFileSize=2097152,this.isDragging=!1,this.imageUrls=[],this.isMaxFilesReached=!1}static{this.styles=r`
+    ${Be}
 
     :host {
       font-family: 'Graphik', sans-serif;
     }
 
+    .upload-component-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
     .container {
       display: flex;
       gap: 16px;
       flex-direction: column;
-      border: 1px solid var(--secondary-color-10);
+      border: 1px solid var( --secondary-color-10 );
       border-radius: 4px;
       padding: 16px;
       align-items: center;
-      background-color: var(--white);
+      background-color: var( --white );
       transition: border 0.2s ease, outline 0.2s ease;
     }
 
     .container.dragging {
-      border: 1px dashed var(--secondary-color-40);
+      border: 1px dashed var( --secondary-color-40 );
     }
-      
+
     .icon {
       width: 40px;
       height: 40px
@@ -2737,29 +2828,29 @@ const Yt=o`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
     }
 
     .text-main {
-      ${_};
+      ${z};
       text-align: center;
       vertical-align: middle;
-      color: var(--secondary-color-80);
+      color: var( --secondary-color-80 );
     }
 
     .text-secondary {
-      ${I};
+      ${L};
       text-align: center;
       vertical-align: middle;
-      color: var(--secondary-color-60);
+      color: var( --secondary-color-60 );
     }
 
     .text-tertiary {
-      ${I};
+      ${L};
       text-align: center;
       vertical-align: middle;
-      color: var(--secondary-color-40);
+      color: var( --secondary-color-40 );
     }
 
     .button {
-      ${I};
-      background-color: var(--primary-color);
+      ${L};
+      background-color: var( --primary-color );
       border: none;
       padding: 4px 16px;
       cursor: pointer;
@@ -2769,521 +2860,590 @@ const Yt=o`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
       vertical-align: middle;
     }
 
-    :host([disabled]) .button {
-      background-color: var(--secondary-color-20);
-      color: var(--secondary-color-80);
+    :host([disabled]) .button, .container[disabled] .button {
+      background-color: var( --secondary-color-20 );
+      color: var( --secondary-color-80 );
       cursor: default;
     }
 
     input[type="file"] {
       display: none;
     }
-  `}async handleFiles(t){if(this.loading||this.disabled)return;const e=Array.isArray(this.files)?this.files:[],i=Array.from(t||[]).slice(0,3-e.length),o=this.simulatedDelay??0;if(o<=0)return this.files=[...e,...i],void this.dispatchEvent(new CustomEvent("files-changed",{detail:this.files}));this.loading=!0,this.progress=0,await this.updateComplete;const r=Date.now(),n=setInterval((()=>{const t=Date.now()-r,a=Math.min(Math.round(t/o*100),100);this.progress=a,this.progress>=100&&(clearInterval(n),this.files=[...e,...i],this.loading=!1,this.progress=0,this.dispatchEvent(new CustomEvent("files-changed",{detail:this.files})))}),10)}onFileInputChange(t){const e=t.target;this.handleFiles(e.files)}onDrop(t){t.preventDefault(),this.disabled||(this.isDragging=!1,this.handleFiles(t.dataTransfer?.files||null))}onDragOver(t){t.preventDefault(),this.disabled||(this.isDragging=!0)}onDragLeave(t){t.preventDefault(),this.disabled||(this.isDragging=!1)}render(){return e`
-      <div class="container ${this.isDragging?"dragging":""}"
-        @drop="${this.onDrop}"
-        @dragover="${this.onDragOver}"
-        @dragleave="${this.onDragLeave}"
-      >
-        <img class="icon"
-          src=${this.disabled?"/assets/img/image-upload-disabled.svg":"/assets/img/image-upload-circle.svg"}
-          alt="Subir imagen" 
-        />
-
-        <div class="text-container">
-          <div class="text-main">subí hasta 3 imágenes</div>
-
-          <div class="text-secondary">
-            Podés agregar un archivo o arrastrar y soltar acá
-          </div>
-
-          <div class="text-tertiary">.jpg, .jpeg, .png</div>
-        </div>
-
-        ${this.loading?e`
-            <div class="progress-bar-container">
-              <div class="progress-bar" role="progressbar" aria-label="Subiendo archivo…">
-                <div class="progress-bar-fill" style="width: ${this.progress}%;"></div>
-              </div>
-            </div>
-          `:e`
-            <label class="button">
-              agregar archivo
-              <input type="file" accept=".jpg,.jpeg,.png" multiple @change="${this.onFileInputChange}" />
-            </label>
-          `}
-      </div>
-    `}};a([A({type:Array}),s("design:type",Array)],te.prototype,"files",void 0),a([A({type:Boolean,reflect:!0}),s("design:type",Object)],te.prototype,"disabled",void 0),a([A({type:Number}),s("design:type",Object)],te.prototype,"simulatedDelay",void 0),a([T(),s("design:type",Object)],te.prototype,"loading",void 0),a([T(),s("design:type",Object)],te.prototype,"progress",void 0),a([T(),s("design:type",Object)],te.prototype,"isDragging",void 0),te=a([d("upload-image")],te);const ee=6048e5,ie=Symbol.for("constructDateFrom");function oe(t,e){return"function"==typeof t?t(e):t&&"object"==typeof t&&ie in t?t[ie](e):t instanceof Date?new t.constructor(e):new Date(e)}function re(t,e){return oe(e||t,t)}function ne(t,e,i){const o=re(t,i?.in);if(isNaN(e))return oe(t,NaN);if(!e)return o;const r=o.getDate(),n=oe(t,o.getTime());n.setMonth(o.getMonth()+e+1,0);return r>=n.getDate()?n:(o.setFullYear(n.getFullYear(),n.getMonth(),r),o)}let ae={};function se(){return ae}function de(t,e){const i=se(),o=e?.weekStartsOn??e?.locale?.options?.weekStartsOn??i.weekStartsOn??i.locale?.options?.weekStartsOn??0,r=re(t,e?.in),n=r.getDay(),a=(n<o?7:0)+n-o;return r.setDate(r.getDate()-a),r.setHours(0,0,0,0),r}function le(t,e){return de(t,{...e,weekStartsOn:1})}function ce(t,e){const i=re(t,e?.in),o=i.getFullYear(),r=oe(i,0);r.setFullYear(o+1,0,4),r.setHours(0,0,0,0);const n=le(r),a=oe(i,0);a.setFullYear(o,0,4),a.setHours(0,0,0,0);const s=le(a);return i.getTime()>=n.getTime()?o+1:i.getTime()>=s.getTime()?o:o-1}function pe(t){const e=re(t),i=new Date(Date.UTC(e.getFullYear(),e.getMonth(),e.getDate(),e.getHours(),e.getMinutes(),e.getSeconds(),e.getMilliseconds()));return i.setUTCFullYear(e.getFullYear()),+t-+i}function he(t,...e){const i=oe.bind(null,e.find((t=>"object"==typeof t)));return e.map(i)}function ue(t,e){const i=re(t,e?.in);return i.setHours(0,0,0,0),i}function be(t,e,i){return ne(t,12*e,i)}function me(t){return!(!((e=t)instanceof Date||"object"==typeof e&&"[object Date]"===Object.prototype.toString.call(e))&&"number"!=typeof t||isNaN(+re(t)));var e}function ge(t,e){const i=re(t,e?.in);return i.setDate(1),i.setHours(0,0,0,0),i}const ye={lessThanXSeconds:{one:"less than a second",other:"less than {{count}} seconds"},xSeconds:{one:"1 second",other:"{{count}} seconds"},halfAMinute:"half a minute",lessThanXMinutes:{one:"less than a minute",other:"less than {{count}} minutes"},xMinutes:{one:"1 minute",other:"{{count}} minutes"},aboutXHours:{one:"about 1 hour",other:"about {{count}} hours"},xHours:{one:"1 hour",other:"{{count}} hours"},xDays:{one:"1 day",other:"{{count}} days"},aboutXWeeks:{one:"about 1 week",other:"about {{count}} weeks"},xWeeks:{one:"1 week",other:"{{count}} weeks"},aboutXMonths:{one:"about 1 month",other:"about {{count}} months"},xMonths:{one:"1 month",other:"{{count}} months"},aboutXYears:{one:"about 1 year",other:"about {{count}} years"},xYears:{one:"1 year",other:"{{count}} years"},overXYears:{one:"over 1 year",other:"over {{count}} years"},almostXYears:{one:"almost 1 year",other:"almost {{count}} years"}};function fe(t){return(e={})=>{const i=e.width?String(e.width):t.defaultWidth;return t.formats[i]||t.formats[t.defaultWidth]}}const ve={date:fe({formats:{full:"EEEE, MMMM do, y",long:"MMMM do, y",medium:"MMM d, y",short:"MM/dd/yyyy"},defaultWidth:"full"}),time:fe({formats:{full:"h:mm:ss a zzzz",long:"h:mm:ss a z",medium:"h:mm:ss a",short:"h:mm a"},defaultWidth:"full"}),dateTime:fe({formats:{full:"{{date}} 'at' {{time}}",long:"{{date}} 'at' {{time}}",medium:"{{date}}, {{time}}",short:"{{date}}, {{time}}"},defaultWidth:"full"})},xe={lastWeek:"'last' eeee 'at' p",yesterday:"'yesterday at' p",today:"'today at' p",tomorrow:"'tomorrow at' p",nextWeek:"eeee 'at' p",other:"P"};function we(t){return(e,i)=>{let o;if("formatting"===(i?.context?String(i.context):"standalone")&&t.formattingValues){const e=t.defaultFormattingWidth||t.defaultWidth,r=i?.width?String(i.width):e;o=t.formattingValues[r]||t.formattingValues[e]}else{const e=t.defaultWidth,r=i?.width?String(i.width):t.defaultWidth;o=t.values[r]||t.values[e]}return o[t.argumentCallback?t.argumentCallback(e):e]}}function ke(t){return(e,i={})=>{const o=i.width,r=o&&t.matchPatterns[o]||t.matchPatterns[t.defaultMatchWidth],n=e.match(r);if(!n)return null;const a=n[0],s=o&&t.parsePatterns[o]||t.parsePatterns[t.defaultParseWidth],d=Array.isArray(s)?function(t,e){for(let i=0;i<t.length;i++)if(e(t[i]))return i;return}(s,(t=>t.test(a))):function(t,e){for(const i in t)if(Object.prototype.hasOwnProperty.call(t,i)&&e(t[i]))return i;return}(s,(t=>t.test(a)));let l;l=t.valueCallback?t.valueCallback(d):d,l=i.valueCallback?i.valueCallback(l):l;return{value:l,rest:e.slice(a.length)}}}var $e;const Se={code:"en-US",formatDistance:(t,e,i)=>{let o;const r=ye[t];return o="string"==typeof r?r:1===e?r.one:r.other.replace("{{count}}",e.toString()),i?.addSuffix?i.comparison&&i.comparison>0?"in "+o:o+" ago":o},formatLong:ve,formatRelative:(t,e,i,o)=>xe[t],localize:{ordinalNumber:(t,e)=>{const i=Number(t),o=i%100;if(o>20||o<10)switch(o%10){case 1:return i+"st";case 2:return i+"nd";case 3:return i+"rd"}return i+"th"},era:we({values:{narrow:["B","A"],abbreviated:["BC","AD"],wide:["Before Christ","Anno Domini"]},defaultWidth:"wide"}),quarter:we({values:{narrow:["1","2","3","4"],abbreviated:["Q1","Q2","Q3","Q4"],wide:["1st quarter","2nd quarter","3rd quarter","4th quarter"]},defaultWidth:"wide",argumentCallback:t=>t-1}),month:we({values:{narrow:["J","F","M","A","M","J","J","A","S","O","N","D"],abbreviated:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],wide:["January","February","March","April","May","June","July","August","September","October","November","December"]},defaultWidth:"wide"}),day:we({values:{narrow:["S","M","T","W","T","F","S"],short:["Su","Mo","Tu","We","Th","Fr","Sa"],abbreviated:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],wide:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]},defaultWidth:"wide"}),dayPeriod:we({values:{narrow:{am:"a",pm:"p",midnight:"mi",noon:"n",morning:"morning",afternoon:"afternoon",evening:"evening",night:"night"},abbreviated:{am:"AM",pm:"PM",midnight:"midnight",noon:"noon",morning:"morning",afternoon:"afternoon",evening:"evening",night:"night"},wide:{am:"a.m.",pm:"p.m.",midnight:"midnight",noon:"noon",morning:"morning",afternoon:"afternoon",evening:"evening",night:"night"}},defaultWidth:"wide",formattingValues:{narrow:{am:"a",pm:"p",midnight:"mi",noon:"n",morning:"in the morning",afternoon:"in the afternoon",evening:"in the evening",night:"at night"},abbreviated:{am:"AM",pm:"PM",midnight:"midnight",noon:"noon",morning:"in the morning",afternoon:"in the afternoon",evening:"in the evening",night:"at night"},wide:{am:"a.m.",pm:"p.m.",midnight:"midnight",noon:"noon",morning:"in the morning",afternoon:"in the afternoon",evening:"in the evening",night:"at night"}},defaultFormattingWidth:"wide"})},match:{ordinalNumber:($e={matchPattern:/^(\d+)(th|st|nd|rd)?/i,parsePattern:/\d+/i,valueCallback:t=>parseInt(t,10)},(t,e={})=>{const i=t.match($e.matchPattern);if(!i)return null;const o=i[0],r=t.match($e.parsePattern);if(!r)return null;let n=$e.valueCallback?$e.valueCallback(r[0]):r[0];return n=e.valueCallback?e.valueCallback(n):n,{value:n,rest:t.slice(o.length)}}),era:ke({matchPatterns:{narrow:/^(b|a)/i,abbreviated:/^(b\.?\s?c\.?|b\.?\s?c\.?\s?e\.?|a\.?\s?d\.?|c\.?\s?e\.?)/i,wide:/^(before christ|before common era|anno domini|common era)/i},defaultMatchWidth:"wide",parsePatterns:{any:[/^b/i,/^(a|c)/i]},defaultParseWidth:"any"}),quarter:ke({matchPatterns:{narrow:/^[1234]/i,abbreviated:/^q[1234]/i,wide:/^[1234](th|st|nd|rd)? quarter/i},defaultMatchWidth:"wide",parsePatterns:{any:[/1/i,/2/i,/3/i,/4/i]},defaultParseWidth:"any",valueCallback:t=>t+1}),month:ke({matchPatterns:{narrow:/^[jfmasond]/i,abbreviated:/^(jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)/i,wide:/^(january|february|march|april|may|june|july|august|september|october|november|december)/i},defaultMatchWidth:"wide",parsePatterns:{narrow:[/^j/i,/^f/i,/^m/i,/^a/i,/^m/i,/^j/i,/^j/i,/^a/i,/^s/i,/^o/i,/^n/i,/^d/i],any:[/^ja/i,/^f/i,/^mar/i,/^ap/i,/^may/i,/^jun/i,/^jul/i,/^au/i,/^s/i,/^o/i,/^n/i,/^d/i]},defaultParseWidth:"any"}),day:ke({matchPatterns:{narrow:/^[smtwf]/i,short:/^(su|mo|tu|we|th|fr|sa)/i,abbreviated:/^(sun|mon|tue|wed|thu|fri|sat)/i,wide:/^(sunday|monday|tuesday|wednesday|thursday|friday|saturday)/i},defaultMatchWidth:"wide",parsePatterns:{narrow:[/^s/i,/^m/i,/^t/i,/^w/i,/^t/i,/^f/i,/^s/i],any:[/^su/i,/^m/i,/^tu/i,/^w/i,/^th/i,/^f/i,/^sa/i]},defaultParseWidth:"any"}),dayPeriod:ke({matchPatterns:{narrow:/^(a|p|mi|n|(in the|at) (morning|afternoon|evening|night))/i,any:/^([ap]\.?\s?m\.?|midnight|noon|(in the|at) (morning|afternoon|evening|night))/i},defaultMatchWidth:"any",parsePatterns:{any:{am:/^a/i,pm:/^p/i,midnight:/^mi/i,noon:/^no/i,morning:/morning/i,afternoon:/afternoon/i,evening:/evening/i,night:/night/i}},defaultParseWidth:"any"})},options:{weekStartsOn:0,firstWeekContainsDate:1}};function Ce(t,e){const i=re(t,e?.in),o=function(t,e){const[i,o]=he(0,t,e),r=ue(i),n=ue(o),a=+r-pe(r),s=+n-pe(n);return Math.round((a-s)/864e5)}(i,function(t,e){const i=re(t,e?.in);return i.setFullYear(i.getFullYear(),0,1),i.setHours(0,0,0,0),i}(i));return o+1}function Ee(t,e){const i=re(t,e?.in),o=+le(i)-+function(t,e){const i=ce(t,e),o=oe(t,0);return o.setFullYear(i,0,4),o.setHours(0,0,0,0),le(o)}(i);return Math.round(o/ee)+1}function De(t,e){const i=re(t,e?.in),o=i.getFullYear(),r=se(),n=e?.firstWeekContainsDate??e?.locale?.options?.firstWeekContainsDate??r.firstWeekContainsDate??r.locale?.options?.firstWeekContainsDate??1,a=oe(e?.in||t,0);a.setFullYear(o+1,0,n),a.setHours(0,0,0,0);const s=de(a,e),d=oe(e?.in||t,0);d.setFullYear(o,0,n),d.setHours(0,0,0,0);const l=de(d,e);return+i>=+s?o+1:+i>=+l?o:o-1}function Oe(t,e){const i=re(t,e?.in),o=+de(i,e)-+function(t,e){const i=se(),o=e?.firstWeekContainsDate??e?.locale?.options?.firstWeekContainsDate??i.firstWeekContainsDate??i.locale?.options?.firstWeekContainsDate??1,r=De(t,e),n=oe(e?.in||t,0);return n.setFullYear(r,0,o),n.setHours(0,0,0,0),de(n,e)}(i,e);return Math.round(o/ee)+1}function Me(t,e){return(t<0?"-":"")+Math.abs(t).toString().padStart(e,"0")}const Fe={y(t,e){const i=t.getFullYear(),o=i>0?i:1-i;return Me("yy"===e?o%100:o,e.length)},M(t,e){const i=t.getMonth();return"M"===e?String(i+1):Me(i+1,2)},d:(t,e)=>Me(t.getDate(),e.length),a(t,e){const i=t.getHours()/12>=1?"pm":"am";switch(e){case"a":case"aa":return i.toUpperCase();case"aaa":return i;case"aaaaa":return i[0];default:return"am"===i?"a.m.":"p.m."}},h:(t,e)=>Me(t.getHours()%12||12,e.length),H:(t,e)=>Me(t.getHours(),e.length),m:(t,e)=>Me(t.getMinutes(),e.length),s:(t,e)=>Me(t.getSeconds(),e.length),S(t,e){const i=e.length,o=t.getMilliseconds();return Me(Math.trunc(o*Math.pow(10,i-3)),e.length)}},Pe="midnight",je="noon",Ae="morning",Te="afternoon",ze="evening",Le="night",Ie={G:function(t,e,i){const o=t.getFullYear()>0?1:0;switch(e){case"G":case"GG":case"GGG":return i.era(o,{width:"abbreviated"});case"GGGGG":return i.era(o,{width:"narrow"});default:return i.era(o,{width:"wide"})}},y:function(t,e,i){if("yo"===e){const e=t.getFullYear(),o=e>0?e:1-e;return i.ordinalNumber(o,{unit:"year"})}return Fe.y(t,e)},Y:function(t,e,i,o){const r=De(t,o),n=r>0?r:1-r;if("YY"===e){return Me(n%100,2)}return"Yo"===e?i.ordinalNumber(n,{unit:"year"}):Me(n,e.length)},R:function(t,e){return Me(ce(t),e.length)},u:function(t,e){return Me(t.getFullYear(),e.length)},Q:function(t,e,i){const o=Math.ceil((t.getMonth()+1)/3);switch(e){case"Q":return String(o);case"QQ":return Me(o,2);case"Qo":return i.ordinalNumber(o,{unit:"quarter"});case"QQQ":return i.quarter(o,{width:"abbreviated",context:"formatting"});case"QQQQQ":return i.quarter(o,{width:"narrow",context:"formatting"});default:return i.quarter(o,{width:"wide",context:"formatting"})}},q:function(t,e,i){const o=Math.ceil((t.getMonth()+1)/3);switch(e){case"q":return String(o);case"qq":return Me(o,2);case"qo":return i.ordinalNumber(o,{unit:"quarter"});case"qqq":return i.quarter(o,{width:"abbreviated",context:"standalone"});case"qqqqq":return i.quarter(o,{width:"narrow",context:"standalone"});default:return i.quarter(o,{width:"wide",context:"standalone"})}},M:function(t,e,i){const o=t.getMonth();switch(e){case"M":case"MM":return Fe.M(t,e);case"Mo":return i.ordinalNumber(o+1,{unit:"month"});case"MMM":return i.month(o,{width:"abbreviated",context:"formatting"});case"MMMMM":return i.month(o,{width:"narrow",context:"formatting"});default:return i.month(o,{width:"wide",context:"formatting"})}},L:function(t,e,i){const o=t.getMonth();switch(e){case"L":return String(o+1);case"LL":return Me(o+1,2);case"Lo":return i.ordinalNumber(o+1,{unit:"month"});case"LLL":return i.month(o,{width:"abbreviated",context:"standalone"});case"LLLLL":return i.month(o,{width:"narrow",context:"standalone"});default:return i.month(o,{width:"wide",context:"standalone"})}},w:function(t,e,i,o){const r=Oe(t,o);return"wo"===e?i.ordinalNumber(r,{unit:"week"}):Me(r,e.length)},I:function(t,e,i){const o=Ee(t);return"Io"===e?i.ordinalNumber(o,{unit:"week"}):Me(o,e.length)},d:function(t,e,i){return"do"===e?i.ordinalNumber(t.getDate(),{unit:"date"}):Fe.d(t,e)},D:function(t,e,i){const o=Ce(t);return"Do"===e?i.ordinalNumber(o,{unit:"dayOfYear"}):Me(o,e.length)},E:function(t,e,i){const o=t.getDay();switch(e){case"E":case"EE":case"EEE":return i.day(o,{width:"abbreviated",context:"formatting"});case"EEEEE":return i.day(o,{width:"narrow",context:"formatting"});case"EEEEEE":return i.day(o,{width:"short",context:"formatting"});default:return i.day(o,{width:"wide",context:"formatting"})}},e:function(t,e,i,o){const r=t.getDay(),n=(r-o.weekStartsOn+8)%7||7;switch(e){case"e":return String(n);case"ee":return Me(n,2);case"eo":return i.ordinalNumber(n,{unit:"day"});case"eee":return i.day(r,{width:"abbreviated",context:"formatting"});case"eeeee":return i.day(r,{width:"narrow",context:"formatting"});case"eeeeee":return i.day(r,{width:"short",context:"formatting"});default:return i.day(r,{width:"wide",context:"formatting"})}},c:function(t,e,i,o){const r=t.getDay(),n=(r-o.weekStartsOn+8)%7||7;switch(e){case"c":return String(n);case"cc":return Me(n,e.length);case"co":return i.ordinalNumber(n,{unit:"day"});case"ccc":return i.day(r,{width:"abbreviated",context:"standalone"});case"ccccc":return i.day(r,{width:"narrow",context:"standalone"});case"cccccc":return i.day(r,{width:"short",context:"standalone"});default:return i.day(r,{width:"wide",context:"standalone"})}},i:function(t,e,i){const o=t.getDay(),r=0===o?7:o;switch(e){case"i":return String(r);case"ii":return Me(r,e.length);case"io":return i.ordinalNumber(r,{unit:"day"});case"iii":return i.day(o,{width:"abbreviated",context:"formatting"});case"iiiii":return i.day(o,{width:"narrow",context:"formatting"});case"iiiiii":return i.day(o,{width:"short",context:"formatting"});default:return i.day(o,{width:"wide",context:"formatting"})}},a:function(t,e,i){const o=t.getHours()/12>=1?"pm":"am";switch(e){case"a":case"aa":return i.dayPeriod(o,{width:"abbreviated",context:"formatting"});case"aaa":return i.dayPeriod(o,{width:"abbreviated",context:"formatting"}).toLowerCase();case"aaaaa":return i.dayPeriod(o,{width:"narrow",context:"formatting"});default:return i.dayPeriod(o,{width:"wide",context:"formatting"})}},b:function(t,e,i){const o=t.getHours();let r;switch(r=12===o?je:0===o?Pe:o/12>=1?"pm":"am",e){case"b":case"bb":return i.dayPeriod(r,{width:"abbreviated",context:"formatting"});case"bbb":return i.dayPeriod(r,{width:"abbreviated",context:"formatting"}).toLowerCase();case"bbbbb":return i.dayPeriod(r,{width:"narrow",context:"formatting"});default:return i.dayPeriod(r,{width:"wide",context:"formatting"})}},B:function(t,e,i){const o=t.getHours();let r;switch(r=o>=17?ze:o>=12?Te:o>=4?Ae:Le,e){case"B":case"BB":case"BBB":return i.dayPeriod(r,{width:"abbreviated",context:"formatting"});case"BBBBB":return i.dayPeriod(r,{width:"narrow",context:"formatting"});default:return i.dayPeriod(r,{width:"wide",context:"formatting"})}},h:function(t,e,i){if("ho"===e){let e=t.getHours()%12;return 0===e&&(e=12),i.ordinalNumber(e,{unit:"hour"})}return Fe.h(t,e)},H:function(t,e,i){return"Ho"===e?i.ordinalNumber(t.getHours(),{unit:"hour"}):Fe.H(t,e)},K:function(t,e,i){const o=t.getHours()%12;return"Ko"===e?i.ordinalNumber(o,{unit:"hour"}):Me(o,e.length)},k:function(t,e,i){let o=t.getHours();return 0===o&&(o=24),"ko"===e?i.ordinalNumber(o,{unit:"hour"}):Me(o,e.length)},m:function(t,e,i){return"mo"===e?i.ordinalNumber(t.getMinutes(),{unit:"minute"}):Fe.m(t,e)},s:function(t,e,i){return"so"===e?i.ordinalNumber(t.getSeconds(),{unit:"second"}):Fe.s(t,e)},S:function(t,e){return Fe.S(t,e)},X:function(t,e,i){const o=t.getTimezoneOffset();if(0===o)return"Z";switch(e){case"X":return Be(o);case"XXXX":case"XX":return Ne(o);default:return Ne(o,":")}},x:function(t,e,i){const o=t.getTimezoneOffset();switch(e){case"x":return Be(o);case"xxxx":case"xx":return Ne(o);default:return Ne(o,":")}},O:function(t,e,i){const o=t.getTimezoneOffset();switch(e){case"O":case"OO":case"OOO":return"GMT"+_e(o,":");default:return"GMT"+Ne(o,":")}},z:function(t,e,i){const o=t.getTimezoneOffset();switch(e){case"z":case"zz":case"zzz":return"GMT"+_e(o,":");default:return"GMT"+Ne(o,":")}},t:function(t,e,i){return Me(Math.trunc(+t/1e3),e.length)},T:function(t,e,i){return Me(+t,e.length)}};function _e(t,e=""){const i=t>0?"-":"+",o=Math.abs(t),r=Math.trunc(o/60),n=o%60;return 0===n?i+String(r):i+String(r)+e+Me(n,2)}function Be(t,e){if(t%60==0){return(t>0?"-":"+")+Me(Math.abs(t)/60,2)}return Ne(t,e)}function Ne(t,e=""){const i=t>0?"-":"+",o=Math.abs(t);return i+Me(Math.trunc(o/60),2)+e+Me(o%60,2)}const Re=(t,e)=>{switch(t){case"P":return e.date({width:"short"});case"PP":return e.date({width:"medium"});case"PPP":return e.date({width:"long"});default:return e.date({width:"full"})}},Ve=(t,e)=>{switch(t){case"p":return e.time({width:"short"});case"pp":return e.time({width:"medium"});case"ppp":return e.time({width:"long"});default:return e.time({width:"full"})}},qe={p:Ve,P:(t,e)=>{const i=t.match(/(P+)(p+)?/)||[],o=i[1],r=i[2];if(!r)return Re(t,e);let n;switch(o){case"P":n=e.dateTime({width:"short"});break;case"PP":n=e.dateTime({width:"medium"});break;case"PPP":n=e.dateTime({width:"long"});break;default:n=e.dateTime({width:"full"})}return n.replace("{{date}}",Re(o,e)).replace("{{time}}",Ve(r,e))}},We=/^D+$/,Ye=/^Y+$/,Ue=["D","DD","YY","YYYY"];const He=/[yYQqMLwIdDecihHKkms]o|(\w)\1*|''|'(''|[^'])+('|$)|./g,Ge=/P+p+|P+|p+|''|'(''|[^'])+('|$)|./g,Ke=/^'([^]*?)'?$/,Xe=/''/g,Qe=/[a-zA-Z]/;function Je(t,e,i){const o=se(),r=o.locale??Se,n=o.firstWeekContainsDate??o.locale?.options?.firstWeekContainsDate??1,a=o.weekStartsOn??o.locale?.options?.weekStartsOn??0,s=re(t,i?.in);if(!me(s))throw new RangeError("Invalid time value");let d=e.match(Ge).map((t=>{const e=t[0];if("p"===e||"P"===e){return(0,qe[e])(t,r.formatLong)}return t})).join("").match(He).map((t=>{if("''"===t)return{isToken:!1,value:"'"};const e=t[0];if("'"===e)return{isToken:!1,value:Ze(t)};if(Ie[e])return{isToken:!0,value:t};if(e.match(Qe))throw new RangeError("Format string contains an unescaped latin alphabet character `"+e+"`");return{isToken:!1,value:t}}));r.localize.preprocessor&&(d=r.localize.preprocessor(s,d));const l={firstWeekContainsDate:n,weekStartsOn:a,locale:r};return d.map((i=>{if(!i.isToken)return i.value;const o=i.value;(function(t){return Ye.test(t)}(o)||function(t){return We.test(t)}(o))&&function(t,e,i){const o=function(t,e,i){const o="Y"===t[0]?"years":"days of the month";return`Use \`${t.toLowerCase()}\` instead of \`${t}\` (in \`${e}\`) for formatting ${o} to the input \`${i}\`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md`}(t,e,i);if(console.warn(o),Ue.includes(t))throw new RangeError(o)}(o,e,String(t));return(0,Ie[o[0]])(s,o,r.localize,l)})).join("")}function Ze(t){const e=t.match(Ke);return e?e[1].replace(Xe,"'"):t}function ti(t,e){return re(t,e?.in).getDate()}function ei(t,e){const i=re(t,e?.in),o=i.getFullYear(),r=i.getMonth(),n=oe(i,0);return n.setFullYear(o,r+1,0),n.setHours(0,0,0,0),n.getDate()}function ii(t,e){return+re(t)>+re(e)}function oi(t,e){return+re(t)<+re(e)}function ri(t,e,i){const[o,r]=he(0,t,e);return o.getFullYear()===r.getFullYear()&&o.getMonth()===r.getMonth()}function ni(t,e,i){const[o,r]=he(0,t,e);return o.getFullYear()===r.getFullYear()}function ai(t,e){return function(t,e){const[i,o]=he(0,t,e);return+ue(i)===+ue(o)}(oe(t,t),function(t){return oe(t,Date.now())}(t))}let si=class extends t{constructor(){super(...arguments),this.selectedDate=null,this.viewDate=new Date,this.isMobile=!1,this.calendarWidth=0,this.minDate=null,this.maxDate=null,this.currentView="days",this.handleOutsideClick=t=>{const e=this.getRootNode(),i=e?.host;!i||t.composedPath().includes(this)||t.composedPath().includes(i)||this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0}))}}static{this.styles=o`
-    /* Estilos generales del contenedor del calendario (escritorio) */
-    .calendar-container {
-      position: absolute;
-      top: 100%;
-      left: 0;
-      z-index: 10;
-      border: var(--border-weight-default, 1px) solid var(--secondary-randstad-dark-blue-10, #e7e8ec);
-      background: var(--secondary-white, #fff);
-      border-radius: 4px;
-      margin-top: 8px;
-      padding: 16px;
-      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-      font-family: Graphik;
-      display: flex;
-      flex-direction: column;
-      box-sizing: border-box;
-      min-width: 360px;
-    }
     
-    /* El header no tiene margin-bottom */
-    .header {
-      margin-bottom: 0;
-    }
-    
-    /* El separador no tiene margin-top para no dejar espacio con el header */
-    .weekdays-separator {
+    .image-gallery {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 16px;
       width: 100%;
-      height: 1px;
-      background-color: var(--secondary-randstad-dark-blue-10, #e7e8ec);
-      margin-top: 0;
-      margin-bottom: 16px; 
     }
 
-    /* Estilos del encabezado de navegación (botones y título) */
-    .header {
+    .image-item {
+      position: relative; 
+      width: 100px;
+      height: 99px;
+      border: 1px solid transparent;
+      border-radius: 4px;
+      overflow: hidden;
       display: flex;
-      justify-content: space-between;
+      justify-content: center;
       align-items: center;
     }
 
-    /* Estilos generales para los botones de navegación */
-    .nav-button {
-      background: none;
-      border: none;
-      cursor: pointer;
-      padding: 8px;
-      color: var(--primary-randstad-blue-70, #2175d9);
-      border-radius: 50%;
-      transition: background-color 0.2s;
-      gap: 8px;
+    .image-item img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      opacity: 0.2;
     }
 
-    .nav-button:hover {
-      background-color: var(--secondary-randstad-light-blue-10, #e8f1fb);
+    /* Solución definitiva para el posicionamiento y el padding del botón. */
+    .image-item randstad-button {
+      position: absolute;
+      top: 0;
+      right: 0;
+      z-index: 10;
+      --content-padding: 8px;
     }
 
-    .header-left,
-    .header-right {
-      display: flex;
-      align-items: center;
-      gap: 4px;
+    .text-main.error {
+      color: var(--ui-negative, #E00F0F);
     }
+  `}getFileConfig(){const t="tu archivo no es válido";return{baseMaxFiles:this.maxFiles,maxFileSize:this.maxFileSize,acceptedFileTypes:this.acceptedFileTypes,errorMessageType:t,errorMessageSize:t,typeError:"image"}}getTextAcceptedFileTypes(){return this.getReadableFileTypes(this.acceptedFileTypes,Re)}getTextMaxFileSize(){return this.baseGetTextMaxFileSize(this.maxFileSize)}updated(t){t.has("files")&&this.files&&(this.imageUrls.forEach((t=>URL.revokeObjectURL(t))),this.imageUrls=this.files.map((t=>URL.createObjectURL(t))))}disconnectedCallback(){super.disconnectedCallback(),this.imageUrls.forEach((t=>URL.revokeObjectURL(t)))}async handleFiles(t){await this.baseHandleFiles(t,this.getFileConfig())}onFileInputChange(t){this.baseOnFileInputChange(t,this.getFileConfig())}onDrop(t){t.preventDefault(),this.disabled||(this.isDragging=!1,this.handleFiles(t.dataTransfer?.files||null))}onDragOver(t){t.preventDefault(),this.disabled||(this.isDragging=!0)}onDragLeave(t){t.preventDefault(),this.disabled||(this.isDragging=!1)}willUpdate(t){t.has("files")&&(this.isMaxFilesReached=(this.files||[]).length>=3)}render(){const t=this.disabled||this.isMaxFilesReached,i=this.disabled,r=this.errorTextMessage||`subí hasta ${this.maxFiles} imágenes`,o=this.errorTextMessage?"assets/img/image-upload-error.svg":t?"assets/img/image-upload-disabled.svg":"assets/img/image-upload-circle.svg",s=`container ${this.isDragging?"dragging":""} ${this.errorTextMessage?"error":""}`,n=e`
+      <label class="button">
+        agregar archivo
 
-    .month-year-button {
-      ${_}
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 8px;
-      background: none;
-      border: none;
-      cursor: pointer;
-      transition: background-color 0.2s;
-      color: var(--secondary-randstad-dark-blue-80, #3c4257);
-      border-radius: 16px;
-      width: auto;
-      height: 41px;
-      padding: 8px;
-    }
+        <input
+          type="file"
+          accept=${this.acceptedFileTypes.join(",")}
+          ?multiple=${this.maxFiles>1}
+          @change="${this.onFileInputChange}"
+          ?disabled="${t}"
+        />
+      </label>
+    `;return e`
+      <div class="upload-component-wrapper">
+        ${this.imageUrls.length>0?e`
+            <div class="image-gallery">
+              ${this.imageUrls.map(((t,r)=>e`
+                  <div class="image-item">
+                    <img src="${t}" loading="lazy" alt="Uploaded image" />
+
+                    <randstad-button
+                      .variant=${"button-icon"}
+                      .iconName=${"trash"}
+                      @click=${()=>this.removeFile(r,"image")}
+                      ?disabled=${i}
+                    >
+                    </randstad-button>
+                  </div>
+                `))}
+              </div>
+            `:""}
 
-    .month-year-button:hover {
-      background-color: var(--secondary-randstad-light-blue-10, #e8f1fb);
-    }
+        <div
+          class="${s}"
+          ?disabled="${t}"
+          @drop="${this.onDrop}"
+          @dragover="${this.onDragOver}"
+          @dragleave="${this.onDragLeave}"
+        >
+          <img
+            class="icon"
+            src=${o}
+            alt="Subir imagen"
+          />
 
-    .month-year-button randstad-icon {
-      color: var(--primary-randstad-blue-70, #2175d9);
-    }
+          <div class="text-container">
+            <div class="text-main ${this.errorTextMessage?"error":""}">${r}</div>
 
-    /* Contenedor de los nombres de los días de la semana */
-    .weekdays {
-      display: grid;
-      place-items: center; 
-      grid-template-columns: repeat(7, 1fr);
-      text-align: center;
-      color: var(--secondary-randstad-dark-blue-60, #6c7387);
-      opacity: 1;
-      margin-bottom: 8px; /* Gap de 8px entre nombres y días */
-      font-size: 16px;
-      font-style: normal;
-      font-weight: 500;
-      margin-top: 0;
-    }
-
-    /* Cuadrícula para los días del mes */
-    .days-grid {
-      display: grid;
-      place-items: center;
-      grid-template-columns: repeat(7, 1fr);
-      gap: 8px;
-    }
+            <div class="text-secondary">
+              Podés agregar un archivo o arrastrar y soltar acá
+            </div>
 
-    /* Estilos para cada botón de día */
-    .day {
-      ${B}
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 40px;
-      height: 40px;
-      border-radius: 50%;
-      cursor: pointer;
-      background-color: transparent;
-      border: none;
-      color: var(--secondary-randstad-dark-blue-80, #3c4257);
-      padding: 0;
-      position: relative;
-    }
+            <div class="text-tertiary">${this.getTextAcceptedFileTypes()} / max. ${this.getTextMaxFileSize()}MB</div>
+          </div>
 
-    .day:hover {
-      background-color: var(--secondary-randstad-light-blue-10, #e8f1fb);
-    }
+          ${this.renderLoadingContainer(n)}
+        </div>
+      </div>
+    `}};n([_({type:Array}),a("design:type",Array)],Ue.prototype,"acceptedFileTypes",void 0),n([_({type:Number}),a("design:type",Object)],Ue.prototype,"maxFiles",void 0),n([_({type:Number}),a("design:type",Object)],Ue.prototype,"maxFileSize",void 0),n([T(),a("design:type",Object)],Ue.prototype,"isDragging",void 0),n([T(),a("design:type",Array)],Ue.prototype,"imageUrls",void 0),n([T(),a("design:type",Boolean)],Ue.prototype,"isMaxFilesReached",void 0),Ue=n([l("upload-image")],Ue);const He=6048e5,qe=Symbol.for("constructDateFrom");function We(t,e){return"function"==typeof t?t(e):t&&"object"==typeof t&&qe in t?t[qe](e):t instanceof Date?new t.constructor(e):new Date(e)}function Ye(t,e){return We(e||t,t)}function Ge(t,e,i){const r=Ye(t,i?.in);if(isNaN(e))return We(t,NaN);if(!e)return r;const o=r.getDate(),s=We(t,r.getTime());s.setMonth(r.getMonth()+e+1,0);return o>=s.getDate()?s:(r.setFullYear(s.getFullYear(),s.getMonth(),o),r)}let Xe={};function Ke(){return Xe}function Qe(t,e){const i=Ke(),r=e?.weekStartsOn??e?.locale?.options?.weekStartsOn??i.weekStartsOn??i.locale?.options?.weekStartsOn??0,o=Ye(t,e?.in),s=o.getDay(),n=(s<r?7:0)+s-r;return o.setDate(o.getDate()-n),o.setHours(0,0,0,0),o}function Je(t,e){return Qe(t,{...e,weekStartsOn:1})}function Ze(t,e){const i=Ye(t,e?.in),r=i.getFullYear(),o=We(i,0);o.setFullYear(r+1,0,4),o.setHours(0,0,0,0);const s=Je(o),n=We(i,0);n.setFullYear(r,0,4),n.setHours(0,0,0,0);const a=Je(n);return i.getTime()>=s.getTime()?r+1:i.getTime()>=a.getTime()?r:r-1}function ti(t){const e=Ye(t),i=new Date(Date.UTC(e.getFullYear(),e.getMonth(),e.getDate(),e.getHours(),e.getMinutes(),e.getSeconds(),e.getMilliseconds()));return i.setUTCFullYear(e.getFullYear()),+t-+i}function ei(t,...e){const i=We.bind(null,e.find((t=>"object"==typeof t)));return e.map(i)}function ii(t,e){const i=Ye(t,e?.in);return i.setHours(0,0,0,0),i}function ri(t,e,i){return Ge(t,12*e,i)}function oi(t){return!(!((e=t)instanceof Date||"object"==typeof e&&"[object Date]"===Object.prototype.toString.call(e))&&"number"!=typeof t||isNaN(+Ye(t)));var e}function si(t,e){const i=Ye(t,e?.in);return i.setDate(1),i.setHours(0,0,0,0),i}const ni={lessThanXSeconds:{one:"less than a second",other:"less than {{count}} seconds"},xSeconds:{one:"1 second",other:"{{count}} seconds"},halfAMinute:"half a minute",lessThanXMinutes:{one:"less than a minute",other:"less than {{count}} minutes"},xMinutes:{one:"1 minute",other:"{{count}} minutes"},aboutXHours:{one:"about 1 hour",other:"about {{count}} hours"},xHours:{one:"1 hour",other:"{{count}} hours"},xDays:{one:"1 day",other:"{{count}} days"},aboutXWeeks:{one:"about 1 week",other:"about {{count}} weeks"},xWeeks:{one:"1 week",other:"{{count}} weeks"},aboutXMonths:{one:"about 1 month",other:"about {{count}} months"},xMonths:{one:"1 month",other:"{{count}} months"},aboutXYears:{one:"about 1 year",other:"about {{count}} years"},xYears:{one:"1 year",other:"{{count}} years"},overXYears:{one:"over 1 year",other:"over {{count}} years"},almostXYears:{one:"almost 1 year",other:"almost {{count}} years"}};function ai(t){return(e={})=>{const i=e.width?String(e.width):t.defaultWidth;return t.formats[i]||t.formats[t.defaultWidth]}}const li={date:ai({formats:{full:"EEEE, MMMM do, y",long:"MMMM do, y",medium:"MMM d, y",short:"MM/dd/yyyy"},defaultWidth:"full"}),time:ai({formats:{full:"h:mm:ss a zzzz",long:"h:mm:ss a z",medium:"h:mm:ss a",short:"h:mm a"},defaultWidth:"full"}),dateTime:ai({formats:{full:"{{date}} 'at' {{time}}",long:"{{date}} 'at' {{time}}",medium:"{{date}}, {{time}}",short:"{{date}}, {{time}}"},defaultWidth:"full"})},di={lastWeek:"'last' eeee 'at' p",yesterday:"'yesterday at' p",today:"'today at' p",tomorrow:"'tomorrow at' p",nextWeek:"eeee 'at' p",other:"P"};function ci(t){return(e,i)=>{let r;if("formatting"===(i?.context?String(i.context):"standalone")&&t.formattingValues){const e=t.defaultFormattingWidth||t.defaultWidth,o=i?.width?String(i.width):e;r=t.formattingValues[o]||t.formattingValues[e]}else{const e=t.defaultWidth,o=i?.width?String(i.width):t.defaultWidth;r=t.values[o]||t.values[e]}return r[t.argumentCallback?t.argumentCallback(e):e]}}function hi(t){return(e,i={})=>{const r=i.width,o=r&&t.matchPatterns[r]||t.matchPatterns[t.defaultMatchWidth],s=e.match(o);if(!s)return null;const n=s[0],a=r&&t.parsePatterns[r]||t.parsePatterns[t.defaultParseWidth],l=Array.isArray(a)?function(t,e){for(let i=0;i<t.length;i++)if(e(t[i]))return i;return}(a,(t=>t.test(n))):function(t,e){for(const i in t)if(Object.prototype.hasOwnProperty.call(t,i)&&e(t[i]))return i;return}(a,(t=>t.test(n)));let d;d=t.valueCallback?t.valueCallback(l):l,d=i.valueCallback?i.valueCallback(d):d;return{value:d,rest:e.slice(n.length)}}}var pi;const ui={code:"en-US",formatDistance:(t,e,i)=>{let r;const o=ni[t];return r="string"==typeof o?o:1===e?o.one:o.other.replace("{{count}}",e.toString()),i?.addSuffix?i.comparison&&i.comparison>0?"in "+r:r+" ago":r},formatLong:li,formatRelative:(t,e,i,r)=>di[t],localize:{ordinalNumber:(t,e)=>{const i=Number(t),r=i%100;if(r>20||r<10)switch(r%10){case 1:return i+"st";case 2:return i+"nd";case 3:return i+"rd"}return i+"th"},era:ci({values:{narrow:["B","A"],abbreviated:["BC","AD"],wide:["Before Christ","Anno Domini"]},defaultWidth:"wide"}),quarter:ci({values:{narrow:["1","2","3","4"],abbreviated:["Q1","Q2","Q3","Q4"],wide:["1st quarter","2nd quarter","3rd quarter","4th quarter"]},defaultWidth:"wide",argumentCallback:t=>t-1}),month:ci({values:{narrow:["J","F","M","A","M","J","J","A","S","O","N","D"],abbreviated:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],wide:["January","February","March","April","May","June","July","August","September","October","November","December"]},defaultWidth:"wide"}),day:ci({values:{narrow:["S","M","T","W","T","F","S"],short:["Su","Mo","Tu","We","Th","Fr","Sa"],abbreviated:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],wide:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]},defaultWidth:"wide"}),dayPeriod:ci({values:{narrow:{am:"a",pm:"p",midnight:"mi",noon:"n",morning:"morning",afternoon:"afternoon",evening:"evening",night:"night"},abbreviated:{am:"AM",pm:"PM",midnight:"midnight",noon:"noon",morning:"morning",afternoon:"afternoon",evening:"evening",night:"night"},wide:{am:"a.m.",pm:"p.m.",midnight:"midnight",noon:"noon",morning:"morning",afternoon:"afternoon",evening:"evening",night:"night"}},defaultWidth:"wide",formattingValues:{narrow:{am:"a",pm:"p",midnight:"mi",noon:"n",morning:"in the morning",afternoon:"in the afternoon",evening:"in the evening",night:"at night"},abbreviated:{am:"AM",pm:"PM",midnight:"midnight",noon:"noon",morning:"in the morning",afternoon:"in the afternoon",evening:"in the evening",night:"at night"},wide:{am:"a.m.",pm:"p.m.",midnight:"midnight",noon:"noon",morning:"in the morning",afternoon:"in the afternoon",evening:"in the evening",night:"at night"}},defaultFormattingWidth:"wide"})},match:{ordinalNumber:(pi={matchPattern:/^(\d+)(th|st|nd|rd)?/i,parsePattern:/\d+/i,valueCallback:t=>parseInt(t,10)},(t,e={})=>{const i=t.match(pi.matchPattern);if(!i)return null;const r=i[0],o=t.match(pi.parsePattern);if(!o)return null;let s=pi.valueCallback?pi.valueCallback(o[0]):o[0];return s=e.valueCallback?e.valueCallback(s):s,{value:s,rest:t.slice(r.length)}}),era:hi({matchPatterns:{narrow:/^(b|a)/i,abbreviated:/^(b\.?\s?c\.?|b\.?\s?c\.?\s?e\.?|a\.?\s?d\.?|c\.?\s?e\.?)/i,wide:/^(before christ|before common era|anno domini|common era)/i},defaultMatchWidth:"wide",parsePatterns:{any:[/^b/i,/^(a|c)/i]},defaultParseWidth:"any"}),quarter:hi({matchPatterns:{narrow:/^[1234]/i,abbreviated:/^q[1234]/i,wide:/^[1234](th|st|nd|rd)? quarter/i},defaultMatchWidth:"wide",parsePatterns:{any:[/1/i,/2/i,/3/i,/4/i]},defaultParseWidth:"any",valueCallback:t=>t+1}),month:hi({matchPatterns:{narrow:/^[jfmasond]/i,abbreviated:/^(jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)/i,wide:/^(january|february|march|april|may|june|july|august|september|october|november|december)/i},defaultMatchWidth:"wide",parsePatterns:{narrow:[/^j/i,/^f/i,/^m/i,/^a/i,/^m/i,/^j/i,/^j/i,/^a/i,/^s/i,/^o/i,/^n/i,/^d/i],any:[/^ja/i,/^f/i,/^mar/i,/^ap/i,/^may/i,/^jun/i,/^jul/i,/^au/i,/^s/i,/^o/i,/^n/i,/^d/i]},defaultParseWidth:"any"}),day:hi({matchPatterns:{narrow:/^[smtwf]/i,short:/^(su|mo|tu|we|th|fr|sa)/i,abbreviated:/^(sun|mon|tue|wed|thu|fri|sat)/i,wide:/^(sunday|monday|tuesday|wednesday|thursday|friday|saturday)/i},defaultMatchWidth:"wide",parsePatterns:{narrow:[/^s/i,/^m/i,/^t/i,/^w/i,/^t/i,/^f/i,/^s/i],any:[/^su/i,/^m/i,/^tu/i,/^w/i,/^th/i,/^f/i,/^sa/i]},defaultParseWidth:"any"}),dayPeriod:hi({matchPatterns:{narrow:/^(a|p|mi|n|(in the|at) (morning|afternoon|evening|night))/i,any:/^([ap]\.?\s?m\.?|midnight|noon|(in the|at) (morning|afternoon|evening|night))/i},defaultMatchWidth:"any",parsePatterns:{any:{am:/^a/i,pm:/^p/i,midnight:/^mi/i,noon:/^no/i,morning:/morning/i,afternoon:/afternoon/i,evening:/evening/i,night:/night/i}},defaultParseWidth:"any"})},options:{weekStartsOn:0,firstWeekContainsDate:1}};function bi(t,e){const i=Ye(t,e?.in),r=function(t,e){const[i,r]=ei(0,t,e),o=ii(i),s=ii(r),n=+o-ti(o),a=+s-ti(s);return Math.round((n-a)/864e5)}(i,function(t,e){const i=Ye(t,e?.in);return i.setFullYear(i.getFullYear(),0,1),i.setHours(0,0,0,0),i}(i));return r+1}function gi(t,e){const i=Ye(t,e?.in),r=+Je(i)-+function(t,e){const i=Ze(t,e),r=We(t,0);return r.setFullYear(i,0,4),r.setHours(0,0,0,0),Je(r)}(i);return Math.round(r/He)+1}function mi(t,e){const i=Ye(t,e?.in),r=i.getFullYear(),o=Ke(),s=e?.firstWeekContainsDate??e?.locale?.options?.firstWeekContainsDate??o.firstWeekContainsDate??o.locale?.options?.firstWeekContainsDate??1,n=We(e?.in||t,0);n.setFullYear(r+1,0,s),n.setHours(0,0,0,0);const a=Qe(n,e),l=We(e?.in||t,0);l.setFullYear(r,0,s),l.setHours(0,0,0,0);const d=Qe(l,e);return+i>=+a?r+1:+i>=+d?r:r-1}function yi(t,e){const i=Ye(t,e?.in),r=+Qe(i,e)-+function(t,e){const i=Ke(),r=e?.firstWeekContainsDate??e?.locale?.options?.firstWeekContainsDate??i.firstWeekContainsDate??i.locale?.options?.firstWeekContainsDate??1,o=mi(t,e),s=We(e?.in||t,0);return s.setFullYear(o,0,r),s.setHours(0,0,0,0),Qe(s,e)}(i,e);return Math.round(r/He)+1}function vi(t,e){return(t<0?"-":"")+Math.abs(t).toString().padStart(e,"0")}const fi={y(t,e){const i=t.getFullYear(),r=i>0?i:1-i;return vi("yy"===e?r%100:r,e.length)},M(t,e){const i=t.getMonth();return"M"===e?String(i+1):vi(i+1,2)},d:(t,e)=>vi(t.getDate(),e.length),a(t,e){const i=t.getHours()/12>=1?"pm":"am";switch(e){case"a":case"aa":return i.toUpperCase();case"aaa":return i;case"aaaaa":return i[0];default:return"am"===i?"a.m.":"p.m."}},h:(t,e)=>vi(t.getHours()%12||12,e.length),H:(t,e)=>vi(t.getHours(),e.length),m:(t,e)=>vi(t.getMinutes(),e.length),s:(t,e)=>vi(t.getSeconds(),e.length),S(t,e){const i=e.length,r=t.getMilliseconds();return vi(Math.trunc(r*Math.pow(10,i-3)),e.length)}},xi="midnight",wi="noon",ki="morning",$i="afternoon",Si="evening",Ci="night",Ei={G:function(t,e,i){const r=t.getFullYear()>0?1:0;switch(e){case"G":case"GG":case"GGG":return i.era(r,{width:"abbreviated"});case"GGGGG":return i.era(r,{width:"narrow"});default:return i.era(r,{width:"wide"})}},y:function(t,e,i){if("yo"===e){const e=t.getFullYear(),r=e>0?e:1-e;return i.ordinalNumber(r,{unit:"year"})}return fi.y(t,e)},Y:function(t,e,i,r){const o=mi(t,r),s=o>0?o:1-o;if("YY"===e){return vi(s%100,2)}return"Yo"===e?i.ordinalNumber(s,{unit:"year"}):vi(s,e.length)},R:function(t,e){return vi(Ze(t),e.length)},u:function(t,e){return vi(t.getFullYear(),e.length)},Q:function(t,e,i){const r=Math.ceil((t.getMonth()+1)/3);switch(e){case"Q":return String(r);case"QQ":return vi(r,2);case"Qo":return i.ordinalNumber(r,{unit:"quarter"});case"QQQ":return i.quarter(r,{width:"abbreviated",context:"formatting"});case"QQQQQ":return i.quarter(r,{width:"narrow",context:"formatting"});default:return i.quarter(r,{width:"wide",context:"formatting"})}},q:function(t,e,i){const r=Math.ceil((t.getMonth()+1)/3);switch(e){case"q":return String(r);case"qq":return vi(r,2);case"qo":return i.ordinalNumber(r,{unit:"quarter"});case"qqq":return i.quarter(r,{width:"abbreviated",context:"standalone"});case"qqqqq":return i.quarter(r,{width:"narrow",context:"standalone"});default:return i.quarter(r,{width:"wide",context:"standalone"})}},M:function(t,e,i){const r=t.getMonth();switch(e){case"M":case"MM":return fi.M(t,e);case"Mo":return i.ordinalNumber(r+1,{unit:"month"});case"MMM":return i.month(r,{width:"abbreviated",context:"formatting"});case"MMMMM":return i.month(r,{width:"narrow",context:"formatting"});default:return i.month(r,{width:"wide",context:"formatting"})}},L:function(t,e,i){const r=t.getMonth();switch(e){case"L":return String(r+1);case"LL":return vi(r+1,2);case"Lo":return i.ordinalNumber(r+1,{unit:"month"});case"LLL":return i.month(r,{width:"abbreviated",context:"standalone"});case"LLLLL":return i.month(r,{width:"narrow",context:"standalone"});default:return i.month(r,{width:"wide",context:"standalone"})}},w:function(t,e,i,r){const o=yi(t,r);return"wo"===e?i.ordinalNumber(o,{unit:"week"}):vi(o,e.length)},I:function(t,e,i){const r=gi(t);return"Io"===e?i.ordinalNumber(r,{unit:"week"}):vi(r,e.length)},d:function(t,e,i){return"do"===e?i.ordinalNumber(t.getDate(),{unit:"date"}):fi.d(t,e)},D:function(t,e,i){const r=bi(t);return"Do"===e?i.ordinalNumber(r,{unit:"dayOfYear"}):vi(r,e.length)},E:function(t,e,i){const r=t.getDay();switch(e){case"E":case"EE":case"EEE":return i.day(r,{width:"abbreviated",context:"formatting"});case"EEEEE":return i.day(r,{width:"narrow",context:"formatting"});case"EEEEEE":return i.day(r,{width:"short",context:"formatting"});default:return i.day(r,{width:"wide",context:"formatting"})}},e:function(t,e,i,r){const o=t.getDay(),s=(o-r.weekStartsOn+8)%7||7;switch(e){case"e":return String(s);case"ee":return vi(s,2);case"eo":return i.ordinalNumber(s,{unit:"day"});case"eee":return i.day(o,{width:"abbreviated",context:"formatting"});case"eeeee":return i.day(o,{width:"narrow",context:"formatting"});case"eeeeee":return i.day(o,{width:"short",context:"formatting"});default:return i.day(o,{width:"wide",context:"formatting"})}},c:function(t,e,i,r){const o=t.getDay(),s=(o-r.weekStartsOn+8)%7||7;switch(e){case"c":return String(s);case"cc":return vi(s,e.length);case"co":return i.ordinalNumber(s,{unit:"day"});case"ccc":return i.day(o,{width:"abbreviated",context:"standalone"});case"ccccc":return i.day(o,{width:"narrow",context:"standalone"});case"cccccc":return i.day(o,{width:"short",context:"standalone"});default:return i.day(o,{width:"wide",context:"standalone"})}},i:function(t,e,i){const r=t.getDay(),o=0===r?7:r;switch(e){case"i":return String(o);case"ii":return vi(o,e.length);case"io":return i.ordinalNumber(o,{unit:"day"});case"iii":return i.day(r,{width:"abbreviated",context:"formatting"});case"iiiii":return i.day(r,{width:"narrow",context:"formatting"});case"iiiiii":return i.day(r,{width:"short",context:"formatting"});default:return i.day(r,{width:"wide",context:"formatting"})}},a:function(t,e,i){const r=t.getHours()/12>=1?"pm":"am";switch(e){case"a":case"aa":return i.dayPeriod(r,{width:"abbreviated",context:"formatting"});case"aaa":return i.dayPeriod(r,{width:"abbreviated",context:"formatting"}).toLowerCase();case"aaaaa":return i.dayPeriod(r,{width:"narrow",context:"formatting"});default:return i.dayPeriod(r,{width:"wide",context:"formatting"})}},b:function(t,e,i){const r=t.getHours();let o;switch(o=12===r?wi:0===r?xi:r/12>=1?"pm":"am",e){case"b":case"bb":return i.dayPeriod(o,{width:"abbreviated",context:"formatting"});case"bbb":return i.dayPeriod(o,{width:"abbreviated",context:"formatting"}).toLowerCase();case"bbbbb":return i.dayPeriod(o,{width:"narrow",context:"formatting"});default:return i.dayPeriod(o,{width:"wide",context:"formatting"})}},B:function(t,e,i){const r=t.getHours();let o;switch(o=r>=17?Si:r>=12?$i:r>=4?ki:Ci,e){case"B":case"BB":case"BBB":return i.dayPeriod(o,{width:"abbreviated",context:"formatting"});case"BBBBB":return i.dayPeriod(o,{width:"narrow",context:"formatting"});default:return i.dayPeriod(o,{width:"wide",context:"formatting"})}},h:function(t,e,i){if("ho"===e){let e=t.getHours()%12;return 0===e&&(e=12),i.ordinalNumber(e,{unit:"hour"})}return fi.h(t,e)},H:function(t,e,i){return"Ho"===e?i.ordinalNumber(t.getHours(),{unit:"hour"}):fi.H(t,e)},K:function(t,e,i){const r=t.getHours()%12;return"Ko"===e?i.ordinalNumber(r,{unit:"hour"}):vi(r,e.length)},k:function(t,e,i){let r=t.getHours();return 0===r&&(r=24),"ko"===e?i.ordinalNumber(r,{unit:"hour"}):vi(r,e.length)},m:function(t,e,i){return"mo"===e?i.ordinalNumber(t.getMinutes(),{unit:"minute"}):fi.m(t,e)},s:function(t,e,i){return"so"===e?i.ordinalNumber(t.getSeconds(),{unit:"second"}):fi.s(t,e)},S:function(t,e){return fi.S(t,e)},X:function(t,e,i){const r=t.getTimezoneOffset();if(0===r)return"Z";switch(e){case"X":return Mi(r);case"XXXX":case"XX":return Ai(r);default:return Ai(r,":")}},x:function(t,e,i){const r=t.getTimezoneOffset();switch(e){case"x":return Mi(r);case"xxxx":case"xx":return Ai(r);default:return Ai(r,":")}},O:function(t,e,i){const r=t.getTimezoneOffset();switch(e){case"O":case"OO":case"OOO":return"GMT"+Di(r,":");default:return"GMT"+Ai(r,":")}},z:function(t,e,i){const r=t.getTimezoneOffset();switch(e){case"z":case"zz":case"zzz":return"GMT"+Di(r,":");default:return"GMT"+Ai(r,":")}},t:function(t,e,i){return vi(Math.trunc(+t/1e3),e.length)},T:function(t,e,i){return vi(+t,e.length)}};function Di(t,e=""){const i=t>0?"-":"+",r=Math.abs(t),o=Math.trunc(r/60),s=r%60;return 0===s?i+String(o):i+String(o)+e+vi(s,2)}function Mi(t,e){if(t%60==0){return(t>0?"-":"+")+vi(Math.abs(t)/60,2)}return Ai(t,e)}function Ai(t,e=""){const i=t>0?"-":"+",r=Math.abs(t);return i+vi(Math.trunc(r/60),2)+e+vi(r%60,2)}const Oi=(t,e)=>{switch(t){case"P":return e.date({width:"short"});case"PP":return e.date({width:"medium"});case"PPP":return e.date({width:"long"});default:return e.date({width:"full"})}},Fi=(t,e)=>{switch(t){case"p":return e.time({width:"short"});case"pp":return e.time({width:"medium"});case"ppp":return e.time({width:"long"});default:return e.time({width:"full"})}},_i={p:Fi,P:(t,e)=>{const i=t.match(/(P+)(p+)?/)||[],r=i[1],o=i[2];if(!o)return Oi(t,e);let s;switch(r){case"P":s=e.dateTime({width:"short"});break;case"PP":s=e.dateTime({width:"medium"});break;case"PPP":s=e.dateTime({width:"long"});break;default:s=e.dateTime({width:"full"})}return s.replace("{{date}}",Oi(r,e)).replace("{{time}}",Fi(o,e))}},Ti=/^D+$/,ji=/^Y+$/,Pi=["D","DD","YY","YYYY"];const Li=/[yYQqMLwIdDecihHKkms]o|(\w)\1*|''|'(''|[^'])+('|$)|./g,zi=/P+p+|P+|p+|''|'(''|[^'])+('|$)|./g,Ii=/^'([^]*?)'?$/,Ni=/''/g,Bi=/[a-zA-Z]/;function Ri(t,e,i){const r=Ke(),o=r.locale??ui,s=r.firstWeekContainsDate??r.locale?.options?.firstWeekContainsDate??1,n=r.weekStartsOn??r.locale?.options?.weekStartsOn??0,a=Ye(t,i?.in);if(!oi(a))throw new RangeError("Invalid time value");let l=e.match(zi).map((t=>{const e=t[0];if("p"===e||"P"===e){return(0,_i[e])(t,o.formatLong)}return t})).join("").match(Li).map((t=>{if("''"===t)return{isToken:!1,value:"'"};const e=t[0];if("'"===e)return{isToken:!1,value:Vi(t)};if(Ei[e])return{isToken:!0,value:t};if(e.match(Bi))throw new RangeError("Format string contains an unescaped latin alphabet character `"+e+"`");return{isToken:!1,value:t}}));o.localize.preprocessor&&(l=o.localize.preprocessor(a,l));const d={firstWeekContainsDate:s,weekStartsOn:n,locale:o};return l.map((i=>{if(!i.isToken)return i.value;const r=i.value;(function(t){return ji.test(t)}(r)||function(t){return Ti.test(t)}(r))&&function(t,e,i){const r=function(t,e,i){const r="Y"===t[0]?"years":"days of the month";return`Use \`${t.toLowerCase()}\` instead of \`${t}\` (in \`${e}\`) for formatting ${r} to the input \`${i}\`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md`}(t,e,i);if(console.warn(r),Pi.includes(t))throw new RangeError(r)}(r,e,String(t));return(0,Ei[r[0]])(a,r,o.localize,d)})).join("")}function Vi(t){const e=t.match(Ii);return e?e[1].replace(Ni,"'"):t}function Ui(t,e){return Ye(t,e?.in).getDate()}function Hi(t,e){const i=Ye(t,e?.in),r=i.getFullYear(),o=i.getMonth(),s=We(i,0);return s.setFullYear(r,o+1,0),s.setHours(0,0,0,0),s.getDate()}function qi(t,e){return+Ye(t)>+Ye(e)}function Wi(t,e){return+Ye(t)<+Ye(e)}function Yi(t,e,i){const[r,o]=ei(0,t,e);return r.getFullYear()===o.getFullYear()&&r.getMonth()===o.getMonth()}function Gi(t,e,i){const[r,o]=ei(0,t,e);return r.getFullYear()===o.getFullYear()}function Xi(t,e){return function(t,e){const[i,r]=ei(0,t,e);return+ii(i)===+ii(r)}(We(t,t),function(t){return We(t,Date.now())}(t))}let Ki=class extends t{constructor(){super(...arguments),this.selectedDate=null,this.viewDate=new Date,this.isMobile=!1,this.calendarWidth=0,this.minDate=null,this.maxDate=null,this.currentView="days",this.handleOutsideClick=t=>{const e=this.getRootNode(),i=e?.host;!i||t.composedPath().includes(this)||t.composedPath().includes(i)||this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0}))}}static{this.styles=[Q,r`
+      /* Estilos generales del contenedor del calendario (escritorio) */
+      .calendar-container {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        z-index: 10;
+        border: var(--border-weight-default, 1px) solid var(--secondary-randstad-dark-blue-10, #e7e8ec);
+        background: var(--secondary-white, #fff);
+        border-radius: 4px;
+        margin-top: 8px;
+        padding: 16px;
+        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+        font-family: Graphik;
+        display: flex;
+        flex-direction: column;
+        box-sizing: border-box;
+        min-width: 360px;
+      }
+      
+      /* El header no tiene margin-bottom */
+      .header {
+        margin-bottom: 0;
+      }
+      
+      /* El separador no tiene margin-top para no dejar espacio con el header */
+      .weekdays-separator {
+        width: 100%;
+        height: 1px;
+        background-color: var(--secondary-randstad-dark-blue-10, #e7e8ec);
+        margin-top: 0;
+        margin-bottom: 16px; 
+      }
 
-    /* Estilos para el día, mes y año de hoy */
-    .day.today {
-      color: var(--primary-randstad-blue-70, #2175d9);
-      font-weight: 500;
-    }
+      /* Estilos del encabezado de navegación (botones y título) */
+      .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
 
-    .day.today::after {
-      content: '';
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      width: 100%;
-      height: 2px;
-      background-color: var(--primary-randstad-blue-70, #2175d9);
-      border-radius: 2px;
-    }
+      /* Estilos generales para los botones de navegación */
+      .nav-button {
+        background: none;
+        border: none;
+        cursor: pointer;
+        padding: 8px;
+        color: var(--primary-randstad-blue-70, #2175d9);
+        border-radius: 50%;
+        transition: background-color 0.2s;
+        gap: 8px;
+      }
 
-    /* Estilos para el día seleccionado */
-    .day.selected {
-      background-color: var(--primary-randstad-blue-70, #2175d9);
-      color: var(--secondary-white, #fff);
-      font-weight: 500;
-    }
+      .nav-button:hover {
+        background-color: var(--secondary-randstad-light-blue-10, #e8f1fb);
+      }
 
-    /* Estilos para el día seleccionado cuando se muestra en un mes o año diferente */
-    .day.secondary-selected {
-      background-color: var(--secondary-randstad-dark-blue-10, #e7e8ec);
-      color: var(--secondary-randstad-dark-blue-80, #3c4257);
-      font-weight: 500;
-      border: 1px solid var(--secondary-randstad-dark-blue-10, #e7e8ec);
-    }
+      .header-left,
+      .header-right {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
 
-    /* Grillas para selección de año y mes */
-    .year-grid,
-    .month-grid {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: 8px;
-    }
+      .month-year-button {
+        ${z}
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        background: none;
+        border: none;
+        cursor: pointer;
+        transition: background-color 0.2s;
+        color: var(--secondary-randstad-dark-blue-80, #3c4257);
+        border-radius: 16px;
+        width: auto;
+        height: 41px;
+        padding: 8px;
+      }
 
-    /* Botones de año y mes en la grilla */
-    .year-button,
-    .month-button {
-      ${B}
-      background: var(--secondary-white, #fff);
-      border: 1px solid transparent;
-      color: var(--secondary-randstad-dark-blue-80, #3c4257);
-      cursor: pointer;
-      transition: background-color 0.2s, border-color 0.2s;
-      border-radius: 9999px;
-      padding: 4px 16px;
-      text-align: center;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      height: 38px;
-    }
+      .month-year-button:hover {
+        background-color: var(--secondary-randstad-light-blue-10, #e8f1fb);
+      }
 
-    .year-button:hover,
-    .month-button:hover {
-      background-color: var(--secondary-randstad-light-blue-10, #e8f1fb);
-    }
+      .month-year-button randstad-icon {
+        color: var(--primary-randstad-blue-70, #2175d9);
+      }
 
-    /* Estilos para el año o mes seleccionado */
-    .year-button.selected,
-    .month-button.selected {
-      background-color: var(--primary-randstad-blue-70, #2175d9);
-      color: var(--secondary-white, #fff);
-      border: 1px solid var(--primary-randstad-blue-70, #2175d9);
-    }
+      /* Contenedor de los nombres de los días de la semana */
+      .weekdays {
+        display: grid;
+        place-items: center; 
+        grid-template-columns: repeat(7, 1fr);
+        text-align: center;
+        color: var(--secondary-randstad-dark-blue-60, #6c7387);
+        opacity: 1;
+        margin-bottom: 8px; /* Gap de 8px entre nombres y días */
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 500;
+        margin-top: 0;
+      }
 
-    /* Estilos para el mes seleccionado en otro año (estilo secundario) */
-    .month-button.secondary-selected {
-      background-color: var(--secondary-randstad-dark-blue-10, #e7e8ec);
-      color: var(--secondary-randstad-dark-blue-80, #3c4257);
-      font-weight: 500;
-      border: 1px solid var(--secondary-randstad-dark-blue-10, #e7e8ec);
-    }
+      /* Cuadrícula para los días del mes */
+      .days-grid {
+        display: grid;
+        place-items: center;
+        grid-template-columns: repeat(7, 1fr);
+        gap: 8px;
+      }
 
-    /* Estilos para el año y mes current */
-    .year-button.current,
-    .month-button.current {
-      position: relative;
-    }
+      /* Estilos para cada botón de día */
+      .day {
+        ${I}
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        cursor: pointer;
+        background-color: transparent;
+        border: none;
+        color: var(--secondary-randstad-dark-blue-80, #3c4257);
+        padding: 0;
+        position: relative;
+      }
 
-    .year-button.current::after,
-    .month-button.current::after {
-      content: '';
-      position: absolute;
-      bottom: 0;
-      width: 100%;
-      height: 2px;
-      border-radius: 2px;
-      background-color: var(--primary-randstad-blue-70, #2175d9);
-    }
+      .day:hover {
+        background-color: var(--secondary-randstad-light-blue-10, #e8f1fb);
+      }
 
-    /* Estilos para el botón de navegación deshabilitado */
-    .nav-button[disabled] {
-      color: var(--secondary-randstad-dark-blue-30, #b1b5c4);
-      pointer-events: none;
-    }
+      /* Estilos para el día, mes y año de hoy */
+      .day.today {
+        color: var(--primary-randstad-blue-70, #2175d9);
+        font-weight: 500;
+      }
 
-    .nav-button[disabled]:hover {
-      background-color: transparent;
-    }
+      .day.today::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        width: 100%;
+        height: 2px;
+        background-color: var(--primary-randstad-blue-70, #2175d9);
+        border-radius: 2px;
+      }
 
-    /* Estilos para el botón de día deshabilitado */
-    .day[disabled] {
-      color: var(--secondary-randstad-dark-blue-30, #b1b5c4);
-      pointer-events: none;
-      background-color: transparent;
-    }
-    
-    .day[disabled]:hover {
-      background-color: transparent;
-    }
+      /* Estilos para el día seleccionado */
+      .day.selected {
+        background-color: var(--primary-randstad-blue-70, #2175d9);
+        color: var(--secondary-white, #fff);
+        font-weight: 500;
+      }
 
-    /* Estilos para los botones de año y mes deshabilitados */
-    .year-button[disabled],
-    .month-button[disabled] {
-      color: var(--secondary-randstad-dark-blue-30, #b1b5c4);
-      pointer-events: none;
-      background-color: transparent;
-    }
-    
-    .year-button[disabled]:hover,
-    .month-button[disabled]:hover {
-      background-color: transparent;
-    }
+      /* Estilos para el día seleccionado cuando se muestra en un mes o año diferente */
+      .day.secondary-selected {
+        background-color: var(--secondary-randstad-dark-blue-10, #e7e8ec);
+        color: var(--secondary-randstad-dark-blue-80, #3c4257);
+        font-weight: 500;
+        border: 1px solid var(--secondary-randstad-dark-blue-10, #e7e8ec);
+      }
 
-    /* --- Estilos para móvil --- */
-    .mobile-backdrop {
-      position: fixed;
-      inset: 0;
-      background-color: rgba(0, 0, 0, 0.4);
-      z-index: 999;
-      font-family: Graphik;
-    }
+      /* Grillas para selección de año y mes */
+      .year-grid,
+      .month-grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 8px;
+      }
 
-    .mobile-modal {
-      position: fixed;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      background-color: white;
-      z-index: 1000;
-      border-radius: 12px 12px 0 0;
-      box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.15);
-      display: flex;
-      flex-direction: column;
-      padding: 24px 16px;
-      animation: slideUp 0.5s ease-out;
-      max-height: 80vh;
-      overflow-y: auto;
-      font-family: Graphik;
-    }
+      /* Botones de año y mes en la grilla */
+      .year-button,
+      .month-button {
+        ${I}
+        background: var(--secondary-white, #fff);
+        border: 1px solid transparent;
+        color: var(--secondary-randstad-dark-blue-80, #3c4257);
+        cursor: pointer;
+        transition: background-color 0.2s, border-color 0.2s;
+        border-radius: 9999px;
+        padding: 4px 16px;
+        text-align: center;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 38px;
+      }
 
-    @keyframes slideUp {
-      from {
-        transform: translateY(100%);
+      .year-button:hover,
+      .month-button:hover {
+        background-color: var(--secondary-randstad-light-blue-10, #e8f1fb);
       }
-      to {
-        transform: translateY(0);
+
+      /* Estilos para el año o mes seleccionado */
+      .year-button.selected,
+      .month-button.selected {
+        background-color: var(--primary-randstad-blue-70, #2175d9);
+        color: var(--secondary-white, #fff);
+        border: 1px solid var(--primary-randstad-blue-70, #2175d9);
       }
-    }
-    
-    .mobile-modal .header {
-      margin-bottom: 0;
-      position: sticky;
-      top: 0;
-      background: white;
-      z-index: 10;
-    }
-    
-    .mobile-modal .weekdays-separator {
-      margin: 0;
-    }
 
-    .mobile-modal .weekdays {
-      place-items: center;
-      margin-top: 16px;
-      margin-bottom: 8px;
-    }
-    
-    .mobile-modal .days-grid {
-      gap: 8px;
-      grid-template-columns: repeat(7, 1fr);
-      place-items: center;
-    }
-    
-    .mobile-modal .month-grid,
-    .mobile-modal .year-grid {
-      gap: 16px;
-      margin-top: 16px;
-    }
+      /* Estilos para el mes seleccionado en otro año (estilo secundario) */
+      .month-button.secondary-selected {
+        background-color: var(--secondary-randstad-dark-blue-10, #e7e8ec);
+        color: var(--secondary-randstad-dark-blue-80, #3c4257);
+        font-weight: 500;
+        border: 1px solid var(--secondary-randstad-dark-blue-10, #e7e8ec);
+      }
 
-    .mobile-modal .day {
-      ${N}
-      font-weight: 500;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 40px; 
-      height: 40px;
-      border-radius: 50%;
-      cursor: pointer;
-      background-color: transparent;
-      border: none;
-      color: var(--secondary-randstad-dark-blue-80, #3c4257);
-      position: relative;
-    }
+      /* Estilos para el año y mes current */
+      .year-button.current,
+      .month-button.current {
+        position: relative;
+      }
 
-    .mobile-modal .day.selected {
-      background-color: var(--primary-randstad-blue-70, #2175d9);
-      color: var(--secondary-white, #fff);
-      font-weight: 500;
-      border-radius: 50%;
-    }
+      .year-button.current::after,
+      .month-button.current::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        height: 2px;
+        border-radius: 2px;
+        background-color: var(--primary-randstad-blue-70, #2175d9);
+      }
 
-    .mobile-modal .day.today {
-      color: var(--primary-randstad-blue-70, #2175d9);
-      font-weight: 500;
-    }
+      /* Estilos para el botón de navegación deshabilitado */
+      .nav-button[disabled] {
+        color: var(--secondary-randstad-dark-blue-30, #b1b5c4);
+        pointer-events: none;
+      }
 
-    .mobile-modal .day.today::after {
-      content: '';
-      position: absolute;
-      bottom: 0;
-      width: 40px; 
-      left: 50%;
-      transform: translateX(-50%); 
-      height: 2px;
-      background-color: var(--primary-randstad-blue-70, #2175d9);
-      border-radius: 2px;
-    }
+      .nav-button[disabled]:hover {
+        background-color: transparent;
+      }
 
-    .mobile-modal .year-grid,
-    .mobile-modal .month-grid {
-      grid-template-columns: repeat(3, 1fr);
-      gap: 8px;
-    }
+      /* Estilos para el botón de día deshabilitado */
+      .day[disabled] {
+        color: var(--secondary-randstad-dark-blue-30, #b1b5c4);
+        pointer-events: none;
+        background-color: transparent;
+      }
+      
+      .day[disabled]:hover {
+        background-color: transparent;
+      }
 
-    .mobile-modal .year-button,
-    .mobile-modal .month-button {
-      width: 100%;
-      height: 48px;
-      border-radius: 9999px;
-      flex: 1 1 33.3333%;
-      padding: 0;
-    }
+      /* Estilos para los botones de año y mes deshabilitados */
+      .year-button[disabled],
+      .month-button[disabled] {
+        color: var(--secondary-randstad-dark-blue-30, #b1b5c4);
+        pointer-events: none;
+        background-color: transparent;
+      }
+      
+      .year-button[disabled]:hover,
+      .month-button[disabled]:hover {
+        background-color: transparent;
+      }
 
-    .mobile-modal .day.secondary-selected,
-    .mobile-modal .month-button.secondary-selected {
-      background-color: var(--secondary-randstad-dark-blue-10, #e7e8ec);
-      color: var(--secondary-randstad-dark-blue-80, #3c4257);
-      font-weight: 500;
-      border: 1px solid var(--secondary-randstad-dark-blue-10, #e7e8ec);
-    }
+      /* --- Estilos para móvil --- */
+      .mobile-backdrop {
+        position: fixed;
+        inset: 0;
+        background-color: rgba(0, 0, 0, 0.4);
+        z-index: 999;
+        font-family: Graphik;
+      }
 
-    /* Estilos para elementos deshabilitados dentro del modal de móviles. */
-    .mobile-modal .day[disabled],
-    .mobile-modal .month-button[disabled],
-    .mobile-modal .year-button[disabled] {
-      color: var(--secondary-randstad-dark-blue-30, #b1b5c4);
-      pointer-events: none;
-      background-color: transparent;
-    }
+      .mobile-modal {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background-color: white;
+        z-index: 1000;
+        border-radius: 12px 12px 0 0;
+        box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.15);
+        display: flex;
+        flex-direction: column;
+        padding: 24px 16px;
+        animation: slideUp 0.5s ease-out;
+        max-height: 80dvh;
+        overflow-y: auto;
+        font-family: Graphik;
+      }
 
-    .mobile-modal .nav-button[disabled] {
-      color: var(--secondary-randstad-dark-blue-30, #b1b5c4);
-      pointer-events: none;
-      background-color: transparent;
-    }
+      @keyframes slideUp {
+        from {
+          transform: translateY(100%);
+        }
+        to {
+          transform: translateY(0);
+        }
+      }
+      
+      .mobile-modal .header {
+        margin-bottom: 0;
+        position: sticky;
+        top: 0;
+        background: white;
+        z-index: 10;
+      }
+      
+      .mobile-modal .weekdays-separator {
+        margin: 0;
+      }
 
-    /* Evitamos que el estilo 'today' o 'current' se aplique si el elemento está deshabilitado */
-    .mobile-modal .day.today[disabled]::after,
-    .mobile-modal .nav-button[disabled] randstad-icon {
-      color: var(--secondary-randstad-dark-blue-30, #b1b5c4);
-    }
-    /*  */
-  `}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.handleOutsideClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.handleOutsideClick)}handleHeaderClick(){"days"===this.currentView?this.currentView="years":this.currentView="days"}_updateView(t,e=null){this.viewDate=t,e&&(this.currentView=e),this.dispatchEvent(new CustomEvent("view-date-change",{detail:{date:this.viewDate}}))}handleNavClick(t){let e=this.viewDate;e="days"===this.currentView?ne(this.viewDate,t):"months"===this.currentView?be(this.viewDate,t):be(this.viewDate,21*t),this._updateView(e)}handleYearSelect(t){const e=function(t,e,i){const o=re(t,i?.in);return isNaN(+o)?oe(t,NaN):(o.setFullYear(e),o)}(this.viewDate,t);this._updateView(e,"months")}handleMonthSelect(t){const e=function(t,e,i){const o=re(t,i?.in),r=o.getFullYear(),n=o.getDate(),a=oe(t,0);a.setFullYear(r,e,15),a.setHours(0,0,0,0);const s=ei(a);return o.setMonth(e,Math.min(n,s)),o}(this.viewDate,t);this._updateView(e,"days")}handleDayClick(t){this.selectedDate=t,this.dispatchEvent(new CustomEvent("date-selected",{detail:{date:t},bubbles:!0,composed:!0}))}getFullMonthNames(){return["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"]}getShortMonthNames(){return this.getFullMonthNames().map((t=>t.substring(0,3)))}getShortWeekdays(){return["lu","ma","mi","ju","vi","sa","do"]}renderHeader(){const t=this.getFullMonthNames();let i="",o=!1,r=!1;if("years"===this.currentView){const t=this.viewDate.getFullYear()-this.viewDate.getFullYear()%21,e=t+20;i=`${t} - ${e}`;o=t<=(this.minDate?this.minDate.getFullYear():-1/0),r=e>=(this.maxDate?this.maxDate.getFullYear():1/0)}else if("months"===this.currentView){i=`${this.viewDate.getFullYear()}`;const t=this.viewDate.getFullYear();o=t<=(this.minDate?this.minDate.getFullYear():-1/0),r=t>=(this.maxDate?this.maxDate.getFullYear():1/0)}else{i=`${t[this.viewDate.getMonth()]} ${this.viewDate.getFullYear()}`,this.minDate&&(o=ri(ge(this.viewDate),ge(this.minDate))||oi(this.viewDate,this.minDate)),this.maxDate&&(r=ri(ge(this.viewDate),ge(this.maxDate))||ii(this.viewDate,this.maxDate))}return e`
+      .mobile-modal .weekdays {
+        place-items: center;
+        margin-top: 16px;
+        margin-bottom: 8px;
+      }
+      
+      .mobile-modal .days-grid {
+        gap: 8px;
+        grid-template-columns: repeat(7, 1fr);
+        place-items: center;
+      }
+      
+      .mobile-modal .month-grid,
+      .mobile-modal .year-grid {
+        gap: 16px;
+        margin-top: 16px;
+      }
+
+      .mobile-modal .day {
+        ${N}
+        font-weight: 500;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 40px; 
+        height: 40px;
+        border-radius: 50%;
+        cursor: pointer;
+        background-color: transparent;
+        border: none;
+        color: var(--secondary-randstad-dark-blue-80, #3c4257);
+        position: relative;
+      }
+
+      .mobile-modal .day.selected {
+        background-color: var(--primary-randstad-blue-70, #2175d9);
+        color: var(--secondary-white, #fff);
+        font-weight: 500;
+        border-radius: 50%;
+      }
+
+      .mobile-modal .day.today {
+        color: var(--primary-randstad-blue-70, #2175d9);
+        font-weight: 500;
+      }
+
+      .mobile-modal .day.today::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        width: 40px; 
+        left: 50%;
+        transform: translateX(-50%); 
+        height: 2px;
+        background-color: var(--primary-randstad-blue-70, #2175d9);
+        border-radius: 2px;
+      }
+
+      .mobile-modal .year-grid,
+      .mobile-modal .month-grid {
+        grid-template-columns: repeat(3, 1fr);
+        gap: 8px;
+      }
+
+      .mobile-modal .year-button,
+      .mobile-modal .month-button {
+        width: 100%;
+        height: 48px;
+        border-radius: 9999px;
+        flex: 1 1 33.3333%;
+        padding: 0;
+      }
+
+      .mobile-modal .day.secondary-selected,
+      .mobile-modal .month-button.secondary-selected {
+        background-color: var(--secondary-randstad-dark-blue-10, #e7e8ec);
+        color: var(--secondary-randstad-dark-blue-80, #3c4257);
+        font-weight: 500;
+        border: 1px solid var(--secondary-randstad-dark-blue-10, #e7e8ec);
+      }
+
+      /* Estilos para elementos deshabilitados dentro del modal de móviles. */
+      .mobile-modal .day[disabled],
+      .mobile-modal .month-button[disabled],
+      .mobile-modal .year-button[disabled] {
+        color: var(--secondary-randstad-dark-blue-30, #b1b5c4);
+        pointer-events: none;
+        background-color: transparent;
+      }
+
+      .mobile-modal .nav-button[disabled] {
+        color: var(--secondary-randstad-dark-blue-30, #b1b5c4);
+        pointer-events: none;
+        background-color: transparent;
+      }
+
+      /* Evitamos que el estilo 'today' o 'current' se aplique si el elemento está deshabilitado */
+      .mobile-modal .day.today[disabled]::after,
+      .mobile-modal .nav-button[disabled] randstad-icon {
+        color: var(--secondary-randstad-dark-blue-30, #b1b5c4);
+      }
+      /*  */
+    `]}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.handleOutsideClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.handleOutsideClick)}handleHeaderClick(){"days"===this.currentView?this.currentView="years":this.currentView="days"}_updateView(t,e=null){this.viewDate=t,e&&(this.currentView=e),this.dispatchEvent(new CustomEvent("view-date-change",{detail:{date:this.viewDate}}))}handleNavClick(t){let e=this.viewDate;e="days"===this.currentView?Ge(this.viewDate,t):"months"===this.currentView?ri(this.viewDate,t):ri(this.viewDate,21*t),this._updateView(e)}handleYearSelect(t){const e=function(t,e,i){const r=Ye(t,i?.in);return isNaN(+r)?We(t,NaN):(r.setFullYear(e),r)}(this.viewDate,t);this._updateView(e,"months")}handleMonthSelect(t){const e=function(t,e,i){const r=Ye(t,i?.in),o=r.getFullYear(),s=r.getDate(),n=We(t,0);n.setFullYear(o,e,15),n.setHours(0,0,0,0);const a=Hi(n);return r.setMonth(e,Math.min(s,a)),r}(this.viewDate,t);this._updateView(e,"days")}handleDayClick(t){this.selectedDate=t,this.dispatchEvent(new CustomEvent("date-selected",{detail:{date:t},bubbles:!0,composed:!0}))}getFullMonthNames(){return["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"]}getShortMonthNames(){return this.getFullMonthNames().map((t=>t.substring(0,3)))}getShortWeekdays(){return["lu","ma","mi","ju","vi","sa","do"]}renderHeader(){const t=this.getFullMonthNames();let i="",r=!1,o=!1;if("years"===this.currentView){const t=this.viewDate.getFullYear()-this.viewDate.getFullYear()%21,e=t+20;i=`${t} - ${e}`;r=t<=(this.minDate?this.minDate.getFullYear():-1/0),o=e>=(this.maxDate?this.maxDate.getFullYear():1/0)}else if("months"===this.currentView){i=`${this.viewDate.getFullYear()}`;const t=this.viewDate.getFullYear();r=t<=(this.minDate?this.minDate.getFullYear():-1/0),o=t>=(this.maxDate?this.maxDate.getFullYear():1/0)}else{i=`${t[this.viewDate.getMonth()]} ${this.viewDate.getFullYear()}`,this.minDate&&(r=Yi(si(this.viewDate),si(this.minDate))||Wi(this.viewDate,this.minDate)),this.maxDate&&(o=Yi(si(this.viewDate),si(this.maxDate))||qi(this.viewDate,this.maxDate))}const s=e`
+      <randstad-icon
+        name="${"days"===this.currentView?"arrow_drop_down":"arrow_drop_up"}"
+        class="select-icon"
+      >
+      </randstad-icon>
+    `;return e`
       <div class="header">
         <div class="header-left">
           <button class="month-year-button" @click=${this.handleHeaderClick}>
             <span>${i}</span>
 
-            ${"days"===this.currentView?e`<randstad-icon name="arrow_drop_down" class="select-icon"></randstad-icon>`:e`<randstad-icon name="arrow_drop_up" class="select-icon"></randstad-icon>`}
+            ${s}
           </button>
         </div>
 
         <div class="header-right">
-          <button class="nav-button" @click=${()=>this.handleNavClick(-1)} ?disabled=${o}>
+          <button class="nav-button" @click=${()=>this.handleNavClick(-1)} ?disabled=${r}>
             <randstad-icon name="arrow_left"></randstad-icon>
           </button>
 
-          <button class="nav-button" @click=${()=>this.handleNavClick(1)} ?disabled=${r}>
+          <button class="nav-button" @click=${()=>this.handleNavClick(1)} ?disabled=${o}>
             <randstad-icon name="arrow_right"></randstad-icon>
           </button>
         </div>
       </div>
-    `}renderYearsView(){const t=this.viewDate.getFullYear()-this.viewDate.getFullYear()%21,i=Array.from({length:21},((e,i)=>t+i)),o=this.selectedDate?this.selectedDate.getFullYear():null,r=(new Date).getFullYear(),n=this.minDate?this.minDate.getFullYear():-1/0,a=this.maxDate?this.maxDate.getFullYear():1/0;return e`
+    `}renderYearsView(){const t=this.viewDate.getFullYear()-this.viewDate.getFullYear()%21,i=Array.from({length:21},((e,i)=>t+i)),r=this.selectedDate?this.selectedDate.getFullYear():null,o=(new Date).getFullYear(),s=this.minDate?this.minDate.getFullYear():-1/0,n=this.maxDate?this.maxDate.getFullYear():1/0;return e`
       <div class="year-grid"> 
         ${i.map((t=>e`
             <button 
-              class="${"year-button "+(t===o?"selected":t===r?"current":"")}" 
+              class="${"year-button "+(t===r?"selected":t===o?"current":"")}" 
               @click=${()=>this.handleYearSelect(t)}
-              ?disabled=${t<n||t>a} 
+              ?disabled=${t<s||t>n} 
             >
               ${t}
             </button>
           `))}
       </div>
-    `}renderMonthsView(){const t=this.getShortMonthNames(),i=this.selectedDate?.getMonth(),o=(new Date).getMonth(),r=this.viewDate.getFullYear();return e`
+    `}renderMonthsView(){const t=this.getShortMonthNames(),i=this.selectedDate?.getMonth(),r=(new Date).getMonth(),o=this.viewDate.getFullYear();return e`
       <div class="month-grid">
-        ${t.map(((t,n)=>{const a=n===o,s=n===i&&this.selectedDate&&ni(this.viewDate,this.selectedDate),d=n===i&&this.selectedDate&&!ni(this.viewDate,this.selectedDate);let l=!1;this.minDate&&r===this.minDate.getFullYear()&&(l=n<this.minDate.getMonth()),this.maxDate&&r===this.maxDate.getFullYear()&&(l=l||n>this.maxDate.getMonth());return e`
+        ${t.map(((t,s)=>{const n=s===r,a=s===i&&this.selectedDate&&Gi(this.viewDate,this.selectedDate),l=s===i&&this.selectedDate&&!Gi(this.viewDate,this.selectedDate);let d=!1;this.minDate&&o===this.minDate.getFullYear()&&(d=s<this.minDate.getMonth()),this.maxDate&&o===this.maxDate.getFullYear()&&(d=d||s>this.maxDate.getMonth());return e`
               <button
-                class="${"month-button "+(s?"selected":d?"secondary-selected":a?"current":"")}"
-                ?disabled=${l}
-                @click=${()=>this.handleMonthSelect(n)}
+                class="${"month-button "+(a?"selected":l?"secondary-selected":n?"current":"")}"
+                ?disabled=${d}
+                @click=${()=>this.handleMonthSelect(s)}
               >
                 ${t}
               </button>
             `}))}
       </div>
-    `}renderDayView(){const t=ei(this.viewDate),i=ge(this.viewDate),o=re(i,r?.in).getDay();var r;const n=Array.from({length:0===o?6:o-1},(()=>null)),a=Array.from({length:t},((t,e)=>function(t,e,i){const o=re(t,i?.in);return o.setDate(e),o}(i,e+1))),s=this.getShortWeekdays();return e`
+    `}renderDayView(){const t=Hi(this.viewDate),i=si(this.viewDate),r=Ye(i,o?.in).getDay();var o;const s=Array.from({length:0===r?6:r-1},(()=>null)),n=Array.from({length:t},((t,e)=>function(t,e,i){const r=Ye(t,i?.in);return r.setDate(e),r}(i,e+1))),a=this.getShortWeekdays();return e`
       <div class="weekdays">
-        ${s.map((t=>e`<div>${t}</div>`))}
+        ${a.map((t=>e`<div>${t}</div>`))}
       </div>
 
       <div class="days-grid">
-        ${n.map((()=>e`<div></div>`))}
-        ${a.map((t=>{const i=ue(t),o=this.selectedDate?ue(this.selectedDate):null,r=this.minDate&&oi(i,ue(this.minDate))||this.maxDate&&ii(i,ue(this.maxDate)),n=ai(i),a=o&&ti(i)===ti(o),s=a&&o&&ri(i,o)&&ni(i,o);return e`
+        ${s.map((()=>e`<div></div>`))}
+        ${n.map((t=>{const i=ii(t),r=this.selectedDate?ii(this.selectedDate):null,o=this.minDate&&Wi(i,ii(this.minDate))||this.maxDate&&qi(i,ii(this.maxDate)),s=Xi(i),n=r&&Ui(i)===Ui(r),a=n&&r&&Yi(i,r)&&Gi(i,r);return e`
             <button
-              class="${`day ${n?"today":""} ${s?"selected":a&&!s?"secondary-selected":""}`}"
-              ?disabled=${r}
+              class="${`day ${s?"today":""} ${a?"selected":n&&!a?"secondary-selected":""}`}"
+              ?disabled=${o}
               @click=${()=>this.handleDayClick(t)}
             >
-              ${Je(t,"d")}
+              ${Ri(t,"d")}
             </button>
           `}))}
       </div>
@@ -3300,10 +3460,10 @@ const Yt=o`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
       <div class="calendar-container" style="width: ${this.calendarWidth}px;">
         ${i}
       </div>
-    `}};a([A({type:Object}),s("design:type",Object)],si.prototype,"selectedDate",void 0),a([A({type:Object}),s("design:type",Date)],si.prototype,"viewDate",void 0),a([A({type:Boolean}),s("design:type",Object)],si.prototype,"isMobile",void 0),a([A({type:Number}),s("design:type",Number)],si.prototype,"calendarWidth",void 0),a([A({type:Object}),s("design:type",Object)],si.prototype,"minDate",void 0),a([A({type:Object}),s("design:type",Object)],si.prototype,"maxDate",void 0),a([T(),s("design:type",String)],si.prototype,"currentView",void 0),si=a([d("calendar-overlay")],si);let di=class extends L{constructor(){super(...arguments),this.isRenderClearButton=!0,this.eighteenOrOlder=!1,this.isOpen=!1,this.selectedDate=null,this.viewDate=new Date,this.isMobile=!1,this.calendarWidth=0,this.updateResponsiveModeBound=this.updateResponsiveMode.bind(this),this.handleClickOutside=t=>{t.composedPath().includes(this)||(this.isOpen=!1)}}static{this.styles=o`
+    `}};n([_({type:Object}),a("design:type",Object)],Ki.prototype,"selectedDate",void 0),n([_({type:Object}),a("design:type",Date)],Ki.prototype,"viewDate",void 0),n([_({type:Boolean}),a("design:type",Object)],Ki.prototype,"isMobile",void 0),n([_({type:Number}),a("design:type",Number)],Ki.prototype,"calendarWidth",void 0),n([_({type:Object}),a("design:type",Object)],Ki.prototype,"minDate",void 0),n([_({type:Object}),a("design:type",Object)],Ki.prototype,"maxDate",void 0),n([T(),a("design:type",String)],Ki.prototype,"currentView",void 0),Ki=n([l("calendar-overlay")],Ki);let Qi=class extends P{constructor(){super(...arguments),this.isRenderClearButton=!0,this.eighteenOrOlder=!1,this.isOpen=!1,this.selectedDate=null,this.viewDate=new Date,this.isMobile=!1,this.calendarWidth=0,this.inputValue=null,this.updateResponsiveModeBound=this.updateResponsiveMode.bind(this),this.handleClickOutside=t=>{t.composedPath().includes(this)||(this.isOpen=!1)}}static{this.styles=r`
     ${X}
-    ${Q}
     ${K}
+    ${G}
 
     /* Si se proporciona una propiedad width (ej. width="600px"), se usa ese valor. */
     :host([width]) {
@@ -3319,7 +3479,7 @@ const Yt=o`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
 
     /* Estilos para evitar el desbordamiento en móviles */
     calendar-overlay {
-      max-width: 100vw;
+      max-width: 100dvw;
       box-sizing: border-box;
     }
 
@@ -3401,19 +3561,19 @@ const Yt=o`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
     .calendar-button randstad-icon {
       font-size: 18px;
     }
-  `}setMessageErrorFormatInvalid(){return"formato de fecha inválido, se esperaba 'dd-MM-yyyy'"}connectedCallback(){super.connectedCallback(),this.updateResponsiveMode(),window.addEventListener("resize",this.updateResponsiveModeBound),document.addEventListener("click",this.handleClickOutside)}disconnectedCallback(){window.removeEventListener("resize",this.updateResponsiveModeBound),document.removeEventListener("click",this.handleClickOutside),super.disconnectedCallback()}firstUpdated(){this.setInitialWidth()}updated(t){t.has("value")&&this._syncValue(this.value),(t.has("isOpen")||t.has("value"))&&this.setInitialWidth(),super.updated(t)}setInitialWidth(){this.inputContainer&&(this.calendarWidth=this.inputContainer.getBoundingClientRect().width)}updateResponsiveMode(){this.isMobile=window.innerWidth<=940,this.setInitialWidth()}handleInput(t){const e=t.target;this._parseAndValidateDate(e.value,!0)}handleCalendarButtonClick(t){this.disabled||(t.stopPropagation(),this.isOpen=!this.isOpen,this.selectedDate?this.viewDate=this.selectedDate:this.viewDate=new Date,this.requestUpdate())}handleClearDate(){this.selectedDate=null,this.error=!1,this.errorMessage=null,this.closeOverlay(null)}handleDateSelect(t){const e=t.detail.date;e&&(this.selectedDate=e,this.viewDate=e,this.closeOverlay(Je(e,"dd-MM-yyyy")))}handleViewDateChange(t){this.viewDate=t.detail.date}closeOverlay(t){this.value=t,this.dispatchEvent(new CustomEvent("date-selected",{detail:{value:t}})),this.isOpen=!1}_syncValue(t){if(""===t||null===t)return void(this.error||(this.selectedDate=null,this.errorMessage=null));const e=this._parseDate(t);e&&this._validateDate(e)?(this.selectedDate=e,this.viewDate=e,this.error=!1,this.errorMessage=null,this.value=Je(e,"dd-MM-yyyy")):this.selectedDate=e}_validateDate(t){if(!t)return!1;if(this.error=!1,this.errorMessage=null,this.eighteenOrOlder){const e=function(t,e,i){return be(t,-18,i)}(new Date);if(ii(t,e))return this.error=!0,this.errorMessage="tenés que ser mayor de 18 años",!1}if(!this._isWithinBounds(t)){this.error=!0;const t=this._getValidDateRange();return this.errorMessage=`la fecha debe estar entre ${t?.minDate?Je(t.minDate,"dd-MM-yyyy"):""} y ${t?.maxDate?Je(t.maxDate,"dd-MM-yyyy"):""}.`,!1}return!0}_parseAndValidateDate(t,e){if(this.disabled)return;if(""===t||null===t)return this.selectedDate=null,this.error=!1,this.errorMessage=null,void(e&&this.closeOverlay(null));const i=this._parseDate(t);i?this._validateDate(i)?(this.selectedDate=i,this.viewDate=i,this.error=!1,this.errorMessage=null,e&&this.closeOverlay(Je(i,"dd-MM-yyyy"))):(e&&this.closeOverlay(null),console.error("La fecha es inválida.")):(this.error=!0,this.errorMessage=this.setMessageErrorFormatInvalid(),e&&this.closeOverlay(null),console.error("Formato de fecha no válido."))}_parseDate(t){const e=t.split("-").map(Number);if(3===e.length){const[i,o,r]=e;if(i&&o&&r&&o>=1&&o<=12&&r>1e3){const e=new Date(r,o-1,i,12);if(me(e)&&Je(e,"dd-MM-yyyy")===t)return e}}const i=t.split("-").map(Number);if(3===i.length){const[e,o,r]=i;if(e&&o&&r&&o>=1&&o<=12&&e>1e3){const i=new Date(e,o-1,r,12);if(me(i)&&Je(i,"yyyy-MM-dd")===t)return i}}return null}_parseDateString(t){if(!t)return null;const e=t.split("-").map(Number);if(3===e.length&&!isNaN(e[0])&&!isNaN(e[1])&&!isNaN(e[2])){return new Date(e[0],e[1]-1,e[2],12)}return null}_getValidDateRange(){const t=this._parseDateString(this.minDate),e=this._parseDateString(this.maxDate);return t||e?t&&e&&ii(t,e)?null:{minDate:t,maxDate:e}:{minDate:null,maxDate:null}}_isWithinBounds(t){const e=this._getValidDateRange();return!e||(!e.minDate||!oi(t,e.minDate))&&(!e.maxDate||!ii(t,e.maxDate))}render(){const t=n({"input-wrapper":!0,active:this.isOpen,error:this.error,disabled:this.disabled}),o=`width: ${this.width||"100%"};`,r=this._getValidDateRange();return e`
-      <div class="datepicker-container" style="${this.labelColor?` --label-color: ${this.labelColor}`:""} ${o}">
+  `}setMessageErrorFormatInvalid(){return"formato de fecha inválido, se esperaba 'dd-MM-yyyy'"}connectedCallback(){super.connectedCallback(),this.updateResponsiveMode(),window.addEventListener("resize",this.updateResponsiveModeBound),document.addEventListener("click",this.handleClickOutside)}disconnectedCallback(){window.removeEventListener("resize",this.updateResponsiveModeBound),document.removeEventListener("click",this.handleClickOutside),super.disconnectedCallback()}firstUpdated(){this.setInitialWidth()}updated(t){t.has("value")&&this._syncValue(this.value),(t.has("isOpen")||t.has("value"))&&this.setInitialWidth(),super.updated(t)}setInitialWidth(){this.inputContainer&&(this.calendarWidth=this.inputContainer.getBoundingClientRect().width)}updateResponsiveMode(){this.isMobile=window.innerWidth<=940,this.setInitialWidth()}handleInput(t){const e=t.target;this.inputValue=e.value,this._parseAndValidateDate(e.value,!0)}handleCalendarButtonClick(t){this.disabled||(t.stopPropagation(),this.isOpen=!this.isOpen,this.selectedDate?this.viewDate=this.selectedDate:this.viewDate=new Date,this.requestUpdate())}handleClearDate(){this.inputValue=null,this.selectedDate=null,this.error=!1,this.errorMessage=null,this.closeOverlay(null)}handleDateSelect(t){const e=t.detail.date;if(!e)return;if(this._validateDate(e)){this.selectedDate=e,this.viewDate=e;const t=Ri(e,"dd-MM-yyyy");this.inputValue=t,this.closeOverlay(t)}else{const t=Ri(e,"dd-MM-yyyy");this.inputValue=t,this.selectedDate=null,this.closeOverlay(null)}}handleViewDateChange(t){this.viewDate=t.detail.date}closeOverlay(t){this.value=t,this.dispatchEvent(new CustomEvent("date-selected",{detail:{value:t}})),this.isOpen=!1}_syncValue(t){if(""===t||null===t)return void(this.error||(this.selectedDate=null,this.inputValue=null,this.errorMessage=null));const e=this._parseDate(t);e&&this._validateDate(e)?(this.selectedDate=e,this.viewDate=e,this.error=!1,this.errorMessage=null,this.value=Ri(e,"dd-MM-yyyy"),this.inputValue=this.value):this.selectedDate=e}_validateDate(t){if(!t)return!1;if(this.error=!1,this.errorMessage=null,this.eighteenOrOlder){const e=function(t,e,i){return ri(t,-18,i)}(new Date);if(qi(t,e))return this.error=!0,this.errorMessage="tenés que ser mayor de 18 años",!1}if(!this._isWithinBounds(t)){const t=this._getValidDateRange();return this.error=!0,this.errorMessage=`la fecha debe estar entre ${t?.minDate?Ri(t.minDate,"dd-MM-yyyy"):""} y ${t?.maxDate?Ri(t.maxDate,"dd-MM-yyyy"):""}.`,!1}return!0}_parseAndValidateDate(t,e){if(this.disabled)return;if(""===t||null===t)return this.selectedDate=null,this.error=!1,this.errorMessage=null,void(e&&this.closeOverlay(null));const i=this._parseDate(t);if(i){this._validateDate(i)?(this.selectedDate=i,this.viewDate=i,this.error=!1,this.errorMessage=null,e&&this.closeOverlay(Ri(i,"dd-MM-yyyy"))):(this.error=!0,this.selectedDate=null,e&&this.closeOverlay(null))}else this.error=!0,this.errorMessage=this.setMessageErrorFormatInvalid(),this.selectedDate=null,e&&this.closeOverlay(null)}_parseDate(t){const e=t.split("-").map(Number);if(3===e.length){const[i,r,o]=e;if(i&&r&&o&&r>=1&&r<=12&&o>1e3){const e=new Date(o,r-1,i,12);if(oi(e)&&Ri(e,"dd-MM-yyyy")===t)return e}}const i=t.split("-").map(Number);if(3===i.length){const[e,r,o]=i;if(e&&r&&o&&r>=1&&r<=12&&e>1e3){const i=new Date(e,r-1,o,12);if(oi(i)&&Ri(i,"yyyy-MM-dd")===t)return i}}return null}_parseDateString(t){if(!t)return null;const e=t.split("-").map(Number);if(3===e.length&&!isNaN(e[0])&&!isNaN(e[1])&&!isNaN(e[2])){return new Date(e[0],e[1]-1,e[2],12)}return null}_getValidDateRange(){const t=this._parseDateString(this.minDate),e=this._parseDateString(this.maxDate);return t||e?t&&e&&qi(t,e)?null:{minDate:t,maxDate:e}:{minDate:null,maxDate:null}}_isWithinBounds(t){const e=this._getValidDateRange();return!e||(!e.minDate||!Wi(t,e.minDate))&&(!e.maxDate||!qi(t,e.maxDate))}render(){const t=s({"input-wrapper":!0,active:this.isOpen,error:this.error,disabled:this.disabled}),r=`width: ${this.width||"100%"};`,o=this._getValidDateRange();return e`
+      <div class="datepicker-container" style="${this.labelColor?` --label-color: ${this.labelColor}`:""} ${r}">
         ${this.renderLabelContainer()}
 
         <div class="input-container">
           <div class="${t}" style="width: 100%">
             <input
-              type="text"
-              class="date-input"
-              .value="${this.value}"
-              placeholder="${this.placeholder}"
-              ?disabled=${this.disabled}
-              @input=${this.handleInput}
+                type="text"
+                class="date-input"
+                .value="${this.inputValue??""}"
+                placeholder="${this.placeholder}"
+                ?disabled=${this.disabled}
+                @input=${this.handleInput}
             />
 
             ${this.isRenderClearButton&&this.selectedDate&&!this.disabled?e`
@@ -3439,28 +3599,28 @@ const Yt=o`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
                 .selectedDate=${this.selectedDate}
                 .viewDate=${this.viewDate}
                 .calendarWidth=${this.calendarWidth}
-                .minDate=${r?.minDate} 
-                .maxDate=${r?.maxDate} 
+                .minDate=${o?.minDate}
+                .maxDate=${o?.maxDate}
                 @close=${()=>this.isOpen=!1}
                 @view-date-change=${this.handleViewDateChange}
                 @date-selected=${this.handleDateSelect}
               >
               </calendar-overlay>
             `:i}
-          
+            
           ${this.renderError()}
         </div>
 
         ${this.renderHelper()}
       </div>
-    `}};a([A({type:String}),s("design:type",String)],di.prototype,"width",void 0),a([A({type:Boolean}),s("design:type",Object)],di.prototype,"isRenderClearButton",void 0),a([A({type:String}),s("design:type",String)],di.prototype,"minDate",void 0),a([A({type:String}),s("design:type",String)],di.prototype,"maxDate",void 0),a([A({type:Boolean}),s("design:type",Object)],di.prototype,"eighteenOrOlder",void 0),a([T(),s("design:type",Object)],di.prototype,"isOpen",void 0),a([T(),s("design:type",Object)],di.prototype,"selectedDate",void 0),a([T(),s("design:type",Date)],di.prototype,"viewDate",void 0),a([T(),s("design:type",Object)],di.prototype,"isMobile",void 0),a([T(),s("design:type",Number)],di.prototype,"calendarWidth",void 0),a([z(".input-container"),s("design:type",HTMLDivElement)],di.prototype,"inputContainer",void 0),di=a([d("datepicker-component")],di);const li={"application/pdf":"PDF","application/msword":"Word (.doc)","application/vnd.openxmlformats-officedocument.wordprocessingml.document":"Word (.docx)","image/jpeg":"JPEG","image/png":"PNG","text/plain":"Texto (.txt)"};let ci=class extends L{constructor(){super(...arguments),this.files=[],this.maxFiles=1,this.acceptedFileTypes=[],this.maxFileSize=5242880,this.buttonText="Agregar archivo",this.simulatedDelay=0,this.loading=!1,this.progress=0}static{this.styles=o`
+    `}};n([_({type:String}),a("design:type",String)],Qi.prototype,"width",void 0),n([_({type:Boolean}),a("design:type",Object)],Qi.prototype,"isRenderClearButton",void 0),n([_({type:String}),a("design:type",String)],Qi.prototype,"minDate",void 0),n([_({type:String}),a("design:type",String)],Qi.prototype,"maxDate",void 0),n([_({type:Boolean}),a("design:type",Object)],Qi.prototype,"eighteenOrOlder",void 0),n([T(),a("design:type",Object)],Qi.prototype,"isOpen",void 0),n([T(),a("design:type",Object)],Qi.prototype,"selectedDate",void 0),n([T(),a("design:type",Date)],Qi.prototype,"viewDate",void 0),n([T(),a("design:type",Object)],Qi.prototype,"isMobile",void 0),n([T(),a("design:type",Number)],Qi.prototype,"calendarWidth",void 0),n([T(),a("design:type",Object)],Qi.prototype,"inputValue",void 0),n([j(".input-container"),a("design:type",HTMLDivElement)],Qi.prototype,"inputContainer",void 0),Qi=n([l("datepicker-component")],Qi);let Ji=class extends Ne{constructor(){super(...arguments),this.maxFiles=1,this.acceptedFileTypes=[],this.maxFileSize=5242880,this.buttonText="Agregar archivo"}static{this.styles=r`
         ${X}
-        ${Q}
         ${K}
-        ${Zt}
+        ${G}
+        ${Be}
 
         :host([width]) {
-            width: var(--upload-file-width);
+            width: var( --upload-file-width );
         }
         
         /* Contenedor principal para organizar los elementos */
@@ -3470,7 +3630,7 @@ const Yt=o`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
             gap: 8px;
         }
         
-        input[type="file"] {
+        input[ type="file" ] {
             display: none;
         }
         
@@ -3491,14 +3651,14 @@ const Yt=o`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
             display: flex;
             align-items: center;
             gap: 8px;
-            color: var(--secondary-color-80, #404767);
+            color: var( --secondary-color-80, #404767 );
             max-width: 100%;
         }
         
         .file-name {
-            ${B};
+            ${I};
             text-align: right;
-            color: var(--secondary-color-40);
+            color: var( --secondary-color-40 );
             vertical-align: middle;
             leading-trim: NONE;
             white-space: nowrap;
@@ -3508,37 +3668,31 @@ const Yt=o`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
         }
 
         .remove-file-button {
-            --primary-color: var(--ui-negative, #E00F0F);
+            --primary-color: var( --ui-negative, #E00F0F );
         }
 
         .progress-bar {
             width: 100%;
         }
-    `}updated(t){super.updated(t),this.applyWidth()}applyWidth(){this.width&&this.style.setProperty("--upload-file-width",this.width)}getReadableFileTypes(){const t=this.acceptedFileTypes.map((t=>li[t]||t));if(t.length<=1)return t.join("");const e=t.pop();return`${t.join(", ")} y ${e}`}validateFiles(t){const e=this.maxFileSize/1024/1024;for(const i of t){if(this.acceptedFileTypes.length>0&&!this.acceptedFileTypes.includes(i.type))return this.errorMessage=`formato de archivo no válido, se aceptan: ${this.getReadableFileTypes()}`,!1;if(i.size>this.maxFileSize)return this.errorMessage=`el archivo es demasiado grande, el máximo es de ${e}MB`,!1}return!0}async handleFiles(t){if(this.error=!1,this.errorMessage=null,!t||this.disabled||this.loading)return;const e=Number.isFinite(this.maxFiles)&&this.maxFiles>0?this.maxFiles:1,i=Array.from(t),o=e-this.files.length;if(o<=0)return this.error=!0,void(this.errorMessage=`se ha alcanzado el número máximo de archivos (${e}).`);const r=i.slice(0,o);if(!this.validateFiles(r))return void(this.error=!0);const n=this.simulatedDelay??0;if(n<=0)return this.files=[...this.files,...r],void this.dispatchEvent(new CustomEvent("files-changed",{detail:this.files}));this.loading=!0,this.progress=0,await this.updateComplete;const a=Date.now(),s=setInterval((()=>{const t=Date.now()-a,e=Math.min(Math.round(t/n*100),100);this.progress=e,this.progress>=100&&(clearInterval(s),this.files=[...this.files,...r],this.loading=!1,this.progress=0,this.dispatchEvent(new CustomEvent("files-changed",{detail:this.files})))}),10);this.fileInput&&(this.fileInput.value="")}onFileInputChange(t){const e=t.target;this.handleFiles(e.files),this.fileInput&&(this.fileInput.value="")}removeFile(t){this.files=this.files.filter(((e,i)=>i!==t)),this.dispatchEvent(new CustomEvent("files-changed",{detail:this.files})),0===this.files.length&&(this.error=!1,this.errorMessage=null)}render(){const t=this.files.length>=this.maxFiles,o=this.disabled||t;return e`
+    `}getFileConfig(){return{baseMaxFiles:this.maxFiles,maxFileSize:this.maxFileSize,acceptedFileTypes:this.acceptedFileTypes,errorMessageType:`formato de archivo no válido, se aceptan: ${this.getTextAcceptedFileTypes()}`,errorMessageSize:`el archivo es demasiado grande, el máximo es de ${this.getTextMaxFileSize()}MB`,typeError:"file"}}getTextAcceptedFileTypes(){return this.getReadableFileTypes(this.acceptedFileTypes,Ve)}getTextMaxFileSize(){return this.baseGetTextMaxFileSize(this.maxFileSize)}updated(t){super.updated(t),this.applyWidth()}applyWidth(){this.width&&this.style.setProperty("--upload-file-width",this.width)}onFileInputChange(t){this.baseOnFileInputChange(t,this.getFileConfig())}render(){const t=this.files.length>=this.maxFiles,r=this.disabled||t,o=e`
+            <randstad-button 
+                .label=${this.buttonText}
+                .variant=${"button-primary"} 
+                ?disabled=${r}
+                @click=${()=>this.fileInput?.click()}
+            >
+            </randstad-button>
+        `;return e`
             <div class="file-container" style="${this.labelColor?`--label-color: ${this.labelColor};`:""}">
                 ${this.renderLabelContainer()}
             
-                ${this.loading?e`
-                        <div class="progress-bar-container">
-                            <div class="progress-bar" role="progressbar" aria-label="Subiendo archivo…">
-                                <div class="progress-bar-fill" style="width: ${this.progress}%;"></div>
-                            </div>
-                        </div>
-                    `:e`
-                        <randstad-button 
-                            .label=${this.buttonText}
-                            .variant=${"button-primary"} 
-                            ?disabled=${o}
-                            @click=${()=>this.fileInput?.click()}
-                        >
-                        </randstad-button>
-                    `}
+                ${this.renderLoadingContainer(o)}
                 
                 <input 
                     type="file" 
                     accept=${this.acceptedFileTypes.join(",")}
                     ?multiple=${this.maxFiles>1}
-                    ?disabled=${o}
+                    ?disabled=${r}
                     @change="${this.onFileInputChange}" 
                 />
 
@@ -3550,22 +3704,76 @@ const Yt=o`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
                         <div class="file-list-container">
                             <div class="file-list">
                                 ${this.files.map(((t,i)=>e`
-                                    <div class="file-item">
-                                        <span class="file-name">${t.name}</span>
-
-                                        <randstad-button 
-                                            class="remove-file-button"
-                                            .variant=${"button-icon"}
-                                            .iconName=${"trash"}
-                                            @click=${()=>this.removeFile(i)} 
-                                            ?disabled=${this.disabled}
-                                        >
-                                        </randstad-button>
-                                    </div>
-                                `))}
+                                        <div class="file-item">
+                                            <span class="file-name">${t.name}</span>
+
+                                            <randstad-button 
+                                                class="remove-file-button"
+                                                .variant=${"button-icon"}
+                                                .iconName=${"trash"}
+                                                @click=${()=>this.removeFile(i,"file")} 
+                                                ?disabled=${this.disabled}
+                                            >
+                                            </randstad-button>
+                                        </div>
+                                    `))}
                             </div>
                         </div>
                     `:i}
             </div>
-        `}};a([A({type:String}),s("design:type",String)],ci.prototype,"width",void 0),a([A({type:Array}),s("design:type",Array)],ci.prototype,"files",void 0),a([A({type:Number}),s("design:type",Object)],ci.prototype,"maxFiles",void 0),a([A({type:Array}),s("design:type",Array)],ci.prototype,"acceptedFileTypes",void 0),a([A({type:Number}),s("design:type",Object)],ci.prototype,"maxFileSize",void 0),a([A({type:String}),s("design:type",Object)],ci.prototype,"buttonText",void 0),a([A({type:Number}),s("design:type",Object)],ci.prototype,"simulatedDelay",void 0),a([T(),s("design:type",Object)],ci.prototype,"loading",void 0),a([T(),s("design:type",Object)],ci.prototype,"progress",void 0),a([z('input[type="file"]'),s("design:type",HTMLInputElement)],ci.prototype,"fileInput",void 0),ci=a([d("upload-file")],ci);export{Y as AccordionList,W as AccordionPanel,L as BaseControl,si as CalendarOverlay,H as CarouselCard,G as Checkbox,it as CustomModal,ot as CustomPopup,Ht as CustomRadio,Qt as CustomStepper,di as DatePickerComponent,Gt as FilterableSelect,Z as FormGroup,tt as IconComponent,rt as ProgressCircle,U as RandstadButton,J as RandstadForm,et as RandstadNotice,Jt as TabsBar,ci as UploadFile,te as UploadImage};
+        `}};n([_({type:String}),a("design:type",String)],Ji.prototype,"width",void 0),n([_({type:Number}),a("design:type",Object)],Ji.prototype,"maxFiles",void 0),n([_({type:Array}),a("design:type",Array)],Ji.prototype,"acceptedFileTypes",void 0),n([_({type:Number}),a("design:type",Object)],Ji.prototype,"maxFileSize",void 0),n([_({type:String}),a("design:type",Object)],Ji.prototype,"buttonText",void 0),Ji=n([l("upload-file")],Ji);let Zi=class extends t{constructor(){super(...arguments),this.cards=[],this.isDown=!1,this.isDragging=!1,this.prevX=0}static{this.styles=r`
+        :host {
+            display: block;
+            width: 100%;
+            overflow: hidden;
+            user-select: none;
+        }
+
+        .carousel-wrapper {
+            display: flex;
+            gap: 24px;
+            overflow-x: auto;
+            -webkit-overflow-scrolling: touch;
+            padding: 0 16px;
+        }
+        
+        .carousel-wrapper:hover {
+            cursor: grab;
+        }
+
+        .carousel-wrapper.active {
+            cursor: grabbing;
+        }
+        
+        .carousel-wrapper::-webkit-scrollbar {
+            display: none;
+        }
+
+        .carousel-card-item {
+            flex-shrink: 0;
+        }
+
+        @media ( min-width: 941px ) {
+            .carousel-wrapper {
+                gap: 40px;
+            }
+        }
+    `}disconnectedCallback(){super.disconnectedCallback(),this.baseAddListeners()}get slider(){return this.shadowRoot.querySelector(".carousel-wrapper")}handleMouseDown(t){this.slider&&0===t.button&&(this.isDown=!0,this.isDragging=!1,this.slider.classList.add("active"),this.prevX=t.pageX)}handleMouseLeave(){this.slider&&(this.isDown=!1,this.isDragging=!1,this.slider.classList.remove("active"))}handleMouseUp(){if(this.slider){if(this.isDown=!1,this.slider.classList.remove("active"),this.isDragging){const t=this.slider.querySelector(".carousel-card-item").getBoundingClientRect().width+24,e=this.slider.scrollLeft,i=Math.round(e/t)*t;this.slider.scrollTo({left:i,behavior:"smooth"})}this.isDragging=!1}}handleMouseMove(t){if(t.preventDefault(),!this.isDown||!this.slider)return;this.isDragging=!0;const e=t.pageX-this.prevX;this.slider.scrollLeft-=1.5*e,this.prevX=t.pageX}firstUpdated(){const t=this.slider;t&&(t.addEventListener("mousedown",this.handleMouseDown.bind(this)),t.addEventListener("mouseleave",this.handleMouseLeave.bind(this)),t.addEventListener("mouseup",this.handleMouseUp.bind(this)),t.addEventListener("mousemove",this.handleMouseMove.bind(this)),t.addEventListener("dragstart",(t=>t.preventDefault())))}baseAddListeners(){const t=this.slider;t&&(t.addEventListener("mousedown",this.handleMouseDown.bind(this)),t.addEventListener("mouseleave",this.handleMouseLeave.bind(this)),t.addEventListener("mouseup",this.handleMouseUp.bind(this)),t.addEventListener("mousemove",this.handleMouseMove.bind(this)),t.addEventListener("dragstart",(t=>t.preventDefault())))}render(){return e`
+            <div class="carousel-wrapper">
+                ${this.cards.map((t=>e`
+                        <div class="carousel-card-item">
+                            <carousel-card
+                                img=${t.img}
+                                name=${t.name}
+                                title=${t.title}
+                                description=${t.description}
+                                buttonLabel=${t.buttonLabel}
+                                cardId=${t.cardId}
+                                .onClick=${t.onClick}
+                            >
+                            </carousel-card>
+                        </div>
+                    `))}
+            </div>
+        `}};n([_({type:Array}),a("design:type",Array)],Zi.prototype,"cards",void 0),Zi=n([l("carousel-component")],Zi);export{H as AccordionList,U as AccordionPanel,P as BaseControl,Ki as CalendarOverlay,Zi as Carousel,W as CarouselCard,Y as Checkbox,Vt as CustomModal,Ut as CustomPopup,Te as CustomRadio,ze as CustomStepper,Qi as DatePickerComponent,je as FilterableSelect,Z as FormGroup,Bt as IconComponent,Ht as ProgressCircle,q as RandstadButton,J as RandstadForm,Rt as RandstadNotice,Ie as TabsBar,Ji as UploadFile,Ue as UploadImage,Q as scrollbarStyles};
 //# sourceMappingURL=index.js.map