@warp-ds/elements 2.4.0-next.2 → 2.4.0

package/dist/packages/slider/slider.js

@@ -1,2632 +1,301 @@
-var ke=Object.create;var I=Object.defineProperty;var X=Object.getOwnPropertyDescriptor;var ye=Object.getOwnPropertyNames;var _e=Object.getPrototypeOf,ze=Object.prototype.hasOwnProperty;var H=o=>{throw TypeError(o)};var U=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports);var Me=(o,e,r,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of ye(e))!ze.call(o,a)&&a!==r&&I(o,a,{get:()=>e[a],enumerable:!(t=X(e,a))||t.enumerable});return o};var Ee=(o,e,r)=>(r=o!=null?ke(_e(o)):{},Me(e||!o||!o.__esModule?I(r,"default",{value:o,enumerable:!0}):r,o));var b=(o,e,r,t)=>{for(var a=t>1?void 0:t?X(e,r):e,i=o.length-1,s;i>=0;i--)(s=o[i])&&(a=(t?s(e,r,a):s(a))||a);return t&&a&&I(e,r,a),a};var Te=(o,e,r)=>e.has(o)||H("Cannot "+r);var Z=(o,e,r)=>e.has(o)?H("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(o):e.set(o,r);var p=(o,e,r)=>(Te(o,e,"access private method"),r);var B=U(x=>{"use strict";Object.defineProperty(x,"__esModule",{value:!0});x.errorMessages=x.ErrorType=void 0;var y;(function(o){o.MalformedUnicode="MALFORMED_UNICODE",o.MalformedHexadecimal="MALFORMED_HEXADECIMAL",o.CodePointLimit="CODE_POINT_LIMIT",o.OctalDeprecation="OCTAL_DEPRECATION",o.EndOfString="END_OF_STRING"})(y=x.ErrorType||(x.ErrorType={}));x.errorMessages=new Map([[y.MalformedUnicode,"malformed Unicode character escape sequence"],[y.MalformedHexadecimal,"malformed hexadecimal character escape sequence"],[y.CodePointLimit,"Unicode codepoint must not be greater than 0x10FFFF in escape sequence"],[y.OctalDeprecation,'"0"-prefixed octal literals and octal escape sequences are deprecated; for octal literals use the "0o" prefix instead'],[y.EndOfString,"malformed escape sequence at end of string"]])});var K=U(m=>{"use strict";Object.defineProperty(m,"__esModule",{value:!0});m.unraw=m.errorMessages=m.ErrorType=void 0;var g=B();Object.defineProperty(m,"ErrorType",{enumerable:!0,get:function(){return g.ErrorType}});Object.defineProperty(m,"errorMessages",{enumerable:!0,get:function(){return g.errorMessages}});function Ce(o){return!o.match(/[^a-f0-9]/i)?parseInt(o,16):NaN}function T(o,e,r){let t=Ce(o);if(Number.isNaN(t)||r!==void 0&&r!==o.length)throw new SyntaxError(g.errorMessages.get(e));return t}function Oe(o){let e=T(o,g.ErrorType.MalformedHexadecimal,2);return String.fromCharCode(e)}function J(o,e){let r=T(o,g.ErrorType.MalformedUnicode,4);if(e!==void 0){let t=T(e,g.ErrorType.MalformedUnicode,4);return String.fromCharCode(r,t)}return String.fromCharCode(r)}function Se(o){return o.charAt(0)==="{"&&o.charAt(o.length-1)==="}"}function Le(o){if(!Se(o))throw new SyntaxError(g.errorMessages.get(g.ErrorType.MalformedUnicode));let e=o.slice(1,-1),r=T(e,g.ErrorType.MalformedUnicode);try{return String.fromCodePoint(r)}catch(t){throw t instanceof RangeError?new SyntaxError(g.errorMessages.get(g.ErrorType.CodePointLimit)):t}}function Ne(o,e=!1){if(e)throw new SyntaxError(g.errorMessages.get(g.ErrorType.OctalDeprecation));let r=parseInt(o,8);return String.fromCharCode(r)}var Ie=new Map([["b","\b"],["f","\f"],["n",`
-`],["r","\r"],["t","	"],["v","\v"],["0","\0"]]);function De(o){return Ie.get(o)||o}var je=/\\(?:(\\)|x([\s\S]{0,2})|u(\{[^}]*\}?)|u([\s\S]{4})\\u([^{][\s\S]{0,3})|u([\s\S]{0,4})|([0-3]?[0-7]{1,2})|([\s\S])|$)/g;function G(o,e=!1){return o.replace(je,function(r,t,a,i,s,n,l,h,f){if(t!==void 0)return"\\";if(a!==void 0)return Oe(a);if(i!==void 0)return Le(i);if(s!==void 0)return J(s,n);if(l!==void 0)return J(l);if(h==="0")return"\0";if(h!==void 0)return Ne(h,!e);if(f!==void 0)return De(f);throw new SyntaxError(g.errorMessages.get(g.ErrorType.EndOfString))})}m.unraw=G;m.default=G});import{html as z,LitElement as he,nothing as S}from"lit";import{property as u,state as me}from"lit/decorators.js";var ee=Ee(K(),1);var v=o=>typeof o=="string",Pe=o=>typeof o=="function",Q=new Map,re="en";function Y(o){return[...Array.isArray(o)?o:[o],re]}function A(o,e,r){let t=Y(o);r||(r="default");let a;if(typeof r=="string")switch(a={day:"numeric",month:"short",year:"numeric"},r){case"full":a.weekday="long";case"long":a.month="long";break;case"short":a.month="numeric";break}else a=r;return C(()=>O("date",t,r),()=>new Intl.DateTimeFormat(t,a)).format(v(e)?new Date(e):e)}function Ye(o,e,r){let t;if(r||(r="default"),typeof r=="string")switch(t={second:"numeric",minute:"numeric",hour:"numeric"},r){case"full":case"long":t.timeZoneName="short";break;case"short":delete t.second}else t=r;return A(o,e,t)}function D(o,e,r){let t=Y(o);return C(()=>O("number",t,r),()=>new Intl.NumberFormat(t,r)).format(e)}function W(o,e,r,{offset:t=0,...a}){var n,l;let i=Y(o),s=e?C(()=>O("plural-ordinal",i),()=>new Intl.PluralRules(i,{type:"ordinal"})):C(()=>O("plural-cardinal",i),()=>new Intl.PluralRules(i,{type:"cardinal"}));return(l=(n=a[r])!=null?n:a[s.select(r-t)])!=null?l:a.other}function C(o,e){let r=o(),t=Q.get(r);return t||(t=e(),Q.set(r,t)),t}function O(o,e,r){let t=e.join("-");return`${o}-${t}-${JSON.stringify(r)}`}var oe=/\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/,te="%__lingui_octothorpe__%",Ae=(o,e,r={})=>{let t=e||o,a=s=>typeof s=="object"?s:r[s],i=(s,n)=>{let l=Object.keys(r).length?a("number"):void 0,h=D(t,s,l);return n.replace(new RegExp(te,"g"),h)};return{plural:(s,n)=>{let{offset:l=0}=n,h=W(t,!1,s,n);return i(s-l,h)},selectordinal:(s,n)=>{let{offset:l=0}=n,h=W(t,!0,s,n);return i(s-l,h)},select:Fe,number:(s,n)=>D(t,s,a(n)||{style:n}),date:(s,n)=>A(t,s,a(n)||n),time:(s,n)=>Ye(t,s,a(n)||n)}},Fe=(o,e)=>{var r;return(r=e[o])!=null?r:e.other};function $e(o,e,r){return(t={},a)=>{let i=Ae(e,r,a),s=(l,h=!1)=>Array.isArray(l)?l.reduce((f,M)=>{if(M==="#"&&h)return f+te;if(v(M))return f+M;let[q,w,V]=M,L={};w==="plural"||w==="selectordinal"||w==="select"?Object.entries(V).forEach(([N,xe])=>{L[N]=s(xe,w==="plural"||w==="selectordinal")}):L=V;let E;if(w){let N=i[w];E=N(t[q],L)}else E=t[q];return E==null?f:f+E},""):l,n=s(o);return v(n)&&oe.test(n)?(0,ee.unraw)(n):v(n)?n:n?String(n):""}}var Re=Object.defineProperty,qe=(o,e,r)=>e in o?Re(o,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):o[e]=r,Ve=(o,e,r)=>(qe(o,typeof e!="symbol"?e+"":e,r),r),j=class{constructor(){Ve(this,"_events",{})}on(e,r){var a;var t;return(a=(t=this._events)[e])!=null||(t[e]=[]),this._events[e].push(r),()=>this.removeListener(e,r)}removeListener(e,r){let t=this._getListeners(e);if(!t)return;let a=t.indexOf(r);~a&&t.splice(a,1)}emit(e,...r){let t=this._getListeners(e);t&&t.map(a=>a.apply(this,r))}_getListeners(e){let r=this._events[e];return Array.isArray(r)?r:!1}},Xe=Object.defineProperty,He=(o,e,r)=>e in o?Xe(o,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):o[e]=r,k=(o,e,r)=>(He(o,typeof e!="symbol"?e+"":e,r),r),P=class extends j{constructor(e){var r;super(),k(this,"_locale",""),k(this,"_locales"),k(this,"_localeData",{}),k(this,"_messages",{}),k(this,"_missing"),k(this,"_messageCompiler"),k(this,"t",this._.bind(this)),e.missing!=null&&(this._missing=e.missing),e.messages!=null&&this.load(e.messages),e.localeData!=null&&this.loadLocaleData(e.localeData),(typeof e.locale=="string"||e.locales)&&this.activate((r=e.locale)!=null?r:re,e.locales)}get locale(){return this._locale}get locales(){return this._locales}get messages(){var e;return(e=this._messages[this._locale])!=null?e:{}}get localeData(){var e;return(e=this._localeData[this._locale])!=null?e:{}}_loadLocaleData(e,r){let t=this._localeData[e];t?Object.assign(t,r):this._localeData[e]=r}setMessagesCompiler(e){return this._messageCompiler=e,this}loadLocaleData(e,r){typeof e=="string"?this._loadLocaleData(e,r):Object.keys(e).forEach(t=>this._loadLocaleData(t,e[t])),this.emit("change")}_load(e,r){let t=this._messages[e];t?Object.assign(t,r):this._messages[e]=r}load(e,r){typeof e=="string"&&typeof r=="object"?this._load(e,r):Object.entries(e).forEach(([t,a])=>this._load(t,a)),this.emit("change")}loadAndActivate({locale:e,locales:r,messages:t}){this._locale=e,this._locales=r||void 0,this._messages[this._locale]=t,this.emit("change")}activate(e,r){this._locale=e,this._locales=r,this.emit("change")}_(e,r,t){if(!this.locale)throw new Error("Lingui: Attempted to call a translation function without setting a locale.\nMake sure to call `i18n.activate(locale)` before using Lingui functions.\nThis issue may also occur due to a race condition in your initialization logic.");let a=t==null?void 0:t.message;e||(e=""),v(e)||(r=e.values||r,a=e.message,e=e.id);let i=this.messages[e],s=i===void 0,n=this._missing;if(n&&s)return Pe(n)?n(this._locale,e):n;s&&this.emit("missing",{id:e,locale:this._locale});let l=i||a||e;return v(l)&&(this._messageCompiler?l=this._messageCompiler(l):console.warn(`Uncompiled message detected! Message:
-
-> ${l}
-
-That means you use raw catalog or your catalog doesn't have a translation for the message and fallback was used.
-ICU features such as interpolation and plurals will not work properly for that message. 
-
-Please compile your catalog first. 
-`)),v(l)&&oe.test(l)?JSON.parse(`"${l}"`):v(l)?l:$e(l,this._locale,this._locales)(r,t==null?void 0:t.formats)}date(e,r){return A(this._locales||this._locale,e,r)}number(e,r){return D(this._locales||this._locale,e,r)}};function Ue(o={}){return new P(o)}var F=Ue();var Ze=["en","nb","fi","da","sv"],ie="en",ae=o=>Ze.find(e=>o===e||o.toLowerCase().includes(e))||ie;function Be(){if(typeof window=="undefined"){let o=process.env.NMP_LANGUAGE||Intl.DateTimeFormat().resolvedOptions().locale;return ae(o)}try{let o=document.documentElement.lang;return ae(o)}catch(o){return console.warn("could not detect locale, falling back to source locale",o),ie}}var Je=(o,e,r,t,a,i)=>o==="nb"?r:o==="fi"?t:o==="da"?a:o==="sv"?i:e,se=(o,e,r,t,a)=>{let i=Be(),s=Je(i,o,e,r,t,a);F.load(i,s),F.activate(i)};var ne=JSON.parse('{"slider.error.overlap":["Maksimumv\xE6rdien m\xE5 ikke v\xE6re mindre end minimumv\xE6rdien"],"slider.error.required":["Dette felt er p\xE5kr\xE6vet"],"slider.error.out_of_bounds":["V\xE6rdien skal v\xE6re mellem ",["min"]," og ",["max"]]}');var le=JSON.parse('{"slider.error.overlap":["The maximum value cannot be less than the minimum"],"slider.error.required":["This field is required"],"slider.error.out_of_bounds":["Value must be between ",["min"]," and ",["max"]]}');var de=JSON.parse('{"slider.error.overlap":["Maksimiarvo ei voi olla pienempi kuin minimiarvo"],"slider.error.required":["T\xE4m\xE4 kentt\xE4 on pakollinen"],"slider.error.out_of_bounds":["Arvon on oltava v\xE4lill\xE4 ",["min"]," - ",["max"]]}');var ce=JSON.parse('{"slider.error.overlap":["Maksimumsverdien kan ikke v\xE6re mindre enn minimumsverdien"],"slider.error.required":["Dette feltet er p\xE5krevd"],"slider.error.out_of_bounds":["Verdien m\xE5 v\xE6re mellom ",["min"]," og ",["max"]]}');var be=JSON.parse('{"slider.error.overlap":["Maxv\xE4rdet kan inte vara mindre \xE4n minimiv\xE4rdet"],"slider.error.required":["Detta f\xE4lt \xE4r obligatoriskt"],"slider.error.out_of_bounds":["V\xE4rdet m\xE5ste vara mellan ",["min"]," och ",["max"]]}');import{css as ge}from"lit";var pe=ge`
-  *,
-  :before,
-  :after {
-    box-sizing: border-box;
-    border-style: solid;
-    border-width: 0;
-    border-color: var(--w-s-color-border);
-  }
-  html {
-    font-size: 62.5%;
-  }
-  body {
-    background-color: var(--w-s-color-background);
-    min-height: 100%;
-    margin: 0;
-    overflow-y: scroll;
-  }
-  body,
-  :host {
-    -webkit-text-size-adjust: 100%;
-    tab-size: 4;
-    -webkit-tap-highlight-color: transparent;
-    font-family: var(--w-font-family);
-    font-size: var(--w-font-size-m);
-    line-height: var(--w-line-height-m);
-    color: var(--w-s-color-text);
-  }
-  hr {
-    color: inherit;
-    border-top-width: 1px;
-    height: 0;
-  }
-  abbr:where([title]) {
-    -webkit-text-decoration: underline dotted;
-    text-decoration: underline dotted;
-  }
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-size: inherit;
-    font-weight: 700;
-  }
-  a {
-    cursor: pointer;
-    color: var(--w-s-color-text-link);
-    text-decoration: none;
-  }
-  a:hover,
-  a:focus,
-  a:active {
-    text-decoration: underline;
-  }
-  a:focus-visible {
-    outline: 2px solid var(--w-s-color-border-focus);
-    outline-offset: 1px;
-  }
-  b,
-  strong {
-    font-weight: 700;
-  }
-  code,
-  kbd,
-  samp,
-  pre {
-    font-family:
-      ui-monospace,
-      SFMono-Regular,
-      Menlo,
-      Monaco,
-      Consolas,
-      Liberation Mono,
-      Courier New,
-      monospace;
-    font-size: 1em;
-  }
-  sub,
-  sup {
-    vertical-align: baseline;
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-  }
-  sub {
-    bottom: -0.25em;
-  }
-  sup {
-    top: -0.5em;
-  }
-  table {
-    text-indent: 0;
-    border-color: inherit;
-    border-collapse: collapse;
-  }
-  button,
-  input,
-  optgroup,
-  select,
-  textarea {
-    font-family: inherit;
-    font-size: 100%;
-    font-weight: inherit;
-    line-height: inherit;
-    color: inherit;
-    margin: 0;
-    padding: 0;
-  }
-  button,
-  select {
-    text-transform: none;
-  }
-  button,
-  [type='button'],
-  [type='reset'],
-  [type='submit'] {
-    -webkit-appearance: button;
-  }
-  :-moz-focusring {
-    outline: auto;
-  }
-  :-moz-ui-invalid {
-    box-shadow: none;
-  }
-  progress {
-    vertical-align: baseline;
-  }
-  ::-webkit-inner-spin-button {
-    height: auto;
-  }
-  ::-webkit-outer-spin-button {
-    height: auto;
-  }
-  [type='search'] {
-    -webkit-appearance: textfield;
-    outline-offset: -2px;
-  }
-  ::-webkit-search-decoration {
-    -webkit-appearance: none;
-  }
-  ::-webkit-file-upload-button {
-    -webkit-appearance: button;
-    font: inherit;
-  }
-  summary {
-    display: list-item;
-  }
-  blockquote,
-  dl,
-  dd,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  hr,
-  figure,
-  p,
-  pre {
-    margin: 0;
-  }
-  fieldset {
-    margin: 0;
-    padding: 0;
-  }
-  legend {
-    padding: 0;
-  }
-  ol,
-  ul,
-  menu {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-  textarea {
-    resize: vertical;
-  }
-  input::placeholder,
-  textarea::placeholder {
-    opacity: 1;
-    color: var(--w-s-color-text-placeholder);
-  }
-  button,
-  [role='button'] {
-    cursor: pointer;
-  }
-  :disabled {
-    cursor: default;
-  }
-  img,
-  svg,
-  video,
-  canvas,
-  audio,
-  iframe,
-  embed,
-  object {
-    vertical-align: middle;
-    display: block;
-  }
-  img,
-  video {
-    max-width: 100%;
-    height: auto;
-  }
-  h1 {
-    font-size: var(--w-font-size-xxl);
-    line-height: var(--w-line-height-xxl);
-  }
-  h2 {
-    font-size: var(--w-font-size-xl);
-    line-height: var(--w-line-height-xl);
-  }
-  h3 {
-    font-size: var(--w-font-size-l);
-    line-height: var(--w-line-height-l);
-  }
-  h4 {
-    font-size: var(--w-font-size-m);
-    line-height: var(--w-line-height-m);
-  }
-  h5 {
-    font-size: var(--w-font-size-s);
-    line-height: var(--w-line-height-s);
-  }
-  dt,
-  dd {
-    margin: 0 16px;
-  }
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  ul,
-  ol,
-  dl,
-  p,
-  blockquote {
-    margin: 0 0 8px;
-  }
-  [hidden] {
-    display: none !important;
-  }
-  [tabindex='-1']:focus:not(:focus-visible) {
-    outline: none;
-  }
-  legend {
-    float: left;
-    width: 100%;
-    margin: 0;
-    padding: 0;
-    display: table;
-  }
-  legend + * {
-    clear: both;
-  }
-  fieldset {
-    border: 0;
-    min-width: 0;
-    margin: 0;
-    padding: 0.01em 0 0;
-  }
-  body:not(:-moz-handler-blocked) fieldset {
-    display: table-cell;
-  }
-  svg {
-    pointer-events: none;
-  }
-`,cr=ge`*, :before, :after {
-            --w-rotate: 0;
-            --w-rotate-x: 0;
-            --w-rotate-y: 0;
-            --w-rotate-z: 0;
-            --w-scale-x: 1;
-            --w-scale-y: 1;
-            --w-scale-z: 1;
-            --w-skew-x: 0;
-            --w-skew-y: 0;
-            --w-translate-x: 0;
-            --w-translate-y: 0;
-            --w-translate-z: 0
-        }
-
-            .h4, .t4 {
-                font-weight: 700;
-                font-size: var(--w-font-size-m);
-                line-height: var(--w-line-height-m)
-            }
-
-            .t3 {
-                font-weight: 700;
-                font-size: var(--w-font-size-l);
-                line-height: var(--w-line-height-l)
-            }
-
-            @media (min-width: 480px) {
-                .sm\\:h3 {
-                    font-weight: 700;
-                    font-size: var(--w-font-size-l);
-                    line-height: var(--w-line-height-l)
-                }
-            }
-
-            .text-center {
-                text-align: center
-            }
-
-            .before\\:text-center:before {
-                text-align: center
-            }
-
-            .text-left {
-                text-align: left
-            }
-
-            .text-right {
-                text-align: right
-            }
-
-            .align-middle {
-                vertical-align: middle
-            }
-
-            .animate-inprogress {
-                background-image: linear-gradient(135deg, rgba(0, 0, 0, .05) 25%, transparent 0, transparent 50%, rgba(0, 0, 0, .05) 0, rgba(0, 0, 0, .05) 75%, transparent 0, transparent) !important;
-                background-size: 30px 30px;
-                animation: animate-inprogress 3s linear infinite
-            }
-
-            @keyframes animate-inprogress {
-                0% {
-                    background-position: 0 0
-                }
-                to {
-                    background-position: 60px 0
-                }
-            }
-
-            .\\[--w-modal-max-height\\:80\\%\\] {
-                --w-modal-max-height: 80%
-            }
-
-            .\\[--w-modal-width\\:640px\\] {
-                --w-modal-width: 640px
-            }
-
-            .focus\\:\\[--w-outline-offset\\:-2px\\]:focus {
-                --w-outline-offset: -2px
-            }
-
-            .backdrop-blur {
-                -webkit-backdrop-filter: blur(4px);
-                backdrop-filter: blur(4px)
-            }
-
-            .peer:checked ~ .peer-checked\\:before\\:bg-center:before {
-                background-position: center
-            }
-
-            .hover\\:bg-clip-padding:hover {
-                -webkit-background-clip: padding-box;
-                background-clip: padding-box
-            }
-
-            .bg-transparent, .group\\/steph:first-child .group-first\\/steph\\:bg-transparent, .group\\/steph:last-child .group-last\\/steph\\:bg-transparent {
-                background-color: transparent
-            }
-
-            .bg-\\[--w-black\\/25\\] {
-                background-color: rgba(var(--w-rgb-black), .25)
-            }
-
-            .bg-\\[--w-black\\/70\\], .bg-\\[var\\(--w-black\\)\\/70\\] {
-                background-color: rgba(var(--w-rgb-black), .7)
-            }
-
-            .bg-\\[--w-color-badge-info-background\\] {
-                background-color: var(--w-color-badge-info-background)
-            }
-
-            .bg-\\[--w-color-badge-negative-background\\] {
-                background-color: var(--w-color-badge-negative-background)
-            }
-
-            .bg-\\[--w-color-badge-neutral-background\\] {
-                background-color: var(--w-color-badge-neutral-background)
-            }
-
-            .bg-\\[--w-color-badge-positive-background\\] {
-                background-color: var(--w-color-badge-positive-background)
-            }
-
-            .bg-\\[--w-color-badge-sponsored-background\\] {
-                background-color: var(--w-color-badge-sponsored-background)
-            }
-
-            .bg-\\[--w-color-badge-warning-background\\] {
-                background-color: var(--w-color-badge-warning-background)
-            }
-
-            .bg-\\[--w-color-button-primary-background\\] {
-                background-color: var(--w-color-button-primary-background)
-            }
-
-            .bg-\\[--w-color-buttongroup-utility-background-selected\\] {
-                background-color: var(--w-color-buttongroup-utility-background-selected)
-            }
-
-            .bg-\\[--w-color-callout-background\\] {
-                background-color: var(--w-color-callout-background)
-            }
-
-            .bg-\\[--w-color-pill-suggestion-background\\] {
-                background-color: var(--w-color-pill-suggestion-background)
-            }
-
-            .bg-\\[--w-color-switch-track-background\\] {
-                background-color: var(--w-color-switch-track-background)
-            }
-
-            .bg-\\[--w-s-color-surface-elevated-100\\] {
-                background-color: var(--w-s-color-surface-elevated-100)
-            }
-
-            .bg-\\[--w-s-color-surface-elevated-300\\] {
-                background-color: var(--w-s-color-surface-elevated-300)
-            }
-
-            .bg-\\[--w-s-icon-selected\\] {
-                background-color: var(--w-s-icon-selected)
-            }
-
-            .group:hover .group-hover\\:bg-\\[--w-color-switch-track-background-hover\\] {
-                background-color: var(--w-color-switch-track-background-hover)
-            }
-
-            .hover\\:bg-\\[--w-color-button-pill-background-hover\\]:hover {
-                background-color: var(--w-color-button-pill-background-hover)
-            }
-
-            .hover\\:bg-\\[--w-color-button-primary-background-hover\\]:hover {
-                background-color: var(--w-color-button-primary-background-hover)
-            }
-
-            .hover\\:bg-\\[--w-color-buttongroup-utility-background-hover\\]:hover {
-                background-color: var(--w-color-buttongroup-utility-background-hover)
-            }
-
-            .hover\\:bg-\\[--w-color-pill-suggestion-background-hover\\]:hover {
-                background-color: var(--w-color-pill-suggestion-background-hover)
-            }
-
-            .hover\\:bg-\\[--w-s-icon-subtle\\]:hover {
-                background-color: var(--w-s-icon-subtle)
-            }
-
-            .hover\\:bg-\\[var\\(--w-black\\)\\/85\\]:hover {
-                background-color: rgba(var(--w-rgb-black), .85)
-            }
-
-            .active\\:bg-\\[--w-color-button-pill-background-active\\]:active {
-                background-color: var(--w-color-button-pill-background-active)
-            }
-
-            .active\\:bg-\\[--w-color-button-primary-background-active\\]:active {
-                background-color: var(--w-color-button-primary-background-active)
-            }
-
-            .active\\:bg-\\[--w-color-buttongroup-utility-background-selected\\]:active {
-                background-color: var(--w-color-buttongroup-utility-background-selected)
-            }
-
-            .active\\:bg-\\[--w-color-pill-suggestion-background-active\\]:active {
-                background-color: var(--w-color-pill-suggestion-background-active)
-            }
-
-            .active\\:bg-\\[var\\(--w-black\\)\\]:active {
-                background-color: var(--w-black)
-            }
-
-            .peer:checked ~ .peer-checked\\:before\\:bg-\\[url\\(var\\(--w-icon-toggle-checked\\)\\)\\]:before {
-                background-image: var(--w-icon-toggle-checked)
-            }
-
-            .appearance-none {
-                -moz-appearance: none;
-                appearance: none;
-                -webkit-appearance: none
-            }
-
-            .will-change-height {
-                will-change: height
-            }
-
-            .border, .border-1 {
-                border-width: 1px
-            }
-
-            .border-b {
-                border-bottom-width: 1px
-            }
-
-            .before\\:border:before {
-                border-width: 1px
-            }
-
-            .border-0 {
-                border-width: 0
-            }
-
-            .border-2 {
-                border-width: 2px
-            }
-
-            .border-b-0 {
-                border-bottom-width: 0
-            }
-
-            .border-b-4 {
-                border-bottom-width: 4px
-            }
-
-            .border-l-4 {
-                border-left-width: 4px
-            }
-
-            .border-r-0, .group:not(:last-of-type) .group-not-last-of-type\\:border-r-0 {
-                border-right-width: 0
-            }
-
-            .peer:checked ~ .peer-checked\\:before\\:border-\\[6\\]:before {
-                border-width: .6rem
-            }
-
-            .border-transparent {
-                border-color: transparent
-            }
-
-            .border-\\[--w-color-buttongroup-utility-border\\] {
-                border-color: var(--w-color-buttongroup-utility-border)
-            }
-
-            .border-\\[--w-color-callout-border\\] {
-                border-color: var(--w-color-callout-border)
-            }
-
-            .border-\\[--w-s-color-background-inverted\\] {
-                border-color: var(--w-s-color-background-inverted)
-            }
-
-            .border-\\[--w-s-color-surface-elevated-300\\] {
-                border-color: var(--w-s-color-surface-elevated-300)
-            }
-
-            .active\\:border-\\[--w-color-buttongroup-utility-border-selected\\]:active {
-                border-color: var(--w-color-buttongroup-utility-border-selected)
-            }
-
-            .divide-x > * + * {
-                --w-divide-x-reverse: 0;
-                border-left-width: calc(1px * calc(1 - var(--w-divide-x-reverse)));
-                border-right-width: calc(1px * var(--w-divide-x-reverse))
-            }
-
-            .divide-y > * + * {
-                --w-divide-y-reverse: 0;
-                border-top-width: calc(1px * calc(1 - var(--w-divide-y-reverse)));
-                border-bottom-width: calc(1px * var(--w-divide-y-reverse))
-            }
-
-            .rounded-4 {
-                border-radius: 4px
-            }
-
-            .rounded-8 {
-                border-radius: 8px
-            }
-
-            .rounded-full {
-                border-radius: 9999px
-            }
-
-            .before\\:rounded-2:before {
-                border-radius: 2px
-            }
-
-            .before\\:rounded-full:before {
-                border-radius: 9999px
-            }
-
-            .rounded-b-0 {
-                border-bottom-left-radius: 0;
-                border-bottom-right-radius: 0
-            }
-
-            .rounded-bl-0 {
-                border-bottom-left-radius: 0
-            }
-
-            .rounded-br-0 {
-                border-bottom-right-radius: 0
-            }
-
-            .rounded-l-0 {
-                border-top-left-radius: 0;
-                border-bottom-left-radius: 0
-            }
-
-            .rounded-l-full {
-                border-top-left-radius: 9999px;
-                border-bottom-left-radius: 9999px
-            }
-
-            .rounded-r-0 {
-                border-top-right-radius: 0;
-                border-bottom-right-radius: 0
-            }
-
-            .rounded-r-full {
-                border-top-right-radius: 9999px;
-                border-bottom-right-radius: 9999px
-            }
-
-            .rounded-tl-0 {
-                border-top-left-radius: 0
-            }
-
-            .rounded-tl-4 {
-                border-top-left-radius: 4px
-            }
-
-            .rounded-tr-0 {
-                border-top-right-radius: 0
-            }
-
-            .group:first-of-type .group-first-of-type\\:rounded-bl-8 {
-                border-bottom-left-radius: 8px
-            }
-
-            .group:first-of-type .group-first-of-type\\:rounded-tl-8 {
-                border-top-left-radius: 8px
-            }
-
-            .first\\:rounded-lb-4:first-child {
-                border-bottom-left-radius: 4px
-            }
-
-            .first\\:rounded-lt-4:first-child {
-                border-top-left-radius: 4px
-            }
-
-            .first\\:rounded-rt-4:first-child {
-                border-top-right-radius: 4px
-            }
-
-            .group:last-of-type .group-last-of-type\\:rounded-br-8 {
-                border-bottom-right-radius: 8px
-            }
-
-            .group:last-of-type .group-last-of-type\\:rounded-tr-8 {
-                border-top-right-radius: 8px
-            }
-
-            .last\\:rounded-lb-4:last-child {
-                border-bottom-left-radius: 4px
-            }
-
-            .last\\:rounded-rb-4:last-child {
-                border-bottom-right-radius: 4px
-            }
-
-            .last\\:rounded-rt-4:last-child {
-                border-top-right-radius: 4px
-            }
-
-            .caret-current {
-                caret-color: currentColor
-            }
-
-            .opacity-25 {
-                opacity: 25%
-            }
-
-            .block {
-                display: block
-            }
-
-            .before\\:block:before {
-                display: block
-            }
-
-            .inline-block {
-                display: inline-block
-            }
-
-            .inline {
-                display: inline
-            }
-
-            .flex, .open\\:flex[open] {
-                display: flex
-            }
-
-            .inline-flex {
-                display: inline-flex
-            }
-
-            .grid {
-                display: grid
-            }
-
-            .inline-grid {
-                display: inline-grid
-            }
-
-            .hidden, .group\\/stepv:last-child .group-last\\/stepv\\:hidden {
-                display: none
-            }
-
-            .before\\:hidden:before {
-                display: none
-            }
-
-            .hover\\:underline:hover {
-                text-decoration-line: underline
-            }
-
-            .focus\\:underline:focus {
-                text-decoration-line: underline
-            }
-
-            .focus-visible\\:underline:focus-visible {
-                text-decoration-line: underline
-            }
-
-            .active\\:underline:active {
-                text-decoration-line: underline
-            }
-
-            .hover\\:no-underline:hover {
-                text-decoration: none
-            }
-
-            .focus\\:no-underline:focus {
-                text-decoration: none
-            }
-
-            .active\\:no-underline:active {
-                text-decoration: none
-            }
-
-            .flex-1 {
-                flex: 1 1 0%
-            }
-
-            .shrink {
-                flex-shrink: 1
-            }
-
-            .shrink-0 {
-                flex-shrink: 0
-            }
-
-            .shrink-0\\! {
-                flex-shrink: 0 !important
-            }
-
-            .grow, .grow-1 {
-                flex-grow: 1
-            }
-
-            .basis-auto {
-                flex-basis: auto
-            }
-
-            .flex-col {
-                flex-direction: column
-            }
-
-            .focus-within\\:focusable:focus-within {
-                outline: 2px solid var(--w-s-color-border-focus);
-                outline-offset: var(--w-outline-offset, 1px)
-            }
-
-            .focusable:focus, .focusable:focus-visible {
-                outline: 2px solid var(--w-s-color-border-focus);
-                outline-offset: var(--w-outline-offset, 1px)
-            }
-
-            .focusable:not(:focus-visible) {
-                outline: none
-            }
-
-            .peer:focus ~ .peer-focus\\:focusable, .peer:focus-visible ~ .peer-focus\\:focusable {
-                outline: 2px solid var(--w-s-color-border-focus);
-                outline-offset: var(--w-outline-offset, 1px)
-            }
-
-            .peer:not(:focus-visible) ~ .peer-focus\\:focusable {
-                outline: none
-            }
-
-            .focusable-inset {
-                --w-outline-offset: -3px
-            }
-
-            .gap-12 {
-                gap: 1.2rem
-            }
-
-            .gap-8 {
-                gap: .8rem
-            }
-
-            .gap-x-16 {
-                column-gap: 1.6rem
-            }
-
-            .gap-y-16 {
-                row-gap: 1.6rem
-            }
-
-            .row-span-2 {
-                grid-row: span 2/span 2
-            }
-
-            .col-span-2 {
-                grid-column: span 2/span 2
-            }
-
-            .col-span-3 {
-                grid-column: span 3/span 3
-            }
-
-            .row-start-1 {
-                grid-row-start: 1
-            }
-
-            .row-start-2 {
-                grid-row-start: 2
-            }
-
-            .col-start-2 {
-                grid-column-start: 2
-            }
-
-            .auto-rows-auto {
-                grid-auto-rows: auto
-            }
-
-            .grid-flow-col {
-                grid-auto-flow: column
-            }
-
-            .grid-rows-\\[20px_auto\\] {
-                grid-template-rows:20px auto
-            }
-
-            .grid-rows-\\[auto_20px\\] {
-                grid-template-rows:auto 20px
-            }
-
-            .grid-cols-\\[1fr_20px_1fr\\] {
-                grid-template-columns:1fr 20px 1fr
-            }
-
-            .grid-cols-\\[1fr_20px\\] {
-                grid-template-columns:1fr 20px
-            }
-
-            .grid-cols-\\[20px_1fr\\] {
-                grid-template-columns:20px 1fr
-            }
-
-            .grid-cols-\\[auto_1fr_auto\\] {
-                grid-template-columns:auto 1fr auto
-            }
-
-            .grid-cols-1 {
-                grid-template-columns:repeat(1, minmax(0, 1fr))
-            }
-
-            .grid-cols-2 {
-                grid-template-columns:repeat(2, minmax(0, 1fr))
-            }
-
-            .grid-cols-3 {
-                grid-template-columns:repeat(3, minmax(0, 1fr))
-            }
-
-            .grid-cols-4 {
-                grid-template-columns:repeat(4, minmax(0, 1fr))
-            }
-
-            .grid-cols-5 {
-                grid-template-columns:repeat(5, minmax(0, 1fr))
-            }
-
-            .grid-cols-6 {
-                grid-template-columns:repeat(6, minmax(0, 1fr))
-            }
-
-            .grid-cols-7 {
-                grid-template-columns:repeat(7, minmax(0, 1fr))
-            }
-
-            .grid-cols-8 {
-                grid-template-columns:repeat(8, minmax(0, 1fr))
-            }
-
-            .grid-cols-9 {
-                grid-template-columns:repeat(9, minmax(0, 1fr))
-            }
-
-            .overflow-hidden {
-                overflow: hidden
-            }
-
-            .overflow-x-hidden {
-                overflow-x: hidden
-            }
-
-            .overflow-y-auto {
-                overflow-y: auto
-            }
-
-            .list-none {
-                list-style-type: none
-            }
-
-            .outline-\\[--w-s-color-border-negative\\]\\! {
-                outline-color: var(--w-s-color-border-negative) !important
-            }
-
-            .outline-none {
-                outline: 2px solid transparent;
-                outline-offset: 2px
-            }
-
-            .focus\\:outline-none:focus {
-                outline: 2px solid transparent;
-                outline-offset: 2px
-            }
-
-            .items-start {
-                align-items: flex-start
-            }
-
-            .items-end {
-                align-items: flex-end
-            }
-
-            .items-center {
-                align-items: center
-            }
-
-            .self-center {
-                align-self: center
-            }
-
-            .inset-0 {
-                top: 0rem;
-                right: 0rem;
-                bottom: 0rem;
-                left: 0rem
-            }
-
-            .-bottom-0 {
-                bottom: -0rem
-            }
-
-            .bottom-0 {
-                bottom: 0rem
-            }
-
-            .bottom-10 {
-                bottom: 1rem
-            }
-
-            .bottom-16 {
-                bottom: 1.6rem
-            }
-
-            .left-0 {
-                left: 0rem
-            }
-
-            .left-4 {
-                left: .4rem
-            }
-
-            .right-0 {
-                right: 0rem
-            }
-
-            .right-8 {
-                right: .8rem
-            }
-
-            .top-\\[1\\.92rem\\] {
-                top: 1.92rem
-            }
-
-            .top-0 {
-                top: 0rem
-            }
-
-            .top-20 {
-                top: 2rem
-            }
-
-            .top-4 {
-                top: .4rem
-            }
-
-            .top-8 {
-                top: .8rem
-            }
-
-            .before\\:bottom-0:before {
-                bottom: 0rem
-            }
-
-            .before\\:left-0:before {
-                left: 0rem
-            }
-
-            .before\\:right-0:before {
-                right: 0rem
-            }
-
-            .before\\:top-2:before {
-                top: .2rem
-            }
-
-            .-bottom-\\[8px\\] {
-                bottom: -8px
-            }
-
-            .-left-\\[8px\\] {
-                left: -8px
-            }
-
-            .-right-\\[8px\\] {
-                right: -8px
-            }
-
-            .-top-\\[8px\\] {
-                top: -8px
-            }
-
-            .top-\\[19px\\] {
-                top: 19px
-            }
-
-            .top-\\[30\\%\\] {
-                top: 30%
-            }
-
-            .justify-end {
-                justify-content: flex-end
-            }
-
-            .justify-center {
-                justify-content: center
-            }
-
-            .justify-between {
-                justify-content: space-between
-            }
-
-            .justify-items-center {
-                justify-items: center
-            }
-
-            .justify-self-start {
-                justify-self: start
-            }
-
-            .justify-self-end {
-                justify-self: end
-            }
-
-            .justify-self-center {
-                justify-self: center
-            }
-
-            .absolute {
-                position: absolute
-            }
-
-            .fixed {
-                position: fixed
-            }
-
-            .relative {
-                position: relative
-            }
-
-            .open\\:fixed[open] {
-                position: fixed
-            }
-
-            .before\\:absolute:before {
-                position: absolute
-            }
-
-            .z-10, .peer:checked ~ .peer-checked\\:z-10 {
-                z-index: 10
-            }
-
-            .z-30 {
-                z-index: 30
-            }
-
-            .z-50 {
-                z-index: 50
-            }
-
-            .hover\\:z-30:hover {
-                z-index: 30
-            }
-
-            .\\!s-bg-selected {
-                background-color: var(--w-s-color-background-selected) !important
-            }
-
-            .s-bg {
-                background-color: var(--w-s-color-background)
-            }
-
-            .s-bg-disabled {
-                background-color: var(--w-s-color-background-disabled)
-            }
-
-            .s-bg-disabled-subtle {
-                background-color: var(--w-s-color-background-disabled-subtle)
-            }
-
-            .s-bg-info-subtle {
-                background-color: var(--w-s-color-background-info-subtle)
-            }
-
-            .s-bg-inverted {
-                background-color: var(--w-s-color-background-inverted)
-            }
-
-            .s-bg-negative {
-                background-color: var(--w-s-color-background-negative)
-            }
-
-            .s-bg-negative-subtle {
-                background-color: var(--w-s-color-background-negative-subtle)
-            }
-
-            .s-bg-positive-subtle {
-                background-color: var(--w-s-color-background-positive-subtle)
-            }
-
-            .s-bg-primary, .peer:checked ~ .peer-checked\\:s-bg-primary {
-                background-color: var(--w-s-color-background-primary)
-            }
-
-            .s-bg-selected {
-                background-color: var(--w-s-color-background-selected)
-            }
-
-            .s-bg-subtle {
-                background-color: var(--w-s-color-background-subtle)
-            }
-
-            .s-bg-warning-subtle {
-                background-color: var(--w-s-color-background-warning-subtle)
-            }
-
-            .peer:checked:hover ~ .peer-checked\\:peer-hover\\:before\\:s-bg-negative-hover:before {
-                background-color: var(--w-s-color-background-negative-hover)
-            }
-
-            .peer:checked:hover ~ .peer-checked\\:peer-hover\\:before\\:s-bg-primary-hover:before {
-                background-color: var(--w-s-color-background-primary-hover)
-            }
-
-            .peer:checked ~ .peer-checked\\:before\\:s-bg-disabled:before {
-                background-color: var(--w-s-color-background-disabled)
-            }
-
-            .peer:checked ~ .peer-checked\\:before\\:s-bg-negative:before {
-                background-color: var(--w-s-color-background-negative)
-            }
-
-            .peer:checked ~ .peer-checked\\:before\\:s-bg-primary:before {
-                background-color: var(--w-s-color-background-primary)
-            }
-
-            .peer:indeterminate ~ .peer-indeterminate\\:before\\:s-bg-disabled:before {
-                background-color: var(--w-s-color-background-disabled)
-            }
-
-            .peer:indeterminate ~ .peer-indeterminate\\:before\\:s-bg-negative:before {
-                background-color: var(--w-s-color-background-negative)
-            }
-
-            .peer:indeterminate ~ .peer-indeterminate\\:before\\:s-bg-primary:before {
-                background-color: var(--w-s-color-background-primary)
-            }
-
-            .peer:indeterminate ~ .peer-indeterminate\\:hover\\:before\\:s-bg-negative-hover:hover:before {
-                background-color: var(--w-s-color-background-negative-hover)
-            }
-
-            .peer:indeterminate ~ .peer-indeterminate\\:hover\\:before\\:s-bg-primary-hover:hover:before {
-                background-color: var(--w-s-color-background-primary-hover)
-            }
-
-            .\\!hover\\:s-bg-selected-hover:hover {
-                background-color: var(--w-s-color-background-selected-hover) !important
-            }
-
-            .group:hover .group-hover\\:s-bg-primary-hover {
-                background-color: var(--w-s-color-background-primary-hover)
-            }
-
-            .hover\\:before\\:s-bg-hover:hover:before {
-                background-color: var(--w-s-color-background-hover)
-            }
-
-            .hover\\:before\\:s-bg-negative-subtle-hover:hover:before {
-                background-color: var(--w-s-color-background-negative-subtle-hover)
-            }
-
-            .hover\\:s-bg-hover:hover {
-                background-color: var(--w-s-color-background-hover)
-            }
-
-            .hover\\:s-bg-negative-hover:hover {
-                background-color: var(--w-s-color-background-negative-hover)
-            }
-
-            .hover\\:s-bg-negative-subtle-hover:hover {
-                background-color: var(--w-s-color-background-negative-subtle-hover)
-            }
-
-            .hover\\:s-bg-primary-hover:hover {
-                background-color: var(--w-s-color-background-primary-hover)
-            }
-
-            .hover\\:s-bg-selected-hover:hover {
-                background-color: var(--w-s-color-background-selected-hover)
-            }
-
-            .peer:hover:not(:checked) ~ .peer-hover\\:peer-not-checked\\:s-bg-hover {
-                background-color: var(--w-s-color-background-hover)
-            }
-
-            .peer:hover ~ .peer-hover\\:before\\:s-bg-hover:before {
-                background-color: var(--w-s-color-background-hover)
-            }
-
-            .peer:hover ~ .peer-hover\\:before\\:s-bg-negative-subtle:before {
-                background-color: var(--w-s-color-background-negative-subtle)
-            }
-
-            .focus\\:s-bg-primary-hover:focus {
-                background-color: var(--w-s-color-background-primary-hover)
-            }
-
-            .\\!active\\:s-bg-selected-active:active {
-                background-color: var(--w-s-color-background-selected-active) !important
-            }
-
-            .active\\:s-bg-active:active {
-                background-color: var(--w-s-color-background-active)
-            }
-
-            .active\\:s-bg-negative-active:active {
-                background-color: var(--w-s-color-background-negative-active)
-            }
-
-            .active\\:s-bg-negative-subtle-active:active {
-                background-color: var(--w-s-color-background-negative-subtle-active)
-            }
-
-            .active\\:s-bg-primary-active:active {
-                background-color: var(--w-s-color-background-primary-active)
-            }
-
-            .active\\:s-bg-selected-active:active {
-                background-color: var(--w-s-color-background-selected-active)
-            }
-
-            .before\\:s-bg-disabled-subtle:before {
-                background-color: var(--w-s-color-background-disabled-subtle)
-            }
-
-            .before\\:s-bg:before {
-                background-color: var(--w-s-color-background)
-            }
-
-            .s-text {
-                color: var(--w-s-color-text)
-            }
-
-            .s-text-disabled {
-                color: var(--w-s-color-text-disabled)
-            }
-
-            .s-text-inverted, .peer:checked ~ .peer-checked\\:s-text-inverted {
-                color: var(--w-s-color-text-inverted)
-            }
-
-            .s-text-inverted-static {
-                color: var(--w-s-color-text-inverted-static)
-            }
-
-            .s-text-link {
-                color: var(--w-s-color-text-link)
-            }
-
-            .s-text-negative {
-                color: var(--w-s-color-text-negative)
-            }
-
-            .s-text-subtle {
-                color: var(--w-s-color-text-subtle)
-            }
-
-            .hover\\:s-text-link:hover {
-                color: var(--w-s-color-text-link)
-            }
-
-            .active\\:s-text:active {
-                color: var(--w-s-color-text)
-            }
-
-            .placeholder\\:s-text-placeholder::placeholder {
-                color: var(--w-s-color-text-placeholder)
-            }
-
-            .s-icon {
-                color: var(--w-s-color-icon)
-            }
-
-            .s-icon-info {
-                color: var(--w-s-color-icon-info)
-            }
-
-            .s-icon-inverted {
-                color: var(--w-s-color-icon-inverted)
-            }
-
-            .s-icon-negative {
-                color: var(--w-s-color-icon-negative)
-            }
-
-            .s-icon-positive {
-                color: var(--w-s-color-icon-positive)
-            }
-
-            .s-icon-warning {
-                color: var(--w-s-color-icon-warning)
-            }
-
-            .hover\\:s-icon-hover:hover {
-                color: var(--w-s-color-icon-hover)
-            }
-
-            .active\\:s-icon-active:active {
-                color: var(--w-s-color-icon-active)
-            }
-
-            .before\\:s-icon-inverted:before {
-                color: var(--w-s-color-icon-inverted)
-            }
-
-            .s-border {
-                border-color: var(--w-s-color-border)
-            }
-
-            .s-border-disabled {
-                border-color: var(--w-s-color-border-disabled)
-            }
-
-            .s-border-info-subtle {
-                border-color: var(--w-s-color-border-info-subtle)
-            }
-
-            .s-border-l-info {
-                border-left-color: var(--w-s-color-border-info)
-            }
-
-            .s-border-l-negative {
-                border-left-color: var(--w-s-color-border-negative)
-            }
-
-            .s-border-l-positive {
-                border-left-color: var(--w-s-color-border-positive)
-            }
-
-            .s-border-l-warning {
-                border-left-color: var(--w-s-color-border-warning)
-            }
-
-            .s-border-negative {
-                border-color: var(--w-s-color-border-negative)
-            }
-
-            .s-border-negative-subtle {
-                border-color: var(--w-s-color-border-negative-subtle)
-            }
-
-            .s-border-positive-subtle {
-                border-color: var(--w-s-color-border-positive-subtle)
-            }
-
-            .s-border-primary, .peer:checked ~ .peer-checked\\:s-border-primary {
-                border-color: var(--w-s-color-border-primary)
-            }
-
-            .s-border-selected {
-                border-color: var(--w-s-color-border-selected)
-            }
-
-            .s-border-warning-subtle {
-                border-color: var(--w-s-color-border-warning-subtle)
-            }
-
-            .peer:checked:hover ~ .peer-checked\\:peer-hover\\:before\\:s-border-negative-hover:before {
-                border-color: var(--w-s-color-border-negative-hover)
-            }
-
-            .peer:checked:hover ~ .peer-checked\\:peer-hover\\:before\\:s-border-primary-hover:before {
-                border-color: var(--w-s-color-border-primary-hover)
-            }
-
-            .peer:checked:hover ~ .peer-checked\\:peer-hover\\:before\\:s-border-selected-hover:before {
-                border-color: var(--w-s-color-border-selected-hover)
-            }
-
-            .peer:checked ~ .peer-checked\\:before\\:s-border-disabled:before {
-                border-color: var(--w-s-color-border-disabled)
-            }
-
-            .peer:checked ~ .peer-checked\\:before\\:s-border-negative:before {
-                border-color: var(--w-s-color-border-negative)
-            }
-
-            .peer:checked ~ .peer-checked\\:before\\:s-border-primary:before {
-                border-color: var(--w-s-color-border-primary)
-            }
-
-            .peer:checked ~ .peer-checked\\:before\\:s-border-selected:before {
-                border-color: var(--w-s-color-border-selected)
-            }
-
-            .peer:indeterminate ~ .peer-indeterminate\\:before\\:s-border-disabled:before {
-                border-color: var(--w-s-color-border-disabled)
-            }
-
-            .peer:indeterminate ~ .peer-indeterminate\\:before\\:s-border-negative:before {
-                border-color: var(--w-s-color-border-negative)
-            }
-
-            .peer:indeterminate ~ .peer-indeterminate\\:before\\:s-border-primary:before {
-                border-color: var(--w-s-color-border-primary)
-            }
-
-            .peer:indeterminate ~ .peer-indeterminate\\:hover\\:before\\:s-border-negative-hover:hover:before {
-                border-color: var(--w-s-color-border-negative-hover)
-            }
-
-            .peer:indeterminate ~ .peer-indeterminate\\:hover\\:before\\:s-border-primary-hover:hover:before {
-                border-color: var(--w-s-color-border-primary-hover)
-            }
-
-            .group:hover .group-hover\\:s-border-selected-hover {
-                border-color: var(--w-s-color-border-selected-hover)
-            }
-
-            .hover\\:before\\:s-border-negative-hover:hover:before {
-                border-color: var(--w-s-color-border-negative-hover)
-            }
-
-            .hover\\:before\\:s-border-primary:hover:before {
-                border-color: var(--w-s-color-border-primary)
-            }
-
-            .hover\\:s-border-disabled:hover {
-                border-color: var(--w-s-color-border-disabled)
-            }
-
-            .hover\\:s-border-hover:hover {
-                border-color: var(--w-s-color-border-hover)
-            }
-
-            .hover\\:s-border-negative-hover:hover {
-                border-color: var(--w-s-color-border-negative-hover)
-            }
-
-            .hover\\:s-border-primary-hover:hover {
-                border-color: var(--w-s-color-border-primary-hover)
-            }
-
-            .hover\\:s-border-primary:hover {
-                border-color: var(--w-s-color-border-primary)
-            }
-
-            .hover\\:s-border-selected-hover:hover {
-                border-color: var(--w-s-color-border-selected-hover)
-            }
-
-            .peer:hover ~ .peer-hover\\:before\\:s-border-negative-hover:before {
-                border-color: var(--w-s-color-border-negative-hover)
-            }
-
-            .peer:hover ~ .peer-hover\\:before\\:s-border-primary:before {
-                border-color: var(--w-s-color-border-primary)
-            }
-
-            .focus\\:s-border-primary-hover:focus {
-                border-color: var(--w-s-color-border-primary-hover)
-            }
-
-            .active\\:s-border-active:active {
-                border-color: var(--w-s-color-border-active)
-            }
-
-            .active\\:s-border-disabled:active {
-                border-color: var(--w-s-color-border-disabled)
-            }
-
-            .active\\:s-border-primary-active:active {
-                border-color: var(--w-s-color-border-primary-active)
-            }
-
-            .active\\:s-border-selected-active:active {
-                border-color: var(--w-s-color-border-selected-active)
-            }
-
-            .active\\:s-border-selected:active {
-                border-color: var(--w-s-color-border-selected)
-            }
-
-            .group:active .group-active\\:s-border-active {
-                border-color: var(--w-s-color-border-active)
-            }
-
-            .group:active .group-active\\:s-border-selected-active {
-                border-color: var(--w-s-color-border-selected-active)
-            }
-
-            .before\\:s-border-disabled:before {
-                border-color: var(--w-s-color-border-disabled)
-            }
-
-            .before\\:s-border-negative:before {
-                border-color: var(--w-s-color-border-negative)
-            }
-
-            .s-surface-sunken {
-                background-color: var(--w-s-color-surface-sunken)
-            }
-
-            .s-surface-elevated-200 {
-                background-color: var(--w-s-color-surface-elevated-200);
-                box-shadow: var(--w-s-shadow-surface-elevated-200)
-            }
-
-            .hover\\:s-surface-elevated-200-hover:hover {
-                background-color: var(--w-s-color-surface-elevated-200-hover);
-                box-shadow: var(--w-s-shadow-surface-elevated-200-hover)
-            }
-
-            .active\\:s-surface-elevated-200-active:active {
-                background-color: var(--w-s-color-surface-elevated-200-active);
-                box-shadow: var(--w-s-shadow-surface-elevated-200-active)
-            }
-
-            .drop-shadow-m {
-                filter: drop-shadow(rgba(64, 64, 64, .24) 0 3px 8px) drop-shadow(rgba(64, 64, 64, .16) 0 3px 6px)
-            }
-
-            .shadow-m {
-                box-shadow: var(--w-shadow-m)
-            }
-
-            .shadow-s {
-                box-shadow: var(--w-shadow-s)
-            }
-
-            .shadow-\\[--w-shadow-slider\\] {
-                box-shadow: var(--w-shadow-slider)
-            }
-
-            .hover\\:shadow-\\[--w-shadow-slider-handle-hover\\]:hover {
-                box-shadow: var(--w-shadow-slider-handle-hover)
-            }
-
-            .focus\\:shadow-\\[--w-shadow-slider-handle-hover\\]:focus {
-                box-shadow: var(--w-shadow-slider-handle-hover)
-            }
-
-            .active\\:shadow-\\[--w-shadow-slider-handle-active\\]:active {
-                box-shadow: var(--w-shadow-slider-handle-active)
-            }
-
-            .h-0 {
-                height: 0rem
-            }
-
-            .h-16 {
-                height: 1.6rem
-            }
-
-            .h-2 {
-                height: .2rem
-            }
-
-            .h-20 {
-                height: 2rem
-            }
-
-            .h-24 {
-                height: 2.4rem
-            }
-
-            .h-4 {
-                height: .4rem
-            }
-
-            .h-44 {
-                height: 4.4rem
-            }
-
-            .h-6 {
-                height: .6rem
-            }
-
-            .h-8 {
-                height: .8rem
-            }
-
-            .h-full {
-                height: 100%
-            }
-
-            .h-unset {
-                height: unset
-            }
-
-            .max-h-unset {
-                max-height: unset
-            }
-
-            .max-w-full {
-                max-width: 100%
-            }
-
-            .max-w-max {
-                max-width: max-content
-            }
-
-            .max-w-unset {
-                max-width: unset
-            }
-
-            .min-h-32 {
-                min-height: 3.2rem
-            }
-
-            .min-h-40 {
-                min-height: 4rem
-            }
-
-            .min-w-16 {
-                min-width: 1.6rem
-            }
-
-            .min-w-32 {
-                min-width: 3.2rem
-            }
-
-            .w-16 {
-                width: 1.6rem
-            }
-
-            .w-2 {
-                width: .2rem
-            }
-
-            .w-20 {
-                width: 2rem
-            }
-
-            .w-24 {
-                width: 2.4rem
-            }
-
-            .w-32 {
-                width: 3.2rem
-            }
-
-            .w-40 {
-                width: 4rem
-            }
-
-            .w-44 {
-                width: 4.4rem
-            }
-
-            .w-8 {
-                width: .8rem
-            }
-
-            .w-full {
-                width: 100%
-            }
-
-            .w-max {
-                width: max-content
-            }
-
-            .w-unset {
-                width: unset
-            }
-
-            .before\\:h-20:before {
-                height: 2rem
-            }
-
-            .before\\:h-full:before {
-                height: 100%
-            }
-
-            .before\\:w-20:before {
-                width: 2rem
-            }
-
-            .before\\:w-32:before {
-                width: 3.2rem
-            }
-
-            .h-\\[--w-modal-height\\] {
-                height: var(--w-modal-height)
-            }
-
-            .h-\\[14px\\] {
-                height: 14px
-            }
-
-            .h-\\[16px\\] {
-                height: 16px
-            }
-
-            .max-h-\\[--w-modal-max-height\\] {
-                max-height: var(--w-modal-max-height)
-            }
-
-            .min-h-\\[--w-modal-min-height\\] {
-                min-height: var(--w-modal-min-height)
-            }
-
-            .min-h-\\[32px\\] {
-                min-height: 32px
-            }
-
-            .min-h-\\[40px\\] {
-                min-height: 40px
-            }
-
-            .min-h-\\[42\\] {
-                min-height: 4.2rem
-            }
-
-            .min-h-\\[44px\\] {
-                min-height: 44px
-            }
-
-            .min-w-\\[32px\\] {
-                min-width: 32px
-            }
-
-            .min-w-\\[40px\\] {
-                min-width: 40px
-            }
-
-            .min-w-\\[44px\\] {
-                min-width: 44px
-            }
-
-            .w-\\[--w-modal-width\\] {
-                width: var(--w-modal-width)
-            }
-
-            .w-\\[14px\\] {
-                width: 14px
-            }
-
-            .w-\\[16px\\] {
-                width: 16px
-            }
-
-            .space-x-8 > :not([hidden]) ~ :not([hidden]) {
-                --w-space-x-reverse: 0;
-                margin-left: calc(.8rem * calc(1 - var(--w-space-x-reverse)));
-                margin-right: calc(.8rem * var(--w-space-x-reverse))
-            }
-
-            .space-y-16 > :not([hidden]) ~ :not([hidden]) {
-                --w-space-y-reverse: 0;
-                margin-top: calc(1.6rem * calc(1 - var(--w-space-y-reverse)));
-                margin-bottom: calc(1.6rem * var(--w-space-y-reverse))
-            }
-
-            .m-0 {
-                margin: 0rem
-            }
-
-            .m-auto {
-                margin: auto
-            }
-
-            .-mx-16 {
-                margin-left: -1.6rem;
-                margin-right: -1.6rem
-            }
-
-            .mx-0 {
-                margin-left: 0rem;
-                margin-right: 0rem
-            }
-
-            .mx-8 {
-                margin-left: .8rem;
-                margin-right: .8rem
-            }
-
-            .mx-auto {
-                margin-left: auto;
-                margin-right: auto
-            }
-
-            .-mb-1 {
-                margin-bottom: -.1rem
-            }
-
-            .-ml-8 {
-                margin-left: -.8rem
-            }
-
-            .-mr-1 {
-                margin-right: -.1rem
-            }
-
-            .-mr-8 {
-                margin-right: -.8rem
-            }
-
-            .-mt-2 {
-                margin-top: -.2rem
-            }
-
-            .-mt-4 {
-                margin-top: -.4rem
-            }
-
-            .last-child\\:mb-0 > :last-child, .mb-0 {
-                margin-bottom: 0rem
-            }
-
-            .mb-32 {
-                margin-bottom: 3.2rem
-            }
-
-            .ml-8 {
-                margin-left: .8rem
-            }
-
-            .ml-auto {
-                margin-left: auto
-            }
-
-            .mr-8 {
-                margin-right: .8rem
-            }
-
-            .mt-16 {
-                margin-top: 1.6rem
-            }
-
-            .mt-4 {
-                margin-top: .4rem
-            }
-
-            .group:not(:first-child) .group-not-first\\:-ml-2 {
-                margin-left: -.2rem
-            }
-
-            .last\\:mb-0:last-child {
-                margin-bottom: 0rem
-            }
-
-            .last\\:mr-0:last-child {
-                margin-right: 0rem
-            }
-
-            .m-\\[8px\\] {
-                margin: 8px
-            }
-
-            .p-0 {
-                padding: 0rem
-            }
-
-            .p-16 {
-                padding: 1.6rem
-            }
-
-            .p-4 {
-                padding: .4rem
-            }
-
-            .p-8 {
-                padding: .8rem
-            }
-
-            .px-0 {
-                padding-left: 0rem;
-                padding-right: 0rem
-            }
-
-            .px-1 {
-                padding-left: .1rem;
-                padding-right: .1rem
-            }
-
-            .px-12 {
-                padding-left: 1.2rem;
-                padding-right: 1.2rem
-            }
-
-            .px-14 {
-                padding-left: 1.4rem;
-                padding-right: 1.4rem
-            }
-
-            .px-16 {
-                padding-left: 1.6rem;
-                padding-right: 1.6rem
-            }
-
-            .px-8 {
-                padding-left: .8rem;
-                padding-right: .8rem
-            }
-
-            .py-0 {
-                padding-top: 0rem;
-                padding-bottom: 0rem
-            }
-
-            .py-1 {
-                padding-top: .1rem;
-                padding-bottom: .1rem
-            }
-
-            .py-10 {
-                padding-top: 1rem;
-                padding-bottom: 1rem
-            }
-
-            .py-12 {
-                padding-top: 1.2rem;
-                padding-bottom: 1.2rem
-            }
-
-            .py-2 {
-                padding-top: .2rem;
-                padding-bottom: .2rem
-            }
-
-            .py-4 {
-                padding-top: .4rem;
-                padding-bottom: .4rem
-            }
-
-            .py-6 {
-                padding-top: .6rem;
-                padding-bottom: .6rem
-            }
-
-            .py-8 {
-                padding-top: .8rem;
-                padding-bottom: .8rem
-            }
-
-            .pb-0 {
-                padding-bottom: 0rem
-            }
-
-            .pb-32 {
-                padding-bottom: 3.2rem
-            }
-
-            .pb-4 {
-                padding-bottom: .4rem
-            }
-
-            .pb-8 {
-                padding-bottom: .8rem
-            }
-
-            .pl-0 {
-                padding-left: 0rem
-            }
-
-            .pl-1 {
-                padding-left: .1rem
-            }
-
-            .pl-12 {
-                padding-left: 1.2rem
-            }
-
-            .pl-28 {
-                padding-left: 2.8rem
-            }
-
-            .pl-4 {
-                padding-left: .4rem
-            }
-
-            .pl-8 {
-                padding-left: .8rem
-            }
-
-            .pr-12 {
-                padding-right: 1.2rem
-            }
-
-            .pr-14 {
-                padding-right: 1.4rem
-            }
-
-            .pr-2 {
-                padding-right: .2rem
-            }
-
-            .pr-32 {
-                padding-right: 3.2rem
-            }
-
-            .pr-40 {
-                padding-right: 4rem
-            }
-
-            .pt-0 {
-                padding-top: 0rem
-            }
-
-            .pt-1 {
-                padding-top: .1rem
-            }
-
-            .pt-16 {
-                padding-top: 1.6rem
-            }
-
-            .pt-24 {
-                padding-top: 2.4rem
-            }
-
-            .pt-8 {
-                padding-top: .8rem
-            }
-
-            .group\\/step:last-child .group-last\\/step\\:last\\:pb-0:last-child {
-                padding-bottom: 0rem
-            }
-
-            .last\\:pb-1:last-child {
-                padding-bottom: .1rem
-            }
-
-            .last\\:pr-1:last-child {
-                padding-right: .1rem
-            }
-
-            .p-\\[8px\\] {
-                padding: 8px
-            }
-
-            .px-\\[15px\\] {
-                padding-left: 15px;
-                padding-right: 15px
-            }
-
-            .px-\\[8px\\] {
-                padding-left: 8px;
-                padding-right: 8px
-            }
-
-            .py-\\[11px\\] {
-                padding-top: 11px;
-                padding-bottom: 11px
-            }
-
-            .py-\\[5px\\] {
-                padding-top: 5px;
-                padding-bottom: 5px
-            }
-
-            .py-\\[7px\\] {
-                padding-top: 7px;
-                padding-bottom: 7px
-            }
-
-            .pl-\\[var\\(--w-prefix-width\\,_40px\\)\\] {
-                padding-left: var(--w-prefix-width, 40px)
-            }
-
-            .invisible {
-                visibility: hidden
-            }
-
-            .backface-hidden {
-                backface-visibility: hidden
-            }
-
-            .break-words {
-                overflow-wrap: break-word
-            }
-
-            .before\\:content-\\[\\"–\\"\\]:before {
-                content: "–"
-            }
-
-            .before\\:content-\\[\\"\\"\\]:before {
-                content: ""
-            }
-
-            .cursor-default {
-                cursor: default
-            }
-
-            .cursor-pointer {
-                cursor: pointer
-            }
-
-            .antialiased {
-                -webkit-font-smoothing: antialiased;
-                -moz-osx-font-smoothing: grayscale;
-                font-smoothing: grayscale
-            }
-
-            .font-bold {
-                font-weight: 700
-            }
-
-            .before\\:font-bold:before {
-                font-weight: 700
-            }
-
-            .font-normal {
-                font-weight: 400
-            }
-
-            .pointer-events-auto {
-                pointer-events: auto
-            }
-
-            .pointer-events-none {
-                pointer-events: none
-            }
-
-            .before\\:pointer-events-none:before {
-                pointer-events: none
-            }
-
-            .pb-safe-\\[32\\] {
-                padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px))
-            }
-
-            .sr-only {
-                position: absolute;
-                width: 1px;
-                height: 1px;
-                padding: 0;
-                margin: -1px;
-                overflow: hidden;
-                clip: rect(0, 0, 0, 0);
-                white-space: nowrap;
-                border-width: 0
-            }
-
-            .touch-pan-y {
-                touch-action: pan-y
-            }
-
-            .select-none {
-                -webkit-user-select: none;
-                user-select: none
-            }
-
-            .translate-x-20 {
-                --w-translate-x: 2rem;
-                transform: translate(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotate(var(--w-rotate-z)) skew(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))
-            }
-
-            .translate-z-0 {
-                --w-translate-z: 0rem;
-                transform: translate(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotate(var(--w-rotate-z)) skew(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))
-            }
-
-            .-rotate-180, .part-\\[w-icon-chevron-down-16-part\\]\\:-rotate-180::part(w-icon-chevron-down-16-part) {
-                --w-rotate-x: 0;
-                --w-rotate-y: 0;
-                --w-rotate-z: 0;
-                --w-rotate: -180deg;
-                transform: translate(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotate(var(--w-rotate-z)) skew(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))
-            }
-
-            .part-\\[w-icon-chevron-up-16-part\\]\\:rotate-180::part(w-icon-chevron-up-16-part), .rotate-180 {
-                --w-rotate-x: 0;
-                --w-rotate-y: 0;
-                --w-rotate-z: 0;
-                --w-rotate: 180deg;
-                transform: translate(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotate(var(--w-rotate-z)) skew(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))
-            }
-
-            .rotate-90 {
-                --w-rotate-x: 0;
-                --w-rotate-y: 0;
-                --w-rotate-z: 0;
-                --w-rotate: 90deg;
-                transform: translate(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotate(var(--w-rotate-z)) skew(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))
-            }
-
-            .part-\\[w-icon-chevron-down-16-part\\]\\:transform::part(w-icon-chevron-down-16-part), .part-\\[w-icon-chevron-up-16-part\\]\\:transform::part(w-icon-chevron-up-16-part), .transform {
-                transform: translate(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotate(var(--w-rotate-z)) skew(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))
-            }
-
-            .part-\\[w-icon-chevron-down-16-part\\]\\:transform-gpu::part(w-icon-chevron-down-16-part), .part-\\[w-icon-chevron-up-16-part\\]\\:transform-gpu::part(w-icon-chevron-up-16-part), .transform-gpu {
-                transform: translate3d(var(--w-translate-x), var(--w-translate-y), var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotate(var(--w-rotate-z)) skew(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))
-            }
-
-            .part-\\[w-icon-chevron-down-16-part\\]\\:transition-transform::part(w-icon-chevron-down-16-part), .part-\\[w-icon-chevron-up-16-part\\]\\:transition-transform::part(w-icon-chevron-up-16-part), .transition-transform {
-                transition-property: transform;
-                transition-timing-function: cubic-bezier(.4, 0, .2, 1);
-                transition-duration: .15s
-            }
-
-            .transition-300 {
-                transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-                transition-timing-function: cubic-bezier(.4, 0, .2, 1);
-                transition-duration: .3s
-            }
-
-            .transition-all {
-                transition-property: all;
-                transition-timing-function: cubic-bezier(.4, 0, .2, 1);
-                transition-duration: .15s
-            }
-
-            .transition-colors {
-                transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-                transition-timing-function: cubic-bezier(.4, 0, .2, 1);
-                transition-duration: .15s
-            }
-
-            .transition-shadow {
-                transition-property: box-shadow;
-                transition-timing-function: cubic-bezier(.4, 0, .2, 1);
-                transition-duration: .15s
-            }
-
-            .before\\:transition-all:before {
-                transition-property: all;
-                transition-timing-function: cubic-bezier(.4, 0, .2, 1);
-                transition-duration: .15s
-            }
-
-            .duration-300 {
-                transition-duration: .3s
-            }
-
-            .ease-in-out, .part-\\[w-icon-chevron-down-16-part\\]\\:ease-in-out::part(w-icon-chevron-down-16-part), .part-\\[w-icon-chevron-up-16-part\\]\\:ease-in-out::part(w-icon-chevron-up-16-part) {
-                transition-timing-function: cubic-bezier(.4, 0, .2, 1)
-            }
-
-            .text-m {
-                font-size: var(--w-font-size-m);
-                line-height: var(--w-line-height-m)
-            }
-
-            .text-s {
-                font-size: var(--w-font-size-s);
-                line-height: var(--w-line-height-s)
-            }
-
-            .text-xs {
-                font-size: var(--w-font-size-xs);
-                line-height: var(--w-line-height-xs)
-            }
-
-            .leading-m {
-                line-height: var(--w-line-height-m)
-            }
-
-            .before\\:leading-xs:before {
-                line-height: var(--w-line-height-xs)
-            }
-
-            .leading-\\[24\\] {
-                line-height: 2.4rem
-            }
-
-            @media (max-width: 479.9px) {
-                .lt-sm\\:rounded-b-0 {
-                    border-bottom-left-radius: 0;
-                    border-bottom-right-radius: 0
-                }
-            }
-            @media (min-width: 480px) {
-                .sm\\:border-b-0 {
-                    border-bottom-width: 0
-                }
-
-                .sm\\:rounded-8 {
-                    border-radius: 8px
-                }
-
-                .sm\\:rounded-b-8 {
-                    border-bottom-left-radius: 8px;
-                    border-bottom-right-radius: 8px
-                }
-
-                .sm\\:gap-16 {
-                    gap: 1.6rem
-                }
-
-                .sm\\:place-content-center {
-                    place-content: center
-                }
-
-                .sm\\:place-items-center {
-                    place-items: center
-                }
-
-                .sm\\:h-24 {
-                    height: 2.4rem
-                }
-
-                .sm\\:min-h-48 {
-                    min-height: 4.8rem
-                }
-
-                .sm\\:w-24 {
-                    width: 2.4rem
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { activateI18n } from '../i18n.js';
+import { messages as daMessages } from './locales/da/messages.mjs';
+import { messages as enMessages } from './locales/en/messages.mjs';
+import { messages as fiMessages } from './locales/fi/messages.mjs';
+import { messages as nbMessages } from './locales/nb/messages.mjs';
+import { messages as svMessages } from './locales/sv/messages.mjs';
+import { reset } from '../styles.js';
+import { wSliderStyles } from './styles/w-slider.styles.js';
+// Inspo:
+//   https://css-tricks.com/multi-thumb-sliders-particular-two-thumb-case/
+//   https://css-tricks.com/multi-thumb-sliders-general-case/
+//   https://css-tricks.com/lets-make-a-multi-thumb-slider-that-calculates-the-width-between-thumbs/
+/**
+ * Parent component for sliders (both single and range sliders). Used in combination with a `<w-slider-thumb>`.
+ *
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-slider-and-range-slider--docs)
+ *
+ * @slot - For single sliders place a `<w-slider-thumb>` in the default slot.
+ * @slot label - Label for the slider or range slider as a whole.
+ * @slot description - Optional description between the label and slider.
+ * @slot from - Range sliders need to place a `<w-slider-thumb>` in the from and to slots.
+ * @slot to - Range sliders need to place a `<w-slider-thumb>` in the from and to slots.
+ */
+class WarpSlider extends LitElement {
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        delegatesFocus: true,
+    }; }
+    static { this.styles = [reset, wSliderStyles]; }
+    constructor() {
+        super();
+        this.disabled = false;
+        this.allowValuesOutsideRange = false;
+        this.error = '';
+        this.helpText = '';
+        this.invalid = false;
+        /** Ensures a child slider thumb has a value before allowing the containing form to submit. */
+        this.required = false;
+        /** Suffix used in text input fields and for the min and max values of the slider. */
+        this.suffix = '';
+        this._invalidMessage = '';
+        this._hasInternalError = false;
+        activateI18n(enMessages, nbMessages, fiMessages, daMessages, svMessages);
+    }
+    #syncSliderThumbs() {
+        const sliderThumbs = this.querySelectorAll('w-slider-thumb');
+        let usedNamedSlots = false;
+        for (const thumb of sliderThumbs.values()) {
+            // Set attributes that should be in sync between slider thumbs
+            thumb.min = this.edgeMin;
+            thumb.max = this.edgeMax;
+            thumb.step = this.step;
+            thumb.suffix = this.suffix;
+            thumb.required = this.required;
+            thumb.formatter = this.formatter;
+            thumb.allowValuesOutsideRange = this.allowValuesOutsideRange;
+            if (!thumb.ariaLabel) {
+                if (!thumb.slot) {
+                    thumb.ariaLabel = this.label;
                 }
-
-                .sm\\:min-h-\\[32px\\] {
-                    min-height: 32px
+                if (thumb.slot === 'from') {
+                    thumb.ariaLabel = `${this.label} min`;
                 }
-
-                .sm\\:min-h-\\[44px\\] {
-                    min-height: 44px
-                }
-
-                .sm\\:min-h-\\[45\\] {
-                    min-height: 4.5rem
-                }
-
-                .sm\\:min-w-\\[32px\\] {
-                    min-width: 32px
-                }
-
-                .sm\\:min-w-\\[44px\\] {
-                    min-width: 44px
-                }
-
-                .sm\\:mx-0 {
-                    margin-left: 0rem;
-                    margin-right: 0rem
-                }
-
-                .sm\\:mx-16 {
-                    margin-left: 1.6rem;
-                    margin-right: 1.6rem
-                }
-
-                .sm\\:-ml-12 {
-                    margin-left: -1.2rem
-                }
-
-                .sm\\:-mr-12 {
-                    margin-right: -1.2rem
-                }
-
-                .sm\\:-mt-8 {
-                    margin-top: -.8rem
-                }
-
-                .sm\\:px-32 {
-                    padding-left: 3.2rem;
-                    padding-right: 3.2rem
-                }
-
-                .sm\\:py-0 {
-                    padding-top: 0rem;
-                    padding-bottom: 0rem
-                }
-
-                .sm\\:pb-32 {
-                    padding-bottom: 3.2rem
-                }
-
-                .sm\\:pt-24 {
-                    padding-top: 2.4rem
-                }
-
-                .sm\\:pt-32 {
-                    padding-top: 3.2rem
+                if (thumb.slot === 'to') {
+                    thumb.ariaLabel = `${this.label} max`;
                 }
             }
-            @media (min-width: 768px) {
-                .md\\:block {
-                    display: block
-                }
-
-                .md\\:hidden {
-                    display: none
+            if (thumb.slot === 'from' || thumb.slot === 'to') {
+                usedNamedSlots = true;
+            }
+            thumb.disabled = this.disabled;
+            thumb.invalid = this.invalid || this._hasInternalError;
+            this.#updateActiveTrack(thumb);
+        }
+        // Missing a CSS-only way to detect if something is slotted in the named slots
+        const fieldset = this.shadowRoot.querySelector('fieldset');
+        if (usedNamedSlots) {
+            fieldset.style.setProperty('--active-range-inline-start-padding', 'var(--w-slider-thumb-size)');
+            fieldset.style.setProperty('--active-range-inline-end-padding', 'var(--w-slider-thumb-size)');
+        }
+        else {
+            fieldset.style.setProperty('--active-range-border-radius', '4px');
+        }
+    }
+    get edgeMin() {
+        return this.allowValuesOutsideRange ? (Number(this.min) - 1).toString() : this.min;
+    }
+    get edgeMax() {
+        return this.allowValuesOutsideRange ? (Number(this.max) + 1).toString() : this.max;
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        await this.updateComplete;
+        if (this.step) {
+            this.style.setProperty('--step', String(this.step));
+        }
+        this.style.setProperty('--min', this.edgeMin);
+        this.style.setProperty('--max', this.max);
+        if (this.markers) {
+            this.style.setProperty('--markers', String(this.markers));
+        }
+        if (this.allowValuesOutsideRange) {
+            this.style.setProperty('--over-under-offset', '1');
+        }
+        this.#syncSliderThumbs();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('disabled') ||
+            changedProperties.has('invalid') ||
+            changedProperties.has('required') ||
+            changedProperties.has('min') ||
+            changedProperties.has('step') ||
+            changedProperties.has('max') ||
+            changedProperties.has('suffix') ||
+            changedProperties.has('formatter') ||
+            changedProperties.has('_invalidMessage') ||
+            changedProperties.has('_hasInternalError')) {
+            this.#syncSliderThumbs();
+        }
+    }
+    #onInput(e) {
+        const input = e.target;
+        this.#updateActiveTrack(input);
+        const isRangeSlider = input.slot;
+        if (isRangeSlider) {
+            this.#doValidation();
+        }
+    }
+    #doValidation() {
+        // In a range slider changing the value in one input can change the validity
+        // of the second input. Specifically, what was a value outside the mininum or
+        // maximum can become inside those limits when the limits change, by changing
+        // the from or to values. Check to see if a field is invalid, but should be
+        // valid based on those rules.
+        let from;
+        let to;
+        const sliderThumbs = this.querySelectorAll('w-slider-thumb');
+        for (const thumb of sliderThumbs.values()) {
+            if (thumb.slot === 'from')
+                from = thumb;
+            if (thumb.slot === 'to')
+                to = thumb;
+        }
+        if (!from || !to) {
+            // Not a range slider, nothing to do here.
+            return;
+        }
+        if (!from.invalid && !to.invalid) {
+            // Both are valid, nothing to do here
+            return;
+        }
+    }
+    #onSliderValidity(e) {
+        e.stopPropagation();
+        const didHaveInternalError = this._hasInternalError || this.invalid;
+        const triggeredThumb = e.target;
+        this._hasInternalError = Boolean(e.detail.invalid) || this.invalid;
+        this._invalidMessage = e.detail.invalid;
+        if (didHaveInternalError === true && this._hasInternalError === false) {
+            const sliderThumbs = this.querySelectorAll('w-slider-thumb');
+            for (const thumb of sliderThumbs.values()) {
+                if (thumb !== triggeredThumb) {
+                    thumb.updateFieldAfterValidation();
                 }
             }
-        `;import{css as Ge}from"lit";var ue=Ge`
-  .w-slider {
-    position: relative;
-    border: none;
-    padding: 0;
-    margin: 0;
-    display: grid;
-    width: 100%;
-    grid-template-areas:
-      "label"
-      "description"
-      "slider"
-      "error";
-    grid-template-columns: 1fr;
-
-    --w-slider-track-background: var(--w-s-color-background-disabled-subtle);
-    --w-slider-track-active-background: var(--w-s-color-background-primary);
-    --w-slider-track-height: 4px;
-    --w-slider-track-active-height: 6px;
-    --w-slider-thumb-background: var(--w-s-color-background-primary);
-    --w-slider-thumb-background-hover: var(
-      --w-s-color-background-primary-hover
-    );
-    --w-slider-thumb-size: 28px;
-    --w-slider-thumb-offset: calc(var(--w-slider-thumb-size) / 2);
-    --w-slider-marker-color: var(--w-s-color-border);
-
-
-    /* Vertical position of range and markers */
-    --_range-top: calc(
-      var(--w-slider-thumb-size) / 2 +
-        calc(
-          var(--w-slider-track-active-height) - calc(
-              var(--w-slider-track-height) / 2
-            ) + 1px
-        )
-    );
-  }
-
-  .w-slider__label {
-    grid-area: label;
-    font-size: var(--w-font-size-s);
-    line-height: var(--w-line-height-s);
-    font-weight: bold;
-    padding-bottom: 8px;
-    color: var(--w-s-color-text);
-  }
-
-  .w-slider__description {
-    grid-area: description;
-  }
-
-  .w-slider__range {
-    align-self: center;
-    background: var(--w-slider-track-background);
-    border-radius: 4px;
-    height: var(--w-slider-track-active-height);
-    position: absolute;
-    /* For range sliders to avoid overlapping the slider thumbs we transform them to
-    be visually to the left and right of their respective input[type="range"]. This
-    padding is here so the active-range element is the same width as the input fields. */
-    padding-inline-start: var(--active-range-inline-start-padding, 0);
-    padding-inline-end: var(--active-range-inline-end-padding, 0);
-    top: var(--_range-top);
-    left: 0;
-    right: 0;
-    grid-area: slider;
-  }
-
-  .w-slider__active-range {
-    box-sizing: content-box;
-    background: var(--w-slider-track-active-background);
-    height: var(--w-slider-track-active-height);
-
-    border-start-start-radius: var(--active-range-border-radius, 0);
-    border-end-start-radius: var(--active-range-border-radius, 0);
-
-    /* takes over-under into the calculation if set, as this makes the ranges longer in reality */
-    --max-with-offset: calc(var(--max) + var(--over-under-offset, 0));
-
-    /* calculate the offset for the "from" thumb in percentage to move the range visualisation from the left edge, using max() to avoid going off screen */
-    --offset-percentage: calc(calc(var(--from) - var(--min)) / calc(var(--max-with-offset) - var(--min)) * 100);
-    margin-left: calc(max(var(--offset-percentage) * 1%, 0px) - 1px);
-
-    /* calculate the width of the selected range in percentage, clamped between min/max */
-    --value-range: calc(var(--max-with-offset) - var(--min));
-    --range-span-percentage: calc(calc(min(var(--to), var(--max-with-offset)) - max(var(--min), var(--from))) / var(--value-range) * 100 );
-    width: calc(var(--range-span-percentage) * 1% + 1px);
-
-
-    z-index: 1;
-  }
-
-  .w-slider__markers {
-    --_marker-height: 7px;
-    --_marker-width: 1px;
-
-    align-self: center;
-
-    /* Creates a linear gradient with --_marker-width wide markers
-       followed by enough transparent that we can repeat the gradient
-       along the X axis and have markers visible where we want them. */
-    background: linear-gradient(
-        to right,
-        var(--w-slider-marker-color) var(--_marker-width),
-        rgba(0, 0, 0, 0) 1px calc(100% - 1px),
-        var(--w-slider-marker-color) 100%
-      )
-      repeat-x;
-    --_step-width-as-percent: calc(var(--markers) / var(--_value-range) * 100);
-    background-size: calc(var(--_step-width-as-percent) * 1%)
-      var(--_marker-height);
-
-    background-position: bottom 0 left 8px right 8px;
-    position: absolute;
-    top: calc(var(--_range-top) + 2px);
-    left: 1px;
-    right: 1px;
-    grid-area: slider;
-    height: var(--_marker-height);
-    margin-inline: var(--w-slider-thumb-offset);
-  }
-
-  .w-slider__error {
-    grid-area: error;
-    padding-top: 8px;
-    font-size: var(--w-font-size-xs);
-    line-height: var(--w-line-height-xs);
-    color: var(--w-s-color-text-negative);
-  }
-
-  .w-slider__help-text {
-    grid-area: error;
-    padding-top: 8px;
-    font-size: var(--w-font-size-xs);
-    line-height: var(--w-line-height-xs);
-  }
-
-  slot::slotted(w-slider-thumb) {
-    position: static;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    grid-area: slider;
-  }
-`;var c,_,ve,fe,we,$,R,d=class extends he{constructor(){super();Z(this,c);this.disabled=!1;this.allowValuesOutsideRange=!1;this.error="";this.helpText="";this.invalid=!1;this.required=!1;this.suffix="";this._invalidMessage="";this._hasInternalError=!1;se(le,ce,de,ne,be)}get edgeMin(){return this.allowValuesOutsideRange?(Number(this.min)-1).toString():this.min}get edgeMax(){return this.allowValuesOutsideRange?(Number(this.max)+1).toString():this.max}async connectedCallback(){super.connectedCallback(),await this.updateComplete,this.step&&this.style.setProperty("--step",String(this.step)),this.style.setProperty("--min",this.edgeMin),this.style.setProperty("--max",this.max),this.markers&&this.style.setProperty("--markers",String(this.markers)),this.allowValuesOutsideRange&&this.style.setProperty("--over-under-offset","1"),p(this,c,_).call(this)}updated(r){(r.has("disabled")||r.has("invalid")||r.has("required")||r.has("min")||r.has("step")||r.has("max")||r.has("suffix")||r.has("formatter")||r.has("_invalidMessage")||r.has("_hasInternalError"))&&p(this,c,_).call(this)}get componentHasError(){return this.invalid||this._hasInternalError}get errorText(){return this.componentHasError?this.error||this._invalidMessage:""}render(){return z`
+        }
+    }
+    #getEdgeValue(boundary, input) {
+        if (input.value === undefined || input.value === null) {
+            input.value = this.allowValuesOutsideRange ? '' : boundary;
+        }
+        // Use boundary for CSS positioning when value is empty
+        return input.value === '' ? boundary : input.value;
+    }
+    /**
+     * We use CSS variables to fill the active track with a background color.
+     */
+    #updateActiveTrack(input) {
+        const slotName = input.slot;
+        if (!slotName) {
+            this.style.setProperty('--from', '0');
+        }
+        if (slotName === 'from') {
+            this.style.setProperty('--from', this.#getEdgeValue(this.edgeMin, input));
+        }
+        if (!slotName || slotName === 'to') {
+            this.style.setProperty('--to', this.#getEdgeValue(this.edgeMax, input));
+        }
+    }
+    get componentHasError() {
+        return this.invalid || this._hasInternalError;
+    }
+    get errorText() {
+        if (!this.componentHasError) {
+            return '';
+        }
+        return this.error || this._invalidMessage;
+    }
+    render() {
+        return html `
       <fieldset
         id="fieldset"
         class="w-slider"
-        @input="${p(this,c,ve)}"
-        @slidervalidity="${p(this,c,we)}"
-        aria-invalid="${this.errorText?"true":S}"
+        @input="${this.#onInput}"
+        @slidervalidity="${this.#onSliderValidity}"
+        aria-invalid="${this.errorText ? 'true' : nothing}"
       >
-        ${this.label?z`<legend class="w-slider__label">
+        ${this.label
+            ? html `<legend class="w-slider__label">
               <slot id="label" name="label">${this.label}</slot>
-            </legend>`:S}
+            </legend>`
+            : nothing}
         <slot class="w-slider__description" name="description"></slot>
-        ${this.markers?z`<div class="w-slider__markers"></div>`:S}
+        ${this.markers ? html `<div class="w-slider__markers"></div>` : nothing}
         <div class="w-slider__range">
           <div class="w-slider__active-range"></div>
         </div>
         <slot
           class="w-slider__slider"
-          @slotchange=${p(this,c,_)}
+          @slotchange=${this.#syncSliderThumbs}
         ></slot>
         <slot
           class="w-slider__slider"
           name="from"
-          @slotchange=${p(this,c,_)}
+          @slotchange=${this.#syncSliderThumbs}
         ></slot>
         <slot
           class="w-slider__slider"
           name="to"
-          @slotchange=${p(this,c,_)}
+          @slotchange=${this.#syncSliderThumbs}
         ></slot>
-        ${this.errorText?z`<p class="w-slider__error" aria-describes="fieldset">
+        ${this.errorText
+            ? html `<p class="w-slider__error" aria-describes="fieldset">
               ${this.errorText}
-            </p>`:this.helpText?z`<p class="w-slider__help-text" aria-describes="fieldset">
+            </p>`
+            : this.helpText
+                ? html `<p class="w-slider__help-text" aria-describes="fieldset">
                 ${this.helpText}
-              </p>`:S}
+              </p>`
+                : nothing}
       </fieldset>
-    `}};c=new WeakSet,_=function(){let r=this.querySelectorAll("w-slider-thumb"),t=!1;for(let i of r.values())i.min=this.edgeMin,i.max=this.edgeMax,i.step=this.step,i.suffix=this.suffix,i.required=this.required,i.formatter=this.formatter,i.allowValuesOutsideRange=this.allowValuesOutsideRange,i.ariaLabel||(i.slot||(i.ariaLabel=this.label),i.slot==="from"&&(i.ariaLabel=`${this.label} min`),i.slot==="to"&&(i.ariaLabel=`${this.label} max`)),(i.slot==="from"||i.slot==="to")&&(t=!0),i.disabled=this.disabled,i.invalid=this.invalid||this._hasInternalError,p(this,c,R).call(this,i);let a=this.shadowRoot.querySelector("fieldset");t?(a.style.setProperty("--active-range-inline-start-padding","var(--w-slider-thumb-size)"),a.style.setProperty("--active-range-inline-end-padding","var(--w-slider-thumb-size)")):a.style.setProperty("--active-range-border-radius","4px")},ve=function(r){let t=r.target;p(this,c,R).call(this,t),t.slot&&p(this,c,fe).call(this)},fe=function(){let r,t,a=this.querySelectorAll("w-slider-thumb");for(let i of a.values())i.slot==="from"&&(r=i),i.slot==="to"&&(t=i);!r||!t||!r.invalid&&t.invalid},we=function(r){r.stopPropagation();let t=this._hasInternalError||this.invalid,a=r.target;if(this._hasInternalError=!!r.detail.invalid||this.invalid,this._invalidMessage=r.detail.invalid,t===!0&&this._hasInternalError===!1){let i=this.querySelectorAll("w-slider-thumb");for(let s of i.values())s!==a&&s.updateFieldAfterValidation()}},$=function(r,t){return(t.value===void 0||t.value===null)&&(t.value=this.allowValuesOutsideRange?"":r),t.value===""?r:t.value},R=function(r){let t=r.slot;t||this.style.setProperty("--from","0"),t==="from"&&this.style.setProperty("--from",p(this,c,$).call(this,this.edgeMin,r)),(!t||t==="to")&&this.style.setProperty("--to",p(this,c,$).call(this,this.edgeMax,r))},d.shadowRootOptions={...he.shadowRootOptions,delegatesFocus:!0},d.styles=[pe,ue],b([u({reflect:!0})],d.prototype,"label",2),b([u({type:Boolean,reflect:!0})],d.prototype,"disabled",2),b([u({type:Boolean,attribute:"allow-values-outside-range"})],d.prototype,"allowValuesOutsideRange",2),b([u({type:String,reflect:!0})],d.prototype,"error",2),b([u({type:String,reflect:!0,attribute:"help-text"})],d.prototype,"helpText",2),b([u({type:Boolean,reflect:!0})],d.prototype,"invalid",2),b([u({type:Boolean,reflect:!0})],d.prototype,"required",2),b([u({reflect:!0})],d.prototype,"min",2),b([u({reflect:!0})],d.prototype,"max",2),b([u({type:Number,reflect:!0})],d.prototype,"markers",2),b([u({type:Number,reflect:!0})],d.prototype,"step",2),b([u({reflect:!0})],d.prototype,"suffix",2),b([u({attribute:!1})],d.prototype,"formatter",2),b([me()],d.prototype,"_invalidMessage",2),b([me()],d.prototype,"_hasInternalError",2);customElements.get("w-slider")||customElements.define("w-slider",d);export{d as WarpSlider};
-//# sourceMappingURL=slider.js.map
+    `;
+    }
+}
+__decorate([
+    property({ reflect: true })
+], WarpSlider.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], WarpSlider.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'allow-values-outside-range' })
+], WarpSlider.prototype, "allowValuesOutsideRange", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], WarpSlider.prototype, "error", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'help-text' })
+], WarpSlider.prototype, "helpText", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], WarpSlider.prototype, "invalid", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], WarpSlider.prototype, "required", void 0);
+__decorate([
+    property({ reflect: true })
+], WarpSlider.prototype, "min", void 0);
+__decorate([
+    property({ reflect: true })
+], WarpSlider.prototype, "max", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], WarpSlider.prototype, "markers", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], WarpSlider.prototype, "step", void 0);
+__decorate([
+    property({ reflect: true })
+], WarpSlider.prototype, "suffix", void 0);
+__decorate([
+    property({ attribute: false })
+], WarpSlider.prototype, "formatter", void 0);
+__decorate([
+    state()
+], WarpSlider.prototype, "_invalidMessage", void 0);
+__decorate([
+    state()
+], WarpSlider.prototype, "_hasInternalError", void 0);
+if (!customElements.get('w-slider')) {
+    customElements.define('w-slider', WarpSlider);
+}
+export { WarpSlider };