coles-solid-library 0.2.8 → 0.3.1

package/dist/index.esm.js

@@ -516,11 +516,11 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$g = ".Button_customButtonStyle__1TOXE {\n  border-radius: 8px;\n  font-family: \"Roboto, sans-serif\";\n  padding: 8px 8px;\n  border: none;\n  outline: 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 css_248z$j = ".Button_customButtonStyle__1TOXE {\n  border-radius: 8px;\n  font-family: \"Roboto, sans-serif\";\n  padding: 8px 8px;\n  border: none;\n  outline: 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$g);
+styleInject(css_248z$j);
 
-var _tmpl$$l = /*#__PURE__*/template(`<button>`);
+var _tmpl$$o = /*#__PURE__*/template(`<button>`);
 const Button = props => {
   const [local, others] = splitProps(props, ["theme", "transparent", "borderTheme"]);
   const isTransparent = () => {
@@ -529,6 +529,7 @@ const Button = props => {
     }
     return false;
   };
+  const [buttonRef, setButtonRef] = createSignal();
   const transparent = createMemo(() => isTransparent() ? style$8.transparent : "");
   const getBorderThemeName = theme => {
     switch (theme) {
@@ -555,7 +556,12 @@ const Button = props => {
     }
   };
   return (() => {
-    var _el$ = _tmpl$$l();
+    var _el$ = _tmpl$$o();
+    use(ref => {
+      setButtonRef(ref);
+      // @ts-ignore
+      props?.ref?.(ref);
+    }, _el$);
     spread(_el$, mergeProps(others, {
       get ["class"]() {
         return `${style$8[local?.theme ?? "container"]} ${style$8[getBorderThemeName(local?.borderTheme ?? 'none')]} ${style$8.customButtonStyle} ${transparent()} ${props?.class ?? ""} `;
@@ -566,12 +572,12 @@ const Button = props => {
   })();
 };
 
-var css_248z$f = ".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 css_248z$i = ".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$f);
+styleInject(css_248z$i);
 
-var _tmpl$$k = /*#__PURE__*/template(`<div>No <!> Found`),
-  _tmpl$2$a = /*#__PURE__*/template(`<div>No Elements Found`),
+var _tmpl$$n = /*#__PURE__*/template(`<div>No <!> Found`),
+  _tmpl$2$c = /*#__PURE__*/template(`<div>No Elements Found`),
   _tmpl$3$4 = /*#__PURE__*/template(`<div>`),
   _tmpl$4$2 = /*#__PURE__*/template(`<div><div><div></div></div><div>`);
 const carouselTitleContext = createContext(createSignal([]));
@@ -643,13 +649,13 @@ const Carousel = ({
       }
     }
     return props.notFoundName ? (() => {
-      var _el$ = _tmpl$$k(),
+      var _el$ = _tmpl$$n(),
         _el$2 = _el$.firstChild,
         _el$4 = _el$2.nextSibling;
         _el$4.nextSibling;
       insert(_el$, () => props.notFoundName, _el$4);
       return _el$;
-    })() : _tmpl$2$a();
+    })() : _tmpl$2$c();
   });
   // ----- Functions -----
   const nextSlide = () => {
@@ -749,12 +755,12 @@ const Slide = props => {
   return createMemo(() => props.children);
 };
 
-var css_248z$e = ".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 css_248z$h = ".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$e);
+styleInject(css_248z$h);
 
-var _tmpl$$j = /*#__PURE__*/template(`<span>`),
-  _tmpl$2$9 = /*#__PURE__*/template(`<span>:`),
+var _tmpl$$m = /*#__PURE__*/template(`<span>`),
+  _tmpl$2$b = /*#__PURE__*/template(`<span>:`),
   _tmpl$3$3 = /*#__PURE__*/template(`<span><span>`);
 const Chip = props => {
   const hoverChip = props.onClick ? `${style$6.hover}` : "";
@@ -768,10 +774,10 @@ const Chip = props => {
       },
       get children() {
         return [(() => {
-          var _el$2 = _tmpl$$j();
+          var _el$2 = _tmpl$$m();
           insert(_el$2, () => props.key);
           return _el$2;
-        })(), _tmpl$2$9()];
+        })(), _tmpl$2$b()];
       }
     }), _el$4);
     insert(_el$4, () => ' ' + props.value);
@@ -798,12 +804,12 @@ const Chip = props => {
 };
 delegateEvents(["click"]);
 
-var css_248z$d = ".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 css_248z$g = ".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$d);
+styleInject(css_248z$g);
 
