@maggioli-design-system/mds-input-select 2.0.4 → 2.0.5

package/src/fixtures/iconsauce.json

@@ -34,6 +34,7 @@
     "mgg/assignments-rejected",
     "mgg/assignments-sorted",
     "mgg/auto-awesome-motion",
+    "mgg/back-to-document",
     "mgg/balance",
     "mgg/bill",
     "mgg/box-multiple",
@@ -74,6 +75,7 @@
     "mgg/document-rename",
     "mgg/download-csv",
     "mgg/download-json",
+    "mgg/edit-article",
     "mgg/electronic-document",
     "mgg/email-assigned",
     "mgg/email-open-blocked",
@@ -220,6 +222,7 @@
     "mgg/settings-attachment",
     "mgg/sign-shop",
     "mgg/square-viewfinder",
+    "mgg/stacked-documents",
     "mgg/stamp",
     "mgg/status-progress-a-quarter",
     "mgg/status-progress-complete",
@@ -229,6 +232,8 @@
     "mgg/subtractive-permission",
     "mgg/tea-light",
     "mgg/terminal",
+    "mgg/to-single-document",
+    "mgg/to-stacked-documents",
     "mgg/todo-action-businessman-view",
     "mgg/todo-action-certificate",
     "mgg/todo-action-contract",

package/src/type/language.ts

@@ -1,4 +1,8 @@
 export type LanguageType =
+  | `${Lowercase<string>}${Lowercase<string>}`
+  | `${Lowercase<string>}${Lowercase<string>}${Lowercase<string>}`
+
+export type PrefLanguageType =
   | 'auto'
   | `${Lowercase<string>}${Lowercase<string>}`
   | `${Lowercase<string>}${Lowercase<string>}${Lowercase<string>}`

package/www/build/mds-input-select.esm.js

@@ -1 +1 @@
-import{p as e,b as a}from"./p-babc558f.js";export{s as setNonce}from"./p-babc558f.js";import{g as t}from"./p-e1255160.js";(()=>{const a=import.meta.url,s={};return""!==a&&(s.resourcesUrl=new URL(".",a).href),e(s)})().then((async e=>(await t(),a([["p-b7cb51b4",[[65,"mds-input-select",{autocomplete:[513],autoFocus:[516,"auto-focus"],placeholder:[513],name:[513],disabled:[516],required:[516],multiple:[516],size:[514],value:[520],variant:[513],selected:[32],hasFocus:[32]},null,{value:["valueChanged"]}]]]],e))));
+import{p as e,b as a}from"./p-babc558f.js";export{s as setNonce}from"./p-babc558f.js";import{g as t}from"./p-e1255160.js";(()=>{const a=import.meta.url,s={};return""!==a&&(s.resourcesUrl=new URL(".",a).href),e(s)})().then((async e=>(await t(),a([["p-e743c791",[[65,"mds-input-select",{autocomplete:[513],autoFocus:[516,"auto-focus"],placeholder:[513],name:[513],disabled:[516],required:[516],multiple:[516],size:[514],value:[520],variant:[513],selected:[32],hasFocus:[32]},null,{value:["valueChanged"]}]]]],e))));

package/www/build/p-750f66cc.system.js

@@ -1 +1 @@
-var __awaiter=this&&this.__awaiter||function(e,t,n,r){function i(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,u){function a(e){try{o(r.next(e))}catch(e){u(e)}}function c(e){try{o(r["throw"](e))}catch(e){u(e)}}function o(e){e.done?n(e.value):i(e.value).then(a,c)}o((r=r.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(u[0]&1)throw u[1];return u[1]},trys:[],ops:[]},r,i,u,a;return a={next:c(0),throw:c(1),return:c(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function c(e){return function(t){return o([e,t])}}function o(c){if(r)throw new TypeError("Generator is already executing.");while(a&&(a=0,c[0]&&(n=0)),n)try{if(r=1,i&&(u=c[0]&2?i["return"]:c[0]?i["throw"]||((u=i["return"])&&u.call(i),0):i.next)&&!(u=u.call(i,c[1])).done)return u;if(i=0,u)c=[c[0]&2,u.value];switch(c[0]){case 0:case 1:u=c;break;case 4:n.label++;return{value:c[1],done:false};case 5:n.label++;i=c[1];c=[0];continue;case 7:c=n.ops.pop();n.trys.pop();continue;default:if(!(u=n.trys,u=u.length>0&&u[u.length-1])&&(c[0]===6||c[0]===2)){n=0;continue}if(c[0]===3&&(!u||c[1]>u[0]&&c[1]<u[3])){n.label=c[1];break}if(c[0]===6&&n.label<u[1]){n.label=u[1];u=c;break}if(u&&n.label<u[2]){n.label=u[2];n.ops.push(c);break}if(u[2])n.ops.pop();n.trys.pop();continue}c=t.call(e,n)}catch(e){c=[6,e];i=0}finally{r=u=0}if(c[0]&5)throw c[1];return{value:c[0]?c[1]:void 0,done:true}}};System.register(["./p-5a0746e7.system.js","./p-56ba5cbf.system.js"],(function(e,t){"use strict";var n,r,i;return{setters:[function(t){n=t.p;r=t.b;e("setNonce",t.s)},function(e){i=e.g}],execute:function(){var e=this;var u=function(){var e=t.meta.url;var r={};if(e!==""){r.resourcesUrl=new URL(".",e).href}return n(r)};u().then((function(t){return __awaiter(e,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:return[4,i()];case 1:e.sent();return[2,r([["p-ad1eb960.system",[[65,"mds-input-select",{autocomplete:[513],autoFocus:[516,"auto-focus"],placeholder:[513],name:[513],disabled:[516],required:[516],multiple:[516],size:[514],value:[520],variant:[513],selected:[32],hasFocus:[32]},null,{value:["valueChanged"]}]]]],t)]}}))}))}))}}}));
+var __awaiter=this&&this.__awaiter||function(e,t,n,r){function i(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,u){function a(e){try{o(r.next(e))}catch(e){u(e)}}function c(e){try{o(r["throw"](e))}catch(e){u(e)}}function o(e){e.done?n(e.value):i(e.value).then(a,c)}o((r=r.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(u[0]&1)throw u[1];return u[1]},trys:[],ops:[]},r,i,u,a;return a={next:c(0),throw:c(1),return:c(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function c(e){return function(t){return o([e,t])}}function o(c){if(r)throw new TypeError("Generator is already executing.");while(a&&(a=0,c[0]&&(n=0)),n)try{if(r=1,i&&(u=c[0]&2?i["return"]:c[0]?i["throw"]||((u=i["return"])&&u.call(i),0):i.next)&&!(u=u.call(i,c[1])).done)return u;if(i=0,u)c=[c[0]&2,u.value];switch(c[0]){case 0:case 1:u=c;break;case 4:n.label++;return{value:c[1],done:false};case 5:n.label++;i=c[1];c=[0];continue;case 7:c=n.ops.pop();n.trys.pop();continue;default:if(!(u=n.trys,u=u.length>0&&u[u.length-1])&&(c[0]===6||c[0]===2)){n=0;continue}if(c[0]===3&&(!u||c[1]>u[0]&&c[1]<u[3])){n.label=c[1];break}if(c[0]===6&&n.label<u[1]){n.label=u[1];u=c;break}if(u&&n.label<u[2]){n.label=u[2];n.ops.push(c);break}if(u[2])n.ops.pop();n.trys.pop();continue}c=t.call(e,n)}catch(e){c=[6,e];i=0}finally{r=u=0}if(c[0]&5)throw c[1];return{value:c[0]?c[1]:void 0,done:true}}};System.register(["./p-5a0746e7.system.js","./p-56ba5cbf.system.js"],(function(e,t){"use strict";var n,r,i;return{setters:[function(t){n=t.p;r=t.b;e("setNonce",t.s)},function(e){i=e.g}],execute:function(){var e=this;var u=function(){var e=t.meta.url;var r={};if(e!==""){r.resourcesUrl=new URL(".",e).href}return n(r)};u().then((function(t){return __awaiter(e,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:return[4,i()];case 1:e.sent();return[2,r([["p-7ab40018.system",[[65,"mds-input-select",{autocomplete:[513],autoFocus:[516,"auto-focus"],placeholder:[513],name:[513],disabled:[516],required:[516],multiple:[516],size:[514],value:[520],variant:[513],selected:[32],hasFocus:[32]},null,{value:["valueChanged"]}]]]],t)]}}))}))}))}}}));

package/www/build/{p-ad1eb960.system.entry.js → p-7ab40018.system.entry.js}

