coles-solid-library 0.1.1 → 0.2.2

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import { sharedConfig, createRenderEffect, untrack, getOwner, createEffect, runWithOwner, createMemo, createSignal, createRoot, onCleanup, mergeProps, createContext, splitProps, useContext, createComponent, Show, onMount, For, $PROXY, batch, $TRACK, getListener, children } from 'solid-js';
+import { sharedConfig, untrack, createRenderEffect, getOwner, createEffect, runWithOwner, createMemo, createSignal, createRoot, onCleanup, splitProps, mergeProps, createContext, useContext, createComponent, Show, onMount, For, $PROXY, batch, $TRACK, getListener, children } from 'solid-js';
 
 const booleans = ["allowfullscreen", "async", "autofocus", "autoplay", "checked", "controls", "default", "disabled", "formnovalidate", "hidden", "indeterminate", "inert", "ismap", "loop", "multiple", "muted", "nomodule", "novalidate", "open", "playsinline", "readonly", "required", "reversed", "seamless", "selected"];
 const Properties = /*#__PURE__*/new Set(["className", "value", "readOnly", "formNoValidate", "isMap", "noModule", "playsInline", ...booleans]);
@@ -102,11 +102,11 @@ const $$EVENTS = "_$DX_DELEGATE";
 function template(html, isImportNode, isSVG, isMathML) {
   let node;
   const create = () => {
-    const t = document.createElement("template");
+    const t = isMathML ? document.createElementNS("http://www.w3.org/1998/Math/MathML", "template") : document.createElement("template");
     t.innerHTML = html;
-    return t.content.firstChild;
+    return isSVG ? t.content.firstChild.firstChild : isMathML ? t.firstChild : t.content.firstChild;
   };
-  const fn = () => (node || (node = create())).cloneNode(true);
+  const fn = isImportNode ? () => untrack(() => document.importNode(node || (node = create()), true)) : () => (node || (node = create())).cloneNode(true);
   fn.cloneNode = fn;
   return fn;
 }
@@ -166,7 +166,7 @@ function classList(node, value, prev = {}) {
   }
   return prev;
 }
