@randstad-uca/design-system 1.0.30 → 1.0.32

package/dist/index.js

@@ -0,0 +1,2558 @@
+import{css as t,LitElement as e,html as i,nothing as o,isServer as r}from"lit";import{classMap as s}from"lit/directives/class-map.js";function n(t,e,i,o){var r,s=arguments.length,n=s<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,i,o);else for(var a=t.length-1;a>=0;a--)(r=t[a])&&(n=(s<3?r(n):s>3?r(e,i,n):r(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 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,p=Symbol(),h=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=d.litNonce;void 0!==o&&e.setAttribute("nonce",o),e.textContent=i.cssText,t.appendChild(e)}},g=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:y,defineProperty:v,getOwnPropertyDescriptor:m,getOwnPropertyNames:f,getOwnPropertySymbols:x,getPrototypeOf:w}=Object,k=globalThis,$=k.trustedTypes,S=$?$.emptyScript:"",C=k.reactiveElementPolyfillSupport,E=(t,e)=>t,O={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}},A=(t,e)=>!y(t,e),j={attribute:!0,type:String,converter:O,reflect:!1,useDefault:!1,hasChanged:A};
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */Symbol.metadata??=Symbol("metadata"),k.litPropertyMetadata??=new WeakMap;class z 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=j){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&&v(this.prototype,t,o)}}static getPropertyDescriptor(t,e,i){const{get:o,set:r}=m(this.prototype,t)??{get(){return this[e]},set(t){this[e]=t}};return{get:o,set(e){const s=o?.call(this);r?.call(this,e),this.requestUpdate(t,s,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??j}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=[...f(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(g(t))}else void 0!==t&&e.push(g(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:O).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:O;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??A)(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},s){i&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,s??e??this[t]),!0!==r||void 0!==s)||(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){}}z.elementStyles=[],z.shadowRootOptions={mode:"open"},z[E("elementProperties")]=new Map,z[E("finalized")]=new Map,C?.({ReactiveElement:z}),(k.reactiveElementVersions??=[]).push("2.1.0");
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const P={attribute:!0,type:String,converter:O,reflect:!1,hasChanged:A},T=(t=P,e,i)=>{const{kind:o,metadata:r}=i;let s=globalThis.litPropertyMetadata.get(r);if(void 0===s&&globalThis.litPropertyMetadata.set(r,s=new Map),"setter"===o&&((t=Object.create(t)).wrapped=!0),s.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 I(t){return(e,i)=>"object"==typeof i?T(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)}
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */function L(t){return I({...t,state:!0,attribute:!1})}
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function F(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)}})}const _=t`
+  font-family: 'Graphik', sans-serif;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 15px;
+  letter-spacing: 0%;
+`,R=t`
+  font-family: 'Graphik', sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 25px;
+  letter-spacing: 0%;
+`,M=t`
+  font-family: 'Graphik', sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 25px;
+  letter-spacing: 0%;
+`,B=t`
+  font-family: 'Graphik', sans-serif;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 30px;
+  letter-spacing: 0%;
+`,D=t`
+  font-family: 'Graphik', sans-serif;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 30px;
+  letter-spacing: 0%;
+  vertical-align: middle;
+`,U=t`
+  font-family: 'Graphik', sans-serif;
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 30px;
+  letter-spacing: -1%;
+  vertical-align: middle;
+`,V=t`
+  font-family: 'Graphik', sans-serif;
+  font-weight: 400;
+  font-size: 26px;
+  line-height: 30px;
+  letter-spacing: -1%;
+  vertical-align: middle;
+`;let q=class extends e{constructor(){super(...arguments),this.title="",this.isOpen=!1,this.isDesktop=window.innerWidth>940,this.handleResize=()=>{this.isDesktop=window.innerWidth>940}}static{this.styles=t`
+    :host {
+      display: flex;
+      flex-direction: column;
+      font-family: 'Graphik', sans-serif;
+      position: relative;
+    }
+
+    .header {
+      display: flex;
+      justify-content: space-between;
+      gap: 16px;
+      flex-direction: row;
+      align-items: center;
+      cursor: pointer;
+      padding-bottom: 16px;
+    }
+
+    .title {
+      ${M}
+      color: var(--secondary-color);
+    }
+
+    .icon-wrapper {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: background-color 0.3s ease;
+    }
+
+    .icon {
+      transition: transform 0.3s;
+    }
+
+    .content {
+      overflow: hidden;
+      max-height: 0;
+      transition: max-height 0.3s ease, padding-bottom 0.3s ease;
+    }
+
+    .content.open {
+      max-height: 1000px;
+      padding-bottom: 16px;
+    }
+
+    :host::after {
+      content: '';
+      display: block;
+      height: 1px;
+      background-color: var(--secondary-color-20);
+      width: 100%;
+    }
+
+    @media (min-width: 941px) {
+      .header {
+        align-items: flex-start;
+      }
+      .header:hover .icon-wrapper {
+        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?i`<randstad-icon name="arrow_up" size="24px" style="--icon-color: var(--primary-color);"></randstad-icon>`:i`<randstad-icon name="arrow_down" size="24px" style="--icon-color: var(--primary-color);"></randstad-icon>`}render(){return i`
+      <div class="header" @click=${this.toggle}>
+        <div class="title">${this.title}</div>
+        <div class="icon">
+          ${this.isDesktop?i`
+                <div class="icon-wrapper">
+                  ${this.renderIcon()}
+                </div>
+              `:this.renderIcon()}
+        </div>
+      </div>
+      <div class="content ${this.isOpen?"open":""}">
+        <slot></slot>
+      </div>
+    `}};n([I({type:String}),a("design:type",Object)],q.prototype,"title",void 0),n([L(),a("design:type",Object)],q.prototype,"isOpen",void 0),n([L(),a("design:type",Object)],q.prototype,"isDesktop",void 0),q=n([l("accordion-panel")],q);let N=class extends e{static{this.styles=t`
+    :host {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+  `}render(){return i`<slot></slot>`}};N=n([l("accordion-list")],N);let G=class extends e{constructor(){super(...arguments),this.variant="button-primary",this.size="md",this.label="",this.loader=!1,this.iconPosition="left",this.disabled=!1,this.iconName=null,this.type="button"}static{this.styles=t`
+    :host {
+      display: inline-block;
+    }
+
+    .button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 4px;
+      cursor: pointer;
+      font-weight: 400;
+      padding: 16px;
+      border: none;
+      transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+      gap: 4px;
+      width: 100%;
+    }
+
+    .button-lg {
+      ${B}
+      min-height: 62px;
+    }
+
+    .button-md {
+      ${M}
+      min-height: 57px;
+    }
+
+    /* Primary */
+    .button-primary {
+      background-color: var(--primary-color);
+      color: var(--white);
+    }
+
+    .button-primary:not([disabled]):hover {
+      background-color: var(--primary-button-hover);
+    }
+
+    .button-primary:not([disabled]):active {
+      background-color: var(--primary-button-active);
+    }
+
+    .button-primary:not([disabled]):focus-visible {
+      outline: 2px solid var(--primary-button-focus);
+      outline-offset: 2px;
+    }
+
+    .button-primary[disabled] {
+      color: var(--secondary-color-60);
+      background-color: var(--secondary-color-20);
+      cursor: not-allowed;
+    }
+
+    /* Secondary */
+    .button-secondary {
+      background: none;
+      color: var(--primary-color);
+      border: 1px solid var(--primary-color);
+    }
+
+    .button-secondary:not([disabled]):hover {
+      color: var(--primary-button-hover);
+      border-color: var(--primary-button-hover);
+    }
+
+    .button-secondary:not([disabled]):active {
+      color: var(--secondary-color-80);
+      border-color: var(--secondary-color-80);
+    }
+
+    .button-secondary:not([disabled]):focus-visible {
+      outline: 2px solid var(--primary-color);
+      outline-offset: 2px;
+    }
+
+    .button-secondary[disabled] {
+      color: var(--secondary-color-60);
+      border-color: var(--secondary-color-60);
+      cursor: not-allowed;
+    }
+
+    /* Tertiary */
+    .button-tertiary {
+      background: none;
+      border: none;
+      color: var(--primary-color);
+    }
+
+    .button-tertiary:not([disabled]):hover {
+      background: var(--primary-color-5);
+    }
+
+    .button-tertiary:not([disabled]):active {
+      background-color: var(--primary-color-10);
+    }
+
+    .button-tertiary:not([disabled]):focus-visible {
+      outline: 2px solid var(--primary-color);
+      outline-offset: 2px;
+    }
+
+    .button-tertiary[disabled] {
+      color: var(--secondary-color-60);
+      cursor: not-allowed;
+    }
+
+    /* Round */
+    .button-round {
+      width: 48px;
+      height: 48px;
+      border-radius: 50%;
+      background-color: var(--white);
+      box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
+      padding: 0;
+    }
+
+    .button-round:not([disabled]):hover {
+      background-color: var(--randstad-blue-10);
+    }
+
+    .button-round:not([disabled]):active {
+      background-color: var(--randstad-blue-40);
+    }
+
+    .button-round:not([disabled]):focus-visible {
+      outline: 2px solid var(--primary-color);
+      outline-offset: 2px;
+    }
+
+    .button-round[disabled] {
+      background-color: var(--secondary-color-20);
+      cursor: not-allowed;
+    }
+
+    .button-round img.button-icon {
+      width: 24px;
+      height: 24px;
+    }
+
+    /* Loader */
+    .loader {
+      display: flex;
+      gap: 8px;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+    }
+
+    .dot {
+      border-radius: 50%;
+      display: inline-block;
+      animation: growAndFade 2.4s infinite ease-in-out;
+    }
+
+    .button-md .dot {
+      width: 6px;
+      height: 6px;
+    }
+
+    .button-lg .dot {
+      width: 8px;
+      height: 8px;
+    }
+
+    .dot:nth-child(1) { animation-delay: 0s; }
+    .dot:nth-child(2) { animation-delay: 0.8s; }
+    .dot:nth-child(3) { animation-delay: 1.6s; }
+
+    @keyframes growAndFade {
+      0% { transform: scale(1); }
+      16.67% { transform: scale(1.5); }
+      33.33% { transform: scale(1.5); }
+      50% { transform: scale(1); }
+      100% { transform: scale(1); }
+    }
+
+    .button-primary.loader .dot,
+    .button-secondary.loader .dot {
+      background-color: var(--white);
+    }
+
+    .button-secondary.loader {
+      background-color: var(--primary-color);
+      border: none;
+      color: var(--white);
+    }
+
+    .button-card {
+      font-family: 'Graphik';
+      background-color: var(--primary-color);
+      color: var(--white);
+      border-radius: 4px;
+      padding: 4px 16px;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 15px;
+      letter-spacing: 0%;
+      text-align: center;
+      vertical-align: middle;
+
+    }
+
+    .button-card:not([disabled]):hover {
+      background-color: #175197;
+    }
+
+    .button-card:not([disabled]):active {
+      background-color: #124077;
+    }
+
+    .button-card:not([disabled]):focus-visible {
+      outline: 2px solid var(--primary-color);
+      outline-offset: 2px;
+    }
+
+    .button-card[disabled] {
+      background-color: #CFD1D9;
+      color: #6F758D;
+      cursor: not-allowed;
+    }
+
+  `}handleClick(t){if(!this.disabled&&"submit"===this.type){const t=this.closest("form");t&&t.requestSubmit()}}render(){const t={button:!0,[this.variant]:!0,loader:this.loader,[`button-${this.size}`]:"button-round"!==this.variant&&"button-card"!==this.variant},e="button-tertiary"===this.variant?"var(--primary-color)":"white";return i`
+      <button
+        part="button"
+        type=${this.type}
+        class=${s(t)}
+        ?disabled=${this.disabled}
+        ?aria-busy=${this.loader}
+        @click=${this.handleClick}
+      >
+        ${this.loader?i`
+              <div class="loader">
+                <span class="dot" style="background-color: ${e};"></span>
+                <span class="dot" style="background-color: ${e};"></span>
+                <span class="dot" style="background-color: ${e};"></span>
+              </div>
+            `:i`
+              ${this.iconSrc&&"button-round"===this.variant?i`<img src=${this.iconSrc} alt="icon" class="button-icon" part="button-icon"/>`:""}
+              ${this.iconName&&"button-round"!==this.variant&&"left"===this.iconPosition?i`<randstad-icon name=${this.iconName} size="24px"></randstad-icon>`:""}
+              ${this.label?i`<span part="label">${this.label}</span>`:i`<slot></slot>`}
+              ${this.iconName&&"button-round"!==this.variant&&"right"===this.iconPosition?i`<randstad-icon name=${this.iconName} size="24px"></randstad-icon>`:""}
+            `}
+      </button>
+    `}};n([I({type:String}),a("design:type",String)],G.prototype,"variant",void 0),n([I({type:String}),a("design:type",String)],G.prototype,"size",void 0),n([I({type:String}),a("design:type",Object)],G.prototype,"label",void 0),n([I({type:Boolean}),a("design:type",Object)],G.prototype,"loader",void 0),n([I({type:String,attribute:"icon-src"}),a("design:type",String)],G.prototype,"iconSrc",void 0),n([I({type:String}),a("design:type",String)],G.prototype,"iconPosition",void 0),n([I({type:Boolean,reflect:!0}),a("design:type",Boolean)],G.prototype,"disabled",void 0),n([I({type:String}),a("design:type",Object)],G.prototype,"iconName",void 0),n([I({type:String}),a("design:type",String)],G.prototype,"type",void 0),G=n([l("randstad-button")],G);let H=class extends e{constructor(){super(...arguments),this.img="",this.name="",this.title="",this.description="",this.url="#",this.buttonLabel="Contactanos"}static{this.styles=t`
+    :host {
+      display: inline-block;
+      font-family: "Graphik", sans-serif;
+    }
+
+    .image-container {
+      width: 280px;
+      height: 390px;
+      position: relative;
+      border-radius: 8px;
+      overflow: hidden;
+      background-size: cover;
+      background-position: center;
+      background-repeat: no-repeat;
+      display: flex;
+      align-items: flex-end;
+    }
+
+    .overlay-gradient,
+    .overlay-hover {
+      position: absolute;
+      inset: 0;
+      border-radius: 8px;
+      transition: opacity 1s ease;
+      z-index: 0;
+      pointer-events: none;
+    }
+
+    .overlay-gradient {
+      background: linear-gradient(180deg, rgba(15, 25, 65, 0) 0%, rgba(15, 25, 65, 0.279522) 48.01%, rgba(15, 25, 65, 0.6) 80.13%, rgba(15, 25, 65, 0.6) 100%);
+      opacity: 1;
+    }
+
+    .overlay-hover {
+      background: #0F1941CC;
+      opacity: 0;
+    }
+
+    .image-container:hover .overlay-hover {
+      opacity: 1;
+    }
+
+    .content-container {
+      position: relative;
+      z-index: 1;
+      color: #FFFFFF;
+      padding: 24px;
+      box-sizing: border-box;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .title-wrapper {
+      margin-bottom: 0; /* reset, por si acaso */
+    }
+
+    .title {
+      ${B}
+      margin: 0;
+    }
+
+    .details {
+      max-height: 0;
+      overflow: hidden;
+      opacity: 0;
+      transform: translateY(40px);
+      transition: max-height 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
+    }
+
+    .image-container:hover .details {
+      max-height: 240px;
+      opacity: 1;
+      transform: translateY(0);
+      overflow: visible;
+    }
+
+    .description {
+      ${R}
+    }
+
+    ::part(button) {
+      color: white;
+      border: 1px solid white;
+      background: transparent;
+      text-align: left;
+    }
+
+    ::part(button):hover {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+
+    ::part(button):active {
+      background-color: rgba(255, 255, 255, 0.2);
+    }    
+  `}handleClick(){this.dispatchEvent(new CustomEvent("card-click",{detail:{img:this.img,name:this.name,title:this.title,description:this.description,url:this.url},bubbles:!0,composed:!0}))}render(){return i`
+      <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>
+            <randstad-button
+              variant="button-tertiary"
+              .label=${this.buttonLabel}
+              @button-click=${this.handleClick}
+            ></randstad-button>
+          </div>
+        </div>
+      </div>
+    `}};n([I({type:String}),a("design:type",Object)],H.prototype,"img",void 0),n([I({type:String}),a("design:type",Object)],H.prototype,"name",void 0),n([I({type:String}),a("design:type",Object)],H.prototype,"title",void 0),n([I({type:String}),a("design:type",Object)],H.prototype,"description",void 0),n([I({type:String}),a("design:type",Object)],H.prototype,"url",void 0),n([I({type:String}),a("design:type",Object)],H.prototype,"buttonLabel",void 0),H=n([l("carousel-card")],H);let K=class extends e{constructor(){super(...arguments),this.checked=!1,this.error=!1,this.disabled=!1}static{this.styles=t`
+    :host {
+      display: block;
+      max-width: 100%;
+    }
+
+    label {
+      ${R}
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      color: var(--secondary-color);
+    }
+
+    input[type="checkbox"] {
+      min-width: 24px;
+      min-height: 24px;
+      cursor: pointer;
+      border-radius: 4px;
+      border: 1px solid var(--secondary-color-20);
+      appearance: none;
+      position: relative;
+    }
+
+    input[type="checkbox"]:checked {
+      background-color: var(--primary-color);
+      border: 1px solid var(--primary-color);
+    }
+
+    input[type="checkbox"]:checked::after {
+      content: '';
+      position: absolute;
+      left: 8px;
+      top: 4px;
+      width: 5px;
+      height: 11px;
+      border: solid white;
+      border-width: 0 1px 1px 0;
+      transform: rotate(45deg);
+    }
+
+    input[type="checkbox"]:checked:disabled::after {
+      border-color: var(--secondary-color-40);
+    }
+
+    label.error input[type="checkbox"]:checked:disabled::after {
+      border-color: white;
+    }
+
+    .terms-text {
+      display: inline;
+    }
+
+    .terms-text ::slotted(a) {
+      color: var(--primary-color);
+      text-decoration: none;
+      cursor: pointer;
+    }
+
+    input[type="checkbox"].error,
+    label.error input[type="checkbox"]:not(:disabled) {
+      border-color: var(--ui-negative);
+    }
+
+    /* Hover sin error (solo si no está deshabilitado) */
+    input[type="checkbox"]:hover:not(:disabled):not(.error) {
+      box-shadow: 0 0 0 4px var(--secondary-color-10);
+    }
+
+    /* Hover con error (solo si no está deshabilitado) */
+    label.error input[type="checkbox"]:hover:not(:disabled) {
+      box-shadow: 0px 0px 0px 4px #E00F0F1A;
+    }
+
+    /* ✅ Focus sin error */
+    input[type="checkbox"]:focus-visible:not(:disabled):not(.error),
+    label:not(.error) input[type="checkbox"]:focus-visible:not(:disabled) {
+      outline: none;
+      box-shadow: 0 0 0 4px var(--secondary-color-10);
+    }
+
+    /* ❌ Focus con error */
+    label.error input[type="checkbox"]:focus-visible:not(:disabled) {
+      outline: none;
+      box-shadow: 0 0 0 4px #E00F0F1A;
+    }
+
+    input[type="checkbox"].error:checked,
+    label.error input[type="checkbox"]:checked {
+      background-color: var(--ui-negative);
+      border-color: var(--ui-negative);
+    }
+
+    input[type="checkbox"]:disabled {
+      background-color: var(--secondary-color-10);
+      border-color: var(--secondary-color-20);
+      cursor: not-allowed;
+    }
+
+  `}toggleCheck(t){this.checked=t.target.checked,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("click",{bubbles:!0,composed:!0}))}render(){return i`
+      <label class="${this.error?"error":""} ${this.disabled?"disabled":""}">
+        <input
+          type="checkbox"
+          role="checkbox"
+          aria-checked=${this.checked?"true":"false"}
+          .checked=${this.checked}
+          ?disabled=${this.disabled}
+          @change=${this.toggleCheck}
+          @focus=${()=>this.setAttribute("focused","")}
+          @blur=${()=>this.removeAttribute("focused")}
+        />
+        <span class="terms-text">
+          <slot></slot>
+        </span>
+      </label>
+    `}};n([I({type:Boolean,reflect:!0}),a("design:type",Object)],K.prototype,"checked",void 0),n([I({type:Boolean}),a("design:type",Object)],K.prototype,"error",void 0),n([I({type:Boolean}),a("design:type",Object)],K.prototype,"disabled",void 0),K=n([l("randstad-checkbox")],K);let Y=class extends e{constructor(){super(...arguments),this.value="",this.size="md",this.icon=null,this.helper=null,this.error=!1,this.errorMessage="",this.disabled=!1,this.typing=!1,this.type="text",this.isPasswordVisible=!1,this.cleanButton=!1,this.required=!1,this.optional=!1}static{this.styles=t`
+    :host {
+      display: block;
+      font-family: 'Graphik', sans-serif;
+      width: 100%;
+    }
+
+    .form {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      width: 100%;
+    }
+
+    .label-container {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+    }
+
+    .form-label {
+      ${M}
+      display: flex;
+      align-items: baseline;
+      flex-direction: row;
+      gap: 4px;
+      color: var(--label-color, var(--secondary-color-80));
+    }
+
+    .form-container {
+      position: relative;
+      display: flex;
+      align-items: center;
+      width: 100%;
+    }
+
+    .form-input {
+      ${B}
+      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.error .form-input {
+      background-color: var(--ui-negative-5);
+      border-color: var(--ui-negative);
+    }
+
+    /* 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);
+    }
+
+    /* 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-input:focus {
+      border: 2px solid var(--primary-color)
+    }
+
+    .form.disabled .form-input {
+      background-color: var(--secondary-color-10);
+      cursor: not-allowed;
+    }
+
+    input::placeholder {
+      ${B}
+      color: var(--secondary-color-40);
+    }
+
+    .input-with-button {
+      display: flex;
+      align-items: center;
+      width: 100%;
+    }
+
+    .input-with-button input {
+      width: 100%;
+      padding-right: 40px;
+    }
+
+    .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;
+    }
+
+    .toggle-password randstad-icon {
+      width: 100%;
+      height: 100%;
+      max-width: 32px;
+      max-height: 32px;
+    }
+
+    textarea {
+      ${B}
+      resize: none;
+    }
+
+    textarea.form-input {
+      min-height: 100px;
+      width: 100%;
+    }
+
+    .form.disabled textarea.form-input {
+      background-color: var(--secondary-color-10);
+      cursor: not-allowed;
+    }
+
+    .helper-description {
+      ${M}
+      color: var(--secondary-color-40);
+      margin: 0px;
+    }
+
+    .help-icon {
+      cursor:pointer;
+    }
+
+    .error-message {
+      ${M}
+      color: var(--ui-negative);
+      margin: 0px;
+    }
+
+    .link-text {
+      ${M}
+      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);
+    }
+
+    randstad-icon {
+      color: var(--primary-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;
+    }
+
+    // TOOLTIP, NO SE ESTÁ USANDO EN FORMS EN ESTE MOMENTO, PERO SE DEJA POR SI SE NECESITA
+    .tooltip-wrapper {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+    }
+
+    .tooltip {
+      visibility: hidden;
+      position: absolute;
+      top: auto;
+      right: 125%;
+      left: auto;
+      transform: none;
+      background-color: #333;
+      color: #fff;
+      padding: 8px 12px;
+      border-radius: 4px;
+      font-size: 14px;
+      line-height: 20px;
+      white-space: nowrap;
+      z-index: 10;
+      opacity: 0;
+      transition: opacity 0.2s ease;
+    }
+
+    .tooltip::after {
+      content: '';
+      position: absolute;
+      right: -6px;
+      bottom: 50%;
+      transform: translateY(50%);
+      width: 0;
+      height: 0;
+      border-style: solid;
+      border-width: 6px 0 6px 6px;
+      border-color: transparent transparent transparent #333;
+    }
+
+    .tooltip-wrapper:hover .tooltip {
+      visibility: visible;
+      opacity: 1;
+    }
+
+    .required {
+      color: var(--ui-negative);
+    }
+
+    .optional {
+      color: var(--secondary-color-60);
+      ${_}
+    }
+  `}togglePassword(t){this.isPasswordVisible=!this.isPasswordVisible;const e=t.currentTarget.parentElement?.querySelector("input");e&&(e.type=this.isPasswordVisible?"text":"password"),this.requestUpdate()}handleInput(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}))}handleHelpClick(){this.helpLink&&window.open(this.helpLink,"_blank")}handleKeyDown(t){if("Enter"===t.key){const t=new Event("submit",{bubbles:!0,composed:!0,cancelable:!0}),e=this.closest("form");e&&e.dispatchEvent(t)}}render(){const t=this.cleanButton&&this.value&&"password"!==this.type&&"textarea"!==this.type;return i`
+      <div
+        class="form ${this.error?"error":""} ${this.disabled?"disabled":""}"
+        style=${this.labelColor?`--label-color: ${this.labelColor}`:o}
+      >
+        ${this.label?i`
+          <div class="label-container">
+            <label class="form-label">
+              ${this.label}
+              ${this.required?i`<span class="required">*</span>`:this.optional?i`<span class="optional">opcional</span>`:o}
+            </label>
+            ${this.helpLink?i`
+                  <div class="tooltip-wrapper">
+                    <randstad-icon
+                      class="help-icon"
+                      name="ayuda"
+                      size="20px"
+                      @click=${this.handleHelpClick}>
+                    </randstad-icon>
+                  </div>
+                `:o}
+          </div>
+        `:o}
+
+        <div class="form-container">
+          ${"left"===this.icon?i`<span class="icon left"></span>`:o}
+
+          <div class="input-with-button">
+            ${"textarea"===this.type?i`
+                  <textarea
+                    class="form-input"
+                    placeholder=${this.placeholder||""}
+                    .value=${this.value}
+                    ?disabled=${this.disabled}
+                    @input=${this.handleInput}
+                    @keydown=${this.handleKeyDown}
+                    maxlength=${this.maxLength??o}
+                  ></textarea>`:i`
+                  <input
+                    class="form-input"
+                    type=${"password"!==this.type||this.isPasswordVisible?"text":"password"}
+                    placeholder=${this.placeholder||""}
+                    .value=${this.value}
+                    ?disabled=${this.disabled}
+                    @input=${this.handleInput}
+                    @keydown=${this.handleKeyDown}
+                    maxlength=${this.maxLength??o}
+                  />
+
+                  ${"password"===this.type?i`<button type="button" class="toggle-password" @click=${this.togglePassword}>
+                        ${this.isPasswordVisible?i`<randstad-icon name='eye_crossed' size="24px"></randstad-icon>`:i`<randstad-icon name='eye' size="24px"></randstad-icon>`}
+                      </button>`:o}
+
+                  ${t?i`<button type="button" class="clean-button" @click=${this.handleClear}>
+                        <randstad-icon name="close" size="24px" style="--icon-color: var(--primary-color);"></randstad-icon>
+                      </button>`:o}
+              `}
+          </div>
+
+          ${"right"===this.icon?i`<span class="icon right"></span>`:o}
+        </div>
+
+        ${this.error?i`
+          <p class="error-message">
+            ${this.errorMessage?this.errorMessage:i`<slot name="error-extended"></slot>`}
+          </p>`:o}
+
+        ${this.linkText&&this.linkRoute?i`<div style="text-align: end;">
+              <a class="link-text" @click=${this.handleLinkClick}>${this.linkText}</a>
+            </div>`:o}
+
+        ${this.helper?i`<p class="helper-description">${this.helper}</p>`:o}
+      </div>
+    `}};n([I({type:String}),a("design:type",String)],Y.prototype,"placeholder",void 0),n([I({type:String}),a("design:type",String)],Y.prototype,"label",void 0),n([I({type:String}),a("design:type",String)],Y.prototype,"labelColor",void 0),n([I({type:String}),a("design:type",String)],Y.prototype,"value",void 0),n([I({type:String}),a("design:type",String)],Y.prototype,"size",void 0),n([I({type:String}),a("design:type",Object)],Y.prototype,"icon",void 0),n([I({type:String}),a("design:type",Object)],Y.prototype,"helper",void 0),n([I({type:Boolean}),a("design:type",Boolean)],Y.prototype,"error",void 0),n([I({type:String}),a("design:type",String)],Y.prototype,"errorMessage",void 0),n([I({type:Boolean}),a("design:type",Boolean)],Y.prototype,"disabled",void 0),n([I({type:Boolean}),a("design:type",Boolean)],Y.prototype,"typing",void 0),n([I({type:String}),a("design:type",String)],Y.prototype,"type",void 0),n([I({type:String}),a("design:type",String)],Y.prototype,"tooltipMessage",void 0),n([I({type:String}),a("design:type",String)],Y.prototype,"linkText",void 0),n([I({type:String}),a("design:type",String)],Y.prototype,"linkRoute",void 0),n([I({type:Boolean,reflect:!0}),a("design:type",Object)],Y.prototype,"isPasswordVisible",void 0),n([I({type:Boolean}),a("design:type",Boolean)],Y.prototype,"cleanButton",void 0),n([I({type:Number}),a("design:type",Number)],Y.prototype,"maxLength",void 0),n([I({type:Boolean}),a("design:type",Object)],Y.prototype,"required",void 0),n([I({type:Boolean}),a("design:type",Object)],Y.prototype,"optional",void 0),n([I({type:String}),a("design:type",String)],Y.prototype,"helpLink",void 0),Y=n([l("randstad-form")],Y);let W=class extends e{constructor(){super(...arguments),this.label="",this.error=!1,this.errorMessage="",this.required=!1,this.optional=!1}static{this.styles=t`
+    :host {
+      display: flex;
+      flex-direction: column;
+      font-family: 'Graphik', sans-serif;
+      gap: 8px;
+      width: 100%;
+    }
+
+    .form-label {
+      ${M}
+      display: flex;
+      align-items: baseline;
+      flex-direction: row;
+      gap: 4px;
+      color: var(--label-color, var(--secondary-color-80));
+    }
+
+    .fields {
+      display: flex;
+      flex-direction: column;
+      gap: 16px; /* espaciado entre inputs */
+    }
+
+    .helper {
+      ${M}
+      color: var(--secondary-color-40);
+    }
+
+    .error {
+      ${M}
+      color: var(--ui-negative);
+    }
+
+    .required {
+      color: var(--ui-negative);
+    }
+
+    .optional {
+      color: var(--secondary-color-60);
+      ${_}
+    }
+  `}render(){return i`
+      <label class="form-label">
+        ${this.label}
+        ${this.required?i`<span class="required">*</span>`:this.optional?i`<span class="optional">opcional</span>`:o}
+      </label>
+
+      <div class="fields">
+        <slot></slot>
+      </div>
+
+      ${this.error?i`<p class="error">${this.errorMessage}</p>`:this.helper?i`<p class="helper">${this.helper}</p>`:null}
+    `}};n([I({type:String}),a("design:type",Object)],W.prototype,"label",void 0),n([I({type:String}),a("design:type",String)],W.prototype,"helper",void 0),n([I({type:Boolean}),a("design:type",Object)],W.prototype,"error",void 0),n([I({type:String}),a("design:type",Object)],W.prototype,"errorMessage",void 0),n([I({type:Boolean}),a("design:type",Object)],W.prototype,"required",void 0),n([I({type:Boolean}),a("design:type",Object)],W.prototype,"optional",void 0),W=n([l("randstad-form-group")],W);class X extends e{constructor(){super(...arguments),this.name="",this.size="24px"}static{this.styles=t`
+    :host {
+      display: inline-flex;
+      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);
+    }
+  `}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}}n([I({type:String}),a("design:type",Object)],X.prototype,"name",void 0),n([I({type:String}),a("design:type",Object)],X.prototype,"size",void 0),customElements.define("randstad-icon",X);let J=class extends e{constructor(){super(...arguments),this.type="informative",this.icon="info",this.message="Este es un mensaje.",this.open=!1}static{this.styles=t`
+    :host {
+      display: block;
+      font-family: 'Graphik', sans-serif;
+    }
+
+    .container {
+      ${M}
+      display: flex;
+      align-items: flex-start;
+      gap: 8px;
+      border-radius: 8px;
+      padding: 16px;
+      color: var(--secondary-color);
+    }
+
+    .icon {
+      font-size: 34px;
+      flex-shrink: 0;
+    }
+
+    .hidden {
+      display: none;
+    }
+
+    .success {
+      border: 1px solid var(--ui-positive);
+      background: var(--ui-positive-5);
+      --icon-color: var(--ui-positive);
+    }
+
+    .error {
+      border: 1px solid var(--ui-negative);
+      background: var(--ui-negative-5);
+      --icon-color: var(--ui-negative);
+    }
+
+    .warning {
+      border: 1px solid var(--ui-warning);
+      background: var(--ui-warning-10);
+      --icon-color: var(--ui-warning);
+    }
+      
+    .informative {
+      border: 1px solid var(--ui-informative);
+      background: var(--ui-informative-10);
+      --icon-color: var(--ui-informative);
+    }
+  `}render(){return i`
+      <div class="container ${this.open?"":"hidden"} ${this.type}">
+        <randstad-icon class="icon" name="${this.icon}" size="24px" style="color: var(--icon-color);"></randstad-icon>
+        <span class="message">${this.message}</span>
+      </div>
+    `}};n([I({type:String}),a("design:type",String)],J.prototype,"type",void 0),n([I({type:String}),a("design:type",String)],J.prototype,"icon",void 0),n([I({type:String}),a("design:type",String)],J.prototype,"message",void 0),n([I({type:Boolean}),a("design:type",Boolean)],J.prototype,"open",void 0),J=n([l("randstad-notice")],J);let Q=class extends e{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.scrollable=!1,this.setScrollableMode=()=>{this.scrollable=window.innerWidth>940}}static{this.styles=t`
+    :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;
+      background: rgba(0, 0, 0, 0.5);
+      overflow-y: auto;
+      padding: 40px 16px;
+      z-index: 9999;
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
+    }
+
+    .modal {
+      background: var(--brand-off-white);
+      width: 100%;
+      max-width: 500px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      display: flex;
+      flex-direction: column;
+      margin-top: 40px;
+      border-radius: 8px;
+    }
+
+    .modal.scrollable {
+      max-height: 90vh;
+    }
+
+    .modal-body.scrollable {
+      overflow-y: auto;
+      flex: 1;
+    }
+
+    .modal-body {
+      display: flex;
+      flex-direction: column;
+      padding: 24px;
+      gap: 16px;
+    }
+
+    .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-header-content {
+      display: flex;
+      gap: 32px;
+      width: 100%;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .titles-container {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      flex-grow: 1;
+    }
+
+    .modal-title {
+      ${V}
+      margin: 0;
+      color: var(--secondary-color);
+    }
+
+    .modal-subtitle {
+      ${M}
+      margin: 0;
+      color: var(--secondary-color-60);
+    }
+
+    .modal-header randstad-notice {
+      width: 100%;
+    }
+
+    .modal-close {
+      background: none;
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+    }
+
+    .modal-footer {
+      display: flex;
+      justify-content: flex-end;
+      flex-direction: row;
+      padding: 24px;
+      gap: 16px;
+      border-top: 1px solid var(--secondary-color-20);
+    }
+
+    .modal-footer.one-button randstad-button {
+      width: 100%;
+    }
+
+    .modal-footer.two-buttons randstad-button {
+      width: 50%;
+    }
+
+    @media (max-width: 940px) {
+      .modal-footer.two-buttons {
+        flex-direction: column;
+      }
+
+      .modal-footer.two-buttons randstad-button {
+        width: 100%;
+      }
+    }
+  `}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)}render(){return i`
+      <div class="overlay" role="dialog" aria-modal="true">
+        <div class="modal ${this.scrollable?"scrollable":""}">
+          <div class="modal-header">
+            <div class="modal-header-content">
+              <div class="titles-container">
+                <div class="modal-title">${this.title}</div>
+                ${this.subtitle?i`<div class="modal-subtitle">${this.subtitle}</div>`:o}
+              </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>
+              </button>
+            </div>
+            ${this.showNotice?i`
+                  <randstad-notice
+                    .open=${!0}
+                    .type=${this.noticeType}
+                    .icon=${this.noticeIcon}
+                    .message=${this.noticeMessage}
+                  ></randstad-notice>
+                `:o}
+          </div>
+          <div class="modal-body ${this.scrollable?"scrollable":""}">
+            <slot name="content"></slot>
+          </div>
+          <div class="modal-footer ${this.showPrimaryButton&&this.showSecondaryButton?"two-buttons":"one-button"}">
+            ${this.showPrimaryButton?i`
+                  <randstad-button
+                    variant="button-primary"
+                    size="md"
+                    @click=${()=>this.dispatchEvent(new CustomEvent("primary-click"))}
+                    label=${this.primaryButtonLabel}
+                  ></randstad-button>
+                `:o}
+            ${this.showSecondaryButton?i`
+                  <randstad-button
+                    variant="button-secondary"
+                    size="md"
+                    @click=${()=>this.dispatchEvent(new CustomEvent("secondary-click"))}
+                    label=${this.secondaryButtonLabel}
+                  ></randstad-button>
+                `:o}
+          </div>
+        </div>
+      </div>
+    `}};n([I({type:Boolean,reflect:!0}),a("design:type",Object)],Q.prototype,"open",void 0),n([I({type:String}),a("design:type",Object)],Q.prototype,"title",void 0),n([I({type:String}),a("design:type",String)],Q.prototype,"subtitle",void 0),n([I({type:Boolean}),a("design:type",Object)],Q.prototype,"showNotice",void 0),n([I({type:String}),a("design:type",String)],Q.prototype,"noticeType",void 0),n([I({type:String}),a("design:type",Object)],Q.prototype,"noticeMessage",void 0),n([I({type:String}),a("design:type",Object)],Q.prototype,"noticeIcon",void 0),n([I({type:Boolean}),a("design:type",Object)],Q.prototype,"showPrimaryButton",void 0),n([I({type:String}),a("design:type",Object)],Q.prototype,"primaryButtonLabel",void 0),n([I({type:Boolean}),a("design:type",Object)],Q.prototype,"showSecondaryButton",void 0),n([I({type:String}),a("design:type",Object)],Q.prototype,"secondaryButtonLabel",void 0),n([L(),a("design:type",Object)],Q.prototype,"scrollable",void 0),Q=n([l("custom-modal")],Q);let Z=class extends e{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=t`
+    :host {
+      display: none;
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.5);
+      justify-content: center;
+      align-items: center;
+      font-family: "Graphik", sans-serif;
+    }
+
+    :host([open]) {
+      display: flex;
+    }
+
+    .popup {
+      background: var(--white);
+      padding: 24px;
+      border-radius: 16px;
+      text-align: center;
+      animation: fadeIn 0.2s ease-in-out;
+      width: var(--popup-width, 400px);
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+      align-items: center;
+    }
+
+    @keyframes fadeIn {
+      from { opacity: 0; transform: scale(0.9); }
+      to { opacity: 1; transform: scale(1); }
+    }
+
+    .popup-content {
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+      width: 100%;
+    }
+
+    .titles-container {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      align-items: center;  
+    }
+
+    .popup-title {
+      ${U}
+      margin: 0;
+      color: var(--secondary-color-80);
+    }
+
+    .popup-description {
+      ${M}
+      margin: 0;
+      color: var(--secondary-color-60);
+    }
+
+    .buttons-container {
+      margin-top: 12px;
+      display: flex;
+      gap: 10px;
+    }
+
+    .buttons-container ::slotted(randstad-button),
+    .buttons-container randstad-button {
+      flex: 1 1 50%;
+    }
+
+    :host([type="stacked"]) .buttons-container {
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    .popup-actions {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+    }
+
+    .action-item {
+      ${D};
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      cursor: pointer;
+      color: var(--secondary-color);
+      padding: 16px;
+      border-radius: 8px;
+      transition: background 0.2s;
+    }
+
+    .action-item:hover {
+      background: var(--secondary-color-10, #f0f4ff);
+    }
+
+    .icon-circle {
+      width: 32px;
+      height: 32px;
+      background: var(--primary-color-20, #D3E3F7);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+  `}firstUpdated(){if(this.open){const t=this.renderRoot.querySelector("randstad-button");t&&t.focus()}this.addEventListener("click",this._onBackgroundClick)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this._onBackgroundClick)}closePopup(t){this.dispatchEvent(new CustomEvent("popup-close",{detail:t})),this.open=!1}render(){return i`
+      <div
+        class="popup"
+        role="dialog"
+        aria-modal="true"
+        style="width: ${this.width};"
+        ${"default"!==this.type?i`aria-labelledby="popup-title"`:o}
+        aria-describedby="popup-description"
+      >
+        ${"stacked"!==this.type&&this.icon?i`<img src="/assets/icons/${this.icon}" alt="" width="56" height="56" />`:o}
+
+        <div class="popup-content">
+          ${"default"===this.type?i`
+                <div class="titles-container">
+                  <p id="popup-description" class="popup-description">${this.description}</p>
+                </div>
+                <div class="buttons-container">
+                  <randstad-button
+                    variant="button-primary"
+                    size="md"
+                    @click=${()=>this.closePopup(!0)}
+                    label=${this.buttonText}
+                  ></randstad-button>
+                </div>
+              `:"stacked"===this.type?i`
+                <div class="popup-actions">
+                  ${this.stackedActions.map((t=>i`
+                      <div
+                        class="action-item"
+                        @click=${()=>this.closePopup(t.value)}
+                      >
+                        <div class="icon-circle">
+                          <randstad-icon
+                            name=${t.icon}
+                            size="24px"
+                            style="--icon-color: var(--primary-color);"
+                          ></randstad-icon>
+                        </div>
+                        <span>${t.label}</span>
+                      </div>
+                    `))}
+                </div>
+              `:i`
+                <div class="titles-container">
+                  <h2 id="popup-title" class="popup-title">${this.title}</h2>
+                  <p id="popup-description" class="popup-description">${this.description}</p>
+                </div>
+                <div class="buttons-container">
+                  <randstad-button
+                    variant="button-secondary"
+                    size="md"
+                    @click=${()=>this.closePopup(!1)}
+                    label=${this.cancelText}
+                  ></randstad-button>
+                  <randstad-button
+                    variant="button-primary"
+                    size="md"
+                    @click=${()=>this.closePopup(!0)}
+                    label=${this.confirmText}
+                  ></randstad-button>
+                </div>
+              `}
+        </div>
+      </div>
+    `}};n([I({type:Boolean,reflect:!0}),a("design:type",Object)],Z.prototype,"open",void 0),n([I({type:String}),a("design:type",String)],Z.prototype,"type",void 0),n([I({type:String}),a("design:type",Object)],Z.prototype,"icon",void 0),n([I({type:String}),a("design:type",Object)],Z.prototype,"title",void 0),n([I({type:String}),a("design:type",Object)],Z.prototype,"description",void 0),n([I({type:String}),a("design:type",Object)],Z.prototype,"width",void 0),n([I({type:String}),a("design:type",Object)],Z.prototype,"buttonText",void 0),n([I({type:String}),a("design:type",Object)],Z.prototype,"confirmText",void 0),n([I({type:String}),a("design:type",Object)],Z.prototype,"cancelText",void 0),n([I({type:Array}),a("design:type",Array)],Z.prototype,"stackedActions",void 0),Z=n([l("custom-popup")],Z);let tt=class extends e{constructor(){super(...arguments),this.value=0,this.max=5}static{this.styles=t`
+    :host {
+      display: inline-block;
+      width: 64px;
+      height: 64px;
+    }
+
+    svg {
+      width: 64px;
+      height: 64px;
+    }
+
+    .circle-text {
+      ${_};
+      text-align: center;
+      vertical-align: middle;
+      fill: var(--randstad-dark-blue-40);
+      text-anchor: middle;
+      dominant-baseline: middle;
+    }
+
+    circle.bg {
+      stroke: var(--primary-light-blue-20);
+    }
+
+    circle.fg {
+      stroke: var(--primary-light-blue);
+      stroke-linecap: round;
+    }
+  `}render(){const t=2*Math.PI*28,e=Math.max(this.max,1),o=t*(1-Math.min(this.value/e,1));return i`
+      <svg
+        viewBox="0 0 64 64"
+        role="img"
+        aria-label="Progreso: ${this.value} de ${this.max}"
+      >
+        <!-- Fondo -->
+        <circle
+          class="bg"
+          cx="32"
+          cy="32"
+          r="${28}"
+          stroke-width="${6}"
+          fill="none"
+        />
+        <!-- Progreso -->
+        <circle
+          class="fg"
+          cx="32"
+          cy="32"
+          r="${28}"
+          stroke-width="${6}"
+          fill="none"
+          stroke-dasharray="${t}"
+          stroke-dashoffset="${o}"
+          transform="rotate(-90 32 32)"
+        />
+        <!-- Texto -->
+        <text x="32" y="34" class="circle-text">
+          ${this.value} de ${this.max}
+        </text>
+      </svg>
+    `}};n([I({type:Number}),a("design:type",Object)],tt.prototype,"value",void 0),n([I({type:Number}),a("design:type",Object)],tt.prototype,"max",void 0),tt=n([l("progress-circle")],tt);
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+const et=Symbol("attachableController");let it;r||(it=new MutationObserver((t=>{for(const e of t)e.target[et]?.hostConnected()})));class ot{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[et]=this,it?.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 rt=["focusin","focusout","pointerdown"];class st extends e{constructor(){super(...arguments),this.visible=!1,this.inward=!1,this.attachableController=new ot(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[nt]){switch(t.type){default:return;case"focusin":this.visible=this.control?.matches(":focus-visible")??!1;break;case"focusout":case"pointerdown":this.visible=!1}t[nt]=!0}}onControlChange(t,e){if(!r)for(const i of rt)t?.removeEventListener(i,this),e?.addEventListener(i,this)}update(t){t.has("visible")&&this.dispatchEvent(new Event("visibility-changed")),super.update(t)}}n([I({type:Boolean,reflect:!0})],st.prototype,"visible",void 0),n([I({type:Boolean,reflect:!0})],st.prototype,"inward",void 0);const nt=Symbol("handledByFocusRing"),at=t`: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
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */;
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */let lt=class extends st{};lt.styles=[at],lt=n([l("md-focus-ring")],lt);
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+const dt="cubic-bezier(0.2, 0, 0, 1)";
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */var ct;!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"}(ct||(ct={}));const pt=["click","contextmenu","pointercancel","pointerdown","pointerenter","pointerleave","pointerup"],ht=r?null:window.matchMedia("(forced-colors: active)");class ut extends e{constructor(){super(...arguments),this.disabled=!1,this.hovered=!1,this.pressed=!1,this.rippleSize="",this.rippleScale="",this.initialSize=0,this.state=ct.INACTIVE,this.checkBoundsAfterContextMenu=!1,this.attachableController=new ot(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 i`<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!==ct.INACTIVE&&this.endPressAnimation())}handlePointerup(t){if(this.shouldReactToEvent(t)){if(this.state!==ct.HOLDING)return this.state===ct.TOUCH_DELAY?(this.state=ct.WAITING_FOR_CLICK,void this.startPressAnimation(this.rippleStartEvent)):void 0;this.state=ct.WAITING_FOR_CLICK}}async handlePointerdown(t){if(this.shouldReactToEvent(t)){if(this.rippleStartEvent=t,!this.isTouch(t))return this.state=ct.WAITING_FOR_CLICK,void this.startPressAnimation(t);this.checkBoundsAfterContextMenu&&!this.inBounds(t)||(this.checkBoundsAfterContextMenu=!1,this.state=ct.TOUCH_DELAY,await new Promise((t=>{setTimeout(t,150)})),this.state===ct.TOUCH_DELAY&&(this.state=ct.HOLDING,this.startPressAnimation(t)))}}handleClick(){this.disabled||(this.state!==ct.WAITING_FOR_CLICK?this.state===ct.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),s=Math.sqrt(e**2+t**2)+10;this.initialSize=r,this.rippleScale=""+(s+o)/r,this.rippleSize=`${r}px`}getNormalizedPointerEventCoords(t){const{scrollX:e,scrollY:i}=window,{left:o,top:r}=this.getBoundingClientRect(),s=e+o,n=i+r,{pageX:a,pageY:l}=t;return{x:a-s,y:l-n}}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:dt,fill:"forwards"})}async endPressAnimation(){this.rippleStartEvent=void 0,this.state=ct.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:s}=this.getBoundingClientRect();return t>=o&&t<=s&&e>=i&&e<=r}isTouch({pointerType:t}){return"touch"===t}async handleEvent(t){if(!ht?.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 pt)t?.removeEventListener(i,this),e?.addEventListener(i,this)}}n([I({type:Boolean,reflect:!0})],ut.prototype,"disabled",void 0),n([L()],ut.prototype,"hovered",void 0),n([L()],ut.prototype,"pressed",void 0),n([F(".surface")],ut.prototype,"mdRoot",void 0);
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+const bt=t`: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 gt=class extends ut{};
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+function yt(t){return t.currentTarget===t.target&&(t.composedPath()[0]===t.target&&(!t.target.disabled&&!function(t){const e=vt;e&&(t.preventDefault(),t.stopImmediatePropagation());return async function(){vt=!0,await null,vt=!1}
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */(),e}(t)))}gt.styles=[bt],gt=n([l("md-ripple")],gt);let vt=!1;const mt=Symbol("internals"),ft=Symbol("privateInternals");
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+const xt=Symbol("createValidator"),wt=Symbol("getValidityAnchor"),kt=Symbol("privateValidator"),$t=Symbol("privateSyncValidity"),St=Symbol("privateCustomValidationMessage");
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+const Ct=Symbol("isFocusable"),Et=Symbol("privateIsFocusable"),Ot=Symbol("externalTabIndex"),At=Symbol("isUpdatingTabIndex"),jt=Symbol("updateTabIndex");
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+const zt=Symbol("getFormValue"),Pt=Symbol("getFormState");
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+class Tt{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 Tt{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})))}}
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */class Lt{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 s=this.controls;if(!s.length)return;t.preventDefault();const n="rtl"===getComputedStyle(this.host).direction?o||e:r||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 Ft;const _t=Symbol("checked");let Rt=0;const Mt=function(t){var e;class i extends t{constructor(){super(...arguments),this[e]=""}get validity(){return this[$t](),this[mt].validity}get validationMessage(){return this[$t](),this[mt].validationMessage}get willValidate(){return this[$t](),this[mt].willValidate}checkValidity(){return this[$t](),this[mt].checkValidity()}reportValidity(){return this[$t](),this[mt].reportValidity()}setCustomValidity(t){this[St]=t,this[$t]()}requestUpdate(t,e,i){super.requestUpdate(t,e,i),this[$t]()}firstUpdated(t){super.firstUpdated(t),this[$t]()}[(e=St,$t)](){if(r)return;this[kt]||(this[kt]=this[xt]());const{validity:t,validationMessage:e}=this[kt].getValidity(),i=!!this[St],o=this[St]||e;this[mt].setValidity({...t,customError:i},o,this[wt]()??void 0)}[xt](){throw new Error("Implement [createValidator]")}[wt](){throw new Error("Implement [getValidityAnchor]")}}return i}(function(t){class e extends t{get form(){return this[mt].form}get labels(){return this[mt].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[mt].setFormValue(this[zt](),this[Pt]())}[zt](){throw new Error("Implement [getFormValue]")}[Pt](){return this[zt]()}formDisabledCallback(t){this.disabled=t}}return e.formAssociated=!0,n([I({noAccessor:!0})],e.prototype,"name",null),n([I({type:Boolean,noAccessor:!0})],e.prototype,"disabled",null),e}((Bt=function(t){var e,i,o;class r extends t{constructor(){super(...arguments),this[e]=!0,this[i]=null,this[o]=!1}get[Ct](){return this[Et]}set[Ct](t){this[Ct]!==t&&(this[Et]=t,this[jt]())}connectedCallback(){super.connectedCallback(),this[jt]()}attributeChangedCallback(t,e,i){if("tabindex"===t){if(this.requestUpdate("tabIndex",Number(e??-1)),!this[At])return this.hasAttribute("tabindex")?void(this[Ot]=this.tabIndex):(this[Ot]=null,void this[jt]())}else super.attributeChangedCallback(t,e,i)}[(e=Et,i=Ot,o=At,jt)](){const t=this[Ct]?0:-1,e=this[Ot]??t;this[At]=!0,this.tabIndex=e,this[At]=!1}}return n([I({noAccessor:!0})],r.prototype,"tabIndex",void 0),r}(e),class extends Bt{get[mt](){return this[ft]||(this[ft]=this.attachInternals()),this[ft]}})));var Bt;class Dt extends Mt{get checked(){return this[_t]}set checked(t){const e=this.checked;e!==t&&(this[_t]=t,this.requestUpdate("checked",e),this.selectionController.handleCheckedChange())}constructor(){super(),this.maskId="cutout"+ ++Rt,this[Ft]=!1,this.required=!1,this.value="on",this.selectionController=new Lt(this),this.addController(this.selectionController),r||(this[mt].role="radio",this.addEventListener("click",this.handleClick.bind(this)),this.addEventListener("keydown",this.handleKeydown.bind(this)))}render(){const t={checked:this.checked};return i`
+      <div class="container ${s(t)}" aria-hidden="true">
+        <md-ripple
+          part="ripple"
+          .control=${this}
+          ?disabled=${this.disabled}></md-ripple>
+        <md-focus-ring part="focus-ring" .control=${this}></md-focus-ring>
+        <svg class="icon" viewBox="0 0 20 20">
+          <mask id="${this.maskId}">
+            <rect width="100%" height="100%" fill="white" />
+            <circle cx="10" cy="10" r="8" fill="black" />
+          </mask>
+          <circle
+            class="outer circle"
+            cx="10"
+            cy="10"
+            r="10"
+            mask="url(#${this.maskId})" />
+          <circle class="inner circle" cx="10" cy="10" r="5" />
+        </svg>
+
+        <div class="touch-target"></div>
+      </div>
+    `}updated(){this[mt].ariaChecked=String(this.checked)}async handleClick(t){this.disabled||(await 0,t.defaultPrevented||(yt(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()}[(Ft=_t,zt)](){return this.checked?this.value:null}[Pt](){return String(this.checked)}formResetCallback(){this.checked=this.hasAttribute("checked")}formStateRestoreCallback(t){this.checked="true"===t}[xt](){return new It((()=>this.selectionController?this.selectionController.controls:[this]))}[wt](){return this.container}}n([I({type:Boolean})],Dt.prototype,"checked",null),n([I({type:Boolean})],Dt.prototype,"required",void 0),n([I()],Dt.prototype,"value",void 0),n([F(".container")],Dt.prototype,"container",void 0);
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+const Ut=t`@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 Vt=class extends Dt{};Vt.styles=[Ut],Vt=n([l("md-radio")],Vt);let qt=class extends e{constructor(){super(...arguments),this.name="radio-group",this.checked=!1,this.disabled=!1,this.error=!1}static{this.styles=t`
+    :host {
+      font-family: "Graphik", sans-serif;
+    }
+
+    .radio-container {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      cursor: pointer;
+    }
+
+    md-radio {
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      background: var(--white);
+      border: 1px solid var(--secondary-color-20);
+    }
+
+    md-radio::part(container):hover {
+      box-shadow: 0px 0px 0px 4px #0F19411A;
+      border: 1px solid var(--secondary-color-20);
+      border-radius: 50%;
+    }
+
+    md-radio:focus-visible::part(container) {
+      border: 1px solid var(--primary-color);
+    }
+
+    md-radio.checked {
+      background: var(--primary-color);
+      border: 1px solid var(--primary-color);
+    }
+
+    md-radio.checked.error {
+      background: var(--ui-negative);
+      border: 1px solid var(--ui-negative);
+    }
+
+    md-radio.error {
+      border: 1px solid var(--ui-negative);
+    }
+
+    md-radio.disabled {
+      cursor: not-allowed;
+      background: var(--secondary-color-20);
+      border: 1px solid var(--secondary-color-20);
+    }
+  `}render(){const t=[this.checked?"checked":"",this.error?"error":"",this.disabled?"disabled":""].join(" ");return i`
+      <label class="radio-container">
+        <md-radio 
+          name=${this.name} 
+          class=${t}
+          ?checked=${this.checked} 
+          ?disabled=${this.disabled}
+        ></md-radio>
+        <span>${this.checked?"On":"Off"} ${this.error?"Error":""}</span>
+      </label>
+    `}};n([I({type:String}),a("design:type",Object)],qt.prototype,"name",void 0),n([I({type:Boolean}),a("design:type",Object)],qt.prototype,"checked",void 0),n([I({type:Boolean}),a("design:type",Object)],qt.prototype,"disabled",void 0),n([I({type:Boolean}),a("design:type",Object)],qt.prototype,"error",void 0),qt=n([l("custom-radio")],qt);let Nt=class extends e{constructor(){super(...arguments),this.options=[],this.placeholder="Filtrar opciones...",this.defaultValue="",this.disabled=!1,this.label="",this.value="",this.labelColor="",this.filterable=!0,this.error=!1,this.required=!1,this.optional=!1,this.isMobile=!1,this.filteredOptions=[],this.filterValue="",this.isOpen=!1,this.mobileFilterValue="",this.highlightedIndex=-1,this.debounceTimeout=null,this.updateResponsiveModeBound=this.updateResponsiveMode.bind(this)}static{this.styles=t`
+    :host {
+      display: block;
+      font-family: 'Graphik', sans-serif;
+      width: 100%;
+    }
+
+    :host([error]) .input-wrapper {
+      border: 1px solid var(--ui-negative, red) !important;
+    }
+
+    :host([error]) .input-container:not(.open) .input-wrapper:hover {
+      box-shadow: 0px 0px 0px 4px #E00F0F1A;
+    }
+
+    :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;
+    }
+
+    .select-container {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      width: 100%;
+    }
+
+    .label-container {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+    }
+
+    .form-label {
+      ${M}
+      display: flex;
+      align-items: baseline;
+      flex-direction: row;
+      gap: 4px;
+      color: var(--label-color, var(--secondary-color-80));
+    }
+
+    .input-container {
+      position: relative;
+      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: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) .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 .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;
+    }
+
+    .mobile-modal .filter-input {
+      border-bottom: 1px solid var(--gray-20);
+    }
+
+    .filter-input {
+      ${B};
+      padding: 16px;
+      padding-right: 40px;
+      border: none;
+      outline: none;
+      width: 100%;
+      box-sizing: border-box;
+      background: white;
+      cursor: pointer;
+      color: var(--secondary-color);
+    }
+
+    .filter-input,
+    .filter-fake,
+    .input-wrapper,
+    .mobile-modal {
+      -webkit-tap-highlight-color: transparent !important;
+    }
+
+    .filter-input::placeholder {
+      ${B};
+      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;
+    }
+
+    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 li {
+      ${B};
+      padding: 8px 16px 8px 16px;
+      cursor: pointer;
+      color: var(--secondary-color-80);
+    }
+
+    .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;
+      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 .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 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 {
+      ${B};
+      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;
+    }
+
+    @keyframes slideUp {
+      from {
+        transform: translateY(100%);
+      }
+      to {
+        transform: translateY(0);
+      }
+    }
+
+    .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;
+    }
+
+    .required {
+      color: var(--ui-negative);
+    }
+
+    .optional {
+      color: var(--secondary-color-60);
+      ${_}
+    }
+  `}update(t){if(t.has("options")&&(this.filteredOptions=[...this.options]),t.has("defaultValue")||t.has("options")){const t=this.options.find((t=>"string"==typeof t?t===this.defaultValue:t.value===this.defaultValue));t&&(this.filterValue="string"==typeof t?t:t.label)}if(t.has("value")){const t=this.options.find((t=>"string"==typeof t?t===this.value:t.value===this.value));t&&(this.filterValue="string"==typeof t?t:t.label)}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;const e=t.target.value,i=this.maxLength?e.slice(0,this.maxLength).toLowerCase():e.toLowerCase();this.filterValue=i,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){const e=t.target.value,i=this.maxLength?e.slice(0,this.maxLength).toLowerCase():e.toLowerCase();this.mobileFilterValue=i,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.value="string"==typeof t?t:t.value;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.isOpen=!1,this.requestUpdate()}handleIconClick(){this.disabled||(this.filterable&&this.filterValue?(this.filterValue="",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)}render(){const t=this.isMobile;return i`
+      <div class="select-container" style="${this.labelColor?` --label-color: ${this.labelColor}`:""}">
+        ${this.label?i`
+          <div class="label-container">
+            <label class="form-label">
+              ${this.label}
+              ${this.required?i`<span class="required">*</span>`:this.optional?i`<span class="optional">opcional</span>`:o}
+            </label>
+          </div>
+        `:""}
+
+        <div class="input-container ${this.isOpen?"focused":""} ${this.isOpen&&this.filteredOptions.length>0?"open":""} ${t?"mobile":""}">
+
+          <div class="input-wrapper">
+            ${t?i`
+              <div
+                class="filter-fake"
+                @click="${this.handleInputClick}"
+                @keydown="${this.handleKeyDown}"
+                tabindex="0"
+                role="combobox"
+                aria-expanded="${this.isOpen}"
+                aria-controls="options-list"
+                aria-haspopup="listbox"
+                aria-activedescendant=""
+              ">
+                ${this.filterValue||this.placeholder}
+              </div>
+            `:i`
+              <input
+                class="filter-input"
+                .value="${this.filterValue||""}"
+                @click="${this.handleInputClick}"
+                @keydown="${this.handleKeyDown}"
+                @input=${this.handleInput}
+                placeholder="${this.filterValue?"":this.placeholder}"
+                ?disabled="${this.disabled}"
+                ?readonly="${!this.filterable}"
+                maxlength="${this.maxLength??""}"
+              />
+            `}
+            <button
+              class="icon-button"
+              @click="${this.handleIconClick}"
+              ?disabled="${this.disabled}"
+            >
+              ${this.filterable&&this.filterValue?i`<randstad-icon name="close" size="24px" style="--icon-color: var(--primary-color);"></randstad-icon>`:this.isOpen&&this.filteredOptions.length>0?i`<randstad-icon name="arrow_up" size="24px" style="--icon-color: var(--primary-color);"></randstad-icon>`:i`<randstad-icon name="arrow_down" size="24px" style="--icon-color: var(--primary-color);"></randstad-icon>`}
+            </button>
+          </div>
+
+          ${t&&this.isOpen?i`
+            <div class="mobile-backdrop" @click="${()=>{this.isOpen=!1}}">
+              <div class="mobile-modal" @click="${t=>t.stopPropagation()}">
+                <div class="modal-input-container">
+                  <input
+                    class="filter-input"
+                      .value="${this.mobileFilterValue||""}"
+                      @input=${t=>this.handleMobileInput(t)}
+                    placeholder="${this.placeholder}" maxlength="${this.maxLength??""}"
+                    autofocus
+                  />
+                  <button class="modal-close-button" @click="${()=>{this.isOpen=!1}}">
+                    <randstad-icon name="close" size="20px"></randstad-icon>
+                  </button>
+                </div>
+                <ul class="options-list">
+                  ${this.filteredOptions.map(((t,e)=>{const o="string"==typeof t?t:t.label,r="object"==typeof t&&t.disabled;return i`
+                      <li
+                        class="${r?"disabled":""} ${e===this.highlightedIndex?"highlighted":""}"
+                        role="option"
+                        aria-selected="${e===this.highlightedIndex}"
+                        @click="${()=>{r||this.handleSelect(t)}}"
+                      >
+                        ${o}
+                      </li>
+                    `}))}
+                </ul>
+              </div>
+            </div>
+          `:!t&&this.isOpen&&this.filteredOptions.length>0?i`
+            <ul class="options-list">
+              ${this.filteredOptions.map(((t,e)=>{const o="string"==typeof t?t:t.label,r="object"==typeof t&&t.disabled;return i`
+                  <li
+                    class="${r?"disabled":""} ${e===this.highlightedIndex?"highlighted":""}"
+                    role="option"
+                    aria-selected="${e===this.highlightedIndex}"
+                    @click="${()=>{r||this.handleSelect(t)}}"
+                  >
+                    ${o}
+                  </li>
+                `}))}
+            </ul>
+          `:""}
+        </div>
+      </div>
+    `}};n([I({type:Array}),a("design:type",Array)],Nt.prototype,"options",void 0),n([I({type:String}),a("design:type",Object)],Nt.prototype,"placeholder",void 0),n([I({type:String,attribute:"default-value"}),a("design:type",Object)],Nt.prototype,"defaultValue",void 0),n([I({type:Boolean}),a("design:type",Object)],Nt.prototype,"disabled",void 0),n([I({type:String}),a("design:type",Object)],Nt.prototype,"label",void 0),n([I({type:String}),a("design:type",String)],Nt.prototype,"value",void 0),n([I({type:String}),a("design:type",Object)],Nt.prototype,"labelColor",void 0),n([I({type:Boolean}),a("design:type",Object)],Nt.prototype,"filterable",void 0),n([I({type:Number}),a("design:type",Number)],Nt.prototype,"maxLength",void 0),n([I({type:Boolean,reflect:!0}),a("design:type",Boolean)],Nt.prototype,"error",void 0),n([I({type:Boolean}),a("design:type",Object)],Nt.prototype,"required",void 0),n([I({type:Boolean}),a("design:type",Object)],Nt.prototype,"optional",void 0),n([L(),a("design:type",Boolean)],Nt.prototype,"isMobile",void 0),n([L(),a("design:type",Array)],Nt.prototype,"filteredOptions",void 0),n([L(),a("design:type",Object)],Nt.prototype,"filterValue",void 0),n([L(),a("design:type",Object)],Nt.prototype,"isOpen",void 0),n([L(),a("design:type",Object)],Nt.prototype,"mobileFilterValue",void 0),n([L(),a("design:type",Object)],Nt.prototype,"highlightedIndex",void 0),Nt=n([l("filterable-select")],Nt);const Gt=new CSSStyleSheet;Gt.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");class Ht extends e{static{this.styles=[Gt,t`
+      :host {
+        display: flex;
+        position: fixed;
+        align-items: center;
+        max-width: 100vw;
+        height: auto;
+        z-index: 9999;
+      }
+
+      :host([position="top-left"]) {
+        top: 16px;
+        left: 16px;
+        right: auto;
+        transform: none;
+        justify-content: flex-start;
+      }
+
+      :host([position="top-center"]) {
+        top: 16px;
+        left: 50%;
+        transform: translateX(-50%);
+        justify-content: center;
+      }
+
+      :host([position="top-right"]) {
+        top: 16px;
+        right: 16px;
+        left: auto;
+        transform: none;
+        justify-content: flex-end;
+      }
+
+      :host([position="bottom-left"]) {
+        bottom: 16px;
+        left: 16px;
+        right: auto;
+        transform: none;
+        justify-content: flex-start;
+      }
+
+      :host([position="bottom-center"]) {
+        bottom: 16px;
+        left: 50%;
+        transform: translateX(-50%);
+        justify-content: center;
+      }
+
+      :host([position="bottom-right"]) {
+        bottom: 16px;
+        right: 16px;
+        left: auto;
+        transform: none;
+        justify-content: flex-end;
+      }
+
+      :host(.mobile) {
+        bottom: 16px !important;
+        top: auto !important;
+        left: 50% !important;
+        transform: translateX(-50%) !important;
+        justify-content: center !important;
+        width: 100%;
+      }
+
+      :host(.mobile) .container {
+        width: 90vw !important;
+      }
+
+      .container {
+        ${R};
+        display: flex;
+        align-items: center;
+        box-sizing: border-box;
+        min-height: 48px;
+        min-width: 270px;
+        max-width: 480px;
+        border-radius: 4px;
+        padding: 8px;
+        gap: 8px;
+        white-space: nowrap;
+        color: var(--white);
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+      }
+
+      .message {
+        display: block;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: normal;
+        max-height: calc(2 * 25px);
+        line-height: 25px;
+        word-break: break-word;
+        max-width: 100%;
+      }
+
+      .container {
+        color: var(--white);
+      }
+      randstad-icon {
+        color: var(--white);
+      }
+      randstad-icon svg {
+        fill: var(--white);
+      }
+
+      .icon {
+        font-size: 18px;
+      }
+      .hidden {
+        display: none;
+      }
+      .success {
+        background-color: var(--ui-positive);
+      }
+      .error {
+        background-color: var(--ui-negative);
+      }
+      .warning {
+        background-color: var(--ui-warning);
+      }
+      .informative {
+        background-color: var(--ui-informative);
+      }
+    `]}static get properties(){return{type:{type:String},icon:{type:String},message:{type:String},open:{type:Boolean},position:{type:String,reflect:!0}}}constructor(){super(),this.type="informative",this.icon="info",this.message="Este es un mensaje.",this.open=!1,this.position="bottom-center",this.isMobile=!1,this.updateResponsiveStyles=this.updateResponsiveStyles.bind(this)}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this.updateResponsiveStyles),this.updateResponsiveStyles()}disconnectedCallback(){window.removeEventListener("resize",this.updateResponsiveStyles),super.disconnectedCallback()}updateResponsiveStyles(){const t=window.innerWidth<=940;this.classList.toggle("mobile",t)}render(){const t="error"===this.type||"warning"===this.type?"alert":"status";return i`
+      <div
+        class="container ${this.open?"":"hidden"} ${this.type}"
+        role="${t}"
+        aria-live="polite"
+      >
+        <randstad-icon name=${this.icon} size="24px" color="white"></randstad-icon>
+        <span class="message">${this.message}</span>
+      </div>
+    `}}customElements.define("randstad-snackbar",Ht);let Kt=class extends e{constructor(){super(...arguments),this.totalSteps=4,this.currentStep=0}static{this.styles=t`
+    .stepper {
+      display: flex;
+      gap: 20px;
+      align-items: center;
+    }
+
+    .step {
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      background-color: var(--white);
+      border: 1px solid var(--secondary-color-20);
+      position: relative;
+      box-sizing: content-box;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+      color: var(--secondary-color-20);
+    }
+
+    .step .inner-circle {
+      width: 4px;
+      height: 4px;
+      border-radius: 50%;
+      background-color: var(--white);
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      image-rendering: -webkit-optimize-contrast;
+      image-rendering: crisp-edges;
+      backface-visibility: hidden;
+      transform-style: preserve-3d;
+    }
+
+    .step.completed {
+      background-color: var(--primary-color);
+      border: 1px solid var(--primary-color);
+    }
+
+    .step.completed randstad-icon {
+      color: white;
+    }
+
+    .step.active {
+      background-color: var(--white);
+      border: 1px solid var(--primary-color);
+    }
+
+    .step.active .inner-circle {
+      background-color: var(--primary-color);
+    }
+
+    .step.active .pulse-circle {
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background-color: var(--primary-color);
+      opacity: 0.25;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%) scale(0.6);
+      animation: pulse 2000ms ease-in-out infinite;
+      image-rendering: -webkit-optimize-contrast;
+      image-rendering: crisp-edges;
+      backface-visibility: hidden;
+    }
+
+    @keyframes pulse {
+      0% {
+        transform: translate(-50%, -50%) scale(0.6);
+      }
+      80%, 100% {
+        transform: translate(-50%, -50%) scale(1.2);
+      }
+    }
+
+    .step,
+    .inner-circle,
+    .pulse-circle {
+      will-change: transform;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+  `}render(){return i`
+      <div class="stepper">
+        ${Array.from({length:this.totalSteps},((t,e)=>i`
+          <div
+            class="step ${e<this.currentStep?"completed":e===this.currentStep?"active":""}"
+          >
+            ${e<this.currentStep?i`<randstad-icon name="tick-circle" size="16px"></randstad-icon>`:e===this.currentStep?i`
+                  <span class="pulse-circle"></span>
+                  <span class="inner-circle"></span>
+                `:i`<span class="inner-circle"></span>`}
+          </div>
+        `))}
+      </div>
+    `}};n([I({type:Number}),a("design:type",Object)],Kt.prototype,"totalSteps",void 0),n([I({type:Number}),a("design:type",Object)],Kt.prototype,"currentStep",void 0),Kt=n([l("custom-stepper")],Kt);let Yt=class extends e{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=t`
+    :host {
+      display: block;
+      border-bottom: 1px solid #E7E8EC;
+      font-family: "Graphik", sans-serif;
+    }
+
+    .tab-wrapper {
+      display: flex;
+      justify-content: flex-start;
+    }
+
+    .tab {
+      ${D};
+      display: flex;
+      gap: 8px;
+      flex-direction: row;
+      padding: 24px;
+      align-items: center;
+      text-align: center;
+      color: #6F758D;
+      cursor: pointer;
+      text-decoration: none;
+      position: relative;
+      flex: 0 0 auto;
+      min-width: 0;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      transition: background-color 0.2s ease-in-out;
+    }
+
+    .tab:hover {
+      background-color: #E7E8EC;
+    }
+
+    .tab.active {
+      color: #2175D9;
+    }
+
+    .tab.active::after {
+      height: 2px;
+      background-color: #2175D9;
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      pointer-events: none;
+    }
+
+    .tab.active img {
+      filter: brightness(0) saturate(100%) invert(28%) sepia(87%) saturate(3514%) hue-rotate(202deg) brightness(92%) contrast(101%);
+    }
+
+    img {
+      width: 24px;
+      height: 24px;
+    }
+
+    .scroll-container {
+      position: relative;
+      display: flex;
+      align-items: center;
+      overflow: hidden;
+    }
+
+    .tab-wrapper {
+      display: flex;
+      justify-content: flex-start;
+      gap: 0px;
+      overflow-x: auto;
+      scroll-behavior: smooth;
+      scrollbar-width: none; /* Firefox */
+      -ms-overflow-style: none; /* IE 10+ */
+      flex: 1;
+    }
+
+    .tab-wrapper::-webkit-scrollbar {
+      display: none;
+    }
+
+    .scroll-button {
+      border: none;
+      font-size: 24px;
+      cursor: pointer;
+      z-index: 1;
+      width: 56px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      color: #2175D9;
+      padding: 0px;
+    }
+
+    .scroll-button.prev {
+      justify-content: flex-start;
+      position: absolute;
+      left: 0;
+      background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 50%, rgba(255, 255, 255, 0) 100%);
+    }
+
+    .scroll-button.next {
+      justify-content: flex-end;
+      position: absolute;
+      right: 0;
+      background: linear-gradient(270deg, #FFFFFF 0%, #FFFFFF 50%, rgba(255, 255, 255, 0) 100%);
+    }
+
+    @media (max-width: 940px) {
+      .tab {
+        ${M};
+        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 i`
+      <div class="scroll-container">
+        ${this.showPrev?i`
+          <button class="scroll-button prev" @click=${this.scrollTabsLeft}>
+            <randstad-icon name="arrow_left" size="36px"></randstad-icon>
+          </button>
+        `:null}
+
+        <div class="tab-wrapper" @scroll=${this.handleScroll}>
+          ${this.tabs.map((t=>i`
+            <div class="tab ${this.internalSelected===t.value?"active":""}"
+                @click=${()=>this.selectTab(t.value)}>
+              <img src="/assets/icons/${t.icon}" alt="${t.label}" />
+              <span>${t.label}</span>
+            </div>
+          `))}
+        </div>
+
+        ${this.showNext?i`
+          <button class="scroll-button next" @click=${this.scrollTabsRight}>
+            <randstad-icon name="arrow_right" size="36px"></randstad-icon>
+          </button>
+        `:null}
+      </div>
+    `}};n([I({type:Array}),a("design:type",Array)],Yt.prototype,"tabs",void 0),n([I({type:String}),a("design:type",String)],Yt.prototype,"selected",void 0),n([L(),a("design:type",String)],Yt.prototype,"internalSelected",void 0),n([L(),a("design:type",Object)],Yt.prototype,"showPrev",void 0),n([L(),a("design:type",Object)],Yt.prototype,"showNext",void 0),Yt=n([l("tabs-bar")],Yt);let Wt=class extends e{constructor(){super(...arguments),this.files=[],this.loading=!1,this.progress=0,this.isDragging=!1,this.disabled=!1}static{this.styles=t`
+
+    :host {
+      font-family: 'Graphik', sans-serif;
+    }
+
+    .container {
+      display: flex;
+      gap: 16px;
+      flex-direction: column;
+      border: 1px solid var(--secondary-color-10);
+      border-radius: 4px;
+      padding: 16px;
+      align-items: center;
+      background-color: var(--white);
+      transition: border 0.2s ease, outline 0.2s ease;
+    }
+
+    .container.dragging {
+      border: 1px dashed var(--secondary-color-40);
+    }
+      
+    .icon {
+      width: 40px;
+      height: 40px
+    }
+
+    .text-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .text-main {
+      ${R};
+      text-align: center;
+      vertical-align: middle;
+      color: var(--secondary-color-80);
+    }
+
+    .text-secondary {
+      ${_};
+      text-align: center;
+      vertical-align: middle;
+      color: var(--secondary-color-60);
+    }
+
+    .text-tertiary {
+      ${_};
+      text-align: center;
+      vertical-align: middle;
+      color: var(--secondary-color-40);
+    }
+
+    .button {
+      ${_};
+      background-color: var(--primary-color);
+      border: none;
+      padding: 4px 16px;
+      cursor: pointer;
+      border-radius: 4px;
+      color: var(--white);
+      text-align: center;
+      vertical-align: middle;
+    }
+
+    :host([disabled]) .button {
+      background-color: var(--secondary-color-20);
+      color: var(--secondary-color-80);
+      cursor: not-allowed;
+    }
+
+    input[type="file"] {
+      display: none;
+    }
+
+    .progress-bar-container {
+      min-height: 23px;
+      display: flex;
+      align-items: center;
+    }
+
+    .progress-bar {
+      min-width: 80px;
+      height: 8px;
+      background-color: var(--secondary-color-20);
+      border-radius: 999px;
+      overflow: hidden;
+    }
+
+    .progress-bar-fill {
+      height: 100%;
+      background-color: var(--primary-color);
+      transition: width 0.1s ease;
+    }
+  `}handleFiles(t){if(!t||this.loading)return;const e=Array.from(t).slice(0,3-this.files.length);this.loading=!0,this.progress=0;const i=setInterval((()=>{this.progress+=5,this.progress>=100&&(clearInterval(i),this.files=[...this.files,...e],this.loading=!1,this.progress=0,this.dispatchEvent(new CustomEvent("files-changed",{detail:this.files})))}),100)}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 i`
+      <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?i`
+            <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>
+          `:i`
+            <label class="button">
+              agregar archivo
+              <input type="file" accept=".jpg,.jpeg,.png" multiple @change="${this.onFileInputChange}" />
+            </label>
+          `}
+      </div>
+    `}};n([I({type:Array}),a("design:type",Array)],Wt.prototype,"files",void 0),n([L(),a("design:type",Object)],Wt.prototype,"loading",void 0),n([L(),a("design:type",Object)],Wt.prototype,"progress",void 0),n([L(),a("design:type",Object)],Wt.prototype,"isDragging",void 0),n([I({type:Boolean,reflect:!0}),a("design:type",Object)],Wt.prototype,"disabled",void 0),Wt=n([l("upload-image")],Wt);export{N as AccordionList,q as AccordionPanel,H as CarouselCard,K as Checkbox,Q as CustomModal,Z as CustomPopup,qt as CustomRadio,Kt as CustomStepper,Nt as FilterableSelect,W as FormGroup,X as IconComponent,tt as ProgressCircle,G as RandstadButton,Y as RandstadForm,J as RandstadNotice,Yt as TabsBar,Wt as UploadImage};
+//# sourceMappingURL=index.js.map