-var _tmpl$$i = /*#__PURE__*/template(`<span>`),
-  _tmpl$2$8 = /*#__PURE__*/template(`<div><div>`);
+var _tmpl$$l = /*#__PURE__*/template(`<span>`),
+  _tmpl$2$a = /*#__PURE__*/template(`<div><div>`);
 function Chipbar(props) {
   const hasSignalChips = props.chips !== undefined;
   const [chipContainer, setChipContainer] = createSignal();
@@ -857,14 +863,14 @@ function Chipbar(props) {
     setShowLeft(true);
   };
   return (() => {
-    var _el$ = _tmpl$2$8(),
+    var _el$ = _tmpl$2$a(),
       _el$3 = _el$.firstChild;
     insert(_el$, createComponent(Show, {
       get when() {
         return showLeft();
       },
       get children() {
-        var _el$2 = _tmpl$$i();
+        var _el$2 = _tmpl$$l();
         insert(_el$2, createComponent(Button, {
           onMouseDown: scrollLeft,
           children: "\u2190"
@@ -879,7 +885,7 @@ function Chipbar(props) {
         return (hasSignalChips || !hasSignalChips && props.clearAll !== undefined);
       },
       get children() {
-        var _el$4 = _tmpl$$i();
+        var _el$4 = _tmpl$$l();
         insert(_el$4, createComponent(Button, {
           onClick: () => clearAll() ,
           children: "Clear All"
@@ -923,7 +929,7 @@ function Chipbar(props) {
         return showRight();
       },
       get children() {
-        var _el$5 = _tmpl$$i();
+        var _el$5 = _tmpl$$l();
         insert(_el$5, createComponent(Button, {
           onMouseDown: scrollRight,
           children: "\u2192"
@@ -946,18 +952,18 @@ function Chipbar(props) {
   })();
 }
 
-var css_248z$c = ".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$7 = {"compBody":"body-module_compBody__d3HyU"};
-styleInject(css_248z$c);
+var css_248z$f = ".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$a = {"compBody":"body-module_compBody__d3HyU"};
+styleInject(css_248z$f);
 
-var _tmpl$$h = /*#__PURE__*/template(`<div>`);
+var _tmpl$$k = /*#__PURE__*/template(`<div>`);
 const Body = props => {
   const [customProps, normalProps] = splitProps(props, ["children", "class", 'style']);
   return (() => {
-    var _el$ = _tmpl$$h();
+    var _el$ = _tmpl$$k();
     spread(_el$, mergeProps(normalProps, {
       get ["class"]() {
-        return `${styles$7.compBody} ${customProps.class ?? ""}`;
+        return `${styles$a.compBody} ${customProps.class ?? ""}`;
       }
     }), false, true);
     insert(_el$, () => customProps.children);
@@ -1149,17 +1155,26 @@ function useClickOutside(elementRefs, callback) {
   };
   // Set up the event listener when the component mounts.
   onMount(() => {
-    document.addEventListener('click', handleClick);
+    const handleClick = event => {
+      const path = event.composedPath();
+      // If click is inside ANY ref’ed element, do nothing
+      if (elementRefs.some(ref => {
+        const el = ref();
+        return el && path.includes(el);
+      })) return;
+      callback();
+    };
+    document.addEventListener('pointerdown', handleClick); // capture phase
   });
   // Clean up the event listener when the component unmounts.
   onCleanup(() => {
-    document.removeEventListener('click', handleClick);
+    document.removeEventListener('pointerdown', handleClick);
   });
 }
 
-var css_248z$b = "@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$6 = {"input":"input-module_input__-LMoi","inFormField":"input-module_inFormField__kk-PD","transparent":"input-module_transparent__aXcGX"};
-styleInject(css_248z$b);
+var css_248z$e = "@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  transition: border 0.7s ease, padding 0.7s ease;\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  transition: padding 0.7s ease;\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$9 = {"input":"input-module_input__-LMoi","inFormField":"input-module_inFormField__kk-PD","transparent":"input-module_transparent__aXcGX"};
+styleInject(css_248z$e);
 
 const $RAW = Symbol("store-raw"),
   $NODE = Symbol("store-node"),
@@ -1375,7 +1390,7 @@ function createStore(...[store, options]) {
   return [wrappedStore, setStore];
 }
 
-var _tmpl$$g = /*#__PURE__*/template(`<form>`);
+var _tmpl$$j = /*#__PURE__*/template(`<form>`);
 const FormContext = createContext();
 const useFormContext = () => {
   return useContext(FormContext);
@@ -1411,7 +1426,7 @@ const FormInner = props => {
     formRef()?.removeEventListener('submit', submitFunction);
   });
   return (() => {
-    var _el$ = _tmpl$$g();
+    var _el$ = _tmpl$$j();
     use(setFormRef, _el$);
     insert(_el$, () => props.children);
     return _el$;
@@ -1434,59 +1449,54 @@ const Provider = props => {
   });
 };
 
-var _tmpl$$f = /*#__PURE__*/template(`<input>`);
+var _tmpl$$i = /*#__PURE__*/template(`<input>`);
 const Input = props => {
   const [customProps, normalProps] = splitProps(props, ["tooltip", "transparent", "value", "onChange"]);
-  const noTransparent = type => "checkbox" !== (type ?? "text");
   const context = useFormProvider();
   const formContext = useFormContext();
+  // Determine the input's value using form context or provided prop value
   const inputValue = createMemo(() => {
-    if (!isNullish(formContext?.data?.[context.formName ?? ''])) {
-      return formContext.data[context.formName ?? ''];
+    if (!isNullish(props?.value)) {
+      return props.value;
+    }
+    if (!isNullish(formContext?.data?.[context.formName ?? ""])) {
+      return formContext.data[context.formName ?? ""];
     }
     if (!isNullish(context.getValue)) {
       return context.getValue();
     }
     return props.value;
   });
-  const hasTrasparent = createMemo(() => {
-    return Object.keys(customProps).includes("transparent");
+  const isRequired = createMemo(() => {
+    if (context && formContext) {
+      const key = context?.formName ?? "";
+      return formContext?.formGroup?.hasValidator?.(key, 'required');
+    }
+    return Object.keys(normalProps).includes("required") && props?.required !== false || props?.required === true;
   });
+  // onChange only handles non-checkbox values
   const onChange = e => {
-    if (!isNullish(formContext?.setData)) {
-      if (props.type === "checkbox") {
-        formContext.formGroup.set(context.formName ?? '', e.currentTarget.checked ? "true" : "");
-        formContext.setData(old => ({
-          ...old,
-          [context.formName ?? '']: e.currentTarget.checked ? "true" : ""
-        }));
-      } else {
-        const textInside = !isNullish(e.currentTarget.value) && e.currentTarget.value !== '';
-        context.setTextInside(textInside);
-        formContext.formGroup.set(context.formName ?? '', e.currentTarget.value);
-        formContext.setData(old => ({
-          ...old,
-          [context.formName ?? '']: e.currentTarget.value
-        }));
-      }
-    } else if (!isNullish(context.getName)) {
+    if (!isNullish(formContext?.setData) && !!formContext?.formGroup?.get) {
+      const textInside = !isNullish(e.currentTarget.value) && e.currentTarget.value?.trim() !== "";
+      context?.setTextInside?.(textInside);
+      formContext.formGroup?.set?.(context.formName ?? "", e.currentTarget.value);
+      formContext?.setData?.(old => ({
+        ...old,
+        [context.formName ?? ""]: e.currentTarget.value
+      }));
+    } else if (!isNullish(context.getName) && !!context?.getName?.()) {
       if (e.currentTarget.value.trim()) {
-        context.setValue(e.currentTarget.value);
+        context?.setValue(e.currentTarget.value);
         context.setTextInside(true);
       } else {
-        if (props.type === "checkbox") {
-          context.setValue(e.currentTarget.checked ? "true" : "");
-          context.setTextInside(e.currentTarget.checked);
-        } else {
-          context.setValue("");
-          context.setTextInside(false);
-        }
+        context.setValue("");
+        context.setTextInside(false);
       }
     }
     if (props.onChange) props.onChange(e);
   };
   createEffect(() => {
-    if (Object.keys(props).includes("required") || props?.required === true) {
+    if (isRequired()) {
       context?.setName?.(old => `${old} *`);
     } else {
       context?.setName?.(old => old);
@@ -1494,9 +1504,10 @@ const Input = props => {
   });
   onMount(() => {
     if (!isNullish(context.getName)) {
-      context.setFieldType(props.type ?? "text");
+      // Force a non-checkbox field type
+      context.setFieldType(props.type === "checkbox" ? "text" : props.type ?? "text");
       if (!isNullish(formContext?.data)) {
-        const formValue = formContext.data[context.formName ?? ''];
+        const formValue = formContext.data[context.formName ?? ""]?.trim();
         if (formValue) {
           context.setValue(formValue);
           context.setTextInside(true);
@@ -1504,22 +1515,25 @@ const Input = props => {
       }
     }
   });
-  const placeholder = createMemo(() => {
-    if (!context?.getTextInside?.() && !context?.getFocused?.()) {
-      return context?.getName?.() ?? props?.placeholder ?? "";
+  const placeholder = () => {
+    const reqText = isRequired() ? " *" : "";
+    if (context?.getTextInside?.() && !context?.getFocused?.()) {
+      return (context?.getName?.() ?? props?.placeholder ?? "") + reqText;
     }
-    return props.placeholder;
-  });
+    if (props?.placeholder) {
+      return props.placeholder + reqText;
+    }
+    return "";
+  };
   createEffect(() => {
-    const hasInputValue = isNullish(inputValue()) || inputValue() === '';
-    if (!isNullish(context) && !hasInputValue !== context?.getTextInside?.()) {
-      context?.getTextInside?.();
+    const hasInputValue = isNullish(inputValue()) || inputValue() === "";
+    if (!isNullish(context) && hasInputValue !== context?.getTextInside?.()) {
       context?.getFocused?.();
       context?.setTextInside?.(!hasInputValue);
     }
   });
   return (() => {
-    var _el$ = _tmpl$$f();
+    var _el$ = _tmpl$$i();
     spread(_el$, mergeProps(normalProps, {
       get placeholder() {
         return placeholder();
@@ -1527,7 +1541,7 @@ const Input = props => {
       get value() {
         return inputValue();
       },
-      "onFocus": e => {
+      "onFocus": () => {
         if (!isNullish(context.getName)) {
           context.setFocused?.(true);
         }
@@ -1536,22 +1550,22 @@ const Input = props => {
         if (!isNullish(context.getName)) {
           context?.setFocused?.(prev => {
             if (prev) {
-              formContext?.formGroup?.validate?.(context?.formName ?? '');
+              formContext?.formGroup?.validate?.(context?.formName ?? "");
             }
             return false;
           });
           const noValue = !e.currentTarget?.value?.trim();
-          const noFormValue = !formContext?.data?.[context?.formName ?? ''];
+          const noFormValue = !formContext?.data?.[context?.formName ?? ""];
           const noContextValue = !context?.getValue();
-          context.setTextInside(!(noValue && noFormValue && noContextValue));
+          context.setTextInside(noValue && noFormValue && noContextValue);
         }
       },
       get type() {
-        return createMemo(() => context?.getFieldType?.().length > 0)() ? context?.getFieldType?.() : props.type;
+        return props.type === "checkbox" ? "text" : props.type ?? "text";
       },
       "onChange": onChange,
       get ["class"]() {
-        return `${styles$6.input} ${hasTrasparent() && noTransparent(normalProps.type) ? styles$6?.transparent : ""} ${!!context?.getName?.() ? styles$6?.inFormField : ''} ${props?.class ?? ""}`;
+        return `${styles$9.input} ${customProps.transparent ? styles$9.transparent : ""} ${!!context?.getName?.() ? styles$9.inFormField : ""} ${props?.class ?? ""}`;
       },
       get title() {
         return customProps.tooltip;
@@ -1561,16 +1575,163 @@ const Input = props => {
   })();
 };
 
-var css_248z$a = ".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$5 = {"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$a);
+var css_248z$d = ".checkbox-module_checkbox__LzFLC {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  width: -moz-fit-content;\n  width: fit-content;\n}\n\n.checkbox-module_checkbox--disabled__5PdL7 {\n  cursor: not-allowed;\n}\n\n.checkbox-module_checkbox__input__pTELL {\n  position: absolute;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.checkbox-module_checkbox__checkmark__0kdFq {\n  position: relative;\n  width: 16px;\n  height: 16px;\n  border: 2px solid #666;\n  border-radius: 4px;\n  background: transparent;\n  margin-right: 0.5em;\n  flex-shrink: 0;\n}\n\n.checkbox-module_checkbox__checkmark__0kdFq:after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 5px;\n  height: 10px;\n  border: solid #fff;\n  border-width: 0 2px 2px 0;\n  transform: translate(-50%, -60%) rotate(45deg);\n  display: none;\n}\n\n.checkbox-module_checkbox__input__pTELL:checked + .checkbox-module_checkbox__checkmark__0kdFq {\n  background: #007bff;\n  border-color: #007bff;\n}\n\n.checkbox-module_checkbox__input__pTELL:checked + .checkbox-module_checkbox__checkmark__0kdFq:after {\n  display: block;\n}\n\n.checkbox-module_checkbox__LzFLC:hover .checkbox-module_checkbox__checkmark__0kdFq {\n  border-color: #444;\n}\n\n.checkbox-module_checkbox__LzFLC:focus-within .checkbox-module_checkbox__checkmark__0kdFq {\n  outline: 2px solid #80bdff;\n  outline-offset: 2px;\n}\n\n.checkbox-module_checkbox__label__YXjgj {\n  vertical-align: middle;\n}\n\n.checkbox-module_checkbox--disabled__5PdL7 .checkbox-module_checkbox__checkmark__0kdFq {\n  border-color: #ccc;\n  background: transparent;\n}\n\n.checkbox-module_checkbox--disabled__5PdL7 .checkbox-module_checkbox__checkmark__0kdFq:after {\n  border-color: #ccc;\n}\n\n.checkbox-module_checkbox--disabled__5PdL7 .checkbox-module_checkbox__label__YXjgj {\n  color: #ccc;\n}";
+var styles$8 = {"checkbox":"checkbox-module_checkbox__LzFLC","checkbox--disabled":"checkbox-module_checkbox--disabled__5PdL7","checkbox__input":"checkbox-module_checkbox__input__pTELL","checkbox__checkmark":"checkbox-module_checkbox__checkmark__0kdFq","checkbox__label":"checkbox-module_checkbox__label__YXjgj"};
+styleInject(css_248z$d);
+
+var _tmpl$$h = /*#__PURE__*/template(`<label><input type=checkbox><span>`),
+  _tmpl$2$9 = /*#__PURE__*/template(`<span>`);
+function Checkbox(props) {
+  // Handle controlled vs. uncontrolled state
+  const [internalChecked, setInternalChecked] = createSignal(props.defaultChecked ?? false);
+  const checkedState = createMemo(() => props.checked !== undefined ? props.checked : internalChecked());
+  const handleChange = e => {
+    const target = e.currentTarget;
+    const newChecked = target.checked;
+    if (props.checked === undefined) {
+      setInternalChecked(newChecked);
+    }
+    props.onChange?.(newChecked);
+  };
+  return (() => {
+    var _el$ = _tmpl$$h(),
+      _el$2 = _el$.firstChild,
+      _el$3 = _el$2.nextSibling;
+    _el$2.addEventListener("change", handleChange);
+    insert(_el$, (() => {
+      var _c$ = createMemo(() => !!props.label);
+      return () => _c$() && (() => {
+        var _el$4 = _tmpl$2$9();
+        insert(_el$4, () => props.label);
+        createRenderEffect(() => className(_el$4, styles$8["checkbox__label"]));
+        return _el$4;
+      })();
+    })(), null);
+    createRenderEffect(_p$ => {
+      var _v$ = styles$8.checkbox,
+        _v$2 = {
+          [styles$8["checkbox--disabled"]]: props.disabled,
+          [styles$8["checkbox--checked"]]: checkedState()
+        },
+        _v$3 = styles$8["checkbox__input"],
+        _v$4 = props.disabled,
+        _v$5 = props.label ? undefined : props.ariaLabel,
+        _v$6 = styles$8["checkbox__checkmark"];
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _p$.t = classList(_el$, _v$2, _p$.t);
+      _v$3 !== _p$.a && className(_el$2, _p$.a = _v$3);
+      _v$4 !== _p$.o && (_el$2.disabled = _p$.o = _v$4);
+      _v$5 !== _p$.i && setAttribute(_el$2, "aria-label", _p$.i = _v$5);
+      _v$6 !== _p$.n && className(_el$3, _p$.n = _v$6);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined,
+      n: undefined
+    });
+    createRenderEffect(() => _el$2.checked = checkedState());
+    return _el$;
+  })();
+}
+
+var css_248z$c = ".selectStyles-module_solid_select__placeholder__VO5-- {\n  opacity: var(--text-emphasis-medium, 87%);\n  transition: all 0.7s ease;\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  transition: border 0.7s ease, padding 0.7s ease;\n  overflow: hidden;\n  text-overflow: ellipsis;\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  transition: all 0.3s ease;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: block;\n}\n\n.selectStyles-module_multiselect-value__UUhhP {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 100%;\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$7 = {"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","multiselect-value":"selectStyles-module_multiselect-value__UUhhP","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$c);
+
+const manager = new class WinManager {
+  data = [];
+  ignore = [];
+  get entries() {
+    return this.data;
+  }
+  get ignoreElements() {
+    return this.ignore;
+  }
+  register(entry) {
+    this.data.push(entry);
+  }
+  unregister(entry) {
+    const index = this.data.indexOf(entry);
+    if (index !== -1) {
+      this.data.splice(index, 1);
+    }
+  }
+  ignoreElement(element) {
+    this.ignore.push(element);
+  }
+  unignoreElement(element) {
+    const index = this.ignore.indexOf(element);
+    if (index !== -1) {
+      this.ignore.splice(index, 1);
+    }
+  }
+}();
+// Register an element along with its click-outside callback.
+function registerWindowManager(entry) {
+  manager.register(entry);
+}
+function getEntryAmount() {
+  return manager.entries.length;
+}
+function ignoreWindowManager(element) {
+  manager.ignoreElement(element);
+}
+// Unregister the given element.
+function unregisterWindowManager(entry) {
+  manager.unregister(entry);
+}
+// Global event handler that only lets the topmost window close.
+function handleGlobalClick(e) {
+  if (manager.entries.length === 0) return;
+  // Get the topmost (last registered) entry.
+  const topEntry = manager.entries[manager.entries.length - 1];
+  const toIgnore = manager.ignoreElements;
+  if (toIgnore.length > 0) {
+    for (const el of toIgnore) {
+      if (el.contains(e.target)) {
+        return;
+      }
+    }
+  }
+  // If the click target is not inside the top entry element, trigger its callback.
+  if (!topEntry.element.contains(e.target)) {
+    topEntry.onClickOutside(e);
+    unregisterWindowManager(topEntry);
+  }
+}
+// Attach the global event listeners in capture phase.
+if (typeof document !== 'undefined') {
+  document.addEventListener('mousedown', handleGlobalClick, true);
+  document.addEventListener('touchstart', handleGlobalClick, true);
+}
+
+const SelectContext = createContext({});
+const useSelectContext = () => {
+  const context = useContext(SelectContext);
+  if (!context) {
+    throw new Error("<Select> must be used within a <SelectContext.Provider>");
+  }
+  return context;
+};
+const SelectContextProvider = props => {
+  return createComponent(SelectContext.Provider, {
+    get value() {
+      return props.value;
+    },
+    get children() {
+      return props.children;
+    }
+  });
+};
 
-var _tmpl$$e = /*#__PURE__*/template(`<span>`),
-  _tmpl$2$7 = /*#__PURE__*/template(`<span>▲`),
+var _tmpl$$g = /*#__PURE__*/template(`<span>`),
+  _tmpl$2$8 = /*#__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();
+  _tmpl$5$1 = /*#__PURE__*/template(`<div is=coles-solid-select role=button aria-haspopup=listbox tabindex=0><div><span>`, true, false, false);
 function Select(props) {
   const isMultiple = Object.keys(props).includes("multiple") || props.multiple === true;
   const [placeholder, setPlaceholder] = createSignal(props?.placeholder ?? "Select...");
@@ -1601,13 +1762,31 @@ function Select(props) {
     }
     return selectRef();
   });
-  // Map of option value to label (JSX) for displaying selected labels
-  const optionsMap = new Map();
+  const [options, setOptions] = createStore({});
+  // Register and unregister functions using the store
   const registerOption = (val, label) => {
-    optionsMap.set(val, label);
+    const stringVal = JSON.stringify(val);
+    setOptions(store => ({
+      ...store,
+      [stringVal]: {
+        value: stringVal,
+        label
+      }
+    }));
   };
   const unregisterOption = val => {
-    optionsMap.delete(val);
+    const stringVal = JSON.stringify(val);
+    setOptions(store => {
+      const newStore = {
+        ...store
+      };
+      delete newStore[stringVal];
+      return newStore;
+    });
+  };
+  const getLabel = val => {
+    const stringVal = JSON.stringify(val);
+    return options[stringVal]?.label || String(val);
   };
   // Helper to check if a value is selected (for Option highlighting)
   const isSelected = val => {
@@ -1628,9 +1807,11 @@ function Select(props) {
       }
       setSelected(() => newSelected);
       props?.onChange?.(newSelected);
+      props?.onSelect?.(newSelected);
     } else {
       setSelected(() => val);
       props?.onChange?.(val);
+      props?.onSelect?.(val);
       setOpen(false);
     }
   };
@@ -1642,26 +1823,29 @@ function Select(props) {
       if (selectedArray.length === 0) {
         if (hasForm && form.getTextInside() && !form.getFocused()) {
           return (() => {
-            var _el$ = _tmpl$$e();
-            insert(_el$, () => form.getName() || props.placeholder || "Select...");
-            createRenderEffect(() => className(_el$, `${styles$5["solid_select__placeholder"]}`));
+            var _el$ = _tmpl$$g();
+            _el$.style.setProperty("opacity", "0");
+            createRenderEffect(() => className(_el$, `${styles$7["solid_select__placeholder"]}`));
             return _el$;
           })();
         }
         return (() => {
-          var _el$2 = _tmpl$$e();
+          var _el$2 = _tmpl$$g();
           insert(_el$2, () => props.placeholder || "Select...");
-          createRenderEffect(() => className(_el$2, `${styles$5["solid_select__placeholder"]}`));
+          createRenderEffect(() => className(_el$2, `${styles$7["solid_select__placeholder"]}`));
           return _el$2;
         })();
       }
       if (props.renderValue) {
         return props.renderValue(selectedArray);
       } else {
-        const labels = selectedArray.map(val => optionsMap.get(val) || String(val));
+        const labels = selectedArray.map(val => options[JSON.stringify(val)]?.label || String(val));
         return (() => {
-          var _el$3 = _tmpl$$e();
-          insert(_el$3, () => labels.join(", "));
+          var _el$3 = _tmpl$$g();
+          _el$3.style.setProperty("width", "100%");
+          _el$3.style.setProperty("height", "100%");
+          insert(_el$3, () => labels.join(', '));
+          createRenderEffect(() => className(_el$3, `${styles$7["solid_select__value"]} ${styles$7["multiselect-value"]}`));
           return _el$3;
         })();
       }
@@ -1671,25 +1855,24 @@ function Select(props) {
       if (isNullish(singleVal) || typeof singleVal === "string" && !!!singleVal.trim()) {
         if (hasForm && form.getTextInside() && !form.getFocused()) {
           return (() => {
-            var _el$4 = _tmpl$$e();
-            insert(_el$4, () => form.getName() || props.placeholder || "Select...");
-            createRenderEffect(() => className(_el$4, `${styles$5["solid_select__placeholder"]}`));
+            var _el$4 = _tmpl$$g();
+            createRenderEffect(() => className(_el$4, `${styles$7["solid_select__placeholder"]}`));
             return _el$4;
           })();
         }
         return (() => {
-          var _el$5 = _tmpl$$e();
+          var _el$5 = _tmpl$$g();
           insert(_el$5, () => props.placeholder || "Select...");
-          createRenderEffect(() => className(_el$5, `${styles$5["solid_select__placeholder"]}`));
+          createRenderEffect(() => className(_el$5, `${styles$7["solid_select__placeholder"]}`));
           return _el$5;
         })();
       } else if (props.renderValue) {
         return props.renderValue(singleVal);
       } else {
-        const label = optionsMap.get(singleVal) || String(singleVal);
         return (() => {
-          var _el$6 = _tmpl$$e();
-          insert(_el$6, label);
+          var _el$6 = _tmpl$$g();
+          insert(_el$6, () => getLabel(singleVal));
+          createRenderEffect(() => className(_el$6, `${styles$7["solid_select__value"]}`));
           return _el$6;
         })();
       }
@@ -1703,9 +1886,11 @@ function Select(props) {
     }
     return false;
   };
-  const selectLocation = () => {
-    if (menuLocRef()) {
-      const rect = menuLocRef().getBoundingClientRect();
+  const [menuRect, setMenuRect] = createSignal();
+  const selectLocation = createMemo(() => {
+    const select = selectRef();
+    const menuLoc = menuLocRef();
+    const getLocation = rect => {
       if (dropdownBelowScreen()) {
         return {
           x: rect.left,
@@ -1716,11 +1901,60 @@ function Select(props) {
         x: rect.left,
         y: rect.bottom
       };
+    };
+    if (hasForm || hasFormContext) {
+      if (menuLoc) {
+        const rect = menuRect() ?? menuLoc.getBoundingClientRect();
+        return getLocation(rect);
+      } else if (select) {
+        const rect = select.getBoundingClientRect();
+        return getLocation(rect);
+      }
+    } else {
+      if (select) {
+        const rect = select.getBoundingClientRect();
+        return getLocation(rect);
+      }
     }
     return {
       x: 0,
       y: 0
     };
+  });
+  const selectWidth = () => {
+    if (menuLocRef()) {
+      return menuLocRef().getBoundingClientRect().width;
+    }
+    return 0;
+  };
+  createMemo(() => {
+    const value = currentValue();
+    if (isMultiple) {
+      const selectedArray = Array.isArray(value) ? value : [];
+      if (selectedArray.length === 0) {
+        return 0;
+      }
+      const labels = selectedArray.map(val => options[JSON.stringify(val)]?.label || String(val));
+      return labels.join(", ").length * 8; // Approximate width based on character count
+    } else {
+      return selectWidth();
+    }
+  });
+  const updatePosition = () => {
+    const menuLoc = dropdownRef();
+    const select = selectRef();
+    if (menuLoc && select) {
+      const selectRect = select.getBoundingClientRect();
+      const dropdownRect = menuLoc.getBoundingClientRect();
+      let newX = selectRect.left + window.scrollX;
+      let newY = selectRect.bottom + window.scrollY;
+      if (selectRect.bottom + dropdownRect.height > window.innerHeight) {
+        newY = selectRect.top + window.scrollY - dropdownRect.height;
+      }
+      menuLoc.style.left = `${newX}px`;
+      menuLoc.style.top = `${newY}px`;
+      menuLoc.style.width = `${selectRect.width}px`;
+    }
   };
   // Update width of select to match option text width
   createEffect(() => {
@@ -1764,11 +1998,12 @@ function Select(props) {
     });
   });
   onMount(() => {
+    setMenuRect(menuLocRef()?.getBoundingClientRect());
     if (hasForm) {
       const formValue = currentValue() ?? isMultiple ? [] : undefined;
       const typedFormValue = isMultiple ? formValue : formValue;
       if (isMultiple) {
-        const isAvailableOptions = typedFormValue.every(val => optionsMap.has(val));
+        const isAvailableOptions = typedFormValue.every(val => !!options[JSON.stringify(val)]);
         if (!!formValue && formValue.length > 0 && isAvailableOptions) {
           form.setTextInside(true);
           setSelected?.(old => [...(old ?? []), ...typedFormValue]);
@@ -1777,7 +2012,7 @@ function Select(props) {
         }
       } else {
         if (typedFormValue) {
-          if (optionsMap.has(typedFormValue)) {
+          if (!!options[JSON.stringify(typedFormValue)]) {
             form.setTextInside(true);
             setSelected?.(formValue);
           } else {
@@ -1789,33 +2024,59 @@ function Select(props) {
         }
       }
     }
+    const dropdown = dropdownRef();
+    if (dropdown) {
+      ignoreWindowManager(dropdown);
+    }
+    document.addEventListener('scroll', updatePosition, true);
+    window.addEventListener('resize', updatePosition);
+    onCleanup(() => {
+      document.removeEventListener('scroll', updatePosition, true);
+      window.removeEventListener('resize', updatePosition);
+    });
   });
+  children(() => props.children);
+  const selectDropX = createMemo(() => `${selectLocation().x}px`);
+  const selectDropY = createMemo(() => `${selectLocation().y}px`);
+  const providerValue = createMemo(() => ({
+    isSelected,
+    selectValue,
+    registerOption,
+    unregisterOption,
+    selectRef,
+    selectStyle: currStyle
+  }));
   return (() => {
     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);
+      if (e.key === "ArrowDown") {
+        // Open dropdown if not open and set highlightedIndex to 0
+        if (!open()) {
+          setOpen(true);
+          // set highlightedIndex(0);
+        }
+      } else if (e.key === "ArrowUp") ; else if (e.key === "Enter") ; else if (e.key === "Escape") {
+        setOpen(false);
+      }
     };
     _el$7.addEventListener("focus", () => form?.setFocused?.(true));
     _el$7._$owner = getOwner();
     _el$8.$$click = e => {
+      const menuRect = menuLocRef()?.getBoundingClientRect();
+      setMenuRect(menuRect);
       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$2$7();
-        createRenderEffect(() => className(_el$10, styles$5['solid_select__arrow']));
+        var _el$10 = _tmpl$2$8();
+        createRenderEffect(() => className(_el$10, styles$7['solid_select__arrow']));
         return _el$10;
       }
     }), null);
@@ -1825,18 +2086,13 @@ function Select(props) {
       },
       get children() {
         var _el$11 = _tmpl$3$2();
-        createRenderEffect(() => className(_el$11, styles$5['solid_select__arrow']));
+        createRenderEffect(() => className(_el$11, styles$7['solid_select__arrow']));
         return _el$11;
       }
     }), null);
-    insert(_el$7, createComponent(SelectContext.Provider, {
-      value: {
-        isSelected,
-        selectValue,
-        registerOption,
-        unregisterOption,
-        selectRef,
-        selectStyle: currStyle
+    insert(_el$7, createComponent(SelectContextProvider, {
+      get value() {
+        return providerValue();
       },
       get children() {
         return createComponent(Portal, {
@@ -1845,9 +2101,9 @@ function Select(props) {
             use(setDropdownRef, _el$12);
             insert(_el$12, () => props.children);
             createRenderEffect(_p$ => {
-              var _v$ = `${styles$5['solid_select__dropdown']} ${dropdownBelowScreen() ? styles$5.dropTop : styles$5.dropBottom} ${open() ? styles$5.open : ''} ${props.dropdownClass || ""}`,
-                _v$2 = `${selectLocation().y}px`,
-                _v$3 = `${selectLocation().x}px`,
+              var _v$ = `${styles$7['solid_select__dropdown']} ${dropdownBelowScreen() ? styles$7.dropTop : styles$7.dropBottom} ${open() ? styles$7.open : ''} ${props.dropdownClass || ""}`,
+                _v$2 = selectDropY(),
+                _v$3 = selectDropX(),
                 _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"));
@@ -1867,19 +2123,21 @@ function Select(props) {
     }), null);
     createRenderEffect(_p$ => {
       var _v$5 = props.id,
-        _v$6 = `${styles$5.solid_select__control_no_form} ${styles$5[styleClassTransparent]} coles-solid-selectControl`,
-        _v$7 = props.tooltip,
-        _v$8 = `${styles$5['solid_select__control']} ${props.class || ""}`,
-        _v$9 = !hasForm ? {
+        _v$6 = `${styles$7.solid_select__control_no_form} ${styles$7[styleClassTransparent]} coles-solid-selectControl`,
+        _v$7 = open(),
+        _v$8 = props.tooltip,
+        _v$9 = `${styles$7['solid_select__control']} ${props.class || ""}`,
+        _v$10 = !hasForm ? {
           height: '48px'
         } : {},
-        _v$10 = styles$5['solid_select__value'];
+        _v$11 = styles$7['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 && (_el$7.title = _p$.a = _v$7);
-      _v$8 !== _p$.o && className(_el$8, _p$.o = _v$8);
-      _p$.i = style$9(_el$8, _v$9, _p$.i);
-      _v$10 !== _p$.n && className(_el$9, _p$.n = _v$10);
+      _v$7 !== _p$.a && (_el$7.ariaExpanded = _p$.a = _v$7);
+      _v$8 !== _p$.o && (_el$7.title = _p$.o = _v$8);
+      _v$9 !== _p$.i && className(_el$8, _p$.i = _v$9);
+      _p$.n = style$9(_el$8, _v$10, _p$.n);
+      _v$11 !== _p$.s && className(_el$9, _p$.s = _v$11);
       return _p$;
     }, {
       e: undefined,
@@ -1887,22 +2145,22 @@ function Select(props) {
       a: undefined,
       o: undefined,
       i: undefined,
-      n: undefined
+      n: undefined,
+      s: undefined
     });
     return _el$7;
   })();
 }
 delegateEvents(["keydown", "click"]);
 
-var _tmpl$$d = /*#__PURE__*/template(`<div><span></span><span is=coles-select-label>`, true, false, false);
+var _tmpl$$f = /*#__PURE__*/template(`<div role=option><span></span><span is=coles-select-label>`, true, false, false);
 function Option(props) {
-  const select = useContext(SelectContext);
-  if (!select) {
-    throw new Error("<Option> must be used within a <Select>");
-  }
   const formField = useFormProvider();
   const formContext = useFormContext();
-  onMount(() => select.registerOption?.(props.value, props.children));
+  const select = useSelectContext();
+  onMount(() => {
+    select.registerOption?.(props.value, props.children);
+  });
   onCleanup(() => select.unregisterOption?.(props.value));
   const selectFormFieldValue = value => {
     if (!!formField?.getName?.()) {
@@ -1963,211 +2221,48 @@ function Option(props) {
     const contextSuccess = selectFormContextValue(props.value);
     !contextSuccess ? selectFormFieldValue(props.value) : true;
     if (!formField?.getName?.()) {
+      console.log('selected!', props.value, select);
       select.selectValue?.(props.value);
       formField?.setFocused?.(true);
     }
   };
   return (() => {
-    var _el$ = _tmpl$$d(),
+    var _el$ = _tmpl$$f(),
       _el$2 = _el$.firstChild,
       _el$3 = _el$2.nextSibling;
     _el$.$$click = handleClick;
-    insert(_el$2, () => select.isSelected(props.value) ? "✓" : "");
+    insert(_el$2, () => select?.isSelected?.(props.value) ?? false ? "✓" : "");
     _el$3._$owner = getOwner();
     insert(_el$3, () => props.children ?? "");
     createRenderEffect(_p$ => {
-      var _v$ = `${styles$5['solid_select__option']} ${props.class || ""}`,
-        _v$2 = !!select.isSelected(props.value),
-        _v$3 = `${styles$5['checkmark']}`,
-        _v$4 = `${styles$5['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);
-      _v$4 !== _p$.o && className(_el$3, _p$.o = _v$4);
+      var _v$ = select?.isSelected?.(props.value) ?? false,
+        _v$2 = `${styles$7['solid_select__option']} ${props.class || ""}`,
+        _v$3 = !!(select?.isSelected?.(props.value) ?? false),
+        _v$4 = `${styles$7['checkmark']}`,
+        _v$5 = `${styles$7['option-label']}`;
+      _v$ !== _p$.e && setAttribute(_el$, "aria-selected", _p$.e = _v$);
+      _v$2 !== _p$.t && className(_el$, _p$.t = _v$2);
+      _v$3 !== _p$.a && _el$.classList.toggle("selected", _p$.a = _v$3);
+      _v$4 !== _p$.o && className(_el$2, _p$.o = _v$4);
+      _v$5 !== _p$.i && className(_el$3, _p$.i = _v$5);
       return _p$;
     }, {
       e: undefined,
       t: undefined,
       a: undefined,
-      o: undefined
+      o: undefined,
+      i: undefined
     });
     return _el$;
   })();
 }
 delegateEvents(["click"]);
 
-var css_248z$9 = ".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$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$9);
-
-var _tmpl$$c = /*#__PURE__*/template(`<div>`),
-  _tmpl$2$6 = /*#__PURE__*/template(`<div><span>`);
-const [snackbars, setSnackbars] = createSignal([]);
-const addSnackbar = snack => {
-  setSnackbars(old => [...old, snack]);
-};
-const removeSnackbar = index => {
-  setSnackbars(old => old.filter((_, i) => i !== index));
-};
-const SnackbarController = () => {
-  return createComponent(Show, {
-    get when() {
-      return snackbars().length > 0;
-    },
-    get children() {
-      var _el$ = _tmpl$$c();
-      insert(_el$, createComponent(For, {
-        get each() {
-          return snackbars();
-        },
-        children: (snack, index) => createComponent(Snackbar, mergeProps(snack, {
-          get index() {
-            return index();
-          },
-          onClose: () => removeSnackbar(index())
-        }))
-      }));
-      createRenderEffect(() => className(_el$, style$4.snackContainer));
-      return _el$;
-    }
-  });
-};
-const Snackbar = props => {
-  const [isOpen, setIsOpen] = createSignal(true);
-  if (props.closeTimeout) setTimeout(() => props.onClose(), props.closeTimeout);
-  if (!props.closeTimeout) setTimeout(() => props.onClose(), 5000);
-  const messageLength = Math.floor(props.message.length / 17);
-  return createComponent(Portal, {
-    get mount() {
-      return document.body;
-    },
-    get children() {
-      return createComponent(Show, {
-        get when() {
-          return isOpen();
-        },
-        get children() {
-          var _el$2 = _tmpl$2$6(),
-            _el$3 = _el$2.firstChild;
-          insert(_el$3, () => props.message);
-          insert(_el$2, createComponent(Button, {
-            get onClick() {
-              return props.onClose;
-            },
-            children: "X"
-          }), 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$ !== _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$;
-          }, {
-            e: undefined,
-            t: undefined
-          });
-          return _el$2;
-        }
-      });
-    }
-  });
-};
-
-var css_248z$8 = ".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$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"};
-styleInject(css_248z$8);
-
-var _tmpl$$b = /*#__PURE__*/template(`<b>X`),
-  _tmpl$2$5 = /*#__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();
-  // 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 isShown();
-    },
-    get children() {
-      return createComponent(Portal, {
-        get children() {
-          var _el$ = _tmpl$2$5(),
-            _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");
-          insert(_el$3, () => props.title ?? "Modal");
-          insert(_el$4, createComponent(Button, {
-            transparent: true,
-            onClick: () => props.show[1](old => !old),
-            get children() {
-              return _tmpl$$b();
-            }
-          }));
-          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["primary"]} ${style$3.wrapper} ${style$3.popup}`,
-              _v$4 = style$3.header,
-              _v$5 = style$3.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);
-            _v$4 !== _p$.o && className(_el$2, _p$.o = _v$4);
-            _v$5 !== _p$.i && className(_el$6, _p$.i = _v$5);
-            return _p$;
-          }, {
-            e: undefined,
-            t: undefined,
-            a: undefined,
-            o: undefined,
-            i: undefined
-          });
-          return _el$;
-        }
-      });
-    }
-  });
-};
-
-var css_248z$7 = ".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$2 = {"areaStyle":"TextArea-module_areaStyle__AshKi"};
-styleInject(css_248z$7);
+var css_248z$b = ".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$4 = {"areaStyle":"TextArea-module_areaStyle__AshKi"};
+styleInject(css_248z$b);
 
-var _tmpl$$a = /*#__PURE__*/template(`<textarea>`);
+var _tmpl$$e = /*#__PURE__*/template(`<textarea>`);
 const TextArea = props => {
   let myElement;
   const [customProps, normalProps] = splitProps(props, ["minSize", "text", "setText", "class", "tooltip", "transparent"]);
@@ -2202,7 +2297,7 @@ const TextArea = props => {
     }
   });
   return (() => {
-    var _el$ = _tmpl$$a();
+    var _el$ = _tmpl$$e();
     use(el => {
       myElement = el;
       OnInput();
@@ -2219,10 +2314,10 @@ const TextArea = props => {
         }
       },
       get placeholder() {
-        return createMemo(() => !!(!!context.getName && context.getTextInside() && !context.getFocused()))() ? context.getName() : props.placeholder;
+        return !!context.getName && context.getTextInside() && !context.getFocused() ? "" : props.placeholder;
       },
       get ["class"]() {
-        return `${style$2.areaStyle} ${customProps.class ?? ""} ${customProps.transparent ? customProps.transparent : ""}`;
+        return `${style$4.areaStyle} ${customProps.class ?? ""} ${customProps.transparent ? customProps.transparent : ""}`;
       },
       get value() {
         return customProps.text();
@@ -2246,26 +2341,137 @@ const TextArea = props => {
   })();
 };
 
-var css_248z$6 = ".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$1 = {"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$6);
+var css_248z$a = ".popup-module_popup__5A6Ji {\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: 1001;\n  text-align: center;\n}\n@media (min-width: 768px) {\n  .popup-module_popup__5A6Ji {\n    transform: translate(-50%, -50%);\n  }\n}\n@media (max-width: 768px) {\n  .popup-module_popup__5A6Ji {\n    top: 0;\n    left: 0;\n    transform: translate(5%, 0%);\n  }\n}\n\n.popup-module_wrapper__iyFpP {\n  padding: 0px;\n  overflow-y: hidden;\n  padding-bottom: 5px;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n}\n\n.popup-module_header__-CekS {\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  overflow-y: hidden;\n  padding: 5px;\n  min-height: 2em;\n}\n.popup-module_header__-CekS button {\n  background-color: var(--subheader-background-color, #388E3C);\n  color: var(--subheader-on-background-color, #fff);\n}\n.popup-module_header__-CekS 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__-CekS 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__-CekS span button:hover {\n  cursor: pointer;\n}\n\n.popup-module_body__IhaZc {\n  flex-basis: auto;\n  overflow-y: auto;\n  flex-grow: 1;\n  justify-self: flex-end;\n}\n\n.popup-module_tertiary__RM-hn, .popup-module_accent__cBwGV, .popup-module_primary__Q9k96 {\n  background-color: var(--surface-color, #EEEEEE);\n  color: var(--on-surface-color, #000000);\n}\n\n.popup-module_backdrop__o8l1M {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  background-color: rgba(0, 0, 0, 0.4); /* dark overlay */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000; /* sit beneath your modal */\n}";
+var style$3 = {"popup":"popup-module_popup__5A6Ji","wrapper":"popup-module_wrapper__iyFpP","header":"popup-module_header__-CekS","body":"popup-module_body__IhaZc","primary":"popup-module_primary__Q9k96","backdrop":"popup-module_backdrop__o8l1M"};
+styleInject(css_248z$a);
 
-var _tmpl$$9 = /*#__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$4 = /*#__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$$9();
-    spread(_el$, mergeProps(props, {
-      "viewBox": "0 0 46 44",
-      "fill": "none",
-      "xmlns": "http://www.w3.org/2000/svg"
-    }), true, true);
-    return _el$;
-  })();
-};
+var _tmpl$$d = /*#__PURE__*/template(`<b>X`),
+  _tmpl$2$7 = /*#__PURE__*/template(`<div><div><div><h2></h2><span></span></div><div>`);
+const Modal = props => {
+  const defaultX = createMemo(() => props.translate?.x ?? "-50%");
+  const defaultY = createMemo(() => props.translate?.y ?? "-50%");
+  const isShown = createMemo(() => props.show[0]());
+  const [innerPopup, setInnerPopup] = createSignal();
+  // const [ignoreClicks, setIgnoreClicks] = createSignal(true);
+  createEffect(() => {
+    const entry = {
+      element: innerPopup(),
+      onClickOutside: e => {
+        props.show[1](false);
+      }
+    };
+    if (isShown()) {
+      setTimeout(() => {
+        registerWindowManager(entry);
+      }, 250);
+    } else {
+      unregisterWindowManager(entry);
+    }
+  });
+  const widthStyle = createMemo(() => {
+    if (props.width) {
+      return props.width;
+    }
+    if (isMobile()) {
+      return "90vw";
+    }
+    return "45vw";
+  });
+  const heightStyle = createMemo(() => {
+    if (props.height) {
+      return props.height;
+    }
+    if (isMobile()) {
+      return "95vh";
+    }
+    return "60vh";
+  });
+  const shouldTranslate = createMemo(() => {
+    if (props.translate?.x || props.translate?.y) {
+      return `translate(${defaultX()}, ${defaultY()})`;
+    } else {
+      return "";
+    }
+  });
+  return createComponent(Show, {
+    get when() {
+      return isShown();
+    },
+    get children() {
+      return createComponent(Portal, {
+        get children() {
+          var _el$ = _tmpl$2$7(),
+            _el$2 = _el$.firstChild,
+            _el$3 = _el$2.firstChild,
+            _el$4 = _el$3.firstChild,
+            _el$5 = _el$4.nextSibling,
+            _el$7 = _el$3.nextSibling;
+          use(el => {
+            setInnerPopup(el);
+            // @ts-ignore
+            props?.ref?.(el);
+          }, _el$2);
+          insert(_el$4, () => props.title ?? "Modal");
+          insert(_el$5, createComponent(Button, {
+            transparent: true,
+            onClick: () => props.show[1](false),
+            get children() {
+              return _tmpl$$d();
+            }
+          }));
+          insert(_el$7, () => props.children);
+          createRenderEffect(_p$ => {
+            var _v$ = style$3.backdrop,
+              _v$2 = widthStyle(),
+              _v$3 = heightStyle(),
+              _v$4 = shouldTranslate(),
+              _v$5 = `${style$3["primary"]} ${style$3.wrapper} ${style$3.popup}`,
+              _v$6 = style$3.header,
+              _v$7 = style$3.body;
+            _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+            _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$2.style.setProperty("width", _v$2) : _el$2.style.removeProperty("width"));
+            _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$2.style.setProperty("height", _v$3) : _el$2.style.removeProperty("height"));
+            _v$4 !== _p$.o && ((_p$.o = _v$4) != null ? _el$2.style.setProperty("transform", _v$4) : _el$2.style.removeProperty("transform"));
+            _v$5 !== _p$.i && className(_el$2, _p$.i = _v$5);
+            _v$6 !== _p$.n && className(_el$3, _p$.n = _v$6);
+            _v$7 !== _p$.s && className(_el$7, _p$.s = _v$7);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined,
+            a: undefined,
+            o: undefined,
+            i: undefined,
+            n: undefined,
+            s: undefined
+          });
+          return _el$;
+        }
+      });
+    }
+  });
+};
+
+var css_248z$9 = ".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$2 = {"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$9);
+
+var _tmpl$$c = /*#__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$6 = /*#__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$$c();
+    spread(_el$, mergeProps(props, {
+      "viewBox": "0 0 46 44",
+      "fill": "none",
+      "xmlns": "http://www.w3.org/2000/svg"
+    }), true, true);
+    return _el$;
+  })();
+};
 const DownArrow = props => {
   return (() => {
-    var _el$2 = _tmpl$2$4();
+    var _el$2 = _tmpl$2$6();
     spread(_el$2, mergeProps(props, {
       "viewBox": "0 0 44 43",
       "fill": "none",
@@ -2275,17 +2481,17 @@ const DownArrow = props => {
   })();
 };
 
-var _tmpl$$8 = /*#__PURE__*/template(`<div><div><span></span></div><div>`);
+var _tmpl$$b = /*#__PURE__*/template(`<div><div><span></span></div><div>`);
 const ExpansionPanel = props => {
   const [open, setOpen] = createSignal(!!props.startOpen);
   return (() => {
-    var _el$ = _tmpl$$8(),
+    var _el$ = _tmpl$$b(),
       _el$2 = _el$.firstChild,
       _el$3 = _el$2.firstChild,
       _el$4 = _el$2.nextSibling;
     spread(_el$, mergeProps(props, {
       get ["class"]() {
-        return `${style$1.totalPanel}`;
+        return `${style$2.totalPanel}`;
       }
     }), false, true);
     _el$3.style.setProperty("width", "min-content");
@@ -2303,7 +2509,7 @@ const ExpansionPanel = props => {
         props.extraLogic ? props.extraLogic() : null;
       },
       get ["class"]() {
-        return `${style$1.hover}`;
+        return `${style$2.hover}`;
       },
       get children() {
         return [createComponent(Show, {
@@ -2347,8 +2553,8 @@ const ExpansionPanel = props => {
     }), null);
     insert(_el$4, () => props.children[1]);
     createRenderEffect(_p$ => {
-      var _v$ = `${style$1['accent']} ${style$1.header} ${open() ? style$1.opened : style$1.closed}`,
-        _v$2 = `${style$1['accent']} ${style$1.body} ${open() ? style$1.open : ''}`;
+      var _v$ = `${style$2['accent']} ${style$2.header} ${open() ? style$2.opened : style$2.closed}`,
+        _v$2 = `${style$2['accent']} ${style$2.body} ${open() ? style$2.open : ''}`;
       _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
       _v$2 !== _p$.t && className(_el$4, _p$.t = _v$2);
       return _p$;
@@ -2360,110 +2566,95 @@ const ExpansionPanel = props => {
   })();
 };
 
-var css_248z$5 = ".icon-module_icon__K4BP- {\n  outline: none !important;\n  border: none !important;\n}\n.icon-module_icon__K4BP-:focus {\n  outline: none !important;\n  border: none !important;\n}\n.icon-module_icon__K4BP-:active {\n  outline: none !important;\n  border: none !important;\n}";
-var styles$4 = {"icon":"icon-module_icon__K4BP-"};
-styleInject(css_248z$5);
+var css_248z$8 = ".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$1 = {"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$8);
 
-var _tmpl$$7 = /*#__PURE__*/template(`<img tabindex=-1>`);
-const defaultSizeMap = {
-  small: 16,
-  medium: 24,
-  large: 32
+var _tmpl$$a = /*#__PURE__*/template(`<div>`),
+  _tmpl$2$5 = /*#__PURE__*/template(`<div><span>`);
+const [snackbars, setSnackbars] = createSignal([]);
+const addSnackbar = snack => {
+  setSnackbars(old => [...old, snack]);
 };
-const weightMapping = {
-  thin: "300",
-  regular: "400",
-  bold: "400" // Using "400" for both regular and bold in this implementation.
+const removeSnackbar = index => {
+  setSnackbars(old => old.filter((_, i) => i !== index));
 };
-const Icon = props => {
-  // Signal to hold the dynamically loaded icon component.
-  const [IconSvg, setIconSvg] = createSignal();
-  // Resolve size in pixels.
-  const sizePx = typeof props.size === "number" ? props.size : defaultSizeMap[props.size || "medium"];
-  // Default color.
-  const color = props.color || "currentColor";
-  // Map weight prop to a string representing the SVG package folder.
-  weightMapping[props.weight || "regular"];
-  // Set variant (outlined by default).
-  const variant = props.variant || "outlined";
-  // Add "-fill" to the filename if filled is true.
-  const filledSuffix = props.filled ? `${props.name}-fill` : `${props.name}`;
-  // @ts-ignore
-  const outlinedIcons = import.meta.glob('/node_modules/@material-symbols/svg-400/outlined/*.svg');
-  // @ts-ignore
-  const roundedIcons = import.meta.glob('/node_modules/@material-symbols/svg-400/rounded/*.svg');
-  // @ts-ignore
-  const sharpIcons = import.meta.glob('/node_modules/@material-symbols/svg-400/sharp/*.svg');
-  const icons = path => {
-    switch (variant) {
-      case "outlined":
-        return outlinedIcons[path];
-      case "rounded":
-        return roundedIcons[path];
-      case "sharp":
-        return sharpIcons[path];
-      default:
-        return outlinedIcons[path];
+const SnackbarController = () => {
+  return createComponent(Show, {
+    get when() {
+      return snackbars().length > 0;
+    },
+    get children() {
+      var _el$ = _tmpl$$a();
+      insert(_el$, createComponent(For, {
+        get each() {
+          return snackbars();
+        },
+        children: (snack, index) => createComponent(Snackbar, mergeProps(snack, {
+          get index() {
+            return index();
+          },
+          onClose: () => removeSnackbar(index())
+        }))
+      }));
+      createRenderEffect(() => className(_el$, style$1.snackContainer));
+      return _el$;
     }
-  };
-  createEffect(() => {
-    // Build the relative path based on props:
-    const iconPath = `/node_modules/@material-symbols/svg-400/${variant}/${filledSuffix}.svg`;
-    if (icons(iconPath)) {
-      icons(iconPath)().then(mod => {
-        setIconSvg(() => mod.default);
-      }).catch(err => {
-        console.error(`Failed to load icon: ${iconPath}`, err);
+  });
+};
+const Snackbar = props => {
+  const [isOpen, setIsOpen] = createSignal(true);
+  if (props.closeTimeout) setTimeout(() => props.onClose(), props.closeTimeout);
+  if (!props.closeTimeout) setTimeout(() => props.onClose(), 5000);
+  const messageLength = Math.floor(props.message.length / 17);
+  return createComponent(Portal, {
+    get mount() {
+      return document.body;
+    },
+    get children() {
+      return createComponent(Show, {
+        get when() {
+          return isOpen();
+        },
+        get children() {
+          var _el$2 = _tmpl$2$5(),
+            _el$3 = _el$2.firstChild;
+          insert(_el$3, () => props.message);
+          insert(_el$2, createComponent(Button, {
+            get onClick() {
+              return props.onClose;
+            },
+            children: "X"
+          }), null);
+          createRenderEffect(_p$ => {
+            var _v$ = `${10 + props.index * (50 + messageLength * 8)}px`,
+              _v$2 = `${style$1.primary} ${style$1.snack} ${style$1[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$;
+          }, {
+            e: undefined,
+            t: undefined
+          });
+          return _el$2;
+        }
       });
-    } else {
-      console.error(`Icon not found: ${iconPath}`);
     }
   });
-  return (() => {
-    var _el$ = _tmpl$$7();
-    addEventListener(_el$, "click", props.onClick, true);
-    _el$.$$pointerdown = e => {
-      e.stopPropagation();
-      e.preventDefault();
-    };
-    `${sizePx}px` != null ? _el$.style.setProperty("width", `${sizePx}px`) : _el$.style.removeProperty("width");
-    `${sizePx}px` != null ? _el$.style.setProperty("height", `${sizePx}px`) : _el$.style.removeProperty("height");
-    color != null ? _el$.style.setProperty("color", color) : _el$.style.removeProperty("color");
-    _el$.style.setProperty("display", "block");
-    _el$.style.setProperty("pointer-events", "none");
-    _el$.style.setProperty("outline-color", "transparent");
-    _el$.style.setProperty("border-block-color", "transparent");
-    _el$.style.setProperty("border-inline-color", "transparent");
-    createRenderEffect(_p$ => {
-      var _v$ = styles$4.icon,
-        _v$2 = IconSvg(),
-        _v$3 = props.ariaLabel || "";
-      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-      _v$2 !== _p$.t && setAttribute(_el$, "src", _p$.t = _v$2);
-      _v$3 !== _p$.a && setAttribute(_el$, "alt", _p$.a = _v$3);
-      return _p$;
-    }, {
-      e: undefined,
-      t: undefined,
-      a: undefined
-    });
-    return _el$;
-  })();
 };
-delegateEvents(["pointerdown", "click"]);
 
-var css_248z$4 = ".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$3 = {"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$4);
+var css_248z$7 = ".container-module_primary__EvZuR {\n  background-color: var(--primary-color, #4CAF50);\n  color: var(--on-primary-color, #fff);\n  fill: 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  fill: 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  fill: 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  fill: 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  fill: 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  fill: 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  fill: 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  fill: 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  fill: 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  fill: var(--header-on-background-color, #fff);\n  height: 50px;\n}\n.container-module_header__2SLww a {\n  color: var(--header-on-background-color, #fff);\n}\n\n.container-module_subheader__Y2LUC {\n  background-color: var(--subheader-background-color, #388E3C);\n  color: var(--subheader-on-background-color, #fff);\n  fill: var(--subheader-on-background-color, #fff);\n  height: 38px;\n}";
+var styles$6 = {"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$7);
 
-var _tmpl$$6 = /*#__PURE__*/template(`<div>`);
+var _tmpl$$9 = /*#__PURE__*/template(`<div>`);
 const Container = props => {
   const [local, other] = splitProps(props, ["children", "class", "theme"]);
   return (() => {
-    var _el$ = _tmpl$$6();
+    var _el$ = _tmpl$$9();
     spread(_el$, mergeProps(other, {
       get ["class"]() {
-        return `${styles$3[local.theme]} ${local.class}`;
+        return `${styles$6[local.theme]} ${local.class}`;
       }
     }), false, true);
     insert(_el$, () => local.children);
@@ -2471,35 +2662,141 @@ const Container = props => {
   })();
 };
 
-var css_248z$3 = ".menu-module_menu__UDlDL {\n  background-color: var(--header-background-color, #2E7D32);\n  color: var(--header-on-background-color, #fff);\n  padding: 1px;\n  margin: 0px;\n  width: 100px;\n  border-radius: 8px;\n  transform-origin: top;\n  max-height: 0;\n  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;\n  opacity: 0;\n  display: none;\n}\n\n.menu-module_open__TpFnL {\n  max-height: 800px !important;\n  opacity: 1 !important;\n  display: block;\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_listHeader__Hv-1- {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding-left: 4px;\n}\n\n.menu-module_menuDropdown__uQA25 button:focus, .menu-module_menuDropdown__uQA25 button:active, .menu-module_menuDropdown__uQA25 button:focus-within, .menu-module_menuDropdown__uQA25 button:focus-visible {\n  outline: none !important;\n  border: none !important;\n  box-shadow: none !important;\n  -webkit-tap-highlight-color: transparent !important;\n}\n.menu-module_menuDropdown__uQA25 button::-moz-focus-inner {\n  border: 0;\n}\n\n.menu-module_droplist__-e059 {\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n  padding: 1px;\n  margin: 0px;\n  width: 98%;\n  border-radius: 8px;\n  transform-origin: top;\n  max-height: 0;\n  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;\n  opacity: 0;\n}\n\n.menu-module_openDropList__pYIA- {\n  max-height: 800px !important;\n  opacity: 1 !important;\n}\n\n.menu-module_icon__nvdCD {\n  outline: none !important;\n  border: none !important;\n  box-shadow: none !important;\n  -webkit-tap-highlight-color: transparent !important;\n}\n.menu-module_icon__nvdCD:focus, .menu-module_icon__nvdCD:active, .menu-module_icon__nvdCD:focus-within, .menu-module_icon__nvdCD:focus-visible {\n  outline: none !important;\n  border: none !important;\n  box-shadow: none !important;\n  -webkit-tap-highlight-color: transparent !important;\n}\n.menu-module_icon__nvdCD::-moz-focus-inner {\n  border: 0;\n}\n\n.menu-module_header__xWzbR {\n  flex-grow: 1;\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$2 = {"menu":"menu-module_menu__UDlDL","open":"menu-module_open__TpFnL","list":"menu-module_list__WPlII","listHeader":"menu-module_listHeader__Hv-1-","menuDropdown":"menu-module_menuDropdown__uQA25","droplist":"menu-module_droplist__-e059","header":"menu-module_header__xWzbR","menuItem":"menu-module_menuItem__oXBNs"};
-styleInject(css_248z$3);
+var css_248z$6 = ".icon-module_icon__K4BP- {\n  outline: none !important;\n  border: none !important;\n}\n.icon-module_icon__K4BP-:focus {\n  outline: none !important;\n  border: none !important;\n}\n.icon-module_icon__K4BP-:active {\n  outline: none !important;\n  border: none !important;\n}";
+var styles$5 = {"icon":"icon-module_icon__K4BP-"};
+styleInject(css_248z$6);
+
+var _tmpl$$8 = /*#__PURE__*/template(`<div>`);
+// @ts-ignore
+const icons = import.meta.glob('/node_modules/@material-symbols/svg-400/**/*.svg', {
+  query: '?raw',
+  import: 'default'
+});
+const Icon = props => {
+  const [svg, setSvg] = createSignal("");
+  const sizeMap = {
+    small: 16,
+    medium: 24,
+    large: 32
+  };
+  const size = createMemo(() => {
+    if (typeof props.size === "number") {
+      return props.size;
+    }
+    if (props.size && sizeMap[props.size]) {
+      return sizeMap[props.size];
+    }
+    return 24;
+  });
+  const color = props.color ?? "currentColor";
+  const variant = props.variant ?? "outlined";
+  const key = `/node_modules/@material-symbols/svg-400/${variant}/${props.name}.svg`;
+  if (!icons[key]) throw new Error(`Icon not found: ${key}`);
+  icons[key]().then(raw => {
+    setSvg(raw.replace(/fill=".*?"/g, 'fill="currentColor"').replace(/width=".*?"/g, `width="${untrack(size)}"`).replace(/height=".*?"/g, `height="${untrack(size)}"`));
+  }).catch(console.error);
+  const [iconRef, setIconRef] = createSignal();
+  return (() => {
+    var _el$ = _tmpl$$8();
+    use(ref => {
+      setIconRef(ref);
+      // @ts-ignore
+      props?.ref?.(ref);
+    }, _el$);
+    _el$.style.setProperty("display", "inline-block");
+    color != null ? _el$.style.setProperty("color", color) : _el$.style.removeProperty("color");
+    createRenderEffect(_p$ => {
+      var _v$ = styles$5.icon,
+        _v$2 = `${size()}px`,
+        _v$3 = `${size()}px`,
+        _v$4 = svg();
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$.style.setProperty("width", _v$2) : _el$.style.removeProperty("width"));
+      _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$.style.setProperty("height", _v$3) : _el$.style.removeProperty("height"));
+      _v$4 !== _p$.o && (_el$.innerHTML = _p$.o = _v$4);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined
+    });
+    return _el$;
+  })();
+};
 
-var _tmpl$$5 = /*#__PURE__*/template(`<div><ul>`);
+var css_248z$5 = ".menu-module_menu__UDlDL {\n  background-color: var(--header-background-color, #2E7D32);\n  color: var(--header-on-background-color, #fff);\n  fill: var(--header-on-background-color, #fff);\n  padding: 1px;\n  margin: 0px;\n  width: 100px;\n  border-radius: 8px;\n  transform-origin: top;\n  max-height: 0;\n  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;\n  opacity: 0;\n  visibility: hidden;\n}\n\n.menu-module_open__TpFnL {\n  max-height: 800px !important;\n  opacity: 1 !important;\n  visibility: visible;\n}\n\n.menu-module_list__WPlII {\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n  fill: 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_listHeader__Hv-1- {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding-left: 4px;\n  opacity: 1 !important;\n}\n\n.menu-module_menuDropdown__uQA25 {\n  opacity: 1 !important;\n}\n.menu-module_menuDropdown__uQA25 button:focus, .menu-module_menuDropdown__uQA25 button:active, .menu-module_menuDropdown__uQA25 button:focus-within, .menu-module_menuDropdown__uQA25 button:focus-visible {\n  outline: none !important;\n  border: none !important;\n  box-shadow: none !important;\n  -webkit-tap-highlight-color: transparent !important;\n}\n.menu-module_menuDropdown__uQA25 button::-moz-focus-inner {\n  border: 0;\n}\n\n.menu-module_droplist__-e059 {\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n  fill: var(--on-container-color, #000);\n  padding: 1px;\n  margin: 0px;\n  width: 98%;\n  border-radius: 8px;\n  transform-origin: top;\n  max-height: 0;\n  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.menu-module_openDropList__pYIA- {\n  max-height: 800px !important;\n  opacity: 1 !important;\n  pointer-events: auto;\n}\n\n.menu-module_icon__nvdCD {\n  outline: none !important;\n  border: none !important;\n  box-shadow: none !important;\n  fill: var(--header-on-background-color, #fff);\n  -webkit-tap-highlight-color: transparent !important;\n}\n.menu-module_icon__nvdCD:focus, .menu-module_icon__nvdCD:active, .menu-module_icon__nvdCD:focus-within, .menu-module_icon__nvdCD:focus-visible {\n  outline: none !important;\n  border: none !important;\n  box-shadow: none !important;\n  -webkit-tap-highlight-color: transparent !important;\n}\n.menu-module_icon__nvdCD::-moz-focus-inner {\n  border: 0;\n}\n\n.menu-module_header__xWzbR {\n  flex-grow: 1;\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$4 = {"menu":"menu-module_menu__UDlDL","open":"menu-module_open__TpFnL","list":"menu-module_list__WPlII","listHeader":"menu-module_listHeader__Hv-1-","menuDropdown":"menu-module_menuDropdown__uQA25","droplist":"menu-module_droplist__-e059","openDropList":"menu-module_openDropList__pYIA-","header":"menu-module_header__xWzbR","menuItem":"menu-module_menuItem__oXBNs"};
+styleInject(css_248z$5);
+
+const MenuContext = createContext();
+const useMenuContext = () => {
+  return useContext(MenuContext);
+};
+
+var _tmpl$$7 = /*#__PURE__*/template(`<div><ul>`);
 const Menu = props => {
   const [local, others] = splitProps(props, ['anchorElement', 'children', 'ref', 'show', 'position']);
   const [menuRef, setMenuRef] = createSignal();
+  const menuContext = useMenuContext();
   const openStyle = () => {
     if (local.show[0]()) {
-      return styles$2.open;
+      return styles$4.open;
     }
     return '';
   };
   createEffect(() => {
+    const entry = {
+      element: menuRef(),
+      onClickOutside: e => {
+        props.show[1](false);
+      }
+    };
+    if (props.show[0]() && menuRef()) {
+      entry.element.style.zIndex = `${999 + getEntryAmount()}`;
+      registerWindowManager(entry);
+    } else {
+      unregisterWindowManager(entry);
+    }
+  });
+  const getAndSetPosition = (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 {
+      const mod = rect.width < 12 ? 1.25 : 1;
+      const menuFix = menu.getBoundingClientRect().width * mod;
+      menu.style.left = `${rect.right - (menuFix + window.scrollX)}px`;
+    }
+  };
+  const updatePosition = () => {
     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`;
+      getAndSetPosition(menu, anchor);
+    }
+  };
+  onMount(() => {
+    const menu = menuRef();
+    const anchor = local.anchorElement();
+    if (menu && anchor) {
+      setTimeout(() => {
+        getAndSetPosition(menu, anchor);
+      }, 50);
+      if (!isNullish(menuContext)) {
+        menuContext.registerWithParent(menu);
       }
+      document.addEventListener('scroll', updatePosition, true);
+      window.addEventListener('resize', updatePosition);
     }
+    onCleanup(() => {
+      document.removeEventListener('scroll', updatePosition, true);
+      window.removeEventListener('resize', updatePosition);
+    });
   });
   onCleanup(() => {
     const menu = menuRef();
@@ -2507,43 +2804,35 @@ const Menu = props => {
       menu.style.top = '';
       menu.style.left = '';
     }
-  });
-  useClickOutside([menuRef, local.anchorElement], () => {
-    local.show[1](false);
+    if (!isNullish(menuContext)) {
+      menuContext.unregisterWithParent(menuRef());
+    }
   });
   return createComponent(Portal, {
     get children() {
-      var _el$ = _tmpl$$5(),
+      var _el$ = _tmpl$$7(),
         _el$2 = _el$.firstChild;
       use(setMenuRef, _el$);
       spread(_el$, mergeProps(others, {
         get ["class"]() {
-          return `${styles$2.menu} ${openStyle()}`;
+          return `${styles$4.menu} ${openStyle()}`;
         }
       }), false, true);
-      _el$2.$$click = e => {
-        e.stopPropagation();
-        e.preventDefault();
-      };
-      _el$2.$$pointerdown = e => {
-        e.stopPropagation();
-      };
       insert(_el$2, () => local.children);
-      createRenderEffect(() => className(_el$2, `${styles$2.list}`));
+      createRenderEffect(() => className(_el$2, `${styles$4.list}`));
       return _el$;
     }
   });
 };
-delegateEvents(["pointerdown", "click"]);
 
-var _tmpl$$4 = /*#__PURE__*/template(`<li>`);
+var _tmpl$$6 = /*#__PURE__*/template(`<li>`);
 const MenuItem = props => {
   const [local, others] = splitProps(props, ['children', 'class']);
   return (() => {
-    var _el$ = _tmpl$$4();
+    var _el$ = _tmpl$$6();
     spread(_el$, mergeProps(others, {
       get ["class"]() {
-        return `${styles$2.menuItem} ${local.class}`;
+        return `${styles$4.menuItem} ${local.class}`;
       }
     }), false, true);
     insert(_el$, () => local.children);
@@ -2551,33 +2840,27 @@ const MenuItem = props => {
   })();
 };
 
-var _tmpl$$3 = /*#__PURE__*/template(`<li><span><span>`),
-  _tmpl$2$3 = /*#__PURE__*/template(`<ul>`);
+var _tmpl$$5 = /*#__PURE__*/template(`<li><span><span></span></span><ul>`);
 const MenuDropdown = props => {
   const [local, others] = splitProps(props, ['children', 'class', 'header']);
   const [isOpen, setIsOpen] = createSignal(false);
   const onButtonClick = e => {
-    e.stopPropagation();
-    e.preventDefault();
     setIsOpen(old => {
       return !old;
     });
   };
-  return [(() => {
-    var _el$ = _tmpl$$3(),
+  return (() => {
+    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(others, {
       get ["class"]() {
-        return `${styles$2.menuDropdown} ${local.class}`;
+        return `${styles$4.menuDropdown} ${local.class}`;
       }
     }), false, true);
-    insert(_el$3, () => local?.header);
+    insert(_el$3, () => props?.header?.());
     insert(_el$2, createComponent(Button, {
-      onPointerDown: e => {
-        e.stopPropagation();
-        e.preventDefault();
-      },
       onClick: onButtonClick,
       get children() {
         return [createComponent(Show, {
@@ -2586,8 +2869,11 @@ const MenuDropdown = props => {
           },
           get children() {
             return createComponent(Icon, {
-              size: "medium",
-              name: "keyboard_arrow_up"
+              name: "keyboard_arrow_up",
+              onClick: e => {
+                // onButtonClick(e);
+                e.stopPropagation();
+              }
             });
           }
         }), createComponent(Show, {
@@ -2596,193 +2882,240 @@ const MenuDropdown = props => {
           },
           get children() {
             return createComponent(Icon, {
-              size: "medium",
-              name: "keyboard_arrow_down"
+              name: "keyboard_arrow_down",
+              onClick: e => {
+                // onButtonClick(e);
+                e.stopPropagation();
+              }
             });
           }
         })];
       }
     }), null);
+    insert(_el$4, () => props.children);
     createRenderEffect(_p$ => {
-      var _v$ = `${styles$2.listHeader}`,
-        _v$2 = `${styles$2.header}`;
+      var _v$ = `${styles$4.listHeader}`,
+        _v$2 = `${styles$4.header}`,
+        _v$3 = `${styles$4.list} ${styles$4.droplist}  ${isOpen() ? styles$4.openDropList : ''}`;
       _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
       _v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
+      _v$3 !== _p$.a && className(_el$4, _p$.a = _v$3);
       return _p$;
     }, {
       e: undefined,
-      t: undefined
+      t: undefined,
+      a: undefined
     });
     return _el$;
-  })(), (() => {
-    var _el$4 = _tmpl$2$3();
-    insert(_el$4, () => local.children);
-    createRenderEffect(() => className(_el$4, `${styles$2.list} ${styles$2.droplist}  ${isOpen() ? styles$2.open : ''}`));
-    return _el$4;
-  })()];
+  })();
 };
 
-var css_248z$2 = ".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 = {"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$2);
+var css_248z$4 = ".radio-group-module_radio-group__label__UV7dt {\n  display: block;\n  margin-bottom: 0.5em;\n  font-weight: 600;\n}\n\n.radio-group-module_radio-group__options__AnbeY .radio-group-module_radio__6oLZe:not(:last-child) {\n  margin-bottom: 0.5em;\n}\n\n.radio-group-module_radio-group--disabled__sI9-e .radio-group-module_radio-group__label__UV7dt {\n  color: #ccc;\n}";
+var styles$3 = {"radio-group__label":"radio-group-module_radio-group__label__UV7dt","radio-group__options":"radio-group-module_radio-group__options__AnbeY","radio-group--disabled":"radio-group-module_radio-group--disabled__sI9-e"};
+styleInject(css_248z$4);
 
-var _tmpl$$2 = /*#__PURE__*/template(`<fieldset><legend><span>`),
-  _tmpl$2$2 = /*#__PURE__*/template(`<div>`);
-const FormField = props => {
-  return createComponent(Provider$1, {
-    get name() {
-      return props.name;
-    },
-    get formName() {
-      return props.formName;
-    },
-    get children() {
-      return createComponent(FormField2, props);
+var _tmpl$$4 = /*#__PURE__*/template(`<div><div role=radiogroup>`),
+  _tmpl$2$4 = /*#__PURE__*/template(`<div>`);
+const RadioGroupContext = createContext();
+let radioGroupCount = 0;
+function RadioGroup(props) {
+  radioGroupCount++;
+  const groupName = props.name ?? `radio-group-${radioGroupCount}`;
+  const [internalValue, setInternalValue] = createSignal(props.defaultValue);
+  const selectedValue = () => props.value !== undefined ? props.value : internalValue();
+  const setSelectedValue = val => {
+    if (props.value === undefined) {
+      setInternalValue(val);
     }
-  });
-};
-const FormField2 = props => {
-  const [local, others] = splitProps(props, ["children", "styleType", "name", "class", "legendClass", "formName"]);
-  const context = useFormProvider();
-  const formContext = useFormContext();
-  const hasValue = val => {
-    if (val === undefined || val === null) return false;
-    if (typeof val === "string" && val.trim() === "") return false;
-    if (Array.isArray(val) && val.length === 0) return false;
-    return true;
+    props.onChange?.(val);
   };
-  const hasInsideText = createMemo(() => {
-    let currentVal;
-    if (hasValue(formContext?.data?.[local?.formName ?? ''])) {
-      currentVal = formContext?.data?.[local?.formName ?? ''];
-    }
-    if (hasValue(context?.getValue?.())) {
-      currentVal = context?.getValue?.();
-    }
-    const isFocused = context?.getFocused?.();
-    const hasText = !context?.getTextInside?.();
-    return !isFocused && (!hasText || !hasValue(currentVal));
-  });
-  const [fieldRef, setFieldRef] = createSignal();
-  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');
+  const radioRefs = [];
+  const register = el => {
+    radioRefs.push(el);
+  };
+  const unregister = el => {
+    const index = radioRefs.indexOf(el);
+    if (index >= 0) {
+      radioRefs.splice(index, 1);
     }
-    //---
-    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()));
+  const handleKeyDown = e => {
+    const key = e.key;
+    if (key === "ArrowLeft" || key === "ArrowUp" || key === "Left" || key === "Up") {
+      e.preventDefault();
+      const currentIndex = radioRefs.indexOf(e.currentTarget);
+      const prevIndex = currentIndex > 0 ? currentIndex - 1 : radioRefs.length - 1;
+      const prevRadio = radioRefs[prevIndex];
+      setSelectedValue(prevRadio.value);
+      prevRadio.focus();
+    } else if (key === "ArrowRight" || key === "ArrowDown" || key === "Right" || key === "Down") {
+      e.preventDefault();
+      const currentIndex = radioRefs.indexOf(e.currentTarget);
+      const nextIndex = currentIndex < radioRefs.length - 1 ? currentIndex + 1 : 0;
+      const nextRadio = radioRefs[nextIndex];
+      setSelectedValue(nextRadio.value);
+      nextRadio.focus();
+    } else if (key === "Home") {
+      e.preventDefault();
+      if (radioRefs.length > 0) {
+        setSelectedValue(radioRefs[0].value);
+        radioRefs[0].focus();
+      }
+    } else if (key === "End") {
+      e.preventDefault();
+      if (radioRefs.length > 0) {
+        const lastIndex = radioRefs.length - 1;
+        setSelectedValue(radioRefs[lastIndex].value);
+        radioRefs[lastIndex].focus();
+      }
     }
-    context?.setFocused(prev => {
-      if (prev) {
-        formContext?.formGroup?.validate?.(local?.formName ?? '');
+  };
+  const contextValue = {
+    name: groupName,
+    selectedValue,
+    setSelectedValue,
+    register,
+    unregister,
+    handleKeyDown,
+    disabled: !!props.disabled
+  };
+  return (() => {
+    var _el$ = _tmpl$$4(),
+      _el$2 = _el$.firstChild;
+    insert(_el$, (() => {
+      var _c$ = createMemo(() => !!props.label);
+      return () => _c$() && (() => {
+        var _el$3 = _tmpl$2$4();
+        setAttribute(_el$3, "id", `${groupName}-label`);
+        insert(_el$3, () => props.label);
+        createRenderEffect(() => className(_el$3, styles$3["radio-group__label"]));
+        return _el$3;
+      })();
+    })(), _el$2);
+    insert(_el$2, createComponent(RadioGroupContext.Provider, {
+      value: contextValue,
+      get children() {
+        return props.children;
       }
-      return false;
+    }));
+    createRenderEffect(_p$ => {
+      var _v$ = styles$3["radio-group"],
+        _v$2 = {
+          [styles$3["radio-group--disabled"]]: props.disabled
+        },
+        _v$3 = styles$3["radio-group__options"],
+        _v$4 = props.label ? `${groupName}-label` : undefined,
+        _v$5 = props.label ? undefined : props.ariaLabel,
+        _v$6 = props.disabled ? "true" : undefined;
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _p$.t = classList(_el$, _v$2, _p$.t);
+      _v$3 !== _p$.a && className(_el$2, _p$.a = _v$3);
+      _v$4 !== _p$.o && setAttribute(_el$2, "aria-labelledby", _p$.o = _v$4);
+      _v$5 !== _p$.i && setAttribute(_el$2, "aria-label", _p$.i = _v$5);
+      _v$6 !== _p$.n && setAttribute(_el$2, "aria-disabled", _p$.n = _v$6);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined,
+      n: undefined
     });
-  });
+    return _el$;
+  })();
+}
+
+var css_248z$3 = ".radio-module_radio__HTGQn {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n\n.radio-module_radio--disabled__oPPg9 {\n  cursor: not-allowed;\n}\n\n.radio-module_radio__input__64jm3 {\n  position: absolute;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.radio-module_radio__circle__oVf3f {\n  position: relative;\n  width: 16px;\n  height: 16px;\n  border: 2px solid #666;\n  border-radius: 50%;\n  background: transparent;\n  margin-right: 0.5em;\n  flex-shrink: 0;\n}\n\n.radio-module_radio__circle__oVf3f:after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 8px;\n  height: 8px;\n  background: #007bff;\n  border-radius: 50%;\n  transform: translate(-50%, -50%);\n  display: none;\n}\n\n.radio-module_radio__input__64jm3:checked + .radio-module_radio__circle__oVf3f {\n  border-color: #007bff;\n}\n\n.radio-module_radio__input__64jm3:checked + .radio-module_radio__circle__oVf3f:after {\n  display: block;\n}\n\n.radio-module_radio__HTGQn:hover .radio-module_radio__circle__oVf3f {\n  border-color: #444;\n}\n\n.radio-module_radio__HTGQn:focus-within .radio-module_radio__circle__oVf3f {\n  outline: 2px solid #80bdff;\n  outline-offset: 2px;\n}\n\n.radio-module_radio__label__ktLh- {\n  vertical-align: middle;\n}\n\n.radio-module_radio__input__64jm3:disabled + .radio-module_radio__circle__oVf3f {\n  border-color: #ccc;\n}\n\n.radio-module_radio__input__64jm3:disabled + .radio-module_radio__circle__oVf3f:after {\n  background: #ccc;\n}\n\n.radio-module_radio--disabled__oPPg9 .radio-module_radio__label__ktLh- {\n  color: #ccc;\n}";
+var styles$2 = {"radio":"radio-module_radio__HTGQn","radio--disabled":"radio-module_radio--disabled__oPPg9","radio__input":"radio-module_radio__input__64jm3","radio__circle":"radio-module_radio__circle__oVf3f","radio__label":"radio-module_radio__label__ktLh-"};
+styleInject(css_248z$3);
+
+var _tmpl$$3 = /*#__PURE__*/template(`<label><input type=radio><span>`),
+  _tmpl$2$3 = /*#__PURE__*/template(`<span>`);
+function Radio(props) {
+  const group = useContext(RadioGroupContext);
+  const isInGroup = !!group;
+  // Manage controlled vs. uncontrolled state
+  const [internalChecked, setInternalChecked] = createSignal(props.defaultChecked ?? false);
+  const checkedState = () => {
+    if (isInGroup) {
+      return group.selectedValue() === props.value;
+    }
+    return props.checked !== undefined ? props.checked : internalChecked();
+  };
+  const isDisabled = () => !!(props.disabled || isInGroup && group.disabled);
+  const handleChange = e => {
+    if (isInGroup) {
+      group.setSelectedValue(props.value);
+    } else {
+      if (props.checked === undefined) {
+        setInternalChecked(true);
+      }
+      props.onChange?.(props.value);
+    }
+  };
+  let inputRef;
   onMount(() => {
-    if (context?.getValue !== undefined) {
-      const textInside = !hasValue(context?.getValue?.());
-      context.setTextInside(textInside);
+    if (isInGroup && inputRef) {
+      group.register(inputRef);
     }
   });
-  createEffect(() => {
-    const fieldRefer = fieldRef?.();
-    if (fieldRefer) {
-      context?.setFormFieldRef?.(fieldRefer);
+  onCleanup(() => {
+    if (isInGroup && inputRef) {
+      group.unregister(inputRef);
     }
   });
-  return [(() => {
-    var _el$ = _tmpl$$2(),
+  return (() => {
+    var _el$ = _tmpl$$3(),
       _el$2 = _el$.firstChild,
-      _el$3 = _el$2.firstChild;
-    use(setFieldRef, _el$);
-    spread(_el$, mergeProps(others, {
-      get ["class"]() {
-        return `${style["primary"]} ${hasInsideText() ? style.movedLegendInside : style.movedLegendOutside} ${style.formField} ${local.class ?? ''}`;
-      }
-    }), false, true);
-    insert(_el$3, createComponent(Show, {
-      get when() {
-        return !hasRequired();
-      },
-      get children() {
-        return context.getName();
-      }
-    }), null);
-    insert(_el$3, createComponent(Show, {
-      get when() {
-        return hasRequired();
-      },
-      get children() {
-        return [createMemo(() => context?.getName()), " *"];
-      }
-    }), null);
-    insert(_el$, theChildren, null);
+      _el$3 = _el$2.nextSibling;
+    addEventListener(_el$2, "keydown", isInGroup ? group.handleKeyDown : undefined, true);
+    _el$2.addEventListener("change", handleChange);
+    var _ref$ = inputRef;
+    typeof _ref$ === "function" ? use(_ref$, _el$2) : inputRef = _el$2;
+    insert(_el$, (() => {
+      var _c$ = createMemo(() => !!props.label);
+      return () => _c$() && (() => {
+        var _el$4 = _tmpl$2$3();
+        insert(_el$4, () => props.label);
+        createRenderEffect(() => className(_el$4, styles$2["radio__label"]));
+        return _el$4;
+      })();
+    })(), null);
     createRenderEffect(_p$ => {
-      var _v$ = `${hasInsideText() ? style.moveLegendInside : style.moveLegendOutside} ${local?.legendClass ?? ''}`,
-        _v$2 = `${style.legendStyle}`;
-      _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
-      _v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
+      var _v$ = styles$2.radio,
+        _v$2 = {
+          [styles$2["radio--disabled"]]: isDisabled(),
+          [styles$2["radio--checked"]]: checkedState()
+        },
+        _v$3 = styles$2["radio__input"],
+        _v$4 = isInGroup ? group.name : props.name,
+        _v$5 = isDisabled(),
+        _v$6 = props.label ? undefined : props.ariaLabel,
+        _v$7 = styles$2["radio__circle"];
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _p$.t = classList(_el$, _v$2, _p$.t);
+      _v$3 !== _p$.a && className(_el$2, _p$.a = _v$3);
+      _v$4 !== _p$.o && setAttribute(_el$2, "name", _p$.o = _v$4);
+      _v$5 !== _p$.i && (_el$2.disabled = _p$.i = _v$5);
+      _v$6 !== _p$.n && setAttribute(_el$2, "aria-label", _p$.n = _v$6);
+      _v$7 !== _p$.s && className(_el$3, _p$.s = _v$7);
       return _p$;
     }, {
       e: undefined,
-      t: undefined
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined,
+      n: undefined,
+      s: undefined
     });
+    createRenderEffect(() => _el$2.value = props.value.toString());
+    createRenderEffect(() => _el$2.checked = checkedState());
     return _el$;
-  })(), (() => {
-    var _el$4 = _tmpl$2$2();
-    insert(_el$4, createComponent(For, {
-      get each() {
-        return formErrors();
-      },
-      children: (error, index) => {
-        return (() => {
-          var _el$5 = _tmpl$2$2();
-          insert(_el$5, () => error.display);
-          createRenderEffect(_p$ => {
-            var _v$3 = style.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.errorContainer));
-    return _el$4;
-  })()];
-};
+  })();
+}
+delegateEvents(["keydown"]);
 
 /**
  * A class that encapsulates an array of form controls along with their validation logic.
@@ -2816,52 +3149,159 @@ class FormArray {
    * @private
    */
   errors = [];
+  /**
+   * The current values of the form controls in the array.
+   *
+   * @private
+   */
+  internalValues;
+  /**
+   * A function to update the current values of the form controls.
+   *
+   * @private
+   */
+  setValues;
   /**
    * 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.
+   * @param initialValues - Optional initial values for the form controls.
    */
-  constructor(arrayValidation) {
+  constructor(arrayValidation, initialValues = []) {
     const [valid, setValid] = createStore(arrayValidation[0]);
+    const [values, setValues] = createStore(initialValues);
     this.internalArrayValidation = arrayValidation[1];
     this.internalValidation = valid;
     this.setValidation = setValid;
+    this.internalValues = values;
+    this.setValues = setValues;
+  }
+  /**
+   * Gets the current values of the form controls in the array.
+   *
+   * @returns A cloned copy of the values array.
+   */
+  get() {
+    return this.internalValues;
+  }
+  /**
+   * Gets the value of a specific control in the array.
+   *
+   * @param index - The index of the control.
+   * @returns A cloned copy of the control value.
+   */
+  getAt(index) {
+    if (index < 0 || index >= this.internalValues.length) {
+      return undefined;
+    }
+    return Clone(this.internalValues[index]);
+  }
+  /**
+   * Gets a property value from an object at the specified index.
+   *
+   * @param index - The index of the control.
+   * @param key - The property key to retrieve.
+   * @returns The property value, or undefined if not found.
+   */
+  getProperty(index, key) {
+    const item = this.getAt(index);
+    return item ? item[key] : undefined;
+  }
+  /**
+   * Sets the values of all controls in the array.
+   *
+   * @param values - The new values for the controls.
+   */
+  set(values) {
+    this.setValues(Clone(values));
+  }
+  /**
+   * Sets the value of a control at the specified index.
+   *
+   * @param index - The index of the control to update.
+   * @param value - The new value for the control.
+   */
+  setAt(index, value) {
+    if (index < 0 || index >= this.internalValues.length) {
+      console.error(`Index ${index} out of bounds.`);
+      return;
+    }
+    this.setValues(index, Clone(value));
   }
   /**
-   * Removes a control's validation at the specified index.
+   * Sets a property value on an object at the specified index.
+   *
+   * @param index - The index of the control.
+   * @param key - The property key to set.
+   * @param value - The new value for the property.
+   */
+  setProperty(index, key, value) {
+    if (index < 0 || index >= this.internalValues.length) {
+      console.error(`Index ${index} out of bounds.`);
+      return;
+    }
+    this.setValues(index, oldValue => {
+      const newValue = {
+        ...oldValue
+      };
+      newValue[key] = Clone(value);
+      return newValue;
+    });
+  }
+  /**
+   * Removes a control at the specified index.
    *
    * @param index - The index of the control to remove.
    */
   remove(index) {
+    // Remove validation
     this.setValidation(old => {
       const copy = [...old];
       copy.splice(index, 1);
       return copy;
     });
+    // Remove value
+    this.setValues(old => {
+      const copy = [...old];
+      copy.splice(index, 1);
+      return copy;
+    });
+    // Remove errors
+    if (this.errors.length > index) {
+      this.errors.splice(index, 1);
+    }
   }
   /**
-   * Replaces a control's validation at the specified index with a new validation.
+   * Replaces a control at the specified index with new validation and value.
    *
    * @param index - The index of the control to replace.
    * @param controlValidation - The new validation to apply for the control.
+   * @param value - The new value for the control.
    */
-  replace(index, controlValidation) {
+  replace(index, controlValidation, value) {
     this.setValidation(old => {
       const copy = [...old];
       copy.splice(index, 1, controlValidation);
       return copy;
     });
+    if (value !== undefined) {
+      this.setValues(index, Clone(value));
+    }
   }
   /**
-   * Adds a new control validation to the array.
+   * Adds a new control to the array with validation and optional value.
    *
    * @param controlValidation - The validation definition to add.
+   * @param value - Optional value for the new control.
    */
-  add(controlValidation) {
+  add(controlValidation, value) {
     this.setValidation(old => {
       return [...old, controlValidation];
     });
+    this.setValues(old => {
+      return [...old, value ? Clone(value) : {}];
+    });
   }
   /**
    * Checks if any validation errors exist.
@@ -2888,6 +3328,35 @@ class FormArray {
   hasValidator(index, errKey) {
     return this.errors[index].some(error => error.key === errKey);
   }
+  /**
+   * Gets all errors for the form array.
+   *
+   * @returns An array of error arrays for each control.
+   */
+  getErrors() {
+    return Clone(this.errors);
+  }
+  /**
+   * Gets errors for a specific control in the array.
+   *
+   * @param index - The index of the control.
+   * @returns An array of errors for the control, or an empty array if not found.
+   */
+  getErrorsAt(index) {
+    if (index < 0 || index >= this.errors.length) {
+      return [];
+    }
+    return Clone(this.errors[index]);
+  }
+  /**
+   * Validates the form array using current values.
+   *
+   * @param index - Optional index to validate just one control.
+   * @returns True if validation passes, false otherwise.
+   */
+  validateCurrent(index) {
+    return this.validate(this.internalValues, index);
+  }
   /**
    * Validates the provided form control values.
    *
@@ -2903,7 +3372,16 @@ class FormArray {
     }
     // Validate all controls in the form array.
     if (isNullish(index)) {
-      this.errors = values.map((value, i) => {
+      const cleanValue = val => {
+        if (isNullish(val)) {
+          return [];
+        } else if (Array.isArray(val)) {
+          return val;
+        } else {
+          return [val];
+        }
+      };
+      this.errors = cleanValue(values).map((value, i) => {
         const errors = this.internalValidation.map(([_, validators]) => {
           return validators.map(validator => ({
             key: validator.errKey,
@@ -2919,17 +3397,179 @@ class FormArray {
       });
       return this.errors.flat().every(error => !error.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])
-      }));
+    // 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);
+  }
+}
+
+var css_248z$2 = ".formfield-module_formField__w6mH9:focus-within > legend, .formfield-module_has-focus__9ingx > legend {\n  top: -8px !important;\n  font-size: 0.75rem !important;\n}\n\n.formfield-module_formField__w6mH9 {\n  position: relative;\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 > legend {\n  position: absolute;\n  left: 12px;\n  top: calc(50% - 0.5em);\n  font-size: 1rem;\n  transition: top 0.25s ease, font-size 0.25s ease;\n  pointer-events: none;\n}\n.formfield-module_formField__w6mH9 input::-moz-placeholder, .formfield-module_formField__w6mH9 select::-moz-placeholder {\n  opacity: 0 !important;\n  -moz-transition: opacity 0.25s ease;\n  transition: opacity 0.25s ease;\n}\n.formfield-module_formField__w6mH9 input::placeholder,\n.formfield-module_formField__w6mH9 select::placeholder {\n  opacity: 0 !important;\n  transition: opacity 0.25s ease;\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  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  height: 16px;\n  max-height: 16px;\n  transition: all 0.25s ease;\n  top: calc(50% - 1em);\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  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;\n}\n.formfield-module_formField__w6mH9:has(input[type=text]) input[type=text]::placeholder {\n  opacity: 0;\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  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;\n}\n.formfield-module_formField__w6mH9:has(input[type=number]) input[type=number]::placeholder {\n  opacity: 0;\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  transition: all 0.3s ease;\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 = {"formField":"formfield-module_formField__w6mH9","has-focus":"formfield-module_has-focus__9ingx","primary":"formfield-module_primary__7BYyQ","legendStyle":"formfield-module_legendStyle__gnI49","errorContainer":"formfield-module_errorContainer__HR4PL","error":"formfield-module_error__wNBh2"};
+styleInject(css_248z$2);
+
+var _tmpl$$2 = /*#__PURE__*/template(`<fieldset><legend><span>`),
+  _tmpl$2$2 = /*#__PURE__*/template(`<div>`);
+const FormField = props => {
+  return createComponent(Provider$1, {
+    get name() {
+      return props.name;
+    },
+    get formName() {
+      return props.formName;
+    },
+    get children() {
+      return createComponent(FormField2, props);
+    }
+  });
+};
+const FormField2 = props => {
+  const [local, others] = splitProps(props, ["children", "styleType", "name", "class", "legendClass", "formName"]);
+  const context = useFormProvider();
+  const formContext = useFormContext();
+  const [fieldRef, setFieldRef] = createSignal(); // Moved up before it's used
+  const hasValue = val => {
+    if (val === undefined || val === null) return false;
+    if (typeof val === "string" && val.trim() === "") return false;
+    if (Array.isArray(val) && val.length === 0) return false;
+    return true;
+  };
+  const shouldFloat = createMemo(() => {
+    let currentVal;
+    if (hasValue(formContext?.data?.[local?.formName ?? ''])) {
+      currentVal = formContext?.data?.[local?.formName ?? ''];
+    }
+    if (hasValue(context?.getValue?.())) {
+      currentVal = context?.getValue?.();
+    }
+    return hasValue(currentVal) || context?.getFocused?.();
+  });
+  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');
+    }
+    //---
+    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)) {
+      const value = formContext?.data?.[local?.formName ?? ''];
+      context?.setTextInside(!hasValue(value));
+    } else if (!isNullish(context?.getValue)) {
+      const val = context?.getValue?.();
+      context?.setTextInside(!hasValue(val));
+    }
+    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);
+    }
+  });
+  createEffect(() => {
+    const fieldRefer = fieldRef?.();
+    if (fieldRefer) {
+      context?.setFormFieldRef?.(fieldRefer);
+    }
+  });
+  return [(() => {
+    var _el$ = _tmpl$$2(),
+      _el$2 = _el$.firstChild,
+      _el$3 = _el$2.firstChild;
+    use(setFieldRef, _el$);
+    spread(_el$, mergeProps(others, {
+      get ["class"]() {
+        return `${style["primary"]} ${style.formField} ${shouldFloat() ? style["has-focus"] : ""} ${local.class ?? ''}`;
+      }
+    }), false, true);
+    insert(_el$3, createComponent(Show, {
+      get when() {
+        return !hasRequired();
+      },
+      get children() {
+        return context.getName();
+      }
+    }), null);
+    insert(_el$3, createComponent(Show, {
+      get when() {
+        return hasRequired();
+      },
+      get children() {
+        return [createMemo(() => context?.getName()), " *"];
+      }
+    }), null);
+    insert(_el$, theChildren, null);
+    createRenderEffect(_p$ => {
+      var _v$ = `${local?.legendClass ?? ''}`,
+        _v$2 = `${style.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
     });
-    this.errors[index] = errors.flat();
-    return this.errors[index].every(error => !error.hasError);
-  }
-}
+    return _el$;
+  })(), (() => {
+    var _el$4 = _tmpl$2$2();
+    insert(_el$4, createComponent(For, {
+      get each() {
+        return formErrors();
+      },
+      children: (error, index) => {
+        return (() => {
+          var _el$5 = _tmpl$2$2();
+          insert(_el$5, () => error.display);
+          createRenderEffect(_p$ => {
+            var _v$3 = style.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.errorContainer));
+    return _el$4;
+  })()];
+};
 
 /**
  * A collection of static validator functions that return a ValidatorResult.
@@ -3070,7 +3710,8 @@ class FormGroup {
       this.keys.push(key);
       if (value instanceof FormArray) {
         // If the value is a FormArray, store it directly.
-        newData[key] = value;
+        // We need to ensure that when T[key] is an array type, we store the array returned by FormArray
+        newData[key] = value.get();
       } else {
         // Otherwise, initialize the data, validators, and errors for the control.
         newData[key] = value[0];
@@ -3087,8 +3728,26 @@ class FormGroup {
   }
   get(key) {
     if (!key) return Clone(this.internalDataSignal[0]);
+    // If the control is a FormArray, use its get method
+    if (this.internalDataSignal[0][key] instanceof FormArray) {
+      // Return the array from FormArray.get() as the expected type T[K]
+      return this.internalDataSignal[0][key].get();
+    }
     return Clone(this.internalDataSignal[0][key]);
   }
+  /**
+   * Gets a specific item from a FormArray at the given index
+   *
+   * @param key - The key of the form control containing the FormArray
+   * @param index - The index to retrieve from the array
+   * @returns The item at the specified index, or undefined if not found
+   */
+  getArrayItem(key, index) {
+    if (this.internalDataSignal[0][key] instanceof FormArray) {
+      return this.internalDataSignal[0][key].getAt(index);
+    }
+    return undefined;
+  }
   /**
    * Checks whether a specific validator error exists for a given control.
    *
@@ -3097,10 +3756,22 @@ class FormGroup {
    * @returns `true` if the error exists, otherwise `false`.
    */
   hasValidator(key, errKey) {
-    return this.errors[0]()?.[key]?.some(error => error.key === errKey);
+    if (this.internalDataSignal[0][key] instanceof FormArray) {
+      return this.internalDataSignal[0][key].hasError();
+    }
+    return this.errors[0]()?.[key]?.some(error => error.key === errKey) ?? false;
   }
+  /**
+   * Gets all errors for a specific control
+   *
+   * @param key - The key of the form control
+   * @returns An array of errors for the control
+   */
   getErrors(key) {
-    return this.errors[0]()?.[key];
+    if (this.internalDataSignal[0][key] instanceof FormArray) {
+      return [];
+    }
+    return this.errors[0]()?.[key] ?? [];
   }
   /**
    * Determines if a specific control has any validation errors.
@@ -3109,10 +3780,24 @@ class FormGroup {
    * @returns `true` if any error is present, otherwise `false`.
    */
   hasError(key) {
-    return this.errors[0]()?.[key]?.some(error => error.hasError);
+    if (this.internalDataSignal[0][key] instanceof FormArray) {
+      return this.internalDataSignal[0][key].hasError();
+    }
+    return this.errors[0]()?.[key]?.some(error => error.hasError) ?? false;
   }
+  /**
+   * Sets an error state for a validator on a specific control
+   *
+   * @param key - The key of the form control
+   * @param errKey - The error key to update
+   * @param hasError - Whether the error should be set or cleared
+   */
   setError(key, errKey, hasError) {
-    const errorIndex = this.errors[0]()[key].findIndex(error => error.key === errKey);
+    if (this.internalDataSignal[0][key] instanceof FormArray) {
+      // Not supported for FormArray - errors are managed internally
+      return;
+    }
+    const errorIndex = this.errors[0]()[key]?.findIndex(error => error.key === errKey);
     if (errorIndex !== -1) {
       this.errors[1](old => {
         old[key][errorIndex].hasError = hasError;
@@ -3127,11 +3812,41 @@ class FormGroup {
    * @param value - The new value to assign to the control.
    */
   set(key, value) {
+    // If the control is a FormArray, use its set method
+    if (this.internalDataSignal[0][key] instanceof FormArray) {
+      if (Array.isArray(value)) {
+        this.internalDataSignal[0][key].set(value);
+      }
+      return;
+    }
     this.internalDataSignal[1](old => ({
       ...old,
       [key]: value
     }));
   }
+  /**
+   * Adds an item to a FormArray control
+   *
+   * @param key - The key of the FormArray control
+   * @param controlValidation - The validation for the new item
+   * @param value - Optional initial value for the new item
+   */
+  addToArray(key, controlValidation, value) {
+    if (this.internalDataSignal[0][key] instanceof FormArray) {
+      this.internalDataSignal[0][key].add(controlValidation, value);
+    }
+  }
+  /**
+   * Removes an item from a FormArray control
+   *
+   * @param key - The key of the FormArray control
+   * @param index - The index of the item to remove
+   */
+  removeFromArray(key, index) {
+    if (this.internalDataSignal[0][key] instanceof FormArray) {
+      this.internalDataSignal[0][key].remove(index);
+    }
+  }
   /**
    * Validates the form data.
    *
@@ -3145,14 +3860,12 @@ class FormGroup {
       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));
+      const results = this.keys.map(k => this.validate(k));
       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());
+    if (this.internalDataSignal?.[0]?.[key] instanceof FormArray) {
+      return this.internalDataSignal[0][key].validateCurrent();
     }
     const validators = this.validators[key];
     if (!validators) return true;
@@ -3206,26 +3919,41 @@ const useColumnContext = () => {
   return useContext(ColumnContext);
 };
 
-var css_248z$1 = ".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[isdropheader=true] {\n  cursor: pointer;\n}\n.table-module_table__um-mK tr td {\n  padding: 0.5rem;\n  width: -moz-max-content;\n  width: max-content;\n}\n\n.table-module_dropRow__BugV9 {\n  transform-origin: top;\n  max-height: 0;\n  display: none;\n  animation: table-module_rowDropping__zE5Uz 0.5s reverse forwards;\n}\n\n.table-module_openDropRow__rjfjd {\n  display: block;\n  max-height: 2000px;\n  animation: table-module_rowDropping__zE5Uz 0.5s forwards;\n}\n\n@keyframes table-module_rowDropping__zE5Uz {\n  0% {\n    display: none;\n    max-height: 0;\n    opacity: 0;\n  }\n  1% {\n    display: block;\n    max-height: 0;\n    opacity: 0;\n  }\n  100% {\n    max-height: 2000px;\n    opacity: 1;\n  }\n}";
+var css_248z$1 = ".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[isdropheader=true] {\n  cursor: pointer;\n}\n.table-module_table__um-mK tr[isdropheader=true]:hover {\n  background-color: rgba(0, 0, 0, 0.05);\n}\n.table-module_table__um-mK tr td {\n  padding: 0.5rem;\n  width: -moz-max-content;\n  width: max-content;\n}\n\n.table-module_dropRow__BugV9 {\n  transform-origin: top;\n  animation: table-module_rowDropping__zE5Uz 0.5s reverse forwards;\n  display: none;\n}\n\n.table-module_openDropRow__rjfjd {\n  animation: table-module_rowDropping__zE5Uz 0.5s forwards;\n  display: table-row;\n}\n\n@keyframes table-module_rowDropping__zE5Uz {\n  0% {\n    max-height: 0;\n    opacity: 0;\n  }\n  1% {\n    max-height: 0;\n    opacity: 0;\n  }\n  100% {\n    max-height: 2000px;\n    opacity: 1;\n  }\n}";
 var styles$1 = {"table":"table-module_table__um-mK","dropRow":"table-module_dropRow__BugV9","openDropRow":"table-module_openDropRow__rjfjd"};
 styleInject(css_248z$1);
 
-var _tmpl$$1 = /*#__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>`);
+var _tmpl$$1 = /*#__PURE__*/template(`<span>Error`),
+  _tmpl$2$1 = /*#__PURE__*/template(`<table><colgroup></colgroup><thead></thead><tbody></tbody><tfoot>`),
+  _tmpl$3$1 = /*#__PURE__*/template(`<col>`),
+  _tmpl$4 = /*#__PURE__*/template(`<tr>`),
+  _tmpl$5 = /*#__PURE__*/template(`<th>`),
+  _tmpl$6 = /*#__PURE__*/template(`<td>`);
 const Table = props => {
-  const formContext = useFormContext();
+  const [redrawRows, setRedrawRows] = createSignal(false);
+  const [mounted, setMounted] = createSignal(false);
   const tableContext = {};
   const getProps = () => props;
-  // const internalData = (() => {
-  //   return props.data();
-  // });
-  // tableContext.getDataSource = () => props.data();
+  const tableData = () => {
+    redrawRows();
+    return props.data() ?? [];
+  };
+  // Create a reactive memo for columns to handle dynamic changes
+  const reactiveColumns = createMemo(() => getProps().columns);
+  // Add effect to reset column styles when columns change
+  createEffect(() => {
+    const columns = reactiveColumns();
+    if (columns.length > 0) {
+      // Reset column styles when columns change
+      setColumnStyle({});
+    }
+  });
   tableContext.setDataSource = data => {
     getProps().setData?.(() => [...data]);
-    formContext.setData(data);
+  };
+  tableContext.getDataSource = () => {
+    const data = getProps().data();
+    return data;
   };
   const [headers, setHeaders] = createSignal({});
   tableContext.addHeaderCell = (name, index, header) => {
@@ -3239,31 +3967,75 @@ const Table = props => {
       });
     });
   };
-  const [rows, setRows] = createSignal({});
-  tableContext.addRowCell = (index, name, cell) => {
+  // const [rows, setRows] = createSignal<RowOrganized<T>>({});
+  const [rowData, setRows] = createStore({});
+  const rows = () => {
+    mounted();
+    return rowData;
+  };
+  const rowKeys = createMemo(() => {
+    return Object.keys(rows()).map(key => parseInt(key)).sort((a, b) => a - b);
+  });
+  tableContext.addRowCell = (index, name, cell, isDropDown) => {
     setRows(old => {
-      return {
-        ...old,
-        [index]: {
-          ...old[index],
-          [name]: {
-            element: cell,
-            dropRow: old?.[index]?.[name]?.dropRow ?? false
-          }
-        }
+      const newRows = {
+        ...old
+      };
+      if (!newRows[index]) {
+        newRows[index] = {};
+      }
+      // Preserve any existing dropHeader flag when updating a row
+      const existingData = old[index]?.[name];
+      newRows[index][name] = {
+        element: cell,
+        dropRow: !!isDropDown,
+        dropHeader: existingData?.dropHeader || false
+      };
+      return newRows;
+    });
+  };
+  tableContext.removeRowCell = (index, name) => {
+    setRows(old => {
+      if (!old[index] || !old[index][name]) return old;
+      const newRows = {
+        ...old
+      };
+      const newRowData = {
+        ...newRows[index]
       };
+      delete newRowData[name];
+      newRows[index] = newRowData;
+      return newRows;
     });
   };
   const [footerCell, setFooterCell] = createSignal({});
   tableContext.addFooterCell = (index, name, cell) => {
     setFooterCell(old => {
-      return {
-        ...old,
-        [index]: {
-          ...old[index],
-          [name]: cell
-        }
+      const newFooter = {
+        ...old
+      };
+      if (!newFooter[index]) {
+        newFooter[index] = {};
+      }
+      newFooter[index] = {
+        ...newFooter[index],
+        [name]: cell
+      };
+      return newFooter;
+    });
+  };
+  tableContext.removeFooterCell = (index, name) => {
+    setFooterCell(old => {
+      if (!old[index] || !old[index][name]) return old;
+      const newFooter = {
+        ...old
+      };
+      const newRowData = {
+        ...newFooter[index]
       };
+      delete newRowData[name];
+      newFooter[index] = newRowData;
+      return newFooter;
     });
   };
   const [headerStyle, setHeaderStyle] = createSignal({});
@@ -3303,27 +4075,43 @@ const Table = props => {
     });
   };
   const [rowStyle, setRowStyle] = createSignal({});
-  tableContext.addRowStyle = (index, style, isDroprow, isDropHeader) => {
-    if (!!isDroprow) {
-      const firstColumn = getProps()?.columns?.[0];
-      if (!isNullish(firstColumn)) {
-        setRows(old => {
-          return {
-            ...old,
-            [index]: {
-              [firstColumn]: {
-                element: old?.[index]?.[firstColumn]?.element ?? (() => []),
-                dropRow: true
-              }
+  tableContext.addRowStyle = (index, style, isDropRow, isDropHeader) => {
+    // If this is a dropdown row or dropdown header, update the row data
+    const firstColumn = reactiveColumns()?.[0];
+    if (!isNullish(firstColumn)) {
+      setRows(old => {
+        // Get existing row data
+        const existingRow = old[index] || {};
+        const existingCell = existingRow[firstColumn] || {
+          element: () => []
+        };
+        return {
+          ...old,
+          [index]: {
+            ...existingRow,
+            [firstColumn]: {
+              ...existingCell,
+              element: existingCell.element,
+              // Set dropRow based on isDropRow param or preserve existing value
+              dropRow: isDropRow === true ? true : existingCell.dropRow || false,
+              // Set dropHeader based on isDropHeader param or preserve existing value
+              dropHeader: isDropHeader === true ? true : existingCell.dropHeader || false
             }
-          };
-        });
-      }
+          }
+        };
+      });
     }
+    // Update row style
     setRowStyle(old => {
       return {
         ...old,
-        [index]: style
+        [index]: {
+          ...style,
+          all: {
+            ...style?.all,
+            isDropHeader: isDropHeader === true ? true : undefined
+          }
+        }
       };
     });
   };
@@ -3354,22 +4142,84 @@ const Table = props => {
       };
     });
   };
+  // Add a removeColumnStyle method to allow cleanup
+  tableContext.removeColumnStyle = name => {
+    setColumnStyle(old => {
+      const newStyles = {
+        ...old
+      };
+      delete newStyles[name];
+      return newStyles;
+    });
+  };
+  const [refresh, setRefresh] = createSignal(false);
+  let firstRun = false;
+  tableContext.refresh = refresh;
+  createEffect(() => {
+    if (firstRun) {
+      setRefresh(old => !old);
+    } else {
+      firstRun = true;
+    }
+    tableData();
+  });
   const headerFactory = (index, column) => {
     return headers()?.[index]?.[column];
   };
   const rowStyleFactory = rowNum => {
-    return rowStyle()?.[rowNum];
+    return rowStyle()?.[rowNum] ?? {};
   };
   const [dropOpenStore, setDropOpenStore] = createStore([]);
+  // Enhanced renderCell with better type safety and error handling
+  const renderCell = (cell, item, index) => {
+    if (typeof cell === 'function') {
+      try {
+        return cell(item, index);
+      } catch (error) {
+        console.error('Error rendering table cell:', error, {
+          cellType: typeof cell,
+          itemType: typeof item,
+          index
+        });
+        return (() => {
+          var _el$ = _tmpl$$1();
+          createRenderEffect(() => className(_el$, styles$1.errorCell));
+          return _el$;
+        })();
+      }
+    }
+    // Handle null or undefined cells gracefully
+    if (cell === null || cell === undefined) {
+      return "Cell nully";
+    }
+    return cell;
+  };
+  onMount(() => {
+    setMounted(true);
+  });
+  const getIsDropOpen = (rowNum, index) => {
+    // Check if this row should be displayed based on its position
+    const firstColumn = reactiveColumns()?.[0];
+    const rowData = rows()?.[rowNum]?.[firstColumn];
+    // For regular rows, show normally
+    if (!rowData?.dropRow) {
+      return true;
+    }
+    // For dropdown rows, respect the dropdown state
+    return dropOpenStore[index] ?? false;
+  };
+  const dropRowStyle = (rowNum, index) => {
+    return getIsDropOpen(rowNum, index) ? styles$1.openDropRow : styles$1.dropRow;
+  };
   return createComponent(TableProvider, mergeProps(tableContext, {
     get children() {
       return [(() => {
-        var _el$ = _tmpl$$1(),
-          _el$2 = _el$.firstChild,
-          _el$3 = _el$2.nextSibling,
+        var _el$2 = _tmpl$2$1(),
+          _el$3 = _el$2.firstChild,
           _el$4 = _el$3.nextSibling,
-          _el$5 = _el$4.nextSibling;
-        spread(_el$2, mergeProps(() => getProps()?.otherStyles?.colGroup?.all, {
+          _el$5 = _el$4.nextSibling,
+          _el$6 = _el$5.nextSibling;
+        spread(_el$3, mergeProps(() => getProps()?.otherStyles?.colGroup?.all, {
           get style() {
             return getProps().otherStyles?.colGroup?.style;
           },
@@ -3377,13 +4227,13 @@ const Table = props => {
             return getProps().otherStyles?.colGroup?.class;
           }
         }), false, true);
-        insert(_el$2, createComponent(For, {
+        insert(_el$3, createComponent(For, {
           get each() {
-            return getProps().columns;
+            return reactiveColumns();
           },
           children: column => (() => {
-            var _el$6 = _tmpl$2$1();
-            spread(_el$6, mergeProps(() => columnStyle()[column]?.all, {
+            var _el$7 = _tmpl$3$1();
+            spread(_el$7, mergeProps(() => columnStyle()[column]?.all, {
               get style() {
                 return columnStyle()[column]?.style;
               },
@@ -3391,10 +4241,10 @@ const Table = props => {
                 return columnStyle()[column]?.class;
               }
             }), false, false);
-            return _el$6;
+            return _el$7;
           })()
         }));
-        spread(_el$3, mergeProps(() => getProps()?.otherStyles?.thead?.all, {
+        spread(_el$4, mergeProps(() => getProps()?.otherStyles?.thead?.all, {
           get style() {
             return getProps().otherStyles?.thead?.style;
           },
@@ -3402,22 +4252,22 @@ const Table = props => {
             return getProps().otherStyles?.thead?.class;
           }
         }), false, true);
-        insert(_el$3, createComponent(For, {
+        insert(_el$4, createComponent(For, {
           get each() {
             return Object.keys(headers()).map(key => parseInt(key)).sort((a, b) => a - b);
           },
           children: rowNum => {
             return (() => {
-              var _el$7 = _tmpl$3$1();
-              insert(_el$7, createComponent(For, {
+              var _el$8 = _tmpl$4();
+              insert(_el$8, createComponent(For, {
                 get each() {
-                  return getProps().columns;
+                  return reactiveColumns();
                 },
                 children: (column, index) => {
                   const headCell = headers()[rowNum]?.[column];
                   return !!headCell ? (() => {
-                    var _el$8 = _tmpl$4();
-                    spread(_el$8, mergeProps(() => headerStyle()[column]?.[rowNum]?.all, {
+                    var _el$9 = _tmpl$5();
+                    spread(_el$9, mergeProps(() => headerStyle()[column]?.[rowNum]?.all, {
                       get style() {
                         return headerStyle()[column]?.[rowNum]?.style;
                       },
@@ -3425,26 +4275,26 @@ const Table = props => {
                         return headerStyle()[column]?.[rowNum]?.class;
                       }
                     }), false, true);
-                    insert(_el$8, () => headerFactory(rowNum, column));
-                    return _el$8;
+                    insert(_el$9, () => headerFactory(rowNum, column));
+                    return _el$9;
                   })() : [];
                 }
               }));
               createRenderEffect(_p$ => {
                 var _v$4 = headerRowStyle()[rowNum]?.style,
                   _v$5 = headerRowStyle()[rowNum]?.class;
-                _p$.e = style$9(_el$7, _v$4, _p$.e);
-                _v$5 !== _p$.t && className(_el$7, _p$.t = _v$5);
+                _p$.e = style$9(_el$8, _v$4, _p$.e);
+                _v$5 !== _p$.t && className(_el$8, _p$.t = _v$5);
                 return _p$;
               }, {
                 e: undefined,
                 t: undefined
               });
-              return _el$7;
+              return _el$8;
             })();
           }
         }));
-        spread(_el$4, mergeProps(() => getProps()?.otherStyles?.tbody?.all, {
+        spread(_el$5, mergeProps(() => getProps()?.otherStyles?.tbody?.all, {
           get style() {
             return getProps().otherStyles?.tbody?.style;
           },
@@ -3452,81 +4302,60 @@ const Table = props => {
             return getProps().otherStyles?.tbody?.class;
           }
         }), false, true);
-        insert(_el$4, createComponent(For, {
+        insert(_el$5, createComponent(For, {
           get each() {
-            return getProps().data();
+            return tableData();
           },
           children: (item, index) => createComponent(For, {
             get each() {
-              return Object.keys(rows()).map(key => parseInt(key)).sort((a, b) => a - b);
+              return rowKeys();
             },
             children: rowNum => {
               return (() => {
-                var _el$9 = _tmpl$3$1();
-                spread(_el$9, mergeProps(() => rowStyleFactory(rowNum)?.all, {
+                var _el$10 = _tmpl$4();
+                spread(_el$10, mergeProps(() => rowStyleFactory?.(rowNum)?.all, {
                   get style() {
-                    return rowStyleFactory(rowNum)?.style;
+                    return rowStyleFactory?.(rowNum)?.style;
                   },
                   "onClick": e => {
-                    e.stopPropagation();
-                    e.preventDefault();
-                    // @ts-ignore
-                    if (Object.keys(rowStyleFactory(rowNum).all).includes('isDropHeader')) {
-                      setDropOpenStore(index(), !!!dropOpenStore[index()]);
+                    const firstColumn = reactiveColumns()?.[0];
+                    const rowData = rows()?.[rowNum]?.[firstColumn];
+                    // Only toggle dropdown state if this is a header row
+                    if (rowData?.dropHeader === true) {
+                      e.preventDefault();
+                      setDropOpenStore(index(), !dropOpenStore[index()]);
+                    }
+                    // Call any additional click handlers
+                    if (rowStyleFactory !== undefined) {
+                      const onClick = rowStyleFactory(rowNum).all?.onClick;
+                      if (typeof onClick === 'function') {
+                        onClick(e);
+                      }
                     }
-                    // @ts-ignore
-                    rowStyleFactory(rowNum).all?.onClick?.(e);
                   },
                   get ["class"]() {
-                    return rowStyleFactory(rowNum)?.class;
+                    return `${dropRowStyle(rowNum, index())} ${rowStyleFactory?.(rowNum)?.all?.class ?? ''}`;
                   }
                 }), false, true);
-                insert(_el$9, createComponent(For, {
-                  get each() {
-                    return getProps().columns;
+                insert(_el$10, createComponent(TableRowColumns, {
+                  reactiveColumns: reactiveColumns,
+                  rows: rows,
+                  rowNum: rowNum,
+                  get index() {
+                    return index();
                   },
-                  children: column => {
-                    const tableSpot = rows()[rowNum]?.[column];
-                    const cell = tableSpot?.element;
-                    if (!!tableSpot?.dropRow) {
-                      setDropOpenStore(index(), old => old ?? false);
-                      return (() => {
-                        var _el$10 = _tmpl$5();
-                        insert(_el$10, () => cell(item, index()));
-                        createRenderEffect(_p$ => {
-                          var _v$6 = `${styles$1.dropRow} ${!!dropOpenStore[index()] === true ? styles$1.openDropRow : ''} `,
-                            _v$7 = getProps().columns.length;
-                          _v$6 !== _p$.e && className(_el$10, _p$.e = _v$6);
-                          _v$7 !== _p$.t && setAttribute(_el$10, "colspan", _p$.t = _v$7);
-                          return _p$;
-                        }, {
-                          e: undefined,
-                          t: undefined
-                        });
-                        return _el$10;
-                      })();
-                    }
-                    return !isNullish(cell) ? (() => {
-                      var _el$11 = _tmpl$5();
-                      spread(_el$11, mergeProps(() => cellStyle?.()?.[rowNum]?.[column]?.all, {
-                        get style() {
-                          return cellStyle()[rowNum]?.[column]?.style;
-                        },
-                        get ["class"]() {
-                          return cellStyle()[rowNum]?.[column]?.class;
-                        }
-                      }), false, true);
-                      insert(_el$11, () => cell(item, index()));
-                      return _el$11;
-                    })() : [];
-                  }
+                  setDropOpenStore: setDropOpenStore,
+                  renderCell: renderCell,
+                  item: item,
+                  dropOpenStore: dropOpenStore,
+                  cellStyle: cellStyle
                 }));
-                return _el$9;
+                return _el$10;
               })();
             }
           })
         }));
-        spread(_el$5, mergeProps(() => getProps()?.otherStyles?.tfoot?.all, {
+        spread(_el$6, mergeProps(() => getProps()?.otherStyles?.tfoot?.all, {
           get style() {
             return getProps().otherStyles?.tfoot?.style;
           },
@@ -3534,14 +4363,14 @@ const Table = props => {
             return getProps().otherStyles?.tfoot?.class;
           }
         }), false, true);
-        insert(_el$5, createComponent(For, {
+        insert(_el$6, createComponent(For, {
           get each() {
             return Object.keys(footerCell()).map(key => parseInt(key)).sort((a, b) => a - b);
           },
           children: rowNum => {
             return (() => {
-              var _el$12 = _tmpl$3$1();
-              spread(_el$12, mergeProps(() => footerStyle()[rowNum]?.all, {
+              var _el$11 = _tmpl$4();
+              spread(_el$11, mergeProps(() => footerStyle()[rowNum]?.all, {
                 get style() {
                   return footerStyle()[rowNum]?.style;
                 },
@@ -3549,15 +4378,15 @@ const Table = props => {
                   return footerStyle()[rowNum]?.class;
                 }
               }), false, true);
-              insert(_el$12, createComponent(For, {
+              insert(_el$11, createComponent(For, {
                 get each() {
-                  return getProps().columns;
+                  return reactiveColumns();
                 },
                 children: column => {
                   const footCell = footerCell()[rowNum]?.[column];
                   return !!footCell ? (() => {
-                    var _el$13 = _tmpl$5();
-                    spread(_el$13, mergeProps(() => footCellStyle()?.[rowNum]?.[column]?.all, {
+                    var _el$12 = _tmpl$6();
+                    spread(_el$12, mergeProps(() => footCellStyle()?.[rowNum]?.[column]?.all, {
                       get style() {
                         return footCellStyle()[rowNum]?.[column]?.style;
                       },
@@ -3565,33 +4394,70 @@ const Table = props => {
                         return footCellStyle()[rowNum]?.[column]?.class;
                       }
                     }), false, true);
-                    insert(_el$13, footCell);
-                    return _el$13;
+                    insert(_el$12, footCell);
+                    return _el$12;
                   })() : [];
                 }
               }));
-              return _el$12;
+              return _el$11;
             })();
           }
         }));
         createRenderEffect(_p$ => {
           var _v$ = getProps().id,
-            _v$2 = `${styles$1.table} ${getProps().class}`,
+            _v$2 = `${styles$1.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$9(_el$, _v$3, _p$.a);
+          _v$ !== _p$.e && setAttribute(_el$2, "id", _p$.e = _v$);
+          _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
+          _p$.a = style$9(_el$2, _v$3, _p$.a);
           return _p$;
         }, {
           e: undefined,
           t: undefined,
           a: undefined
         });
-        return _el$;
+        return _el$2;
       })(), createMemo(() => props.children)];
     }
   }));
 };
+const TableRowColumns = props => {
+  return createComponent(For, {
+    get each() {
+      return props.reactiveColumns();
+    },
+    children: column => {
+      // Initialize dropdown state for this row if dropdown capabilities exist
+      if (props.rows()[props.rowNum]?.[column]?.dropRow === true || props.rows()[props.rowNum]?.[column]?.dropHeader === true) {
+        // Initialize with closed state if not already set
+        if (props.dropOpenStore[props.index] === undefined) {
+          props.setDropOpenStore(props.index, false);
+        }
+      }
+      if (Object.keys(props.rows()[props.rowNum]?.[column] ?? {}).includes('dropRow') && props.rows()[props.rowNum]?.[column]?.dropRow !== false) {
+        return (() => {
+          var _el$13 = _tmpl$6();
+          insert(_el$13, () => props.renderCell(props.rows()[props.rowNum]?.[column]?.element, props.item, props.index));
+          createRenderEffect(() => setAttribute(_el$13, "colspan", props.reactiveColumns().length));
+          return _el$13;
+        })();
+      }
+      return !isNullish(props.rows()[props.rowNum]?.[column]?.element) ? (() => {
+        var _el$14 = _tmpl$6();
+        spread(_el$14, mergeProps(() => props.cellStyle?.()?.[props.rowNum]?.[column]?.all, {
+          get style() {
+            return props.cellStyle()[props.rowNum]?.[column]?.style;
+          },
+          get ["class"]() {
+            return props.cellStyle()[props.rowNum]?.[column]?.class;
+          }
+        }), false, true);
+        insert(_el$14, () => props.renderCell(props.rows()[props.rowNum]?.[column]?.element, props.item, props.index));
+        return _el$14;
+      })() : [];
+    }
+  });
+};
 
 const Row = props => {
   const [local, others] = splitProps(props, ["rowNumber", "children", "class", "style", "header", "footer"]);
@@ -3634,52 +4500,133 @@ const Row = props => {
 
 const Column = props => {
   const {
-    addColumnStyle
+    addColumnStyle,
+    removeColumnStyle,
+    refresh
   } = useTableContext();
   const [local, others] = splitProps(props, ["name", "rowNumber", "children", "class", "style"]);
+  // Track the name to handle changes
+  let currentName = local.name;
+  // Create a reactive effect to update styles
   createEffect(() => {
-    addColumnStyle?.(local.name, {
+    const newName = local.name;
+    refresh();
+    // If the name has changed, remove the old style
+    if (currentName !== newName && currentName && removeColumnStyle) {
+      removeColumnStyle(currentName);
+    }
+    // Update the current name
+    currentName = newName;
+    // Add the style with the new name
+    addColumnStyle?.(newName, {
       class: local.class,
       style: local.style,
       all: others
     });
   });
+  // Clean up when the component is unmounted
+  onCleanup(() => {
+    if (removeColumnStyle && currentName) {
+      removeColumnStyle(currentName);
+    }
+  });
   return createComponent(ColumnProvider, {
     get name() {
-      return props?.name ?? ``;
+      return local.name ?? ``;
     },
     get children() {
-      return props.children;
+      return local.children;
     }
   });
 };
 
 const Cell = props => {
-  const {
-    name
-  } = useColumnContext();
+  const columnContext = useColumnContext();
   const {
     addFooterCell,
     addFootCellStyle,
+    removeFooterCell,
     addRowCell,
-    addCellStyle
+    addCellStyle,
+    removeRowCell,
+    refresh
   } = useTableContext();
-  const [local, others] = splitProps(props, ["children", "class", "style", "footer", "rowNumber"]);
+  const [local, others] = splitProps(props, ["children", "class", "style", "footer", "rowNumber", "header"]);
+  // Get the column name from context or props
+  const cellName = () => columnContext.name;
+  // Get the current row number with a default of 1
+  const rowNumber = () => (local?.rowNumber ?? 1) - 1;
+  // Track registrations for cleanup
+  let registeredAsFooter = false;
+  let registeredAsRow = false;
   createEffect(() => {
-    if (Object.keys(props).includes('footer') && props.footer !== false) {
-      addFooterCell?.((local?.rowNumber ?? 1) - 1, name, local.children);
-      addFootCellStyle?.((local?.rowNumber ?? 1) - 1, name, {
-        class: local.class,
-        style: local.style,
-        all: others
-      });
+    refresh();
+    const name = cellName();
+    const row = rowNumber();
+    props.children;
+    // Skip if no valid column name
+    if (!name) return;
+    // First clean up any previous registrations
+    if (registeredAsFooter) {
+      removeFooterCell?.(row, name);
+      registeredAsFooter = false;
+    }
+    if (registeredAsRow) {
+      removeRowCell?.(row, name);
+      registeredAsRow = false;
+    }
+    // Register based on current props
+    const isFooter = local.footer === true;
+    const isHeader = local.header === true;
+    if (isFooter) {
+      // Handle footer cell registration
+      if (addFooterCell && addFootCellStyle) {
+        addFooterCell(row, name, local.children);
+        addFootCellStyle(row, name, {
+          class: local.class,
+          style: local.style,
+          all: others
+        });
+        registeredAsFooter = true;
+      }
+    } else if (!isHeader) {
+      // Handle regular data cell registration
+      if (addRowCell && addCellStyle) {
+        addRowCell(row, name, local.children);
+        addCellStyle(row, name, {
+          class: local.class,
+          style: local.style,
+          all: {
+            ...others,
+            colSpan: others?.colSpan ?? 1
+          }
+        });
+        registeredAsRow = true;
+      }
     } else {
-      addRowCell?.((local?.rowNumber ?? 1) - 1, name, local.children);
-      addCellStyle?.((local?.rowNumber ?? 1) - 1, name, {
-        class: local.class,
-        style: local.style,
-        all: others
-      });
+      // Handle header cell registration
+      if (addRowCell && addCellStyle) {
+        addRowCell(row, name, local.children);
+        addCellStyle(row, name, {
+          class: local.class,
+          style: local.style,
+          all: others
+        });
+        registeredAsRow = true;
+      }
+    }
+  });
+  // Clean up registered cells when component unmounts
+  onCleanup(() => {
+    const name = cellName();
+    const row = rowNumber();
+    if (name) {
+      if (registeredAsFooter && removeFooterCell) {
+        removeFooterCell(row, name);
+      }
+      if (registeredAsRow && removeRowCell) {
+        removeRowCell(row, name);
+      }
     }
   });
   return [];
@@ -3696,6 +4643,7 @@ const Header = props => {
   }
   const [local, others] = splitProps(props, ["children", "class", "style", "rowNumber"]);
   createEffect(() => {
+    tableContext.refresh();
     tableContext?.addHeaderCell?.(columnInfo.name, (props?.rowNumber ?? 1) - 1, local.children);
     tableContext?.addHeaderStyle?.(columnInfo.name, (props?.rowNumber ?? 1) - 1, {
       class: local.class,
@@ -3869,4 +4817,4 @@ const ColeError = props => {
   return [];
 };
 
-export { Body, Button, Carousel, Cell, Chip, Chipbar, Column, Container, ExpansionPanel, ColeError as FieldError, Form, FormField, FormGroup, Header, Icon, Input, Menu, MenuDropdown, MenuItem, Modal, Option, Row, Select, SelectContext, Slide, SnackbarController, TabBar, Table, TextArea, Validators, addSnackbar, addTheme, carouselTitleContext };
+export { Body, Button, Carousel, Cell, Checkbox, Chip, Chipbar, Column, Container, ExpansionPanel, ColeError as FieldError, Form, FormArray, FormField, FormGroup, Header, Icon, Input, Menu, MenuDropdown, MenuItem, Modal, Option, Radio, RadioGroup, RadioGroupContext, Row, Select, Slide, SnackbarController, TabBar, Table, TextArea, Validators, addSnackbar, addTheme, carouselTitleContext };