coles-solid-library 0.3.2 → 0.3.5

package/dist/index.esm.js

@@ -516,8 +516,8 @@ function styleInject(css, ref) {
   }
 }
 
-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"};
+var css_248z$j = ".Button-module_customButtonStyle__RCNcn {\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-module_customButtonStyle__RCNcn:active {\n  transform: scale(0.9);\n  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);\n}\n.Button-module_customButtonStyle__RCNcn:not(:disabled):hover {\n  cursor: pointer;\n  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);\n}\n.Button-module_customButtonStyle__RCNcn:disabled:hover {\n  cursor: not-allowed;\n}\n\n.Button-module_primary__st6yY {\n  background-color: var(--primary-color, #4CAF50);\n  color: var(--on-primary-color, #fff);\n}\n\n.Button-module_primaryVariant__ObiQc {\n  background-color: var(--primary-color-varient, #43A047);\n  color: var(--on-primary-color, #fff);\n}\n\n.Button-module_secondary__j-3rj {\n  background-color: var(--secondary-color, #14b9c3);\n  color: var(--on-secondary-color, #000000);\n}\n\n.Button-module_secondaryVariant__xFdCV {\n  background-color: var(--secondary-color-varient, #0b969f);\n  color: var(--on-secondary-color, #000000);\n}\n\n.Button-module_background__ebjke {\n  background-color: var(--background-color, #ffffff);\n  color: var(--on-background-color, #000000);\n}\n\n.Button-module_surface__wzdJD {\n  background-color: var(--surface-color, #EEEEEE);\n  color: var(--on-surface-color, #000000);\n}\n\n.Button-module_surfaceVariant__SkL3X {\n  background-color: var(--surface-color-variant, #ccc);\n  color: var(--on-surface-color, #000000);\n}\n\n.Button-module_container__0j8md {\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n}\n\n.Button-module_error__1zBsf {\n  background-color: var(--error-color, #B00020);\n  color: var(--on-error-color, #ffffff);\n}\n\n.Button-module_borderPrimary__k5fYt {\n  border: 1px solid var(--primary-color, #4CAF50);\n}\n\n.Button-module_borderPrimaryVariant__-uFUm {\n  border: 1px solid var(--primary-color-varient, #43A047);\n}\n\n.Button-module_borderSecondary__hzoGk {\n  border: 1px solid var(--secondary-color, #14b9c3);\n}\n\n.Button-module_borderSecondaryVariant__-75Li {\n  border: 1px solid var(--secondary-color-varient, #0b969f);\n}\n\n.Button-module_borderBackground__Uyf-G {\n  border: 1px solid var(--background-color, #ffffff);\n}\n\n.Button-module_borderSurface__q9bRE {\n  border: 1px solid var(--surface-color, #EEEEEE);\n}\n\n.Button-module_borderSurfaceVariant__ZHVd0 {\n  border: 1px solid var(--surface-color-variant, #ccc);\n}\n\n.Button-module_borderContainer__mXwj- {\n  border: 1px solid var(--container-color, #ffffff);\n}\n\n.Button-module_borderError__IChtd {\n  border: 1px solid var(--error-color, #B00020);\n}\n\n.Button-module_none__YrUD1 {\n  border: none;\n}\n\n.Button-module_transparent__6v0QA {\n  background-color: transparent !important;\n  border: none;\n  outline: none;\n  padding: 0px;\n  margin: 0px;\n}";
+var style$8 = {"customButtonStyle":"Button-module_customButtonStyle__RCNcn","primary":"Button-module_primary__st6yY","primaryVariant":"Button-module_primaryVariant__ObiQc","secondary":"Button-module_secondary__j-3rj","secondaryVariant":"Button-module_secondaryVariant__xFdCV","background":"Button-module_background__ebjke","surface":"Button-module_surface__wzdJD","surfaceVariant":"Button-module_surfaceVariant__SkL3X","container":"Button-module_container__0j8md","error":"Button-module_error__1zBsf","borderPrimary":"Button-module_borderPrimary__k5fYt","borderPrimaryVariant":"Button-module_borderPrimaryVariant__-uFUm","borderSecondary":"Button-module_borderSecondary__hzoGk","borderSecondaryVariant":"Button-module_borderSecondaryVariant__-75Li","borderBackground":"Button-module_borderBackground__Uyf-G","borderSurface":"Button-module_borderSurface__q9bRE","borderSurfaceVariant":"Button-module_borderSurfaceVariant__ZHVd0","borderContainer":"Button-module_borderContainer__mXwj-","borderError":"Button-module_borderError__IChtd","none":"Button-module_none__YrUD1","transparent":"Button-module_transparent__6v0QA"};
 styleInject(css_248z$j);
 
 var _tmpl$$o = /*#__PURE__*/template(`<button>`);