-function style$a(node, value, prev) {
+function style$9(node, value, prev) {
   if (!value) return prev ? setAttribute(node, "style") : value;
   const nodeStyle = node.style;
   if (typeof value === "string") return nodeStyle.cssText = value;
@@ -243,7 +243,7 @@ function toggleClassKey(node, key, value) {
 }
 function assignProp(node, prop, value, prev, isSVG, skipRef, props) {
   let isCE, isProp, isChildProp, propAlias, forceProp;
-  if (prop === "style") return style$a(node, value, prev);
+  if (prop === "style") return style$9(node, value, prev);
   if (prop === "classList") return classList(node, value, prev);
   if (value === prev) return prev;
   if (prop === "ref") {
@@ -528,21 +528,49 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$d = ".Button_menuButtons__XNrBT {\n  list-style: none;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n}\n.Button_menuButtons__XNrBT li {\n  margin: var(--spacing-1, 8px) 0;\n}\n.Button_menuButtons__XNrBT svg {\n  width: 90%;\n  height: 90%;\n}\n\n.Button_menuButton__GdTnd {\n  width: 100%;\n  height: 75%;\n  border-radius: var(--border-radius-md, 8px);\n  padding: var(--spacing-1, 8px);\n}\n.Button_menuButton__GdTnd:hover {\n  cursor: pointer;\n}\n.Button_menuButton__GdTnd:hover link {\n  background-color: var(--tertiary-color);\n}\n\n.Button_customButtonStyle__1TOXE {\n  border-radius: var(--border-radius-lg, 16px);\n  padding: calc(var(--spacing-1, 8px) / 2) calc(var(--spacing-1, 8px));\n  border: none;\n  transition: transform 0.2s ease, background 0.2s ease;\n}\n.Button_customButtonStyle__1TOXE:active {\n  transform: scale(0.9);\n  box-shadow: var(--shadow-elevation-2, 0 3px 6px rgba(0, 0, 0, 0.3));\n}\n.Button_customButtonStyle__1TOXE:not(:disabled):hover {\n  cursor: pointer;\n  box-shadow: var(--shadow-elevation-3, 0 10px 20px rgba(0, 0, 0, 0.45));\n}\n.Button_customButtonStyle__1TOXE:disabled:hover {\n  cursor: not-allowed;\n}\n\n.Button_hover__QXVTm:hover {\n  cursor: pointer;\n}\n\n.Button_primary__auYD2 {\n  background-color: var(--primary-color, #007bff);\n  color: var(--on-primary-color);\n}\n.Button_primary__auYD2:hover {\n  background-color: var(--primary-color-hover);\n}\n.Button_primary__auYD2:active {\n  background-color: var(--primary-color-active);\n}\n\n.Button_accent__eT5vq {\n  background-color: var(--secondary-color);\n  color: var(--on-secondary-color);\n}\n.Button_accent__eT5vq:hover {\n  background-color: var(--secondary-color-hover);\n}\n.Button_accent__eT5vq:active {\n  background-color: var(--secondary-color-active);\n}\n\n.Button_tertiary__PstKO {\n  background-color: var(--tertiary-color);\n  color: var(--on-tertiary-color);\n}\n.Button_tertiary__PstKO:hover {\n  background-color: var(--tertiary-color-hover);\n}\n.Button_tertiary__PstKO:active {\n  background-color: var(--tertiary-color-active);\n}\n\n.Button_transparent__aet0J {\n  background-color: inherit !important;\n  color: inherit !important;\n  border: none;\n  outline: none;\n  padding: 0px;\n  margin: 0px;\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkJ1dHRvbi5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsZ0JBQWdCO0VBQ2hCLFdBQVc7RUFDWCxZQUFZO0VBQ1osU0FBUztFQUNULFVBQVU7QUFDWjtBQUNBO0VBQ0UsK0JBQStCO0FBQ2pDO0FBQ0E7RUFDRSxVQUFVO0VBQ1YsV0FBVztBQUNiOztBQUVBO0VBQ0UsV0FBVztFQUNYLFdBQVc7RUFDWCwyQ0FBMkM7RUFDM0MsOEJBQThCO0FBQ2hDO0FBQ0E7RUFDRSxlQUFlO0FBQ2pCO0FBQ0E7RUFDRSx1Q0FBdUM7QUFDekM7O0FBRUE7RUFDRSw0Q0FBNEM7RUFDNUMsb0VBQW9FO0VBQ3BFLFlBQVk7RUFDWixxREFBcUQ7QUFDdkQ7QUFDQTtFQUNFLHFCQUFxQjtFQUNyQixtRUFBbUU7QUFDckU7QUFDQTtFQUNFLGVBQWU7RUFDZixzRUFBc0U7QUFDeEU7QUFDQTtFQUNFLG1CQUFtQjtBQUNyQjs7QUFFQTtFQUNFLGVBQWU7QUFDakI7O0FBRUE7RUFDRSwrQ0FBK0M7RUFDL0MsOEJBQThCO0FBQ2hDO0FBQ0E7RUFDRSw0Q0FBNEM7QUFDOUM7QUFDQTtFQUNFLDZDQUE2QztBQUMvQzs7QUFFQTtFQUNFLHdDQUF3QztFQUN4QyxnQ0FBZ0M7QUFDbEM7QUFDQTtFQUNFLDhDQUE4QztBQUNoRDtBQUNBO0VBQ0UsK0NBQStDO0FBQ2pEOztBQUVBO0VBQ0UsdUNBQXVDO0VBQ3ZDLCtCQUErQjtBQUNqQztBQUNBO0VBQ0UsNkNBQTZDO0FBQy9DO0FBQ0E7RUFDRSw4Q0FBOEM7QUFDaEQ7O0FBRUE7RUFDRSxvQ0FBb0M7RUFDcEMseUJBQXlCO0VBQ3pCLFlBQVk7RUFDWixhQUFhO0VBQ2IsWUFBWTtFQUNaLFdBQVc7QUFDYiIsImZpbGUiOiJCdXR0b24uc2NzcyIsInNvdXJjZXNDb250ZW50IjpbIi5tZW51QnV0dG9ucyB7XG4gIGxpc3Qtc3R5bGU6IG5vbmU7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIG1hcmdpbjogMDtcbiAgcGFkZGluZzogMDtcbn1cbi5tZW51QnV0dG9ucyBsaSB7XG4gIG1hcmdpbjogdmFyKC0tc3BhY2luZy0xLCA4cHgpIDA7XG59XG4ubWVudUJ1dHRvbnMgc3ZnIHtcbiAgd2lkdGg6IDkwJTtcbiAgaGVpZ2h0OiA5MCU7XG59XG5cbi5tZW51QnV0dG9uIHtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogNzUlO1xuICBib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzLW1kLCA4cHgpO1xuICBwYWRkaW5nOiB2YXIoLS1zcGFjaW5nLTEsIDhweCk7XG59XG4ubWVudUJ1dHRvbjpob3ZlciB7XG4gIGN1cnNvcjogcG9pbnRlcjtcbn1cbi5tZW51QnV0dG9uOmhvdmVyIGxpbmsge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS10ZXJ0aWFyeS1jb2xvcik7XG59XG5cbi5jdXN0b21CdXR0b25TdHlsZSB7XG4gIGJvcmRlci1yYWRpdXM6IHZhcigtLWJvcmRlci1yYWRpdXMtbGcsIDE2cHgpO1xuICBwYWRkaW5nOiBjYWxjKHZhcigtLXNwYWNpbmctMSwgOHB4KSAvIDIpIGNhbGModmFyKC0tc3BhY2luZy0xLCA4cHgpKTtcbiAgYm9yZGVyOiBub25lO1xuICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gMC4ycyBlYXNlLCBiYWNrZ3JvdW5kIDAuMnMgZWFzZTtcbn1cbi5jdXN0b21CdXR0b25TdHlsZTphY3RpdmUge1xuICB0cmFuc2Zvcm06IHNjYWxlKDAuOSk7XG4gIGJveC1zaGFkb3c6IHZhcigtLXNoYWRvdy1lbGV2YXRpb24tMiwgMCAzcHggNnB4IHJnYmEoMCwgMCwgMCwgMC4zKSk7XG59XG4uY3VzdG9tQnV0dG9uU3R5bGU6bm90KDpkaXNhYmxlZCk6aG92ZXIge1xuICBjdXJzb3I6IHBvaW50ZXI7XG4gIGJveC1zaGFkb3c6IHZhcigtLXNoYWRvdy1lbGV2YXRpb24tMywgMCAxMHB4IDIwcHggcmdiYSgwLCAwLCAwLCAwLjQ1KSk7XG59XG4uY3VzdG9tQnV0dG9uU3R5bGU6ZGlzYWJsZWQ6aG92ZXIge1xuICBjdXJzb3I6IG5vdC1hbGxvd2VkO1xufVxuXG4uaG92ZXI6aG92ZXIge1xuICBjdXJzb3I6IHBvaW50ZXI7XG59XG5cbi5wcmltYXJ5IHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tcHJpbWFyeS1jb2xvciwgIzAwN2JmZik7XG4gIGNvbG9yOiB2YXIoLS1vbi1wcmltYXJ5LWNvbG9yKTtcbn1cbi5wcmltYXJ5OmhvdmVyIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tcHJpbWFyeS1jb2xvci1ob3Zlcik7XG59XG4ucHJpbWFyeTphY3RpdmUge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1wcmltYXJ5LWNvbG9yLWFjdGl2ZSk7XG59XG5cbi5hY2NlbnQge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zZWNvbmRhcnktY29sb3IpO1xuICBjb2xvcjogdmFyKC0tb24tc2Vjb25kYXJ5LWNvbG9yKTtcbn1cbi5hY2NlbnQ6aG92ZXIge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zZWNvbmRhcnktY29sb3ItaG92ZXIpO1xufVxuLmFjY2VudDphY3RpdmUge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zZWNvbmRhcnktY29sb3ItYWN0aXZlKTtcbn1cblxuLnRlcnRpYXJ5IHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tdGVydGlhcnktY29sb3IpO1xuICBjb2xvcjogdmFyKC0tb24tdGVydGlhcnktY29sb3IpO1xufVxuLnRlcnRpYXJ5OmhvdmVyIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tdGVydGlhcnktY29sb3ItaG92ZXIpO1xufVxuLnRlcnRpYXJ5OmFjdGl2ZSB7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXRlcnRpYXJ5LWNvbG9yLWFjdGl2ZSk7XG59XG5cbi50cmFuc3BhcmVudCB7XG4gIGJhY2tncm91bmQtY29sb3I6IGluaGVyaXQgIWltcG9ydGFudDtcbiAgY29sb3I6IGluaGVyaXQgIWltcG9ydGFudDtcbiAgYm9yZGVyOiBub25lO1xuICBvdXRsaW5lOiBub25lO1xuICBwYWRkaW5nOiAwcHg7XG4gIG1hcmdpbjogMHB4O1xufSJdfQ== */";
-var style$9 = {"menuButtons":"Button_menuButtons__XNrBT","menuButton":"Button_menuButton__GdTnd","customButtonStyle":"Button_customButtonStyle__1TOXE","hover":"Button_hover__QXVTm","primary":"Button_primary__auYD2","accent":"Button_accent__eT5vq","tertiary":"Button_tertiary__PstKO","transparent":"Button_transparent__aet0J"};
-styleInject(css_248z$d);
+var css_248z$f = ".Button_customButtonStyle__1TOXE {\n  border-radius: 8px;\n  font-family: \"Roboto, sans-serif\";\n  padding: 8px 8px;\n  border: none;\n  transition: transform 0.2s ease, background 0.2s ease;\n}\n.Button_customButtonStyle__1TOXE:active {\n  transform: scale(0.9);\n  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);\n}\n.Button_customButtonStyle__1TOXE:not(:disabled):hover {\n  cursor: pointer;\n  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);\n}\n.Button_customButtonStyle__1TOXE:disabled:hover {\n  cursor: not-allowed;\n}\n\n.Button_primary__auYD2 {\n  background-color: var(--primary-color, #4CAF50);\n  color: var(--on-primary-color, #fff);\n}\n\n.Button_primaryVariant__NbKc2 {\n  background-color: var(--primary-color-varient, #43A047);\n  color: var(--on-primary-color, #fff);\n}\n\n.Button_secondary__DVppl {\n  background-color: var(--secondary-color, #14b9c3);\n  color: var(--on-secondary-color, #000000);\n}\n\n.Button_secondaryVariant__suwON {\n  background-color: var(--secondary-color-varient, #0b969f);\n  color: var(--on-secondary-color, #000000);\n}\n\n.Button_background__E82uk {\n  background-color: var(--background-color, #ffffff);\n  color: var(--on-background-color, #000000);\n}\n\n.Button_surface__EF0NA {\n  background-color: var(--surface-color, #EEEEEE);\n  color: var(--on-surface-color, #000000);\n}\n\n.Button_surfaceVariant__-SFxJ {\n  background-color: var(--surface-color-variant, #ccc);\n  color: var(--on-surface-color, #000000);\n}\n\n.Button_container__E1Hq5 {\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n}\n\n.Button_error__Yab6f {\n  background-color: var(--error-color, #B00020);\n  color: var(--on-error-color, #ffffff);\n}\n\n.Button_borderPrimary__uJ-qE {\n  border: 1px solid var(--primary-color, #4CAF50);\n}\n\n.Button_borderPrimaryVariant__qkdEf {\n  border: 1px solid var(--primary-color-varient, #43A047);\n}\n\n.Button_borderSecondary__-P9is {\n  border: 1px solid var(--secondary-color, #14b9c3);\n}\n\n.Button_borderSecondaryVariant__6dCZ7 {\n  border: 1px solid var(--secondary-color-varient, #0b969f);\n}\n\n.Button_borderBackground__lm7yB {\n  border: 1px solid var(--background-color, #ffffff);\n}\n\n.Button_borderSurface__AJQxT {\n  border: 1px solid var(--surface-color, #EEEEEE);\n}\n\n.Button_borderSurfaceVariant__Cfk2f {\n  border: 1px solid var(--surface-color-variant, #ccc);\n}\n\n.Button_borderContainer__GXDhL {\n  border: 1px solid var(--container-color, #ffffff);\n}\n\n.Button_borderError__f2lZ- {\n  border: 1px solid var(--error-color, #B00020);\n}\n\n.Button_none__vPYWY {\n  border: none;\n}\n\n.Button_transparent__aet0J {\n  background-color: transparent !important;\n  border: none;\n  outline: none;\n  padding: 0px;\n  margin: 0px;\n}";
+var style$8 = {"customButtonStyle":"Button_customButtonStyle__1TOXE","primary":"Button_primary__auYD2","primaryVariant":"Button_primaryVariant__NbKc2","secondary":"Button_secondary__DVppl","secondaryVariant":"Button_secondaryVariant__suwON","background":"Button_background__E82uk","surface":"Button_surface__EF0NA","surfaceVariant":"Button_surfaceVariant__-SFxJ","container":"Button_container__E1Hq5","error":"Button_error__Yab6f","borderPrimary":"Button_borderPrimary__uJ-qE","borderPrimaryVariant":"Button_borderPrimaryVariant__qkdEf","borderSecondary":"Button_borderSecondary__-P9is","borderSecondaryVariant":"Button_borderSecondaryVariant__6dCZ7","borderBackground":"Button_borderBackground__lm7yB","borderSurface":"Button_borderSurface__AJQxT","borderSurfaceVariant":"Button_borderSurfaceVariant__Cfk2f","borderContainer":"Button_borderContainer__GXDhL","borderError":"Button_borderError__f2lZ-","none":"Button_none__vPYWY","transparent":"Button_transparent__aet0J"};
+styleInject(css_248z$f);
 
-var _tmpl$$g = /*#__PURE__*/template(`<button>`);
+var _tmpl$$j = /*#__PURE__*/template(`<button>`);
 const Button = props => {
-  const styleTypeConst = props.styleType ?? "accent";
+  const [local, others] = splitProps(props, ["theme", "transparent", "borderTheme"]);
+  const isTransparent = () => {
+    if (Object.keys(props).includes("transparent") && props.transparent !== false) {
+      return true;
+    }
+    return false;
+  };
+  const transparent = createMemo(() => isTransparent() ? style$8.transparent : "");
+  const getBorderThemeName = theme => {
+    switch (theme) {
+      case "primary":
+        return "borderPrimary";
+      case "primaryVariant":
+        return "borderPrimaryVariant";
+      case "secondary":
+        return "borderSecondary";
+      case "secondaryVariant":
+        return "borderSecondaryVariant";
+      case "surface":
+        return "borderSurface";
+      case "surfaceVariant":
+        return "borderSurfaceVariant";
+      case "background":
+        return "borderBackground";
+      case "container":
+        return "borderContainer";
+      case "error":
+        return "borderError";
+      default:
+        return "none";
+    }
+  };
   return (() => {
-    var _el$ = _tmpl$$g();
-    spread(_el$, mergeProps(props, {
-      "onClick": e => {
-        if (props.onClick) props.onClick(e);
-      },
+    var _el$ = _tmpl$$j();
+    spread(_el$, mergeProps(others, {
       get ["class"]() {
-        return `${style$9[styleTypeConst]} ${style$9.customButtonStyle} ${props.transparent ? props.transparent : ""} ${props.class ?? ""} `;
+        return `${style$8[local?.theme ?? "container"]} ${style$8[getBorderThemeName(local?.borderTheme ?? 'none')]} ${style$8.customButtonStyle} ${transparent()} ${props?.class ?? ""} `;
       }
     }), false, true);
     insert(_el$, () => props.children);
@@ -550,11 +578,11 @@ const Button = props => {
   })();
 };
 
-var css_248z$c = ".Carosel-module_carouselHeader__JAhGf {\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  border-bottom: 1px dotted;\n}\n.Carosel-module_carouselHeader__JAhGf div {\n  flex-grow: 1;\n  text-align: center;\n}\n.Carosel-module_carouselHeader__JAhGf button {\n  flex-basis: 1;\n}\n\n.Carosel-module_carousel__cHoMx {\n  position: relative;\n  width: 100%;\n  margin: auto;\n  overflow: hidden;\n  border: 2px solid #ddd;\n  border-radius: 10px;\n}\n\n.Carosel-module_carouselSlides__MgPU3 {\n  display: flex;\n  transition: transform 0.5s ease-in-out;\n  width: 100%;\n  height: 100%;\n}\n\n.Carosel-module_carouselSlide__--NkY {\n  min-width: 100%;\n  padding: 5px;\n  box-sizing: border-box;\n}\n\n.Carosel-module_carouselButton__E1gGu {\n  opacity: 0.5;\n  color: white;\n  border: none;\n  padding: 10px;\n  cursor: pointer;\n}\n.Carosel-module_carouselButton__E1gGu:hover {\n  opacity: 1;\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNhcm9zZWwubW9kdWxlLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxhQUFhO0VBQ2IsbUJBQW1CO0VBQ25CLFdBQVc7RUFDWCx5QkFBeUI7QUFDM0I7QUFDQTtFQUNFLFlBQVk7RUFDWixrQkFBa0I7QUFDcEI7QUFDQTtFQUNFLGFBQWE7QUFDZjs7QUFFQTtFQUNFLGtCQUFrQjtFQUNsQixXQUFXO0VBQ1gsWUFBWTtFQUNaLGdCQUFnQjtFQUNoQixzQkFBc0I7RUFDdEIsbUJBQW1CO0FBQ3JCOztBQUVBO0VBQ0UsYUFBYTtFQUNiLHNDQUFzQztFQUN0QyxXQUFXO0VBQ1gsWUFBWTtBQUNkOztBQUVBO0VBQ0UsZUFBZTtFQUNmLFlBQVk7RUFDWixzQkFBc0I7QUFDeEI7O0FBRUE7RUFDRSxZQUFZO0VBQ1osWUFBWTtFQUNaLFlBQVk7RUFDWixhQUFhO0VBQ2IsZUFBZTtBQUNqQjtBQUNBO0VBQ0UsVUFBVTtBQUNaIiwiZmlsZSI6IkNhcm9zZWwubW9kdWxlLnNjc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuY2Fyb3VzZWxIZWFkZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogcm93O1xuICB3aWR0aDogMTAwJTtcbiAgYm9yZGVyLWJvdHRvbTogMXB4IGRvdHRlZDtcbn1cbi5jYXJvdXNlbEhlYWRlciBkaXYge1xuICBmbGV4LWdyb3c6IDE7XG4gIHRleHQtYWxpZ246IGNlbnRlcjtcbn1cbi5jYXJvdXNlbEhlYWRlciBidXR0b24ge1xuICBmbGV4LWJhc2lzOiAxO1xufVxuXG4uY2Fyb3VzZWwge1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIHdpZHRoOiAxMDAlO1xuICBtYXJnaW46IGF1dG87XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIGJvcmRlcjogMnB4IHNvbGlkICNkZGQ7XG4gIGJvcmRlci1yYWRpdXM6IDEwcHg7XG59XG5cbi5jYXJvdXNlbFNsaWRlcyB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIHRyYW5zaXRpb246IHRyYW5zZm9ybSAwLjVzIGVhc2UtaW4tb3V0O1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xufVxuXG4uY2Fyb3VzZWxTbGlkZSB7XG4gIG1pbi13aWR0aDogMTAwJTtcbiAgcGFkZGluZzogNXB4O1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xufVxuXG4uY2Fyb3VzZWxCdXR0b24ge1xuICBvcGFjaXR5OiAwLjU7XG4gIGNvbG9yOiB3aGl0ZTtcbiAgYm9yZGVyOiBub25lO1xuICBwYWRkaW5nOiAxMHB4O1xuICBjdXJzb3I6IHBvaW50ZXI7XG59XG4uY2Fyb3VzZWxCdXR0b246aG92ZXIge1xuICBvcGFjaXR5OiAxO1xufSJdfQ== */";
-var style$8 = {"carouselHeader":"Carosel-module_carouselHeader__JAhGf","carousel":"Carosel-module_carousel__cHoMx","carouselSlides":"Carosel-module_carouselSlides__MgPU3","carouselSlide":"Carosel-module_carouselSlide__--NkY","carouselButton":"Carosel-module_carouselButton__E1gGu"};
-styleInject(css_248z$c);
+var css_248z$e = ".Carosel-module_carouselHeader__JAhGf {\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n}\n.Carosel-module_carouselHeader__JAhGf div {\n  flex-grow: 1;\n  text-align: center;\n}\n.Carosel-module_carouselHeader__JAhGf button {\n  flex-basis: 1;\n}\n\n.Carosel-module_carousel__cHoMx {\n  position: relative;\n  width: 100%;\n  margin: auto;\n  overflow: hidden;\n  border-radius: 10px;\n}\n\n.Carosel-module_carouselSlides__MgPU3 {\n  display: flex;\n  transition: transform 0.5s ease-in-out;\n  width: 100%;\n  height: 100%;\n}\n\n.Carosel-module_carouselSlide__--NkY {\n  min-width: 100%;\n  padding: 5px;\n  box-sizing: border-box;\n}\n\n.Carosel-module_carouselButton__E1gGu {\n  opacity: 0.5;\n  border: none;\n  padding: 10px;\n  cursor: pointer;\n}\n.Carosel-module_carouselButton__E1gGu:hover {\n  opacity: 1;\n}";
+var style$7 = {"carouselHeader":"Carosel-module_carouselHeader__JAhGf","carousel":"Carosel-module_carousel__cHoMx","carouselSlides":"Carosel-module_carouselSlides__MgPU3","carouselSlide":"Carosel-module_carouselSlide__--NkY","carouselButton":"Carosel-module_carouselButton__E1gGu"};
+styleInject(css_248z$e);
 
-var _tmpl$$f = /*#__PURE__*/template(`<div>No <!> Found`),
+var _tmpl$$i = /*#__PURE__*/template(`<div>No <!> Found`),
   _tmpl$2$9 = /*#__PURE__*/template(`<div>No Elements Found`),
   _tmpl$3$4 = /*#__PURE__*/template(`<div>`),
   _tmpl$4$2 = /*#__PURE__*/template(`<div><div><div></div></div><div>`);
@@ -627,7 +655,7 @@ const Carousel = ({
       }
     }
     return props.notFoundName ? (() => {
-      var _el$ = _tmpl$$f(),
+      var _el$ = _tmpl$$i(),
         _el$2 = _el$.firstChild,
         _el$4 = _el$2.nextSibling;
         _el$4.nextSibling;
@@ -668,7 +696,7 @@ const Carousel = ({
         _el$11 = _el$7.nextSibling;
       insert(_el$7, createComponent(Button, {
         get ["class"]() {
-          return `${style$8.carouselButton}`;
+          return `${style$7.carouselButton}`;
         },
         onClick: prevSlide,
         children: "\u276E"
@@ -681,7 +709,7 @@ const Carousel = ({
         get children() {
           var _el$9 = _tmpl$3$4();
           insert(_el$9, slideName);
-          createRenderEffect(() => className(_el$9, `${style$8.carouselSlide}`));
+          createRenderEffect(() => className(_el$9, `${style$7.carouselSlide}`));
           return _el$9;
         }
       }), null);
@@ -692,23 +720,23 @@ const Carousel = ({
         get children() {
           var _el$10 = _tmpl$3$4();
           insert(_el$10, slideName);
-          createRenderEffect(() => className(_el$10, `${style$8.carouselSlide}`));
+          createRenderEffect(() => className(_el$10, `${style$7.carouselSlide}`));
           return _el$10;
         }
       }), null);
       insert(_el$7, createComponent(Button, {
         get ["class"]() {
-          return `${style$8.carouselButton}`;
+          return `${style$7.carouselButton}`;
         },
         onClick: nextSlide,
         children: "\u276F"
       }), null);
       insert(_el$11, slideElement);
       createRenderEffect(_p$ => {
-        var _v$ = `${style$8.carousel}`,
-          _v$2 = `${style$8.carouselHeader}`,
-          _v$3 = `${style$8.carouselSlides}`,
-          _v$4 = `${style$8.carouselSlide}`;
+        var _v$ = `${style$7.carousel}`,
+          _v$2 = `${style$7.carouselHeader}`,
+          _v$3 = `${style$7.carouselSlides}`,
+          _v$4 = `${style$7.carouselSlide}`;
         _v$ !== _p$.e && className(_el$6, _p$.e = _v$);
         _v$2 !== _p$.t && className(_el$7, _p$.t = _v$2);
         _v$3 !== _p$.a && className(_el$8, _p$.a = _v$3);
@@ -733,15 +761,15 @@ const Slide = props => {
   return createMemo(() => props.children);
 };
 
-var css_248z$b = ".Chip-module_Chip__HWK4W {\n  display: flex;\n  flex-direction: row;\n  padding: 5px 10px;\n  margin-left: var(--spacing-1, 8px);\n  border-radius: 15px;\n  height: -moz-max-content;\n  height: max-content;\n  min-width: -moz-min-content;\n  min-width: min-content;\n  max-width: -moz-max-content;\n  max-width: max-content;\n  margin: 5px;\n}\n.Chip-module_Chip__HWK4W span {\n  margin: 0px 2px;\n  width: -moz-max-content;\n  width: max-content;\n  max-width: 10em;\n  text-overflow: ellipsis;\n}\n.Chip-module_Chip__HWK4W button {\n  font-size: 1rem !important;\n  height: -moz-min-content;\n  height: min-content;\n  margin: auto 0px;\n  padding: 0px calc(var(--spacing-1, 8px) / 2) !important;\n  margin-left: 5px !important;\n  border-radius: var(--border-radius-md, 4px);\n}\n\n.Chip-module_removeChipButton__kl1mU {\n  margin: 0 !important;\n  margin-left: 5px !important;\n  padding: 0 !important;\n  font-size: 1rem !important;\n}\n\n.Chip-module_hover__fvVQS:hover {\n  cursor: pointer;\n}\n\n.Chip-module_primary__rvetC {\n  background-color: var(--primary-color, #3F51B5);\n  color: var(--on-primary-color, white);\n}\n.Chip-module_primary__rvetC button {\n  color: var(--on-primary-color, white);\n}\n\n.Chip-module_accent__bZLVs {\n  background-color: var(--secondary-color, #5C6BC0);\n  color: var(--on-secondary-color, white);\n}\n.Chip-module_accent__bZLVs button {\n  color: var(--on-secondary-color, white);\n}\n\n.Chip-module_tertiary__TtdnV {\n  background-color: var(--tertiary-color, #009688);\n  color: var(--on-tertiary, white);\n}\n.Chip-module_tertiary__TtdnV button {\n  color: var(--on-tertiary, white);\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNoaXAubW9kdWxlLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxhQUFhO0VBQ2IsbUJBQW1CO0VBQ25CLGlCQUFpQjtFQUNqQixrQ0FBa0M7RUFDbEMsbUJBQW1CO0VBQ25CLHdCQUFtQjtFQUFuQixtQkFBbUI7RUFDbkIsMkJBQXNCO0VBQXRCLHNCQUFzQjtFQUN0QiwyQkFBc0I7RUFBdEIsc0JBQXNCO0VBQ3RCLFdBQVc7QUFDYjtBQUNBO0VBQ0UsZUFBZTtFQUNmLHVCQUFrQjtFQUFsQixrQkFBa0I7RUFDbEIsZUFBZTtFQUNmLHVCQUF1QjtBQUN6QjtBQUNBO0VBQ0UsMEJBQTBCO0VBQzFCLHdCQUFtQjtFQUFuQixtQkFBbUI7RUFDbkIsZ0JBQWdCO0VBQ2hCLHVEQUF1RDtFQUN2RCwyQkFBMkI7RUFDM0IsMkNBQTJDO0FBQzdDOztBQUVBO0VBQ0Usb0JBQW9CO0VBQ3BCLDJCQUEyQjtFQUMzQixxQkFBcUI7RUFDckIsMEJBQTBCO0FBQzVCOztBQUVBO0VBQ0UsZUFBZTtBQUNqQjs7QUFFQTtFQUNFLCtDQUErQztFQUMvQyxxQ0FBcUM7QUFDdkM7QUFDQTtFQUNFLHFDQUFxQztBQUN2Qzs7QUFFQTtFQUNFLGlEQUFpRDtFQUNqRCx1Q0FBdUM7QUFDekM7QUFDQTtFQUNFLHVDQUF1QztBQUN6Qzs7QUFFQTtFQUNFLGdEQUFnRDtFQUNoRCxnQ0FBZ0M7QUFDbEM7QUFDQTtFQUNFLGdDQUFnQztBQUNsQyIsImZpbGUiOiJDaGlwLm1vZHVsZS5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLkNoaXAge1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogcm93O1xuICBwYWRkaW5nOiA1cHggMTBweDtcbiAgbWFyZ2luLWxlZnQ6IHZhcigtLXNwYWNpbmctMSwgOHB4KTtcbiAgYm9yZGVyLXJhZGl1czogMTVweDtcbiAgaGVpZ2h0OiBtYXgtY29udGVudDtcbiAgbWluLXdpZHRoOiBtaW4tY29udGVudDtcbiAgbWF4LXdpZHRoOiBtYXgtY29udGVudDtcbiAgbWFyZ2luOiA1cHg7XG59XG4uQ2hpcCBzcGFuIHtcbiAgbWFyZ2luOiAwcHggMnB4O1xuICB3aWR0aDogbWF4LWNvbnRlbnQ7XG4gIG1heC13aWR0aDogMTBlbTtcbiAgdGV4dC1vdmVyZmxvdzogZWxsaXBzaXM7XG59XG4uQ2hpcCBidXR0b24ge1xuICBmb250LXNpemU6IDFyZW0gIWltcG9ydGFudDtcbiAgaGVpZ2h0OiBtaW4tY29udGVudDtcbiAgbWFyZ2luOiBhdXRvIDBweDtcbiAgcGFkZGluZzogMHB4IGNhbGModmFyKC0tc3BhY2luZy0xLCA4cHgpIC8gMikgIWltcG9ydGFudDtcbiAgbWFyZ2luLWxlZnQ6IDVweCAhaW1wb3J0YW50O1xuICBib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzLW1kLCA0cHgpO1xufVxuXG4ucmVtb3ZlQ2hpcEJ1dHRvbiB7XG4gIG1hcmdpbjogMCAhaW1wb3J0YW50O1xuICBtYXJnaW4tbGVmdDogNXB4ICFpbXBvcnRhbnQ7XG4gIHBhZGRpbmc6IDAgIWltcG9ydGFudDtcbiAgZm9udC1zaXplOiAxcmVtICFpbXBvcnRhbnQ7XG59XG5cbi5ob3Zlcjpob3ZlciB7XG4gIGN1cnNvcjogcG9pbnRlcjtcbn1cblxuLnByaW1hcnkge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1wcmltYXJ5LWNvbG9yLCAjM0Y1MUI1KTtcbiAgY29sb3I6IHZhcigtLW9uLXByaW1hcnktY29sb3IsIHdoaXRlKTtcbn1cbi5wcmltYXJ5IGJ1dHRvbiB7XG4gIGNvbG9yOiB2YXIoLS1vbi1wcmltYXJ5LWNvbG9yLCB3aGl0ZSk7XG59XG5cbi5hY2NlbnQge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zZWNvbmRhcnktY29sb3IsICM1QzZCQzApO1xuICBjb2xvcjogdmFyKC0tb24tc2Vjb25kYXJ5LWNvbG9yLCB3aGl0ZSk7XG59XG4uYWNjZW50IGJ1dHRvbiB7XG4gIGNvbG9yOiB2YXIoLS1vbi1zZWNvbmRhcnktY29sb3IsIHdoaXRlKTtcbn1cblxuLnRlcnRpYXJ5IHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tdGVydGlhcnktY29sb3IsICMwMDk2ODgpO1xuICBjb2xvcjogdmFyKC0tb24tdGVydGlhcnksIHdoaXRlKTtcbn1cbi50ZXJ0aWFyeSBidXR0b24ge1xuICBjb2xvcjogdmFyKC0tb24tdGVydGlhcnksIHdoaXRlKTtcbn0iXX0= */";
-var style$7 = {"Chip":"Chip-module_Chip__HWK4W","removeChipButton":"Chip-module_removeChipButton__kl1mU","hover":"Chip-module_hover__fvVQS","primary":"Chip-module_primary__rvetC","accent":"Chip-module_accent__bZLVs","tertiary":"Chip-module_tertiary__TtdnV"};
-styleInject(css_248z$b);
+var css_248z$d = ".Chip-module_Chip__HWK4W {\n  display: flex;\n  flex-direction: row;\n  padding: 5px 10px;\n  margin-left: 8px;\n  border-radius: 15px;\n  height: -moz-max-content;\n  height: max-content;\n  min-width: -moz-min-content;\n  min-width: min-content;\n  max-width: -moz-max-content;\n  max-width: max-content;\n  margin: 5px;\n}\n.Chip-module_Chip__HWK4W span {\n  margin: 0px 2px;\n  width: -moz-max-content;\n  width: max-content;\n  max-width: 10em;\n  text-overflow: ellipsis;\n}\n.Chip-module_Chip__HWK4W button {\n  font-size: 1rem !important;\n  height: -moz-min-content;\n  height: min-content;\n  margin: auto 0px;\n  padding: 0px 4px !important;\n  margin-left: 5px !important;\n  border-radius: 8px;\n}\n\n.Chip-module_removeChipButton__kl1mU {\n  margin: 0 !important;\n  margin-left: 5px !important;\n  padding: 0 !important;\n  font-size: 1rem !important;\n}\n\n.Chip-module_hover__fvVQS:hover {\n  cursor: pointer;\n}\n\n.Chip-module_tertiary__TtdnV {\n  background-color: inherit;\n  color: var(--on-container-color, #000);\n  border: 1px solid var(--primary-color, #4CAF50);\n  margin-right: 6px;\n}\n.Chip-module_tertiary__TtdnV button {\n  background-color: inherit;\n  color: var(--on-container-color, #000);\n  font-weight: 700;\n}";
+var style$6 = {"Chip":"Chip-module_Chip__HWK4W","removeChipButton":"Chip-module_removeChipButton__kl1mU","hover":"Chip-module_hover__fvVQS","tertiary":"Chip-module_tertiary__TtdnV"};
+styleInject(css_248z$d);
 
-var _tmpl$$e = /*#__PURE__*/template(`<span>`),
+var _tmpl$$h = /*#__PURE__*/template(`<span>`),
   _tmpl$2$8 = /*#__PURE__*/template(`<span>:`),
   _tmpl$3$3 = /*#__PURE__*/template(`<span><span>`);
 const Chip = props => {
-  const hoverChip = props.onClick ? `${style$7.hover}` : "";
+  const hoverChip = props.onClick ? `${style$6.hover}` : "";
   return (() => {
     var _el$ = _tmpl$3$3(),
       _el$4 = _el$.firstChild;
@@ -752,7 +780,7 @@ const Chip = props => {
       },
       get children() {
         return [(() => {
-          var _el$2 = _tmpl$$e();
+          var _el$2 = _tmpl$$h();
           insert(_el$2, () => props.key);
           return _el$2;
         })(), _tmpl$2$8()];
@@ -765,11 +793,9 @@ const Chip = props => {
       },
       get children() {
         return createComponent(Button, {
-          get styleType() {
-            return props.styleType ?? 'tertiary';
-          },
+          transparent: true,
           get ["class"]() {
-            return `${style$7.hover} ${style$7.removeChipButton}`;
+            return `${style$6.hover} ${style$6.removeChipButton}`;
           },
           get onClick() {
             return props.remove;
@@ -778,17 +804,17 @@ const Chip = props => {
         });
       }
     }), null);
-    createRenderEffect(() => className(_el$, `${style$7[props?.styleType ?? 'tertiary']} ${style$7.Chip} ${props.class ?? ""} ${hoverChip}`));
+    createRenderEffect(() => className(_el$, `${style$6['tertiary']} ${style$6.Chip} ${props.class ?? ""} ${hoverChip}`));
     return _el$;
   })();
 };
 delegateEvents(["click"]);
 
-var css_248z$a = ".chipbar-module_chipbar__PjssB {\n  display: flex;\n  flex-direction: row;\n  min-width: 100%;\n  width: -moz-max-content;\n  width: max-content;\n  max-width: 100%;\n  padding: var(--spacing-1, 8px) 0px;\n  border-bottom: 1px solid var(--on-background, white);\n}\n\n.chipbar-module_chipContainer__lnYfX {\n  display: flex;\n  flex-direction: row;\n  overflow-x: hidden;\n  scroll-behavior: smooth;\n  flex-grow: 1;\n}\n.chipbar-module_chipContainer__lnYfX span {\n  height: -moz-min-content;\n  height: min-content;\n  margin: auto 0px;\n}\n.chipbar-module_chipContainer__lnYfX span button {\n  width: -moz-max-content;\n  width: max-content;\n  padding: 5px;\n}\n\n.chipbar-module_leftArrow__OS8vV {\n  margin-right: 10px;\n  align-self: flex-start;\n  margin: auto 0px;\n}\n\n.chipbar-module_rightArrow__T4ubJ {\n  margin-left: 10px;\n  align-self: flex-end;\n  margin: auto 0px;\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNoaXBiYXIubW9kdWxlLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxhQUFhO0VBQ2IsbUJBQW1CO0VBQ25CLGVBQWU7RUFDZix1QkFBa0I7RUFBbEIsa0JBQWtCO0VBQ2xCLGVBQWU7RUFDZixrQ0FBa0M7RUFDbEMsb0RBQW9EO0FBQ3REOztBQUVBO0VBQ0UsYUFBYTtFQUNiLG1CQUFtQjtFQUNuQixrQkFBa0I7RUFDbEIsdUJBQXVCO0VBQ3ZCLFlBQVk7QUFDZDtBQUNBO0VBQ0Usd0JBQW1CO0VBQW5CLG1CQUFtQjtFQUNuQixnQkFBZ0I7QUFDbEI7QUFDQTtFQUNFLHVCQUFrQjtFQUFsQixrQkFBa0I7RUFDbEIsWUFBWTtBQUNkOztBQUVBO0VBQ0Usa0JBQWtCO0VBQ2xCLHNCQUFzQjtFQUN0QixnQkFBZ0I7QUFDbEI7O0FBRUE7RUFDRSxpQkFBaUI7RUFDakIsb0JBQW9CO0VBQ3BCLGdCQUFnQjtBQUNsQiIsImZpbGUiOiJjaGlwYmFyLm1vZHVsZS5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLmNoaXBiYXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogcm93O1xuICBtaW4td2lkdGg6IDEwMCU7XG4gIHdpZHRoOiBtYXgtY29udGVudDtcbiAgbWF4LXdpZHRoOiAxMDAlO1xuICBwYWRkaW5nOiB2YXIoLS1zcGFjaW5nLTEsIDhweCkgMHB4O1xuICBib3JkZXItYm90dG9tOiAxcHggc29saWQgdmFyKC0tb24tYmFja2dyb3VuZCwgd2hpdGUpO1xufVxuXG4uY2hpcENvbnRhaW5lciB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiByb3c7XG4gIG92ZXJmbG93LXg6IGhpZGRlbjtcbiAgc2Nyb2xsLWJlaGF2aW9yOiBzbW9vdGg7XG4gIGZsZXgtZ3JvdzogMTtcbn1cbi5jaGlwQ29udGFpbmVyIHNwYW4ge1xuICBoZWlnaHQ6IG1pbi1jb250ZW50O1xuICBtYXJnaW46IGF1dG8gMHB4O1xufVxuLmNoaXBDb250YWluZXIgc3BhbiBidXR0b24ge1xuICB3aWR0aDogbWF4LWNvbnRlbnQ7XG4gIHBhZGRpbmc6IDVweDtcbn1cblxuLmxlZnRBcnJvdyB7XG4gIG1hcmdpbi1yaWdodDogMTBweDtcbiAgYWxpZ24tc2VsZjogZmxleC1zdGFydDtcbiAgbWFyZ2luOiBhdXRvIDBweDtcbn1cblxuLnJpZ2h0QXJyb3cge1xuICBtYXJnaW4tbGVmdDogMTBweDtcbiAgYWxpZ24tc2VsZjogZmxleC1lbmQ7XG4gIG1hcmdpbjogYXV0byAwcHg7XG59Il19 */";
-var style$6 = {"chipbar":"chipbar-module_chipbar__PjssB","chipContainer":"chipbar-module_chipContainer__lnYfX","leftArrow":"chipbar-module_leftArrow__OS8vV","rightArrow":"chipbar-module_rightArrow__T4ubJ"};
-styleInject(css_248z$a);
+var css_248z$c = ".chipbar-module_chipbar__PjssB {\n  display: flex;\n  flex-direction: row;\n  min-width: 100%;\n  width: -moz-max-content;\n  width: max-content;\n  max-width: 100%;\n  padding: var(--spacing-1, 8px) 0px;\n  border-bottom: 1px solid var(--on-background, white);\n}\n\n.chipbar-module_chipContainer__lnYfX {\n  display: flex;\n  flex-direction: row;\n  overflow-x: hidden;\n  scroll-behavior: smooth;\n  flex-grow: 1;\n}\n.chipbar-module_chipContainer__lnYfX span {\n  height: -moz-min-content;\n  height: min-content;\n  margin: auto 0px;\n}\n.chipbar-module_chipContainer__lnYfX span button {\n  width: -moz-max-content;\n  width: max-content;\n  padding: 5px;\n}\n\n.chipbar-module_leftArrow__OS8vV {\n  margin-right: 10px;\n  align-self: flex-start;\n  margin: auto 0px;\n}\n\n.chipbar-module_rightArrow__T4ubJ {\n  margin-left: 10px;\n  align-self: flex-end;\n  margin: auto 0px;\n}";
+var style$5 = {"chipbar":"chipbar-module_chipbar__PjssB","chipContainer":"chipbar-module_chipContainer__lnYfX","leftArrow":"chipbar-module_leftArrow__OS8vV","rightArrow":"chipbar-module_rightArrow__T4ubJ"};
+styleInject(css_248z$c);
 
-var _tmpl$$d = /*#__PURE__*/template(`<span>`),
+var _tmpl$$g = /*#__PURE__*/template(`<span>`),
   _tmpl$2$7 = /*#__PURE__*/template(`<div><div>`);
 function Chipbar(props) {
   const hasSignalChips = props.chips !== undefined;
@@ -850,12 +876,12 @@ function Chipbar(props) {
         return showLeft();
       },
       get children() {
-        var _el$2 = _tmpl$$d();
+        var _el$2 = _tmpl$$g();
         insert(_el$2, createComponent(Button, {
           onMouseDown: scrollLeft,
           children: "\u2190"
         }));
-        createRenderEffect(() => className(_el$2, `${style$6.leftArrow}`));
+        createRenderEffect(() => className(_el$2, `${style$5.leftArrow}`));
         return _el$2;
       }
     }), _el$3);
@@ -865,7 +891,7 @@ function Chipbar(props) {
         return (hasSignalChips || !hasSignalChips && props.clearAll !== undefined);
       },
       get children() {
-        var _el$4 = _tmpl$$d();
+        var _el$4 = _tmpl$$g();
         insert(_el$4, createComponent(Button, {
           onClick: () => clearAll() ,
           children: "Clear All"
@@ -909,18 +935,18 @@ function Chipbar(props) {
         return showRight();
       },
       get children() {
-        var _el$5 = _tmpl$$d();
+        var _el$5 = _tmpl$$g();
         insert(_el$5, createComponent(Button, {
           onMouseDown: scrollRight,
           children: "\u2192"
         }));
-        createRenderEffect(() => className(_el$5, `${style$6.rightArrow}`));
+        createRenderEffect(() => className(_el$5, `${style$5.rightArrow}`));
         return _el$5;
       }
     }), null);
     createRenderEffect(_p$ => {
-      var _v$ = `${style$6.chipbar}`,
-        _v$2 = `${style$6.chipContainer}`;
+      var _v$ = `${style$5.chipbar}`,
+        _v$2 = `${style$5.chipContainer}`;
       _v$ !== _p$.e && className(_el$, _p$.e = _v$);
       _v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
       return _p$;
@@ -932,18 +958,18 @@ function Chipbar(props) {
   })();
 }
 
-var css_248z$9 = ".body-module_compBody__d3HyU {\n  width: 70%;\n  margin: 0 auto;\n  border-radius: 15px;\n  padding: 8px;\n  padding-top: 0px;\n}\n@media screen and (max-width: 768px) {\n  .body-module_compBody__d3HyU {\n    width: 95%;\n    margin: 0 auto;\n  }\n}\n\n.body-module_primary__UR7PU {\n  background-color: var(--primary-color);\n  color: var(--on-primary-color);\n}\n\n.body-module_accent__6IVSJ {\n  background-color: var(--secondary-color);\n  color: var(--on-secondary-color);\n}\n\n.body-module_tertiary__6YRE8 {\n  background-color: var(--tertiary-color);\n  color: var(--on-tertiary-color);\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJvZHkubW9kdWxlLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxVQUFVO0VBQ1YsY0FBYztFQUNkLG1CQUFtQjtFQUNuQixZQUFZO0VBQ1osZ0JBQWdCO0FBQ2xCO0FBQ0E7RUFDRTtJQUNFLFVBQVU7SUFDVixjQUFjO0VBQ2hCO0FBQ0Y7O0FBRUE7RUFDRSxzQ0FBc0M7RUFDdEMsOEJBQThCO0FBQ2hDOztBQUVBO0VBQ0Usd0NBQXdDO0VBQ3hDLGdDQUFnQztBQUNsQzs7QUFFQTtFQUNFLHVDQUF1QztFQUN2QywrQkFBK0I7QUFDakMiLCJmaWxlIjoiYm9keS5tb2R1bGUuc2NzcyIsInNvdXJjZXNDb250ZW50IjpbIi5jb21wQm9keSB7XG4gIHdpZHRoOiA3MCU7XG4gIG1hcmdpbjogMCBhdXRvO1xuICBib3JkZXItcmFkaXVzOiAxNXB4O1xuICBwYWRkaW5nOiA4cHg7XG4gIHBhZGRpbmctdG9wOiAwcHg7XG59XG5AbWVkaWEgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiA3NjhweCkge1xuICAuY29tcEJvZHkge1xuICAgIHdpZHRoOiA5NSU7XG4gICAgbWFyZ2luOiAwIGF1dG87XG4gIH1cbn1cblxuLnByaW1hcnkge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1wcmltYXJ5LWNvbG9yKTtcbiAgY29sb3I6IHZhcigtLW9uLXByaW1hcnktY29sb3IpO1xufVxuXG4uYWNjZW50IHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc2Vjb25kYXJ5LWNvbG9yKTtcbiAgY29sb3I6IHZhcigtLW9uLXNlY29uZGFyeS1jb2xvcik7XG59XG5cbi50ZXJ0aWFyeSB7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXRlcnRpYXJ5LWNvbG9yKTtcbiAgY29sb3I6IHZhcigtLW9uLXRlcnRpYXJ5LWNvbG9yKTtcbn0iXX0= */";
-var styles$3 = {"compBody":"body-module_compBody__d3HyU","primary":"body-module_primary__UR7PU","accent":"body-module_accent__6IVSJ","tertiary":"body-module_tertiary__6YRE8"};
-styleInject(css_248z$9);
+var css_248z$b = ".body-module_compBody__d3HyU {\n  width: 70%;\n  margin: 0 auto;\n  border-radius: 15px;\n  padding: 8px;\n  padding-top: 0px;\n  background-color: var(--surface-color, #EEEEEE);\n  color: var(--on-surface-color, #000000);\n}\n@media screen and (max-width: 768px) {\n  .body-module_compBody__d3HyU {\n    width: 95%;\n    margin: 0 auto;\n  }\n}";
+var styles$6 = {"compBody":"body-module_compBody__d3HyU"};
+styleInject(css_248z$b);
 
-var _tmpl$$c = /*#__PURE__*/template(`<div>`);
+var _tmpl$$f = /*#__PURE__*/template(`<div>`);
 const Body = props => {
   const [customProps, normalProps] = splitProps(props, ["children", "class", 'style']);
   return (() => {
-    var _el$ = _tmpl$$c();
+    var _el$ = _tmpl$$f();
     spread(_el$, mergeProps(normalProps, {
       get ["class"]() {
-        return `${styles$3[customProps?.style ?? 'primary']} ${styles$3.compBody} ${customProps.class ?? ""}`;
+        return `${styles$6.compBody} ${customProps.class ?? ""}`;
       }
     }), false, true);
     insert(_el$, () => customProps.children);
@@ -958,6 +984,10 @@ const Provider$1 = props => {
   const [getFocused, setFocused] = createSignal(false);
   const [getValue, setValue] = createSignal(props.value ?? "");
   const [getFieldType, setFieldType] = createSignal(props.type ?? "text");
+  const [getFormFieldRef, setFormFieldRef] = createSignal();
+  const [getErrors, setErrors] = createSignal({
+    err: []
+  });
   return createComponent(FormFieldContext.Provider, {
     get value() {
       return {
@@ -971,6 +1001,10 @@ const Provider$1 = props => {
         setValue,
         getFieldType,
         setFieldType,
+        getFormFieldRef,
+        setFormFieldRef,
+        getErrors,
+        setErrors,
         formName: props.formName
       };
     },
@@ -993,9 +1027,7 @@ function useFormProvider() {
  * @param theme - The theme to set. Defaults to 'dark'.
  */
 function addTheme(theme = 'dark') {
-  createEffect(() => {
-    document.body.setAttribute('data-theme', theme);
-  });
+  document.body.setAttribute('data-theme', theme);
 }
 function isNullish(params) {
   return params === null || params === undefined;
@@ -1056,50 +1088,90 @@ function Clone(obj, maintainFunctions, seen = new WeakMap()) {
   return clonedObj;
 }
 
-function useEventSignal(eventType, initialValue, triggerFunc, ref = document) {
-  const [signal, setSignal] = createSignal(initialValue);
-  const handleEvent = event => {
-    triggerFunc(event, setSignal);
-  };
-  ref.addEventListener(eventType, handleEvent);
-  onCleanup(() => {
-    ref.removeEventListener(eventType, handleEvent);
-  });
-  return signal;
-}
-function useClickOutside(ref, handler) {
-  const mouse = useEventSignal("mousemove", {
-    x: 0,
-    y: 0
-  }, (e, set) => {
-    set({
-      x: e.clientX,
-      y: e.clientY
-    });
-  });
-  const listener = e => {
-    if (isNullish(ref())) return;
-    const mousePos = mouse();
-    const {
-      top,
-      bottom,
-      left,
-      right
-    } = ref().getBoundingClientRect();
-    const conditions = [mousePos.x < left, mousePos.x > right, mousePos.y < top, mousePos.y > bottom];
-    if (conditions.includes(true)) {
-      handler(e);
+// export function useClickOutside(
+//   ref: Accessor<AllHTMLElements | undefined | null>, 
+//   handler: (e: MouseEvent) => void
+// ) {
+//   const mouse: Accessor<{x:number;y:number;}> = useEventSignal("mousemove", {x: 0, y: 0}, (e, set) => {
+//     set({x: (e as MouseEvent).clientX, y: (e as MouseEvent).clientY});
+//   });
+//   const listener = (e: MouseEvent) => {
+//     if (isNullish(ref())) return;
+//     const mousePos = mouse();
+//     const {top, bottom, left, right} = ref()!.getBoundingClientRect();
+//     const conditions = [
+//       mousePos.x < left,
+//       mousePos.x > right,
+//       mousePos.y < top,export function useClickOutside(
+//   ref: Accessor<AllHTMLElements | undefined | null>, 
+//   handler: (e: MouseEvent) => void
+// ) {
+//   const mouse: Accessor<{x:number;y:number;}> = useEventSignal("mousemove", {x: 0, y: 0}, (e, set) => {
+//     set({x: (e as MouseEvent).clientX, y: (e as MouseEvent).clientY});
+//   });
+//   const listener = (e: MouseEvent) => {
+//     if (isNullish(ref())) return;
+//     const mousePos = mouse();
+//     const {top, bottom, left, right} = ref()!.getBoundingClientRect();
+//     const conditions = [
+//       mousePos.x < left,
+//       mousePos.x > right,
+//       mousePos.y < top,
+//       mousePos.y > bottom
+//     ]
+//     if (conditions.includes(true)) {
+//       handler(e)
+//     };
+//   };
+//   (ref() as HTMLElement)?.addEventListener("click", listener);
+//   onCleanup(() => {
+//     (ref() as HTMLElement)?.removeEventListener("click", listener);
+//   });
+// };
+//       mousePos.y > bottom
+//     ]
+//     if (conditions.includes(true)) {
+//       handler(e)
+//     };
+//   };
+//   (ref() as HTMLElement)?.addEventListener("click", listener);
+//   onCleanup(() => {
+//     (ref() as HTMLElement)?.removeEventListener("click", listener);
+//   });
+// };
+/**
+ * A hook that executes a callback when clicking outside of all specified elements.
+ *
+ * @param elementRefs - An array of signals (accessors) returning target HTMLElements (or undefined initially).
+ * @param callback - The function to execute when a click occurs outside all the target elements.
+ */
+function useClickOutside(elementRefs, callback) {
+  // Handler that checks if the click is outside all the elements.
+  const handleClick = event => {
+    // Loop through each element reference.
+    for (const ref of elementRefs) {
+      const el = ref();
+      // If the element exists and the click occurred inside it, do nothing.
+      if (el && el.contains(event.target)) {
+        return;
+      }
     }
+    // If the click was not inside any of the referenced elements, execute the callback.
+    callback();
   };
-  ref()?.addEventListener("click", listener);
+  // Set up the event listener when the component mounts.
+  onMount(() => {
+    document.addEventListener('click', handleClick);
+  });
+  // Clean up the event listener when the component unmounts.
   onCleanup(() => {
-    ref()?.removeEventListener("click", listener);
+    document.removeEventListener('click', handleClick);
   });
 }
 
-var css_248z$8 = ".formfield-module_formField__w6mH9 {\n  display: inline-block;\n  border-radius: var(--border-radius-md);\n  box-sizing: border-box;\n}\n.formfield-module_formField__w6mH9 label {\n  position: relative;\n  top: -0.5rem;\n  padding-right: 10px;\n}\n.formfield-module_formField__w6mH9:has(textarea) {\n  position: relative;\n  margin: var(--spacing-1, 8px);\n}\n.formfield-module_formField__w6mH9:has(textarea) textarea {\n  width: auto;\n  min-width: 95%;\n  font-family: var(--font-family, \"Roboto, sans-serif\");\n  font-size: var(--font-size-base, 16px);\n  padding-bottom: var(--spacing-1, 8px);\n  border: none;\n}\n.formfield-module_formField__w6mH9:has(textarea) textarea:focus {\n  outline: none;\n}\n.formfield-module_formField__w6mH9:has(textarea) legend {\n  height: var(--spacing-3, 24px);\n  position: absolute;\n  top: calc(var(--spacing-2) * -1);\n  left: var(--spacing-1, 8px);\n  transition: all 0.2s ease;\n}\n.formfield-module_formField__w6mH9:has(.formfield-module_coles-solid-selectControl__T4o-N) {\n  position: relative;\n  margin: var(--spacing-1, 8px);\n  width: -moz-min-content;\n  width: min-content;\n}\n.formfield-module_formField__w6mH9:has(.formfield-module_coles-solid-selectControl__T4o-N) legend {\n  height: var(--spacing-3, 24px);\n  position: absolute;\n  top: calc(var(--spacing-2) * -1);\n  left: var(--spacing-1, 8px);\n  transition: all 0.2s ease;\n}\n.formfield-module_formField__w6mH9:has(input[type=text]) {\n  height: calc(var(--spacing-4, 32px) + var(--spacing-2, 16px));\n  position: relative;\n  margin-top: var(--spacing-2);\n  margin-bottom: var(--spacing-2);\n}\n.formfield-module_formField__w6mH9:has(input[type=text]) legend {\n  height: var(--spacing-3, 24px);\n  position: absolute;\n  top: calc(var(--spacing-2) * -1);\n  left: var(--spacing-1, 8px);\n  transition: all 0.2s ease;\n}\n.formfield-module_formField__w6mH9:has(input[type=text]) input[type=text] {\n  background-color: transparent !important;\n  height: calc(var(--spacing-4, 32px) + var(--spacing-2, 16px) - var(--spacing-3, 24px));\n  border-radius: var(--border-radius-sm, 4px);\n  margin: var(--spacing-1, 8px) 0px;\n  font-family: var(--font-family, \"Roboto, sans-serif\");\n  font-size: var(--font-size-base, 16px);\n  width: auto;\n  min-width: 95%;\n}\n.formfield-module_formField__w6mH9:has(input[type=text]) input[type=text]::-moz-placeholder {\n  opacity: 0.75;\n}\n.formfield-module_formField__w6mH9:has(input[type=text]) input[type=text]::placeholder {\n  opacity: 0.75;\n}\n.formfield-module_formField__w6mH9:has(input[type=number]) {\n  height: calc(var(--spacing-4, 32px) + var(--spacing-2, 16px));\n  position: relative;\n  margin-top: var(--spacing-2);\n  margin-bottom: var(--spacing-2);\n}\n.formfield-module_formField__w6mH9:has(input[type=number]) legend {\n  height: var(--spacing-3, 24px);\n  position: absolute;\n  top: calc(var(--spacing-2) * -1);\n  left: var(--spacing-1, 8px);\n  transition: all 0.2s ease;\n}\n.formfield-module_formField__w6mH9:has(input[type=number]) input[type=number] {\n  background-color: transparent !important;\n  color: var(--on-primary-color, #ffffff);\n  height: calc(var(--spacing-4, 32px) + var(--spacing-2, 16px) - var(--spacing-3, 24px));\n  border-radius: var(--border-radius-sm, 4px);\n  margin: var(--spacing-1, 8px) 0px;\n  font-family: var(--font-family, \"Roboto, sans-serif\");\n  font-size: var(--font-size-base, 16px);\n  width: auto;\n  min-width: 95%;\n}\n.formfield-module_formField__w6mH9:has(input[type=number]) input[type=number]::-moz-placeholder {\n  opacity: 0.75;\n}\n.formfield-module_formField__w6mH9:has(input[type=number]) input[type=number]::placeholder {\n  opacity: 0.75;\n}\n.formfield-module_formField__w6mH9:has(.formfield-module_coles-solid-selectControl__T4o-N) {\n  height: calc(var(--spacing-4) * 2.3) !important;\n}\n@media screen and (max-width: 768px) {\n  .formfield-module_formField__w6mH9 {\n    max-width: 75%;\n  }\n}\n\n.formfield-module_primary__7BYyQ {\n  background-color: var(--primary-color, #3F51B5);\n  color: var(--on-primary-color, white);\n}\n.formfield-module_primary__7BYyQ:has(input[type=text]) legend {\n  background: linear-gradient(to bottom, transparent 60%, var(--primary-color, #3F51B5) 40%);\n}\n.formfield-module_primary__7BYyQ:has(input[type=text]) input[type=text] {\n  color: var(--on-primary-color, white);\n}\n.formfield-module_primary__7BYyQ:has(input[type=number]) legend {\n  background: linear-gradient(to bottom, transparent 60%, var(--primary-color, #3F51B5) 40%);\n}\n.formfield-module_primary__7BYyQ:has(input[type=number]) input[type=number] {\n  color: var(--on-primary-color, white);\n}\n.formfield-module_primary__7BYyQ:has(textarea) {\n  width: 100%;\n  height: auto;\n}\n.formfield-module_primary__7BYyQ:has(textarea) textarea {\n  background-color: var(--primary-color, #3F51B5);\n  color: var(--on-primary-color, white);\n}\n.formfield-module_primary__7BYyQ:has(textarea) legend {\n  background: linear-gradient(to bottom, transparent 60%, var(--primary-color, #3F51B5) 40%);\n}\n\n.formfield-module_accent__L-LRd {\n  background-color: var(--secondary-color, #5C6BC0);\n  color: var(--on-secondary-color, white);\n}\n.formfield-module_accent__L-LRd:has(input[type=text]) legend {\n  background: linear-gradient(to bottom, transparent 60%, var(--secondary-color, #5C6BC0) 40%);\n}\n.formfield-module_accent__L-LRd:has(input[type=text]) input[type=text] {\n  color: var(--on-secondary-color, white);\n}\n.formfield-module_accent__L-LRd:has(input[type=number]) legend {\n  background: linear-gradient(to bottom, transparent 60%, var(--secondary-color, #5C6BC0) 40%);\n}\n.formfield-module_accent__L-LRd:has(input[type=number]) input[type=number] {\n  color: var(--on-secondary-color, white);\n}\n.formfield-module_accent__L-LRd:has(textarea) textarea {\n  background-color: var(--secondary-color, #5C6BC0);\n  color: var(--on-secondary-color, white);\n}\n.formfield-module_accent__L-LRd:has(textarea) legend {\n  background: linear-gradient(to bottom, transparent 60%, var(--secondary-color, #5C6BC0) 40%);\n}\n\n.formfield-module_tertiary__B0ozS {\n  background-color: var(--tertiary-color, #8A2BE2);\n  color: var(--on-tertiary-color, white);\n}\n.formfield-module_tertiary__B0ozS:has(input[type=text]) legend {\n  background: linear-gradient(to bottom, transparent 60%, var(--tertiary-color, #8A2BE2) 40%);\n}\n.formfield-module_tertiary__B0ozS:has(input[type=text]) input[type=text] {\n  color: var(--on-tertiary-color, white);\n}\n.formfield-module_tertiary__B0ozS:has(input[type=number]) legend {\n  background: linear-gradient(to bottom, transparent 60%, var(--tertiary-color, #8A2BE2) 40%);\n}\n.formfield-module_tertiary__B0ozS:has(input[type=number]) input[type=number] {\n  color: var(--on-tertiary-color, white);\n}\n.formfield-module_tertiary__B0ozS:has(textarea) textarea {\n  background-color: var(--tertiary-color, #8A2BE2);\n  color: var(--on-tertiary-color, white);\n}\n.formfield-module_tertiary__B0ozS:has(textarea) legend {\n  background: linear-gradient(to bottom, transparent 60%, var(--tertiary-color, #8A2BE2) 40%);\n}\n\n.formfield-module_moveLegendInside__zQ4vt {\n  opacity: 0;\n  height: var(--spacing-3, 24px) !important;\n}\n\n.formfield-module_checkboxPadding__DU1CG {\n  padding: 0px;\n  padding-bottom: 10px;\n  padding-left: 10px;\n  padding-right: 10px;\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZvcm1maWVsZC5tb2R1bGUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLHFCQUFxQjtFQUNyQixzQ0FBc0M7RUFDdEMsc0JBQXNCO0FBQ3hCO0FBQ0E7RUFDRSxrQkFBa0I7RUFDbEIsWUFBWTtFQUNaLG1CQUFtQjtBQUNyQjtBQUNBO0VBQ0Usa0JBQWtCO0VBQ2xCLDZCQUE2QjtBQUMvQjtBQUNBO0VBQ0UsV0FBVztFQUNYLGNBQWM7RUFDZCxxREFBcUQ7RUFDckQsc0NBQXNDO0VBQ3RDLHFDQUFxQztFQUNyQyxZQUFZO0FBQ2Q7QUFDQTtFQUNFLGFBQWE7QUFDZjtBQUNBO0VBQ0UsOEJBQThCO0VBQzlCLGtCQUFrQjtFQUNsQixnQ0FBZ0M7RUFDaEMsMkJBQTJCO0VBQzNCLHlCQUF5QjtBQUMzQjtBQUNBO0VBQ0Usa0JBQWtCO0VBQ2xCLDZCQUE2QjtFQUM3Qix1QkFBa0I7RUFBbEIsa0JBQWtCO0FBQ3BCO0FBQ0E7RUFDRSw4QkFBOEI7RUFDOUIsa0JBQWtCO0VBQ2xCLGdDQUFnQztFQUNoQywyQkFBMkI7RUFDM0IseUJBQXlCO0FBQzNCO0FBQ0E7RUFDRSw2REFBNkQ7RUFDN0Qsa0JBQWtCO0VBQ2xCLDRCQUE0QjtFQUM1QiwrQkFBK0I7QUFDakM7QUFDQTtFQUNFLDhCQUE4QjtFQUM5QixrQkFBa0I7RUFDbEIsZ0NBQWdDO0VBQ2hDLDJCQUEyQjtFQUMzQix5QkFBeUI7QUFDM0I7QUFDQTtFQUNFLHdDQUF3QztFQUN4QyxzRkFBc0Y7RUFDdEYsMkNBQTJDO0VBQzNDLGlDQUFpQztFQUNqQyxxREFBcUQ7RUFDckQsc0NBQXNDO0VBQ3RDLFdBQVc7RUFDWCxjQUFjO0FBQ2hCO0FBQ0E7RUFDRSxhQUFhO0FBQ2Y7QUFGQTtFQUNFLGFBQWE7QUFDZjtBQUNBO0VBQ0UsNkRBQTZEO0VBQzdELGtCQUFrQjtFQUNsQiw0QkFBNEI7RUFDNUIsK0JBQStCO0FBQ2pDO0FBQ0E7RUFDRSw4QkFBOEI7RUFDOUIsa0JBQWtCO0VBQ2xCLGdDQUFnQztFQUNoQywyQkFBMkI7RUFDM0IseUJBQXlCO0FBQzNCO0FBQ0E7RUFDRSx3Q0FBd0M7RUFDeEMsdUNBQXVDO0VBQ3ZDLHNGQUFzRjtFQUN0RiwyQ0FBMkM7RUFDM0MsaUNBQWlDO0VBQ2pDLHFEQUFxRDtFQUNyRCxzQ0FBc0M7RUFDdEMsV0FBVztFQUNYLGNBQWM7QUFDaEI7QUFDQTtFQUNFLGFBQWE7QUFDZjtBQUZBO0VBQ0UsYUFBYTtBQUNmO0FBQ0E7RUFDRSwrQ0FBK0M7QUFDakQ7QUFDQTtFQUNFO0lBQ0UsY0FBYztFQUNoQjtBQUNGOztBQUVBO0VBQ0UsK0NBQStDO0VBQy9DLHFDQUFxQztBQUN2QztBQUNBO0VBQ0UsMEZBQTBGO0FBQzVGO0FBQ0E7RUFDRSxxQ0FBcUM7QUFDdkM7QUFDQTtFQUNFLDBGQUEwRjtBQUM1RjtBQUNBO0VBQ0UscUNBQXFDO0FBQ3ZDO0FBQ0E7RUFDRSxXQUFXO0VBQ1gsWUFBWTtBQUNkO0FBQ0E7RUFDRSwrQ0FBK0M7RUFDL0MscUNBQXFDO0FBQ3ZDO0FBQ0E7RUFDRSwwRkFBMEY7QUFDNUY7O0FBRUE7RUFDRSxpREFBaUQ7RUFDakQsdUNBQXVDO0FBQ3pDO0FBQ0E7RUFDRSw0RkFBNEY7QUFDOUY7QUFDQTtFQUNFLHVDQUF1QztBQUN6QztBQUNBO0VBQ0UsNEZBQTRGO0FBQzlGO0FBQ0E7RUFDRSx1Q0FBdUM7QUFDekM7QUFDQTtFQUNFLGlEQUFpRDtFQUNqRCx1Q0FBdUM7QUFDekM7QUFDQTtFQUNFLDRGQUE0RjtBQUM5Rjs7QUFFQTtFQUNFLGdEQUFnRDtFQUNoRCxzQ0FBc0M7QUFDeEM7QUFDQTtFQUNFLDJGQUEyRjtBQUM3RjtBQUNBO0VBQ0Usc0NBQXNDO0FBQ3hDO0FBQ0E7RUFDRSwyRkFBMkY7QUFDN0Y7QUFDQTtFQUNFLHNDQUFzQztBQUN4QztBQUNBO0VBQ0UsZ0RBQWdEO0VBQ2hELHNDQUFzQztBQUN4QztBQUNBO0VBQ0UsMkZBQTJGO0FBQzdGOztBQUVBO0VBQ0UsVUFBVTtFQUNWLHlDQUF5QztBQUMzQzs7QUFFQTtFQUNFLFlBQVk7RUFDWixvQkFBb0I7RUFDcEIsa0JBQWtCO0VBQ2xCLG1CQUFtQjtBQUNyQiIsImZpbGUiOiJmb3JtZmllbGQubW9kdWxlLnNjc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuZm9ybUZpZWxkIHtcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICBib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzLW1kKTtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbn1cbi5mb3JtRmllbGQgbGFiZWwge1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIHRvcDogLTAuNXJlbTtcbiAgcGFkZGluZy1yaWdodDogMTBweDtcbn1cbi5mb3JtRmllbGQ6aGFzKHRleHRhcmVhKSB7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgbWFyZ2luOiB2YXIoLS1zcGFjaW5nLTEsIDhweCk7XG59XG4uZm9ybUZpZWxkOmhhcyh0ZXh0YXJlYSkgdGV4dGFyZWEge1xuICB3aWR0aDogYXV0bztcbiAgbWluLXdpZHRoOiA5NSU7XG4gIGZvbnQtZmFtaWx5OiB2YXIoLS1mb250LWZhbWlseSwgXCJSb2JvdG8sIHNhbnMtc2VyaWZcIik7XG4gIGZvbnQtc2l6ZTogdmFyKC0tZm9udC1zaXplLWJhc2UsIDE2cHgpO1xuICBwYWRkaW5nLWJvdHRvbTogdmFyKC0tc3BhY2luZy0xLCA4cHgpO1xuICBib3JkZXI6IG5vbmU7XG59XG4uZm9ybUZpZWxkOmhhcyh0ZXh0YXJlYSkgdGV4dGFyZWE6Zm9jdXMge1xuICBvdXRsaW5lOiBub25lO1xufVxuLmZvcm1GaWVsZDpoYXModGV4dGFyZWEpIGxlZ2VuZCB7XG4gIGhlaWdodDogdmFyKC0tc3BhY2luZy0zLCAyNHB4KTtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB0b3A6IGNhbGModmFyKC0tc3BhY2luZy0yKSAqIC0xKTtcbiAgbGVmdDogdmFyKC0tc3BhY2luZy0xLCA4cHgpO1xuICB0cmFuc2l0aW9uOiBhbGwgMC4ycyBlYXNlO1xufVxuLmZvcm1GaWVsZDpoYXMoLmNvbGVzLXNvbGlkLXNlbGVjdENvbnRyb2wpIHtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBtYXJnaW46IHZhcigtLXNwYWNpbmctMSwgOHB4KTtcbiAgd2lkdGg6IG1pbi1jb250ZW50O1xufVxuLmZvcm1GaWVsZDpoYXMoLmNvbGVzLXNvbGlkLXNlbGVjdENvbnRyb2wpIGxlZ2VuZCB7XG4gIGhlaWdodDogdmFyKC0tc3BhY2luZy0zLCAyNHB4KTtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB0b3A6IGNhbGModmFyKC0tc3BhY2luZy0yKSAqIC0xKTtcbiAgbGVmdDogdmFyKC0tc3BhY2luZy0xLCA4cHgpO1xuICB0cmFuc2l0aW9uOiBhbGwgMC4ycyBlYXNlO1xufVxuLmZvcm1GaWVsZDpoYXMoaW5wdXRbdHlwZT10ZXh0XSkge1xuICBoZWlnaHQ6IGNhbGModmFyKC0tc3BhY2luZy00LCAzMnB4KSArIHZhcigtLXNwYWNpbmctMiwgMTZweCkpO1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIG1hcmdpbi10b3A6IHZhcigtLXNwYWNpbmctMik7XG4gIG1hcmdpbi1ib3R0b206IHZhcigtLXNwYWNpbmctMik7XG59XG4uZm9ybUZpZWxkOmhhcyhpbnB1dFt0eXBlPXRleHRdKSBsZWdlbmQge1xuICBoZWlnaHQ6IHZhcigtLXNwYWNpbmctMywgMjRweCk7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgdG9wOiBjYWxjKHZhcigtLXNwYWNpbmctMikgKiAtMSk7XG4gIGxlZnQ6IHZhcigtLXNwYWNpbmctMSwgOHB4KTtcbiAgdHJhbnNpdGlvbjogYWxsIDAuMnMgZWFzZTtcbn1cbi5mb3JtRmllbGQ6aGFzKGlucHV0W3R5cGU9dGV4dF0pIGlucHV0W3R5cGU9dGV4dF0ge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudCAhaW1wb3J0YW50O1xuICBoZWlnaHQ6IGNhbGModmFyKC0tc3BhY2luZy00LCAzMnB4KSArIHZhcigtLXNwYWNpbmctMiwgMTZweCkgLSB2YXIoLS1zcGFjaW5nLTMsIDI0cHgpKTtcbiAgYm9yZGVyLXJhZGl1czogdmFyKC0tYm9yZGVyLXJhZGl1cy1zbSwgNHB4KTtcbiAgbWFyZ2luOiB2YXIoLS1zcGFjaW5nLTEsIDhweCkgMHB4O1xuICBmb250LWZhbWlseTogdmFyKC0tZm9udC1mYW1pbHksIFwiUm9ib3RvLCBzYW5zLXNlcmlmXCIpO1xuICBmb250LXNpemU6IHZhcigtLWZvbnQtc2l6ZS1iYXNlLCAxNnB4KTtcbiAgd2lkdGg6IGF1dG87XG4gIG1pbi13aWR0aDogOTUlO1xufVxuLmZvcm1GaWVsZDpoYXMoaW5wdXRbdHlwZT10ZXh0XSkgaW5wdXRbdHlwZT10ZXh0XTo6cGxhY2Vob2xkZXIge1xuICBvcGFjaXR5OiAwLjc1O1xufVxuLmZvcm1GaWVsZDpoYXMoaW5wdXRbdHlwZT1udW1iZXJdKSB7XG4gIGhlaWdodDogY2FsYyh2YXIoLS1zcGFjaW5nLTQsIDMycHgpICsgdmFyKC0tc3BhY2luZy0yLCAxNnB4KSk7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgbWFyZ2luLXRvcDogdmFyKC0tc3BhY2luZy0yKTtcbiAgbWFyZ2luLWJvdHRvbTogdmFyKC0tc3BhY2luZy0yKTtcbn1cbi5mb3JtRmllbGQ6aGFzKGlucHV0W3R5cGU9bnVtYmVyXSkgbGVnZW5kIHtcbiAgaGVpZ2h0OiB2YXIoLS1zcGFjaW5nLTMsIDI0cHgpO1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHRvcDogY2FsYyh2YXIoLS1zcGFjaW5nLTIpICogLTEpO1xuICBsZWZ0OiB2YXIoLS1zcGFjaW5nLTEsIDhweCk7XG4gIHRyYW5zaXRpb246IGFsbCAwLjJzIGVhc2U7XG59XG4uZm9ybUZpZWxkOmhhcyhpbnB1dFt0eXBlPW51bWJlcl0pIGlucHV0W3R5cGU9bnVtYmVyXSB7XG4gIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50ICFpbXBvcnRhbnQ7XG4gIGNvbG9yOiB2YXIoLS1vbi1wcmltYXJ5LWNvbG9yLCAjZmZmZmZmKTtcbiAgaGVpZ2h0OiBjYWxjKHZhcigtLXNwYWNpbmctNCwgMzJweCkgKyB2YXIoLS1zcGFjaW5nLTIsIDE2cHgpIC0gdmFyKC0tc3BhY2luZy0zLCAyNHB4KSk7XG4gIGJvcmRlci1yYWRpdXM6IHZhcigtLWJvcmRlci1yYWRpdXMtc20sIDRweCk7XG4gIG1hcmdpbjogdmFyKC0tc3BhY2luZy0xLCA4cHgpIDBweDtcbiAgZm9udC1mYW1pbHk6IHZhcigtLWZvbnQtZmFtaWx5LCBcIlJvYm90bywgc2Fucy1zZXJpZlwiKTtcbiAgZm9udC1zaXplOiB2YXIoLS1mb250LXNpemUtYmFzZSwgMTZweCk7XG4gIHdpZHRoOiBhdXRvO1xuICBtaW4td2lkdGg6IDk1JTtcbn1cbi5mb3JtRmllbGQ6aGFzKGlucHV0W3R5cGU9bnVtYmVyXSkgaW5wdXRbdHlwZT1udW1iZXJdOjpwbGFjZWhvbGRlciB7XG4gIG9wYWNpdHk6IDAuNzU7XG59XG4uZm9ybUZpZWxkOmhhcyguY29sZXMtc29saWQtc2VsZWN0Q29udHJvbCkge1xuICBoZWlnaHQ6IGNhbGModmFyKC0tc3BhY2luZy00KSAqIDIuMykgIWltcG9ydGFudDtcbn1cbkBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDc2OHB4KSB7XG4gIC5mb3JtRmllbGQge1xuICAgIG1heC13aWR0aDogNzUlO1xuICB9XG59XG5cbi5wcmltYXJ5IHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tcHJpbWFyeS1jb2xvciwgIzNGNTFCNSk7XG4gIGNvbG9yOiB2YXIoLS1vbi1wcmltYXJ5LWNvbG9yLCB3aGl0ZSk7XG59XG4ucHJpbWFyeTpoYXMoaW5wdXRbdHlwZT10ZXh0XSkgbGVnZW5kIHtcbiAgYmFja2dyb3VuZDogbGluZWFyLWdyYWRpZW50KHRvIGJvdHRvbSwgdHJhbnNwYXJlbnQgNjAlLCB2YXIoLS1wcmltYXJ5LWNvbG9yLCAjM0Y1MUI1KSA0MCUpO1xufVxuLnByaW1hcnk6aGFzKGlucHV0W3R5cGU9dGV4dF0pIGlucHV0W3R5cGU9dGV4dF0ge1xuICBjb2xvcjogdmFyKC0tb24tcHJpbWFyeS1jb2xvciwgd2hpdGUpO1xufVxuLnByaW1hcnk6aGFzKGlucHV0W3R5cGU9bnVtYmVyXSkgbGVnZW5kIHtcbiAgYmFja2dyb3VuZDogbGluZWFyLWdyYWRpZW50KHRvIGJvdHRvbSwgdHJhbnNwYXJlbnQgNjAlLCB2YXIoLS1wcmltYXJ5LWNvbG9yLCAjM0Y1MUI1KSA0MCUpO1xufVxuLnByaW1hcnk6aGFzKGlucHV0W3R5cGU9bnVtYmVyXSkgaW5wdXRbdHlwZT1udW1iZXJdIHtcbiAgY29sb3I6IHZhcigtLW9uLXByaW1hcnktY29sb3IsIHdoaXRlKTtcbn1cbi5wcmltYXJ5Omhhcyh0ZXh0YXJlYSkge1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiBhdXRvO1xufVxuLnByaW1hcnk6aGFzKHRleHRhcmVhKSB0ZXh0YXJlYSB7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXByaW1hcnktY29sb3IsICMzRjUxQjUpO1xuICBjb2xvcjogdmFyKC0tb24tcHJpbWFyeS1jb2xvciwgd2hpdGUpO1xufVxuLnByaW1hcnk6aGFzKHRleHRhcmVhKSBsZWdlbmQge1xuICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQodG8gYm90dG9tLCB0cmFuc3BhcmVudCA2MCUsIHZhcigtLXByaW1hcnktY29sb3IsICMzRjUxQjUpIDQwJSk7XG59XG5cbi5hY2NlbnQge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zZWNvbmRhcnktY29sb3IsICM1QzZCQzApO1xuICBjb2xvcjogdmFyKC0tb24tc2Vjb25kYXJ5LWNvbG9yLCB3aGl0ZSk7XG59XG4uYWNjZW50OmhhcyhpbnB1dFt0eXBlPXRleHRdKSBsZWdlbmQge1xuICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQodG8gYm90dG9tLCB0cmFuc3BhcmVudCA2MCUsIHZhcigtLXNlY29uZGFyeS1jb2xvciwgIzVDNkJDMCkgNDAlKTtcbn1cbi5hY2NlbnQ6aGFzKGlucHV0W3R5cGU9dGV4dF0pIGlucHV0W3R5cGU9dGV4dF0ge1xuICBjb2xvcjogdmFyKC0tb24tc2Vjb25kYXJ5LWNvbG9yLCB3aGl0ZSk7XG59XG4uYWNjZW50OmhhcyhpbnB1dFt0eXBlPW51bWJlcl0pIGxlZ2VuZCB7XG4gIGJhY2tncm91bmQ6IGxpbmVhci1ncmFkaWVudCh0byBib3R0b20sIHRyYW5zcGFyZW50IDYwJSwgdmFyKC0tc2Vjb25kYXJ5LWNvbG9yLCAjNUM2QkMwKSA0MCUpO1xufVxuLmFjY2VudDpoYXMoaW5wdXRbdHlwZT1udW1iZXJdKSBpbnB1dFt0eXBlPW51bWJlcl0ge1xuICBjb2xvcjogdmFyKC0tb24tc2Vjb25kYXJ5LWNvbG9yLCB3aGl0ZSk7XG59XG4uYWNjZW50Omhhcyh0ZXh0YXJlYSkgdGV4dGFyZWEge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zZWNvbmRhcnktY29sb3IsICM1QzZCQzApO1xuICBjb2xvcjogdmFyKC0tb24tc2Vjb25kYXJ5LWNvbG9yLCB3aGl0ZSk7XG59XG4uYWNjZW50Omhhcyh0ZXh0YXJlYSkgbGVnZW5kIHtcbiAgYmFja2dyb3VuZDogbGluZWFyLWdyYWRpZW50KHRvIGJvdHRvbSwgdHJhbnNwYXJlbnQgNjAlLCB2YXIoLS1zZWNvbmRhcnktY29sb3IsICM1QzZCQzApIDQwJSk7XG59XG5cbi50ZXJ0aWFyeSB7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXRlcnRpYXJ5LWNvbG9yLCAjOEEyQkUyKTtcbiAgY29sb3I6IHZhcigtLW9uLXRlcnRpYXJ5LWNvbG9yLCB3aGl0ZSk7XG59XG4udGVydGlhcnk6aGFzKGlucHV0W3R5cGU9dGV4dF0pIGxlZ2VuZCB7XG4gIGJhY2tncm91bmQ6IGxpbmVhci1ncmFkaWVudCh0byBib3R0b20sIHRyYW5zcGFyZW50IDYwJSwgdmFyKC0tdGVydGlhcnktY29sb3IsICM4QTJCRTIpIDQwJSk7XG59XG4udGVydGlhcnk6aGFzKGlucHV0W3R5cGU9dGV4dF0pIGlucHV0W3R5cGU9dGV4dF0ge1xuICBjb2xvcjogdmFyKC0tb24tdGVydGlhcnktY29sb3IsIHdoaXRlKTtcbn1cbi50ZXJ0aWFyeTpoYXMoaW5wdXRbdHlwZT1udW1iZXJdKSBsZWdlbmQge1xuICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQodG8gYm90dG9tLCB0cmFuc3BhcmVudCA2MCUsIHZhcigtLXRlcnRpYXJ5LWNvbG9yLCAjOEEyQkUyKSA0MCUpO1xufVxuLnRlcnRpYXJ5OmhhcyhpbnB1dFt0eXBlPW51bWJlcl0pIGlucHV0W3R5cGU9bnVtYmVyXSB7XG4gIGNvbG9yOiB2YXIoLS1vbi10ZXJ0aWFyeS1jb2xvciwgd2hpdGUpO1xufVxuLnRlcnRpYXJ5Omhhcyh0ZXh0YXJlYSkgdGV4dGFyZWEge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS10ZXJ0aWFyeS1jb2xvciwgIzhBMkJFMik7XG4gIGNvbG9yOiB2YXIoLS1vbi10ZXJ0aWFyeS1jb2xvciwgd2hpdGUpO1xufVxuLnRlcnRpYXJ5Omhhcyh0ZXh0YXJlYSkgbGVnZW5kIHtcbiAgYmFja2dyb3VuZDogbGluZWFyLWdyYWRpZW50KHRvIGJvdHRvbSwgdHJhbnNwYXJlbnQgNjAlLCB2YXIoLS10ZXJ0aWFyeS1jb2xvciwgIzhBMkJFMikgNDAlKTtcbn1cblxuLm1vdmVMZWdlbmRJbnNpZGUge1xuICBvcGFjaXR5OiAwO1xuICBoZWlnaHQ6IHZhcigtLXNwYWNpbmctMywgMjRweCkgIWltcG9ydGFudDtcbn1cblxuLmNoZWNrYm94UGFkZGluZyB7XG4gIHBhZGRpbmc6IDBweDtcbiAgcGFkZGluZy1ib3R0b206IDEwcHg7XG4gIHBhZGRpbmctbGVmdDogMTBweDtcbiAgcGFkZGluZy1yaWdodDogMTBweDtcbn0iXX0= */";
-var style$5 = {"formField":"formfield-module_formField__w6mH9","coles-solid-selectControl":"formfield-module_coles-solid-selectControl__T4o-N","primary":"formfield-module_primary__7BYyQ","accent":"formfield-module_accent__L-LRd","tertiary":"formfield-module_tertiary__B0ozS","moveLegendInside":"formfield-module_moveLegendInside__zQ4vt","checkboxPadding":"formfield-module_checkboxPadding__DU1CG"};
-styleInject(css_248z$8);
+var css_248z$a = ".formfield-module_formField__w6mH9 {\n  display: inline-block;\n  border-radius: var(--border-radius-md);\n  box-sizing: border-box;\n  border: none;\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n  margin-top: 0px !important;\n  margin-bottom: 0px !important;\n}\n.formfield-module_formField__w6mH9 label {\n  position: relative;\n  top: -0.5rem;\n  padding-right: 10px;\n}\n.formfield-module_formField__w6mH9:has(textarea) {\n  position: relative;\n  margin: 8px;\n}\n.formfield-module_formField__w6mH9:has(textarea) textarea {\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n  width: auto;\n  min-width: 95%;\n  font-family: \"Roboto, sans-serif\";\n  font-size: 16px;\n  padding-bottom: 8px;\n  border: none;\n}\n.formfield-module_formField__w6mH9:has(textarea) textarea:focus {\n  outline: none;\n}\n.formfield-module_formField__w6mH9:has(textarea) textarea::-moz-placeholder {\n  color: var(--on-container-color, #000);\n  opacity: var(--text-emphasis-medium, 87%);\n}\n.formfield-module_formField__w6mH9:has(textarea) textarea::placeholder {\n  color: var(--on-container-color, #000);\n  opacity: var(--text-emphasis-medium, 87%);\n}\n.formfield-module_formField__w6mH9:has(textarea) legend {\n  height: 24px;\n  position: absolute;\n  top: -16px;\n  left: 8px;\n  transition: all 0.25s ease;\n}\n.formfield-module_formField__w6mH9:has([is=coles-solid-select]) {\n  position: relative;\n  height: 48px !important;\n  padding: 0px !important;\n  width: 100%;\n}\n.formfield-module_formField__w6mH9:has([is=coles-solid-select]) legend {\n  position: absolute;\n  transform: translateY(-20px);\n  height: 16px;\n  max-height: 16px;\n  transition: all 0.25s ease;\n  top: 8px;\n  z-index: 10000;\n}\n.formfield-module_formField__w6mH9:has([is=coles-solid-select]) [is=coles-solid-select] {\n  position: absolute;\n  left: 0px;\n  right: 0px;\n  padding: 0px !important;\n  margin: 0px !important;\n  height: 48px !important;\n  border-radius: 4px;\n  font-family: \"Roboto, sans-serif\";\n  font-size: 16px;\n  width: auto;\n  min-width: 95%;\n}\n.formfield-module_formField__w6mH9:has([is=coles-solid-select]) [is=coles-solid-select]:nth-child(n) {\n  border-radius: 4px;\n}\n.formfield-module_formField__w6mH9:has(input[type=text]) {\n  height: 48px;\n  position: relative;\n  width: 100%;\n  margin-top: 16px;\n  margin-bottom: 16px;\n}\n.formfield-module_formField__w6mH9:has(input[type=text]) legend {\n  position: absolute;\n  height: 24px;\n  top: -16px;\n  left: 8px;\n  transition: all 0.25s ease;\n}\n.formfield-module_formField__w6mH9:has(input[type=text]) input[type=text] {\n  background-color: transparent !important;\n  height: 24px;\n  border-radius: 4px;\n  margin: 8px 0px;\n  font-family: \"Roboto, sans-serif\";\n  font-size: 16px;\n  width: 100%;\n  min-width: 95%;\n}\n.formfield-module_formField__w6mH9:has(input[type=text]) input[type=text]::-moz-placeholder {\n  opacity: 0.75;\n}\n.formfield-module_formField__w6mH9:has(input[type=text]) input[type=text]::placeholder {\n  opacity: 0.75;\n}\n.formfield-module_formField__w6mH9:has(input[type=number]) {\n  height: 48px;\n  position: relative;\n  width: 100%;\n  margin-top: 16px;\n  margin-bottom: 16px;\n}\n.formfield-module_formField__w6mH9:has(input[type=number]) legend {\n  height: 24px;\n  position: absolute;\n  top: -16px;\n  left: 8px;\n  transition: all 0.25s ease;\n}\n.formfield-module_formField__w6mH9:has(input[type=number]) input[type=number] {\n  background-color: transparent !important;\n  color: var(--on-primary-color, #fff);\n  height: 24px;\n  border-radius: 4px;\n  margin: 8px 0px;\n  font-family: \"Roboto, sans-serif\";\n  font-size: 16px;\n  width: 100%;\n  min-width: 95%;\n}\n.formfield-module_formField__w6mH9:has(input[type=number]) input[type=number]::-moz-placeholder {\n  opacity: 0.75;\n}\n.formfield-module_formField__w6mH9:has(input[type=number]) input[type=number]::placeholder {\n  opacity: 0.75;\n}\n@media screen and (max-width: 768px) {\n  .formfield-module_formField__w6mH9 {\n    max-width: 75%;\n  }\n}\n\n.formfield-module_topMargin__dahW5 {\n  margin-top: 12px;\n}\n\n.formfield-module_primary__7BYyQ:has(input[type=text]) input[type=text] {\n  color: var(--on-container-color, #000);\n}\n.formfield-module_primary__7BYyQ:has(input[type=text]) input[type=text]::-moz-placeholder {\n  color: var(--on-container-color, #000);\n  opacity: var(--text-emphasis-medium, 87%);\n}\n.formfield-module_primary__7BYyQ:has(input[type=text]) input[type=text]::placeholder {\n  color: var(--on-container-color, #000);\n  opacity: var(--text-emphasis-medium, 87%);\n}\n.formfield-module_primary__7BYyQ:has(input[type=number]) input[type=number] {\n  color: var(--on-container-color, #000);\n}\n.formfield-module_primary__7BYyQ:has(input[type=number]) input[type=number]::-moz-placeholder {\n  color: var(--on-container-color, #000);\n  opacity: var(--text-emphasis-medium, 87%);\n}\n.formfield-module_primary__7BYyQ:has(input[type=number]) input[type=number]::placeholder {\n  color: var(--on-container-color, #000);\n  opacity: var(--text-emphasis-medium, 87%);\n}\n.formfield-module_primary__7BYyQ:has([is=coles-solid-select]) [is=coles-solid-select] {\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n}\n.formfield-module_primary__7BYyQ:has(textarea) {\n  width: 100%;\n  height: auto;\n}\n.formfield-module_primary__7BYyQ:has(textarea) textarea {\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n}\n.formfield-module_primary__7BYyQ:has(textarea) textarea::-moz-placeholder {\n  color: var(--on-container-color, #000);\n  opacity: var(--text-emphasis-medium, 87%);\n}\n.formfield-module_primary__7BYyQ:has(textarea) textarea::placeholder {\n  color: var(--on-container-color, #000);\n  opacity: var(--text-emphasis-medium, 87%);\n}\n\n.formfield-module_legendStyle__gnI49 {\n  background-color: transparent;\n  opacity: var(--text-emphasis-medium, 87%);\n  width: 100%;\n}\n\n.formfield-module_moveLegendInside__zQ4vt {\n  opacity: 0;\n  visibility: hidden;\n}\n\n.formfield-module_moveLegendOutside__CPF3p {\n  visibility: visible;\n}\n\n.formfield-module_movedLegendOutside__hmyRU {\n  margin-top: 0px;\n}\n\n.formfield-module_checkboxPadding__DU1CG {\n  padding: 0px;\n  padding-bottom: 10px;\n  padding-left: 10px;\n  padding-right: 10px;\n}\n\n.formfield-module_errorContainer__HR4PL {\n  position: relative;\n  min-height: 2rem;\n}\n\n.formfield-module_error__wNBh2 {\n  position: absolute;\n  background: transparent;\n  color: var(--error-color, #B00020);\n  font-size: 10px;\n}";
+var style$4 = {"formField":"formfield-module_formField__w6mH9","primary":"formfield-module_primary__7BYyQ","legendStyle":"formfield-module_legendStyle__gnI49","moveLegendInside":"formfield-module_moveLegendInside__zQ4vt","moveLegendOutside":"formfield-module_moveLegendOutside__CPF3p","movedLegendOutside":"formfield-module_movedLegendOutside__hmyRU","errorContainer":"formfield-module_errorContainer__HR4PL","error":"formfield-module_error__wNBh2"};
+styleInject(css_248z$a);
 
 const $RAW = Symbol("store-raw"),
   $NODE = Symbol("store-node"),
@@ -1315,7 +1387,7 @@ function createStore(...[store, options]) {
   return [wrappedStore, setStore];
 }
 
-var _tmpl$$b = /*#__PURE__*/template(`<form>`);
+var _tmpl$$e = /*#__PURE__*/template(`<form>`);
 const FormContext = createContext();
 const useFormContext = () => {
   return useContext(FormContext);
@@ -1338,10 +1410,10 @@ const FormInner = props => {
   const [formRef, setFormRef] = createSignal();
   const formData = useFormContext();
   const submitFunction = e => {
+    const submitData = Clone(formData?.data ?? {});
     e.preventDefault();
     if (formData.formGroup.validate()) {
-      const submitData = Clone(formData?.data);
-      props?.onSubmit?.(submitData ?? {});
+      props?.onSubmit?.(submitData);
     }
   };
   createEffect(() => {
@@ -1351,7 +1423,7 @@ const FormInner = props => {
     formRef()?.removeEventListener('submit', submitFunction);
   });
   return (() => {
-    var _el$ = _tmpl$$b();
+    var _el$ = _tmpl$$e();
     use(setFormRef, _el$);
     insert(_el$, () => props.children);
     return _el$;
@@ -1374,7 +1446,8 @@ const Provider = props => {
   });
 };
 
-var _tmpl$$a = /*#__PURE__*/template(`<fieldset><legend>`);
+var _tmpl$$d = /*#__PURE__*/template(`<fieldset><legend><span>`),
+  _tmpl$2$6 = /*#__PURE__*/template(`<div>`);
 const FormField = props => {
   return createComponent(Provider$1, {
     get name() {
@@ -1410,74 +1483,132 @@ const FormField2 = props => {
     const hasText = !context?.getTextInside?.();
     return !isFocused && (!hasText || !hasValue(currentVal));
   });
-  const theChildren = children(() => props.children);
   const [fieldRef, setFieldRef] = createSignal();
-  useClickOutside(fieldRef, () => {
-    if (!isNullish(formContext?.data)) {
-      context?.setTextInside(!hasValue(formContext?.data?.[local?.formName ?? '']));
-    } else if (!isNullish(context?.getValue)) {
-      context?.setTextInside(!hasValue(context?.getValue()));
+  const theChildren = children(() => props.children);
+  const formErrors = () => {
+    const allErrors = (formContext?.formGroup.getErrors(local?.formName ?? '') ?? []).filter(error => error.hasError);
+    if (allErrors.length === 0) return [];
+    let errKeys = allErrors.map(error => error.key);
+    // test just require
+    if (errKeys.includes('required')) {
+      errKeys = errKeys.filter(err => err !== 'minLength' && err !== 'maxLength');
     }
-    context?.setFocused(false);
-  });
+    //---
+    return context?.getErrors?.().err.filter(err => errKeys.includes(err.key));
+  };
   const hasRequired = createMemo(() => {
     if (isNullish(local?.formName)) return false;
     if (Object.keys(props).includes('required') && props.required !== false) return true;
     return formContext?.formGroup?.hasValidator?.(local?.formName ?? '', 'required');
   });
+  const getErrorLocStyle = index => {
+    const fieldBox = fieldRef()?.getBoundingClientRect();
+    if (!fieldBox) return {};
+    return {
+      top: `${index * 12}px`
+    };
+  };
   createEffect(() => {
     context.setName(props.name);
   });
   context?.setFocused?.(false);
+  useClickOutside([fieldRef], () => {
+    if (!isNullish(formContext?.data)) {
+      context?.setTextInside(!hasValue(formContext?.data?.[local?.formName ?? '']));
+    } else if (!isNullish(context?.getValue)) {
+      context?.setTextInside(!hasValue(context?.getValue()));
+    }
+    context?.setFocused(prev => {
+      if (prev) {
+        formContext?.formGroup?.validate?.(local?.formName ?? '');
+      }
+      return false;
+    });
+  });
   onMount(() => {
     if (context?.getValue !== undefined) {
       const textInside = !hasValue(context?.getValue?.());
       context.setTextInside(textInside);
     }
   });
-  const getHideLegendStyle = createMemo(() => {
-    if (hasInsideText()) {
-      return style$5.hideLegend;
+  createEffect(() => {
+    const fieldRefer = fieldRef?.();
+    if (fieldRefer) {
+      context?.setFormFieldRef?.(fieldRefer);
     }
-    return '';
   });
-  return (() => {
-    var _el$ = _tmpl$$a(),
-      _el$2 = _el$.firstChild;
+  return [(() => {
+    var _el$ = _tmpl$$d(),
+      _el$2 = _el$.firstChild,
+      _el$3 = _el$2.firstChild;
     use(setFieldRef, _el$);
     spread(_el$, mergeProps(others, {
-      "onClick": () => context.setFocused(true),
       get ["class"]() {
-        return `${style$5[local.styleType ?? "accent"]} ${style$5.formField} ${local.class ?? ''}`;
+        return `${style$4["primary"]} ${hasInsideText() ? style$4.movedLegendInside : style$4.movedLegendOutside} ${style$4.formField} ${local.class ?? ''}`;
       }
     }), false, true);
-    insert(_el$2, createComponent(Show, {
+    insert(_el$3, createComponent(Show, {
       get when() {
-        return createMemo(() => !!!hasInsideText())() && !hasRequired();
+        return !hasRequired();
       },
       get children() {
         return context.getName();
       }
     }), null);
-    insert(_el$2, createComponent(Show, {
+    insert(_el$3, createComponent(Show, {
       get when() {
-        return createMemo(() => !!!hasInsideText())() && hasRequired();
+        return hasRequired();
       },
       get children() {
         return [createMemo(() => context?.getName()), " *"];
       }
     }), null);
     insert(_el$, theChildren, null);
-    createRenderEffect(() => className(_el$2, `${getHideLegendStyle()} ${local?.legendClass ?? ''}`));
+    createRenderEffect(_p$ => {
+      var _v$ = `${hasInsideText() ? style$4.moveLegendInside : style$4.moveLegendOutside} ${local?.legendClass ?? ''}`,
+        _v$2 = `${style$4.legendStyle}`;
+      _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+      _v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
     return _el$;
-  })();
+  })(), (() => {
+    var _el$4 = _tmpl$2$6();
+    insert(_el$4, createComponent(For, {
+      get each() {
+        return formErrors();
+      },
+      children: (error, index) => {
+        return (() => {
+          var _el$5 = _tmpl$2$6();
+          insert(_el$5, () => error.display);
+          createRenderEffect(_p$ => {
+            var _v$3 = style$4.error,
+              _v$4 = getErrorLocStyle(index());
+            _v$3 !== _p$.e && className(_el$5, _p$.e = _v$3);
+            _p$.t = style$9(_el$5, _v$4, _p$.t);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined
+          });
+          return _el$5;
+        })();
+      }
+    }));
+    createRenderEffect(() => className(_el$4, style$4.errorContainer));
+    return _el$4;
+  })()];
 };
 
-var css_248z$7 = "@charset \"UTF-8\";\n.input-module_input__-LMoi {\n  width: 100%;\n  max-width: 400px;\n  border-radius: var(--border-radius-lg, 16px);\n  font-size: var(--font-size-base, 16px);\n}\n@media screen and (max-width: 768px) {\n  .input-module_input__-LMoi {\n    width: 100%;\n    max-width: 100%;\n  }\n}\n.input-module_input__-LMoi[type=checkbox] {\n  width: -moz-min-content;\n  width: min-content;\n  -webkit-appearance: none;\n  border: 1px solid #cacece;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);\n  padding: var(--spacing-1, 8px);\n  border-radius: var(--border-radius-sm);\n  display: inline-block;\n  position: relative;\n}\n.input-module_input__-LMoi[type=checkbox]:checked {\n  background-color: inherit;\n  border: 1px solid #adb8c0;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);\n  color: inherit;\n}\n.input-module_input__-LMoi[type=checkbox]:checked:after {\n  content: \"✔\";\n  position: absolute;\n  top: -15%;\n  left: 15%;\n  width: 10px;\n  height: 10px;\n  border-radius: 10%;\n}\n.input-module_input__-LMoi:focus {\n  outline: none;\n}\n.input-module_input__-LMoi.input-module_error__vs2kz {\n  border: 1px solid var(--warn-color);\n}\n.input-module_input__-LMoi.input-module_success__beiu5 {\n  border: 1px solid green;\n}\n.input-module_input__-LMoi.input-module_warning__b6S5s {\n  border: 1px solid orange;\n}\n.input-module_input__-LMoi.input-module_info__pWO0n {\n  border: 1px solid blue;\n}\n.input-module_input__-LMoi.input-module_disabled__40ZHw {\n  border: 1px solid gray;\n}\n\n.input-module_inFormField__kk-PD {\n  border: none;\n  outline: none;\n}\n\n.input-module_checkbox__Yu-9M {\n  cursor: pointer;\n}\n\n.input-module_transparent__aXcGX {\n  background-color: inherit !important;\n  opacity: 1;\n  color: inherit !important;\n  border: none;\n}\n.input-module_transparent__aXcGX :focus {\n  outline: none;\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImlucHV0Lm1vZHVsZS5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGdCQUFnQjtBQUNoQjtFQUNFLFdBQVc7RUFDWCxnQkFBZ0I7RUFDaEIsNENBQTRDO0VBQzVDLHNDQUFzQztBQUN4QztBQUNBO0VBQ0U7SUFDRSxXQUFXO0lBQ1gsZUFBZTtFQUNqQjtBQUNGO0FBQ0E7RUFDRSx1QkFBa0I7RUFBbEIsa0JBQWtCO0VBQ2xCLHdCQUF3QjtFQUN4Qix5QkFBeUI7RUFDekIseUZBQXlGO0VBQ3pGLDhCQUE4QjtFQUM5QixzQ0FBc0M7RUFDdEMscUJBQXFCO0VBQ3JCLGtCQUFrQjtBQUNwQjtBQUNBO0VBQ0UseUJBQXlCO0VBQ3pCLHlCQUF5QjtFQUN6Qix5SUFBeUk7RUFDekksY0FBYztBQUNoQjtBQUNBO0VBQ0UsWUFBWTtFQUNaLGtCQUFrQjtFQUNsQixTQUFTO0VBQ1QsU0FBUztFQUNULFdBQVc7RUFDWCxZQUFZO0VBQ1osa0JBQWtCO0FBQ3BCO0FBQ0E7RUFDRSxhQUFhO0FBQ2Y7QUFDQTtFQUNFLG1DQUFtQztBQUNyQztBQUNBO0VBQ0UsdUJBQXVCO0FBQ3pCO0FBQ0E7RUFDRSx3QkFBd0I7QUFDMUI7QUFDQTtFQUNFLHNCQUFzQjtBQUN4QjtBQUNBO0VBQ0Usc0JBQXNCO0FBQ3hCOztBQUVBO0VBQ0UsWUFBWTtFQUNaLGFBQWE7QUFDZjs7QUFFQTtFQUNFLGVBQWU7QUFDakI7O0FBRUE7RUFDRSxvQ0FBb0M7RUFDcEMsVUFBVTtFQUNWLHlCQUF5QjtFQUN6QixZQUFZO0FBQ2Q7QUFDQTtFQUNFLGFBQWE7QUFDZiIsImZpbGUiOiJpbnB1dC5tb2R1bGUuc2NzcyIsInNvdXJjZXNDb250ZW50IjpbIkBjaGFyc2V0IFwiVVRGLThcIjtcbi5pbnB1dCB7XG4gIHdpZHRoOiAxMDAlO1xuICBtYXgtd2lkdGg6IDQwMHB4O1xuICBib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzLWxnLCAxNnB4KTtcbiAgZm9udC1zaXplOiB2YXIoLS1mb250LXNpemUtYmFzZSwgMTZweCk7XG59XG5AbWVkaWEgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiA3NjhweCkge1xuICAuaW5wdXQge1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIG1heC13aWR0aDogMTAwJTtcbiAgfVxufVxuLmlucHV0W3R5cGU9Y2hlY2tib3hdIHtcbiAgd2lkdGg6IG1pbi1jb250ZW50O1xuICAtd2Via2l0LWFwcGVhcmFuY2U6IG5vbmU7XG4gIGJvcmRlcjogMXB4IHNvbGlkICNjYWNlY2U7XG4gIGJveC1zaGFkb3c6IDAgMXB4IDJweCByZ2JhKDAsIDAsIDAsIDAuMDUpLCBpbnNldCAwcHggLTE1cHggMTBweCAtMTJweCByZ2JhKDAsIDAsIDAsIDAuMDUpO1xuICBwYWRkaW5nOiB2YXIoLS1zcGFjaW5nLTEsIDhweCk7XG4gIGJvcmRlci1yYWRpdXM6IHZhcigtLWJvcmRlci1yYWRpdXMtc20pO1xuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbn1cbi5pbnB1dFt0eXBlPWNoZWNrYm94XTpjaGVja2VkIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogaW5oZXJpdDtcbiAgYm9yZGVyOiAxcHggc29saWQgI2FkYjhjMDtcbiAgYm94LXNoYWRvdzogMCAxcHggMnB4IHJnYmEoMCwgMCwgMCwgMC4wNSksIGluc2V0IDBweCAtMTVweCAxMHB4IC0xMnB4IHJnYmEoMCwgMCwgMCwgMC4wNSksIGluc2V0IDE1cHggMTBweCAtMTJweCByZ2JhKDI1NSwgMjU1LCAyNTUsIDAuMSk7XG4gIGNvbG9yOiBpbmhlcml0O1xufVxuLmlucHV0W3R5cGU9Y2hlY2tib3hdOmNoZWNrZWQ6YWZ0ZXIge1xuICBjb250ZW50OiBcIuKclFwiO1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHRvcDogLTE1JTtcbiAgbGVmdDogMTUlO1xuICB3aWR0aDogMTBweDtcbiAgaGVpZ2h0OiAxMHB4O1xuICBib3JkZXItcmFkaXVzOiAxMCU7XG59XG4uaW5wdXQ6Zm9jdXMge1xuICBvdXRsaW5lOiBub25lO1xufVxuLmlucHV0LmVycm9yIHtcbiAgYm9yZGVyOiAxcHggc29saWQgdmFyKC0td2Fybi1jb2xvcik7XG59XG4uaW5wdXQuc3VjY2VzcyB7XG4gIGJvcmRlcjogMXB4IHNvbGlkIGdyZWVuO1xufVxuLmlucHV0Lndhcm5pbmcge1xuICBib3JkZXI6IDFweCBzb2xpZCBvcmFuZ2U7XG59XG4uaW5wdXQuaW5mbyB7XG4gIGJvcmRlcjogMXB4IHNvbGlkIGJsdWU7XG59XG4uaW5wdXQuZGlzYWJsZWQge1xuICBib3JkZXI6IDFweCBzb2xpZCBncmF5O1xufVxuXG4uaW5Gb3JtRmllbGQge1xuICBib3JkZXI6IG5vbmU7XG4gIG91dGxpbmU6IG5vbmU7XG59XG5cbi5jaGVja2JveCB7XG4gIGN1cnNvcjogcG9pbnRlcjtcbn1cblxuLnRyYW5zcGFyZW50IHtcbiAgYmFja2dyb3VuZC1jb2xvcjogaW5oZXJpdCAhaW1wb3J0YW50O1xuICBvcGFjaXR5OiAxO1xuICBjb2xvcjogaW5oZXJpdCAhaW1wb3J0YW50O1xuICBib3JkZXI6IG5vbmU7XG59XG4udHJhbnNwYXJlbnQgOmZvY3VzIHtcbiAgb3V0bGluZTogbm9uZTtcbn0iXX0= */";
-var styles$2 = {"input":"input-module_input__-LMoi","inFormField":"input-module_inFormField__kk-PD","transparent":"input-module_transparent__aXcGX"};
-styleInject(css_248z$7);
+var css_248z$9 = "@charset \"UTF-8\";\n.input-module_input__-LMoi {\n  width: 100%;\n  max-width: 400px;\n  border-radius: var(--border-radius-lg, 16px);\n  font-size: var(--font-size-base, 16px);\n}\n@media screen and (max-width: 768px) {\n  .input-module_input__-LMoi {\n    width: 100%;\n    max-width: 100%;\n  }\n}\n.input-module_input__-LMoi[type=checkbox] {\n  width: -moz-min-content;\n  width: min-content;\n  -webkit-appearance: none;\n  border: 1px solid #cacece;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);\n  padding: var(--spacing-1, 8px);\n  border-radius: var(--border-radius-sm);\n  display: inline-block;\n  position: relative;\n}\n.input-module_input__-LMoi[type=checkbox]:checked {\n  background-color: inherit;\n  border: 1px solid #adb8c0;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);\n  color: inherit;\n}\n.input-module_input__-LMoi[type=checkbox]:checked:after {\n  content: \"✔\";\n  position: absolute;\n  top: -15%;\n  left: 15%;\n  width: 10px;\n  height: 10px;\n  border-radius: 10%;\n}\n.input-module_input__-LMoi:not([type=checkbox])::-moz-placeholder {\n  opacity: 0;\n}\n.input-module_input__-LMoi:not([type=checkbox])::placeholder {\n  opacity: 0;\n}\n.input-module_input__-LMoi:focus {\n  outline: none;\n}\n.input-module_input__-LMoi.input-module_error__vs2kz {\n  border: 1px solid var(--warn-color);\n}\n.input-module_input__-LMoi.input-module_success__beiu5 {\n  border: 1px solid green;\n}\n.input-module_input__-LMoi.input-module_warning__b6S5s {\n  border: 1px solid orange;\n}\n.input-module_input__-LMoi.input-module_info__pWO0n {\n  border: 1px solid blue;\n}\n.input-module_input__-LMoi.input-module_disabled__40ZHw {\n  border: 1px solid gray;\n}\n\n.input-module_inFormField__kk-PD {\n  border: none;\n  outline: none;\n}\n\n.input-module_checkbox__Yu-9M {\n  cursor: pointer;\n}\n\n.input-module_transparent__aXcGX {\n  background-color: inherit !important;\n  opacity: 1;\n  color: inherit !important;\n  border: none;\n}\n.input-module_transparent__aXcGX :focus {\n  outline: none;\n}";
+var styles$5 = {"input":"input-module_input__-LMoi","inFormField":"input-module_inFormField__kk-PD","transparent":"input-module_transparent__aXcGX"};
+styleInject(css_248z$9);
 
-var _tmpl$$9 = /*#__PURE__*/template(`<input>`);
+var _tmpl$$c = /*#__PURE__*/template(`<input>`);
 const Input = props => {
   const [customProps, normalProps] = splitProps(props, ["tooltip", "transparent", "value", "onChange"]);
   const noTransparent = type => "checkbox" !== (type ?? "text");
@@ -1562,7 +1693,7 @@ const Input = props => {
     }
   });
   return (() => {
-    var _el$ = _tmpl$$9();
+    var _el$ = _tmpl$$c();
     spread(_el$, mergeProps(normalProps, {
       get placeholder() {
         return placeholder();
@@ -1577,7 +1708,12 @@ const Input = props => {
       },
       "onBlur": e => {
         if (!isNullish(context.getName)) {
-          context?.setFocused?.(false);
+          context?.setFocused?.(prev => {
+            if (prev) {
+              formContext?.formGroup?.validate?.(context?.formName ?? '');
+            }
+            return false;
+          });
           const noValue = !e.currentTarget?.value?.trim();
           const noFormValue = !formContext?.data?.[context?.formName ?? ''];
           const noContextValue = !context?.getValue();
@@ -1589,7 +1725,7 @@ const Input = props => {
       },
       "onChange": onChange,
       get ["class"]() {
-        return `${styles$2.input} ${hasTrasparent() && noTransparent(normalProps.type) ? styles$2?.transparent : ""} ${!!context?.getName?.() ? styles$2?.inFormField : ''} ${props?.class ?? ""}`;
+        return `${styles$5.input} ${hasTrasparent() && noTransparent(normalProps.type) ? styles$5?.transparent : ""} ${!!context?.getName?.() ? styles$5?.inFormField : ''} ${props?.class ?? ""}`;
       },
       get title() {
         return customProps.tooltip;
@@ -1599,22 +1735,21 @@ const Input = props => {
   })();
 };
 
-var css_248z$6 = "/* Container and control (trigger) */\n.selectStyles_solid_select__NKR-3 {\n  position: relative;\n  display: inline-block;\n  width: -moz-max-content;\n  width: max-content;\n  height: -moz-max-content;\n  height: max-content;\n  margin-right: calc(var(--spacing-1, 8px) * 1.5);\n  border-radius: var(--border-radius-md, 8px);\n  text-align: left;\n}\n\n.selectStyles_solid_select__value__6Wfm7 {\n  flex-grow: 1;\n}\n\n.selectStyles_solid_select__arrow__kTemB {\n  float: right;\n}\n\n.selectStyles_solid_select__control__5tiE- {\n  display: flex;\n  align-items: center;\n  min-width: 200px;\n  width: 100%;\n  padding: calc(var(--spacing-1, 8px) * 0.5) var(--spacing-1, 8px);\n  cursor: pointer;\n}\n\n.selectStyles_solid_select__control__5tiE-:hover {\n  border-color: #999;\n}\n\n/* Placeholder text style */\n.selectStyles_solid_select__placeholder__G5WXj {\n  color: #888;\n}\n\n/* Dropdown arrow icon */\n.selectStyles_solid_select__arrow__kTemB {\n  font-size: 0.7em;\n  margin-left: 8px;\n}\n\n/* Dropdown menu */\n.selectStyles_solid_select__dropdown__HDHJw {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: 90000;\n  width: -moz-fit-content !important;\n  width: fit-content !important;\n  min-height: var(--spacing-4, 32px);\n  max-height: 200px;\n  min-width: 200px;\n  border-radius: var(--border-radius-md, 8px);\n  overflow-y: auto;\n  border: 1px solid #ccc;\n  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);\n}\n\n.selectStyles_option-label__hZrPh {\n  width: -moz-fit-content;\n  width: fit-content;\n}\n\n.selectStyles_solid_select__option__euHDA {\n  width: -moz-fit-content;\n  width: fit-content;\n}\n.selectStyles_solid_select__option__euHDA:has(.selectStyles_selected__ux-hP) {\n  font-weight: bold;\n}\n.selectStyles_solid_select__option__euHDA:hover {\n  cursor: pointer;\n}\n\n/* Colors */\n.selectStyles_solid_select__transparent__ak6Va {\n  background-color: transparent;\n  color: var(--on-background-color);\n}\n\n.selectStyles_solid_select__primary__tQ3sJ {\n  background-color: var(--primary-color);\n  color: var(--on-primary-color);\n}\n\n.selectStyles_solid_select__option_primary__zixQP {\n  background-color: var(--primary-color);\n  color: var(--on-primary-color);\n}\n.selectStyles_solid_select__option_primary__zixQP:has(.selectStyles_selected__ux-hP) {\n  background: var(--primary-color-dark);\n}\n\n.selectStyles_solid_select__option_primary__zixQP:hover {\n  background: var(--primary-color-dark);\n}\n\n.selectStyles_solid_select__primary_dropdown__ohWbr {\n  background-color: var(--primary-color);\n  color: var(--on-primary-color);\n}\n\n.selectStyles_solid_select__accent__Rt07n {\n  background-color: var(--secondary-color);\n  color: var(--on-secondary-color);\n}\n.selectStyles_solid_select__accent__Rt07n:has(.selectStyles_selected__ux-hP) {\n  background: var(--secondary-color-dark);\n}\n\n.selectStyles_solid_select__option_accent__xYJuA {\n  background-color: var(--secondary-color);\n  color: var(--on-secondary-color);\n}\n\n.selectStyles_solid_select__option_accent__xYJuA:hover {\n  background: var(--secondary-color-dark);\n}\n\n.selectStyles_solid_select__accent_dropdown__PY023 {\n  background-color: var(--secondary-color);\n  color: var(--on-secondary-color);\n}\n\n.selectStyles_solid_select__tertiary__8D4YE {\n  background-color: var(--tertiary-color);\n  color: var(--on-tertiary-color);\n}\n.selectStyles_solid_select__tertiary__8D4YE:has(.selectStyles_selected__ux-hP) {\n  background: var(--tertiary-color-dark);\n}\n\n.selectStyles_solid_select__option_tertiary__OIRkB {\n  background-color: var(--tertiary-color);\n  color: var(--on-tertiary-color);\n}\n\n.selectStyles_solid_select__option_tertiary__OIRkB:hover {\n  background: var(--tertiary-color-dark);\n}\n\n.selectStyles_solid_select__tertiary_dropdown__k1M09 {\n  background-color: var(--tertiary-color);\n  color: var(--on-tertiary-color);\n}\n\n/* Option items */\n.selectStyles_solid_select__option__euHDA {\n  padding: 8px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  min-height: var(--spacing-4, 32px);\n  width: 95%;\n  min-width: 200px;\n}\n\n.selectStyles_checkmark__zu0id {\n  display: inline-block;\n  width: 1.2em; /* reserve space for the checkmark */\n  margin-right: 4px;\n  text-align: center;\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNlbGVjdFN0eWxlcy5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLG9DQUFvQztBQUNwQztFQUNFLGtCQUFrQjtFQUNsQixxQkFBcUI7RUFDckIsdUJBQWtCO0VBQWxCLGtCQUFrQjtFQUNsQix3QkFBbUI7RUFBbkIsbUJBQW1CO0VBQ25CLCtDQUErQztFQUMvQywyQ0FBMkM7RUFDM0MsZ0JBQWdCO0FBQ2xCOztBQUVBO0VBQ0UsWUFBWTtBQUNkOztBQUVBO0VBQ0UsWUFBWTtBQUNkOztBQUVBO0VBQ0UsYUFBYTtFQUNiLG1CQUFtQjtFQUNuQixnQkFBZ0I7RUFDaEIsV0FBVztFQUNYLGdFQUFnRTtFQUNoRSxlQUFlO0FBQ2pCOztBQUVBO0VBQ0Usa0JBQWtCO0FBQ3BCOztBQUVBLDJCQUEyQjtBQUMzQjtFQUNFLFdBQVc7QUFDYjs7QUFFQSx3QkFBd0I7QUFDeEI7RUFDRSxnQkFBZ0I7RUFDaEIsZ0JBQWdCO0FBQ2xCOztBQUVBLGtCQUFrQjtBQUNsQjtFQUNFLGtCQUFrQjtFQUNsQixTQUFTO0VBQ1QsT0FBTztFQUNQLGNBQWM7RUFDZCxrQ0FBNkI7RUFBN0IsNkJBQTZCO0VBQzdCLGtDQUFrQztFQUNsQyxpQkFBaUI7RUFDakIsZ0JBQWdCO0VBQ2hCLDJDQUEyQztFQUMzQyxnQkFBZ0I7RUFDaEIsc0JBQXNCO0VBQ3RCLHdDQUF3QztBQUMxQzs7QUFFQTtFQUNFLHVCQUFrQjtFQUFsQixrQkFBa0I7QUFDcEI7O0FBRUE7RUFDRSx1QkFBa0I7RUFBbEIsa0JBQWtCO0FBQ3BCO0FBQ0E7RUFDRSxpQkFBaUI7QUFDbkI7QUFDQTtFQUNFLGVBQWU7QUFDakI7O0FBRUEsV0FBVztBQUNYO0VBQ0UsNkJBQTZCO0VBQzdCLGlDQUFpQztBQUNuQzs7QUFFQTtFQUNFLHNDQUFzQztFQUN0Qyw4QkFBOEI7QUFDaEM7O0FBRUE7RUFDRSxzQ0FBc0M7RUFDdEMsOEJBQThCO0FBQ2hDO0FBQ0E7RUFDRSxxQ0FBcUM7QUFDdkM7O0FBRUE7RUFDRSxxQ0FBcUM7QUFDdkM7O0FBRUE7RUFDRSxzQ0FBc0M7RUFDdEMsOEJBQThCO0FBQ2hDOztBQUVBO0VBQ0Usd0NBQXdDO0VBQ3hDLGdDQUFnQztBQUNsQztBQUNBO0VBQ0UsdUNBQXVDO0FBQ3pDOztBQUVBO0VBQ0Usd0NBQXdDO0VBQ3hDLGdDQUFnQztBQUNsQzs7QUFFQTtFQUNFLHVDQUF1QztBQUN6Qzs7QUFFQTtFQUNFLHdDQUF3QztFQUN4QyxnQ0FBZ0M7QUFDbEM7O0FBRUE7RUFDRSx1Q0FBdUM7RUFDdkMsK0JBQStCO0FBQ2pDO0FBQ0E7RUFDRSxzQ0FBc0M7QUFDeEM7O0FBRUE7RUFDRSx1Q0FBdUM7RUFDdkMsK0JBQStCO0FBQ2pDOztBQUVBO0VBQ0Usc0NBQXNDO0FBQ3hDOztBQUVBO0VBQ0UsdUNBQXVDO0VBQ3ZDLCtCQUErQjtBQUNqQzs7QUFFQSxpQkFBaUI7QUFDakI7RUFDRSxZQUFZO0VBQ1osZUFBZTtFQUNmLGFBQWE7RUFDYixtQkFBbUI7RUFDbkIsa0NBQWtDO0VBQ2xDLFVBQVU7RUFDVixnQkFBZ0I7QUFDbEI7O0FBRUE7RUFDRSxxQkFBcUI7RUFDckIsWUFBWSxFQUFFLG9DQUFvQztFQUNsRCxpQkFBaUI7RUFDakIsa0JBQWtCO0FBQ3BCIiwiZmlsZSI6InNlbGVjdFN0eWxlcy5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyogQ29udGFpbmVyIGFuZCBjb250cm9sICh0cmlnZ2VyKSAqL1xuLnNvbGlkX3NlbGVjdCB7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICB3aWR0aDogbWF4LWNvbnRlbnQ7XG4gIGhlaWdodDogbWF4LWNvbnRlbnQ7XG4gIG1hcmdpbi1yaWdodDogY2FsYyh2YXIoLS1zcGFjaW5nLTEsIDhweCkgKiAxLjUpO1xuICBib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzLW1kLCA4cHgpO1xuICB0ZXh0LWFsaWduOiBsZWZ0O1xufVxuXG4uc29saWRfc2VsZWN0X192YWx1ZSB7XG4gIGZsZXgtZ3JvdzogMTtcbn1cblxuLnNvbGlkX3NlbGVjdF9fYXJyb3cge1xuICBmbG9hdDogcmlnaHQ7XG59XG5cbi5zb2xpZF9zZWxlY3RfX2NvbnRyb2wge1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBtaW4td2lkdGg6IDIwMHB4O1xuICB3aWR0aDogMTAwJTtcbiAgcGFkZGluZzogY2FsYyh2YXIoLS1zcGFjaW5nLTEsIDhweCkgKiAwLjUpIHZhcigtLXNwYWNpbmctMSwgOHB4KTtcbiAgY3Vyc29yOiBwb2ludGVyO1xufVxuXG4uc29saWRfc2VsZWN0X19jb250cm9sOmhvdmVyIHtcbiAgYm9yZGVyLWNvbG9yOiAjOTk5O1xufVxuXG4vKiBQbGFjZWhvbGRlciB0ZXh0IHN0eWxlICovXG4uc29saWRfc2VsZWN0X19wbGFjZWhvbGRlciB7XG4gIGNvbG9yOiAjODg4O1xufVxuXG4vKiBEcm9wZG93biBhcnJvdyBpY29uICovXG4uc29saWRfc2VsZWN0X19hcnJvdyB7XG4gIGZvbnQtc2l6ZTogMC43ZW07XG4gIG1hcmdpbi1sZWZ0OiA4cHg7XG59XG5cbi8qIERyb3Bkb3duIG1lbnUgKi9cbi5zb2xpZF9zZWxlY3RfX2Ryb3Bkb3duIHtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB0b3A6IDEwMCU7XG4gIGxlZnQ6IDA7XG4gIHotaW5kZXg6IDkwMDAwO1xuICB3aWR0aDogZml0LWNvbnRlbnQgIWltcG9ydGFudDtcbiAgbWluLWhlaWdodDogdmFyKC0tc3BhY2luZy00LCAzMnB4KTtcbiAgbWF4LWhlaWdodDogMjAwcHg7XG4gIG1pbi13aWR0aDogMjAwcHg7XG4gIGJvcmRlci1yYWRpdXM6IHZhcigtLWJvcmRlci1yYWRpdXMtbWQsIDhweCk7XG4gIG92ZXJmbG93LXk6IGF1dG87XG4gIGJvcmRlcjogMXB4IHNvbGlkICNjY2M7XG4gIGJveC1zaGFkb3c6IDAgMnB4IDVweCByZ2JhKDAsIDAsIDAsIDAuMik7XG59XG5cbi5vcHRpb24tbGFiZWwge1xuICB3aWR0aDogZml0LWNvbnRlbnQ7XG59XG5cbi5zb2xpZF9zZWxlY3RfX29wdGlvbiB7XG4gIHdpZHRoOiBmaXQtY29udGVudDtcbn1cbi5zb2xpZF9zZWxlY3RfX29wdGlvbjpoYXMoLnNlbGVjdGVkKSB7XG4gIGZvbnQtd2VpZ2h0OiBib2xkO1xufVxuLnNvbGlkX3NlbGVjdF9fb3B0aW9uOmhvdmVyIHtcbiAgY3Vyc29yOiBwb2ludGVyO1xufVxuXG4vKiBDb2xvcnMgKi9cbi5zb2xpZF9zZWxlY3RfX3RyYW5zcGFyZW50IHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGNvbG9yOiB2YXIoLS1vbi1iYWNrZ3JvdW5kLWNvbG9yKTtcbn1cblxuLnNvbGlkX3NlbGVjdF9fcHJpbWFyeSB7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXByaW1hcnktY29sb3IpO1xuICBjb2xvcjogdmFyKC0tb24tcHJpbWFyeS1jb2xvcik7XG59XG5cbi5zb2xpZF9zZWxlY3RfX29wdGlvbl9wcmltYXJ5IHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tcHJpbWFyeS1jb2xvcik7XG4gIGNvbG9yOiB2YXIoLS1vbi1wcmltYXJ5LWNvbG9yKTtcbn1cbi5zb2xpZF9zZWxlY3RfX29wdGlvbl9wcmltYXJ5Omhhcyguc2VsZWN0ZWQpIHtcbiAgYmFja2dyb3VuZDogdmFyKC0tcHJpbWFyeS1jb2xvci1kYXJrKTtcbn1cblxuLnNvbGlkX3NlbGVjdF9fb3B0aW9uX3ByaW1hcnk6aG92ZXIge1xuICBiYWNrZ3JvdW5kOiB2YXIoLS1wcmltYXJ5LWNvbG9yLWRhcmspO1xufVxuXG4uc29saWRfc2VsZWN0X19wcmltYXJ5X2Ryb3Bkb3duIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tcHJpbWFyeS1jb2xvcik7XG4gIGNvbG9yOiB2YXIoLS1vbi1wcmltYXJ5LWNvbG9yKTtcbn1cblxuLnNvbGlkX3NlbGVjdF9fYWNjZW50IHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc2Vjb25kYXJ5LWNvbG9yKTtcbiAgY29sb3I6IHZhcigtLW9uLXNlY29uZGFyeS1jb2xvcik7XG59XG4uc29saWRfc2VsZWN0X19hY2NlbnQ6aGFzKC5zZWxlY3RlZCkge1xuICBiYWNrZ3JvdW5kOiB2YXIoLS1zZWNvbmRhcnktY29sb3ItZGFyayk7XG59XG5cbi5zb2xpZF9zZWxlY3RfX29wdGlvbl9hY2NlbnQge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zZWNvbmRhcnktY29sb3IpO1xuICBjb2xvcjogdmFyKC0tb24tc2Vjb25kYXJ5LWNvbG9yKTtcbn1cblxuLnNvbGlkX3NlbGVjdF9fb3B0aW9uX2FjY2VudDpob3ZlciB7XG4gIGJhY2tncm91bmQ6IHZhcigtLXNlY29uZGFyeS1jb2xvci1kYXJrKTtcbn1cblxuLnNvbGlkX3NlbGVjdF9fYWNjZW50X2Ryb3Bkb3duIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc2Vjb25kYXJ5LWNvbG9yKTtcbiAgY29sb3I6IHZhcigtLW9uLXNlY29uZGFyeS1jb2xvcik7XG59XG5cbi5zb2xpZF9zZWxlY3RfX3RlcnRpYXJ5IHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tdGVydGlhcnktY29sb3IpO1xuICBjb2xvcjogdmFyKC0tb24tdGVydGlhcnktY29sb3IpO1xufVxuLnNvbGlkX3NlbGVjdF9fdGVydGlhcnk6aGFzKC5zZWxlY3RlZCkge1xuICBiYWNrZ3JvdW5kOiB2YXIoLS10ZXJ0aWFyeS1jb2xvci1kYXJrKTtcbn1cblxuLnNvbGlkX3NlbGVjdF9fb3B0aW9uX3RlcnRpYXJ5IHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tdGVydGlhcnktY29sb3IpO1xuICBjb2xvcjogdmFyKC0tb24tdGVydGlhcnktY29sb3IpO1xufVxuXG4uc29saWRfc2VsZWN0X19vcHRpb25fdGVydGlhcnk6aG92ZXIge1xuICBiYWNrZ3JvdW5kOiB2YXIoLS10ZXJ0aWFyeS1jb2xvci1kYXJrKTtcbn1cblxuLnNvbGlkX3NlbGVjdF9fdGVydGlhcnlfZHJvcGRvd24ge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS10ZXJ0aWFyeS1jb2xvcik7XG4gIGNvbG9yOiB2YXIoLS1vbi10ZXJ0aWFyeS1jb2xvcik7XG59XG5cbi8qIE9wdGlvbiBpdGVtcyAqL1xuLnNvbGlkX3NlbGVjdF9fb3B0aW9uIHtcbiAgcGFkZGluZzogOHB4O1xuICBjdXJzb3I6IHBvaW50ZXI7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIG1pbi1oZWlnaHQ6IHZhcigtLXNwYWNpbmctNCwgMzJweCk7XG4gIHdpZHRoOiA5NSU7XG4gIG1pbi13aWR0aDogMjAwcHg7XG59XG5cbi5jaGVja21hcmsge1xuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIHdpZHRoOiAxLjJlbTsgLyogcmVzZXJ2ZSBzcGFjZSBmb3IgdGhlIGNoZWNrbWFyayAqL1xuICBtYXJnaW4tcmlnaHQ6IDRweDtcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xufSJdfQ== */";
-var styles$1 = {"solid_select":"selectStyles_solid_select__NKR-3","solid_select__value":"selectStyles_solid_select__value__6Wfm7","solid_select__arrow":"selectStyles_solid_select__arrow__kTemB","solid_select__control":"selectStyles_solid_select__control__5tiE-","solid_select__placeholder":"selectStyles_solid_select__placeholder__G5WXj","solid_select__dropdown":"selectStyles_solid_select__dropdown__HDHJw","option-label":"selectStyles_option-label__hZrPh","solid_select__option":"selectStyles_solid_select__option__euHDA","selected":"selectStyles_selected__ux-hP","solid_select__transparent":"selectStyles_solid_select__transparent__ak6Va","solid_select__primary":"selectStyles_solid_select__primary__tQ3sJ","solid_select__option_primary":"selectStyles_solid_select__option_primary__zixQP","solid_select__primary_dropdown":"selectStyles_solid_select__primary_dropdown__ohWbr","solid_select__accent":"selectStyles_solid_select__accent__Rt07n","solid_select__option_accent":"selectStyles_solid_select__option_accent__xYJuA","solid_select__accent_dropdown":"selectStyles_solid_select__accent_dropdown__PY023","solid_select__tertiary":"selectStyles_solid_select__tertiary__8D4YE","solid_select__option_tertiary":"selectStyles_solid_select__option_tertiary__OIRkB","solid_select__tertiary_dropdown":"selectStyles_solid_select__tertiary_dropdown__k1M09","checkmark":"selectStyles_checkmark__zu0id"};
-styleInject(css_248z$6);
+var css_248z$8 = ".selectStyles-module_solid_select__placeholder__VO5-- {\n  opacity: var(--text-emphasis-medium, 87%);\n}\n\n.selectStyles-module_solid_select__transparent__nOpvm {\n  background-color: transparent;\n}\n\n.selectStyles-module_solid_select__3plh1 {\n  display: inline-block;\n  position: relative;\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n  text-align: left;\n  border-radius: 8px;\n  width: 100%;\n  margin: 0px 6px;\n}\n\n.selectStyles-module_solid_select__control__Wmmpg {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  max-height: 48px;\n  border-radius: 8px;\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n  cursor: pointer;\n}\n.selectStyles-module_solid_select__control__Wmmpg:first-child {\n  flex-grow: 1;\n}\n.selectStyles-module_solid_select__control__Wmmpg:last-child {\n  padding: 0px 6px;\n  margin: 0px;\n}\n\n.selectStyles-module_solid_select__control_no_form__Cq9Sc {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 48px;\n  border-radius: 8px;\n  width: 200px;\n  margin-top: 2px;\n  cursor: pointer;\n}\n.selectStyles-module_solid_select__control_no_form__Cq9Sc:first-child {\n  flex-grow: 1;\n}\n.selectStyles-module_solid_select__control_no_form__Cq9Sc:last-child {\n  padding: 0px 6px;\n  margin: 0px;\n}\n\n.selectStyles-module_solid_select__arrow__OPCZo {\n  font-size: 0.7em;\n}\n\n.selectStyles-module_solid_select__value__rNtqF {\n  flex-grow: 1;\n}\n\n.selectStyles-module_solid_select__dropdown__UCt-N {\n  position: absolute;\n  background-color: var(--surface-color, #EEEEEE);\n  top: 100%;\n  left: 0;\n  z-index: 999999999999999;\n  max-height: 200px;\n  border-radius: 8px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);\n  transform-origin: top;\n  transform: scaleY(0);\n  transition: transform 0.3s ease-out, opacity 0.3s ease-out;\n  opacity: 0;\n}\n\n.selectStyles-module_dropTop__IVz9p {\n  transform-origin: bottom;\n}\n\n.selectStyles-module_dropBottom__cYJF0 {\n  transform-origin: top;\n}\n\n.selectStyles-module_open__f8zLA {\n  transform: scaleY(1);\n  opacity: 1;\n}\n\n.selectStyles-module_solid_select__option__47WMY {\n  padding: 8px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  min-height: 32px;\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n  border-radius: 8px;\n}\n.selectStyles-module_solid_select__option__47WMY:hover {\n  border: 2px inset var(--primary-color-varient, #43A047);\n}\n.selectStyles-module_solid_select__option__47WMY:has(.selectStyles-module_selected__1-CKm) {\n  font-weight: bold;\n}\n\n.selectStyles-module_checkmark__UWcbd {\n  display: inline-block;\n  width: 1.2em;\n  margin-right: 4px;\n  text-align: center;\n}\n\n.selectStyles-module_option-label__bBFSW {\n  width: -moz-max-content;\n  width: max-content;\n  height: -moz-max-content;\n  height: max-content;\n}";
+var styles$4 = {"solid_select__placeholder":"selectStyles-module_solid_select__placeholder__VO5--","solid_select__transparent":"selectStyles-module_solid_select__transparent__nOpvm","solid_select":"selectStyles-module_solid_select__3plh1","solid_select__control":"selectStyles-module_solid_select__control__Wmmpg","solid_select__control_no_form":"selectStyles-module_solid_select__control_no_form__Cq9Sc","solid_select__arrow":"selectStyles-module_solid_select__arrow__OPCZo","solid_select__value":"selectStyles-module_solid_select__value__rNtqF","solid_select__dropdown":"selectStyles-module_solid_select__dropdown__UCt-N","dropTop":"selectStyles-module_dropTop__IVz9p","dropBottom":"selectStyles-module_dropBottom__cYJF0","open":"selectStyles-module_open__f8zLA","solid_select__option":"selectStyles-module_solid_select__option__47WMY","selected":"selectStyles-module_selected__1-CKm","checkmark":"selectStyles-module_checkmark__UWcbd","option-label":"selectStyles-module_option-label__bBFSW"};
+styleInject(css_248z$8);
 
-var _tmpl$$8 = /*#__PURE__*/template(`<span class=solid_select__placeholder>`),
-  _tmpl$2$6 = /*#__PURE__*/template(`<span>`),
-  _tmpl$3$2 = /*#__PURE__*/template(`<span>▲`),
-  _tmpl$4$1 = /*#__PURE__*/template(`<span>▼`),
-  _tmpl$5$1 = /*#__PURE__*/template(`<div>`),
-  _tmpl$6 = /*#__PURE__*/template(`<div tabindex=0><div><span>`);
+var _tmpl$$b = /*#__PURE__*/template(`<span>`),
+  _tmpl$2$5 = /*#__PURE__*/template(`<span>▲`),
+  _tmpl$3$2 = /*#__PURE__*/template(`<span>▼`),
+  _tmpl$4$1 = /*#__PURE__*/template(`<div>`),
+  _tmpl$5$1 = /*#__PURE__*/template(`<div is=coles-solid-select tabindex=0><div><span>`, true, false, false);
 const SelectContext = createContext();
 function Select(props) {
   const isMultiple = Object.keys(props).includes("multiple") || props.multiple === true;
   const [placeholder, setPlaceholder] = createSignal(props?.placeholder ?? "Select...");
   // Internal state for selected value(s). Use provided value or defaultValue or an initial default.
-  const [currStyle, setCurrStyle] = createSignal(props.style ?? "accent");
+  const [currStyle, setCurrStyle] = createSignal("primary");
   const defaultSelected = isMultiple ? props.value ?? props.defaultValue ?? [] : props.value ?? props.defaultValue ?? undefined;
   const [selected, setSelected] = createSignal(defaultSelected);
   const [selectRef, setSelectRef] = createSignal();
@@ -1634,6 +1769,12 @@ function Select(props) {
   };
   // Signal for dropdown open/closed
   const [open, setOpen] = createSignal(false);
+  const menuLocRef = createMemo(() => {
+    if (!!form?.getFormFieldRef) {
+      return form.getFormFieldRef();
+    }
+    return selectRef();
+  });
   // Map of option value to label (JSX) for displaying selected labels
   const optionsMap = new Map();
   const registerOption = (val, label) => {
@@ -1667,9 +1808,6 @@ function Select(props) {
       setOpen(false);
     }
   };
-  const toggleOpen = () => {
-    setOpen(!open());
-  };
   // Compute the content to display in the closed select (trigger area)
   const displayValue = createMemo(() => {
     const current = currentValue(); //selected();
@@ -1678,14 +1816,16 @@ function Select(props) {
       if (selectedArray.length === 0) {
         if (hasForm && form.getTextInside() && !form.getFocused()) {
           return (() => {
-            var _el$ = _tmpl$$8();
+            var _el$ = _tmpl$$b();
             insert(_el$, () => form.getName() || props.placeholder || "Select...");
+            createRenderEffect(() => className(_el$, `${styles$4["solid_select__placeholder"]}`));
             return _el$;
           })();
         }
         return (() => {
-          var _el$2 = _tmpl$$8();
+          var _el$2 = _tmpl$$b();
           insert(_el$2, () => props.placeholder || "Select...");
+          createRenderEffect(() => className(_el$2, `${styles$4["solid_select__placeholder"]}`));
           return _el$2;
         })();
       }
@@ -1694,7 +1834,7 @@ function Select(props) {
       } else {
         const labels = selectedArray.map(val => optionsMap.get(val) || String(val));
         return (() => {
-          var _el$3 = _tmpl$2$6();
+          var _el$3 = _tmpl$$b();
           insert(_el$3, () => labels.join(", "));
           return _el$3;
         })();
@@ -1705,14 +1845,16 @@ function Select(props) {
       if (isNullish(singleVal) || typeof singleVal === "string" && !!!singleVal.trim()) {
         if (hasForm && form.getTextInside() && !form.getFocused()) {
           return (() => {
-            var _el$4 = _tmpl$$8();
+            var _el$4 = _tmpl$$b();
             insert(_el$4, () => form.getName() || props.placeholder || "Select...");
+            createRenderEffect(() => className(_el$4, `${styles$4["solid_select__placeholder"]}`));
             return _el$4;
           })();
         }
         return (() => {
-          var _el$5 = _tmpl$$8();
+          var _el$5 = _tmpl$$b();
           insert(_el$5, () => props.placeholder || "Select...");
+          createRenderEffect(() => className(_el$5, `${styles$4["solid_select__placeholder"]}`));
           return _el$5;
         })();
       } else if (props.renderValue) {
@@ -1720,7 +1862,7 @@ function Select(props) {
       } else {
         const label = optionsMap.get(singleVal) || String(singleVal);
         return (() => {
-          var _el$6 = _tmpl$2$6();
+          var _el$6 = _tmpl$$b();
           insert(_el$6, label);
           return _el$6;
         })();
@@ -1728,16 +1870,16 @@ function Select(props) {
     }
   });
   const dropdownBelowScreen = () => {
-    if (selectRef() && dropdownRef()) {
-      const selectRect = selectRef().getBoundingClientRect();
+    if (menuLocRef() && dropdownRef()) {
+      const selectRect = menuLocRef().getBoundingClientRect();
       const dropdownRect = dropdownRef().getBoundingClientRect();
       return selectRect.bottom + dropdownRect.height > window.innerHeight;
     }
     return false;
   };
   const selectLocation = () => {
-    if (selectRef()) {
-      const rect = selectRef().getBoundingClientRect();
+    if (menuLocRef()) {
+      const rect = menuLocRef().getBoundingClientRect();
       if (dropdownBelowScreen()) {
         return {
           x: rect.left,
@@ -1754,12 +1896,6 @@ function Select(props) {
       y: 0
     };
   };
-  const selectWidth = () => {
-    if (selectRef()) {
-      return selectRef().getBoundingClientRect().width;
-    }
-    return 0;
-  };
   // Update width of select to match option text width
   createEffect(() => {
     if (selectRef() && dropdownRef()) {
@@ -1787,20 +1923,21 @@ function Select(props) {
     }
   });
   const isTransparent = Object.keys(props).includes("transparent") || props.transparent === true;
-  const styleClass = !isTransparent ? "solid_select__" + currStyle() : '';
-  const styleClassDropdown = "solid_select__" + currStyle() + "_dropdown";
   const styleClassTransparent = isTransparent ? "solid_select__transparent" : "";
   // Give Current Value to Props
   createEffect(() => {
     !!props?.onChange ? props.onChange(currentValue()) : null;
   });
-  onMount(() => {
-    const handleOutsideClick = e => {
-      if (open() && dropdownRef() && !dropdownRef().contains(e.target)) {
-        setOpen(false);
+  useClickOutside([dropdownRef, selectRef], () => {
+    setOpen(false);
+    form?.setFocused?.(prev => {
+      if (prev) {
+        formContext?.formGroup?.validate?.(form?.formName ?? '');
       }
-    };
-    document.addEventListener("mousedown", handleOutsideClick);
+      return false;
+    });
+  });
+  onMount(() => {
     if (hasForm) {
       const formValue = currentValue() ?? isMultiple ? [] : undefined;
       const typedFormValue = isMultiple ? formValue : formValue;
@@ -1826,34 +1963,33 @@ function Select(props) {
         }
       }
     }
-    onCleanup(() => document.removeEventListener("mousedown", handleOutsideClick));
   });
   return (() => {
-    var _el$7 = _tmpl$6(),
+    var _el$7 = _tmpl$5$1(),
       _el$8 = _el$7.firstChild,
       _el$9 = _el$8.firstChild;
     _el$7.$$keydown = e => {
       // (Optional) keyboard support for navigation can be added here
       if (e.key === "Escape") setOpen(false);
     };
-    _el$7.addEventListener("blur", () => {
-      if (!isNullish(form.getName)) ;
-    });
-    _el$7.addEventListener("focus", () => {
-      if (!isNullish(form.getName)) {
-        form.setFocused(true);
-      }
-    });
-    _el$8.$$click = toggleOpen;
+    _el$7.addEventListener("focus", () => form?.setFocused?.(true));
+    _el$7._$owner = getOwner();
+    _el$8.$$click = e => {
+      setOpen(old => !old);
+    };
     use(setSelectRef, _el$8);
+    _el$9.$$click = e => {
+      setOpen(old => !old);
+      e.stopPropagation();
+    };
     insert(_el$9, displayValue);
     insert(_el$8, createComponent(Show, {
       get when() {
         return open();
       },
       get children() {
-        var _el$10 = _tmpl$3$2();
-        createRenderEffect(() => className(_el$10, styles$1['solid_select__arrow']));
+        var _el$10 = _tmpl$2$5();
+        createRenderEffect(() => className(_el$10, styles$4['solid_select__arrow']));
         return _el$10;
       }
     }), null);
@@ -1862,8 +1998,8 @@ function Select(props) {
         return !open();
       },
       get children() {
-        var _el$11 = _tmpl$4$1();
-        createRenderEffect(() => className(_el$11, styles$1['solid_select__arrow']));
+        var _el$11 = _tmpl$3$2();
+        createRenderEffect(() => className(_el$11, styles$4['solid_select__arrow']));
         return _el$11;
       }
     }), null);
@@ -1877,64 +2013,62 @@ function Select(props) {
         selectStyle: currStyle
       },
       get children() {
-        return createComponent(Show, {
-          get when() {
-            return open();
-          },
+        return createComponent(Portal, {
           get children() {
-            return createComponent(Portal, {
-              get children() {
-                var _el$12 = _tmpl$5$1();
-                use(setDropdownRef, _el$12);
-                insert(_el$12, () => props.children);
-                createRenderEffect(_p$ => {
-                  var _v$ = `${styles$1['solid_select__dropdown']} ${styles$1[styleClassDropdown]} ${props.dropdownClass || ""}`,
-                    _v$2 = `${selectLocation().y}px`,
-                    _v$3 = `${selectLocation().x}px`,
-                    _v$4 = `${selectWidth()}px`;
-                  _v$ !== _p$.e && className(_el$12, _p$.e = _v$);
-                  _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$12.style.setProperty("top", _v$2) : _el$12.style.removeProperty("top"));
-                  _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$12.style.setProperty("left", _v$3) : _el$12.style.removeProperty("left"));
-                  _v$4 !== _p$.o && ((_p$.o = _v$4) != null ? _el$12.style.setProperty("width", _v$4) : _el$12.style.removeProperty("width"));
-                  return _p$;
-                }, {
-                  e: undefined,
-                  t: undefined,
-                  a: undefined,
-                  o: undefined
-                });
-                return _el$12;
-              }
+            var _el$12 = _tmpl$4$1();
+            use(setDropdownRef, _el$12);
+            insert(_el$12, () => props.children);
+            createRenderEffect(_p$ => {
+              var _v$ = `${styles$4['solid_select__dropdown']} ${dropdownBelowScreen() ? styles$4.dropTop : styles$4.dropBottom} ${open() ? styles$4.open : ''} ${props.dropdownClass || ""}`,
+                _v$2 = `${selectLocation().y}px`,
+                _v$3 = `${selectLocation().x}px`,
+                _v$4 = `${menuLocRef()?.getBoundingClientRect().width ?? 100}px !important`;
+              _v$ !== _p$.e && className(_el$12, _p$.e = _v$);
+              _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$12.style.setProperty("top", _v$2) : _el$12.style.removeProperty("top"));
+              _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$12.style.setProperty("left", _v$3) : _el$12.style.removeProperty("left"));
+              _v$4 !== _p$.o && ((_p$.o = _v$4) != null ? _el$12.style.setProperty("width", _v$4) : _el$12.style.removeProperty("width"));
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined,
+              a: undefined,
+              o: undefined
             });
+            return _el$12;
           }
         });
       }
     }), null);
     createRenderEffect(_p$ => {
       var _v$5 = props.id,
-        _v$6 = `${!hasForm ? styles$1.solid_select : ''} ${styles$1[styleClass]} ${styles$1[styleClassTransparent]} coles-solid-selectControl`,
+        _v$6 = `${styles$4.solid_select__control_no_form} ${styles$4[styleClassTransparent]} coles-solid-selectControl`,
         _v$7 = props.tooltip,
-        _v$8 = `${styles$1['solid_select__control']} ${props.class || ""}`,
-        _v$9 = styles$1['solid_select__value'];
-      _v$5 !== _p$.e && setAttribute(_el$7, "id", _p$.e = _v$5);
+        _v$8 = `${styles$4['solid_select__control']} ${props.class || ""}`,
+        _v$9 = !hasForm ? {
+          height: '48px'
+        } : {},
+        _v$10 = styles$4['solid_select__value'];
+      _v$5 !== _p$.e && (_el$7.id = _p$.e = _v$5);
       _v$6 !== _p$.t && className(_el$7, _p$.t = _v$6);
-      _v$7 !== _p$.a && setAttribute(_el$7, "title", _p$.a = _v$7);
+      _v$7 !== _p$.a && (_el$7.title = _p$.a = _v$7);
       _v$8 !== _p$.o && className(_el$8, _p$.o = _v$8);
-      _v$9 !== _p$.i && className(_el$9, _p$.i = _v$9);
+      _p$.i = style$9(_el$8, _v$9, _p$.i);
+      _v$10 !== _p$.n && className(_el$9, _p$.n = _v$10);
       return _p$;
     }, {
       e: undefined,
       t: undefined,
       a: undefined,
       o: undefined,
-      i: undefined
+      i: undefined,
+      n: undefined
     });
     return _el$7;
   })();
 }
 delegateEvents(["keydown", "click"]);
 
-var _tmpl$$7 = /*#__PURE__*/template(`<div><span></span><span>`);
+var _tmpl$$a = /*#__PURE__*/template(`<div><span></span><span is=coles-select-label>`, true, false, false);
 function Option(props) {
   const select = useContext(SelectContext);
   if (!select) {
@@ -2008,17 +2142,18 @@ function Option(props) {
     }
   };
   return (() => {
-    var _el$ = _tmpl$$7(),
+    var _el$ = _tmpl$$a(),
       _el$2 = _el$.firstChild,
       _el$3 = _el$2.nextSibling;
     _el$.$$click = handleClick;
     insert(_el$2, () => select.isSelected(props.value) ? "✓" : "");
+    _el$3._$owner = getOwner();
     insert(_el$3, () => props.children ?? "");
     createRenderEffect(_p$ => {
-      var _v$ = `${styles$1['solid_select__option']} ${styles$1[`solid_select__option_${select?.selectStyle?.() ?? 'accent'}`]} ${props.class || ""}`,
+      var _v$ = `${styles$4['solid_select__option']} ${props.class || ""}`,
         _v$2 = !!select.isSelected(props.value),
-        _v$3 = `${styles$1['checkmark']}`,
-        _v$4 = `${styles$1['option-label']}`;
+        _v$3 = `${styles$4['checkmark']}`,
+        _v$4 = `${styles$4['option-label']}`;
       _v$ !== _p$.e && className(_el$, _p$.e = _v$);
       _v$2 !== _p$.t && _el$.classList.toggle("selected", _p$.t = _v$2);
       _v$3 !== _p$.a && className(_el$2, _p$.a = _v$3);
@@ -2035,12 +2170,12 @@ function Option(props) {
 }
 delegateEvents(["click"]);
 
-var css_248z$5 = ".snackbar-module_snack__Dkcmp {\n  position: fixed;\n  bottom: 10px;\n  left: 45vw;\n  right: 45vw;\n  border-radius: 15px;\n  margin: 0;\n  padding: 0;\n  z-index: 9999;\n  display: flex;\n  flex-direction: row;\n  align-items: flex-end;\n  max-width: 10vw;\n  padding: 5px;\n}\n@media screen and (max-width: 768px) {\n  .snackbar-module_snack__Dkcmp {\n    left: 8vw;\n    right: 8vw;\n    bottom: 20vh;\n    max-width: 70vw;\n  }\n}\n.snackbar-module_snack__Dkcmp span {\n  flex-grow: 1;\n  margin: auto 0;\n  text-wrap: wrap;\n}\n.snackbar-module_snack__Dkcmp button {\n  margin: auto 0;\n}\n\n.snackbar-module_error__7IShA {\n  border: 2px solid red;\n  border-color: red;\n  color: red;\n  font-weight: bold;\n}\n\n.snackbar-module_success__JPkNY {\n  border-color: #4caf50;\n  border: 2px solid #4caf50;\n  color: #4caf50;\n}\n\n.snackbar-module_info__52mgJ {\n  border-color: var(--on-primary-color, #ffffff);\n  border: 2px solid var(--on-primary-color, #ffffff);\n  color: var(--on-primary-color, #ffffff);\n}\n\n.snackbar-module_warning__K1oCK {\n  border-color: #ff9800;\n  border: 2px solid #ff9800;\n  color: #ff9800;\n}\n\n.snackbar-module_open__Bdhg1 {\n  animation: snackbar-module_slideIn__aM-2K 0.5s forwards;\n}\n\n.snackbar-module_close__-JXxs {\n  animation: snackbar-module_slideOut__6sQkv 0.5s forwards;\n}\n\n.snackbar-module_primary__j2zPB {\n  background-color: var(--primary-color, #3F51B5);\n  color: var(--on-primary-color, #ffffff);\n}\n.snackbar-module_primary__j2zPB:hover {\n  cursor: pointer;\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNuYWNrYmFyLm1vZHVsZS5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsZUFBZTtFQUNmLFlBQVk7RUFDWixVQUFVO0VBQ1YsV0FBVztFQUNYLG1CQUFtQjtFQUNuQixTQUFTO0VBQ1QsVUFBVTtFQUNWLGFBQWE7RUFDYixhQUFhO0VBQ2IsbUJBQW1CO0VBQ25CLHFCQUFxQjtFQUNyQixlQUFlO0VBQ2YsWUFBWTtBQUNkO0FBQ0E7RUFDRTtJQUNFLFNBQVM7SUFDVCxVQUFVO0lBQ1YsWUFBWTtJQUNaLGVBQWU7RUFDakI7QUFDRjtBQUNBO0VBQ0UsWUFBWTtFQUNaLGNBQWM7RUFDZCxlQUFlO0FBQ2pCO0FBQ0E7RUFDRSxjQUFjO0FBQ2hCOztBQUVBO0VBQ0UscUJBQXFCO0VBQ3JCLGlCQUFpQjtFQUNqQixVQUFVO0VBQ1YsaUJBQWlCO0FBQ25COztBQUVBO0VBQ0UscUJBQXFCO0VBQ3JCLHlCQUF5QjtFQUN6QixjQUFjO0FBQ2hCOztBQUVBO0VBQ0UsOENBQThDO0VBQzlDLGtEQUFrRDtFQUNsRCx1Q0FBdUM7QUFDekM7O0FBRUE7RUFDRSxxQkFBcUI7RUFDckIseUJBQXlCO0VBQ3pCLGNBQWM7QUFDaEI7O0FBRUE7RUFDRSx1REFBZ0M7QUFDbEM7O0FBRUE7RUFDRSx3REFBaUM7QUFDbkM7O0FBRUE7RUFDRSwrQ0FBK0M7RUFDL0MsdUNBQXVDO0FBQ3pDO0FBQ0E7RUFDRSxlQUFlO0FBQ2pCIiwiZmlsZSI6InNuYWNrYmFyLm1vZHVsZS5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLnNuYWNrIHtcbiAgcG9zaXRpb246IGZpeGVkO1xuICBib3R0b206IDEwcHg7XG4gIGxlZnQ6IDQ1dnc7XG4gIHJpZ2h0OiA0NXZ3O1xuICBib3JkZXItcmFkaXVzOiAxNXB4O1xuICBtYXJnaW46IDA7XG4gIHBhZGRpbmc6IDA7XG4gIHotaW5kZXg6IDk5OTk7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiByb3c7XG4gIGFsaWduLWl0ZW1zOiBmbGV4LWVuZDtcbiAgbWF4LXdpZHRoOiAxMHZ3O1xuICBwYWRkaW5nOiA1cHg7XG59XG5AbWVkaWEgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiA3NjhweCkge1xuICAuc25hY2sge1xuICAgIGxlZnQ6IDh2dztcbiAgICByaWdodDogOHZ3O1xuICAgIGJvdHRvbTogMjB2aDtcbiAgICBtYXgtd2lkdGg6IDcwdnc7XG4gIH1cbn1cbi5zbmFjayBzcGFuIHtcbiAgZmxleC1ncm93OiAxO1xuICBtYXJnaW46IGF1dG8gMDtcbiAgdGV4dC13cmFwOiB3cmFwO1xufVxuLnNuYWNrIGJ1dHRvbiB7XG4gIG1hcmdpbjogYXV0byAwO1xufVxuXG4uZXJyb3Ige1xuICBib3JkZXI6IDJweCBzb2xpZCByZWQ7XG4gIGJvcmRlci1jb2xvcjogcmVkO1xuICBjb2xvcjogcmVkO1xuICBmb250LXdlaWdodDogYm9sZDtcbn1cblxuLnN1Y2Nlc3Mge1xuICBib3JkZXItY29sb3I6ICM0Y2FmNTA7XG4gIGJvcmRlcjogMnB4IHNvbGlkICM0Y2FmNTA7XG4gIGNvbG9yOiAjNGNhZjUwO1xufVxuXG4uaW5mbyB7XG4gIGJvcmRlci1jb2xvcjogdmFyKC0tb24tcHJpbWFyeS1jb2xvciwgI2ZmZmZmZik7XG4gIGJvcmRlcjogMnB4IHNvbGlkIHZhcigtLW9uLXByaW1hcnktY29sb3IsICNmZmZmZmYpO1xuICBjb2xvcjogdmFyKC0tb24tcHJpbWFyeS1jb2xvciwgI2ZmZmZmZik7XG59XG5cbi53YXJuaW5nIHtcbiAgYm9yZGVyLWNvbG9yOiAjZmY5ODAwO1xuICBib3JkZXI6IDJweCBzb2xpZCAjZmY5ODAwO1xuICBjb2xvcjogI2ZmOTgwMDtcbn1cblxuLm9wZW4ge1xuICBhbmltYXRpb246IHNsaWRlSW4gMC41cyBmb3J3YXJkcztcbn1cblxuLmNsb3NlIHtcbiAgYW5pbWF0aW9uOiBzbGlkZU91dCAwLjVzIGZvcndhcmRzO1xufVxuXG4ucHJpbWFyeSB7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXByaW1hcnktY29sb3IsICMzRjUxQjUpO1xuICBjb2xvcjogdmFyKC0tb24tcHJpbWFyeS1jb2xvciwgI2ZmZmZmZik7XG59XG4ucHJpbWFyeTpob3ZlciB7XG4gIGN1cnNvcjogcG9pbnRlcjtcbn0iXX0= */";
-var style$4 = {"snack":"snackbar-module_snack__Dkcmp","error":"snackbar-module_error__7IShA","success":"snackbar-module_success__JPkNY","info":"snackbar-module_info__52mgJ","warning":"snackbar-module_warning__K1oCK","open":"snackbar-module_open__Bdhg1","slideIn":"snackbar-module_slideIn__aM-2K","close":"snackbar-module_close__-JXxs","slideOut":"snackbar-module_slideOut__6sQkv","primary":"snackbar-module_primary__j2zPB"};
-styleInject(css_248z$5);
+var css_248z$7 = ".snackbar-module_snack__Dkcmp {\n  position: fixed;\n  bottom: 10px;\n  left: 45vw;\n  right: 45vw;\n  border-radius: 15px;\n  margin: 0;\n  padding: 0;\n  z-index: 9999;\n  display: flex;\n  flex-direction: row;\n  align-items: flex-end;\n  max-width: 10vw;\n  padding: 5px;\n}\n@media screen and (max-width: 768px) {\n  .snackbar-module_snack__Dkcmp {\n    left: 8vw;\n    right: 8vw;\n    bottom: 20vh;\n    max-width: 70vw;\n  }\n}\n.snackbar-module_snack__Dkcmp span {\n  flex-grow: 1;\n  margin: auto 0;\n  text-wrap: wrap;\n}\n.snackbar-module_snack__Dkcmp button {\n  margin: auto 0;\n}\n\n.snackbar-module_error__7IShA {\n  border: 2px solid var(--error-color, #B00020);\n  font-weight: bold;\n}\n\n.snackbar-module_success__JPkNY {\n  border-color: #4caf50;\n  border: 2px solid #4caf50;\n  color: #4caf50;\n}\n\n.snackbar-module_info__52mgJ {\n  border: 2px solid var(--secondary-color, #14b9c3);\n}\n\n.snackbar-module_warning__K1oCK {\n  border-color: #ff9800;\n  border: 2px solid #ff9800;\n  color: #ff9800;\n}\n\n.snackbar-module_open__Bdhg1 {\n  animation: snackbar-module_slideIn__aM-2K 0.5s forwards;\n}\n\n.snackbar-module_close__-JXxs {\n  animation: snackbar-module_slideOut__6sQkv 0.5s forwards;\n}\n\n.snackbar-module_primary__j2zPB {\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n}\n.snackbar-module_primary__j2zPB:hover {\n  cursor: pointer;\n}";
+var style$3 = {"snack":"snackbar-module_snack__Dkcmp","error":"snackbar-module_error__7IShA","success":"snackbar-module_success__JPkNY","info":"snackbar-module_info__52mgJ","warning":"snackbar-module_warning__K1oCK","open":"snackbar-module_open__Bdhg1","slideIn":"snackbar-module_slideIn__aM-2K","close":"snackbar-module_close__-JXxs","slideOut":"snackbar-module_slideOut__6sQkv","primary":"snackbar-module_primary__j2zPB"};
+styleInject(css_248z$7);
 
-var _tmpl$$6 = /*#__PURE__*/template(`<div>`),
-  _tmpl$2$5 = /*#__PURE__*/template(`<div><span>`);
+var _tmpl$$9 = /*#__PURE__*/template(`<div>`),
+  _tmpl$2$4 = /*#__PURE__*/template(`<div><span>`);
 const [snackbars, setSnackbars] = createSignal([]);
 const addSnackbar = snack => {
   setSnackbars(old => [...old, snack]);
@@ -2054,7 +2189,7 @@ const SnackbarController = () => {
       return snackbars().length > 0;
     },
     get children() {
-      var _el$ = _tmpl$$6();
+      var _el$ = _tmpl$$9();
       insert(_el$, createComponent(For, {
         get each() {
           return snackbars();
@@ -2066,7 +2201,7 @@ const SnackbarController = () => {
           onClose: () => removeSnackbar(index())
         }))
       }));
-      createRenderEffect(() => className(_el$, style$4.snackContainer));
+      createRenderEffect(() => className(_el$, style$3.snackContainer));
       return _el$;
     }
   });
@@ -2086,7 +2221,7 @@ const Snackbar = props => {
           return isOpen();
         },
         get children() {
-          var _el$2 = _tmpl$2$5(),
+          var _el$2 = _tmpl$2$4(),
             _el$3 = _el$2.firstChild;
           insert(_el$3, () => props.message);
           insert(_el$2, createComponent(Button, {
@@ -2097,7 +2232,7 @@ const Snackbar = props => {
           }), null);
           createRenderEffect(_p$ => {
             var _v$ = `${10 + props.index * (50 + messageLength * 8)}px`,
-              _v$2 = `${style$4.primary} ${style$4.snack} ${style$4[props.severity ?? 'info']}`;
+              _v$2 = `${style$3.primary} ${style$3.snack} ${style$3[props.severity ?? 'info']}`;
             _v$ !== _p$.e && ((_p$.e = _v$) != null ? _el$2.style.setProperty("bottom", _v$) : _el$2.style.removeProperty("bottom"));
             _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
             return _p$;
@@ -2112,58 +2247,76 @@ const Snackbar = props => {
   });
 };
 
-var css_248z$4 = ".popup-module_popup__Oeq7F {\n  padding: 0px;\n  padding-top: var(--spacing-1, 8px);\n  padding-bottom: var(--spacing-1, 5px);\n  overflow: hidden;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  border: var(--on-primary-color) 1px solid;\n  border-radius: var(--border-radius-md, 8px);\n  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n  z-index: 1000;\n  text-align: center;\n}\n\n.popup-module_wrapper__S7cXt {\n  padding: 0px;\n  overflow-y: hidden;\n  padding-bottom: 5px;\n  display: flex;\n  flex-direction: column;\n}\n.popup-module_wrapper__S7cXt :not(span):nth-child(2) {\n  margin-top: 5%;\n  height: 95%;\n  flex-grow: 1;\n  overflow-y: auto;\n}\n\n.popup-module_header__aKiI0 {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 5%;\n  overflow-y: hidden;\n  padding: 5px;\n  min-height: 2em;\n}\n.popup-module_header__aKiI0 h2 {\n  text-align: left;\n  margin-left: 5%;\n  flex-grow: 1;\n  padding: 0px;\n  padding-bottom: 5px;\n  margin: 0px;\n  margin-left: 1em;\n}\n.popup-module_header__aKiI0 span {\n  flex-shrink: 0;\n  width: -moz-min-content;\n  width: min-content;\n  height: -moz-min-content;\n  height: min-content;\n}\n.popup-module_header__aKiI0 span button:hover {\n  cursor: pointer;\n}\n\n.popup-module_body__ouRAt {\n  flex-grow: 1;\n}\n\n.popup-module_primary__tm77N {\n  background-color: var(--primary-color, #3F51B5);\n  color: var(--on-primary-color, #FFFFFF);\n}\n\n.popup-module_accent__AzLZ1 {\n  background-color: var(--secondary-color, #5C6BC0);\n  color: var(--on-secondary-color, #FFFFFF);\n}\n\n.popup-module_tertiary__69E41 {\n  background-color: var(--tertiary-color, #8A2BE2);\n  color: var(--on-tertiary-color, #FFFFFF);\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBvcHVwLm1vZHVsZS5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsWUFBWTtFQUNaLGtDQUFrQztFQUNsQyxxQ0FBcUM7RUFDckMsZ0JBQWdCO0VBQ2hCLGVBQWU7RUFDZixRQUFRO0VBQ1IsU0FBUztFQUNULHlDQUF5QztFQUN6QywyQ0FBMkM7RUFDM0MsdUNBQXVDO0VBQ3ZDLGFBQWE7RUFDYixrQkFBa0I7QUFDcEI7O0FBRUE7RUFDRSxZQUFZO0VBQ1osa0JBQWtCO0VBQ2xCLG1CQUFtQjtFQUNuQixhQUFhO0VBQ2Isc0JBQXNCO0FBQ3hCO0FBQ0E7RUFDRSxjQUFjO0VBQ2QsV0FBVztFQUNYLFlBQVk7RUFDWixnQkFBZ0I7QUFDbEI7O0FBRUE7RUFDRSxhQUFhO0VBQ2IsbUJBQW1CO0VBQ25CLDhCQUE4QjtFQUM5QixlQUFlO0VBQ2YsTUFBTTtFQUNOLE9BQU87RUFDUCxRQUFRO0VBQ1IsVUFBVTtFQUNWLGtCQUFrQjtFQUNsQixZQUFZO0VBQ1osZUFBZTtBQUNqQjtBQUNBO0VBQ0UsZ0JBQWdCO0VBQ2hCLGVBQWU7RUFDZixZQUFZO0VBQ1osWUFBWTtFQUNaLG1CQUFtQjtFQUNuQixXQUFXO0VBQ1gsZ0JBQWdCO0FBQ2xCO0FBQ0E7RUFDRSxjQUFjO0VBQ2QsdUJBQWtCO0VBQWxCLGtCQUFrQjtFQUNsQix3QkFBbUI7RUFBbkIsbUJBQW1CO0FBQ3JCO0FBQ0E7RUFDRSxlQUFlO0FBQ2pCOztBQUVBO0VBQ0UsWUFBWTtBQUNkOztBQUVBO0VBQ0UsK0NBQStDO0VBQy9DLHVDQUF1QztBQUN6Qzs7QUFFQTtFQUNFLGlEQUFpRDtFQUNqRCx5Q0FBeUM7QUFDM0M7O0FBRUE7RUFDRSxnREFBZ0Q7RUFDaEQsd0NBQXdDO0FBQzFDIiwiZmlsZSI6InBvcHVwLm1vZHVsZS5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLnBvcHVwIHtcbiAgcGFkZGluZzogMHB4O1xuICBwYWRkaW5nLXRvcDogdmFyKC0tc3BhY2luZy0xLCA4cHgpO1xuICBwYWRkaW5nLWJvdHRvbTogdmFyKC0tc3BhY2luZy0xLCA1cHgpO1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBwb3NpdGlvbjogZml4ZWQ7XG4gIHRvcDogNTAlO1xuICBsZWZ0OiA1MCU7XG4gIGJvcmRlcjogdmFyKC0tb24tcHJpbWFyeS1jb2xvcikgMXB4IHNvbGlkO1xuICBib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzLW1kLCA4cHgpO1xuICBib3gtc2hhZG93OiAwIDAgMTBweCByZ2JhKDAsIDAsIDAsIDAuMSk7XG4gIHotaW5kZXg6IDEwMDA7XG4gIHRleHQtYWxpZ246IGNlbnRlcjtcbn1cblxuLndyYXBwZXIge1xuICBwYWRkaW5nOiAwcHg7XG4gIG92ZXJmbG93LXk6IGhpZGRlbjtcbiAgcGFkZGluZy1ib3R0b206IDVweDtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbn1cbi53cmFwcGVyIDpub3Qoc3Bhbik6bnRoLWNoaWxkKDIpIHtcbiAgbWFyZ2luLXRvcDogNSU7XG4gIGhlaWdodDogOTUlO1xuICBmbGV4LWdyb3c6IDE7XG4gIG92ZXJmbG93LXk6IGF1dG87XG59XG5cbi5oZWFkZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogcm93O1xuICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG4gIHBvc2l0aW9uOiBmaXhlZDtcbiAgdG9wOiAwO1xuICBsZWZ0OiAwO1xuICByaWdodDogMDtcbiAgaGVpZ2h0OiA1JTtcbiAgb3ZlcmZsb3cteTogaGlkZGVuO1xuICBwYWRkaW5nOiA1cHg7XG4gIG1pbi1oZWlnaHQ6IDJlbTtcbn1cbi5oZWFkZXIgaDIge1xuICB0ZXh0LWFsaWduOiBsZWZ0O1xuICBtYXJnaW4tbGVmdDogNSU7XG4gIGZsZXgtZ3JvdzogMTtcbiAgcGFkZGluZzogMHB4O1xuICBwYWRkaW5nLWJvdHRvbTogNXB4O1xuICBtYXJnaW46IDBweDtcbiAgbWFyZ2luLWxlZnQ6IDFlbTtcbn1cbi5oZWFkZXIgc3BhbiB7XG4gIGZsZXgtc2hyaW5rOiAwO1xuICB3aWR0aDogbWluLWNvbnRlbnQ7XG4gIGhlaWdodDogbWluLWNvbnRlbnQ7XG59XG4uaGVhZGVyIHNwYW4gYnV0dG9uOmhvdmVyIHtcbiAgY3Vyc29yOiBwb2ludGVyO1xufVxuXG4uYm9keSB7XG4gIGZsZXgtZ3JvdzogMTtcbn1cblxuLnByaW1hcnkge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1wcmltYXJ5LWNvbG9yLCAjM0Y1MUI1KTtcbiAgY29sb3I6IHZhcigtLW9uLXByaW1hcnktY29sb3IsICNGRkZGRkYpO1xufVxuXG4uYWNjZW50IHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc2Vjb25kYXJ5LWNvbG9yLCAjNUM2QkMwKTtcbiAgY29sb3I6IHZhcigtLW9uLXNlY29uZGFyeS1jb2xvciwgI0ZGRkZGRik7XG59XG5cbi50ZXJ0aWFyeSB7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXRlcnRpYXJ5LWNvbG9yLCAjOEEyQkUyKTtcbiAgY29sb3I6IHZhcigtLW9uLXRlcnRpYXJ5LWNvbG9yLCAjRkZGRkZGKTtcbn0iXX0= */";
-var style$3 = {"popup":"popup-module_popup__Oeq7F","wrapper":"popup-module_wrapper__S7cXt","header":"popup-module_header__aKiI0","body":"popup-module_body__ouRAt","primary":"popup-module_primary__tm77N","accent":"popup-module_accent__AzLZ1","tertiary":"popup-module_tertiary__69E41"};
-styleInject(css_248z$4);
+var css_248z$6 = ".popup-module_popup__Oeq7F {\n  padding: 0px;\n  padding-top: 8px;\n  padding-bottom: 8px;\n  overflow: hidden;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  border: var(--primary-color, #4CAF50) 1px solid;\n  border-radius: 8px;\n  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n  z-index: 1000;\n  text-align: center;\n}\n\n.popup-module_wrapper__S7cXt {\n  padding: 0px;\n  overflow-y: hidden;\n  padding-bottom: 5px;\n  display: flex;\n  flex-direction: column;\n}\n.popup-module_wrapper__S7cXt :not(span):nth-child(2) {\n  margin-top: 5%;\n  height: 95%;\n  flex-grow: 1;\n  overflow-y: auto;\n}\n\n.popup-module_header__aKiI0 {\n  background-color: var(--subheader-background-color, #388E3C);\n  color: var(--subheader-on-background-color, #fff);\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 5%;\n  overflow-y: hidden;\n  padding: 5px;\n  min-height: 2em;\n}\n.popup-module_header__aKiI0 button {\n  background-color: var(--subheader-background-color, #388E3C);\n  color: var(--subheader-on-background-color, #fff);\n}\n.popup-module_header__aKiI0 h2 {\n  text-align: left;\n  margin-left: 5%;\n  flex-grow: 1;\n  padding: 0px;\n  padding-bottom: 5px;\n  margin: 0px;\n  margin-left: 1em;\n}\n.popup-module_header__aKiI0 span {\n  flex-shrink: 0;\n  width: -moz-min-content;\n  width: min-content;\n  height: -moz-min-content;\n  height: min-content;\n}\n.popup-module_header__aKiI0 span button:hover {\n  cursor: pointer;\n}\n\n.popup-module_body__ouRAt {\n  flex-grow: 1;\n}\n\n.popup-module_tertiary__69E41, .popup-module_accent__AzLZ1, .popup-module_primary__tm77N {\n  background-color: var(--surface-color, #EEEEEE);\n  color: var(--on-surface-color, #000000);\n}";
+var style$2 = {"popup":"popup-module_popup__Oeq7F","wrapper":"popup-module_wrapper__S7cXt","header":"popup-module_header__aKiI0","body":"popup-module_body__ouRAt","primary":"popup-module_primary__tm77N"};
+styleInject(css_248z$6);
 
-var _tmpl$$5 = /*#__PURE__*/template(`<b>X`),
-  _tmpl$2$4 = /*#__PURE__*/template(`<div><div><h2></h2><span></span></div><div>`);
-/**
- *
- * @param title {string} {string} - The title of the modal.
- * @param width {string} {string} - The css width of the modal.
- * @param maxWidth {string} {string} - The optional css max-width of the modal.
- * @param height {string} {string} - The css height of the modal.
- * @param maxHeight {string} {string} - The optional css max-height of the modal.
- * @param translate {x{x: string, y: string} - Override the default x and y coordinates of the modal.
- * @param backgroundClick [Accessor <bool>, Setter <bool>] - A signal and setter for enabling the background click.
- * @returns - A Modal component.
- */
+var _tmpl$$8 = /*#__PURE__*/template(`<b>X`),
+  _tmpl$2$3 = /*#__PURE__*/template(`<div><div><h2></h2><span></span></div><div>`);
 const Modal = props => {
   const defaultX = props.translate?.x ?? "-50%";
   const defaultY = props.translate?.y ?? "-50%";
   const [popupRef, setPopupRef] = createSignal();
-  useClickOutside(() => props.ref ? props.ref() : popupRef(), () => {
-    props.show[1](old => false);
+  // Flag to ignore the click that triggered opening the modal.
+  const [ignoreFirstClick, setIgnoreFirstClick] = createSignal(true);
+  const isShown = createMemo(() => props.show[0]());
+  // When the modal becomes visible, set the flag and clear it on the next tick.
+  createEffect(() => {
+    if (isShown()) {
+      setIgnoreFirstClick(true);
+      // Use a 0ms timeout to clear the flag after the current event loop.
+      setTimeout(() => setIgnoreFirstClick(false), 0);
+    }
+  });
+  const clickOutside = e => {
+    // Only process if modal is visible and we're not in the first click.
+    if (!props.show[0]() || ignoreFirstClick()) return;
+    const popupBox = popupRef()?.getBoundingClientRect();
+    if (!isNullish(popupBox)) {
+      const outLeft = e.clientX < popupBox.left;
+      const outRight = e.clientX > popupBox.right;
+      const outTop = e.clientY < popupBox.top;
+      const outBottom = e.clientY > popupBox.bottom;
+      if (outLeft || outRight || outTop || outBottom) {
+        props.show[1](false);
+      }
+    }
+  };
+  onMount(() => {
+    document.addEventListener("click", clickOutside);
+  });
+  onCleanup(() => {
+    document.removeEventListener("click", clickOutside);
   });
   return createComponent(Show, {
     get when() {
-      return createMemo(() => !!props.show)() ? props.show[0]() : true;
+      return isShown();
     },
     get children() {
       return createComponent(Portal, {
         get children() {
-          var _el$ = _tmpl$2$4(),
+          var _el$ = _tmpl$2$3(),
             _el$2 = _el$.firstChild,
             _el$3 = _el$2.firstChild,
             _el$4 = _el$3.nextSibling,
             _el$6 = _el$2.nextSibling;
           use(el => setPopupRef(el), _el$);
-          `translate(${defaultX},${defaultY})` != null ? _el$.style.setProperty("transform", `translate(${defaultX},${defaultY})`) : _el$.style.removeProperty("transform");
+          `translate(${defaultX}, ${defaultY})` != null ? _el$.style.setProperty("transform", `translate(${defaultX}, ${defaultY})`) : _el$.style.removeProperty("transform");
           insert(_el$3, () => props.title ?? "Modal");
           insert(_el$4, createComponent(Button, {
-            onClick: () => props.setClose ? props.setClose(old => !old) : props.show[1](old => !old),
+            transparent: true,
+            onClick: () => props.show[1](old => !old),
             get children() {
-              return _tmpl$$5();
+              return _tmpl$$8();
             }
           }));
           insert(_el$6, () => props.children);
           createRenderEffect(_p$ => {
             var _v$ = props.width ? props.width : isMobile() ? "90vw" : "45vw",
               _v$2 = props.height ? props.height : isMobile() ? "90vh" : "60vh",
-              _v$3 = `${style$3[props.styleType ?? "primary"]} ${style$3.wrapper} ${style$3.popup}`,
-              _v$4 = `${style$3.accent} ${style$3.header}`,
-              _v$5 = style$3.body;
+              _v$3 = `${style$2["primary"]} ${style$2.wrapper} ${style$2.popup}`,
+              _v$4 = style$2.header,
+              _v$5 = style$2.body;
             _v$ !== _p$.e && ((_p$.e = _v$) != null ? _el$.style.setProperty("width", _v$) : _el$.style.removeProperty("width"));
             _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$.style.setProperty("height", _v$2) : _el$.style.removeProperty("height"));
             _v$3 !== _p$.a && className(_el$, _p$.a = _v$3);
@@ -2184,237 +2337,11 @@ const Modal = props => {
   });
 };
 
-var css_248z$3 = ".tabs-module_tabs__AqLFl {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n.tabs-module_singleTabs__SOD5d {\n  display: flex;\n  flex-direction: row;\n  border-radius: 10px;\n  border-bottom: 1px solid white;\n}\n\n.tabs-module_hover__4r8g4:hover {\n  cursor: pointer;\n}\n\n.tabs-module_tabHeader__X1-FY {\n  display: flex;\n  flex-direction: row;\n  max-width: 88%;\n  scroll-behavior: smooth;\n  overflow: hidden;\n  font-size: 1rem;\n  padding: 0;\n  float: left;\n}\n@media screen and (max-width: 768px) {\n  .tabs-module_tabHeader__X1-FY {\n    margin: 0px auto;\n    max-width: 100%;\n  }\n}\n.tabs-module_tabHeader__X1-FY :first-child {\n  border-left: none;\n}\n.tabs-module_tabHeader__X1-FY span {\n  height: inherit;\n  padding: 10px 20px;\n  border-left: 1px solid white;\n}\n@media screen and (max-width: 768px) {\n  .tabs-module_tabHeader__X1-FY span {\n    padding-bottom: 0px;\n  }\n}\n\n.tabs-module_tabBody__rJfud {\n  width: 100%;\n  height: 100%;\n  border-radius: 10px;\n  padding: 5px;\n}\n\n.tabs-module_leftArrow__0imd- {\n  margin-right: 10px;\n  align-self: flex-start;\n  margin: auto 0px;\n}\n\n.tabs-module_rightArrow__aCBVp {\n  margin-left: 10px;\n  align-self: flex-end;\n  margin: auto 0px;\n}\n\n.tabs-module_transparent__yL988 {\n  background: inherit;\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRhYnMubW9kdWxlLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxXQUFXO0VBQ1gsYUFBYTtFQUNiLHNCQUFzQjtBQUN4Qjs7QUFFQTtFQUNFLGFBQWE7RUFDYixtQkFBbUI7RUFDbkIsbUJBQW1CO0VBQ25CLDhCQUE4QjtBQUNoQzs7QUFFQTtFQUNFLGVBQWU7QUFDakI7O0FBRUE7RUFDRSxhQUFhO0VBQ2IsbUJBQW1CO0VBQ25CLGNBQWM7RUFDZCx1QkFBdUI7RUFDdkIsZ0JBQWdCO0VBQ2hCLGVBQWU7RUFDZixVQUFVO0VBQ1YsV0FBVztBQUNiO0FBQ0E7RUFDRTtJQUNFLGdCQUFnQjtJQUNoQixlQUFlO0VBQ2pCO0FBQ0Y7QUFDQTtFQUNFLGlCQUFpQjtBQUNuQjtBQUNBO0VBQ0UsZUFBZTtFQUNmLGtCQUFrQjtFQUNsQiw0QkFBNEI7QUFDOUI7QUFDQTtFQUNFO0lBQ0UsbUJBQW1CO0VBQ3JCO0FBQ0Y7O0FBRUE7RUFDRSxXQUFXO0VBQ1gsWUFBWTtFQUNaLG1CQUFtQjtFQUNuQixZQUFZO0FBQ2Q7O0FBRUE7RUFDRSxrQkFBa0I7RUFDbEIsc0JBQXNCO0VBQ3RCLGdCQUFnQjtBQUNsQjs7QUFFQTtFQUNFLGlCQUFpQjtFQUNqQixvQkFBb0I7RUFDcEIsZ0JBQWdCO0FBQ2xCOztBQUVBO0VBQ0UsbUJBQW1CO0FBQ3JCIiwiZmlsZSI6InRhYnMubW9kdWxlLnNjc3MiLCJzb3VyY2VzQ29udGVudCI6WyIudGFicyB7XG4gIHdpZHRoOiAxMDAlO1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xufVxuXG4uc2luZ2xlVGFicyB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiByb3c7XG4gIGJvcmRlci1yYWRpdXM6IDEwcHg7XG4gIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCB3aGl0ZTtcbn1cblxuLmhvdmVyOmhvdmVyIHtcbiAgY3Vyc29yOiBwb2ludGVyO1xufVxuXG4udGFiSGVhZGVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IHJvdztcbiAgbWF4LXdpZHRoOiA4OCU7XG4gIHNjcm9sbC1iZWhhdmlvcjogc21vb3RoO1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBmb250LXNpemU6IDFyZW07XG4gIHBhZGRpbmc6IDA7XG4gIGZsb2F0OiBsZWZ0O1xufVxuQG1lZGlhIHNjcmVlbiBhbmQgKG1heC13aWR0aDogNzY4cHgpIHtcbiAgLnRhYkhlYWRlciB7XG4gICAgbWFyZ2luOiAwcHggYXV0bztcbiAgICBtYXgtd2lkdGg6IDEwMCU7XG4gIH1cbn1cbi50YWJIZWFkZXIgOmZpcnN0LWNoaWxkIHtcbiAgYm9yZGVyLWxlZnQ6IG5vbmU7XG59XG4udGFiSGVhZGVyIHNwYW4ge1xuICBoZWlnaHQ6IGluaGVyaXQ7XG4gIHBhZGRpbmc6IDEwcHggMjBweDtcbiAgYm9yZGVyLWxlZnQ6IDFweCBzb2xpZCB3aGl0ZTtcbn1cbkBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDc2OHB4KSB7XG4gIC50YWJIZWFkZXIgc3BhbiB7XG4gICAgcGFkZGluZy1ib3R0b206IDBweDtcbiAgfVxufVxuXG4udGFiQm9keSB7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIGJvcmRlci1yYWRpdXM6IDEwcHg7XG4gIHBhZGRpbmc6IDVweDtcbn1cblxuLmxlZnRBcnJvdyB7XG4gIG1hcmdpbi1yaWdodDogMTBweDtcbiAgYWxpZ24tc2VsZjogZmxleC1zdGFydDtcbiAgbWFyZ2luOiBhdXRvIDBweDtcbn1cblxuLnJpZ2h0QXJyb3cge1xuICBtYXJnaW4tbGVmdDogMTBweDtcbiAgYWxpZ24tc2VsZjogZmxleC1lbmQ7XG4gIG1hcmdpbjogYXV0byAwcHg7XG59XG5cbi50cmFuc3BhcmVudCB7XG4gIGJhY2tncm91bmQ6IGluaGVyaXQ7XG59Il19 */";
-var style$2 = {"tabs":"tabs-module_tabs__AqLFl","singleTabs":"tabs-module_singleTabs__SOD5d","hover":"tabs-module_hover__4r8g4","tabHeader":"tabs-module_tabHeader__X1-FY","tabBody":"tabs-module_tabBody__rJfud","leftArrow":"tabs-module_leftArrow__0imd-","rightArrow":"tabs-module_rightArrow__aCBVp","transparent":"tabs-module_transparent__yL988"};
-styleInject(css_248z$3);
-
-var _tmpl$$4 = /*#__PURE__*/template(`<span>`),
-  _tmpl$2$3 = /*#__PURE__*/template(`<div><div><div></div></div><div>`),
-  _tmpl$3$1 = /*#__PURE__*/template(`<b>`);
-const tabContext = createContext({
-  tabs: () => ({}),
-  setTabs: () => {}
-});
-function getTabContext() {
-  return useContext(tabContext);
-}
-const TabProvider = props => {
-  const [tabs, setTabs] = createSignal(props.value, {
-    equals: (a, b) => {
-      const sameLength = Object.keys(a).length === Object.keys(b).length;
-      if (!sameLength) return false;
-      for (const key in a) {
-        if (a[key] !== b[key]) return false;
-      }
-      if (JSON.stringify(a) !== JSON.stringify(b)) return false;
-      return true;
-    }
-  });
-  return createComponent(tabContext.Provider, {
-    value: {
-      tabs,
-      setTabs
-    },
-    get children() {
-      return props.children;
-    }
-  });
-};
-const Tabs = props => {
-  return createComponent(TabProvider, {
-    value: {},
-    get children() {
-      return createComponent(TabInternal, props);
-    }
-  });
-};
-const TabInternal = props => {
-  const {
-    tabs,
-    setTabs
-  } = useContext(tabContext);
-  const [selectedTab, setSelectedTab] = createSignal(Object.keys(tabs())[0]);
-  const currentElement = createMemo(() => tabs()[selectedTab()]);
-  children(() => props.children);
-  const hasTranparent = createMemo(() => Object.keys(props).includes("transparent"));
-  createRenderEffect(() => {
-    setSelectedTab(Object.keys(tabs())[0]);
-  });
-  const [showLeft, setShowLeft] = createSignal(false);
-  const [showRight, setShowRight] = createSignal(false);
-  const scrollFunction = e => {
-    const scrollLeft = tabContainer?.scrollLeft;
-    tabContainer?.offsetWidth;
-    const scrollWidth = tabContainer?.scrollWidth ?? 0;
-    const clientWidth = tabContainer?.clientWidth ?? 0;
-    const newWidth = scrollWidth - clientWidth;
-    const showRight = Object.keys(tabs()).length >= 3 && isMobile() || scrollLeft !== newWidth;
-    const showLeft = scrollLeft > 0;
-    setShowRight(showRight);
-    setShowLeft(showLeft);
-    if (scrollLeft <= 0) {
-      setShowLeft(false);
-    }
-  };
-  let tabContainer;
-  onMount(() => {
-    if (tabContainer) {
-      tabContainer.addEventListener("scroll", scrollFunction);
-      scrollFunction();
-    }
-  });
-  onCleanup(() => {
-    if (tabContainer) {
-      tabContainer.removeEventListener("scroll", scrollFunction);
-    }
-  });
-  const scrollLeft = () => {
-    tabContainer.scrollLeft -= 100;
-    scrollFunction();
-  };
-  const scrollRight = () => {
-    tabContainer.scrollLeft += 100;
-    scrollFunction();
-    setShowLeft(true);
-  };
-  const styleType = props.styleType ?? "accent";
-  const [tabsArr, setTabsArr] = createSignal(Object.keys(tabs()));
-  createEffect(() => {
-    setTabsArr(Object.keys(tabs()));
-  });
-  return (() => {
-    var _el$ = _tmpl$2$3(),
-      _el$2 = _el$.firstChild,
-      _el$4 = _el$2.firstChild,
-      _el$6 = _el$2.nextSibling;
-    insert(_el$2, createComponent(Show, {
-      get when() {
-        return showLeft();
-      },
-      get children() {
-        var _el$3 = _tmpl$$4();
-        insert(_el$3, createComponent(Button, {
-          onClick: scrollLeft,
-          children: "\u2190"
-        }));
-        createRenderEffect(() => className(_el$3, style$2.leftArrow));
-        return _el$3;
-      }
-    }), _el$4);
-    var _ref$ = tabContainer;
-    typeof _ref$ === "function" ? use(_ref$, _el$4) : tabContainer = _el$4;
-    insert(_el$4, createComponent(For, {
-      get each() {
-        return tabsArr();
-      },
-      children: (tab, index) => (() => {
-        var _el$7 = _tmpl$$4();
-        _el$7.$$click = () => setSelectedTab(tab);
-        insert(_el$7, createComponent(Show, {
-          get when() {
-            return tab === selectedTab();
-          },
-          get children() {
-            var _el$8 = _tmpl$3$1();
-            insert(_el$8, tab);
-            return _el$8;
-          }
-        }), null);
-        insert(_el$7, createComponent(Show, {
-          get when() {
-            return tab !== selectedTab();
-          },
-          children: tab
-        }), null);
-        createRenderEffect(() => className(_el$7, style$2.hover));
-        return _el$7;
-      })()
-    }));
-    insert(_el$2, createComponent(Show, {
-      get when() {
-        return showRight();
-      },
-      get children() {
-        var _el$5 = _tmpl$$4();
-        insert(_el$5, createComponent(Button, {
-          onClick: scrollRight,
-          children: "\u2192"
-        }));
-        createRenderEffect(() => className(_el$5, style$2.rightArrow));
-        return _el$5;
-      }
-    }), null);
-    insert(_el$6, currentElement);
-    createRenderEffect(_p$ => {
-      var _v$ = style$2.tabs,
-        _v$2 = `${style$2[styleType]} ${style$2.singleTabs} ${hasTranparent() === true ? style$2.transparent : ""}`,
-        _v$3 = style$2.tabHeader,
-        _v$4 = `${styleType} ${style$2.tabBody} ${hasTranparent() === true ? style$2.transparent : ""}`;
-      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-      _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
-      _v$3 !== _p$.a && className(_el$4, _p$.a = _v$3);
-      _v$4 !== _p$.o && className(_el$6, _p$.o = _v$4);
-      return _p$;
-    }, {
-      e: undefined,
-      t: undefined,
-      a: undefined,
-      o: undefined
-    });
-    return _el$;
-  })();
-};
-const Tab = props => {
-  const {
-    tabs,
-    setTabs
-  } = getTabContext();
-  createEffect(() => {
-    if (props.hidden) {
-      if (props.hidden()) {
-        setTabs(old => {
-          const newTabs = {
-            ...old
-          };
-          delete newTabs[props.name];
-          return newTabs;
-        });
-      } else {
-        if (!!props.name && !Object.keys(tabs()).includes(props.name)) {
-          setTabs(old => ({
-            ...old,
-            [props.name]: props.children
-          }));
-        }
-      }
-    }
-  });
-  onMount(() => {
-    if (props.name !== undefined) {
-      if (!props.hidden || props.hidden && !props.hidden()) {
-        setTabs(old => ({
-          ...old,
-          [props.name]: props.children
-        }));
-      }
-    }
-  });
-  return createComponent(Show, {
-    get when() {
-      return !props.hidden || props.hidden();
-    },
-    get children() {
-      return props.children;
-    }
-  });
-};
-delegateEvents(["click"]);
-
-var css_248z$2 = ".TextArea-module_areaStyle__AshKi {\n  padding: 0.5rem;\n  margin-right: calc(var(--spacing-1, 8px) / 2);\n  border: 1px solid #ccc;\n  border-radius: var(--border-radius-md, 6px);\n  width: 98%;\n  height: 100%;\n  resize: none;\n}\n@media screen and (max-width: 768px) {\n  .TextArea-module_areaStyle__AshKi {\n    width: 90%;\n  }\n}\n\n.TextArea-module_picButton__TV9ZE {\n  padding: calc(var(--spacing-1, 8px) / 2) var(--spacing-1, 8px) !important;\n  background-color: transparent;\n  border-top: 1px solid white;\n  border-bottom: 1px solid white;\n}\n\n.TextArea-module_transparent__pwXRO {\n  background-color: transparent;\n  border: none;\n  color: white;\n  padding: 0.5rem;\n  width: inherit;\n  height: 100%;\n  resize: none;\n}\n.TextArea-module_transparent__pwXRO:focus {\n  outline: none;\n  border: none;\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRleHRBcmVhLm1vZHVsZS5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsZUFBZTtFQUNmLDZDQUE2QztFQUM3QyxzQkFBc0I7RUFDdEIsMkNBQTJDO0VBQzNDLFVBQVU7RUFDVixZQUFZO0VBQ1osWUFBWTtBQUNkO0FBQ0E7RUFDRTtJQUNFLFVBQVU7RUFDWjtBQUNGOztBQUVBO0VBQ0UseUVBQXlFO0VBQ3pFLDZCQUE2QjtFQUM3QiwyQkFBMkI7RUFDM0IsOEJBQThCO0FBQ2hDOztBQUVBO0VBQ0UsNkJBQTZCO0VBQzdCLFlBQVk7RUFDWixZQUFZO0VBQ1osZUFBZTtFQUNmLGNBQWM7RUFDZCxZQUFZO0VBQ1osWUFBWTtBQUNkO0FBQ0E7RUFDRSxhQUFhO0VBQ2IsWUFBWTtBQUNkIiwiZmlsZSI6IlRleHRBcmVhLm1vZHVsZS5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLmFyZWFTdHlsZSB7XG4gIHBhZGRpbmc6IDAuNXJlbTtcbiAgbWFyZ2luLXJpZ2h0OiBjYWxjKHZhcigtLXNwYWNpbmctMSwgOHB4KSAvIDIpO1xuICBib3JkZXI6IDFweCBzb2xpZCAjY2NjO1xuICBib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzLW1kLCA2cHgpO1xuICB3aWR0aDogOTglO1xuICBoZWlnaHQ6IDEwMCU7XG4gIHJlc2l6ZTogbm9uZTtcbn1cbkBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDc2OHB4KSB7XG4gIC5hcmVhU3R5bGUge1xuICAgIHdpZHRoOiA5MCU7XG4gIH1cbn1cblxuLnBpY0J1dHRvbiB7XG4gIHBhZGRpbmc6IGNhbGModmFyKC0tc3BhY2luZy0xLCA4cHgpIC8gMikgdmFyKC0tc3BhY2luZy0xLCA4cHgpICFpbXBvcnRhbnQ7XG4gIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuICBib3JkZXItdG9wOiAxcHggc29saWQgd2hpdGU7XG4gIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCB3aGl0ZTtcbn1cblxuLnRyYW5zcGFyZW50IHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGJvcmRlcjogbm9uZTtcbiAgY29sb3I6IHdoaXRlO1xuICBwYWRkaW5nOiAwLjVyZW07XG4gIHdpZHRoOiBpbmhlcml0O1xuICBoZWlnaHQ6IDEwMCU7XG4gIHJlc2l6ZTogbm9uZTtcbn1cbi50cmFuc3BhcmVudDpmb2N1cyB7XG4gIG91dGxpbmU6IG5vbmU7XG4gIGJvcmRlcjogbm9uZTtcbn0iXX0= */";
+var css_248z$5 = ".TextArea-module_areaStyle__AshKi {\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n  padding: 0.5rem;\n  margin-right: calc(var(--spacing-1, 8px) / 2);\n  border: 1px solid #ccc;\n  border-radius: var(--border-radius-md, 6px);\n  width: 98%;\n  height: 100%;\n  resize: none;\n}\n@media screen and (max-width: 768px) {\n  .TextArea-module_areaStyle__AshKi {\n    width: 90%;\n  }\n}\n.TextArea-module_areaStyle__AshKi::-moz-placeholder {\n  color: var(--on-container-color, #000);\n  opacity: var(--text-emphasis-medium, 87%);\n}\n.TextArea-module_areaStyle__AshKi::placeholder {\n  color: var(--on-container-color, #000);\n  opacity: var(--text-emphasis-medium, 87%);\n}\n\n.TextArea-module_picButton__TV9ZE {\n  padding: calc(var(--spacing-1, 8px) / 2) var(--spacing-1, 8px) !important;\n  background-color: transparent;\n  border-top: 1px solid white;\n  border-bottom: 1px solid white;\n}\n\n.TextArea-module_transparent__pwXRO {\n  background-color: transparent;\n  border: none;\n  color: white;\n  padding: 0.5rem;\n  width: inherit;\n  height: 100%;\n  resize: none;\n}\n.TextArea-module_transparent__pwXRO:focus {\n  outline: none;\n  border: none;\n}";
 var style$1 = {"areaStyle":"TextArea-module_areaStyle__AshKi"};
-styleInject(css_248z$2);
+styleInject(css_248z$5);
 
-var _tmpl$$3 = /*#__PURE__*/template(`<textarea>`);
+var _tmpl$$7 = /*#__PURE__*/template(`<textarea>`);
 const TextArea = props => {
   let myElement;
   const [customProps, normalProps] = splitProps(props, ["minSize", "text", "setText", "class", "tooltip", "transparent"]);
@@ -2449,7 +2376,7 @@ const TextArea = props => {
     }
   });
   return (() => {
-    var _el$ = _tmpl$$3();
+    var _el$ = _tmpl$$7();
     use(el => {
       myElement = el;
       OnInput();
@@ -2466,7 +2393,7 @@ const TextArea = props => {
         }
       },
       get placeholder() {
-        return createMemo(() => !!(!!context.getName && !context.getTextInside() && !context.getFocused()))() ? context.getName() : props.placeholder;
+        return createMemo(() => !!(!!context.getName && context.getTextInside() && !context.getFocused()))() ? context.getName() : props.placeholder;
       },
       get ["class"]() {
         return `${style$1.areaStyle} ${customProps.class ?? ""} ${customProps.transparent ? customProps.transparent : ""}`;
@@ -2493,15 +2420,15 @@ const TextArea = props => {
   })();
 };
 
-var css_248z$1 = ".expansion-module_header__eaZ-i {\n  width: 100%;\n  max-width: 100%;\n  border-bottom: 1px solid;\n  display: flex;\n  flex-direction: row;\n  border-radius: var(--border-radius-sm, 5px) var(--border-radius-sm, 5px) var(--border-radius-md, 10px) var(--border-radius-md, 10px);\n  box-shadow: inset 1px 1px 5px 1px;\n  height: -moz-min-content;\n  height: min-content;\n  text-wrap: wrap;\n}\n.expansion-module_header__eaZ-i :first-child {\n  flex-grow: 1;\n}\n.expansion-module_header__eaZ-i :last-child {\n  align-self: flex-end;\n  padding: 10px;\n}\n.expansion-module_header__eaZ-i button {\n  height: -moz-min-content;\n  height: min-content;\n  background: none;\n}\n.expansion-module_header__eaZ-i button svg {\n  height: 50%;\n}\n\n.expansion-module_body__OYZTn {\n  max-width: 100%;\n  padding: calc(var(--spacing-1, 8px) - 2px);\n  border-radius: var(--border-radius-sm, 5px) var(--border-radius-sm, 5px) var(--border-radius-md, 10px) var(--border-radius-md, 10px);\n}\n.expansion-module_body__OYZTn :nth-child(n) {\n  text-wrap: wrap !important;\n}\n\n.expansion-module_totalPanel__o0hyd {\n  max-width: 100%;\n  display: flex !important;\n  flex-direction: column !important;\n  border: 1px solid;\n  border-radius: var(--border-radius-sm, 5px) var(--border-radius-sm, 5px) var(--border-radius-md, 10px) var(--border-radius-md, 10px);\n}\n\n.expansion-module_hover__lzPNA:hover {\n  cursor: pointer;\n}\n\n.expansion-module_primary__oPhus {\n  background-color: var(--primary-color);\n  color: var(--on-primary-color);\n  border-color: var(--on-primary-color);\n}\n\n.expansion-module_accent__HYwcP {\n  background-color: var(--secondary-color);\n  color: var(--on-secondary-color);\n  border-color: var(--on-secondary-color);\n}\n\n.expansion-module_tertiary__hl403 {\n  background-color: var(--tertiary-color);\n  color: var(--on-tertiary-color);\n  border-color: var(--on-tertiary-color);\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImV4cGFuc2lvbi5tb2R1bGUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLFdBQVc7RUFDWCxlQUFlO0VBQ2Ysd0JBQXdCO0VBQ3hCLGFBQWE7RUFDYixtQkFBbUI7RUFDbkIsb0lBQW9JO0VBQ3BJLGlDQUFpQztFQUNqQyx3QkFBbUI7RUFBbkIsbUJBQW1CO0VBQ25CLGVBQWU7QUFDakI7QUFDQTtFQUNFLFlBQVk7QUFDZDtBQUNBO0VBQ0Usb0JBQW9CO0VBQ3BCLGFBQWE7QUFDZjtBQUNBO0VBQ0Usd0JBQW1CO0VBQW5CLG1CQUFtQjtFQUNuQixnQkFBZ0I7QUFDbEI7QUFDQTtFQUNFLFdBQVc7QUFDYjs7QUFFQTtFQUNFLGVBQWU7RUFDZiwwQ0FBMEM7RUFDMUMsb0lBQW9JO0FBQ3RJO0FBQ0E7RUFDRSwwQkFBMEI7QUFDNUI7O0FBRUE7RUFDRSxlQUFlO0VBQ2Ysd0JBQXdCO0VBQ3hCLGlDQUFpQztFQUNqQyxpQkFBaUI7RUFDakIsb0lBQW9JO0FBQ3RJOztBQUVBO0VBQ0UsZUFBZTtBQUNqQjs7QUFFQTtFQUNFLHNDQUFzQztFQUN0Qyw4QkFBOEI7RUFDOUIscUNBQXFDO0FBQ3ZDOztBQUVBO0VBQ0Usd0NBQXdDO0VBQ3hDLGdDQUFnQztFQUNoQyx1Q0FBdUM7QUFDekM7O0FBRUE7RUFDRSx1Q0FBdUM7RUFDdkMsK0JBQStCO0VBQy9CLHNDQUFzQztBQUN4QyIsImZpbGUiOiJleHBhbnNpb24ubW9kdWxlLnNjc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuaGVhZGVyIHtcbiAgd2lkdGg6IDEwMCU7XG4gIG1heC13aWR0aDogMTAwJTtcbiAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkO1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogcm93O1xuICBib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzLXNtLCA1cHgpIHZhcigtLWJvcmRlci1yYWRpdXMtc20sIDVweCkgdmFyKC0tYm9yZGVyLXJhZGl1cy1tZCwgMTBweCkgdmFyKC0tYm9yZGVyLXJhZGl1cy1tZCwgMTBweCk7XG4gIGJveC1zaGFkb3c6IGluc2V0IDFweCAxcHggNXB4IDFweDtcbiAgaGVpZ2h0OiBtaW4tY29udGVudDtcbiAgdGV4dC13cmFwOiB3cmFwO1xufVxuLmhlYWRlciA6Zmlyc3QtY2hpbGQge1xuICBmbGV4LWdyb3c6IDE7XG59XG4uaGVhZGVyIDpsYXN0LWNoaWxkIHtcbiAgYWxpZ24tc2VsZjogZmxleC1lbmQ7XG4gIHBhZGRpbmc6IDEwcHg7XG59XG4uaGVhZGVyIGJ1dHRvbiB7XG4gIGhlaWdodDogbWluLWNvbnRlbnQ7XG4gIGJhY2tncm91bmQ6IG5vbmU7XG59XG4uaGVhZGVyIGJ1dHRvbiBzdmcge1xuICBoZWlnaHQ6IDUwJTtcbn1cblxuLmJvZHkge1xuICBtYXgtd2lkdGg6IDEwMCU7XG4gIHBhZGRpbmc6IGNhbGModmFyKC0tc3BhY2luZy0xLCA4cHgpIC0gMnB4KTtcbiAgYm9yZGVyLXJhZGl1czogdmFyKC0tYm9yZGVyLXJhZGl1cy1zbSwgNXB4KSB2YXIoLS1ib3JkZXItcmFkaXVzLXNtLCA1cHgpIHZhcigtLWJvcmRlci1yYWRpdXMtbWQsIDEwcHgpIHZhcigtLWJvcmRlci1yYWRpdXMtbWQsIDEwcHgpO1xufVxuLmJvZHkgOm50aC1jaGlsZChuKSB7XG4gIHRleHQtd3JhcDogd3JhcCAhaW1wb3J0YW50O1xufVxuXG4udG90YWxQYW5lbCB7XG4gIG1heC13aWR0aDogMTAwJTtcbiAgZGlzcGxheTogZmxleCAhaW1wb3J0YW50O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uICFpbXBvcnRhbnQ7XG4gIGJvcmRlcjogMXB4IHNvbGlkO1xuICBib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzLXNtLCA1cHgpIHZhcigtLWJvcmRlci1yYWRpdXMtc20sIDVweCkgdmFyKC0tYm9yZGVyLXJhZGl1cy1tZCwgMTBweCkgdmFyKC0tYm9yZGVyLXJhZGl1cy1tZCwgMTBweCk7XG59XG5cbi5ob3Zlcjpob3ZlciB7XG4gIGN1cnNvcjogcG9pbnRlcjtcbn1cblxuLnByaW1hcnkge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1wcmltYXJ5LWNvbG9yKTtcbiAgY29sb3I6IHZhcigtLW9uLXByaW1hcnktY29sb3IpO1xuICBib3JkZXItY29sb3I6IHZhcigtLW9uLXByaW1hcnktY29sb3IpO1xufVxuXG4uYWNjZW50IHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc2Vjb25kYXJ5LWNvbG9yKTtcbiAgY29sb3I6IHZhcigtLW9uLXNlY29uZGFyeS1jb2xvcik7XG4gIGJvcmRlci1jb2xvcjogdmFyKC0tb24tc2Vjb25kYXJ5LWNvbG9yKTtcbn1cblxuLnRlcnRpYXJ5IHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tdGVydGlhcnktY29sb3IpO1xuICBjb2xvcjogdmFyKC0tb24tdGVydGlhcnktY29sb3IpO1xuICBib3JkZXItY29sb3I6IHZhcigtLW9uLXRlcnRpYXJ5LWNvbG9yKTtcbn0iXX0= */";
-var style = {"header":"expansion-module_header__eaZ-i","body":"expansion-module_body__OYZTn","totalPanel":"expansion-module_totalPanel__o0hyd","hover":"expansion-module_hover__lzPNA","primary":"expansion-module_primary__oPhus","accent":"expansion-module_accent__HYwcP","tertiary":"expansion-module_tertiary__hl403"};
-styleInject(css_248z$1);
+var css_248z$4 = ".expansion-module_header__eaZ-i {\n  width: 100%;\n  max-width: 100%;\n  display: flex;\n  flex-direction: row;\n  height: -moz-min-content;\n  height: min-content;\n  text-wrap: wrap;\n}\n.expansion-module_header__eaZ-i :first-child {\n  flex-grow: 1;\n}\n.expansion-module_header__eaZ-i :last-child {\n  align-self: flex-end;\n  padding: 10px;\n  fill: var(--on-container-color, #000);\n}\n.expansion-module_header__eaZ-i button {\n  height: -moz-min-content;\n  height: min-content;\n  background: none;\n}\n.expansion-module_header__eaZ-i button svg {\n  height: 50%;\n}\n\n.expansion-module_opened__BFLJk {\n  border-radius: 8px 8px 0px 0px;\n}\n\n.expansion-module_closed__VmSJ7 {\n  border-radius: 4px 4px 8px 8px;\n}\n\n.expansion-module_body__OYZTn {\n  display: hidden;\n  max-height: 0;\n  opacity: 0;\n  transition: max-height 0.5s ease, opacity 0.5s ease;\n  padding: calc(var(--spacing-1, 8px) - 2px);\n  border-radius: 0px 0px 8px 8px;\n}\n.expansion-module_body__OYZTn :nth-child(n) {\n  text-wrap: wrap !important;\n}\n\n.expansion-module_open__L1UJR {\n  max-height: 800px;\n  opacity: 1;\n}\n\n.expansion-module_totalPanel__o0hyd {\n  max-width: 100%;\n  display: flex !important;\n  flex-direction: column !important;\n  border-radius: 4px 4px 8px 8px;\n}\n\n.expansion-module_hover__lzPNA:hover {\n  cursor: pointer;\n}\n\n.expansion-module_accent__HYwcP {\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n}";
+var style = {"header":"expansion-module_header__eaZ-i","opened":"expansion-module_opened__BFLJk","closed":"expansion-module_closed__VmSJ7","body":"expansion-module_body__OYZTn","open":"expansion-module_open__L1UJR","totalPanel":"expansion-module_totalPanel__o0hyd","hover":"expansion-module_hover__lzPNA","accent":"expansion-module_accent__HYwcP"};
+styleInject(css_248z$4);
 
-var _tmpl$$2 = /*#__PURE__*/template(`<svg width=46 height=44><path d="M24.15 12.7875L37.6625 25.575C39.1 26.95 39.1 29.15 37.6625 30.525C36.225 31.9 33.925 31.9 32.4875 30.525L24.15 22.6875C23.4312 22 22.425 22 21.7062 22.6875L13.3687 30.525C11.9312 31.9 9.63123 31.9 8.19373 30.525C6.75623 29.15 6.75623 26.95 8.19373 25.575L21.7062 12.7875C22.425 12.2375 23.575 12.2375 24.15 12.7875Z"stroke=white stroke-width=2 stroke-miterlimit=10 stroke-linecap=round stroke-linejoin=round>`),
+var _tmpl$$6 = /*#__PURE__*/template(`<svg width=46 height=44><path d="M24.15 12.7875L37.6625 25.575C39.1 26.95 39.1 29.15 37.6625 30.525C36.225 31.9 33.925 31.9 32.4875 30.525L24.15 22.6875C23.4312 22 22.425 22 21.7062 22.6875L13.3687 30.525C11.9312 31.9 9.63123 31.9 8.19373 30.525C6.75623 29.15 6.75623 26.95 8.19373 25.575L21.7062 12.7875C22.425 12.2375 23.575 12.2375 24.15 12.7875Z"stroke=white stroke-width=2 stroke-miterlimit=10 stroke-linecap=round stroke-linejoin=round>`),
   _tmpl$2$2 = /*#__PURE__*/template(`<svg width=44 height=43><path d="M20.7625 31.8469L7.83752 19.35C6.46252 18.0062 6.46252 15.8562 7.83752 14.5125C9.21252 13.1687 11.4125 13.1687 12.7875 14.5125L20.7625 22.1719C21.45 22.8437 22.4125 22.8437 23.1 22.1719L31.075 14.5125C32.45 13.1687 34.65 13.1687 36.025 14.5125C37.4 15.8562 37.4 18.0062 36.025 19.35L23.1 31.8469C22.55 32.3844 21.45 32.3844 20.7625 31.8469Z"stroke=white stroke-width=2 stroke-miterlimit=10 stroke-linecap=round stroke-linejoin=round>`);
 const UpArrow = props => {
   return (() => {
-    var _el$ = _tmpl$$2();
+    var _el$ = _tmpl$$6();
     spread(_el$, mergeProps(props, {
       "viewBox": "0 0 46 44",
       "fill": "none",
@@ -2522,17 +2449,17 @@ const DownArrow = props => {
   })();
 };
 
-var _tmpl$$1 = /*#__PURE__*/template(`<div>`),
-  _tmpl$2$1 = /*#__PURE__*/template(`<div><div><span>`);
+var _tmpl$$5 = /*#__PURE__*/template(`<div><div><span></span></div><div>`);
 const ExpansionPanel = props => {
   const [open, setOpen] = createSignal(!!props.startOpen);
   return (() => {
-    var _el$ = _tmpl$2$1(),
+    var _el$ = _tmpl$$5(),
       _el$2 = _el$.firstChild,
-      _el$3 = _el$2.firstChild;
+      _el$3 = _el$2.firstChild,
+      _el$4 = _el$2.nextSibling;
     spread(_el$, mergeProps(props, {
       get ["class"]() {
-        return `${style.totalPanel} .styles`;
+        return `${style.totalPanel}`;
       }
     }), false, true);
     _el$3.style.setProperty("width", "min-content");
@@ -2592,18 +2519,17 @@ const ExpansionPanel = props => {
         })];
       }
     }), null);
-    insert(_el$, createComponent(Show, {
-      get when() {
-        return open();
-      },
-      get children() {
-        var _el$4 = _tmpl$$1();
-        insert(_el$4, () => props.children[1]);
-        createRenderEffect(() => className(_el$4, `${style[props.styleType ?? 'accent']} ${style.body}`));
-        return _el$4;
-      }
-    }), null);
-    createRenderEffect(() => className(_el$2, `${style[props.styleType ?? 'accent']} ${style.header}`));
+    insert(_el$4, () => props.children[1]);
+    createRenderEffect(_p$ => {
+      var _v$ = `${style['accent']} ${style.header} ${open() ? style.opened : style.closed}`,
+        _v$2 = `${style['accent']} ${style.body} ${open() ? style.open : ''}`;
+      _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+      _v$2 !== _p$.t && className(_el$4, _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
     return _el$;
   })();
 };
@@ -110349,82 +110275,169 @@ const Icon = props => {
   }, others));
 };
 
-class FormGroup {
-  data;
-  internalDataSignal;
-  validators = {};
-  errors = {};
-  constructor(data) {
-    this.data = data;
-    const newData = Object.entries(data).reduce((acc, [key, [value]]) => {
-      acc[key] = value;
-      return acc;
-    }, {});
-    this.internalDataSignal = createStore(newData);
-    this.validators = Object.entries(data).reduce((acc, val) => {
-      const [key, [defaultVal, validators]] = val;
-      acc[key] = validators;
-      return acc;
-    }, {});
-    this.errors = Object.entries(data).reduce((acc, val) => {
-      const [key, [, validators]] = val;
-      acc[key] = validators.map(validator => ({
-        key: validator.errKey,
-        hasError: false
-      }));
-      return acc;
-    }, {});
+/**
+ * A class that encapsulates an array of form controls along with their validation logic.
+ *
+ * @template T - An object type representing the shape of a single form control's value.
+ */
+class FormArray {
+  /**
+   * An array of array-level validators. Each validator validates the entire array of form control values.
+   * Each element is a ValidatorResult function that returns a validation result for the entire array.
+   *
+   * @private
+   */
+  internalArrayValidation;
+  /**
+   * An array of control-level validators. Each element is a tuple where the first value is not used
+   * in this class and the second value is an array of validators that validate a single control value.
+   *
+   * @private
+   */
+  internalValidation;
+  /**
+   * A function to update the current state of control-level validations.
+   *
+   * @private
+   */
+  setValidation;
+  /**
+   * An array of error arrays. Each inner array holds the errors corresponding to a single form control.
+   *
+   * @private
+   */
+  errors = [];
+  /**
+   * Creates an instance of FormArray.
+   *
+   * @param arrayValidation - A tuple where the first element is an initial array of control-level validation definitions
+   * and the second element is an array of array-level validators.
+   */
+  constructor(arrayValidation) {
+    const [valid, setValid] = createStore(arrayValidation[0]);
+    this.internalArrayValidation = arrayValidation[1];
+    this.internalValidation = valid;
+    this.setValidation = setValid;
   }
-  get(key) {
-    if (!key) return Clone(this.internalDataSignal[0]);
-    return Clone(this.internalDataSignal[0][key]);
+  /**
+   * Removes a control's validation at the specified index.
+   *
+   * @param index - The index of the control to remove.
+   */
+  remove(index) {
+    this.setValidation(old => {
+      const copy = [...old];
+      copy.splice(index, 1);
+      return copy;
+    });
   }
-  hasValidator(key, errKey) {
-    return this.errors[key].some(error => error.key === errKey);
+  /**
+   * Replaces a control's validation at the specified index with a new validation.
+   *
+   * @param index - The index of the control to replace.
+   * @param controlValidation - The new validation to apply for the control.
+   */
+  replace(index, controlValidation) {
+    this.setValidation(old => {
+      const copy = [...old];
+      copy.splice(index, 1, controlValidation);
+      return copy;
+    });
   }
-  hasError(key) {
-    return this.errors[key].some(error => error.hasError);
+  /**
+   * Adds a new control validation to the array.
+   *
+   * @param controlValidation - The validation definition to add.
+   */
+  add(controlValidation) {
+    this.setValidation(old => {
+      return [...old, controlValidation];
+    });
   }
-  set(key, value) {
-    this.internalDataSignal[1](old => ({
-      ...old,
-      [key]: value
-    }));
+  /**
+   * Checks if any validation errors exist.
+   *
+   * @param index - (Optional) The index of the control to check for errors.
+   * If not provided, it checks the entire form array.
+   * @returns `true` if any errors are found, otherwise `false`.
+   */
+  hasError(index) {
+    if (isNullish(index)) {
+      // Check errors for all controls if no index is provided.
+      return this.errors.flat().some(error => error.hasError);
+    }
+    // Check errors for a specific control.
+    return this.errors[index].some(error => error.hasError);
   }
-  validate(key) {
-    if (isNullish(this.internalDataSignal?.[0])) {
+  /**
+   * Checks if a specific validator error exists for a control at the given index.
+   *
+   * @param index - The index of the control.
+   * @param errKey - The key identifying the specific error to check for.
+   * @returns `true` if the specific error is present, otherwise `false`.
+   */
+  hasValidator(index, errKey) {
+    return this.errors[index].some(error => error.key === errKey);
+  }
+  /**
+   * Validates the provided form control values.
+   *
+   * @param values - The array of form control values.
+   * @param index - (Optional) The index of a single control to validate.
+   * If not provided, the method validates all controls in the form array.
+   * @returns `true` if all validations pass, otherwise `false`.
+   */
+  validate(values, index) {
+    if (isNullish(values)) {
       console.error('Data is null');
       return false;
     }
-    if (!key) {
-      return Object.entries(Clone(this.internalDataSignal[0])).every(([key, value]) => {
-        const typedKey = key;
-        const validators = this.validators[typedKey];
-        if (!validators) return true;
-        const checkAllValidators = validators.every(validator => {
-          const hasError = validator.revalidate(value);
-          const errorIndex = this.errors[typedKey].findIndex(error => error.key === validator.errKey);
-          if (errorIndex !== -1) {
-            this.errors[typedKey][errorIndex].hasError = !hasError;
-          }
-          return hasError;
+    // Validate all controls in the form array.
+    if (isNullish(index)) {
+      this.errors = values.map((value, i) => {
+        const errors = this.internalValidation.map(([_, validators]) => {
+          return validators.map(validator => ({
+            key: validator.errKey,
+            hasError: !validator.revalidate(value)
+          }));
         });
-        return checkAllValidators;
+        const arrayErrors = this.internalArrayValidation.map(validator => ({
+          key: validator.errKey,
+          hasError: !validator.revalidate(values)
+        }));
+        this.errors[i] = [...errors.flat(), ...arrayErrors];
+        return [...errors.flat(), ...arrayErrors];
       });
+      return this.errors.flat().every(error => !error.hasError);
     }
-    const validators = this.validators[key];
-    if (!validators) return true;
-    return validators.every(validator => {
-      const hasError = !validator.revalidate(this.internalDataSignal[0][key]);
-      const errorIndex = this.errors[key].findIndex(error => error.key === validator.errKey);
-      if (errorIndex !== -1) {
-        this.errors[key][errorIndex].hasError = hasError;
-      }
-      return !hasError;
+    // Validate a specific control in the form array.
+    const errors = this.internalValidation.map(([_, validators]) => {
+      return validators.map(validator => ({
+        key: validator.errKey,
+        hasError: !validator.revalidate(values[index])
+      }));
     });
+    this.errors[index] = errors.flat();
+    return this.errors[index].every(error => !error.hasError);
   }
 }
+
+/**
+ * A collection of static validator functions that return a ValidatorResult.
+ * These validators can be used to validate common conditions such as required fields,
+ * email format, minimum/maximum length, custom patterns, and more.
+ */
 class Validators {
+  /**
+   * Validates that a value is present (i.e. not null or undefined).
+   * For strings, it checks that the trimmed string is not empty.
+   * For arrays, it verifies that the array is not empty.
+   *
+   * @template T - The type of the value to validate.
+   * @returns A ValidatorResult that includes the error key and a revalidation function.
+   *
+   * @private
+   */
   static required() {
     const errKey = 'required';
     return this.createValidatorResult(errKey, value => {
@@ -110434,38 +110447,219 @@ class Validators {
       return true;
     });
   }
+  /**
+   * A getter that returns the required validator.
+   *
+   * @returns A ValidatorResult for validating required fields.
+   */
   static get Required() {
     return Validators.required();
   }
+  /**
+   * Validates that a string is in a valid email format.
+   *
+   * @returns A ValidatorResult that includes the error key and a revalidation function for email validation.
+   *
+   * @private
+   */
   static email() {
     const errKey = 'email';
     return this.createValidatorResult(errKey, value => /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/.test(value));
   }
+  /**
+   * A getter that returns the email validator.
+   *
+   * @returns A ValidatorResult for validating email format.
+   */
   static get Email() {
     return Validators.email();
   }
+  /**
+   * Creates a validator that checks if a value meets the minimum length requirement.
+   *
+   * @param length - The minimum length required.
+   * @returns A ValidatorResult that includes the error key and a revalidation function for minimum length.
+   */
   static minLength(length) {
     const errKey = 'minLength';
-    return this.createValidatorResult(errKey, value => value.length >= length);
+    return this.createValidatorResult(errKey, value => {
+      if (isNullish(value)) return false;
+      return !(value.length < length);
+    });
   }
+  /**
+   * Creates a validator that checks if a value does not exceed the maximum length.
+   *
+   * @param length - The maximum allowed length.
+   * @returns A ValidatorResult that includes the error key and a revalidation function for maximum length.
+   */
   static maxLength(length) {
     const errKey = 'maxLength';
-    return this.createValidatorResult(errKey, value => value.length <= length);
+    return this.createValidatorResult(errKey, value => {
+      if (isNullish(value)) return false;
+      return value.length <= length;
+    });
   }
+  /**
+   * Creates a validator that checks if a string matches the provided regular expression pattern.
+   *
+   * @param errKey - The error key to associate with this validator.
+   * @param pattern - The regular expression pattern to test the value against.
+   * @returns A ValidatorResult that includes the provided error key and a revalidation function.
+   */
   static pattern(errKey, pattern) {
     return this.createValidatorResult(errKey, value => pattern.test(value));
   }
-  static custom(errKey, validator) {
+  /**
+   * Creates a custom validator with a provided validation function.
+   *
+   * @template T - The type of the value to validate.
+   * @param errKey - The error key to associate with this validator.
+   * @param validator - A function that receives a value of type T and returns a boolean indicating validity.
+   * @returns A ValidatorResult that includes the error key and a revalidation function.
+   */
+  static custom(errKey, validator, hide) {
     return this.createValidatorResult(errKey, validator);
   }
-  static createValidatorResult(errKey, revalidate) {
+  /**
+   * A helper function that creates a ValidatorResult object.
+   *
+   * @template T - The type of the value to validate.
+   * @param errKey - The error key associated with the validator.
+   * @param revalidate - A function that revalidates a given value and returns true if valid, false otherwise.
+   * @returns A ValidatorResult containing the error key and revalidation function.
+   *
+   * @private
+   */
+  static createValidatorResult(errKey, revalidate, hide) {
     return {
       errKey,
-      revalidate
+      revalidate,
+      hide
     };
   }
 }
 
+/**
+ * Represents a group of form controls and manages their state, validation, and errors.
+ *
+ * @template T - The shape of the form's data, where each property corresponds to a form control.
+ */
+class FormGroup {
+  data;
+  internalDataSignal;
+  validators = {};
+  errors;
+  keys = [];
+  constructor(data) {
+    this.data = data;
+    const newData = {};
+    const newValidators = {};
+    const newErrors = {};
+    for (const key in data) {
+      const value = data[key];
+      this.keys.push(key);
+      if (value instanceof FormArray) {
+        // If the value is a FormArray, store it directly.
+        newData[key] = value;
+      } else {
+        // Otherwise, initialize the data, validators, and errors for the control.
+        newData[key] = value[0];
+        newValidators[key] = value[1];
+        newErrors[key] = value[1].map(validator => ({
+          key: validator.errKey,
+          hasError: false
+        }));
+      }
+    }
+    this.internalDataSignal = createStore(newData);
+    this.validators = newValidators;
+    this.errors = createSignal(newErrors);
+  }
+  get(key) {
+    if (!key) return Clone(this.internalDataSignal[0]);
+    return Clone(this.internalDataSignal[0][key]);
+  }
+  /**
+   * Checks whether a specific validator error exists for a given control.
+   *
+   * @param key - The key of the form control.
+   * @param errKey - The error key to check for.
+   * @returns `true` if the error exists, otherwise `false`.
+   */
+  hasValidator(key, errKey) {
+    return this.errors[0]()?.[key]?.some(error => error.key === errKey);
+  }
+  getErrors(key) {
+    return this.errors[0]()?.[key];
+  }
+  /**
+   * Determines if a specific control has any validation errors.
+   *
+   * @param key - The key of the form control.
+   * @returns `true` if any error is present, otherwise `false`.
+   */
+  hasError(key) {
+    return this.errors[0]()?.[key]?.some(error => error.hasError);
+  }
+  setError(key, errKey, hasError) {
+    const errorIndex = this.errors[0]()[key].findIndex(error => error.key === errKey);
+    if (errorIndex !== -1) {
+      this.errors[1](old => {
+        old[key][errorIndex].hasError = hasError;
+        return Clone(old);
+      });
+    }
+  }
+  /**
+   * Sets a new value for a specified form control.
+   *
+   * @param key - The key of the form control to update.
+   * @param value - The new value to assign to the control.
+   */
+  set(key, value) {
+    this.internalDataSignal[1](old => ({
+      ...old,
+      [key]: value
+    }));
+  }
+  /**
+   * Validates the form data.
+   *
+   * If a key is provided, only that control is validated. If no key is provided, the entire form is validated.
+   *
+   * @param key - (Optional) The key of the control to validate.
+   * @returns `true` if the control(s) pass all validations; otherwise, `false`.
+   */
+  validate(key) {
+    if (isNullish(this.internalDataSignal?.[0])) {
+      console.error('Data is null');
+      return false;
+    }
+    // Validate all controls if no key is specified.
+    if (!key) {
+      const results = this.keys.map(key => this.validate(key));
+      return results.every(result => result);
+    }
+    // For a specific control key, handle FormArray differently.
+    if (this.internalDataSignal[0][key] instanceof FormArray) {
+      return this.internalDataSignal[0][key].validate(this.internalDataSignal[0][key].get());
+    }
+    const validators = this.validators[key];
+    if (!validators) return true;
+    return !validators.map(validator => {
+      const hasError = !validator.revalidate(this.internalDataSignal[0][key]);
+      const toHide = validator.hide?.(this.internalDataSignal[0][key]);
+      if (toHide) {
+        this.setError(key, validator.errKey, false);
+        return true;
+      }
+      this.setError(key, validator.errKey, hasError);
+      return !hasError;
+    }).includes(false);
+  }
+}
+
 function createTableContext() {
   return createContext({});
 }
@@ -110491,8 +110685,7 @@ const ColumnProvider = props => {
   return createComponent(ColumnContext.Provider, {
     get value() {
       return {
-        name: props.name,
-        rowNumber: props.rowNumber
+        name: props.name
       };
     },
     get children() {
@@ -110504,21 +110697,25 @@ const useColumnContext = () => {
   return useContext(ColumnContext);
 };
 
-var css_248z = ".table-module_table__um-mK {\n  border-collapse: collapse;\n  border-spacing: 0;\n}\n.table-module_table__um-mK thead tr th {\n  padding: 0.5rem;\n}\n.table-module_table__um-mK tbody tr td {\n  padding: 0.5rem;\n  width: -moz-max-content;\n  width: max-content;\n}\n.table-module_table__um-mK tfoot tr td {\n  padding: 0.5rem;\n  width: -moz-max-content;\n  width: max-content;\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRhYmxlLm1vZHVsZS5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UseUJBQXlCO0VBQ3pCLGlCQUFpQjtBQUNuQjtBQUNBO0VBQ0UsZUFBZTtBQUNqQjtBQUNBO0VBQ0UsZUFBZTtFQUNmLHVCQUFrQjtFQUFsQixrQkFBa0I7QUFDcEI7QUFDQTtFQUNFLGVBQWU7RUFDZix1QkFBa0I7RUFBbEIsa0JBQWtCO0FBQ3BCIiwiZmlsZSI6InRhYmxlLm1vZHVsZS5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLnRhYmxlIHtcbiAgYm9yZGVyLWNvbGxhcHNlOiBjb2xsYXBzZTtcbiAgYm9yZGVyLXNwYWNpbmc6IDA7XG59XG4udGFibGUgdGhlYWQgdHIgdGgge1xuICBwYWRkaW5nOiAwLjVyZW07XG59XG4udGFibGUgdGJvZHkgdHIgdGQge1xuICBwYWRkaW5nOiAwLjVyZW07XG4gIHdpZHRoOiBtYXgtY29udGVudDtcbn1cbi50YWJsZSB0Zm9vdCB0ciB0ZCB7XG4gIHBhZGRpbmc6IDAuNXJlbTtcbiAgd2lkdGg6IG1heC1jb250ZW50O1xufSJdfQ== */";
-var styles = {"table":"table-module_table__um-mK"};
-styleInject(css_248z);
+var css_248z$3 = ".table-module_table__um-mK {\n  border-collapse: collapse;\n  text-align: center;\n}\n.table-module_table__um-mK thead tr th {\n  padding: 0.5rem;\n}\n.table-module_table__um-mK tr td {\n  padding: 0.5rem;\n  width: -moz-max-content;\n  width: max-content;\n}";
+var styles$3 = {"table":"table-module_table__um-mK"};
+styleInject(css_248z$3);
 
-var _tmpl$ = /*#__PURE__*/template(`<table><colgroup></colgroup><thead></thead><tbody></tbody><tfoot>`),
-  _tmpl$2 = /*#__PURE__*/template(`<col>`),
-  _tmpl$3 = /*#__PURE__*/template(`<tr>`),
+var _tmpl$$4 = /*#__PURE__*/template(`<table><colgroup></colgroup><thead></thead><tbody></tbody><tfoot>`),
+  _tmpl$2$1 = /*#__PURE__*/template(`<col>`),
+  _tmpl$3$1 = /*#__PURE__*/template(`<tr>`),
   _tmpl$4 = /*#__PURE__*/template(`<th>`),
   _tmpl$5 = /*#__PURE__*/template(`<td>`);
 const Table = props => {
   const formContext = useFormContext();
   const tableContext = {};
-  tableContext.getDataSource = () => props.data;
+  const getProps = () => props;
+  // const internalData = (() => {
+  //   return props.data();
+  // });
+  // tableContext.getDataSource = () => props.data();
   tableContext.setDataSource = data => {
-    props.setData?.(data);
+    getProps().setData?.(() => [...data]);
     formContext.setData(data);
   };
   const [headers, setHeaders] = createSignal({});
@@ -110638,25 +110835,25 @@ const Table = props => {
   return createComponent(TableProvider, mergeProps(tableContext, {
     get children() {
       return [(() => {
-        var _el$ = _tmpl$(),
+        var _el$ = _tmpl$$4(),
           _el$2 = _el$.firstChild,
           _el$3 = _el$2.nextSibling,
           _el$4 = _el$3.nextSibling,
           _el$5 = _el$4.nextSibling;
-        spread(_el$2, mergeProps(() => props?.otherStyles?.colGroup?.all, {
+        spread(_el$2, mergeProps(() => getProps()?.otherStyles?.colGroup?.all, {
           get style() {
-            return props.otherStyles?.colGroup?.style;
+            return getProps().otherStyles?.colGroup?.style;
           },
           get ["class"]() {
-            return props.otherStyles?.colGroup?.class;
+            return getProps().otherStyles?.colGroup?.class;
           }
         }), false, true);
         insert(_el$2, createComponent(For, {
           get each() {
-            return props.columns;
+            return getProps().columns;
           },
           children: column => (() => {
-            var _el$6 = _tmpl$2();
+            var _el$6 = _tmpl$2$1();
             spread(_el$6, mergeProps(() => columnStyle()[column]?.all, {
               get style() {
                 return columnStyle()[column]?.style;
@@ -110668,12 +110865,12 @@ const Table = props => {
             return _el$6;
           })()
         }));
-        spread(_el$3, mergeProps(() => props?.otherStyles?.thead?.all, {
+        spread(_el$3, mergeProps(() => getProps()?.otherStyles?.thead?.all, {
           get style() {
-            return props.otherStyles?.thead?.style;
+            return getProps().otherStyles?.thead?.style;
           },
           get ["class"]() {
-            return props.otherStyles?.thead?.class;
+            return getProps().otherStyles?.thead?.class;
           }
         }), false, true);
         insert(_el$3, createComponent(For, {
@@ -110682,10 +110879,10 @@ const Table = props => {
           },
           children: rowNum => {
             return (() => {
-              var _el$7 = _tmpl$3();
+              var _el$7 = _tmpl$3$1();
               insert(_el$7, createComponent(For, {
                 get each() {
-                  return props.columns;
+                  return getProps().columns;
                 },
                 children: (column, index) => {
                   const headCell = headers()[rowNum]?.[column];
@@ -110707,7 +110904,7 @@ const Table = props => {
               createRenderEffect(_p$ => {
                 var _v$4 = headerRowStyle()[rowNum]?.style,
                   _v$5 = headerRowStyle()[rowNum]?.class;
-                _p$.e = style$a(_el$7, _v$4, _p$.e);
+                _p$.e = style$9(_el$7, _v$4, _p$.e);
                 _v$5 !== _p$.t && className(_el$7, _p$.t = _v$5);
                 return _p$;
               }, {
@@ -110718,17 +110915,17 @@ const Table = props => {
             })();
           }
         }));
-        spread(_el$4, mergeProps(() => props?.otherStyles?.tbody?.all, {
+        spread(_el$4, mergeProps(() => getProps()?.otherStyles?.tbody?.all, {
           get style() {
-            return props.otherStyles?.tbody?.style;
+            return getProps().otherStyles?.tbody?.style;
           },
           get ["class"]() {
-            return props.otherStyles?.tbody?.class;
+            return getProps().otherStyles?.tbody?.class;
           }
         }), false, true);
         insert(_el$4, createComponent(For, {
           get each() {
-            return props.data;
+            return getProps().data();
           },
           children: (item, index) => createComponent(For, {
             get each() {
@@ -110736,7 +110933,7 @@ const Table = props => {
             },
             children: rowNum => {
               return (() => {
-                var _el$9 = _tmpl$3();
+                var _el$9 = _tmpl$3$1();
                 spread(_el$9, mergeProps(() => rowStyleFactory(rowNum)?.all, {
                   get style() {
                     return rowStyleFactory(rowNum)?.style;
@@ -110747,11 +110944,10 @@ const Table = props => {
                 }), false, true);
                 insert(_el$9, createComponent(For, {
                   get each() {
-                    return props.columns;
+                    return getProps().columns;
                   },
                   children: column => {
                     const cell = rows()[rowNum]?.[column];
-                    // @ts-ignore
                     return !!cell ? (() => {
                       var _el$10 = _tmpl$5();
                       spread(_el$10, mergeProps(() => cellStyle?.()?.[rowNum]?.[column]?.all, {
@@ -110772,12 +110968,12 @@ const Table = props => {
             }
           })
         }));
-        spread(_el$5, mergeProps(() => props?.otherStyles?.tfoot?.all, {
+        spread(_el$5, mergeProps(() => getProps()?.otherStyles?.tfoot?.all, {
           get style() {
-            return props.otherStyles?.tfoot?.style;
+            return getProps().otherStyles?.tfoot?.style;
           },
           get ["class"]() {
-            return props.otherStyles?.tfoot?.class;
+            return getProps().otherStyles?.tfoot?.class;
           }
         }), false, true);
         insert(_el$5, createComponent(For, {
@@ -110786,7 +110982,7 @@ const Table = props => {
           },
           children: rowNum => {
             return (() => {
-              var _el$11 = _tmpl$3();
+              var _el$11 = _tmpl$3$1();
               spread(_el$11, mergeProps(() => footerStyle()[rowNum]?.all, {
                 get style() {
                   return footerStyle()[rowNum]?.style;
@@ -110797,7 +110993,7 @@ const Table = props => {
               }), false, true);
               insert(_el$11, createComponent(For, {
                 get each() {
-                  return props.columns;
+                  return getProps().columns;
                 },
                 children: column => {
                   const footCell = footerCell()[rowNum]?.[column];
@@ -110821,12 +111017,12 @@ const Table = props => {
           }
         }));
         createRenderEffect(_p$ => {
-          var _v$ = props.id,
-            _v$2 = `${styles.table} ${props.class}`,
-            _v$3 = props.style;
+          var _v$ = getProps().id,
+            _v$2 = `${styles$3.table} ${getProps().class}`,
+            _v$3 = getProps().style;
           _v$ !== _p$.e && setAttribute(_el$, "id", _p$.e = _v$);
           _v$2 !== _p$.t && className(_el$, _p$.t = _v$2);
-          _p$.a = style$a(_el$, _v$3, _p$.a);
+          _p$.a = style$9(_el$, _v$3, _p$.a);
           return _p$;
         }, {
           e: undefined,
@@ -110849,21 +111045,21 @@ const Row = props => {
   createEffect(() => {
     switch (true) {
       case props.header === true || Object.keys(props).includes('header') && props.header !== false:
-        tableContext.addHeaderRowStyle(rowNumber, {
+        tableContext?.addHeaderRowStyle?.(rowNumber, {
           class: local.class,
           style: local.style,
           all: others
         });
         break;
       case props.footer === true || Object.keys(props).includes('footer') && props.footer !== false:
-        tableContext.addFooterRowStyle(rowNumber, {
+        tableContext?.addFooterRowStyle?.(rowNumber, {
           class: local.class,
           style: local.style,
           all: others
         });
         break;
       default:
-        tableContext.addRowStyle(rowNumber, {
+        tableContext?.addRowStyle?.(rowNumber, {
           class: local.class,
           style: local.style,
           all: others
@@ -110875,13 +111071,12 @@ const Row = props => {
 };
 
 const Column = props => {
-  const tableContext = useTableContext();
-  if (tableContext === null || tableContext === undefined) {
-    throw new Error("Column must be wrapped in a TableProvider");
-  }
+  const {
+    addColumnStyle
+  } = useTableContext();
   const [local, others] = splitProps(props, ["name", "rowNumber", "children", "class", "style"]);
   createEffect(() => {
-    tableContext.addColumnStyle(local.name, {
+    addColumnStyle?.(local.name, {
       class: local.class,
       style: local.style,
       all: others
@@ -110891,9 +111086,6 @@ const Column = props => {
     get name() {
       return props?.name ?? ``;
     },
-    get rowNumber() {
-      return props?.rowNumber ?? 1;
-    },
     get children() {
       return props.children;
     }
@@ -110901,23 +111093,27 @@ const Column = props => {
 };
 
 const Cell = props => {
-  const columnInfo = useColumnContext();
-  const tableContext = useTableContext();
-  if (columnInfo === null || columnInfo === undefined || tableContext === null || tableContext === undefined) {
-    throw new Error("Cell must be wrapped in a Column and Table.");
-  }
-  const [local, others] = splitProps(props, ["children", "class", "style", "footer"]);
+  const {
+    name
+  } = useColumnContext();
+  const {
+    addFooterCell,
+    addFootCellStyle,
+    addRowCell,
+    addCellStyle
+  } = useTableContext();
+  const [local, others] = splitProps(props, ["children", "class", "style", "footer", "rowNumber"]);
   createEffect(() => {
     if (Object.keys(props).includes('footer') && props.footer !== false) {
-      tableContext.addFooterCell((columnInfo?.rowNumber ?? 1) - 1, columnInfo.name, local.children);
-      tableContext.addFootCellStyle((columnInfo?.rowNumber ?? 1) - 1, columnInfo.name, {
+      addFooterCell?.((local?.rowNumber ?? 1) - 1, name, local.children);
+      addFootCellStyle?.((local?.rowNumber ?? 1) - 1, name, {
         class: local.class,
         style: local.style,
         all: others
       });
     } else {
-      tableContext.addRowCell((columnInfo?.rowNumber ?? 1) - 1, columnInfo.name, local.children);
-      tableContext.addCellStyle((columnInfo?.rowNumber ?? 1) - 1, columnInfo.name, {
+      addRowCell?.((local?.rowNumber ?? 1) - 1, name, local.children);
+      addCellStyle?.((local?.rowNumber ?? 1) - 1, name, {
         class: local.class,
         style: local.style,
         all: others
@@ -110936,10 +111132,10 @@ const Header = props => {
   if (isNullish(columnInfo)) {
     throw new Error("Header must be wrapped in a Column");
   }
-  const [local, others] = splitProps(props, ["children", "class", "style"]);
+  const [local, others] = splitProps(props, ["children", "class", "style", "rowNumber"]);
   createEffect(() => {
-    tableContext.addHeaderCell(columnInfo.name, (columnInfo?.rowNumber ?? 1) - 1, local.children);
-    tableContext.addHeaderStyle(columnInfo.name, (columnInfo?.rowNumber ?? 1) - 1, {
+    tableContext?.addHeaderCell?.(columnInfo.name, (props?.rowNumber ?? 1) - 1, local.children);
+    tableContext?.addHeaderStyle?.(columnInfo.name, (props?.rowNumber ?? 1) - 1, {
       class: local.class,
       style: local.style,
       all: others
@@ -110948,4 +111144,258 @@ const Header = props => {
   return [];
 };
 
-export { Body, Button, Carousel, Cell, Chip, Chipbar, Column, ExpansionPanel, Form, FormField, FormGroup, Header, Icon, Input, Modal, Option, Row, Select, SelectContext, Slide, SnackbarController, Tab, Table, Tabs, TextArea, Validators, addSnackbar, addTheme, carouselTitleContext, getTabContext };
+var css_248z$2 = "/* TabBar.module.scss */\n.tabs-module_tabBarContainer__9ZZz8 {\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 8px;\n  background-color: inherit;\n  color: inherit;\n  border-radius: 8px;\n}\n\n.tabs-module_end__Nzyvl, .tabs-module_stretch__dMuvv, .tabs-module_center__TTX82, .tabs-module_start__DOlNm {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.tabs-module_start__DOlNm {\n  justify-content: flex-start;\n}\n\n.tabs-module_center__TTX82 {\n  justify-content: center;\n}\n\n.tabs-module_stretch__dMuvv button {\n  flex-grow: 1;\n}\n\n.tabs-module_end__Nzyvl {\n  justify-content: flex-end;\n}\n\n.tabs-module_tabButton__U8x7L {\n  background: none;\n  border: none;\n  padding: 8px 16px;\n  cursor: pointer;\n  color: inherit;\n  font-size: 14px;\n  position: relative;\n  border-radius: 8px;\n}\n\n.tabs-module_active__Cdyyt {\n  font-weight: bold;\n  opacity: var(--text-emphasis-high, 100%);\n}\n\n.tabs-module_inactive__NisIK {\n  opacity: var(--text-emphasis-medium, 87%);\n}\n\n.tabs-module_indicator__-IbxY {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  height: 3px;\n  background-color: var(--secondary-color, #14b9c3);\n  transition: transform 0.5s ease, width 0.5s ease; /* smooth animation */\n  border-radius: 16px;\n  z-index: 2;\n}\n\n.tabs-module_barRail__-dfNh {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 3px;\n  background-color: #ccc;\n  border-radius: 4px;\n  z-index: 1;\n}";
+var styles$2 = {"tabBarContainer":"tabs-module_tabBarContainer__9ZZz8","end":"tabs-module_end__Nzyvl","stretch":"tabs-module_stretch__dMuvv","center":"tabs-module_center__TTX82","start":"tabs-module_start__DOlNm","tabButton":"tabs-module_tabButton__U8x7L","active":"tabs-module_active__Cdyyt","inactive":"tabs-module_inactive__NisIK","indicator":"tabs-module_indicator__-IbxY","barRail":"tabs-module_barRail__-dfNh"};
+styleInject(css_248z$2);
+
+var _tmpl$$3 = /*#__PURE__*/template(`<div>`),
+  _tmpl$2 = /*#__PURE__*/template(`<div><div><div>`),
+  _tmpl$3 = /*#__PURE__*/template(`<button>`);
+const TabBar = props => {
+  // Refs to each tab button element for measuring position/width
+  let tabRefs = [];
+  // Signal to hold the dynamic style for the indicator (left offset and width)
+  const [indicatorStyle, setIndicatorStyle] = createSignal({});
+  const noRail = createMemo(() => {
+    if (Object.keys(props).includes("noRail") && props.noRail !== false) {
+      return true;
+    }
+    return false;
+  });
+  // Effect: update indicator position & width whenever activeTab changes
+  createEffect(() => {
+    const currentIndex = props.activeTab;
+    const tabEl = tabRefs[currentIndex];
+    if (tabEl) {
+      const offsetLeft = tabEl.offsetLeft;
+      const tabWidth = tabEl.offsetWidth;
+      tabEl.style;
+      setIndicatorStyle({
+        width: `${tabWidth}px`,
+        transform: `translateX(${offsetLeft}px)`
+      });
+    }
+  });
+  const getPosition = createMemo(() => {
+    switch (props?.tabPosition) {
+      case "center":
+        return styles$2.center;
+      case "end":
+        return styles$2.end;
+      case "start":
+        return styles$2.start;
+      default:
+        return styles$2.stretch;
+    }
+  });
+  // Prepare style objects for container and indicator based on props (for customization)
+  const containerStyle = {
+    ...(props.colors?.background ? {
+      background: props.colors.background
+    } : {}),
+    ...(props.size?.height ? {
+      height: props.size.height
+    } : {})
+  };
+  const indicatorBaseStyle = {
+    ...(props.colors?.indicator ? {
+      "background-color": props.colors.indicator
+    } : {}),
+    ...(props.size?.indicatorHeight ? {
+      height: props.size.indicatorHeight
+    } : {}),
+    // Apply custom transition timing if provided, otherwise use default from CSS
+    ...(props.animationTiming ? {
+      transition: `transform ${props.animationTiming}, width ${props.animationTiming}`
+    } : {})
+  };
+  const isActive = index => index === props.activeTab;
+  const isActiveClass = index => isActive(index) ? styles$2.active : '';
+  return (() => {
+    var _el$ = _tmpl$2(),
+      _el$2 = _el$.firstChild,
+      _el$4 = _el$2.firstChild;
+    insert(_el$2, createComponent(For, {
+      get each() {
+        return props.tabs;
+      },
+      children: (label, index) => (() => {
+        var _el$5 = _tmpl$3();
+        _el$5.$$click = () => props.onTabChange?.(label, index());
+        use(el => tabRefs[index()] = el, _el$5);
+        insert(_el$5, label);
+        createRenderEffect(_p$ => {
+          var _v$6 = {
+              [styles$2.tabButton]: true,
+              [styles$2.active]: index() === props.activeTab,
+              [styles$2.inactive]: index() !== props.activeTab
+            },
+            _v$7 = {
+              ...(props.size?.fontSize ? {
+                "font-size": props.size.fontSize
+              } : {}),
+              ...(props.colors?.text ? {
+                color: props.colors.text
+              } : {}),
+              ...(props.colors?.activeText && isActive(index()) ? {
+                color: props.colors.activeText
+              } : {})
+            };
+          _p$.e = classList(_el$5, _v$6, _p$.e);
+          _p$.t = style$9(_el$5, _v$7, _p$.t);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
+        return _el$5;
+      })()
+    }), _el$4);
+    insert(_el$2, createComponent(Show, {
+      get when() {
+        return !noRail();
+      },
+      get children() {
+        var _el$3 = _tmpl$$3();
+        createRenderEffect(() => className(_el$3, styles$2.barRail));
+        return _el$3;
+      }
+    }), _el$4);
+    createRenderEffect(_p$ => {
+      var _v$ = styles$2.tabBarContainer,
+        _v$2 = containerStyle,
+        _v$3 = `${getPosition()} ${props?.class ?? ''}`,
+        _v$4 = `${styles$2.indicator} ${props.indicatorClass} ${isActiveClass(props.activeTab)}`,
+        _v$5 = {
+          ...indicatorBaseStyle,
+          ...indicatorStyle()
+        };
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _p$.t = style$9(_el$, _v$2, _p$.t);
+      _v$3 !== _p$.a && className(_el$2, _p$.a = _v$3);
+      _v$4 !== _p$.o && className(_el$4, _p$.o = _v$4);
+      _p$.i = style$9(_el$4, _v$5, _p$.i);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined
+    });
+    return _el$;
+  })();
+};
+delegateEvents(["click"]);
+
+var css_248z$1 = ".container-module_primary__EvZuR {\n  background-color: var(--primary-color, #4CAF50);\n  color: var(--on-primary-color, #fff);\n}\n\n.container-module_primaryVariant__lC3Dg {\n  background-color: var(--primary-color-varient, #43A047);\n  color: var(--on-primary-color, #fff);\n}\n\n.container-module_secondary__-ywDW {\n  background-color: var(--secondary-color, #14b9c3);\n  color: var(--on-secondary-color, #000000);\n}\n\n.container-module_secondaryVariant__E7Gxe {\n  background-color: var(--secondary-color-varient, #0b969f);\n  color: var(--on-secondary-color, #000000);\n}\n\n.container-module_background__TT8pn {\n  background-color: var(--background-color, #ffffff);\n  color: var(--on-background-color, #000000);\n}\n\n.container-module_surface__59oDI {\n  background-color: var(--surface-color, #EEEEEE);\n  color: var(--on-surface-color, #000000);\n}\n\n.container-module_surfaceVariant__S9Pyg {\n  background-color: var(--surface-color-variant, #ccc);\n  color: var(--on-surface-color, #000000);\n}\n\n.container-module_container__Xfc8t {\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n}\n\n.container-module_error__anU8a {\n  background-color: var(--error-color, #B00020);\n  color: var(--on-error-color, #ffffff);\n}\n\n.container-module_header__2SLww {\n  background-color: var(--header-background-color, #2E7D32);\n  color: var(--header-on-background-color, #fff);\n  height: 50px;\n}\n\n.container-module_subheader__Y2LUC {\n  background-color: var(--subheader-background-color, #388E3C);\n  color: var(--subheader-on-background-color, #fff);\n  height: 38px;\n}";
+var styles$1 = {"primary":"container-module_primary__EvZuR","primaryVariant":"container-module_primaryVariant__lC3Dg","secondary":"container-module_secondary__-ywDW","secondaryVariant":"container-module_secondaryVariant__E7Gxe","background":"container-module_background__TT8pn","surface":"container-module_surface__59oDI","surfaceVariant":"container-module_surfaceVariant__S9Pyg","container":"container-module_container__Xfc8t","error":"container-module_error__anU8a","header":"container-module_header__2SLww","subheader":"container-module_subheader__Y2LUC"};
+styleInject(css_248z$1);
+
+var _tmpl$$2 = /*#__PURE__*/template(`<div>`);
+const Container = props => {
+  const [local, other] = splitProps(props, ["children", "class", "theme"]);
+  return (() => {
+    var _el$ = _tmpl$$2();
+    spread(_el$, mergeProps(other, {
+      get ["class"]() {
+        return `${styles$1[local.theme]} ${local.class}`;
+      }
+    }), false, true);
+    insert(_el$, () => local.children);
+    return _el$;
+  })();
+};
+
+var css_248z = ".menu-module_menu__UDlDL {\n  background-color: var(--primary-color-varient, #43A047);\n  padding: 1px;\n  margin: 0px;\n  width: 100px;\n  border-radius: 8px;\n  transform-origin: top;\n  transform: scaleY(0);\n  transition: transform 0.3s ease-out, opacity 0.3s ease-out;\n  opacity: 0;\n}\n\n.menu-module_open__TpFnL {\n  transform: scaleY(1);\n  opacity: 1;\n}\n\n.menu-module_list__WPlII {\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n  width: 100%;\n  list-style: none;\n  padding: 4px 0;\n  margin: 0;\n  border-radius: 8px;\n}\n\n.menu-module_menuItem__oXBNs {\n  padding: 0.5rem 0;\n  width: 100%;\n}\n.menu-module_menuItem__oXBNs:hover {\n  background-color: var(--surface-color-variant, #ccc);\n  cursor: pointer;\n}";
+var styles = {"menu":"menu-module_menu__UDlDL","open":"menu-module_open__TpFnL","list":"menu-module_list__WPlII","menuItem":"menu-module_menuItem__oXBNs"};
+styleInject(css_248z);
+
+var _tmpl$$1 = /*#__PURE__*/template(`<div><ul>`);
+const Menu = props => {
+  const [local, others] = splitProps(props, ['anchorElement', 'children', 'ref', 'show', 'position']);
+  const [menuRef, setMenuRef] = createSignal();
+  const openStyle = () => {
+    if (local.show[0]()) {
+      return styles.open;
+    }
+    return '';
+  };
+  createEffect(() => {
+    const menu = menuRef();
+    const anchor = local.anchorElement();
+    if (menu && anchor) {
+      const rect = anchor.getBoundingClientRect();
+      menu.style.position = 'absolute';
+      menu.style.top = `${rect.bottom}px`;
+      if ((local?.position ?? 'left') === 'left') {
+        menu.style.left = `${rect.left}px`;
+      } else if (local.position === 'center') {
+        menu.style.left = `${rect.left + rect.width - menu.offsetWidth / 2 - anchor.offsetWidth / 2}px`;
+      } else {
+        menu.style.left = `${rect.left + rect.width - menu.offsetWidth}px`;
+      }
+    }
+  });
+  onCleanup(() => {
+    const menu = menuRef();
+    if (menu) {
+      menu.style.top = '';
+      menu.style.left = '';
+    }
+  });
+  useClickOutside([menuRef, local.anchorElement], () => {
+    local.show[1](false);
+  });
+  return createComponent(Portal, {
+    get children() {
+      var _el$ = _tmpl$$1(),
+        _el$2 = _el$.firstChild;
+      use(setMenuRef, _el$);
+      spread(_el$, mergeProps(others, {
+        get ["class"]() {
+          return `${styles.menu} ${openStyle()}`;
+        }
+      }), false, true);
+      insert(_el$2, () => local.children);
+      createRenderEffect(() => className(_el$2, `${styles.list}`));
+      return _el$;
+    }
+  });
+};
+
+var _tmpl$ = /*#__PURE__*/template(`<li>`);
+const MenuItem = props => {
+  const [local, others] = splitProps(props, ['children', 'class']);
+  return (() => {
+    var _el$ = _tmpl$();
+    spread(_el$, mergeProps(others, {
+      get ["class"]() {
+        return `${styles.menuItem} ${local.class}`;
+      }
+    }), false, true);
+    insert(_el$, () => local.children);
+    return _el$;
+  })();
+};
+
+const ColeError = props => {
+  const formField = useFormProvider();
+  createEffect(() => {
+    if (!!formField?.formName && !!props.errorName) {
+      formField?.setErrors(prev => {
+        const newError = {
+          key: props.errorName,
+          hasError: false,
+          display: props.children
+        };
+        return {
+          err: [...prev?.err, newError]
+        };
+      });
+    }
+  });
+  return [];
+};
+
+export { Body, Button, Carousel, Cell, Chip, Chipbar, Column, Container, ExpansionPanel, ColeError as FieldError, Form, FormField, FormGroup, Header, Icon, Input, Menu, MenuItem, Modal, Option, Row, Select, SelectContext, Slide, SnackbarController, TabBar, Table, TextArea, Validators, addSnackbar, addTheme, carouselTitleContext };