@@ -1 +1 @@
-System.register(["./p-5a0746e7.system.js"],(function(n){"use strict";var t,r,o,a,e;return{setters:[function(n){t=n.r;r=n.c;o=n.h;a=n.H;e=n.g}],execute:function(){function i(n){var t,r,o="";if("string"==typeof n||"number"==typeof n)o+=n;else if("object"==typeof n)if(Array.isArray(n)){var a=n.length;for(t=0;t<a;t++)n[t]&&(r=i(n[t]))&&(o&&(o+=" "),o+=r)}else for(r in n)n[r]&&(o&&(o+=" "),o+=r);return o}function s(){for(var n,t,r=0,o="",a=arguments.length;r<a;r++)(n=arguments[r])&&(t=i(n))&&(o&&(o+=" "),o+=t);return o}var l='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6l1.41-1.41z"/></svg>';var c='@tailwind components;\n@tailwind utilities;\n\n\n\n*, ::before, ::after{\n\n  --tw-border-spacing-x: 0;\n\n  --tw-border-spacing-y: 0;\n\n  --tw-translate-x: 0;\n\n  --tw-translate-y: 0;\n\n  --tw-rotate: 0;\n\n  --tw-skew-x: 0;\n\n  --tw-skew-y: 0;\n\n  --tw-scale-x: 1;\n\n  --tw-scale-y: 1;\n\n  --tw-pan-x:  ;\n\n  --tw-pan-y:  ;\n\n  --tw-pinch-zoom:  ;\n\n  --tw-scroll-snap-strictness: proximity;\n\n  --tw-gradient-from-position:  ;\n\n  --tw-gradient-via-position:  ;\n\n  --tw-gradient-to-position:  ;\n\n  --tw-ordinal:  ;\n\n  --tw-slashed-zero:  ;\n\n  --tw-numeric-figure:  ;\n\n  --tw-numeric-spacing:  ;\n\n  --tw-numeric-fraction:  ;\n\n  --tw-ring-inset:  ;\n\n  --tw-ring-offset-width: 0px;\n\n  --tw-ring-offset-color: #fff;\n\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n\n  --tw-ring-offset-shadow: 0 0 #0000;\n\n  --tw-ring-shadow: 0 0 #0000;\n\n  --tw-shadow: 0 0 #0000;\n\n  --tw-shadow-colored: 0 0 #0000;\n\n  --tw-blur:  ;\n\n  --tw-brightness:  ;\n\n  --tw-contrast:  ;\n\n  --tw-grayscale:  ;\n\n  --tw-hue-rotate:  ;\n\n  --tw-invert:  ;\n\n  --tw-saturate:  ;\n\n  --tw-sepia:  ;\n\n  --tw-drop-shadow:  ;\n\n  --tw-backdrop-blur:  ;\n\n  --tw-backdrop-brightness:  ;\n\n  --tw-backdrop-contrast:  ;\n\n  --tw-backdrop-grayscale:  ;\n\n  --tw-backdrop-hue-rotate:  ;\n\n  --tw-backdrop-invert:  ;\n\n  --tw-backdrop-opacity:  ;\n\n  --tw-backdrop-saturate:  ;\n\n  --tw-backdrop-sepia:  ;\n\n  --tw-contain-size:  ;\n\n  --tw-contain-layout:  ;\n\n  --tw-contain-paint:  ;\n\n  --tw-contain-style:  ;\n}\n\n\n\n::-webkit-backdrop{\n\n  --tw-border-spacing-x: 0;\n\n  --tw-border-spacing-y: 0;\n\n  --tw-translate-x: 0;\n\n  --tw-translate-y: 0;\n\n  --tw-rotate: 0;\n\n  --tw-skew-x: 0;\n\n  --tw-skew-y: 0;\n\n  --tw-scale-x: 1;\n\n  --tw-scale-y: 1;\n\n  --tw-pan-x:  ;\n\n  --tw-pan-y:  ;\n\n  --tw-pinch-zoom:  ;\n\n  --tw-scroll-snap-strictness: proximity;\n\n  --tw-gradient-from-position:  ;\n\n  --tw-gradient-via-position:  ;\n\n  --tw-gradient-to-position:  ;\n\n  --tw-ordinal:  ;\n\n  --tw-slashed-zero:  ;\n\n  --tw-numeric-figure:  ;\n\n  --tw-numeric-spacing:  ;\n\n  --tw-numeric-fraction:  ;\n\n  --tw-ring-inset:  ;\n\n  --tw-ring-offset-width: 0px;\n\n  --tw-ring-offset-color: #fff;\n\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n\n  --tw-ring-offset-shadow: 0 0 #0000;\n\n  --tw-ring-shadow: 0 0 #0000;\n\n  --tw-shadow: 0 0 #0000;\n\n  --tw-shadow-colored: 0 0 #0000;\n\n  --tw-blur:  ;\n\n  --tw-brightness:  ;\n\n  --tw-contrast:  ;\n\n  --tw-grayscale:  ;\n\n  --tw-hue-rotate:  ;\n\n  --tw-invert:  ;\n\n  --tw-saturate:  ;\n\n  --tw-sepia:  ;\n\n  --tw-drop-shadow:  ;\n\n  --tw-backdrop-blur:  ;\n\n  --tw-backdrop-brightness:  ;\n\n  --tw-backdrop-contrast:  ;\n\n  --tw-backdrop-grayscale:  ;\n\n  --tw-backdrop-hue-rotate:  ;\n\n  --tw-backdrop-invert:  ;\n\n  --tw-backdrop-opacity:  ;\n\n  --tw-backdrop-saturate:  ;\n\n  --tw-backdrop-sepia:  ;\n\n  --tw-contain-size:  ;\n\n  --tw-contain-layout:  ;\n\n  --tw-contain-paint:  ;\n\n  --tw-contain-style:  ;\n}\n\n\n\n::-ms-backdrop{\n\n  --tw-border-spacing-x: 0;\n\n  --tw-border-spacing-y: 0;\n\n  --tw-translate-x: 0;\n\n  --tw-translate-y: 0;\n\n  --tw-rotate: 0;\n\n  --tw-skew-x: 0;\n\n  --tw-skew-y: 0;\n\n  --tw-scale-x: 1;\n\n  --tw-scale-y: 1;\n\n  --tw-pan-x:  ;\n\n  --tw-pan-y:  ;\n\n  --tw-pinch-zoom:  ;\n\n  --tw-scroll-snap-strictness: proximity;\n\n  --tw-gradient-from-position:  ;\n\n  --tw-gradient-via-position:  ;\n\n  --tw-gradient-to-position:  ;\n\n  --tw-ordinal:  ;\n\n  --tw-slashed-zero:  ;\n\n  --tw-numeric-figure:  ;\n\n  --tw-numeric-spacing:  ;\n\n  --tw-numeric-fraction:  ;\n\n  --tw-ring-inset:  ;\n\n  --tw-ring-offset-width: 0px;\n\n  --tw-ring-offset-color: #fff;\n\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n\n  --tw-ring-offset-shadow: 0 0 #0000;\n\n  --tw-ring-shadow: 0 0 #0000;\n\n  --tw-shadow: 0 0 #0000;\n\n  --tw-shadow-colored: 0 0 #0000;\n\n  --tw-blur:  ;\n\n  --tw-brightness:  ;\n\n  --tw-contrast:  ;\n\n  --tw-grayscale:  ;\n\n  --tw-hue-rotate:  ;\n\n  --tw-invert:  ;\n\n  --tw-saturate:  ;\n\n  --tw-sepia:  ;\n\n  --tw-drop-shadow:  ;\n\n  --tw-backdrop-blur:  ;\n\n  --tw-backdrop-brightness:  ;\n\n  --tw-backdrop-contrast:  ;\n\n  --tw-backdrop-grayscale:  ;\n\n  --tw-backdrop-hue-rotate:  ;\n\n  --tw-backdrop-invert:  ;\n\n  --tw-backdrop-opacity:  ;\n\n  --tw-backdrop-saturate:  ;\n\n  --tw-backdrop-sepia:  ;\n\n  --tw-contain-size:  ;\n\n  --tw-contain-layout:  ;\n\n  --tw-contain-paint:  ;\n\n  --tw-contain-style:  ;\n}\n\n\n\n::backdrop{\n\n  --tw-border-spacing-x: 0;\n\n  --tw-border-spacing-y: 0;\n\n  --tw-translate-x: 0;\n\n  --tw-translate-y: 0;\n\n  --tw-rotate: 0;\n\n  --tw-skew-x: 0;\n\n  --tw-skew-y: 0;\n\n  --tw-scale-x: 1;\n\n  --tw-scale-y: 1;\n\n  --tw-pan-x:  ;\n\n  --tw-pan-y:  ;\n\n  --tw-pinch-zoom:  ;\n\n  --tw-scroll-snap-strictness: proximity;\n\n  --tw-gradient-from-position:  ;\n\n  --tw-gradient-via-position:  ;\n\n  --tw-gradient-to-position:  ;\n\n  --tw-ordinal:  ;\n\n  --tw-slashed-zero:  ;\n\n  --tw-numeric-figure:  ;\n\n  --tw-numeric-spacing:  ;\n\n  --tw-numeric-fraction:  ;\n\n  --tw-ring-inset:  ;\n\n  --tw-ring-offset-width: 0px;\n\n  --tw-ring-offset-color: #fff;\n\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n\n  --tw-ring-offset-shadow: 0 0 #0000;\n\n  --tw-ring-shadow: 0 0 #0000;\n\n  --tw-shadow: 0 0 #0000;\n\n  --tw-shadow-colored: 0 0 #0000;\n\n  --tw-blur:  ;\n\n  --tw-brightness:  ;\n\n  --tw-contrast:  ;\n\n  --tw-grayscale:  ;\n\n  --tw-hue-rotate:  ;\n\n  --tw-invert:  ;\n\n  --tw-saturate:  ;\n\n  --tw-sepia:  ;\n\n  --tw-drop-shadow:  ;\n\n  --tw-backdrop-blur:  ;\n\n  --tw-backdrop-brightness:  ;\n\n  --tw-backdrop-contrast:  ;\n\n  --tw-backdrop-grayscale:  ;\n\n  --tw-backdrop-hue-rotate:  ;\n\n  --tw-backdrop-invert:  ;\n\n  --tw-backdrop-opacity:  ;\n\n  --tw-backdrop-saturate:  ;\n\n  --tw-backdrop-sepia:  ;\n\n  --tw-contain-size:  ;\n\n  --tw-contain-layout:  ;\n\n  --tw-contain-paint:  ;\n\n  --tw-contain-style:  ;\n}\n.svg{\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n.svg svg{\n\n  aspect-ratio: 1/1;\n\n  height: 100%;\n\n  width: 100%;\n}\n@tailwind utilities;\n\n\n:host{\n\n  min-height: 1.5rem;\n\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n\n  --mds-input-select-variant-color: var(--tone-neutral-01);\n  --mds-input-select-ring: 0 0 0 1px rgb(var(--mds-input-select-variant-color) / 0.1);\n  --mds-input-select-shadow: 0 1px 3px 0 rgb(var(--mds-input-select-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-select-variant-color) / 0.06);\n  --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n  --mds-input-select-arrow-icon-blur-background-color: transparent;\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n  --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--mds-input-select-variant-color));\n\n  color: rgb(var(--tone-neutral-02));\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          -ms-user-select: none;\n          user-select: none;\n}\n\n:host( [required]:not([required="false"]):focus-within ) .icon{\n\n  --tw-translate-y: 0.375rem;\n\n  --tw-translate-x: 0.375rem;\n\n  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n:host( :hover ),\n:host( :focus-within ) {\n\n  --mds-input-select-variant-color: var(--brand-maggioli-03);\n  --mds-input-select-ring: 0 0 0 3px rgb(var(--mds-input-select-variant-color) / 1);\n  --mds-input-select-shadow: 0 4px 6px -1px rgb(var(--mds-input-select-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-select-variant-color) / 0.06);\n  --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-hover-background-color);\n  --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-hover-color);\n}\n\n.input{\n\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n\n  margin: 0rem;\n\n  min-height: 3rem;\n\n  width: 100%;\n\n  border-radius: 0.5rem;\n\n  padding-top: 0.75rem;\n\n  padding-bottom: 0.75rem;\n\n  padding-left: 1rem;\n\n  padding-right: 3rem;\n\n  -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  -webkit-appearance: none;\n\n     -moz-appearance: none;\n\n          appearance: none;\n  background-color: rgb(var(--tone-neutral));\n  border: 0;\n  -webkit-box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n  box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  color: rgb(var(--tone-neutral-05));\n  cursor: pointer;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.input:hover,\n.input:focus{\n\n  outline: 2px solid transparent;\n\n  outline-offset: 2px;\n\n  -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: rgb(var(--tone-neutral-03));\n}\n\n:host([value]:not([value=""])) .input {\n  color: rgb(var(--tone-neutral-03));\n}\n\n.input--mds-input-select-selected {\n  color: rgb(var(--tone-neutral-02));\n}\n\n.input:disabled {\n  background-color: rgb(var(--tone-neutral-09));\n  opacity: 1;\n}\n\n:host([disabled]:not([disabled="false"])) {\n  pointer-events: none;\n}\n\n:host([disabled]:not([disabled="false"])) .input {\n  pointer-events: none;\n}\n\n:host([disabled]:not([disabled="false"])) .icon{\n\n  --tw-translate-y: 0.5rem;\n\n  --tw-translate-x: 0.625rem;\n\n  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n\n  fill: rgb(var(--tone-neutral-06));\n}\n\n.icon-container{\n\n  right: 1rem;\n\n  height: 3rem;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  color: inherit;\n  display: -ms-flexbox;\n  display: flex;\n  pointer-events: none;\n  position: absolute;\n}\n\n.icon{\n\n  border-radius: 9999px;\n\n  -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  -webkit-transition-duration: 200ms;\n\n  transition-duration: 200ms;\n\n  background-color: var(--mds-input-select-arrow-icon-background-color, rgb(var(--brand-maggioli-09)));\n  fill: var(--mds-input-select-arrow-icon-color, rgb(var(--brand-maggioli-04)));\n}\n\n.option-container {\n  display: none;\n}\n\n@container (max-width: 210px) {\n  :host .tip__content,\n  :host(:focus-within) .tip__content {\n    grid-template-columns: 0fr;\n    opacity: 0;\n  }\n\n  :host .tip {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  :host {\n\n    --mds-input-select-background: rgb(var(--brand-maggioli-07));\n  }\n}\n\n@tailwind utilities;\n\n:host {\n\n  --mds-input-select-icon-color: var(--brand-maggioli-03);\n  --mds-input-select-variant-color: 0 0 0;\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--brand-maggioli-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--brand-maggioli-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--brand-maggioli-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--brand-maggioli-04));\n}\n\n:host( :hover ),\n:host( :focus-within ) {\n\n  --mds-input-select-variant-color: var(--brand-maggioli-04);\n}\n\n:host( [variant="info"] ) {\n\n  --mds-input-select-icon-color: var(--status-info-05);\n  --mds-input-select-tip-background: var(--status-info-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-info-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-info-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-info-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-info-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="info"]:hover ),\n:host( [variant="info"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-info-04);\n  --mds-input-select-variant-color: var(--status-info-05);\n}\n\n:host( [variant="success"] ) {\n\n  --mds-input-select-icon-color: var(--status-success-05);\n  --mds-input-select-tip-background: var(--status-success-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-success-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-success-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-success-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-success-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="success"]:hover ),\n:host( [variant="success"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-success-04);\n  --mds-input-select-variant-color: var(--status-success-05);\n}\n\n:host( [variant="warning"] ) {\n\n  --mds-input-select-icon-color: var(--status-warning-05);\n  --mds-input-select-tip-background: var(--status-warning-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-warning-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-warning-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-warning-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-warning-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="warning"]:hover ),\n:host( [variant="warning"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-warning-04);\n  --mds-input-select-variant-color: var(--status-warning-05);\n}\n\n:host( [variant="error"] ) {\n\n  --mds-input-select-icon-color: var(--status-error-05);\n  --mds-input-select-tip-background: var(--status-error-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-error-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-error-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-error-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-error-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="error"]:hover ),\n:host( [variant="error"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-error-04);\n  --mds-input-select-variant-color: var(--status-error-05);\n}\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .input,\n  .input:hover,\n  .input:focus,\n  .icon {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .input,\n    .input:hover,\n    .input:focus,\n    .icon {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n    --mds-input-select-arrow-icon-blur-background-color: rgb(var(--brand-maggioli-05));\n    --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n    --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n    --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));\n    --mds-input-select-arrow-icon-hover-color: rgb(var(--tone-neutral-10));\n  }\n\n  .input {\n    color: rgb(var(--tone-neutral-03));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n      --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n      --mds-input-select-arrow-icon-blur-background-color: rgb(var(--brand-maggioli-05));\n      --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n      --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n      --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));\n      --mds-input-select-arrow-icon-hover-color: rgb(var(--tone-neutral-10));\n    }\n\n    .input {\n      color: rgb(var(--tone-neutral-03));\n    }\n  }\n}\n\n.visible{\n\n  visibility: visible;\n}\n\n.static{\n\n  position: static;\n}\n\n.fixed{\n\n  position: fixed;\n}\n\n.absolute{\n\n  position: absolute;\n}\n\n.border{\n\n  border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n  fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n  fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n  fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n  fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n  fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n  fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n  fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n  fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n  fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n  fill: rgb(var(--tone-neutral-04));\n}\n\n.text-label-amaranth-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n  }\n\n  .input {\n    color: rgb(var(--tone-neutral-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n    }\n\n    .input {\n      color: rgb(var(--tone-neutral-01));\n    }\n  }\n}\n\n\n';var d=c;var w=n("mds_input_select",function(){function n(n){var o=this;t(this,n);this.changeEvent=r(this,"mdsInputSelectChange",7);if(n.$hostElement$["s-ei"]){this.internals=n.$hostElement$["s-ei"]}else{this.internals=n.$hostElement$.attachInternals();n.$hostElement$["s-ei"]=this.internals}this.onInput=function(n){var t=n.target;if(t){o.value=t.value}};this.onBlur=function(){o.hasFocus=false};this.onFocus=function(){o.hasFocus=true};this.emptyOptions=function(){var n;var t=(n=o.host.shadowRoot)===null||n===void 0?void 0:n.querySelector("select");var r=t===null||t===void 0?void 0:t.querySelectorAll("option");if(!r){return}r.forEach((function(n,t){if(!o.placeholder){n.remove()}if(o.placeholder&&t>0){n.remove()}}))};this.onSlotChangeHandler=function(){var n,t,r;var a=(t=(n=o.host.shadowRoot)===null||n===void 0?void 0:n.querySelectorAll("slot")[0])===null||t===void 0?void 0:t.assignedNodes();var e=(r=o.host.shadowRoot)===null||r===void 0?void 0:r.querySelector("select");var i=e===null||e===void 0?void 0:e.querySelectorAll("option");if(!i){return}if(!o.placeholder&&i.length>0){o.emptyOptions()}if(o.placeholder&&i.length>1){o.emptyOptions()}a===null||a===void 0?void 0:a.forEach((function(n){e===null||e===void 0?void 0:e.appendChild(n.cloneNode(true))}));if(o.value){e===null||e===void 0?void 0:e.querySelectorAll("option").forEach((function(n){n.selected=n.value===o.value}))}};this.selected=undefined;this.hasFocus=false;this.autocomplete=undefined;this.autoFocus=undefined;this.placeholder=undefined;this.name=undefined;this.disabled=false;this.required=false;this.multiple=false;this.size=0;this.value="";this.variant=undefined}n.prototype.valueChanged=function(){var n;this.selected=this.value!=="";this.changeEvent.emit({value:this.value});this.internals.setFormValue((n=this.value)!==null&&n!==void 0?n:null)};n.prototype.componentDidLoad=function(){if(this.value){this.selected=true;this.internals.setFormValue(this.value)}};n.prototype.render=function(){return o(a,{key:"ea2542be96ac1e1fb7df7f0ed57341842827fcde"},o("select",{key:"ebd4810a2eb6b85b85feca18037b0419905276e4",class:s("input",this.selected&&"input--selected"),onInput:this.onInput.bind(this),onBlur:this.onBlur,onFocus:this.onFocus,name:this.name,required:this.required,disabled:this.disabled,multiple:this.multiple,size:this.size,part:"select"},this.placeholder&&o("option",{key:"8e071e326a0e46f19931616099d6114ff5453609",value:"",disabled:true,selected:true},this.placeholder)),o("div",{key:"e081b71128730e9c2396e9ff5f4fae5c8f3707fb",class:"icon-container"},o("i",{key:"24c6ff4d6d6dcb1cadfe66666a971e8cef8835b9",class:"svg icon",innerHTML:l})),o("div",{key:"f21d4aeca656dd95081fe37e963e10de42cddc2a",class:"option-container"},o("slot",{key:"5e2d5bce08d8e8b0283c866956873092c6e0f715",onSlotchange:this.onSlotChangeHandler})),o("mds-input-tip",{key:"d4f14b01158d9aef1b3c4c7319d3077a8ad5a154",position:"top",active:this.hasFocus},this.disabled&&o("mds-input-tip-item",{key:"e3a21178db5726df5f91bf9213836f4388baf51e",expanded:true,variant:"disabled"}),this.required&&o("mds-input-tip-item",{key:"614d37e64de08213f58a89d4f9e02508341614f3",expanded:this.hasFocus,variant:this.value===""?"required":"required-success"})))};Object.defineProperty(n,"formAssociated",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(n.prototype,"host",{get:function(){return e(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{value:["valueChanged"]}},enumerable:false,configurable:true});return n}());w.style=d}}}));
+System.register(["./p-5a0746e7.system.js"],(function(n){"use strict";var t,r,o,a,e;return{setters:[function(n){t=n.r;r=n.c;o=n.h;a=n.H;e=n.g}],execute:function(){function i(n){var t,r,o="";if("string"==typeof n||"number"==typeof n)o+=n;else if("object"==typeof n)if(Array.isArray(n)){var a=n.length;for(t=0;t<a;t++)n[t]&&(r=i(n[t]))&&(o&&(o+=" "),o+=r)}else for(r in n)n[r]&&(o&&(o+=" "),o+=r);return o}function s(){for(var n,t,r=0,o="",a=arguments.length;r<a;r++)(n=arguments[r])&&(t=i(n))&&(o&&(o+=" "),o+=t);return o}var l='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6l1.41-1.41z"/></svg>';var c='@tailwind components;\n@tailwind utilities;\n\n\n\n*, ::before, ::after{\n\n  --tw-border-spacing-x: 0;\n\n  --tw-border-spacing-y: 0;\n\n  --tw-translate-x: 0;\n\n  --tw-translate-y: 0;\n\n  --tw-rotate: 0;\n\n  --tw-skew-x: 0;\n\n  --tw-skew-y: 0;\n\n  --tw-scale-x: 1;\n\n  --tw-scale-y: 1;\n\n  --tw-pan-x:  ;\n\n  --tw-pan-y:  ;\n\n  --tw-pinch-zoom:  ;\n\n  --tw-scroll-snap-strictness: proximity;\n\n  --tw-gradient-from-position:  ;\n\n  --tw-gradient-via-position:  ;\n\n  --tw-gradient-to-position:  ;\n\n  --tw-ordinal:  ;\n\n  --tw-slashed-zero:  ;\n\n  --tw-numeric-figure:  ;\n\n  --tw-numeric-spacing:  ;\n\n  --tw-numeric-fraction:  ;\n\n  --tw-ring-inset:  ;\n\n  --tw-ring-offset-width: 0px;\n\n  --tw-ring-offset-color: #fff;\n\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n\n  --tw-ring-offset-shadow: 0 0 #0000;\n\n  --tw-ring-shadow: 0 0 #0000;\n\n  --tw-shadow: 0 0 #0000;\n\n  --tw-shadow-colored: 0 0 #0000;\n\n  --tw-blur:  ;\n\n  --tw-brightness:  ;\n\n  --tw-contrast:  ;\n\n  --tw-grayscale:  ;\n\n  --tw-hue-rotate:  ;\n\n  --tw-invert:  ;\n\n  --tw-saturate:  ;\n\n  --tw-sepia:  ;\n\n  --tw-drop-shadow:  ;\n\n  --tw-backdrop-blur:  ;\n\n  --tw-backdrop-brightness:  ;\n\n  --tw-backdrop-contrast:  ;\n\n  --tw-backdrop-grayscale:  ;\n\n  --tw-backdrop-hue-rotate:  ;\n\n  --tw-backdrop-invert:  ;\n\n  --tw-backdrop-opacity:  ;\n\n  --tw-backdrop-saturate:  ;\n\n  --tw-backdrop-sepia:  ;\n\n  --tw-contain-size:  ;\n\n  --tw-contain-layout:  ;\n\n  --tw-contain-paint:  ;\n\n  --tw-contain-style:  ;\n}\n\n\n\n::-webkit-backdrop{\n\n  --tw-border-spacing-x: 0;\n\n  --tw-border-spacing-y: 0;\n\n  --tw-translate-x: 0;\n\n  --tw-translate-y: 0;\n\n  --tw-rotate: 0;\n\n  --tw-skew-x: 0;\n\n  --tw-skew-y: 0;\n\n  --tw-scale-x: 1;\n\n  --tw-scale-y: 1;\n\n  --tw-pan-x:  ;\n\n  --tw-pan-y:  ;\n\n  --tw-pinch-zoom:  ;\n\n  --tw-scroll-snap-strictness: proximity;\n\n  --tw-gradient-from-position:  ;\n\n  --tw-gradient-via-position:  ;\n\n  --tw-gradient-to-position:  ;\n\n  --tw-ordinal:  ;\n\n  --tw-slashed-zero:  ;\n\n  --tw-numeric-figure:  ;\n\n  --tw-numeric-spacing:  ;\n\n  --tw-numeric-fraction:  ;\n\n  --tw-ring-inset:  ;\n\n  --tw-ring-offset-width: 0px;\n\n  --tw-ring-offset-color: #fff;\n\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n\n  --tw-ring-offset-shadow: 0 0 #0000;\n\n  --tw-ring-shadow: 0 0 #0000;\n\n  --tw-shadow: 0 0 #0000;\n\n  --tw-shadow-colored: 0 0 #0000;\n\n  --tw-blur:  ;\n\n  --tw-brightness:  ;\n\n  --tw-contrast:  ;\n\n  --tw-grayscale:  ;\n\n  --tw-hue-rotate:  ;\n\n  --tw-invert:  ;\n\n  --tw-saturate:  ;\n\n  --tw-sepia:  ;\n\n  --tw-drop-shadow:  ;\n\n  --tw-backdrop-blur:  ;\n\n  --tw-backdrop-brightness:  ;\n\n  --tw-backdrop-contrast:  ;\n\n  --tw-backdrop-grayscale:  ;\n\n  --tw-backdrop-hue-rotate:  ;\n\n  --tw-backdrop-invert:  ;\n\n  --tw-backdrop-opacity:  ;\n\n  --tw-backdrop-saturate:  ;\n\n  --tw-backdrop-sepia:  ;\n\n  --tw-contain-size:  ;\n\n  --tw-contain-layout:  ;\n\n  --tw-contain-paint:  ;\n\n  --tw-contain-style:  ;\n}\n\n\n\n::-ms-backdrop{\n\n  --tw-border-spacing-x: 0;\n\n  --tw-border-spacing-y: 0;\n\n  --tw-translate-x: 0;\n\n  --tw-translate-y: 0;\n\n  --tw-rotate: 0;\n\n  --tw-skew-x: 0;\n\n  --tw-skew-y: 0;\n\n  --tw-scale-x: 1;\n\n  --tw-scale-y: 1;\n\n  --tw-pan-x:  ;\n\n  --tw-pan-y:  ;\n\n  --tw-pinch-zoom:  ;\n\n  --tw-scroll-snap-strictness: proximity;\n\n  --tw-gradient-from-position:  ;\n\n  --tw-gradient-via-position:  ;\n\n  --tw-gradient-to-position:  ;\n\n  --tw-ordinal:  ;\n\n  --tw-slashed-zero:  ;\n\n  --tw-numeric-figure:  ;\n\n  --tw-numeric-spacing:  ;\n\n  --tw-numeric-fraction:  ;\n\n  --tw-ring-inset:  ;\n\n  --tw-ring-offset-width: 0px;\n\n  --tw-ring-offset-color: #fff;\n\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n\n  --tw-ring-offset-shadow: 0 0 #0000;\n\n  --tw-ring-shadow: 0 0 #0000;\n\n  --tw-shadow: 0 0 #0000;\n\n  --tw-shadow-colored: 0 0 #0000;\n\n  --tw-blur:  ;\n\n  --tw-brightness:  ;\n\n  --tw-contrast:  ;\n\n  --tw-grayscale:  ;\n\n  --tw-hue-rotate:  ;\n\n  --tw-invert:  ;\n\n  --tw-saturate:  ;\n\n  --tw-sepia:  ;\n\n  --tw-drop-shadow:  ;\n\n  --tw-backdrop-blur:  ;\n\n  --tw-backdrop-brightness:  ;\n\n  --tw-backdrop-contrast:  ;\n\n  --tw-backdrop-grayscale:  ;\n\n  --tw-backdrop-hue-rotate:  ;\n\n  --tw-backdrop-invert:  ;\n\n  --tw-backdrop-opacity:  ;\n\n  --tw-backdrop-saturate:  ;\n\n  --tw-backdrop-sepia:  ;\n\n  --tw-contain-size:  ;\n\n  --tw-contain-layout:  ;\n\n  --tw-contain-paint:  ;\n\n  --tw-contain-style:  ;\n}\n\n\n\n::backdrop{\n\n  --tw-border-spacing-x: 0;\n\n  --tw-border-spacing-y: 0;\n\n  --tw-translate-x: 0;\n\n  --tw-translate-y: 0;\n\n  --tw-rotate: 0;\n\n  --tw-skew-x: 0;\n\n  --tw-skew-y: 0;\n\n  --tw-scale-x: 1;\n\n  --tw-scale-y: 1;\n\n  --tw-pan-x:  ;\n\n  --tw-pan-y:  ;\n\n  --tw-pinch-zoom:  ;\n\n  --tw-scroll-snap-strictness: proximity;\n\n  --tw-gradient-from-position:  ;\n\n  --tw-gradient-via-position:  ;\n\n  --tw-gradient-to-position:  ;\n\n  --tw-ordinal:  ;\n\n  --tw-slashed-zero:  ;\n\n  --tw-numeric-figure:  ;\n\n  --tw-numeric-spacing:  ;\n\n  --tw-numeric-fraction:  ;\n\n  --tw-ring-inset:  ;\n\n  --tw-ring-offset-width: 0px;\n\n  --tw-ring-offset-color: #fff;\n\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n\n  --tw-ring-offset-shadow: 0 0 #0000;\n\n  --tw-ring-shadow: 0 0 #0000;\n\n  --tw-shadow: 0 0 #0000;\n\n  --tw-shadow-colored: 0 0 #0000;\n\n  --tw-blur:  ;\n\n  --tw-brightness:  ;\n\n  --tw-contrast:  ;\n\n  --tw-grayscale:  ;\n\n  --tw-hue-rotate:  ;\n\n  --tw-invert:  ;\n\n  --tw-saturate:  ;\n\n  --tw-sepia:  ;\n\n  --tw-drop-shadow:  ;\n\n  --tw-backdrop-blur:  ;\n\n  --tw-backdrop-brightness:  ;\n\n  --tw-backdrop-contrast:  ;\n\n  --tw-backdrop-grayscale:  ;\n\n  --tw-backdrop-hue-rotate:  ;\n\n  --tw-backdrop-invert:  ;\n\n  --tw-backdrop-opacity:  ;\n\n  --tw-backdrop-saturate:  ;\n\n  --tw-backdrop-sepia:  ;\n\n  --tw-contain-size:  ;\n\n  --tw-contain-layout:  ;\n\n  --tw-contain-paint:  ;\n\n  --tw-contain-style:  ;\n}\n.svg{\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n.svg svg{\n\n  aspect-ratio: 1/1;\n\n  height: 100%;\n\n  width: 100%;\n}\n@tailwind utilities;\n\n\n:host{\n\n  min-height: 1.5rem;\n\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n\n  --mds-input-select-variant-color: var(--tone-neutral-01);\n  --mds-input-select-ring: 0 0 0 1px rgb(var(--mds-input-select-variant-color) / 0.1);\n  --mds-input-select-shadow: 0 1px 3px 0 rgb(var(--mds-input-select-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-select-variant-color) / 0.06);\n  --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n  --mds-input-select-arrow-icon-blur-background-color: transparent;\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n  --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--mds-input-select-variant-color));\n\n  color: rgb(var(--tone-neutral-02));\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          -ms-user-select: none;\n          user-select: none;\n}\n\n:host( [required]:not([required="false"]):focus-within ) .icon{\n\n  --tw-translate-y: 0.375rem;\n\n  --tw-translate-x: 0.375rem;\n\n  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n:host( :hover ),\n:host( :focus-within ) {\n\n  --mds-input-select-variant-color: var(--brand-maggioli-03);\n  --mds-input-select-ring: 0 0 0 3px rgb(var(--mds-input-select-variant-color) / 1);\n  --mds-input-select-shadow: 0 4px 6px -1px rgb(var(--mds-input-select-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-select-variant-color) / 0.06);\n  --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-hover-background-color);\n  --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-hover-color);\n}\n\n.input{\n\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n\n  margin: 0rem;\n\n  min-height: 3rem;\n\n  width: 100%;\n\n  border-radius: 0.5rem;\n\n  padding-top: 0.75rem;\n\n  padding-bottom: 0.75rem;\n\n  padding-left: 1rem;\n\n  padding-right: 3rem;\n\n  -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  -webkit-appearance: none;\n\n     -moz-appearance: none;\n\n          appearance: none;\n  background-color: rgb(var(--tone-neutral));\n  border: 0;\n  -webkit-box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n  box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  color: rgb(var(--tone-neutral-05));\n  cursor: pointer;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.input:hover,\n.input:focus{\n\n  outline: 2px solid transparent;\n\n  outline-offset: 2px;\n\n  -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: rgb(var(--tone-neutral-03));\n}\n\n:host([value]:not([value=""])) .input {\n  color: rgb(var(--tone-neutral-03));\n}\n\n.input--mds-input-select-selected {\n  color: rgb(var(--tone-neutral-02));\n}\n\n.input:disabled {\n  background-color: rgb(var(--tone-neutral-09));\n  opacity: 1;\n}\n\n:host([disabled]:not([disabled="false"])) {\n  pointer-events: none;\n}\n\n:host([disabled]:not([disabled="false"])) .input {\n  pointer-events: none;\n}\n\n:host([disabled]:not([disabled="false"])) .icon{\n\n  --tw-translate-y: 0.5rem;\n\n  --tw-translate-x: 0.625rem;\n\n  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n\n  fill: rgb(var(--tone-neutral-06));\n}\n\n.icon-container{\n\n  right: 1rem;\n\n  height: 3rem;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  color: inherit;\n  display: -ms-flexbox;\n  display: flex;\n  pointer-events: none;\n  position: absolute;\n}\n\n.icon{\n\n  border-radius: 9999px;\n\n  -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  -webkit-transition-duration: 200ms;\n\n  transition-duration: 200ms;\n\n  background-color: var(--mds-input-select-arrow-icon-background-color, rgb(var(--brand-maggioli-09)));\n  fill: var(--mds-input-select-arrow-icon-color, rgb(var(--brand-maggioli-04)));\n}\n\n.option-container {\n  display: none;\n}\n\n@container (max-width: 210px) {\n  :host .tip__content,\n  :host(:focus-within) .tip__content {\n    grid-template-columns: 0fr;\n    opacity: 0;\n  }\n\n  :host .tip {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  :host {\n\n    --mds-input-select-background: rgb(var(--brand-maggioli-07));\n  }\n}\n\n@tailwind utilities;\n\n:host {\n\n  --mds-input-select-icon-color: var(--brand-maggioli-03);\n  --mds-input-select-variant-color: 0 0 0;\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--brand-maggioli-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--brand-maggioli-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--brand-maggioli-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--brand-maggioli-04));\n}\n\n:host( :hover ),\n:host( :focus-within ) {\n\n  --mds-input-select-variant-color: var(--brand-maggioli-04);\n}\n\n:host( [variant="info"] ) {\n\n  --mds-input-select-icon-color: var(--status-info-05);\n  --mds-input-select-tip-background: var(--status-info-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-info-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-info-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-info-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-info-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="info"]:hover ),\n:host( [variant="info"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-info-04);\n  --mds-input-select-variant-color: var(--status-info-05);\n}\n\n:host( [variant="success"] ) {\n\n  --mds-input-select-icon-color: var(--status-success-05);\n  --mds-input-select-tip-background: var(--status-success-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-success-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-success-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-success-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-success-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="success"]:hover ),\n:host( [variant="success"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-success-04);\n  --mds-input-select-variant-color: var(--status-success-05);\n}\n\n:host( [variant="warning"] ) {\n\n  --mds-input-select-icon-color: var(--status-warning-05);\n  --mds-input-select-tip-background: var(--status-warning-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-warning-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-warning-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-warning-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-warning-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="warning"]:hover ),\n:host( [variant="warning"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-warning-04);\n  --mds-input-select-variant-color: var(--status-warning-05);\n}\n\n:host( [variant="error"] ) {\n\n  --mds-input-select-icon-color: var(--status-error-05);\n  --mds-input-select-tip-background: var(--status-error-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-error-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-error-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-error-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-error-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="error"]:hover ),\n:host( [variant="error"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-error-04);\n  --mds-input-select-variant-color: var(--status-error-05);\n}\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .input,\n  .input:hover,\n  .input:focus,\n  .icon {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .input,\n    .input:hover,\n    .input:focus,\n    .icon {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n    --mds-input-select-arrow-icon-blur-background-color: rgb(var(--brand-maggioli-05));\n    --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n    --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n    --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));\n    --mds-input-select-arrow-icon-hover-color: rgb(var(--tone-neutral-10));\n  }\n\n  .input {\n    color: rgb(var(--tone-neutral-03));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n      --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n      --mds-input-select-arrow-icon-blur-background-color: rgb(var(--brand-maggioli-05));\n      --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n      --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n      --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));\n      --mds-input-select-arrow-icon-hover-color: rgb(var(--tone-neutral-10));\n    }\n\n    .input {\n      color: rgb(var(--tone-neutral-03));\n    }\n  }\n}\n\n.visible{\n\n  visibility: visible;\n}\n\n.static{\n\n  position: static;\n}\n\n.fixed{\n\n  position: fixed;\n}\n\n.absolute{\n\n  position: absolute;\n}\n\n.flex{\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n\n.gap-x-400{\n\n  -moz-column-gap: 1rem;\n\n       -webkit-column-gap: 1rem;\n\n       column-gap: 1rem;\n}\n\n.border{\n\n  border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n  fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n  fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n  fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n  fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n  fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n  fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n  fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n  fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n  fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n  fill: rgb(var(--tone-neutral-04));\n}\n\n.text-label-amaranth-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n  }\n\n  .input {\n    color: rgb(var(--tone-neutral-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n    }\n\n    .input {\n      color: rgb(var(--tone-neutral-01));\n    }\n  }\n}\n\n\n';var d=c;var w=n("mds_input_select",function(){function n(n){var o=this;t(this,n);this.changeEvent=r(this,"mdsInputSelectChange",7);if(n.$hostElement$["s-ei"]){this.internals=n.$hostElement$["s-ei"]}else{this.internals=n.$hostElement$.attachInternals();n.$hostElement$["s-ei"]=this.internals}this.onInput=function(n){var t=n.target;if(t){o.value=t.value}};this.onBlur=function(){o.hasFocus=false};this.onFocus=function(){o.hasFocus=true};this.emptyOptions=function(){var n;var t=(n=o.host.shadowRoot)===null||n===void 0?void 0:n.querySelector("select");var r=t===null||t===void 0?void 0:t.querySelectorAll("option");if(!r){return}r.forEach((function(n,t){if(!o.placeholder){n.remove()}if(o.placeholder&&t>0){n.remove()}}))};this.onSlotChangeHandler=function(){var n,t,r;var a=(t=(n=o.host.shadowRoot)===null||n===void 0?void 0:n.querySelectorAll("slot")[0])===null||t===void 0?void 0:t.assignedNodes();var e=(r=o.host.shadowRoot)===null||r===void 0?void 0:r.querySelector("select");var i=e===null||e===void 0?void 0:e.querySelectorAll("option");if(!i){return}if(!o.placeholder&&i.length>0){o.emptyOptions()}if(o.placeholder&&i.length>1){o.emptyOptions()}a===null||a===void 0?void 0:a.forEach((function(n){e===null||e===void 0?void 0:e.appendChild(n.cloneNode(true))}));if(o.value){e===null||e===void 0?void 0:e.querySelectorAll("option").forEach((function(n){n.selected=n.value===o.value}))}else if(!o.placeholder){o.value=e===null||e===void 0?void 0:e.querySelectorAll("option")[0].value}};this.selected=undefined;this.hasFocus=false;this.autocomplete=undefined;this.autoFocus=undefined;this.placeholder=undefined;this.name=undefined;this.disabled=false;this.required=false;this.multiple=false;this.size=0;this.value="";this.variant=undefined}n.prototype.valueChanged=function(){var n;this.selected=this.value!=="";this.changeEvent.emit({value:this.value});this.internals.setFormValue((n=this.value)!==null&&n!==void 0?n:null)};n.prototype.componentDidLoad=function(){if(this.value){this.selected=true;this.internals.setFormValue(this.value)}};n.prototype.render=function(){return o(a,{key:"d46653b843b54f01df7bfdd50b01fc6d9eeb051f"},o("select",{key:"d15111f4a32cc58a2ae199868dfda722cd04857f",class:s("input",this.selected&&"input--selected"),onInput:this.onInput.bind(this),onBlur:this.onBlur,onFocus:this.onFocus,name:this.name,required:this.required,disabled:this.disabled,multiple:this.multiple,size:this.size,part:"select"},this.placeholder&&o("option",{key:"f9e417ceeaf4894328865140411e4568b4578c47",value:"",disabled:true,selected:true},this.placeholder)),o("div",{key:"d50c4755426ef6bd54a54a80a07cc44390493e3d",class:"icon-container"},o("i",{key:"ba3287b543e7f39489eba7066763805e054138d3",class:"svg icon",innerHTML:l})),o("div",{key:"70c1d89ba1a94e8117d4ed61d457bc6ff71ddacb",class:"option-container"},o("slot",{key:"7c63d09662ff18ecbc5e3c7222ff63553e5165fa",onSlotchange:this.onSlotChangeHandler})),o("mds-input-tip",{key:"e40bdd6ee45206329e48d1d8ab3410b1a7988c2a",position:"top",active:this.hasFocus},this.disabled&&o("mds-input-tip-item",{key:"09e2b09522c70af6deee9a7d7cb28a586786c4a1",expanded:true,variant:"disabled"}),this.required&&o("mds-input-tip-item",{key:"78d0c80d7a3bdf721ec5c755304dce207512c74b",expanded:this.hasFocus,variant:this.value===""?"required":"required-success"})))};Object.defineProperty(n,"formAssociated",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(n.prototype,"host",{get:function(){return e(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{value:["valueChanged"]}},enumerable:false,configurable:true});return n}());w.style=d}}}));

package/www/build/p-e743c791.entry.js

@@ -0,0 +1 @@
+import{r as n,c as t,h as r,H as o,g as a}from"./p-babc558f.js";function i(n){var t,r,o="";if("string"==typeof n||"number"==typeof n)o+=n;else if("object"==typeof n)if(Array.isArray(n)){var a=n.length;for(t=0;t<a;t++)n[t]&&(r=i(n[t]))&&(o&&(o+=" "),o+=r)}else for(r in n)n[r]&&(o&&(o+=" "),o+=r);return o}function e(){for(var n,t,r=0,o="",a=arguments.length;r<a;r++)(n=arguments[r])&&(t=i(n))&&(o&&(o+=" "),o+=t);return o}const s=class{constructor(r){n(this,r),this.changeEvent=t(this,"mdsInputSelectChange",7),r.$hostElement$["s-ei"]?this.internals=r.$hostElement$["s-ei"]:(this.internals=r.$hostElement$.attachInternals(),r.$hostElement$["s-ei"]=this.internals),this.onInput=n=>{const t=n.target;t&&(this.value=t.value)},this.onBlur=()=>{this.hasFocus=!1},this.onFocus=()=>{this.hasFocus=!0},this.emptyOptions=()=>{var n;const t=null===(n=this.host.shadowRoot)||void 0===n?void 0:n.querySelector("select"),r=null==t?void 0:t.querySelectorAll("option");r&&r.forEach(((n,t)=>{this.placeholder||n.remove(),this.placeholder&&t>0&&n.remove()}))},this.onSlotChangeHandler=()=>{var n,t,r;const o=null===(t=null===(n=this.host.shadowRoot)||void 0===n?void 0:n.querySelectorAll("slot")[0])||void 0===t?void 0:t.assignedNodes(),a=null===(r=this.host.shadowRoot)||void 0===r?void 0:r.querySelector("select"),i=null==a?void 0:a.querySelectorAll("option");i&&(!this.placeholder&&i.length>0&&this.emptyOptions(),this.placeholder&&i.length>1&&this.emptyOptions(),null==o||o.forEach((n=>{null==a||a.appendChild(n.cloneNode(!0))})),this.value?null==a||a.querySelectorAll("option").forEach((n=>{n.selected=n.value===this.value})):this.placeholder||(this.value=null==a?void 0:a.querySelectorAll("option")[0].value))},this.selected=void 0,this.hasFocus=!1,this.autocomplete=void 0,this.autoFocus=void 0,this.placeholder=void 0,this.name=void 0,this.disabled=!1,this.required=!1,this.multiple=!1,this.size=0,this.value="",this.variant=void 0}valueChanged(){var n;this.selected=""!==this.value,this.changeEvent.emit({value:this.value}),this.internals.setFormValue(null!==(n=this.value)&&void 0!==n?n:null)}componentDidLoad(){this.value&&(this.selected=!0,this.internals.setFormValue(this.value))}render(){return r(o,{key:"d46653b843b54f01df7bfdd50b01fc6d9eeb051f"},r("select",{key:"d15111f4a32cc58a2ae199868dfda722cd04857f",class:e("input",this.selected&&"input--selected"),onInput:this.onInput.bind(this),onBlur:this.onBlur,onFocus:this.onFocus,name:this.name,required:this.required,disabled:this.disabled,multiple:this.multiple,size:this.size,part:"select"},this.placeholder&&r("option",{key:"f9e417ceeaf4894328865140411e4568b4578c47",value:"",disabled:!0,selected:!0},this.placeholder)),r("div",{key:"d50c4755426ef6bd54a54a80a07cc44390493e3d",class:"icon-container"},r("i",{key:"ba3287b543e7f39489eba7066763805e054138d3",class:"svg icon",innerHTML:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6l1.41-1.41z"/></svg>'})),r("div",{key:"70c1d89ba1a94e8117d4ed61d457bc6ff71ddacb",class:"option-container"},r("slot",{key:"7c63d09662ff18ecbc5e3c7222ff63553e5165fa",onSlotchange:this.onSlotChangeHandler})),r("mds-input-tip",{key:"e40bdd6ee45206329e48d1d8ab3410b1a7988c2a",position:"top",active:this.hasFocus},this.disabled&&r("mds-input-tip-item",{key:"09e2b09522c70af6deee9a7d7cb28a586786c4a1",expanded:!0,variant:"disabled"}),this.required&&r("mds-input-tip-item",{key:"78d0c80d7a3bdf721ec5c755304dce207512c74b",expanded:this.hasFocus,variant:""===this.value?"required":"required-success"})))}static get formAssociated(){return!0}get host(){return a(this)}static get watchers(){return{value:["valueChanged"]}}};s.style='@tailwind components;\n@tailwind utilities;\n\n\n\n*, ::before, ::after{\n\n  --tw-border-spacing-x: 0;\n\n  --tw-border-spacing-y: 0;\n\n  --tw-translate-x: 0;\n\n  --tw-translate-y: 0;\n\n  --tw-rotate: 0;\n\n  --tw-skew-x: 0;\n\n  --tw-skew-y: 0;\n\n  --tw-scale-x: 1;\n\n  --tw-scale-y: 1;\n\n  --tw-pan-x:  ;\n\n  --tw-pan-y:  ;\n\n  --tw-pinch-zoom:  ;\n\n  --tw-scroll-snap-strictness: proximity;\n\n  --tw-gradient-from-position:  ;\n\n  --tw-gradient-via-position:  ;\n\n  --tw-gradient-to-position:  ;\n\n  --tw-ordinal:  ;\n\n  --tw-slashed-zero:  ;\n\n  --tw-numeric-figure:  ;\n\n  --tw-numeric-spacing:  ;\n\n  --tw-numeric-fraction:  ;\n\n  --tw-ring-inset:  ;\n\n  --tw-ring-offset-width: 0px;\n\n  --tw-ring-offset-color: #fff;\n\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n\n  --tw-ring-offset-shadow: 0 0 #0000;\n\n  --tw-ring-shadow: 0 0 #0000;\n\n  --tw-shadow: 0 0 #0000;\n\n  --tw-shadow-colored: 0 0 #0000;\n\n  --tw-blur:  ;\n\n  --tw-brightness:  ;\n\n  --tw-contrast:  ;\n\n  --tw-grayscale:  ;\n\n  --tw-hue-rotate:  ;\n\n  --tw-invert:  ;\n\n  --tw-saturate:  ;\n\n  --tw-sepia:  ;\n\n  --tw-drop-shadow:  ;\n\n  --tw-backdrop-blur:  ;\n\n  --tw-backdrop-brightness:  ;\n\n  --tw-backdrop-contrast:  ;\n\n  --tw-backdrop-grayscale:  ;\n\n  --tw-backdrop-hue-rotate:  ;\n\n  --tw-backdrop-invert:  ;\n\n  --tw-backdrop-opacity:  ;\n\n  --tw-backdrop-saturate:  ;\n\n  --tw-backdrop-sepia:  ;\n\n  --tw-contain-size:  ;\n\n  --tw-contain-layout:  ;\n\n  --tw-contain-paint:  ;\n\n  --tw-contain-style:  ;\n}\n\n\n\n::-webkit-backdrop{\n\n  --tw-border-spacing-x: 0;\n\n  --tw-border-spacing-y: 0;\n\n  --tw-translate-x: 0;\n\n  --tw-translate-y: 0;\n\n  --tw-rotate: 0;\n\n  --tw-skew-x: 0;\n\n  --tw-skew-y: 0;\n\n  --tw-scale-x: 1;\n\n  --tw-scale-y: 1;\n\n  --tw-pan-x:  ;\n\n  --tw-pan-y:  ;\n\n  --tw-pinch-zoom:  ;\n\n  --tw-scroll-snap-strictness: proximity;\n\n  --tw-gradient-from-position:  ;\n\n  --tw-gradient-via-position:  ;\n\n  --tw-gradient-to-position:  ;\n\n  --tw-ordinal:  ;\n\n  --tw-slashed-zero:  ;\n\n  --tw-numeric-figure:  ;\n\n  --tw-numeric-spacing:  ;\n\n  --tw-numeric-fraction:  ;\n\n  --tw-ring-inset:  ;\n\n  --tw-ring-offset-width: 0px;\n\n  --tw-ring-offset-color: #fff;\n\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n\n  --tw-ring-offset-shadow: 0 0 #0000;\n\n  --tw-ring-shadow: 0 0 #0000;\n\n  --tw-shadow: 0 0 #0000;\n\n  --tw-shadow-colored: 0 0 #0000;\n\n  --tw-blur:  ;\n\n  --tw-brightness:  ;\n\n  --tw-contrast:  ;\n\n  --tw-grayscale:  ;\n\n  --tw-hue-rotate:  ;\n\n  --tw-invert:  ;\n\n  --tw-saturate:  ;\n\n  --tw-sepia:  ;\n\n  --tw-drop-shadow:  ;\n\n  --tw-backdrop-blur:  ;\n\n  --tw-backdrop-brightness:  ;\n\n  --tw-backdrop-contrast:  ;\n\n  --tw-backdrop-grayscale:  ;\n\n  --tw-backdrop-hue-rotate:  ;\n\n  --tw-backdrop-invert:  ;\n\n  --tw-backdrop-opacity:  ;\n\n  --tw-backdrop-saturate:  ;\n\n  --tw-backdrop-sepia:  ;\n\n  --tw-contain-size:  ;\n\n  --tw-contain-layout:  ;\n\n  --tw-contain-paint:  ;\n\n  --tw-contain-style:  ;\n}\n\n\n\n::-ms-backdrop{\n\n  --tw-border-spacing-x: 0;\n\n  --tw-border-spacing-y: 0;\n\n  --tw-translate-x: 0;\n\n  --tw-translate-y: 0;\n\n  --tw-rotate: 0;\n\n  --tw-skew-x: 0;\n\n  --tw-skew-y: 0;\n\n  --tw-scale-x: 1;\n\n  --tw-scale-y: 1;\n\n  --tw-pan-x:  ;\n\n  --tw-pan-y:  ;\n\n  --tw-pinch-zoom:  ;\n\n  --tw-scroll-snap-strictness: proximity;\n\n  --tw-gradient-from-position:  ;\n\n  --tw-gradient-via-position:  ;\n\n  --tw-gradient-to-position:  ;\n\n  --tw-ordinal:  ;\n\n  --tw-slashed-zero:  ;\n\n  --tw-numeric-figure:  ;\n\n  --tw-numeric-spacing:  ;\n\n  --tw-numeric-fraction:  ;\n\n  --tw-ring-inset:  ;\n\n  --tw-ring-offset-width: 0px;\n\n  --tw-ring-offset-color: #fff;\n\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n\n  --tw-ring-offset-shadow: 0 0 #0000;\n\n  --tw-ring-shadow: 0 0 #0000;\n\n  --tw-shadow: 0 0 #0000;\n\n  --tw-shadow-colored: 0 0 #0000;\n\n  --tw-blur:  ;\n\n  --tw-brightness:  ;\n\n  --tw-contrast:  ;\n\n  --tw-grayscale:  ;\n\n  --tw-hue-rotate:  ;\n\n  --tw-invert:  ;\n\n  --tw-saturate:  ;\n\n  --tw-sepia:  ;\n\n  --tw-drop-shadow:  ;\n\n  --tw-backdrop-blur:  ;\n\n  --tw-backdrop-brightness:  ;\n\n  --tw-backdrop-contrast:  ;\n\n  --tw-backdrop-grayscale:  ;\n\n  --tw-backdrop-hue-rotate:  ;\n\n  --tw-backdrop-invert:  ;\n\n  --tw-backdrop-opacity:  ;\n\n  --tw-backdrop-saturate:  ;\n\n  --tw-backdrop-sepia:  ;\n\n  --tw-contain-size:  ;\n\n  --tw-contain-layout:  ;\n\n  --tw-contain-paint:  ;\n\n  --tw-contain-style:  ;\n}\n\n\n\n::backdrop{\n\n  --tw-border-spacing-x: 0;\n\n  --tw-border-spacing-y: 0;\n\n  --tw-translate-x: 0;\n\n  --tw-translate-y: 0;\n\n  --tw-rotate: 0;\n\n  --tw-skew-x: 0;\n\n  --tw-skew-y: 0;\n\n  --tw-scale-x: 1;\n\n  --tw-scale-y: 1;\n\n  --tw-pan-x:  ;\n\n  --tw-pan-y:  ;\n\n  --tw-pinch-zoom:  ;\n\n  --tw-scroll-snap-strictness: proximity;\n\n  --tw-gradient-from-position:  ;\n\n  --tw-gradient-via-position:  ;\n\n  --tw-gradient-to-position:  ;\n\n  --tw-ordinal:  ;\n\n  --tw-slashed-zero:  ;\n\n  --tw-numeric-figure:  ;\n\n  --tw-numeric-spacing:  ;\n\n  --tw-numeric-fraction:  ;\n\n  --tw-ring-inset:  ;\n\n  --tw-ring-offset-width: 0px;\n\n  --tw-ring-offset-color: #fff;\n\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n\n  --tw-ring-offset-shadow: 0 0 #0000;\n\n  --tw-ring-shadow: 0 0 #0000;\n\n  --tw-shadow: 0 0 #0000;\n\n  --tw-shadow-colored: 0 0 #0000;\n\n  --tw-blur:  ;\n\n  --tw-brightness:  ;\n\n  --tw-contrast:  ;\n\n  --tw-grayscale:  ;\n\n  --tw-hue-rotate:  ;\n\n  --tw-invert:  ;\n\n  --tw-saturate:  ;\n\n  --tw-sepia:  ;\n\n  --tw-drop-shadow:  ;\n\n  --tw-backdrop-blur:  ;\n\n  --tw-backdrop-brightness:  ;\n\n  --tw-backdrop-contrast:  ;\n\n  --tw-backdrop-grayscale:  ;\n\n  --tw-backdrop-hue-rotate:  ;\n\n  --tw-backdrop-invert:  ;\n\n  --tw-backdrop-opacity:  ;\n\n  --tw-backdrop-saturate:  ;\n\n  --tw-backdrop-sepia:  ;\n\n  --tw-contain-size:  ;\n\n  --tw-contain-layout:  ;\n\n  --tw-contain-paint:  ;\n\n  --tw-contain-style:  ;\n}\n.svg{\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n.svg svg{\n\n  aspect-ratio: 1/1;\n\n  height: 100%;\n\n  width: 100%;\n}\n@tailwind utilities;\n\n\n:host{\n\n  min-height: 1.5rem;\n\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n\n  --mds-input-select-variant-color: var(--tone-neutral-01);\n  --mds-input-select-ring: 0 0 0 1px rgb(var(--mds-input-select-variant-color) / 0.1);\n  --mds-input-select-shadow: 0 1px 3px 0 rgb(var(--mds-input-select-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-select-variant-color) / 0.06);\n  --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n  --mds-input-select-arrow-icon-blur-background-color: transparent;\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n  --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--mds-input-select-variant-color));\n\n  color: rgb(var(--tone-neutral-02));\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          -ms-user-select: none;\n          user-select: none;\n}\n\n:host( [required]:not([required="false"]):focus-within ) .icon{\n\n  --tw-translate-y: 0.375rem;\n\n  --tw-translate-x: 0.375rem;\n\n  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n:host( :hover ),\n:host( :focus-within ) {\n\n  --mds-input-select-variant-color: var(--brand-maggioli-03);\n  --mds-input-select-ring: 0 0 0 3px rgb(var(--mds-input-select-variant-color) / 1);\n  --mds-input-select-shadow: 0 4px 6px -1px rgb(var(--mds-input-select-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-select-variant-color) / 0.06);\n  --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-hover-background-color);\n  --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-hover-color);\n}\n\n.input{\n\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n\n  margin: 0rem;\n\n  min-height: 3rem;\n\n  width: 100%;\n\n  border-radius: 0.5rem;\n\n  padding-top: 0.75rem;\n\n  padding-bottom: 0.75rem;\n\n  padding-left: 1rem;\n\n  padding-right: 3rem;\n\n  -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  -webkit-appearance: none;\n\n     -moz-appearance: none;\n\n          appearance: none;\n  background-color: rgb(var(--tone-neutral));\n  border: 0;\n  -webkit-box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n  box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  color: rgb(var(--tone-neutral-05));\n  cursor: pointer;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.input:hover,\n.input:focus{\n\n  outline: 2px solid transparent;\n\n  outline-offset: 2px;\n\n  -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: rgb(var(--tone-neutral-03));\n}\n\n:host([value]:not([value=""])) .input {\n  color: rgb(var(--tone-neutral-03));\n}\n\n.input--mds-input-select-selected {\n  color: rgb(var(--tone-neutral-02));\n}\n\n.input:disabled {\n  background-color: rgb(var(--tone-neutral-09));\n  opacity: 1;\n}\n\n:host([disabled]:not([disabled="false"])) {\n  pointer-events: none;\n}\n\n:host([disabled]:not([disabled="false"])) .input {\n  pointer-events: none;\n}\n\n:host([disabled]:not([disabled="false"])) .icon{\n\n  --tw-translate-y: 0.5rem;\n\n  --tw-translate-x: 0.625rem;\n\n  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n\n  fill: rgb(var(--tone-neutral-06));\n}\n\n.icon-container{\n\n  right: 1rem;\n\n  height: 3rem;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  color: inherit;\n  display: -ms-flexbox;\n  display: flex;\n  pointer-events: none;\n  position: absolute;\n}\n\n.icon{\n\n  border-radius: 9999px;\n\n  -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  -webkit-transition-duration: 200ms;\n\n  transition-duration: 200ms;\n\n  background-color: var(--mds-input-select-arrow-icon-background-color, rgb(var(--brand-maggioli-09)));\n  fill: var(--mds-input-select-arrow-icon-color, rgb(var(--brand-maggioli-04)));\n}\n\n.option-container {\n  display: none;\n}\n\n@container (max-width: 210px) {\n  :host .tip__content,\n  :host(:focus-within) .tip__content {\n    grid-template-columns: 0fr;\n    opacity: 0;\n  }\n\n  :host .tip {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  :host {\n\n    --mds-input-select-background: rgb(var(--brand-maggioli-07));\n  }\n}\n\n@tailwind utilities;\n\n:host {\n\n  --mds-input-select-icon-color: var(--brand-maggioli-03);\n  --mds-input-select-variant-color: 0 0 0;\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--brand-maggioli-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--brand-maggioli-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--brand-maggioli-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--brand-maggioli-04));\n}\n\n:host( :hover ),\n:host( :focus-within ) {\n\n  --mds-input-select-variant-color: var(--brand-maggioli-04);\n}\n\n:host( [variant="info"] ) {\n\n  --mds-input-select-icon-color: var(--status-info-05);\n  --mds-input-select-tip-background: var(--status-info-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-info-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-info-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-info-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-info-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="info"]:hover ),\n:host( [variant="info"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-info-04);\n  --mds-input-select-variant-color: var(--status-info-05);\n}\n\n:host( [variant="success"] ) {\n\n  --mds-input-select-icon-color: var(--status-success-05);\n  --mds-input-select-tip-background: var(--status-success-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-success-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-success-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-success-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-success-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="success"]:hover ),\n:host( [variant="success"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-success-04);\n  --mds-input-select-variant-color: var(--status-success-05);\n}\n\n:host( [variant="warning"] ) {\n\n  --mds-input-select-icon-color: var(--status-warning-05);\n  --mds-input-select-tip-background: var(--status-warning-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-warning-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-warning-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-warning-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-warning-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="warning"]:hover ),\n:host( [variant="warning"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-warning-04);\n  --mds-input-select-variant-color: var(--status-warning-05);\n}\n\n:host( [variant="error"] ) {\n\n  --mds-input-select-icon-color: var(--status-error-05);\n  --mds-input-select-tip-background: var(--status-error-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-error-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-error-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-error-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-error-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="error"]:hover ),\n:host( [variant="error"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-error-04);\n  --mds-input-select-variant-color: var(--status-error-05);\n}\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .input,\n  .input:hover,\n  .input:focus,\n  .icon {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .input,\n    .input:hover,\n    .input:focus,\n    .icon {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n    --mds-input-select-arrow-icon-blur-background-color: rgb(var(--brand-maggioli-05));\n    --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n    --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n    --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));\n    --mds-input-select-arrow-icon-hover-color: rgb(var(--tone-neutral-10));\n  }\n\n  .input {\n    color: rgb(var(--tone-neutral-03));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n      --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n      --mds-input-select-arrow-icon-blur-background-color: rgb(var(--brand-maggioli-05));\n      --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n      --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n      --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));\n      --mds-input-select-arrow-icon-hover-color: rgb(var(--tone-neutral-10));\n    }\n\n    .input {\n      color: rgb(var(--tone-neutral-03));\n    }\n  }\n}\n\n.visible{\n\n  visibility: visible;\n}\n\n.static{\n\n  position: static;\n}\n\n.fixed{\n\n  position: fixed;\n}\n\n.absolute{\n\n  position: absolute;\n}\n\n.flex{\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n\n.gap-x-400{\n\n  -moz-column-gap: 1rem;\n\n       -webkit-column-gap: 1rem;\n\n       column-gap: 1rem;\n}\n\n.border{\n\n  border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n  fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n  fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n  fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n  fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n  fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n  fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n  fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n  fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n  fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n  fill: rgb(var(--tone-neutral-04));\n}\n\n.text-label-amaranth-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n  }\n\n  .input {\n    color: rgb(var(--tone-neutral-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n    }\n\n    .input {\n      color: rgb(var(--tone-neutral-01));\n    }\n  }\n}\n\n\n';export{s as mds_input_select}

package/dist/mds-input-select/p-b7cb51b4.entry.js

@@ -1 +0,0 @@
-import{r as n,c as t,h as r,H as o,g as a}from"./p-babc558f.js";function i(n){var t,r,o="";if("string"==typeof n||"number"==typeof n)o+=n;else if("object"==typeof n)if(Array.isArray(n)){var a=n.length;for(t=0;t<a;t++)n[t]&&(r=i(n[t]))&&(o&&(o+=" "),o+=r)}else for(r in n)n[r]&&(o&&(o+=" "),o+=r);return o}function e(){for(var n,t,r=0,o="",a=arguments.length;r<a;r++)(n=arguments[r])&&(t=i(n))&&(o&&(o+=" "),o+=t);return o}const s=class{constructor(r){n(this,r),this.changeEvent=t(this,"mdsInputSelectChange",7),r.$hostElement$["s-ei"]?this.internals=r.$hostElement$["s-ei"]:(this.internals=r.$hostElement$.attachInternals(),r.$hostElement$["s-ei"]=this.internals),this.onInput=n=>{const t=n.target;t&&(this.value=t.value)},this.onBlur=()=>{this.hasFocus=!1},this.onFocus=()=>{this.hasFocus=!0},this.emptyOptions=()=>{var n;const t=null===(n=this.host.shadowRoot)||void 0===n?void 0:n.querySelector("select"),r=null==t?void 0:t.querySelectorAll("option");r&&r.forEach(((n,t)=>{this.placeholder||n.remove(),this.placeholder&&t>0&&n.remove()}))},this.onSlotChangeHandler=()=>{var n,t,r;const o=null===(t=null===(n=this.host.shadowRoot)||void 0===n?void 0:n.querySelectorAll("slot")[0])||void 0===t?void 0:t.assignedNodes(),a=null===(r=this.host.shadowRoot)||void 0===r?void 0:r.querySelector("select"),i=null==a?void 0:a.querySelectorAll("option");i&&(!this.placeholder&&i.length>0&&this.emptyOptions(),this.placeholder&&i.length>1&&this.emptyOptions(),null==o||o.forEach((n=>{null==a||a.appendChild(n.cloneNode(!0))})),this.value&&(null==a||a.querySelectorAll("option").forEach((n=>{n.selected=n.value===this.value}))))},this.selected=void 0,this.hasFocus=!1,this.autocomplete=void 0,this.autoFocus=void 0,this.placeholder=void 0,this.name=void 0,this.disabled=!1,this.required=!1,this.multiple=!1,this.size=0,this.value="",this.variant=void 0}valueChanged(){var n;this.selected=""!==this.value,this.changeEvent.emit({value:this.value}),this.internals.setFormValue(null!==(n=this.value)&&void 0!==n?n:null)}componentDidLoad(){this.value&&(this.selected=!0,this.internals.setFormValue(this.value))}render(){return r(o,{key:"ea2542be96ac1e1fb7df7f0ed57341842827fcde"},r("select",{key:"ebd4810a2eb6b85b85feca18037b0419905276e4",class:e("input",this.selected&&"input--selected"),onInput:this.onInput.bind(this),onBlur:this.onBlur,onFocus:this.onFocus,name:this.name,required:this.required,disabled:this.disabled,multiple:this.multiple,size:this.size,part:"select"},this.placeholder&&r("option",{key:"8e071e326a0e46f19931616099d6114ff5453609",value:"",disabled:!0,selected:!0},this.placeholder)),r("div",{key:"e081b71128730e9c2396e9ff5f4fae5c8f3707fb",class:"icon-container"},r("i",{key:"24c6ff4d6d6dcb1cadfe66666a971e8cef8835b9",class:"svg icon",innerHTML:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6l1.41-1.41z"/></svg>'})),r("div",{key:"f21d4aeca656dd95081fe37e963e10de42cddc2a",class:"option-container"},r("slot",{key:"5e2d5bce08d8e8b0283c866956873092c6e0f715",onSlotchange:this.onSlotChangeHandler})),r("mds-input-tip",{key:"d4f14b01158d9aef1b3c4c7319d3077a8ad5a154",position:"top",active:this.hasFocus},this.disabled&&r("mds-input-tip-item",{key:"e3a21178db5726df5f91bf9213836f4388baf51e",expanded:!0,variant:"disabled"}),this.required&&r("mds-input-tip-item",{key:"614d37e64de08213f58a89d4f9e02508341614f3",expanded:this.hasFocus,variant:""===this.value?"required":"required-success"})))}static get formAssociated(){return!0}get host(){return a(this)}static get watchers(){return{value:["valueChanged"]}}};s.style='@tailwind components;\n@tailwind utilities;\n\n\n\n*, ::before, ::after{\n\n  --tw-border-spacing-x: 0;\n\n  --tw-border-spacing-y: 0;\n\n  --tw-translate-x: 0;\n\n  --tw-translate-y: 0;\n\n  --tw-rotate: 0;\n\n  --tw-skew-x: 0;\n\n  --tw-skew-y: 0;\n\n  --tw-scale-x: 1;\n\n  --tw-scale-y: 1;\n\n  --tw-pan-x:  ;\n\n  --tw-pan-y:  ;\n\n  --tw-pinch-zoom:  ;\n\n  --tw-scroll-snap-strictness: proximity;\n\n  --tw-gradient-from-position:  ;\n\n  --tw-gradient-via-position:  ;\n\n  --tw-gradient-to-position:  ;\n\n  --tw-ordinal:  ;\n\n  --tw-slashed-zero:  ;\n\n  --tw-numeric-figure:  ;\n\n  --tw-numeric-spacing:  ;\n\n  --tw-numeric-fraction:  ;\n\n  --tw-ring-inset:  ;\n\n  --tw-ring-offset-width: 0px;\n\n  --tw-ring-offset-color: #fff;\n\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n\n  --tw-ring-offset-shadow: 0 0 #0000;\n\n  --tw-ring-shadow: 0 0 #0000;\n\n  --tw-shadow: 0 0 #0000;\n\n  --tw-shadow-colored: 0 0 #0000;\n\n  --tw-blur:  ;\n\n  --tw-brightness:  ;\n\n  --tw-contrast:  ;\n\n  --tw-grayscale:  ;\n\n  --tw-hue-rotate:  ;\n\n  --tw-invert:  ;\n\n  --tw-saturate:  ;\n\n  --tw-sepia:  ;\n\n  --tw-drop-shadow:  ;\n\n  --tw-backdrop-blur:  ;\n\n  --tw-backdrop-brightness:  ;\n\n  --tw-backdrop-contrast:  ;\n\n  --tw-backdrop-grayscale:  ;\n\n  --tw-backdrop-hue-rotate:  ;\n\n  --tw-backdrop-invert:  ;\n\n  --tw-backdrop-opacity:  ;\n\n  --tw-backdrop-saturate:  ;\n\n  --tw-backdrop-sepia:  ;\n\n  --tw-contain-size:  ;\n\n  --tw-contain-layout:  ;\n\n  --tw-contain-paint:  ;\n\n  --tw-contain-style:  ;\n}\n\n\n\n::-webkit-backdrop{\n\n  --tw-border-spacing-x: 0;\n\n  --tw-border-spacing-y: 0;\n\n  --tw-translate-x: 0;\n\n  --tw-translate-y: 0;\n\n  --tw-rotate: 0;\n\n  --tw-skew-x: 0;\n\n  --tw-skew-y: 0;\n\n  --tw-scale-x: 1;\n\n  --tw-scale-y: 1;\n\n  --tw-pan-x:  ;\n\n  --tw-pan-y:  ;\n\n  --tw-pinch-zoom:  ;\n\n  --tw-scroll-snap-strictness: proximity;\n\n  --tw-gradient-from-position:  ;\n\n  --tw-gradient-via-position:  ;\n\n  --tw-gradient-to-position:  ;\n\n  --tw-ordinal:  ;\n\n  --tw-slashed-zero:  ;\n\n  --tw-numeric-figure:  ;\n\n  --tw-numeric-spacing:  ;\n\n  --tw-numeric-fraction:  ;\n\n  --tw-ring-inset:  ;\n\n  --tw-ring-offset-width: 0px;\n\n  --tw-ring-offset-color: #fff;\n\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n\n  --tw-ring-offset-shadow: 0 0 #0000;\n\n  --tw-ring-shadow: 0 0 #0000;\n\n  --tw-shadow: 0 0 #0000;\n\n  --tw-shadow-colored: 0 0 #0000;\n\n  --tw-blur:  ;\n\n  --tw-brightness:  ;\n\n  --tw-contrast:  ;\n\n  --tw-grayscale:  ;\n\n  --tw-hue-rotate:  ;\n\n  --tw-invert:  ;\n\n  --tw-saturate:  ;\n\n  --tw-sepia:  ;\n\n  --tw-drop-shadow:  ;\n\n  --tw-backdrop-blur:  ;\n\n  --tw-backdrop-brightness:  ;\n\n  --tw-backdrop-contrast:  ;\n\n  --tw-backdrop-grayscale:  ;\n\n  --tw-backdrop-hue-rotate:  ;\n\n  --tw-backdrop-invert:  ;\n\n  --tw-backdrop-opacity:  ;\n\n  --tw-backdrop-saturate:  ;\n\n  --tw-backdrop-sepia:  ;\n\n  --tw-contain-size:  ;\n\n  --tw-contain-layout:  ;\n\n  --tw-contain-paint:  ;\n\n  --tw-contain-style:  ;\n}\n\n\n\n::-ms-backdrop{\n\n  --tw-border-spacing-x: 0;\n\n  --tw-border-spacing-y: 0;\n\n  --tw-translate-x: 0;\n\n  --tw-translate-y: 0;\n\n  --tw-rotate: 0;\n\n  --tw-skew-x: 0;\n\n  --tw-skew-y: 0;\n\n  --tw-scale-x: 1;\n\n  --tw-scale-y: 1;\n\n  --tw-pan-x:  ;\n\n  --tw-pan-y:  ;\n\n  --tw-pinch-zoom:  ;\n\n  --tw-scroll-snap-strictness: proximity;\n\n  --tw-gradient-from-position:  ;\n\n  --tw-gradient-via-position:  ;\n\n  --tw-gradient-to-position:  ;\n\n  --tw-ordinal:  ;\n\n  --tw-slashed-zero:  ;\n\n  --tw-numeric-figure:  ;\n\n  --tw-numeric-spacing:  ;\n\n  --tw-numeric-fraction:  ;\n\n  --tw-ring-inset:  ;\n\n  --tw-ring-offset-width: 0px;\n\n  --tw-ring-offset-color: #fff;\n\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n\n  --tw-ring-offset-shadow: 0 0 #0000;\n\n  --tw-ring-shadow: 0 0 #0000;\n\n  --tw-shadow: 0 0 #0000;\n\n  --tw-shadow-colored: 0 0 #0000;\n\n  --tw-blur:  ;\n\n  --tw-brightness:  ;\n\n  --tw-contrast:  ;\n\n  --tw-grayscale:  ;\n\n  --tw-hue-rotate:  ;\n\n  --tw-invert:  ;\n\n  --tw-saturate:  ;\n\n  --tw-sepia:  ;\n\n  --tw-drop-shadow:  ;\n\n  --tw-backdrop-blur:  ;\n\n  --tw-backdrop-brightness:  ;\n\n  --tw-backdrop-contrast:  ;\n\n  --tw-backdrop-grayscale:  ;\n\n  --tw-backdrop-hue-rotate:  ;\n\n  --tw-backdrop-invert:  ;\n\n  --tw-backdrop-opacity:  ;\n\n  --tw-backdrop-saturate:  ;\n\n  --tw-backdrop-sepia:  ;\n\n  --tw-contain-size:  ;\n\n  --tw-contain-layout:  ;\n\n  --tw-contain-paint:  ;\n\n  --tw-contain-style:  ;\n}\n\n\n\n::backdrop{\n\n  --tw-border-spacing-x: 0;\n\n  --tw-border-spacing-y: 0;\n\n  --tw-translate-x: 0;\n\n  --tw-translate-y: 0;\n\n  --tw-rotate: 0;\n\n  --tw-skew-x: 0;\n\n  --tw-skew-y: 0;\n\n  --tw-scale-x: 1;\n\n  --tw-scale-y: 1;\n\n  --tw-pan-x:  ;\n\n  --tw-pan-y:  ;\n\n  --tw-pinch-zoom:  ;\n\n  --tw-scroll-snap-strictness: proximity;\n\n  --tw-gradient-from-position:  ;\n\n  --tw-gradient-via-position:  ;\n\n  --tw-gradient-to-position:  ;\n\n  --tw-ordinal:  ;\n\n  --tw-slashed-zero:  ;\n\n  --tw-numeric-figure:  ;\n\n  --tw-numeric-spacing:  ;\n\n  --tw-numeric-fraction:  ;\n\n  --tw-ring-inset:  ;\n\n  --tw-ring-offset-width: 0px;\n\n  --tw-ring-offset-color: #fff;\n\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n\n  --tw-ring-offset-shadow: 0 0 #0000;\n\n  --tw-ring-shadow: 0 0 #0000;\n\n  --tw-shadow: 0 0 #0000;\n\n  --tw-shadow-colored: 0 0 #0000;\n\n  --tw-blur:  ;\n\n  --tw-brightness:  ;\n\n  --tw-contrast:  ;\n\n  --tw-grayscale:  ;\n\n  --tw-hue-rotate:  ;\n\n  --tw-invert:  ;\n\n  --tw-saturate:  ;\n\n  --tw-sepia:  ;\n\n  --tw-drop-shadow:  ;\n\n  --tw-backdrop-blur:  ;\n\n  --tw-backdrop-brightness:  ;\n\n  --tw-backdrop-contrast:  ;\n\n  --tw-backdrop-grayscale:  ;\n\n  --tw-backdrop-hue-rotate:  ;\n\n  --tw-backdrop-invert:  ;\n\n  --tw-backdrop-opacity:  ;\n\n  --tw-backdrop-saturate:  ;\n\n  --tw-backdrop-sepia:  ;\n\n  --tw-contain-size:  ;\n\n  --tw-contain-layout:  ;\n\n  --tw-contain-paint:  ;\n\n  --tw-contain-style:  ;\n}\n.svg{\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n.svg svg{\n\n  aspect-ratio: 1/1;\n\n  height: 100%;\n\n  width: 100%;\n}\n@tailwind utilities;\n\n\n:host{\n\n  min-height: 1.5rem;\n\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n\n  --mds-input-select-variant-color: var(--tone-neutral-01);\n  --mds-input-select-ring: 0 0 0 1px rgb(var(--mds-input-select-variant-color) / 0.1);\n  --mds-input-select-shadow: 0 1px 3px 0 rgb(var(--mds-input-select-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-select-variant-color) / 0.06);\n  --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n  --mds-input-select-arrow-icon-blur-background-color: transparent;\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n  --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--mds-input-select-variant-color));\n\n  color: rgb(var(--tone-neutral-02));\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          -ms-user-select: none;\n          user-select: none;\n}\n\n:host( [required]:not([required="false"]):focus-within ) .icon{\n\n  --tw-translate-y: 0.375rem;\n\n  --tw-translate-x: 0.375rem;\n\n  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n:host( :hover ),\n:host( :focus-within ) {\n\n  --mds-input-select-variant-color: var(--brand-maggioli-03);\n  --mds-input-select-ring: 0 0 0 3px rgb(var(--mds-input-select-variant-color) / 1);\n  --mds-input-select-shadow: 0 4px 6px -1px rgb(var(--mds-input-select-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-select-variant-color) / 0.06);\n  --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-hover-background-color);\n  --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-hover-color);\n}\n\n.input{\n\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n\n  margin: 0rem;\n\n  min-height: 3rem;\n\n  width: 100%;\n\n  border-radius: 0.5rem;\n\n  padding-top: 0.75rem;\n\n  padding-bottom: 0.75rem;\n\n  padding-left: 1rem;\n\n  padding-right: 3rem;\n\n  -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  -webkit-appearance: none;\n\n     -moz-appearance: none;\n\n          appearance: none;\n  background-color: rgb(var(--tone-neutral));\n  border: 0;\n  -webkit-box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n  box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  color: rgb(var(--tone-neutral-05));\n  cursor: pointer;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.input:hover,\n.input:focus{\n\n  outline: 2px solid transparent;\n\n  outline-offset: 2px;\n\n  -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: rgb(var(--tone-neutral-03));\n}\n\n:host([value]:not([value=""])) .input {\n  color: rgb(var(--tone-neutral-03));\n}\n\n.input--mds-input-select-selected {\n  color: rgb(var(--tone-neutral-02));\n}\n\n.input:disabled {\n  background-color: rgb(var(--tone-neutral-09));\n  opacity: 1;\n}\n\n:host([disabled]:not([disabled="false"])) {\n  pointer-events: none;\n}\n\n:host([disabled]:not([disabled="false"])) .input {\n  pointer-events: none;\n}\n\n:host([disabled]:not([disabled="false"])) .icon{\n\n  --tw-translate-y: 0.5rem;\n\n  --tw-translate-x: 0.625rem;\n\n  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n\n  fill: rgb(var(--tone-neutral-06));\n}\n\n.icon-container{\n\n  right: 1rem;\n\n  height: 3rem;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  color: inherit;\n  display: -ms-flexbox;\n  display: flex;\n  pointer-events: none;\n  position: absolute;\n}\n\n.icon{\n\n  border-radius: 9999px;\n\n  -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  -webkit-transition-duration: 200ms;\n\n  transition-duration: 200ms;\n\n  background-color: var(--mds-input-select-arrow-icon-background-color, rgb(var(--brand-maggioli-09)));\n  fill: var(--mds-input-select-arrow-icon-color, rgb(var(--brand-maggioli-04)));\n}\n\n.option-container {\n  display: none;\n}\n\n@container (max-width: 210px) {\n  :host .tip__content,\n  :host(:focus-within) .tip__content {\n    grid-template-columns: 0fr;\n    opacity: 0;\n  }\n\n  :host .tip {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  :host {\n\n    --mds-input-select-background: rgb(var(--brand-maggioli-07));\n  }\n}\n\n@tailwind utilities;\n\n:host {\n\n  --mds-input-select-icon-color: var(--brand-maggioli-03);\n  --mds-input-select-variant-color: 0 0 0;\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--brand-maggioli-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--brand-maggioli-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--brand-maggioli-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--brand-maggioli-04));\n}\n\n:host( :hover ),\n:host( :focus-within ) {\n\n  --mds-input-select-variant-color: var(--brand-maggioli-04);\n}\n\n:host( [variant="info"] ) {\n\n  --mds-input-select-icon-color: var(--status-info-05);\n  --mds-input-select-tip-background: var(--status-info-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-info-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-info-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-info-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-info-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="info"]:hover ),\n:host( [variant="info"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-info-04);\n  --mds-input-select-variant-color: var(--status-info-05);\n}\n\n:host( [variant="success"] ) {\n\n  --mds-input-select-icon-color: var(--status-success-05);\n  --mds-input-select-tip-background: var(--status-success-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-success-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-success-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-success-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-success-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="success"]:hover ),\n:host( [variant="success"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-success-04);\n  --mds-input-select-variant-color: var(--status-success-05);\n}\n\n:host( [variant="warning"] ) {\n\n  --mds-input-select-icon-color: var(--status-warning-05);\n  --mds-input-select-tip-background: var(--status-warning-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-warning-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-warning-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-warning-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-warning-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="warning"]:hover ),\n:host( [variant="warning"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-warning-04);\n  --mds-input-select-variant-color: var(--status-warning-05);\n}\n\n:host( [variant="error"] ) {\n\n  --mds-input-select-icon-color: var(--status-error-05);\n  --mds-input-select-tip-background: var(--status-error-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-error-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-error-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-error-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-error-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="error"]:hover ),\n:host( [variant="error"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-error-04);\n  --mds-input-select-variant-color: var(--status-error-05);\n}\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .input,\n  .input:hover,\n  .input:focus,\n  .icon {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .input,\n    .input:hover,\n    .input:focus,\n    .icon {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n    --mds-input-select-arrow-icon-blur-background-color: rgb(var(--brand-maggioli-05));\n    --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n    --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n    --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));\n    --mds-input-select-arrow-icon-hover-color: rgb(var(--tone-neutral-10));\n  }\n\n  .input {\n    color: rgb(var(--tone-neutral-03));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n      --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n      --mds-input-select-arrow-icon-blur-background-color: rgb(var(--brand-maggioli-05));\n      --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n      --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n      --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));\n      --mds-input-select-arrow-icon-hover-color: rgb(var(--tone-neutral-10));\n    }\n\n    .input {\n      color: rgb(var(--tone-neutral-03));\n    }\n  }\n}\n\n.visible{\n\n  visibility: visible;\n}\n\n.static{\n\n  position: static;\n}\n\n.fixed{\n\n  position: fixed;\n}\n\n.absolute{\n\n  position: absolute;\n}\n\n.border{\n\n  border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n  fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n  fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n  fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n  fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n  fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n  fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n  fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n  fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n  fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n  fill: rgb(var(--tone-neutral-04));\n}\n\n.text-label-amaranth-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n  }\n\n  .input {\n    color: rgb(var(--tone-neutral-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n    }\n\n    .input {\n      color: rgb(var(--tone-neutral-01));\n    }\n  }\n}\n\n\n';export{s as mds_input_select}

package/www/build/p-b7cb51b4.entry.js

@@ -1 +0,0 @@
-import{r as n,c as t,h as r,H as o,g as a}from"./p-babc558f.js";function i(n){var t,r,o="";if("string"==typeof n||"number"==typeof n)o+=n;else if("object"==typeof n)if(Array.isArray(n)){var a=n.length;for(t=0;t<a;t++)n[t]&&(r=i(n[t]))&&(o&&(o+=" "),o+=r)}else for(r in n)n[r]&&(o&&(o+=" "),o+=r);return o}function e(){for(var n,t,r=0,o="",a=arguments.length;r<a;r++)(n=arguments[r])&&(t=i(n))&&(o&&(o+=" "),o+=t);return o}const s=class{constructor(r){n(this,r),this.changeEvent=t(this,"mdsInputSelectChange",7),r.$hostElement$["s-ei"]?this.internals=r.$hostElement$["s-ei"]:(this.internals=r.$hostElement$.attachInternals(),r.$hostElement$["s-ei"]=this.internals),this.onInput=n=>{const t=n.target;t&&(this.value=t.value)},this.onBlur=()=>{this.hasFocus=!1},this.onFocus=()=>{this.hasFocus=!0},this.emptyOptions=()=>{var n;const t=null===(n=this.host.shadowRoot)||void 0===n?void 0:n.querySelector("select"),r=null==t?void 0:t.querySelectorAll("option");r&&r.forEach(((n,t)=>{this.placeholder||n.remove(),this.placeholder&&t>0&&n.remove()}))},this.onSlotChangeHandler=()=>{var n,t,r;const o=null===(t=null===(n=this.host.shadowRoot)||void 0===n?void 0:n.querySelectorAll("slot")[0])||void 0===t?void 0:t.assignedNodes(),a=null===(r=this.host.shadowRoot)||void 0===r?void 0:r.querySelector("select"),i=null==a?void 0:a.querySelectorAll("option");i&&(!this.placeholder&&i.length>0&&this.emptyOptions(),this.placeholder&&i.length>1&&this.emptyOptions(),null==o||o.forEach((n=>{null==a||a.appendChild(n.cloneNode(!0))})),this.value&&(null==a||a.querySelectorAll("option").forEach((n=>{n.selected=n.value===this.value}))))},this.selected=void 0,this.hasFocus=!1,this.autocomplete=void 0,this.autoFocus=void 0,this.placeholder=void 0,this.name=void 0,this.disabled=!1,this.required=!1,this.multiple=!1,this.size=0,this.value="",this.variant=void 0}valueChanged(){var n;this.selected=""!==this.value,this.changeEvent.emit({value:this.value}),this.internals.setFormValue(null!==(n=this.value)&&void 0!==n?n:null)}componentDidLoad(){this.value&&(this.selected=!0,this.internals.setFormValue(this.value))}render(){return r(o,{key:"ea2542be96ac1e1fb7df7f0ed57341842827fcde"},r("select",{key:"ebd4810a2eb6b85b85feca18037b0419905276e4",class:e("input",this.selected&&"input--selected"),onInput:this.onInput.bind(this),onBlur:this.onBlur,onFocus:this.onFocus,name:this.name,required:this.required,disabled:this.disabled,multiple:this.multiple,size:this.size,part:"select"},this.placeholder&&r("option",{key:"8e071e326a0e46f19931616099d6114ff5453609",value:"",disabled:!0,selected:!0},this.placeholder)),r("div",{key:"e081b71128730e9c2396e9ff5f4fae5c8f3707fb",class:"icon-container"},r("i",{key:"24c6ff4d6d6dcb1cadfe66666a971e8cef8835b9",class:"svg icon",innerHTML:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6l1.41-1.41z"/></svg>'})),r("div",{key:"f21d4aeca656dd95081fe37e963e10de42cddc2a",class:"option-container"},r("slot",{key:"5e2d5bce08d8e8b0283c866956873092c6e0f715",onSlotchange:this.onSlotChangeHandler})),r("mds-input-tip",{key:"d4f14b01158d9aef1b3c4c7319d3077a8ad5a154",position:"top",active:this.hasFocus},this.disabled&&r("mds-input-tip-item",{key:"e3a21178db5726df5f91bf9213836f4388baf51e",expanded:!0,variant:"disabled"}),this.required&&r("mds-input-tip-item",{key:"614d37e64de08213f58a89d4f9e02508341614f3",expanded:this.hasFocus,variant:""===this.value?"required":"required-success"})))}static get formAssociated(){return!0}get host(){return a(this)}static get watchers(){return{value:["valueChanged"]}}};s.style='@tailwind components;\n@tailwind utilities;\n\n\n\n*, ::before, ::after{\n\n  --tw-border-spacing-x: 0;\n\n  --tw-border-spacing-y: 0;\n\n  --tw-translate-x: 0;\n\n  --tw-translate-y: 0;\n\n  --tw-rotate: 0;\n\n  --tw-skew-x: 0;\n\n  --tw-skew-y: 0;\n\n  --tw-scale-x: 1;\n\n  --tw-scale-y: 1;\n\n  --tw-pan-x:  ;\n\n  --tw-pan-y:  ;\n\n  --tw-pinch-zoom:  ;\n\n  --tw-scroll-snap-strictness: proximity;\n\n  --tw-gradient-from-position:  ;\n\n  --tw-gradient-via-position:  ;\n\n  --tw-gradient-to-position:  ;\n\n  --tw-ordinal:  ;\n\n  --tw-slashed-zero:  ;\n\n  --tw-numeric-figure:  ;\n\n  --tw-numeric-spacing:  ;\n\n  --tw-numeric-fraction:  ;\n\n  --tw-ring-inset:  ;\n\n  --tw-ring-offset-width: 0px;\n\n  --tw-ring-offset-color: #fff;\n\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n\n  --tw-ring-offset-shadow: 0 0 #0000;\n\n  --tw-ring-shadow: 0 0 #0000;\n\n  --tw-shadow: 0 0 #0000;\n\n  --tw-shadow-colored: 0 0 #0000;\n\n  --tw-blur:  ;\n\n  --tw-brightness:  ;\n\n  --tw-contrast:  ;\n\n  --tw-grayscale:  ;\n\n  --tw-hue-rotate:  ;\n\n  --tw-invert:  ;\n\n  --tw-saturate:  ;\n\n  --tw-sepia:  ;\n\n  --tw-drop-shadow:  ;\n\n  --tw-backdrop-blur:  ;\n\n  --tw-backdrop-brightness:  ;\n\n  --tw-backdrop-contrast:  ;\n\n  --tw-backdrop-grayscale:  ;\n\n  --tw-backdrop-hue-rotate:  ;\n\n  --tw-backdrop-invert:  ;\n\n  --tw-backdrop-opacity:  ;\n\n  --tw-backdrop-saturate:  ;\n\n  --tw-backdrop-sepia:  ;\n\n  --tw-contain-size:  ;\n\n  --tw-contain-layout:  ;\n\n  --tw-contain-paint:  ;\n\n  --tw-contain-style:  ;\n}\n\n\n\n::-webkit-backdrop{\n\n  --tw-border-spacing-x: 0;\n\n  --tw-border-spacing-y: 0;\n\n  --tw-translate-x: 0;\n\n  --tw-translate-y: 0;\n\n  --tw-rotate: 0;\n\n  --tw-skew-x: 0;\n\n  --tw-skew-y: 0;\n\n  --tw-scale-x: 1;\n\n  --tw-scale-y: 1;\n\n  --tw-pan-x:  ;\n\n  --tw-pan-y:  ;\n\n  --tw-pinch-zoom:  ;\n\n  --tw-scroll-snap-strictness: proximity;\n\n  --tw-gradient-from-position:  ;\n\n  --tw-gradient-via-position:  ;\n\n  --tw-gradient-to-position:  ;\n\n  --tw-ordinal:  ;\n\n  --tw-slashed-zero:  ;\n\n  --tw-numeric-figure:  ;\n\n  --tw-numeric-spacing:  ;\n\n  --tw-numeric-fraction:  ;\n\n  --tw-ring-inset:  ;\n\n  --tw-ring-offset-width: 0px;\n\n  --tw-ring-offset-color: #fff;\n\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n\n  --tw-ring-offset-shadow: 0 0 #0000;\n\n  --tw-ring-shadow: 0 0 #0000;\n\n  --tw-shadow: 0 0 #0000;\n\n  --tw-shadow-colored: 0 0 #0000;\n\n  --tw-blur:  ;\n\n  --tw-brightness:  ;\n\n  --tw-contrast:  ;\n\n  --tw-grayscale:  ;\n\n  --tw-hue-rotate:  ;\n\n  --tw-invert:  ;\n\n  --tw-saturate:  ;\n\n  --tw-sepia:  ;\n\n  --tw-drop-shadow:  ;\n\n  --tw-backdrop-blur:  ;\n\n  --tw-backdrop-brightness:  ;\n\n  --tw-backdrop-contrast:  ;\n\n  --tw-backdrop-grayscale:  ;\n\n  --tw-backdrop-hue-rotate:  ;\n\n  --tw-backdrop-invert:  ;\n\n  --tw-backdrop-opacity:  ;\n\n  --tw-backdrop-saturate:  ;\n\n  --tw-backdrop-sepia:  ;\n\n  --tw-contain-size:  ;\n\n  --tw-contain-layout:  ;\n\n  --tw-contain-paint:  ;\n\n  --tw-contain-style:  ;\n}\n\n\n\n::-ms-backdrop{\n\n  --tw-border-spacing-x: 0;\n\n  --tw-border-spacing-y: 0;\n\n  --tw-translate-x: 0;\n\n  --tw-translate-y: 0;\n\n  --tw-rotate: 0;\n\n  --tw-skew-x: 0;\n\n  --tw-skew-y: 0;\n\n  --tw-scale-x: 1;\n\n  --tw-scale-y: 1;\n\n  --tw-pan-x:  ;\n\n  --tw-pan-y:  ;\n\n  --tw-pinch-zoom:  ;\n\n  --tw-scroll-snap-strictness: proximity;\n\n  --tw-gradient-from-position:  ;\n\n  --tw-gradient-via-position:  ;\n\n  --tw-gradient-to-position:  ;\n\n  --tw-ordinal:  ;\n\n  --tw-slashed-zero:  ;\n\n  --tw-numeric-figure:  ;\n\n  --tw-numeric-spacing:  ;\n\n  --tw-numeric-fraction:  ;\n\n  --tw-ring-inset:  ;\n\n  --tw-ring-offset-width: 0px;\n\n  --tw-ring-offset-color: #fff;\n\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n\n  --tw-ring-offset-shadow: 0 0 #0000;\n\n  --tw-ring-shadow: 0 0 #0000;\n\n  --tw-shadow: 0 0 #0000;\n\n  --tw-shadow-colored: 0 0 #0000;\n\n  --tw-blur:  ;\n\n  --tw-brightness:  ;\n\n  --tw-contrast:  ;\n\n  --tw-grayscale:  ;\n\n  --tw-hue-rotate:  ;\n\n  --tw-invert:  ;\n\n  --tw-saturate:  ;\n\n  --tw-sepia:  ;\n\n  --tw-drop-shadow:  ;\n\n  --tw-backdrop-blur:  ;\n\n  --tw-backdrop-brightness:  ;\n\n  --tw-backdrop-contrast:  ;\n\n  --tw-backdrop-grayscale:  ;\n\n  --tw-backdrop-hue-rotate:  ;\n\n  --tw-backdrop-invert:  ;\n\n  --tw-backdrop-opacity:  ;\n\n  --tw-backdrop-saturate:  ;\n\n  --tw-backdrop-sepia:  ;\n\n  --tw-contain-size:  ;\n\n  --tw-contain-layout:  ;\n\n  --tw-contain-paint:  ;\n\n  --tw-contain-style:  ;\n}\n\n\n\n::backdrop{\n\n  --tw-border-spacing-x: 0;\n\n  --tw-border-spacing-y: 0;\n\n  --tw-translate-x: 0;\n\n  --tw-translate-y: 0;\n\n  --tw-rotate: 0;\n\n  --tw-skew-x: 0;\n\n  --tw-skew-y: 0;\n\n  --tw-scale-x: 1;\n\n  --tw-scale-y: 1;\n\n  --tw-pan-x:  ;\n\n  --tw-pan-y:  ;\n\n  --tw-pinch-zoom:  ;\n\n  --tw-scroll-snap-strictness: proximity;\n\n  --tw-gradient-from-position:  ;\n\n  --tw-gradient-via-position:  ;\n\n  --tw-gradient-to-position:  ;\n\n  --tw-ordinal:  ;\n\n  --tw-slashed-zero:  ;\n\n  --tw-numeric-figure:  ;\n\n  --tw-numeric-spacing:  ;\n\n  --tw-numeric-fraction:  ;\n\n  --tw-ring-inset:  ;\n\n  --tw-ring-offset-width: 0px;\n\n  --tw-ring-offset-color: #fff;\n\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n\n  --tw-ring-offset-shadow: 0 0 #0000;\n\n  --tw-ring-shadow: 0 0 #0000;\n\n  --tw-shadow: 0 0 #0000;\n\n  --tw-shadow-colored: 0 0 #0000;\n\n  --tw-blur:  ;\n\n  --tw-brightness:  ;\n\n  --tw-contrast:  ;\n\n  --tw-grayscale:  ;\n\n  --tw-hue-rotate:  ;\n\n  --tw-invert:  ;\n\n  --tw-saturate:  ;\n\n  --tw-sepia:  ;\n\n  --tw-drop-shadow:  ;\n\n  --tw-backdrop-blur:  ;\n\n  --tw-backdrop-brightness:  ;\n\n  --tw-backdrop-contrast:  ;\n\n  --tw-backdrop-grayscale:  ;\n\n  --tw-backdrop-hue-rotate:  ;\n\n  --tw-backdrop-invert:  ;\n\n  --tw-backdrop-opacity:  ;\n\n  --tw-backdrop-saturate:  ;\n\n  --tw-backdrop-sepia:  ;\n\n  --tw-contain-size:  ;\n\n  --tw-contain-layout:  ;\n\n  --tw-contain-paint:  ;\n\n  --tw-contain-style:  ;\n}\n.svg{\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n.svg svg{\n\n  aspect-ratio: 1/1;\n\n  height: 100%;\n\n  width: 100%;\n}\n@tailwind utilities;\n\n\n:host{\n\n  min-height: 1.5rem;\n\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n\n  --mds-input-select-variant-color: var(--tone-neutral-01);\n  --mds-input-select-ring: 0 0 0 1px rgb(var(--mds-input-select-variant-color) / 0.1);\n  --mds-input-select-shadow: 0 1px 3px 0 rgb(var(--mds-input-select-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-select-variant-color) / 0.06);\n  --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n  --mds-input-select-arrow-icon-blur-background-color: transparent;\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n  --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--mds-input-select-variant-color));\n\n  color: rgb(var(--tone-neutral-02));\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          -ms-user-select: none;\n          user-select: none;\n}\n\n:host( [required]:not([required="false"]):focus-within ) .icon{\n\n  --tw-translate-y: 0.375rem;\n\n  --tw-translate-x: 0.375rem;\n\n  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n:host( :hover ),\n:host( :focus-within ) {\n\n  --mds-input-select-variant-color: var(--brand-maggioli-03);\n  --mds-input-select-ring: 0 0 0 3px rgb(var(--mds-input-select-variant-color) / 1);\n  --mds-input-select-shadow: 0 4px 6px -1px rgb(var(--mds-input-select-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-select-variant-color) / 0.06);\n  --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-hover-background-color);\n  --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-hover-color);\n}\n\n.input{\n\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n\n  margin: 0rem;\n\n  min-height: 3rem;\n\n  width: 100%;\n\n  border-radius: 0.5rem;\n\n  padding-top: 0.75rem;\n\n  padding-bottom: 0.75rem;\n\n  padding-left: 1rem;\n\n  padding-right: 3rem;\n\n  -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  -webkit-appearance: none;\n\n     -moz-appearance: none;\n\n          appearance: none;\n  background-color: rgb(var(--tone-neutral));\n  border: 0;\n  -webkit-box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n  box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  color: rgb(var(--tone-neutral-05));\n  cursor: pointer;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.input:hover,\n.input:focus{\n\n  outline: 2px solid transparent;\n\n  outline-offset: 2px;\n\n  -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: rgb(var(--tone-neutral-03));\n}\n\n:host([value]:not([value=""])) .input {\n  color: rgb(var(--tone-neutral-03));\n}\n\n.input--mds-input-select-selected {\n  color: rgb(var(--tone-neutral-02));\n}\n\n.input:disabled {\n  background-color: rgb(var(--tone-neutral-09));\n  opacity: 1;\n}\n\n:host([disabled]:not([disabled="false"])) {\n  pointer-events: none;\n}\n\n:host([disabled]:not([disabled="false"])) .input {\n  pointer-events: none;\n}\n\n:host([disabled]:not([disabled="false"])) .icon{\n\n  --tw-translate-y: 0.5rem;\n\n  --tw-translate-x: 0.625rem;\n\n  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n\n  fill: rgb(var(--tone-neutral-06));\n}\n\n.icon-container{\n\n  right: 1rem;\n\n  height: 3rem;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  color: inherit;\n  display: -ms-flexbox;\n  display: flex;\n  pointer-events: none;\n  position: absolute;\n}\n\n.icon{\n\n  border-radius: 9999px;\n\n  -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  -webkit-transition-duration: 200ms;\n\n  transition-duration: 200ms;\n\n  background-color: var(--mds-input-select-arrow-icon-background-color, rgb(var(--brand-maggioli-09)));\n  fill: var(--mds-input-select-arrow-icon-color, rgb(var(--brand-maggioli-04)));\n}\n\n.option-container {\n  display: none;\n}\n\n@container (max-width: 210px) {\n  :host .tip__content,\n  :host(:focus-within) .tip__content {\n    grid-template-columns: 0fr;\n    opacity: 0;\n  }\n\n  :host .tip {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  :host {\n\n    --mds-input-select-background: rgb(var(--brand-maggioli-07));\n  }\n}\n\n@tailwind utilities;\n\n:host {\n\n  --mds-input-select-icon-color: var(--brand-maggioli-03);\n  --mds-input-select-variant-color: 0 0 0;\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--brand-maggioli-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--brand-maggioli-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--brand-maggioli-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--brand-maggioli-04));\n}\n\n:host( :hover ),\n:host( :focus-within ) {\n\n  --mds-input-select-variant-color: var(--brand-maggioli-04);\n}\n\n:host( [variant="info"] ) {\n\n  --mds-input-select-icon-color: var(--status-info-05);\n  --mds-input-select-tip-background: var(--status-info-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-info-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-info-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-info-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-info-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="info"]:hover ),\n:host( [variant="info"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-info-04);\n  --mds-input-select-variant-color: var(--status-info-05);\n}\n\n:host( [variant="success"] ) {\n\n  --mds-input-select-icon-color: var(--status-success-05);\n  --mds-input-select-tip-background: var(--status-success-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-success-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-success-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-success-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-success-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="success"]:hover ),\n:host( [variant="success"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-success-04);\n  --mds-input-select-variant-color: var(--status-success-05);\n}\n\n:host( [variant="warning"] ) {\n\n  --mds-input-select-icon-color: var(--status-warning-05);\n  --mds-input-select-tip-background: var(--status-warning-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-warning-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-warning-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-warning-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-warning-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="warning"]:hover ),\n:host( [variant="warning"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-warning-04);\n  --mds-input-select-variant-color: var(--status-warning-05);\n}\n\n:host( [variant="error"] ) {\n\n  --mds-input-select-icon-color: var(--status-error-05);\n  --mds-input-select-tip-background: var(--status-error-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-error-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-error-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-error-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-error-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="error"]:hover ),\n:host( [variant="error"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-error-04);\n  --mds-input-select-variant-color: var(--status-error-05);\n}\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .input,\n  .input:hover,\n  .input:focus,\n  .icon {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .input,\n    .input:hover,\n    .input:focus,\n    .icon {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n    --mds-input-select-arrow-icon-blur-background-color: rgb(var(--brand-maggioli-05));\n    --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n    --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n    --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));\n    --mds-input-select-arrow-icon-hover-color: rgb(var(--tone-neutral-10));\n  }\n\n  .input {\n    color: rgb(var(--tone-neutral-03));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n      --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n      --mds-input-select-arrow-icon-blur-background-color: rgb(var(--brand-maggioli-05));\n      --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n      --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n      --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));\n      --mds-input-select-arrow-icon-hover-color: rgb(var(--tone-neutral-10));\n    }\n\n    .input {\n      color: rgb(var(--tone-neutral-03));\n    }\n  }\n}\n\n.visible{\n\n  visibility: visible;\n}\n\n.static{\n\n  position: static;\n}\n\n.fixed{\n\n  position: fixed;\n}\n\n.absolute{\n\n  position: absolute;\n}\n\n.border{\n\n  border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n  fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n  fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n  fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n  fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n  fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n  fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n  fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n  fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n  fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n  fill: rgb(var(--tone-neutral-04));\n}\n\n.text-label-amaranth-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n  }\n\n  .input {\n    color: rgb(var(--tone-neutral-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n    }\n\n    .input {\n      color: rgb(var(--tone-neutral-01));\n    }\n  }\n}\n\n\n';export{s as mds_input_select}