@@ -564,7 +564,7 @@ const Button = props => {
     }, _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 ?? ""} `;
+        return `${style$8?.[local?.theme ?? "container"] ?? ''} ${style$8?.[getBorderThemeName(local?.borderTheme ?? 'none')] ?? ''} ${style$8?.customButtonStyle} ${transparent()} ${props?.class ?? ""}`;
       }
     }), false, true);
     insert(_el$, () => props.children);
@@ -1015,167 +1015,6 @@ function useFormProvider() {
   return context;
 }
 
-/**
- * Sets the theme attribute on the document body.
- *  - 'dark' or 'light'
- * @param theme - The theme to set. Defaults to 'dark'.
- */
-function addTheme(theme = 'dark') {
-  document.body.setAttribute('data-theme', theme);
-}
-function isNullish(params) {
-  return params === null || params === undefined;
-}
-// doesn't give mobile by resolution, but by user agent
-function isMobile() {
-  let check = false;
-  (function (a) {
-    if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55\/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk\/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(a.substr(0, 4))) check = true;
-  })(navigator.userAgent || navigator.vendor);
-  return check;
-}
-function Clone(obj, maintainFunctions, seen = new WeakMap()) {
-  // Return non-objects or null directly.
-  if (obj === null || typeof obj !== 'object') {
-    return obj;
-  }
-  // Handle Date objects.
-  if (obj instanceof Date) {
-    return new Date(obj.getTime());
-  }
-  // Handle RegExp objects.
-  if (obj instanceof RegExp) {
-    return new RegExp(obj);
-  }
-  // Handle circular references.
-  if (seen.has(obj)) {
-    return seen.get(obj);
-  }
-  // Handle arrays.
-  if (Array.isArray(obj)) {
-    const arr = [];
-    seen.set(obj, arr);
-    obj.forEach((item, index) => {
-      arr[index] = Clone(item, maintainFunctions, seen);
-    });
-    return arr;
-  }
-  // Handle functions.
-  if (typeof obj === 'function') {
-    // If maintainFunctions is true, copy the function reference.
-    return maintainFunctions ? obj : undefined;
-  }
-  // Handle generic objects.
-  const clonedObj = {};
-  seen.set(obj, clonedObj);
-  for (const key in obj) {
-    if (Object.prototype.hasOwnProperty.call(obj, key)) {
-      const value = obj[key];
-      if (typeof value === 'function') {
-        // Optionally include function properties.
-        clonedObj[key] = undefined;
-      } else {
-        clonedObj[key] = Clone(value, maintainFunctions, seen);
-      }
-    }
-  }
-  return clonedObj;
-}
-
-// export function useClickOutside(
-//   ref: Accessor<AllHTMLElements | undefined | null>, 
-//   handler: (e: MouseEvent) => void
-// ) {
-//   const mouse: Accessor<{x:number;y:number;}> = useEventSignal("mousemove", {x: 0, y: 0}, (e, set) => {
-//     set({x: (e as MouseEvent).clientX, y: (e as MouseEvent).clientY});
-//   });
-//   const listener = (e: MouseEvent) => {
-//     if (isNullish(ref())) return;
-//     const mousePos = mouse();
-//     const {top, bottom, left, right} = ref()!.getBoundingClientRect();
-//     const conditions = [
-//       mousePos.x < left,
-//       mousePos.x > right,
-//       mousePos.y < top,export function useClickOutside(
-//   ref: Accessor<AllHTMLElements | undefined | null>, 
-//   handler: (e: MouseEvent) => void
-// ) {
-//   const mouse: Accessor<{x:number;y:number;}> = useEventSignal("mousemove", {x: 0, y: 0}, (e, set) => {
-//     set({x: (e as MouseEvent).clientX, y: (e as MouseEvent).clientY});
-//   });
-//   const listener = (e: MouseEvent) => {
-//     if (isNullish(ref())) return;
-//     const mousePos = mouse();
-//     const {top, bottom, left, right} = ref()!.getBoundingClientRect();
-//     const conditions = [
-//       mousePos.x < left,
-//       mousePos.x > right,
-//       mousePos.y < top,
-//       mousePos.y > bottom
-//     ]
-//     if (conditions.includes(true)) {
-//       handler(e)
-//     };
-//   };
-//   (ref() as HTMLElement)?.addEventListener("click", listener);
-//   onCleanup(() => {
-//     (ref() as HTMLElement)?.removeEventListener("click", listener);
-//   });
-// };
-//       mousePos.y > bottom
-//     ]
-//     if (conditions.includes(true)) {
-//       handler(e)
-//     };
-//   };
-//   (ref() as HTMLElement)?.addEventListener("click", listener);
-//   onCleanup(() => {
-//     (ref() as HTMLElement)?.removeEventListener("click", listener);
-//   });
-// };
-/**
- * A hook that executes a callback when clicking outside of all specified elements.
- *
- * @param elementRefs - An array of signals (accessors) returning target HTMLElements (or undefined initially).
- * @param callback - The function to execute when a click occurs outside all the target elements.
- */
-function useClickOutside(elementRefs, callback) {
-  // Handler that checks if the click is outside all the elements.
-  const handleClick = event => {
-    // Loop through each element reference.
-    for (const ref of elementRefs) {
-      const el = ref();
-      // If the element exists and the click occurred inside it, do nothing.
-      if (el && el.contains(event.target)) {
-        return;
-      }
-    }
-    // If the click was not inside any of the referenced elements, execute the callback.
-    callback();
-  };
-  // Set up the event listener when the component mounts.
-  onMount(() => {
-    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('pointerdown', handleClick);
-  });
-}
-
-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"),
   $HAS = Symbol("store-has"),
@@ -1390,6 +1229,170 @@ function createStore(...[store, options]) {
   return [wrappedStore, setStore];
 }
 
+/**
+ * Sets the theme attribute on the document body.
+ *  - 'dark' or 'light'
+ * @param theme - The theme to set. Defaults to 'dark'.
+ */
+function addTheme(theme = 'dark') {
+  document.body.setAttribute('data-theme', theme);
+}
+function isNullish(params) {
+  return params === null || params === undefined;
+}
+// doesn't give mobile by resolution, but by user agent
+function isMobile() {
+  let check = false;
+  (function (a) {
+    if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55\/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk\/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(a.substr(0, 4))) check = true;
+  })(navigator.userAgent || navigator.vendor);
+  return check;
+}
+function CloneStore(value) {
+  return structuredClone(unwrap(value));
+}
+function Clone(obj, maintainFunctions, seen = new WeakMap()) {
+  // Return non-objects or null directly.
+  if (obj === null || typeof obj !== 'object') {
+    return obj;
+  }
+  // Handle Date objects.
+  if (obj instanceof Date) {
+    return new Date(obj.getTime());
+  }
+  // Handle RegExp objects.
+  if (obj instanceof RegExp) {
+    return new RegExp(obj);
+  }
+  // Handle circular references.
+  if (seen.has(obj)) {
+    return seen.get(obj);
+  }
+  // Handle arrays.
+  if (Array.isArray(obj)) {
+    const arr = [];
+    seen.set(obj, arr);
+    obj.forEach((item, index) => {
+      arr[index] = Clone(item, maintainFunctions, seen);
+    });
+    return arr;
+  }
+  // Handle functions.
+  if (typeof obj === 'function') {
+    // If maintainFunctions is true, copy the function reference.
+    return maintainFunctions ? obj : undefined;
+  }
+  // Handle generic objects.
+  const clonedObj = {};
+  seen.set(obj, clonedObj);
+  for (const key in obj) {
+    if (Object.prototype.hasOwnProperty.call(obj, key)) {
+      const value = obj[key];
+      if (typeof value === 'function') {
+        // Optionally include function properties.
+        clonedObj[key] = undefined;
+      } else {
+        clonedObj[key] = Clone(value, maintainFunctions, seen);
+      }
+    }
+  }
+  return clonedObj;
+}
+
+// export function useClickOutside(
+//   ref: Accessor<AllHTMLElements | undefined | null>, 
+//   handler: (e: MouseEvent) => void
+// ) {
+//   const mouse: Accessor<{x:number;y:number;}> = useEventSignal("mousemove", {x: 0, y: 0}, (e, set) => {
+//     set({x: (e as MouseEvent).clientX, y: (e as MouseEvent).clientY});
+//   });
+//   const listener = (e: MouseEvent) => {
+//     if (isNullish(ref())) return;
+//     const mousePos = mouse();
+//     const {top, bottom, left, right} = ref()!.getBoundingClientRect();
+//     const conditions = [
+//       mousePos.x < left,
+//       mousePos.x > right,
+//       mousePos.y < top,export function useClickOutside(
+//   ref: Accessor<AllHTMLElements | undefined | null>, 
+//   handler: (e: MouseEvent) => void
+// ) {
+//   const mouse: Accessor<{x:number;y:number;}> = useEventSignal("mousemove", {x: 0, y: 0}, (e, set) => {
+//     set({x: (e as MouseEvent).clientX, y: (e as MouseEvent).clientY});
+//   });
+//   const listener = (e: MouseEvent) => {
+//     if (isNullish(ref())) return;
+//     const mousePos = mouse();
+//     const {top, bottom, left, right} = ref()!.getBoundingClientRect();
+//     const conditions = [
+//       mousePos.x < left,
+//       mousePos.x > right,
+//       mousePos.y < top,
+//       mousePos.y > bottom
+//     ]
+//     if (conditions.includes(true)) {
+//       handler(e)
+//     };
+//   };
+//   (ref() as HTMLElement)?.addEventListener("click", listener);
+//   onCleanup(() => {
+//     (ref() as HTMLElement)?.removeEventListener("click", listener);
+//   });
+// };
+//       mousePos.y > bottom
+//     ]
+//     if (conditions.includes(true)) {
+//       handler(e)
+//     };
+//   };
+//   (ref() as HTMLElement)?.addEventListener("click", listener);
+//   onCleanup(() => {
+//     (ref() as HTMLElement)?.removeEventListener("click", listener);
+//   });
+// };
+/**
+ * A hook that executes a callback when clicking outside of all specified elements.
+ *
+ * @param elementRefs - An array of signals (accessors) returning target HTMLElements (or undefined initially).
+ * @param callback - The function to execute when a click occurs outside all the target elements.
+ */
+function useClickOutside(elementRefs, callback) {
+  // Handler that checks if the click is outside all the elements.
+  const handleClick = event => {
+    // Loop through each element reference.
+    for (const ref of elementRefs) {
+      const el = ref();
+      // If the element exists and the click occurred inside it, do nothing.
+      if (el && el.contains(event.target)) {
+        return;
+      }
+    }
+    // If the click was not inside any of the referenced elements, execute the callback.
+    callback();
+  };
+  // Set up the event listener when the component mounts.
+  onMount(() => {
+    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('pointerdown', handleClick);
+  });
+}
+
+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);
+
 var _tmpl$$j = /*#__PURE__*/template(`<form>`);
 const FormContext = createContext();
 const useFormContext = () => {
@@ -1399,7 +1402,7 @@ const Form = props => {
   const startData = props.data.get() ?? {};
   return createComponent(Provider, {
     get value() {
-      return Clone(startData);
+      return CloneStore(startData);
     },
     get formGroup() {
       return props.data;
@@ -1413,7 +1416,7 @@ const FormInner = props => {
   const [formRef, setFormRef] = createSignal();
   const formData = useFormContext();
   const submitFunction = e => {
-    const submitData = Clone(formData?.data ?? {});
+    const submitData = CloneStore(formData?.data ?? {});
     e.preventDefault();
     if (formData.formGroup.validate()) {
       props?.onSubmit?.(submitData);
@@ -1590,14 +1593,32 @@ function Checkbox(props) {
     const newChecked = target.checked;
     if (props.checked === undefined) {
       setInternalChecked(newChecked);
+      props.onChange?.(newChecked);
+    } else {
+      // Controlled: prevent native state flip from persisting
+      e.preventDefault();
+      // Re-sync DOM to prop (in case browser already toggled visually before preventDefault took effect)
+      queueMicrotask(() => {
+        target.checked = !!props.checked;
+      });
+      props.onChange?.(newChecked);
+    }
+  };
+  const handleClick = e => {
+    if (props.checked !== undefined) {
+      e.preventDefault();
+      const target = e.currentTarget;
+      queueMicrotask(() => {
+        target.checked = !!props.checked;
+      });
     }
-    props.onChange?.(newChecked);
   };
   return (() => {
     var _el$ = _tmpl$$h(),
       _el$2 = _el$.firstChild,
       _el$3 = _el$2.nextSibling;
     _el$2.addEventListener("change", handleChange);
+    _el$2.$$click = handleClick;
     insert(_el$, (() => {
       var _c$ = createMemo(() => !!props.label);
       return () => _c$() && (() => {
@@ -1636,6 +1657,7 @@ function Checkbox(props) {
     return _el$;
   })();
 }
+delegateEvents(["click"]);
 
 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"};
@@ -1878,11 +1900,29 @@ function Select(props) {
       }
     }
   });
+  const VIEWPORT_MARGIN = 4; // minimal gap from screen edges
+  const getDropdownMetrics = () => {
+    const dr = dropdownRef();
+    if (!dr) return {
+      height: 0,
+      width: 0
+    };
+    const rect = dr.getBoundingClientRect();
+    // When scaled closed, height can be 0; fallback to scrollHeight
+    const height = rect.height === 0 ? dr.scrollHeight || rect.height : rect.height;
+    return {
+      height,
+      width: rect.width
+    };
+  };
   const dropdownBelowScreen = () => {
-    if (menuLocRef() && dropdownRef()) {
-      const selectRect = menuLocRef().getBoundingClientRect();
-      const dropdownRect = dropdownRef().getBoundingClientRect();
-      return selectRect.bottom + dropdownRect.height > window.innerHeight;
+    const menuLoc = menuLocRef();
+    if (menuLoc && dropdownRef()) {
+      const selectRect = menuLoc.getBoundingClientRect();
+      const {
+        height
+      } = getDropdownMetrics();
+      return selectRect.bottom + height + VIEWPORT_MARGIN > window.innerHeight && selectRect.top - height - VIEWPORT_MARGIN >= 0 ? true : selectRect.bottom + height + VIEWPORT_MARGIN > window.innerHeight;
     }
     return false;
   };
@@ -1941,20 +1981,49 @@ function Select(props) {
     }
   });
   const updatePosition = () => {
-    const menuLoc = dropdownRef();
+    const dropdown = 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;
+    const anchor = menuLocRef();
+    if (!dropdown || !(select || anchor)) return;
+    const baseRect = (anchor ?? select).getBoundingClientRect();
+    const {
+      height: ddHeight
+    } = getDropdownMetrics();
+    const spaceBelow = window.innerHeight - baseRect.bottom;
+    const spaceAbove = baseRect.top;
+    // Decide orientation: prefer below if it fits fully else choose the side with more space.
+    let placeAbove = false;
+    if (ddHeight + VIEWPORT_MARGIN <= spaceBelow) {
+      placeAbove = false;
+    } else if (ddHeight + VIEWPORT_MARGIN <= spaceAbove) {
+      placeAbove = true;
+    } else {
+      // Neither fits: pick side with more space
+      placeAbove = spaceAbove > spaceBelow;
+    }
+    // store orientation for class assignment
+    setDropTop(placeAbove);
+    let newY;
+    if (!placeAbove) {
+      newY = baseRect.bottom + window.scrollY; // default below
+      // Clamp if overflow
+      if (newY + ddHeight + VIEWPORT_MARGIN > window.scrollY + window.innerHeight) {
+        newY = window.scrollY + window.innerHeight - ddHeight - VIEWPORT_MARGIN;
+      }
+    } else {
+      newY = baseRect.top + window.scrollY - ddHeight; // above
+      if (newY < window.scrollY + VIEWPORT_MARGIN) {
+        newY = window.scrollY + VIEWPORT_MARGIN;
       }
-      menuLoc.style.left = `${newX}px`;
-      menuLoc.style.top = `${newY}px`;
-      menuLoc.style.width = `${selectRect.width}px`;
     }
+    // Final guard: ensure dropdown not negative even for huge heights
+    if (newY < window.scrollY + VIEWPORT_MARGIN) {
+      newY = window.scrollY + VIEWPORT_MARGIN;
+    }
+    const newX = baseRect.left + window.scrollX;
+    dropdown.style.left = `${newX}px`;
+    dropdown.style.top = `${newY}px`;
+    dropdown.style.width = `${baseRect.width}px`;
   };
   // Update width of select to match option text width
   createEffect(() => {
@@ -2038,6 +2107,12 @@ function Select(props) {
   children(() => props.children);
   const selectDropX = createMemo(() => `${selectLocation().x}px`);
   const selectDropY = createMemo(() => `${selectLocation().y}px`);
+  createEffect(() => {
+    if (open()) {
+      // Wait a tick so dropdown renders before measuring
+      queueMicrotask(() => updatePosition());
+    }
+  });
   const providerValue = createMemo(() => ({
     isSelected,
     selectValue,
@@ -2046,6 +2121,8 @@ function Select(props) {
     selectRef,
     selectStyle: currStyle
   }));
+  const [dropTop, setDropTop] = createSignal(false);
+  console.log("Select rendered with options:", options);
   return (() => {
     var _el$7 = _tmpl$5$1(),
       _el$8 = _el$7.firstChild,
@@ -2099,9 +2176,10 @@ function Select(props) {
           get children() {
             var _el$12 = _tmpl$4$1();
             use(setDropdownRef, _el$12);
+            _el$12.style.setProperty("max-height", "calc(100vh - 8px)");
             insert(_el$12, () => props.children);
             createRenderEffect(_p$ => {
-              var _v$ = `${styles$7['solid_select__dropdown']} ${dropdownBelowScreen() ? styles$7.dropTop : styles$7.dropBottom} ${open() ? styles$7.open : ''} ${props.dropdownClass || ""}`,
+              var _v$ = `${styles$7['solid_select__dropdown']} ${dropTop() ? 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`;
@@ -2282,7 +2360,7 @@ const TextArea = props => {
   // sets the field type on mount and sets the height of the textarea
   onMount(() => {
     OnInput();
-    context.setFieldType("textarea");
+    context?.setFieldType("textarea");
   });
   // updates height of textarea when text is changed
   createRenderEffect(() => {
@@ -2291,9 +2369,9 @@ const TextArea = props => {
   });
   createEffect(() => {
     if (Object.keys(props).includes("required") || props?.required === true) {
-      context.setName(old => `${old} *`);
+      context?.setName(old => `${old} *`);
     } else {
-      context.setName(old => old);
+      context?.setName(old => old);
     }
   });
   return (() => {
@@ -2304,17 +2382,17 @@ const TextArea = props => {
     }, _el$);
     spread(_el$, mergeProps(normalProps, {
       "onFocus": e => {
-        if (!isNullish(context.getName)) {
-          context.setFocused(true);
+        if (!isNullish(context?.getName)) {
+          context?.setFocused(true);
         }
       },
       "onBlur": e => {
-        if (context.setFocused) {
-          context.setFocused(false);
+        if (context?.setFocused) {
+          context?.setFocused(false);
         }
       },
       get placeholder() {
-        return !!context.getName && context.getTextInside() && !context.getFocused() ? "" : props.placeholder;
+        return !!context?.getName && context?.getTextInside() && !context?.getFocused() ? "" : props.placeholder;
       },
       get ["class"]() {
         return `${style$4.areaStyle} ${customProps.class ?? ""} ${customProps.transparent ? customProps.transparent : ""}`;
@@ -2325,12 +2403,12 @@ const TextArea = props => {
       "onInput": e => {
         customProps.setText(e.currentTarget.value);
         OnInput();
-        if (!!context.getName && !!e.currentTarget.value.trim()) {
-          context.setValue(e.currentTarget.value);
-          context.setTextInside(true);
+        if (!!context?.getName && !!e.currentTarget.value.trim()) {
+          context?.setValue(e.currentTarget.value);
+          context?.setTextInside(true);
         } else if (!!context.getName && !e.currentTarget.value.trim()) {
-          context.setValue("");
-          context.setTextInside(false);
+          context?.setValue("");
+          context?.setTextInside(false);
         }
       },
       get title() {
@@ -3195,7 +3273,7 @@ class FormArray {
     if (index < 0 || index >= this.internalValues.length) {
       return undefined;
     }
-    return Clone(this.internalValues[index]);
+    return CloneStore(this.internalValues[index]);
   }
   /**
    * Gets a property value from an object at the specified index.
@@ -3727,13 +3805,27 @@ class FormGroup {
     this.errors = createSignal(newErrors);
   }
   get(key) {
-    if (!key) return Clone(this.internalDataSignal[0]);
+    if (!key) return CloneStore(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]);
+    return CloneStore(this.internalDataSignal[0][key]);
+  }
+  /**
+   * Gets the current value of a specific control.
+   *  without cloning the value
+   * @param key - The key of the control to retrieve.
+   * @returns The value of the specified control.
+   */
+  getR(key) {
+    // 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 this.internalDataSignal[0][key];
   }
   /**
    * Gets a specific item from a FormArray at the given index
@@ -3919,16 +4011,17 @@ 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[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"};
+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[isdropheader=true]:focus-visible {\n  outline: 2px solid var(--focus-outline, #2684ff);\n  outline-offset: -2px;\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}\n.table-module_errorCell__-SAJu {\n  color: #b00020;\n  font-style: italic;\n}";
+var styles$1 = {"table":"table-module_table__um-mK","dropRow":"table-module_dropRow__BugV9","openDropRow":"table-module_openDropRow__rjfjd","errorCell":"table-module_errorCell__-SAJu"};
 styleInject(css_248z$1);
 
-var _tmpl$$1 = /*#__PURE__*/template(`<span>Error`),
+var _tmpl$$1 = /*#__PURE__*/template(`<span role=alert aria-label="Cell render error">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>`);
+  _tmpl$6 = /*#__PURE__*/template(`<td role=region aria-label="Dropdown row content">`),
+  _tmpl$7 = /*#__PURE__*/template(`<td>`);
 const Table = props => {
   const [redrawRows, setRedrawRows] = createSignal(false);
   const [mounted, setMounted] = createSignal(false);
@@ -3973,9 +4066,6 @@ const Table = props => {
     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 => {
       const newRows = {
@@ -3988,7 +4078,8 @@ const Table = props => {
       const existingData = old[index]?.[name];
       newRows[index][name] = {
         element: cell,
-        dropRow: !!isDropDown,
+        // Preserve previously established dropdown semantics (set via addRowStyle)
+        dropRow: existingData?.dropRow || !!isDropDown,
         dropHeader: existingData?.dropHeader || false
       };
       return newRows;
@@ -4152,35 +4243,28 @@ const Table = props => {
       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] ?? {};
   };
-  const [dropOpenStore, setDropOpenStore] = createStore([]);
+  // Store open state keyed first by resolved row key (or dataIndex fallback) then by data index
+  const [dropOpenStore, setDropOpenStore] = createStore({});
   // Enhanced renderCell with better type safety and error handling
-  const renderCell = (cell, item, index) => {
+  const renderCell = (cell, item, index, column, row) => {
     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
-        });
+        const ctx = {
+          column,
+          row: row ?? -1,
+          dataIndex: index
+        };
+        console.error('[TableV2] Error rendering cell', error, ctx);
+        const custom = props.onCellError?.(error, ctx);
+        if (custom) return custom;
         return (() => {
           var _el$ = _tmpl$$1();
           createRenderEffect(() => className(_el$, styles$1.errorCell));
@@ -4197,19 +4281,28 @@ const Table = props => {
   onMount(() => {
     setMounted(true);
   });
-  const getIsDropOpen = (rowNum, index) => {
+  const resolveRowKey = (dataItem, dataIndex) => {
+    return props.getRowKey?.(dataItem, dataIndex) ?? dataIndex;
+  };
+  const getIsDropOpen = (rowNum, dataIndex, dataItem) => {
     // 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;
+    // Only treat rows explicitly marked as dropdown content
+    if (rowData?.dropRow) {
+      const key = resolveRowKey(dataItem, dataIndex);
+      return dropOpenStore[key] ?? false;
     }
-    // For dropdown rows, respect the dropdown state
-    return dropOpenStore[index] ?? false;
+    return true; // Non-dropdown rows always visible
   };
-  const dropRowStyle = (rowNum, index) => {
-    return getIsDropOpen(rowNum, index) ? styles$1.openDropRow : styles$1.dropRow;
+  const dropRowStyle = (rowNum, dataIndex, dataItem) => {
+    // Only apply dropRow/openDropRow classes to rows that are dropdown content
+    const firstColumn = reactiveColumns()?.[0];
+    const rowMeta = rows()?.[rowNum]?.[firstColumn ?? ''];
+    if (rowMeta?.dropRow) {
+      return getIsDropOpen(rowNum, dataIndex, dataItem) ? styles$1.openDropRow : styles$1.dropRow;
+    }
+    return '';
   };
   return createComponent(TableProvider, mergeProps(tableContext, {
     get children() {
@@ -4259,6 +4352,14 @@ const Table = props => {
           children: rowNum => {
             return (() => {
               var _el$8 = _tmpl$4();
+              spread(_el$8, mergeProps(() => headerRowStyle()[rowNum]?.all, {
+                get style() {
+                  return headerRowStyle()[rowNum]?.style;
+                },
+                get ["class"]() {
+                  return headerRowStyle()[rowNum]?.class;
+                }
+              }), false, true);
               insert(_el$8, createComponent(For, {
                 get each() {
                   return reactiveColumns();
@@ -4280,16 +4381,6 @@ const Table = props => {
                   })() : [];
                 }
               }));
-              createRenderEffect(_p$ => {
-                var _v$4 = headerRowStyle()[rowNum]?.style,
-                  _v$5 = headerRowStyle()[rowNum]?.class;
-                _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$8;
             })();
           }
@@ -4308,48 +4399,128 @@ const Table = props => {
           },
           children: (item, index) => createComponent(For, {
             get each() {
-              return rowKeys();
+              return Object.keys(rows()).map(key => parseInt(key)).sort((a, b) => a - b);
             },
             children: rowNum => {
+              const dataIndex = index();
+              const resolvedRowKey = resolveRowKey(item, dataIndex);
+              const firstColumn = reactiveColumns()?.[0];
+              const headerCellMeta = rows()?.[rowNum]?.[firstColumn ?? ''];
+              const resolvedKey = resolveRowKey(item, dataIndex);
+              // Initialize dropdown state for header if not yet
+              if (headerCellMeta?.dropHeader && dropOpenStore[resolvedKey] === undefined) {
+                setDropOpenStore(resolvedKey, false);
+              }
+              const firstColumnMeta = rows()?.[rowNum]?.[firstColumn ?? ''];
+              const isContentRow = firstColumnMeta?.dropRow === true;
+              const isOpen = getIsDropOpen(rowNum, dataIndex, item);
+              const computedClass = (() => {
+                const base = dropRowStyle(rowNum, dataIndex, item);
+                return base;
+              })();
               return (() => {
                 var _el$10 = _tmpl$4();
                 spread(_el$10, mergeProps(() => rowStyleFactory?.(rowNum)?.all, {
+                  "data-drop-row": isContentRow ? 'true' : undefined,
+                  "data-drop-open": isContentRow ? isOpen ? 'true' : 'false' : undefined,
                   get style() {
                     return rowStyleFactory?.(rowNum)?.style;
                   },
+                  "data-row-key": resolvedRowKey,
                   "onClick": e => {
-                    const firstColumn = reactiveColumns()?.[0];
-                    const rowData = rows()?.[rowNum]?.[firstColumn];
-                    // Only toggle dropdown state if this is a header row
-                    if (rowData?.dropHeader === true) {
+                    if (headerCellMeta?.dropHeader === true) {
                       e.preventDefault();
-                      setDropOpenStore(index(), !dropOpenStore[index()]);
+                      setDropOpenStore(resolvedRowKey, !dropOpenStore[resolvedRowKey]);
+                      setRedrawRows(r => !r);
                     }
-                    // Call any additional click handlers
+                    // Invoke row-level handler stored by Row component. If original handler declared 2+ params pass data item.
                     if (rowStyleFactory !== undefined) {
-                      const onClick = rowStyleFactory(rowNum).all?.onClick;
-                      if (typeof onClick === 'function') {
-                        onClick(e);
+                      const styleAll = rowStyleFactory(rowNum).all;
+                      const original = styleAll?.__origOnClick ?? styleAll?.onClick;
+                      if (typeof original === 'function') {
+                        try {
+                          if (original.length >= 2) {
+                            original(e, item);
+                          } else {
+                            original(e);
+                          }
+                        } catch (err) {
+                          console.error('[TableV2] Row onClick handler error', err);
+                        }
                       }
                     }
                   },
                   get ["class"]() {
-                    return `${dropRowStyle(rowNum, index())} ${rowStyleFactory?.(rowNum)?.all?.class ?? ''}`;
+                    return `${computedClass} ${rowStyleFactory?.(rowNum)?.all?.class ?? ''}`;
+                  },
+                  get role() {
+                    return headerCellMeta?.dropHeader ? 'button' : undefined;
+                  },
+                  get ["aria-expanded"]() {
+                    return headerCellMeta?.dropHeader ? dropOpenStore[resolvedRowKey] ? 'true' : 'false' : undefined;
+                  },
+                  get tabIndex() {
+                    return headerCellMeta?.dropHeader ? 0 : undefined;
+                  },
+                  "onKeyDown": e => {
+                    const isActivator = e.key === 'Enter' || e.key === ' ';
+                    if (isActivator && headerCellMeta?.dropHeader) {
+                      e.preventDefault();
+                      setDropOpenStore(resolvedRowKey, !dropOpenStore[resolvedRowKey]);
+                      setRedrawRows(r => !r);
+                    }
                   }
                 }), false, true);
-                insert(_el$10, createComponent(TableRowColumns, {
-                  reactiveColumns: reactiveColumns,
-                  rows: rows,
-                  rowNum: rowNum,
-                  get index() {
-                    return index();
-                  },
-                  setDropOpenStore: setDropOpenStore,
-                  renderCell: renderCell,
-                  item: item,
-                  dropOpenStore: dropOpenStore,
-                  cellStyle: cellStyle
-                }));
+                insert(_el$10, () => {
+                  let renderedDropContent = false;
+                  return createComponent(For, {
+                    get each() {
+                      return reactiveColumns();
+                    },
+                    children: column => {
+                      const tableSpot = rows()[rowNum]?.[column];
+                      const cell = tableSpot?.element;
+                      // Dropdown content row: render only once (first occurrence) spanning all columns
+                      if (tableSpot?.dropRow && !renderedDropContent) {
+                        renderedDropContent = true;
+                        return (() => {
+                          var _el$11 = _tmpl$6();
+                          insert(_el$11, () => renderCell(cell, item, index(), column, rowNum));
+                          createRenderEffect(_p$ => {
+                            var _v$4 = reactiveColumns().length,
+                              _v$5 = getIsDropOpen(rowNum, dataIndex, item) ? 'false' : 'true',
+                              _v$6 = getIsDropOpen(rowNum, dataIndex, item) ? 'open' : 'closed';
+                            _v$4 !== _p$.e && setAttribute(_el$11, "colspan", _p$.e = _v$4);
+                            _v$5 !== _p$.t && setAttribute(_el$11, "aria-hidden", _p$.t = _v$5);
+                            _v$6 !== _p$.a && setAttribute(_el$11, "data-drop-state", _p$.a = _v$6);
+                            return _p$;
+                          }, {
+                            e: undefined,
+                            t: undefined,
+                            a: undefined
+                          });
+                          return _el$11;
+                        })();
+                      }
+                      if (tableSpot?.dropRow) {
+                        return []; // Skip duplicate columns within same dropdown row
+                      }
+                      return !isNullish(cell) ? (() => {
+                        var _el$12 = _tmpl$7();
+                        spread(_el$12, mergeProps(() => cellStyle?.()?.[rowNum]?.[column]?.all, {
+                          get style() {
+                            return cellStyle()[rowNum]?.[column]?.style;
+                          },
+                          get ["class"]() {
+                            return cellStyle()[rowNum]?.[column]?.class;
+                          }
+                        }), false, true);
+                        insert(_el$12, () => renderCell(cell, item, index(), column, rowNum));
+                        return _el$12;
+                      })() : [];
+                    }
+                  });
+                });
                 return _el$10;
               })();
             }
@@ -4369,8 +4540,8 @@ const Table = props => {
           },
           children: rowNum => {
             return (() => {
-              var _el$11 = _tmpl$4();
-              spread(_el$11, mergeProps(() => footerStyle()[rowNum]?.all, {
+              var _el$13 = _tmpl$4();
+              spread(_el$13, mergeProps(() => footerStyle()[rowNum]?.all, {
                 get style() {
                   return footerStyle()[rowNum]?.style;
                 },
@@ -4378,15 +4549,15 @@ const Table = props => {
                   return footerStyle()[rowNum]?.class;
                 }
               }), false, true);
-              insert(_el$11, createComponent(For, {
+              insert(_el$13, createComponent(For, {
                 get each() {
                   return reactiveColumns();
                 },
                 children: column => {
                   const footCell = footerCell()[rowNum]?.[column];
                   return !!footCell ? (() => {
-                    var _el$12 = _tmpl$6();
-                    spread(_el$12, mergeProps(() => footCellStyle()?.[rowNum]?.[column]?.all, {
+                    var _el$14 = _tmpl$7();
+                    spread(_el$14, mergeProps(() => footCellStyle()?.[rowNum]?.[column]?.all, {
                       get style() {
                         return footCellStyle()[rowNum]?.[column]?.style;
                       },
@@ -4394,12 +4565,12 @@ const Table = props => {
                         return footCellStyle()[rowNum]?.[column]?.class;
                       }
                     }), false, true);
-                    insert(_el$12, footCell);
-                    return _el$12;
+                    insert(_el$14, footCell);
+                    return _el$14;
                   })() : [];
                 }
               }));
-              return _el$11;
+              return _el$13;
             })();
           }
         }));
@@ -4421,43 +4592,6 @@ const Table = props => {
     }
   }));
 };
-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"]);
@@ -4472,14 +4606,20 @@ const Row = props => {
         tableContext?.addHeaderRowStyle?.(rowNumber, {
           class: local.class,
           style: local.style,
-          all: others
+          all: {
+            ...others,
+            onClick: others.onClick
+          }
         });
         break;
       case props.footer === true || Object.keys(props).includes('footer') && props.footer !== false:
         tableContext?.addFooterRowStyle?.(rowNumber, {
           class: local.class,
           style: local.style,
-          all: others
+          all: {
+            ...others,
+            onClick: others.onClick
+          }
         });
         break;
       default:
@@ -4487,10 +4627,19 @@ const Row = props => {
         const isDropHeader = Object.keys(props).includes('isDropHeader') && props.isDropHeader !== false;
         // @ts-ignore
         const isDropRow = Object.keys(props).includes('isDropRow') && props.isDropRow !== false;
+        // Wrap multi-arity handler into single-param form for storage
+        const storedAll = {
+          ...others
+        };
+        if (typeof others.onClick === 'function') {
+          // Store original; table will decide whether to pass data item based on length
+          storedAll.__origOnClick = others.onClick;
+          storedAll.onClick = e => others.onClick(e); // legacy single param fallback
+        }
         tableContext?.addRowStyle?.(rowNumber, {
           class: local.class,
           style: local.style,
-          all: others
+          all: storedAll
         }, isDropRow, isDropHeader);
         break;
     }
@@ -4501,8 +4650,7 @@ const Row = props => {
 const Column = props => {
   const {
     addColumnStyle,
-    removeColumnStyle,
-    refresh
+    removeColumnStyle
   } = useTableContext();
   const [local, others] = splitProps(props, ["name", "rowNumber", "children", "class", "style"]);
   // Track the name to handle changes
@@ -4510,7 +4658,6 @@ const Column = props => {
   // Create a reactive effect to update styles
   createEffect(() => {
     const newName = local.name;
-    refresh();
     // If the name has changed, remove the old style
     if (currentName !== newName && currentName && removeColumnStyle) {
       removeColumnStyle(currentName);
@@ -4548,8 +4695,7 @@ const Cell = props => {
     removeFooterCell,
     addRowCell,
     addCellStyle,
-    removeRowCell,
-    refresh
+    removeRowCell
   } = useTableContext();
   const [local, others] = splitProps(props, ["children", "class", "style", "footer", "rowNumber", "header"]);
   // Get the column name from context or props
@@ -4560,7 +4706,6 @@ const Cell = props => {
   let registeredAsFooter = false;
   let registeredAsRow = false;
   createEffect(() => {
-    refresh();
     const name = cellName();
     const row = rowNumber();
     props.children;
@@ -4643,12 +4788,14 @@ 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,
       style: local.style,
-      all: others
+      all: {
+        scope: 'col',
+        ...others
+      }
     });
   });
   return [];