coles-solid-library 0.0.1 → 0.0.7

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import { sharedConfig, createRenderEffect, untrack, getOwner, createEffect, runWithOwner, createMemo, createSignal, createRoot, onCleanup, mergeProps, createComponent, Show, onMount, For, splitProps, createContext, useContext, children } from 'solid-js';
+import { sharedConfig, createRenderEffect, untrack, getOwner, createEffect, runWithOwner, createMemo, createSignal, createRoot, onCleanup, mergeProps, createContext, splitProps, useContext, createComponent, Show, onMount, For, children } from 'solid-js';
 
 const booleans = ["allowfullscreen", "async", "autofocus", "autoplay", "checked", "controls", "default", "disabled", "formnovalidate", "hidden", "indeterminate", "inert", "ismap", "loop", "multiple", "muted", "nomodule", "novalidate", "open", "playsinline", "readonly", "required", "reversed", "seamless", "selected"];
 const Properties = /*#__PURE__*/new Set(["className", "value", "readOnly", "formNoValidate", "isMap", "noModule", "playsInline", ...booleans]);
@@ -165,7 +165,7 @@ function classList(node, value, prev = {}) {
   }
   return prev;
 }
-function style(node, value, prev) {
+function style$a(node, value, prev) {
   if (!value) return prev ? setAttribute(node, "style") : value;
   const nodeStyle = node.style;
   if (typeof value === "string") return nodeStyle.cssText = value;
@@ -231,7 +231,7 @@ function toggleClassKey(node, key, value) {
 }
 function assignProp(node, prop, value, prev, isSVG, skipRef, props) {
   let isCE, isProp, isChildProp, propAlias, forceProp;
-  if (prop === "style") return style(node, value, prev);
+  if (prop === "style") return style$a(node, value, prev);
   if (prop === "classList") return classList(node, value, prev);
   if (value === prev) return prev;
   if (prop === "ref") {
@@ -491,17 +491,46 @@ function Portal(props) {
   return marker;
 }
 
-var _tmpl$$d = /*#__PURE__*/template(`<button>`);
+function styleInject(css, ref) {
+  if (ref === void 0) ref = {};
+  var insertAt = ref.insertAt;
+  if (!css || typeof document === 'undefined') {
+    return;
+  }
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z$c = ".Button_menuButtons__XNrBT {\n  list-style: none;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n}\n.Button_menuButtons__XNrBT li {\n  margin: var(--spacing-1, 8px) 0;\n}\n.Button_menuButtons__XNrBT svg {\n  width: 90%;\n  height: 90%;\n}\n\n.Button_menuButton__GdTnd {\n  width: 100%;\n  height: 75%;\n  border-radius: var(--border-radius-md, 8px);\n  padding: var(--spacing-1, 8px);\n}\n.Button_menuButton__GdTnd:hover {\n  cursor: pointer;\n}\n.Button_menuButton__GdTnd:hover link {\n  background-color: var(--tertiary-color);\n}\n\n.Button_customButtonStyle__1TOXE {\n  border-radius: var(--border-radius-lg, 16px);\n  padding: calc(var(--spacing-1, 8px) / 2) calc(var(--spacing-1, 8px));\n  border: none;\n  transition: transform 0.2s ease, background 0.2s ease;\n}\n.Button_customButtonStyle__1TOXE:active {\n  transform: scale(0.9);\n  box-shadow: var(--shadow-elevation-2, 0 3px 6px rgba(0, 0, 0, 0.3));\n}\n.Button_customButtonStyle__1TOXE:not(:disabled):hover {\n  cursor: pointer;\n  box-shadow: var(--shadow-elevation-3, 0 10px 20px rgba(0, 0, 0, 0.45));\n}\n.Button_customButtonStyle__1TOXE:disabled:hover {\n  cursor: not-allowed;\n}\n\n.Button_hover__QXVTm:hover {\n  cursor: pointer;\n}\n\n.Button_primary__auYD2 {\n  background-color: var(--primary-color, #007bff);\n  color: var(--on-primary-color);\n}\n.Button_primary__auYD2:hover {\n  background-color: var(--primary-color-hover);\n}\n.Button_primary__auYD2:active {\n  background-color: var(--primary-color-active);\n}\n\n.Button_accent__eT5vq {\n  background-color: var(--secondary-color);\n  color: var(--on-secondary-color);\n}\n.Button_accent__eT5vq:hover {\n  background-color: var(--secondary-color-hover);\n}\n.Button_accent__eT5vq:active {\n  background-color: var(--secondary-color-active);\n}\n\n.Button_tertiary__PstKO {\n  background-color: var(--tertiary-color);\n  color: var(--on-tertiary-color);\n}\n.Button_tertiary__PstKO:hover {\n  background-color: var(--tertiary-color-hover);\n}\n.Button_tertiary__PstKO:active {\n  background-color: var(--tertiary-color-active);\n}\n\n.Button_transparent__aet0J {\n  background-color: inherit !important;\n  color: inherit !important;\n  border: none;\n  outline: none;\n  padding: 0px;\n  margin: 0px;\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkJ1dHRvbi5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsZ0JBQWdCO0VBQ2hCLFdBQVc7RUFDWCxZQUFZO0VBQ1osU0FBUztFQUNULFVBQVU7QUFDWjtBQUNBO0VBQ0UsK0JBQStCO0FBQ2pDO0FBQ0E7RUFDRSxVQUFVO0VBQ1YsV0FBVztBQUNiOztBQUVBO0VBQ0UsV0FBVztFQUNYLFdBQVc7RUFDWCwyQ0FBMkM7RUFDM0MsOEJBQThCO0FBQ2hDO0FBQ0E7RUFDRSxlQUFlO0FBQ2pCO0FBQ0E7RUFDRSx1Q0FBdUM7QUFDekM7O0FBRUE7RUFDRSw0Q0FBNEM7RUFDNUMsb0VBQW9FO0VBQ3BFLFlBQVk7RUFDWixxREFBcUQ7QUFDdkQ7QUFDQTtFQUNFLHFCQUFxQjtFQUNyQixtRUFBbUU7QUFDckU7QUFDQTtFQUNFLGVBQWU7RUFDZixzRUFBc0U7QUFDeEU7QUFDQTtFQUNFLG1CQUFtQjtBQUNyQjs7QUFFQTtFQUNFLGVBQWU7QUFDakI7O0FBRUE7RUFDRSwrQ0FBK0M7RUFDL0MsOEJBQThCO0FBQ2hDO0FBQ0E7RUFDRSw0Q0FBNEM7QUFDOUM7QUFDQTtFQUNFLDZDQUE2QztBQUMvQzs7QUFFQTtFQUNFLHdDQUF3QztFQUN4QyxnQ0FBZ0M7QUFDbEM7QUFDQTtFQUNFLDhDQUE4QztBQUNoRDtBQUNBO0VBQ0UsK0NBQStDO0FBQ2pEOztBQUVBO0VBQ0UsdUNBQXVDO0VBQ3ZDLCtCQUErQjtBQUNqQztBQUNBO0VBQ0UsNkNBQTZDO0FBQy9DO0FBQ0E7RUFDRSw4Q0FBOEM7QUFDaEQ7O0FBRUE7RUFDRSxvQ0FBb0M7RUFDcEMseUJBQXlCO0VBQ3pCLFlBQVk7RUFDWixhQUFhO0VBQ2IsWUFBWTtFQUNaLFdBQVc7QUFDYiIsImZpbGUiOiJCdXR0b24uc2NzcyIsInNvdXJjZXNDb250ZW50IjpbIi5tZW51QnV0dG9ucyB7XG4gIGxpc3Qtc3R5bGU6IG5vbmU7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIG1hcmdpbjogMDtcbiAgcGFkZGluZzogMDtcbn1cbi5tZW51QnV0dG9ucyBsaSB7XG4gIG1hcmdpbjogdmFyKC0tc3BhY2luZy0xLCA4cHgpIDA7XG59XG4ubWVudUJ1dHRvbnMgc3ZnIHtcbiAgd2lkdGg6IDkwJTtcbiAgaGVpZ2h0OiA5MCU7XG59XG5cbi5tZW51QnV0dG9uIHtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogNzUlO1xuICBib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzLW1kLCA4cHgpO1xuICBwYWRkaW5nOiB2YXIoLS1zcGFjaW5nLTEsIDhweCk7XG59XG4ubWVudUJ1dHRvbjpob3ZlciB7XG4gIGN1cnNvcjogcG9pbnRlcjtcbn1cbi5tZW51QnV0dG9uOmhvdmVyIGxpbmsge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS10ZXJ0aWFyeS1jb2xvcik7XG59XG5cbi5jdXN0b21CdXR0b25TdHlsZSB7XG4gIGJvcmRlci1yYWRpdXM6IHZhcigtLWJvcmRlci1yYWRpdXMtbGcsIDE2cHgpO1xuICBwYWRkaW5nOiBjYWxjKHZhcigtLXNwYWNpbmctMSwgOHB4KSAvIDIpIGNhbGModmFyKC0tc3BhY2luZy0xLCA4cHgpKTtcbiAgYm9yZGVyOiBub25lO1xuICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gMC4ycyBlYXNlLCBiYWNrZ3JvdW5kIDAuMnMgZWFzZTtcbn1cbi5jdXN0b21CdXR0b25TdHlsZTphY3RpdmUge1xuICB0cmFuc2Zvcm06IHNjYWxlKDAuOSk7XG4gIGJveC1zaGFkb3c6IHZhcigtLXNoYWRvdy1lbGV2YXRpb24tMiwgMCAzcHggNnB4IHJnYmEoMCwgMCwgMCwgMC4zKSk7XG59XG4uY3VzdG9tQnV0dG9uU3R5bGU6bm90KDpkaXNhYmxlZCk6aG92ZXIge1xuICBjdXJzb3I6IHBvaW50ZXI7XG4gIGJveC1zaGFkb3c6IHZhcigtLXNoYWRvdy1lbGV2YXRpb24tMywgMCAxMHB4IDIwcHggcmdiYSgwLCAwLCAwLCAwLjQ1KSk7XG59XG4uY3VzdG9tQnV0dG9uU3R5bGU6ZGlzYWJsZWQ6aG92ZXIge1xuICBjdXJzb3I6IG5vdC1hbGxvd2VkO1xufVxuXG4uaG92ZXI6aG92ZXIge1xuICBjdXJzb3I6IHBvaW50ZXI7XG59XG5cbi5wcmltYXJ5IHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tcHJpbWFyeS1jb2xvciwgIzAwN2JmZik7XG4gIGNvbG9yOiB2YXIoLS1vbi1wcmltYXJ5LWNvbG9yKTtcbn1cbi5wcmltYXJ5OmhvdmVyIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tcHJpbWFyeS1jb2xvci1ob3Zlcik7XG59XG4ucHJpbWFyeTphY3RpdmUge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1wcmltYXJ5LWNvbG9yLWFjdGl2ZSk7XG59XG5cbi5hY2NlbnQge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zZWNvbmRhcnktY29sb3IpO1xuICBjb2xvcjogdmFyKC0tb24tc2Vjb25kYXJ5LWNvbG9yKTtcbn1cbi5hY2NlbnQ6aG92ZXIge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zZWNvbmRhcnktY29sb3ItaG92ZXIpO1xufVxuLmFjY2VudDphY3RpdmUge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zZWNvbmRhcnktY29sb3ItYWN0aXZlKTtcbn1cblxuLnRlcnRpYXJ5IHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tdGVydGlhcnktY29sb3IpO1xuICBjb2xvcjogdmFyKC0tb24tdGVydGlhcnktY29sb3IpO1xufVxuLnRlcnRpYXJ5OmhvdmVyIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tdGVydGlhcnktY29sb3ItaG92ZXIpO1xufVxuLnRlcnRpYXJ5OmFjdGl2ZSB7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXRlcnRpYXJ5LWNvbG9yLWFjdGl2ZSk7XG59XG5cbi50cmFuc3BhcmVudCB7XG4gIGJhY2tncm91bmQtY29sb3I6IGluaGVyaXQgIWltcG9ydGFudDtcbiAgY29sb3I6IGluaGVyaXQgIWltcG9ydGFudDtcbiAgYm9yZGVyOiBub25lO1xuICBvdXRsaW5lOiBub25lO1xuICBwYWRkaW5nOiAwcHg7XG4gIG1hcmdpbjogMHB4O1xufSJdfQ== */";
+var style$9 = {"menuButtons":"Button_menuButtons__XNrBT","menuButton":"Button_menuButton__GdTnd","customButtonStyle":"Button_customButtonStyle__1TOXE","hover":"Button_hover__QXVTm","primary":"Button_primary__auYD2","accent":"Button_accent__eT5vq","tertiary":"Button_tertiary__PstKO","transparent":"Button_transparent__aet0J"};
+styleInject(css_248z$c);
+
+var _tmpl$$f = /*#__PURE__*/template(`<button>`);
 const Button = props => {
   const styleTypeConst = props.styleType ?? "accent";
   return (() => {
-    var _el$ = _tmpl$$d();
+    var _el$ = _tmpl$$f();
     spread(_el$, mergeProps(props, {
       "onClick": e => {
         if (props.onClick) props.onClick(e);
       },
       get ["class"]() {
-        return `.${styleTypeConst} .customButtonStyle ${props.transparent ? '.transparent' : ""} ${props.class ?? ""} `;
+        return `${style$9[styleTypeConst]} ${style$9.customButtonStyle} ${props.transparent ? props.transparent : ""} ${props.class ?? ""} `;
       }
     }), false, true);
     insert(_el$, () => props.children);
@@ -509,13 +538,200 @@ const Button = props => {
   })();
 };
 
-var _tmpl$$c = /*#__PURE__*/template(`<span>`),
-  _tmpl$2$7 = /*#__PURE__*/template(`<span>:`),
-  _tmpl$3$4 = /*#__PURE__*/template(`<span><span>`);
+var css_248z$b = ".Carosel-module_carouselHeader__JAhGf {\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  border-bottom: 1px dotted;\n}\n.Carosel-module_carouselHeader__JAhGf div {\n  flex-grow: 1;\n  text-align: center;\n}\n.Carosel-module_carouselHeader__JAhGf button {\n  flex-basis: 1;\n}\n\n.Carosel-module_carousel__cHoMx {\n  position: relative;\n  width: 100%;\n  margin: auto;\n  overflow: hidden;\n  border: 2px solid #ddd;\n  border-radius: 10px;\n}\n\n.Carosel-module_carouselSlides__MgPU3 {\n  display: flex;\n  transition: transform 0.5s ease-in-out;\n  width: 100%;\n  height: 100%;\n}\n\n.Carosel-module_carouselSlide__--NkY {\n  min-width: 100%;\n  padding: 5px;\n  box-sizing: border-box;\n}\n\n.Carosel-module_carouselButton__E1gGu {\n  opacity: 0.5;\n  color: white;\n  border: none;\n  padding: 10px;\n  cursor: pointer;\n}\n.Carosel-module_carouselButton__E1gGu:hover {\n  opacity: 1;\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNhcm9zZWwubW9kdWxlLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxhQUFhO0VBQ2IsbUJBQW1CO0VBQ25CLFdBQVc7RUFDWCx5QkFBeUI7QUFDM0I7QUFDQTtFQUNFLFlBQVk7RUFDWixrQkFBa0I7QUFDcEI7QUFDQTtFQUNFLGFBQWE7QUFDZjs7QUFFQTtFQUNFLGtCQUFrQjtFQUNsQixXQUFXO0VBQ1gsWUFBWTtFQUNaLGdCQUFnQjtFQUNoQixzQkFBc0I7RUFDdEIsbUJBQW1CO0FBQ3JCOztBQUVBO0VBQ0UsYUFBYTtFQUNiLHNDQUFzQztFQUN0QyxXQUFXO0VBQ1gsWUFBWTtBQUNkOztBQUVBO0VBQ0UsZUFBZTtFQUNmLFlBQVk7RUFDWixzQkFBc0I7QUFDeEI7O0FBRUE7RUFDRSxZQUFZO0VBQ1osWUFBWTtFQUNaLFlBQVk7RUFDWixhQUFhO0VBQ2IsZUFBZTtBQUNqQjtBQUNBO0VBQ0UsVUFBVTtBQUNaIiwiZmlsZSI6IkNhcm9zZWwubW9kdWxlLnNjc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuY2Fyb3VzZWxIZWFkZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogcm93O1xuICB3aWR0aDogMTAwJTtcbiAgYm9yZGVyLWJvdHRvbTogMXB4IGRvdHRlZDtcbn1cbi5jYXJvdXNlbEhlYWRlciBkaXYge1xuICBmbGV4LWdyb3c6IDE7XG4gIHRleHQtYWxpZ246IGNlbnRlcjtcbn1cbi5jYXJvdXNlbEhlYWRlciBidXR0b24ge1xuICBmbGV4LWJhc2lzOiAxO1xufVxuXG4uY2Fyb3VzZWwge1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIHdpZHRoOiAxMDAlO1xuICBtYXJnaW46IGF1dG87XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIGJvcmRlcjogMnB4IHNvbGlkICNkZGQ7XG4gIGJvcmRlci1yYWRpdXM6IDEwcHg7XG59XG5cbi5jYXJvdXNlbFNsaWRlcyB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIHRyYW5zaXRpb246IHRyYW5zZm9ybSAwLjVzIGVhc2UtaW4tb3V0O1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xufVxuXG4uY2Fyb3VzZWxTbGlkZSB7XG4gIG1pbi13aWR0aDogMTAwJTtcbiAgcGFkZGluZzogNXB4O1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xufVxuXG4uY2Fyb3VzZWxCdXR0b24ge1xuICBvcGFjaXR5OiAwLjU7XG4gIGNvbG9yOiB3aGl0ZTtcbiAgYm9yZGVyOiBub25lO1xuICBwYWRkaW5nOiAxMHB4O1xuICBjdXJzb3I6IHBvaW50ZXI7XG59XG4uY2Fyb3VzZWxCdXR0b246aG92ZXIge1xuICBvcGFjaXR5OiAxO1xufSJdfQ== */";
+var style$8 = {"carouselHeader":"Carosel-module_carouselHeader__JAhGf","carousel":"Carosel-module_carousel__cHoMx","carouselSlides":"Carosel-module_carouselSlides__MgPU3","carouselSlide":"Carosel-module_carouselSlide__--NkY","carouselButton":"Carosel-module_carouselButton__E1gGu"};
+styleInject(css_248z$b);
+
+var _tmpl$$e = /*#__PURE__*/template(`<div>No <!> Found`),
+  _tmpl$2$9 = /*#__PURE__*/template(`<div>No Elements Found`),
+  _tmpl$3$4 = /*#__PURE__*/template(`<div>`),
+  _tmpl$4$2 = /*#__PURE__*/template(`<div><div><div></div></div><div>`);
+const carouselTitleContext = createContext(createSignal([]));
+const Provider$1 = props => {
+  return createComponent(carouselTitleContext.Provider, {
+    get value() {
+      return props.value ?? createSignal([]);
+    },
+    get children() {
+      return props.children;
+    }
+  });
+};
+const Carousel = ({
+  startingIndex = 0,
+  ...props
+}) => {
+  // ----- Signals -----
+  const [internalIndex, setInternalIndex] = createSignal(startingIndex);
+  const [propIndex, other] = splitProps(props, ["currentIndex"]);
+  const [, setCarouselBodyRef] = createSignal(null);
+  const getPropIndex = () => propIndex.currentIndex ? propIndex.currentIndex[0]() : internalIndex();
+  const setPropIndex = index => propIndex.currentIndex ? propIndex.currentIndex[1](index) : setInternalIndex(index);
+  const [currSlideName] = useContext(carouselTitleContext);
+  // ----- Memoized Values -----
+  const getElementsLength = createMemo(() => {
+    if (Object.keys(props).includes('elements')) {
+      return props.elements.length;
+    }
+    const theProps = props;
+    if (Array.isArray(theProps.children)) {
+      return theProps.children.length;
+    } else {
+      return 1;
+    }
+  });
+  const getElementsArray = createMemo(() => {
+    if (Object.keys(props).includes('elements')) {
+      return props.elements;
+    }
+    const theProps = props;
+    if (Array.isArray(theProps.children)) {
+      return theProps.children;
+    } else {
+      return [theProps.children];
+    }
+  });
+  const currentIndex = createMemo(() => {
+    if (getElementsLength() === 2) {
+      return getPropIndex();
+    }
+    return internalIndex();
+  });
+  const slideName = createMemo(() => {
+    if (Object.keys(props).includes('elements') && getElementsLength() > 0) {
+      return getElementsArray()[currentIndex()]?.name;
+    } else if (Object.keys(props).includes('children') && getElementsLength() > 0) {
+      return currSlideName()[currentIndex()];
+    }
+    return props.notFoundName ? `No ${props.notFoundName} Found` : "No Elements Found";
+  });
+  const slideElement = createMemo(() => {
+    if (Object.keys(props).includes('elements') && getElementsLength() > 0) {
+      return getElementsArray()[currentIndex()]?.element;
+    } else if (Object.keys(props).includes('children') && getElementsLength() > 0) {
+      const children = props.children;
+      if (Array.isArray(children)) {
+        return children[currentIndex()];
+      }
+    }
+    return props.notFoundName ? (() => {
+      var _el$ = _tmpl$$e(),
+        _el$2 = _el$.firstChild,
+        _el$4 = _el$2.nextSibling;
+        _el$4.nextSibling;
+      insert(_el$, () => props.notFoundName, _el$4);
+      return _el$;
+    })() : _tmpl$2$9();
+  });
+  // ----- Functions -----
+  const nextSlide = () => {
+    if (currentIndex() !== getElementsLength() - 1) {
+      setInternalIndex(old => old + 1);
+    } else {
+      setInternalIndex(0);
+    }
+  };
+  const prevSlide = () => {
+    if (currentIndex() !== 0) {
+      setInternalIndex(old => old - 1);
+    } else {
+      setInternalIndex(getElementsLength() - 1);
+    }
+  };
+  // ----- Effects -----
+  createRenderEffect(() => {
+    if (props.currentIndex) {
+      setPropIndex(currentIndex());
+    }
+  });
+  // ----- TSX -----
+  return createComponent(Provider$1, {
+    get value() {
+      return createSignal([]);
+    },
+    get children() {
+      var _el$6 = _tmpl$4$2(),
+        _el$7 = _el$6.firstChild,
+        _el$8 = _el$7.firstChild,
+        _el$11 = _el$7.nextSibling;
+      insert(_el$7, createComponent(Button, {
+        get ["class"]() {
+          return `${style$8.carouselButton}`;
+        },
+        onClick: prevSlide,
+        children: "\u276E"
+      }), _el$8);
+      use(setCarouselBodyRef, _el$8);
+      insert(_el$8, createComponent(Show, {
+        get when() {
+          return Object.keys(props).includes('elements');
+        },
+        get children() {
+          var _el$9 = _tmpl$3$4();
+          insert(_el$9, slideName);
+          createRenderEffect(() => className(_el$9, `${style$8.carouselSlide}`));
+          return _el$9;
+        }
+      }), null);
+      insert(_el$8, createComponent(Show, {
+        get when() {
+          return Object.keys(props).includes('children');
+        },
+        get children() {
+          var _el$10 = _tmpl$3$4();
+          insert(_el$10, slideName);
+          createRenderEffect(() => className(_el$10, `${style$8.carouselSlide}`));
+          return _el$10;
+        }
+      }), null);
+      insert(_el$7, createComponent(Button, {
+        get ["class"]() {
+          return `${style$8.carouselButton}`;
+        },
+        onClick: nextSlide,
+        children: "\u276F"
+      }), null);
+      insert(_el$11, slideElement);
+      createRenderEffect(_p$ => {
+        var _v$ = `${style$8.carousel}`,
+          _v$2 = `${style$8.carouselHeader}`,
+          _v$3 = `${style$8.carouselSlides}`,
+          _v$4 = `${style$8.carouselSlide}`;
+        _v$ !== _p$.e && className(_el$6, _p$.e = _v$);
+        _v$2 !== _p$.t && className(_el$7, _p$.t = _v$2);
+        _v$3 !== _p$.a && className(_el$8, _p$.a = _v$3);
+        _v$4 !== _p$.o && className(_el$11, _p$.o = _v$4);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined,
+        a: undefined,
+        o: undefined
+      });
+      return _el$6;
+    }
+  });
+};
+
+const Slide = props => {
+  const [, setTitle] = useContext(carouselTitleContext);
+  onMount(() => {
+    setTitle(old => [...old, props.title]);
+  });
+  return createMemo(() => props.children);
+};
+
+var css_248z$a = ".Chip-module_Chip__HWK4W {\n  display: flex;\n  flex-direction: row;\n  padding: 5px 10px;\n  margin-left: var(--spacing-1, 8px);\n  border-radius: 15px;\n  height: -moz-max-content;\n  height: max-content;\n  min-width: -moz-min-content;\n  min-width: min-content;\n  max-width: -moz-max-content;\n  max-width: max-content;\n  margin: 5px;\n}\n.Chip-module_Chip__HWK4W span {\n  margin: 0px 2px;\n  width: -moz-max-content;\n  width: max-content;\n  max-width: 10em;\n  text-overflow: ellipsis;\n}\n.Chip-module_Chip__HWK4W button {\n  font-size: 1rem !important;\n  height: -moz-min-content;\n  height: min-content;\n  margin: auto 0px;\n  padding: 0px calc(var(--spacing-1, 8px) / 2) !important;\n  margin-left: 5px !important;\n  border-radius: var(--border-radius-md, 4px);\n}\n\n.Chip-module_removeChipButton__kl1mU {\n  margin: 0 !important;\n  margin-left: 5px !important;\n  padding: 0 !important;\n  font-size: 1rem !important;\n}\n\n.Chip-module_hover__fvVQS:hover {\n  cursor: pointer;\n}\n\n.Chip-module_primary__rvetC {\n  background-color: var(--primary-color, #3F51B5);\n  color: var(--on-primary-color, white);\n}\n.Chip-module_primary__rvetC button {\n  color: var(--on-primary-color, white);\n}\n\n.Chip-module_accent__bZLVs {\n  background-color: var(--secondary-color, #5C6BC0);\n  color: var(--on-secondary-color, white);\n}\n.Chip-module_accent__bZLVs button {\n  color: var(--on-secondary-color, white);\n}\n\n.Chip-module_tertiary__TtdnV {\n  background-color: var(--tertiary-color, #009688);\n  color: var(--on-tertiary, white);\n}\n.Chip-module_tertiary__TtdnV button {\n  color: var(--on-tertiary, white);\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNoaXAubW9kdWxlLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxhQUFhO0VBQ2IsbUJBQW1CO0VBQ25CLGlCQUFpQjtFQUNqQixrQ0FBa0M7RUFDbEMsbUJBQW1CO0VBQ25CLHdCQUFtQjtFQUFuQixtQkFBbUI7RUFDbkIsMkJBQXNCO0VBQXRCLHNCQUFzQjtFQUN0QiwyQkFBc0I7RUFBdEIsc0JBQXNCO0VBQ3RCLFdBQVc7QUFDYjtBQUNBO0VBQ0UsZUFBZTtFQUNmLHVCQUFrQjtFQUFsQixrQkFBa0I7RUFDbEIsZUFBZTtFQUNmLHVCQUF1QjtBQUN6QjtBQUNBO0VBQ0UsMEJBQTBCO0VBQzFCLHdCQUFtQjtFQUFuQixtQkFBbUI7RUFDbkIsZ0JBQWdCO0VBQ2hCLHVEQUF1RDtFQUN2RCwyQkFBMkI7RUFDM0IsMkNBQTJDO0FBQzdDOztBQUVBO0VBQ0Usb0JBQW9CO0VBQ3BCLDJCQUEyQjtFQUMzQixxQkFBcUI7RUFDckIsMEJBQTBCO0FBQzVCOztBQUVBO0VBQ0UsZUFBZTtBQUNqQjs7QUFFQTtFQUNFLCtDQUErQztFQUMvQyxxQ0FBcUM7QUFDdkM7QUFDQTtFQUNFLHFDQUFxQztBQUN2Qzs7QUFFQTtFQUNFLGlEQUFpRDtFQUNqRCx1Q0FBdUM7QUFDekM7QUFDQTtFQUNFLHVDQUF1QztBQUN6Qzs7QUFFQTtFQUNFLGdEQUFnRDtFQUNoRCxnQ0FBZ0M7QUFDbEM7QUFDQTtFQUNFLGdDQUFnQztBQUNsQyIsImZpbGUiOiJDaGlwLm1vZHVsZS5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLkNoaXAge1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogcm93O1xuICBwYWRkaW5nOiA1cHggMTBweDtcbiAgbWFyZ2luLWxlZnQ6IHZhcigtLXNwYWNpbmctMSwgOHB4KTtcbiAgYm9yZGVyLXJhZGl1czogMTVweDtcbiAgaGVpZ2h0OiBtYXgtY29udGVudDtcbiAgbWluLXdpZHRoOiBtaW4tY29udGVudDtcbiAgbWF4LXdpZHRoOiBtYXgtY29udGVudDtcbiAgbWFyZ2luOiA1cHg7XG59XG4uQ2hpcCBzcGFuIHtcbiAgbWFyZ2luOiAwcHggMnB4O1xuICB3aWR0aDogbWF4LWNvbnRlbnQ7XG4gIG1heC13aWR0aDogMTBlbTtcbiAgdGV4dC1vdmVyZmxvdzogZWxsaXBzaXM7XG59XG4uQ2hpcCBidXR0b24ge1xuICBmb250LXNpemU6IDFyZW0gIWltcG9ydGFudDtcbiAgaGVpZ2h0OiBtaW4tY29udGVudDtcbiAgbWFyZ2luOiBhdXRvIDBweDtcbiAgcGFkZGluZzogMHB4IGNhbGModmFyKC0tc3BhY2luZy0xLCA4cHgpIC8gMikgIWltcG9ydGFudDtcbiAgbWFyZ2luLWxlZnQ6IDVweCAhaW1wb3J0YW50O1xuICBib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzLW1kLCA0cHgpO1xufVxuXG4ucmVtb3ZlQ2hpcEJ1dHRvbiB7XG4gIG1hcmdpbjogMCAhaW1wb3J0YW50O1xuICBtYXJnaW4tbGVmdDogNXB4ICFpbXBvcnRhbnQ7XG4gIHBhZGRpbmc6IDAgIWltcG9ydGFudDtcbiAgZm9udC1zaXplOiAxcmVtICFpbXBvcnRhbnQ7XG59XG5cbi5ob3Zlcjpob3ZlciB7XG4gIGN1cnNvcjogcG9pbnRlcjtcbn1cblxuLnByaW1hcnkge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1wcmltYXJ5LWNvbG9yLCAjM0Y1MUI1KTtcbiAgY29sb3I6IHZhcigtLW9uLXByaW1hcnktY29sb3IsIHdoaXRlKTtcbn1cbi5wcmltYXJ5IGJ1dHRvbiB7XG4gIGNvbG9yOiB2YXIoLS1vbi1wcmltYXJ5LWNvbG9yLCB3aGl0ZSk7XG59XG5cbi5hY2NlbnQge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zZWNvbmRhcnktY29sb3IsICM1QzZCQzApO1xuICBjb2xvcjogdmFyKC0tb24tc2Vjb25kYXJ5LWNvbG9yLCB3aGl0ZSk7XG59XG4uYWNjZW50IGJ1dHRvbiB7XG4gIGNvbG9yOiB2YXIoLS1vbi1zZWNvbmRhcnktY29sb3IsIHdoaXRlKTtcbn1cblxuLnRlcnRpYXJ5IHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tdGVydGlhcnktY29sb3IsICMwMDk2ODgpO1xuICBjb2xvcjogdmFyKC0tb24tdGVydGlhcnksIHdoaXRlKTtcbn1cbi50ZXJ0aWFyeSBidXR0b24ge1xuICBjb2xvcjogdmFyKC0tb24tdGVydGlhcnksIHdoaXRlKTtcbn0iXX0= */";
+var style$7 = {"Chip":"Chip-module_Chip__HWK4W","removeChipButton":"Chip-module_removeChipButton__kl1mU","hover":"Chip-module_hover__fvVQS","primary":"Chip-module_primary__rvetC","accent":"Chip-module_accent__bZLVs","tertiary":"Chip-module_tertiary__TtdnV"};
+styleInject(css_248z$a);
+
+var _tmpl$$d = /*#__PURE__*/template(`<span>`),
+  _tmpl$2$8 = /*#__PURE__*/template(`<span>:`),
+  _tmpl$3$3 = /*#__PURE__*/template(`<span><span>`);
 const Chip = props => {
-  const hoverChip = props.onClick ? '.hover' : "";
+  const hoverChip = props.onClick ? `${style$7.hover}` : "";
   return (() => {
-    var _el$ = _tmpl$3$4(),
+    var _el$ = _tmpl$3$3(),
       _el$4 = _el$.firstChild;
     addEventListener(_el$, "click", props.onClick, true);
     insert(_el$, createComponent(Show, {
@@ -524,46 +740,64 @@ const Chip = props => {
       },
       get children() {
         return [(() => {
-          var _el$2 = _tmpl$$c();
+          var _el$2 = _tmpl$$d();
           insert(_el$2, () => props.key);
           return _el$2;
-        })(), _tmpl$2$7()];
+        })(), _tmpl$2$8()];
       }
     }), _el$4);
-    insert(_el$4, () => '  ' + props.value);
+    insert(_el$4, () => ' ' + props.value);
     insert(_el$, createComponent(Show, {
       get when() {
         return !!props.remove;
       },
       get children() {
         return createComponent(Button, {
-          "class": `'.hover' .removeChipButton`,
+          get styleType() {
+            return props.styleType ?? 'tertiary';
+          },
+          get ["class"]() {
+            return `${style$7.hover} ${style$7.removeChipButton}`;
+          },
           get onClick() {
             return props.remove;
           },
-          children: "X"
+          children: "x"
         });
       }
     }), null);
-    createRenderEffect(() => className(_el$, `.accent .Chip ${props.class ?? ""} ${hoverChip}`));
+    createRenderEffect(() => className(_el$, `${style$7[props?.styleType ?? 'tertiary']} ${style$7.Chip} ${props.class ?? ""} ${hoverChip}`));
     return _el$;
   })();
 };
 delegateEvents(["click"]);
 
-var _tmpl$$b = /*#__PURE__*/template(`<span class=.leftArrow>`),
-  _tmpl$2$6 = /*#__PURE__*/template(`<span>`),
-  _tmpl$3$3 = /*#__PURE__*/template(`<span class=.rightArrow>`),
-  _tmpl$4$3 = /*#__PURE__*/template(`<div class=.chipbar><div class=.chipContainer>`);
-const Chipbar = props => {
+var css_248z$9 = ".chipbar-module_chipbar__PjssB {\n  display: flex;\n  flex-direction: row;\n  min-width: 100%;\n  width: -moz-max-content;\n  width: max-content;\n  max-width: 100%;\n  padding: var(--spacing-1, 8px) 0px;\n  border-bottom: 1px solid var(--on-background, white);\n}\n\n.chipbar-module_chipContainer__lnYfX {\n  display: flex;\n  flex-direction: row;\n  overflow-x: hidden;\n  scroll-behavior: smooth;\n  flex-grow: 1;\n}\n.chipbar-module_chipContainer__lnYfX span {\n  height: -moz-min-content;\n  height: min-content;\n  margin: auto 0px;\n}\n.chipbar-module_chipContainer__lnYfX span button {\n  width: -moz-max-content;\n  width: max-content;\n  padding: 5px;\n}\n\n.chipbar-module_leftArrow__OS8vV {\n  margin-right: 10px;\n  align-self: flex-start;\n  margin: auto 0px;\n}\n\n.chipbar-module_rightArrow__T4ubJ {\n  margin-left: 10px;\n  align-self: flex-end;\n  margin: auto 0px;\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNoaXBiYXIubW9kdWxlLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxhQUFhO0VBQ2IsbUJBQW1CO0VBQ25CLGVBQWU7RUFDZix1QkFBa0I7RUFBbEIsa0JBQWtCO0VBQ2xCLGVBQWU7RUFDZixrQ0FBa0M7RUFDbEMsb0RBQW9EO0FBQ3REOztBQUVBO0VBQ0UsYUFBYTtFQUNiLG1CQUFtQjtFQUNuQixrQkFBa0I7RUFDbEIsdUJBQXVCO0VBQ3ZCLFlBQVk7QUFDZDtBQUNBO0VBQ0Usd0JBQW1CO0VBQW5CLG1CQUFtQjtFQUNuQixnQkFBZ0I7QUFDbEI7QUFDQTtFQUNFLHVCQUFrQjtFQUFsQixrQkFBa0I7RUFDbEIsWUFBWTtBQUNkOztBQUVBO0VBQ0Usa0JBQWtCO0VBQ2xCLHNCQUFzQjtFQUN0QixnQkFBZ0I7QUFDbEI7O0FBRUE7RUFDRSxpQkFBaUI7RUFDakIsb0JBQW9CO0VBQ3BCLGdCQUFnQjtBQUNsQiIsImZpbGUiOiJjaGlwYmFyLm1vZHVsZS5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLmNoaXBiYXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogcm93O1xuICBtaW4td2lkdGg6IDEwMCU7XG4gIHdpZHRoOiBtYXgtY29udGVudDtcbiAgbWF4LXdpZHRoOiAxMDAlO1xuICBwYWRkaW5nOiB2YXIoLS1zcGFjaW5nLTEsIDhweCkgMHB4O1xuICBib3JkZXItYm90dG9tOiAxcHggc29saWQgdmFyKC0tb24tYmFja2dyb3VuZCwgd2hpdGUpO1xufVxuXG4uY2hpcENvbnRhaW5lciB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiByb3c7XG4gIG92ZXJmbG93LXg6IGhpZGRlbjtcbiAgc2Nyb2xsLWJlaGF2aW9yOiBzbW9vdGg7XG4gIGZsZXgtZ3JvdzogMTtcbn1cbi5jaGlwQ29udGFpbmVyIHNwYW4ge1xuICBoZWlnaHQ6IG1pbi1jb250ZW50O1xuICBtYXJnaW46IGF1dG8gMHB4O1xufVxuLmNoaXBDb250YWluZXIgc3BhbiBidXR0b24ge1xuICB3aWR0aDogbWF4LWNvbnRlbnQ7XG4gIHBhZGRpbmc6IDVweDtcbn1cblxuLmxlZnRBcnJvdyB7XG4gIG1hcmdpbi1yaWdodDogMTBweDtcbiAgYWxpZ24tc2VsZjogZmxleC1zdGFydDtcbiAgbWFyZ2luOiBhdXRvIDBweDtcbn1cblxuLnJpZ2h0QXJyb3cge1xuICBtYXJnaW4tbGVmdDogMTBweDtcbiAgYWxpZ24tc2VsZjogZmxleC1lbmQ7XG4gIG1hcmdpbjogYXV0byAwcHg7XG59Il19 */";
+var style$6 = {"chipbar":"chipbar-module_chipbar__PjssB","chipContainer":"chipbar-module_chipContainer__lnYfX","leftArrow":"chipbar-module_leftArrow__OS8vV","rightArrow":"chipbar-module_rightArrow__T4ubJ"};
+styleInject(css_248z$9);
+
+var _tmpl$$c = /*#__PURE__*/template(`<span>`),
+  _tmpl$2$7 = /*#__PURE__*/template(`<div><div>`);
+function Chipbar(props) {
+  const hasSignalChips = props.chips !== undefined;
   const [chipContainer, setChipContainer] = createSignal();
   const [showLeft, setShowLeft] = createSignal(false);
   const [showRight, setShowRight] = createSignal(false);
   const scrollFunction = e => {
-    setShowRight(chipContainer()?.scrollLeft !== chipContainer().scrollWidth - chipContainer().clientWidth);
-    setShowLeft(chipContainer().scrollLeft > 0);
-    if (chipContainer().scrollLeft <= 0) {
-      setShowLeft(false);
+    if (chipContainer()) {
+      setShowRight(chipContainer()?.scrollLeft !== chipContainer().scrollWidth - chipContainer().clientWidth);
+      setShowLeft(chipContainer().scrollLeft > 0);
+      if (chipContainer().scrollLeft <= 0) {
+        setShowLeft(false);
+      }
+    }
+  };
+  const hasChips = () => true;
+  const clearAll = () => {
+    if (hasSignalChips) {
+      props.setChips([]);
+    } else if (props.clearAll) {
+      props.clearAll([]);
     }
   };
   onMount(() => {
@@ -577,9 +811,15 @@ const Chipbar = props => {
     }
   });
   createRenderEffect(() => {
-    if (props.chips().length > 0) {
-      scrollFunction();
+    const isChildArr = Array.isArray(props.children);
+    if (isChildArr) {
+      if (props.children.length > 0) {
+        scrollFunction();
+      }
+    } else {
+      if (props?.chips?.()?.length > 0) ;
     }
+    scrollFunction();
   });
   const scrollLeft = () => {
     chipContainer().scrollLeft -= 100;
@@ -590,82 +830,108 @@ const Chipbar = props => {
     scrollFunction();
     setShowLeft(true);
   };
-  return createComponent(Show, {
-    get when() {
-      return props.chips().length > 0;
-    },
-    get children() {
-      var _el$ = _tmpl$4$3(),
-        _el$3 = _el$.firstChild;
-      insert(_el$, createComponent(Show, {
-        get when() {
-          return showLeft();
-        },
-        get children() {
-          var _el$2 = _tmpl$$b();
-          insert(_el$2, createComponent(Button, {
-            onClick: scrollLeft,
-            children: "\u2190"
-          }));
-          return _el$2;
-        }
-      }), _el$3);
-      use(setChipContainer, _el$3);
-      insert(_el$3, createComponent(Show, {
-        get when() {
-          return props.chips().length > 1;
-        },
-        get children() {
-          var _el$4 = _tmpl$2$6();
-          insert(_el$4, createComponent(Button, {
-            onClick: () => props.setChips ? props.setChips([]) : null,
-            children: "Clear All"
-          }));
-          return _el$4;
-        }
-      }), null);
-      insert(_el$3, createComponent(For, {
-        get each() {
-          return props.chips();
-        },
-        children: (chip, i) => createComponent(Chip, {
-          get key() {
-            return chip.key;
-          },
-          get value() {
-            return chip.value;
-          },
-          get remove() {
-            return props.chips().length > 0 ? () => props.setChips ? props.setChips(old => [...old].filter((x, index) => index !== i())) : null : undefined;
+  return (() => {
+    var _el$ = _tmpl$2$7(),
+      _el$3 = _el$.firstChild;
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return showLeft();
+      },
+      get children() {
+        var _el$2 = _tmpl$$c();
+        insert(_el$2, createComponent(Button, {
+          onMouseDown: scrollLeft,
+          children: "\u2190"
+        }));
+        createRenderEffect(() => className(_el$2, `${style$6.leftArrow}`));
+        return _el$2;
+      }
+    }), _el$3);
+    use(setChipContainer, _el$3);
+    insert(_el$3, createComponent(Show, {
+      get when() {
+        return (hasSignalChips || !hasSignalChips && props.clearAll !== undefined);
+      },
+      get children() {
+        var _el$4 = _tmpl$$c();
+        insert(_el$4, createComponent(Button, {
+          onClick: () => clearAll() ,
+          children: "Clear All"
+        }));
+        return _el$4;
+      }
+    }), null);
+    insert(_el$3, createComponent(Show, {
+      get when() {
+        return hasChips();
+      },
+      get children() {
+        return [createComponent(Show, {
+          when: hasSignalChips,
+          get children() {
+            return createComponent(For, {
+              get each() {
+                return props.chips();
+              },
+              children: (chip, i) => createComponent(Chip, {
+                get key() {
+                  return chip?.key ?? `${chip}`;
+                },
+                get value() {
+                  return chip?.value;
+                },
+                remove: () => props.setChips(old => [...old].filter((x, index) => index !== i()))
+              })
+            });
           }
-        })
-      }), null);
-      insert(_el$, createComponent(Show, {
-        get when() {
-          return showRight();
-        },
-        get children() {
-          var _el$5 = _tmpl$3$3();
-          insert(_el$5, createComponent(Button, {
-            onClick: scrollRight,
-            children: "\u2192"
-          }));
-          return _el$5;
-        }
-      }), null);
-      return _el$;
-    }
-  });
-};
+        }), createComponent(Show, {
+          when: !hasSignalChips,
+          get children() {
+            return props.children;
+          }
+        })];
+      }
+    }), null);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return showRight();
+      },
+      get children() {
+        var _el$5 = _tmpl$$c();
+        insert(_el$5, createComponent(Button, {
+          onMouseDown: scrollRight,
+          children: "\u2192"
+        }));
+        createRenderEffect(() => className(_el$5, `${style$6.rightArrow}`));
+        return _el$5;
+      }
+    }), null);
+    createRenderEffect(_p$ => {
+      var _v$ = `${style$6.chipbar}`,
+        _v$2 = `${style$6.chipContainer}`;
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$;
+  })();
+}
+
+var css_248z$8 = ".body-module_compBody__d3HyU {\n  width: 70%;\n  margin: 0 auto;\n  border-radius: 15px;\n  padding: 8px;\n  padding-top: 0px;\n}\n@media screen and (max-width: 768px) {\n  .body-module_compBody__d3HyU {\n    width: 95%;\n    margin: 0 auto;\n  }\n}\n\n.body-module_primary__UR7PU {\n  background-color: var(--primary-color);\n  color: var(--on-primary-color);\n}\n\n.body-module_accent__6IVSJ {\n  background-color: var(--secondary-color);\n  color: var(--on-secondary-color);\n}\n\n.body-module_tertiary__6YRE8 {\n  background-color: var(--tertiary-color);\n  color: var(--on-tertiary-color);\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJvZHkubW9kdWxlLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxVQUFVO0VBQ1YsY0FBYztFQUNkLG1CQUFtQjtFQUNuQixZQUFZO0VBQ1osZ0JBQWdCO0FBQ2xCO0FBQ0E7RUFDRTtJQUNFLFVBQVU7SUFDVixjQUFjO0VBQ2hCO0FBQ0Y7O0FBRUE7RUFDRSxzQ0FBc0M7RUFDdEMsOEJBQThCO0FBQ2hDOztBQUVBO0VBQ0Usd0NBQXdDO0VBQ3hDLGdDQUFnQztBQUNsQzs7QUFFQTtFQUNFLHVDQUF1QztFQUN2QywrQkFBK0I7QUFDakMiLCJmaWxlIjoiYm9keS5tb2R1bGUuc2NzcyIsInNvdXJjZXNDb250ZW50IjpbIi5jb21wQm9keSB7XG4gIHdpZHRoOiA3MCU7XG4gIG1hcmdpbjogMCBhdXRvO1xuICBib3JkZXItcmFkaXVzOiAxNXB4O1xuICBwYWRkaW5nOiA4cHg7XG4gIHBhZGRpbmctdG9wOiAwcHg7XG59XG5AbWVkaWEgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiA3NjhweCkge1xuICAuY29tcEJvZHkge1xuICAgIHdpZHRoOiA5NSU7XG4gICAgbWFyZ2luOiAwIGF1dG87XG4gIH1cbn1cblxuLnByaW1hcnkge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1wcmltYXJ5LWNvbG9yKTtcbiAgY29sb3I6IHZhcigtLW9uLXByaW1hcnktY29sb3IpO1xufVxuXG4uYWNjZW50IHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc2Vjb25kYXJ5LWNvbG9yKTtcbiAgY29sb3I6IHZhcigtLW9uLXNlY29uZGFyeS1jb2xvcik7XG59XG5cbi50ZXJ0aWFyeSB7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXRlcnRpYXJ5LWNvbG9yKTtcbiAgY29sb3I6IHZhcigtLW9uLXRlcnRpYXJ5LWNvbG9yKTtcbn0iXX0= */";
+var styles$2 = {"compBody":"body-module_compBody__d3HyU","primary":"body-module_primary__UR7PU","accent":"body-module_accent__6IVSJ","tertiary":"body-module_tertiary__6YRE8"};
+styleInject(css_248z$8);
 
-var _tmpl$$a = /*#__PURE__*/template(`<div>`);
+var _tmpl$$b = /*#__PURE__*/template(`<div>`);
 const Body = props => {
   const [customProps, normalProps] = splitProps(props, ["children", "class", 'style']);
   return (() => {
-    var _el$ = _tmpl$$a();
+    var _el$ = _tmpl$$b();
     spread(_el$, mergeProps(normalProps, {
       get ["class"]() {
-        return `${customProps.style} .compBody ${customProps.class ?? ""}`;
+        return `${styles$2[customProps?.style ?? 'primary']} ${styles$2.compBody} ${customProps.class ?? ""}`;
       }
     }), false, true);
     insert(_el$, () => customProps.children);
@@ -714,18 +980,64 @@ 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') {
+  createEffect(() => {
+    document.body.setAttribute('data-theme', theme);
+  });
+}
 function useClickOutside(ref, handler) {
+  const mouse = getMouse();
   const listener = e => {
-    if (ref() && !ref().contains(e.target)) handler(e);
+    if (isNullish(ref())) return;
+    const mousePos = mouse();
+    const {
+      top,
+      bottom,
+      left,
+      right
+    } = ref().getBoundingClientRect();
+    const conditions = [mousePos.x < left, mousePos.x > right, mousePos.y < top, mousePos.y > bottom];
+    if (conditions.includes(true)) {
+      handler(e);
+    }
+  };
+  document.addEventListener("mouseup", listener);
+  return () => document.removeEventListener("mouseup", listener);
+}
+function getMouse() {
+  const mouse = {
+    x: 0,
+    y: 0
+  };
+  const mouseMove = e => {
+    mouse.x = e.clientX;
+    mouse.y = e.clientY;
   };
-  document.addEventListener("mousedown", listener);
-  return () => document.removeEventListener("mousedown", listener);
+  document.addEventListener("mousemove", mouseMove);
+  return () => mouse;
 }
 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;
+}
+
+var css_248z$7 = ".formfield-module_formField__w6mH9 {\n  display: inline-block;\n  border-radius: var(--border-radius-md);\n  box-sizing: border-box;\n}\n.formfield-module_formField__w6mH9 label {\n  position: relative;\n  top: -0.5rem;\n  padding-right: 10px;\n}\n.formfield-module_formField__w6mH9:has(textarea) {\n  position: relative;\n  margin: var(--spacing-1, 8px);\n}\n.formfield-module_formField__w6mH9:has(textarea) textarea {\n  width: auto;\n  min-width: 95%;\n  font-family: var(--font-family, \"Roboto, sans-serif\");\n  font-size: var(--font-size-base, 16px);\n  padding-bottom: var(--spacing-1, 8px);\n  border: none;\n}\n.formfield-module_formField__w6mH9:has(textarea) textarea:focus {\n  outline: none;\n}\n.formfield-module_formField__w6mH9:has(textarea) legend {\n  height: var(--spacing-3, 24px);\n  position: absolute;\n  top: calc(var(--spacing-2) * -1);\n  left: var(--spacing-1, 8px);\n  transition: all 0.2s ease;\n}\n.formfield-module_formField__w6mH9:has(.formfield-module_coles-solid-selectControl__T4o-N) {\n  position: relative;\n  margin: var(--spacing-1, 8px);\n  width: -moz-min-content;\n  width: min-content;\n}\n.formfield-module_formField__w6mH9:has(.formfield-module_coles-solid-selectControl__T4o-N) legend {\n  height: var(--spacing-3, 24px);\n  position: absolute;\n  top: calc(var(--spacing-2) * -1);\n  left: var(--spacing-1, 8px);\n  transition: all 0.2s ease;\n}\n.formfield-module_formField__w6mH9:has(input[type=text]) {\n  height: calc(var(--spacing-4, 32px) + var(--spacing-1, 8px));\n  position: relative;\n  margin-top: var(--spacing-2);\n  margin-bottom: var(--spacing-2);\n}\n.formfield-module_formField__w6mH9:has(input[type=text]) legend {\n  height: var(--spacing-3, 24px);\n  position: absolute;\n  top: calc(var(--spacing-2) * -1);\n  left: var(--spacing-1, 8px);\n  transition: all 0.2s ease;\n}\n.formfield-module_formField__w6mH9:has(input[type=text]) input[type=text] {\n  background-color: transparent !important;\n  height: calc(var(--spacing-4, 32px) + var(--spacing-1, 8px) - var(--spacing-3, 24px));\n  border-radius: var(--border-radius-sm, 4px);\n  margin: auto 0px;\n  margin-top: var(--spacing-1, 8px);\n  font-family: var(--font-family, \"Roboto, sans-serif\");\n  font-size: var(--font-size-base, 16px);\n  width: auto;\n  min-width: 95%;\n}\n.formfield-module_formField__w6mH9:has(input[type=text]) input[type=text]::-moz-placeholder {\n  opacity: 0.75;\n}\n.formfield-module_formField__w6mH9:has(input[type=text]) input[type=text]::placeholder {\n  opacity: 0.75;\n}\n@media screen and (max-width: 768px) {\n  .formfield-module_formField__w6mH9 {\n    max-width: 75%;\n  }\n}\n\n.formfield-module_primary__7BYyQ {\n  background-color: var(--primary-color, #3F51B5);\n  color: var(--on-primary-color, white);\n}\n.formfield-module_primary__7BYyQ:has(input[type=text]) legend {\n  background: linear-gradient(to bottom, transparent 60%, var(--primary-color, #3F51B5) 40%);\n}\n.formfield-module_primary__7BYyQ:has(input[type=text]) input[type=text] {\n  color: var(--on-primary-color, white);\n}\n.formfield-module_primary__7BYyQ:has(textarea) {\n  width: 100%;\n  height: auto;\n}\n.formfield-module_primary__7BYyQ:has(textarea) textarea {\n  background-color: var(--primary-color, #3F51B5);\n  color: var(--on-primary-color, white);\n}\n.formfield-module_primary__7BYyQ:has(textarea) legend {\n  background: linear-gradient(to bottom, transparent 60%, var(--primary-color, #3F51B5) 40%);\n}\n\n.formfield-module_accent__L-LRd {\n  background-color: var(--secondary-color, #5C6BC0);\n  color: var(--on-secondary-color, white);\n}\n.formfield-module_accent__L-LRd:has(input[type=text]) legend {\n  background: linear-gradient(to bottom, transparent 60%, var(--secondary-color, #5C6BC0) 40%);\n}\n.formfield-module_accent__L-LRd:has(input[type=text]) input[type=text] {\n  color: var(--on-secondary-color, white);\n}\n.formfield-module_accent__L-LRd:has(textarea) textarea {\n  background-color: var(--secondary-color, #5C6BC0);\n  color: var(--on-secondary-color, white);\n}\n.formfield-module_accent__L-LRd:has(textarea) legend {\n  background: linear-gradient(to bottom, transparent 60%, var(--secondary-color, #5C6BC0) 40%);\n}\n\n.formfield-module_tertiary__B0ozS {\n  background-color: var(--tertiary-color, #8A2BE2);\n  color: var(--on-tertiary-color, white);\n}\n.formfield-module_tertiary__B0ozS:has(input[type=text]) legend {\n  background: linear-gradient(to bottom, transparent 60%, var(--tertiary-color, #8A2BE2) 40%);\n}\n.formfield-module_tertiary__B0ozS:has(input[type=text]) input[type=text] {\n  color: var(--on-tertiary-color, white);\n}\n.formfield-module_tertiary__B0ozS:has(textarea) textarea {\n  background-color: var(--tertiary-color, #8A2BE2);\n  color: var(--on-tertiary-color, white);\n}\n.formfield-module_tertiary__B0ozS:has(textarea) legend {\n  background: linear-gradient(to bottom, transparent 60%, var(--tertiary-color, #8A2BE2) 40%);\n}\n\n.formfield-module_moveLegendInside__zQ4vt {\n  display: none;\n}\n\n.formfield-module_checkboxPadding__DU1CG {\n  padding: 0px;\n  padding-bottom: 10px;\n  padding-left: 10px;\n  padding-right: 10px;\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZvcm1maWVsZC5tb2R1bGUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLHFCQUFxQjtFQUNyQixzQ0FBc0M7RUFDdEMsc0JBQXNCO0FBQ3hCO0FBQ0E7RUFDRSxrQkFBa0I7RUFDbEIsWUFBWTtFQUNaLG1CQUFtQjtBQUNyQjtBQUNBO0VBQ0Usa0JBQWtCO0VBQ2xCLDZCQUE2QjtBQUMvQjtBQUNBO0VBQ0UsV0FBVztFQUNYLGNBQWM7RUFDZCxxREFBcUQ7RUFDckQsc0NBQXNDO0VBQ3RDLHFDQUFxQztFQUNyQyxZQUFZO0FBQ2Q7QUFDQTtFQUNFLGFBQWE7QUFDZjtBQUNBO0VBQ0UsOEJBQThCO0VBQzlCLGtCQUFrQjtFQUNsQixnQ0FBZ0M7RUFDaEMsMkJBQTJCO0VBQzNCLHlCQUF5QjtBQUMzQjtBQUNBO0VBQ0Usa0JBQWtCO0VBQ2xCLDZCQUE2QjtFQUM3Qix1QkFBa0I7RUFBbEIsa0JBQWtCO0FBQ3BCO0FBQ0E7RUFDRSw4QkFBOEI7RUFDOUIsa0JBQWtCO0VBQ2xCLGdDQUFnQztFQUNoQywyQkFBMkI7RUFDM0IseUJBQXlCO0FBQzNCO0FBQ0E7RUFDRSw0REFBNEQ7RUFDNUQsa0JBQWtCO0VBQ2xCLDRCQUE0QjtFQUM1QiwrQkFBK0I7QUFDakM7QUFDQTtFQUNFLDhCQUE4QjtFQUM5QixrQkFBa0I7RUFDbEIsZ0NBQWdDO0VBQ2hDLDJCQUEyQjtFQUMzQix5QkFBeUI7QUFDM0I7QUFDQTtFQUNFLHdDQUF3QztFQUN4QyxxRkFBcUY7RUFDckYsMkNBQTJDO0VBQzNDLGdCQUFnQjtFQUNoQixpQ0FBaUM7RUFDakMscURBQXFEO0VBQ3JELHNDQUFzQztFQUN0QyxXQUFXO0VBQ1gsY0FBYztBQUNoQjtBQUNBO0VBQ0UsYUFBYTtBQUNmO0FBRkE7RUFDRSxhQUFhO0FBQ2Y7QUFDQTtFQUNFO0lBQ0UsY0FBYztFQUNoQjtBQUNGOztBQUVBO0VBQ0UsK0NBQStDO0VBQy9DLHFDQUFxQztBQUN2QztBQUNBO0VBQ0UsMEZBQTBGO0FBQzVGO0FBQ0E7RUFDRSxxQ0FBcUM7QUFDdkM7QUFDQTtFQUNFLFdBQVc7RUFDWCxZQUFZO0FBQ2Q7QUFDQTtFQUNFLCtDQUErQztFQUMvQyxxQ0FBcUM7QUFDdkM7QUFDQTtFQUNFLDBGQUEwRjtBQUM1Rjs7QUFFQTtFQUNFLGlEQUFpRDtFQUNqRCx1Q0FBdUM7QUFDekM7QUFDQTtFQUNFLDRGQUE0RjtBQUM5RjtBQUNBO0VBQ0UsdUNBQXVDO0FBQ3pDO0FBQ0E7RUFDRSxpREFBaUQ7RUFDakQsdUNBQXVDO0FBQ3pDO0FBQ0E7RUFDRSw0RkFBNEY7QUFDOUY7O0FBRUE7RUFDRSxnREFBZ0Q7RUFDaEQsc0NBQXNDO0FBQ3hDO0FBQ0E7RUFDRSwyRkFBMkY7QUFDN0Y7QUFDQTtFQUNFLHNDQUFzQztBQUN4QztBQUNBO0VBQ0UsZ0RBQWdEO0VBQ2hELHNDQUFzQztBQUN4QztBQUNBO0VBQ0UsMkZBQTJGO0FBQzdGOztBQUVBO0VBQ0UsYUFBYTtBQUNmOztBQUVBO0VBQ0UsWUFBWTtFQUNaLG9CQUFvQjtFQUNwQixrQkFBa0I7RUFDbEIsbUJBQW1CO0FBQ3JCIiwiZmlsZSI6ImZvcm1maWVsZC5tb2R1bGUuc2NzcyIsInNvdXJjZXNDb250ZW50IjpbIi5mb3JtRmllbGQge1xuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIGJvcmRlci1yYWRpdXM6IHZhcigtLWJvcmRlci1yYWRpdXMtbWQpO1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xufVxuLmZvcm1GaWVsZCBsYWJlbCB7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgdG9wOiAtMC41cmVtO1xuICBwYWRkaW5nLXJpZ2h0OiAxMHB4O1xufVxuLmZvcm1GaWVsZDpoYXModGV4dGFyZWEpIHtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBtYXJnaW46IHZhcigtLXNwYWNpbmctMSwgOHB4KTtcbn1cbi5mb3JtRmllbGQ6aGFzKHRleHRhcmVhKSB0ZXh0YXJlYSB7XG4gIHdpZHRoOiBhdXRvO1xuICBtaW4td2lkdGg6IDk1JTtcbiAgZm9udC1mYW1pbHk6IHZhcigtLWZvbnQtZmFtaWx5LCBcIlJvYm90bywgc2Fucy1zZXJpZlwiKTtcbiAgZm9udC1zaXplOiB2YXIoLS1mb250LXNpemUtYmFzZSwgMTZweCk7XG4gIHBhZGRpbmctYm90dG9tOiB2YXIoLS1zcGFjaW5nLTEsIDhweCk7XG4gIGJvcmRlcjogbm9uZTtcbn1cbi5mb3JtRmllbGQ6aGFzKHRleHRhcmVhKSB0ZXh0YXJlYTpmb2N1cyB7XG4gIG91dGxpbmU6IG5vbmU7XG59XG4uZm9ybUZpZWxkOmhhcyh0ZXh0YXJlYSkgbGVnZW5kIHtcbiAgaGVpZ2h0OiB2YXIoLS1zcGFjaW5nLTMsIDI0cHgpO1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHRvcDogY2FsYyh2YXIoLS1zcGFjaW5nLTIpICogLTEpO1xuICBsZWZ0OiB2YXIoLS1zcGFjaW5nLTEsIDhweCk7XG4gIHRyYW5zaXRpb246IGFsbCAwLjJzIGVhc2U7XG59XG4uZm9ybUZpZWxkOmhhcyguY29sZXMtc29saWQtc2VsZWN0Q29udHJvbCkge1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIG1hcmdpbjogdmFyKC0tc3BhY2luZy0xLCA4cHgpO1xuICB3aWR0aDogbWluLWNvbnRlbnQ7XG59XG4uZm9ybUZpZWxkOmhhcyguY29sZXMtc29saWQtc2VsZWN0Q29udHJvbCkgbGVnZW5kIHtcbiAgaGVpZ2h0OiB2YXIoLS1zcGFjaW5nLTMsIDI0cHgpO1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHRvcDogY2FsYyh2YXIoLS1zcGFjaW5nLTIpICogLTEpO1xuICBsZWZ0OiB2YXIoLS1zcGFjaW5nLTEsIDhweCk7XG4gIHRyYW5zaXRpb246IGFsbCAwLjJzIGVhc2U7XG59XG4uZm9ybUZpZWxkOmhhcyhpbnB1dFt0eXBlPXRleHRdKSB7XG4gIGhlaWdodDogY2FsYyh2YXIoLS1zcGFjaW5nLTQsIDMycHgpICsgdmFyKC0tc3BhY2luZy0xLCA4cHgpKTtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBtYXJnaW4tdG9wOiB2YXIoLS1zcGFjaW5nLTIpO1xuICBtYXJnaW4tYm90dG9tOiB2YXIoLS1zcGFjaW5nLTIpO1xufVxuLmZvcm1GaWVsZDpoYXMoaW5wdXRbdHlwZT10ZXh0XSkgbGVnZW5kIHtcbiAgaGVpZ2h0OiB2YXIoLS1zcGFjaW5nLTMsIDI0cHgpO1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHRvcDogY2FsYyh2YXIoLS1zcGFjaW5nLTIpICogLTEpO1xuICBsZWZ0OiB2YXIoLS1zcGFjaW5nLTEsIDhweCk7XG4gIHRyYW5zaXRpb246IGFsbCAwLjJzIGVhc2U7XG59XG4uZm9ybUZpZWxkOmhhcyhpbnB1dFt0eXBlPXRleHRdKSBpbnB1dFt0eXBlPXRleHRdIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQgIWltcG9ydGFudDtcbiAgaGVpZ2h0OiBjYWxjKHZhcigtLXNwYWNpbmctNCwgMzJweCkgKyB2YXIoLS1zcGFjaW5nLTEsIDhweCkgLSB2YXIoLS1zcGFjaW5nLTMsIDI0cHgpKTtcbiAgYm9yZGVyLXJhZGl1czogdmFyKC0tYm9yZGVyLXJhZGl1cy1zbSwgNHB4KTtcbiAgbWFyZ2luOiBhdXRvIDBweDtcbiAgbWFyZ2luLXRvcDogdmFyKC0tc3BhY2luZy0xLCA4cHgpO1xuICBmb250LWZhbWlseTogdmFyKC0tZm9udC1mYW1pbHksIFwiUm9ib3RvLCBzYW5zLXNlcmlmXCIpO1xuICBmb250LXNpemU6IHZhcigtLWZvbnQtc2l6ZS1iYXNlLCAxNnB4KTtcbiAgd2lkdGg6IGF1dG87XG4gIG1pbi13aWR0aDogOTUlO1xufVxuLmZvcm1GaWVsZDpoYXMoaW5wdXRbdHlwZT10ZXh0XSkgaW5wdXRbdHlwZT10ZXh0XTo6cGxhY2Vob2xkZXIge1xuICBvcGFjaXR5OiAwLjc1O1xufVxuQG1lZGlhIHNjcmVlbiBhbmQgKG1heC13aWR0aDogNzY4cHgpIHtcbiAgLmZvcm1GaWVsZCB7XG4gICAgbWF4LXdpZHRoOiA3NSU7XG4gIH1cbn1cblxuLnByaW1hcnkge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1wcmltYXJ5LWNvbG9yLCAjM0Y1MUI1KTtcbiAgY29sb3I6IHZhcigtLW9uLXByaW1hcnktY29sb3IsIHdoaXRlKTtcbn1cbi5wcmltYXJ5OmhhcyhpbnB1dFt0eXBlPXRleHRdKSBsZWdlbmQge1xuICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQodG8gYm90dG9tLCB0cmFuc3BhcmVudCA2MCUsIHZhcigtLXByaW1hcnktY29sb3IsICMzRjUxQjUpIDQwJSk7XG59XG4ucHJpbWFyeTpoYXMoaW5wdXRbdHlwZT10ZXh0XSkgaW5wdXRbdHlwZT10ZXh0XSB7XG4gIGNvbG9yOiB2YXIoLS1vbi1wcmltYXJ5LWNvbG9yLCB3aGl0ZSk7XG59XG4ucHJpbWFyeTpoYXModGV4dGFyZWEpIHtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogYXV0bztcbn1cbi5wcmltYXJ5Omhhcyh0ZXh0YXJlYSkgdGV4dGFyZWEge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1wcmltYXJ5LWNvbG9yLCAjM0Y1MUI1KTtcbiAgY29sb3I6IHZhcigtLW9uLXByaW1hcnktY29sb3IsIHdoaXRlKTtcbn1cbi5wcmltYXJ5Omhhcyh0ZXh0YXJlYSkgbGVnZW5kIHtcbiAgYmFja2dyb3VuZDogbGluZWFyLWdyYWRpZW50KHRvIGJvdHRvbSwgdHJhbnNwYXJlbnQgNjAlLCB2YXIoLS1wcmltYXJ5LWNvbG9yLCAjM0Y1MUI1KSA0MCUpO1xufVxuXG4uYWNjZW50IHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc2Vjb25kYXJ5LWNvbG9yLCAjNUM2QkMwKTtcbiAgY29sb3I6IHZhcigtLW9uLXNlY29uZGFyeS1jb2xvciwgd2hpdGUpO1xufVxuLmFjY2VudDpoYXMoaW5wdXRbdHlwZT10ZXh0XSkgbGVnZW5kIHtcbiAgYmFja2dyb3VuZDogbGluZWFyLWdyYWRpZW50KHRvIGJvdHRvbSwgdHJhbnNwYXJlbnQgNjAlLCB2YXIoLS1zZWNvbmRhcnktY29sb3IsICM1QzZCQzApIDQwJSk7XG59XG4uYWNjZW50OmhhcyhpbnB1dFt0eXBlPXRleHRdKSBpbnB1dFt0eXBlPXRleHRdIHtcbiAgY29sb3I6IHZhcigtLW9uLXNlY29uZGFyeS1jb2xvciwgd2hpdGUpO1xufVxuLmFjY2VudDpoYXModGV4dGFyZWEpIHRleHRhcmVhIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc2Vjb25kYXJ5LWNvbG9yLCAjNUM2QkMwKTtcbiAgY29sb3I6IHZhcigtLW9uLXNlY29uZGFyeS1jb2xvciwgd2hpdGUpO1xufVxuLmFjY2VudDpoYXModGV4dGFyZWEpIGxlZ2VuZCB7XG4gIGJhY2tncm91bmQ6IGxpbmVhci1ncmFkaWVudCh0byBib3R0b20sIHRyYW5zcGFyZW50IDYwJSwgdmFyKC0tc2Vjb25kYXJ5LWNvbG9yLCAjNUM2QkMwKSA0MCUpO1xufVxuXG4udGVydGlhcnkge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS10ZXJ0aWFyeS1jb2xvciwgIzhBMkJFMik7XG4gIGNvbG9yOiB2YXIoLS1vbi10ZXJ0aWFyeS1jb2xvciwgd2hpdGUpO1xufVxuLnRlcnRpYXJ5OmhhcyhpbnB1dFt0eXBlPXRleHRdKSBsZWdlbmQge1xuICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQodG8gYm90dG9tLCB0cmFuc3BhcmVudCA2MCUsIHZhcigtLXRlcnRpYXJ5LWNvbG9yLCAjOEEyQkUyKSA0MCUpO1xufVxuLnRlcnRpYXJ5OmhhcyhpbnB1dFt0eXBlPXRleHRdKSBpbnB1dFt0eXBlPXRleHRdIHtcbiAgY29sb3I6IHZhcigtLW9uLXRlcnRpYXJ5LWNvbG9yLCB3aGl0ZSk7XG59XG4udGVydGlhcnk6aGFzKHRleHRhcmVhKSB0ZXh0YXJlYSB7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXRlcnRpYXJ5LWNvbG9yLCAjOEEyQkUyKTtcbiAgY29sb3I6IHZhcigtLW9uLXRlcnRpYXJ5LWNvbG9yLCB3aGl0ZSk7XG59XG4udGVydGlhcnk6aGFzKHRleHRhcmVhKSBsZWdlbmQge1xuICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQodG8gYm90dG9tLCB0cmFuc3BhcmVudCA2MCUsIHZhcigtLXRlcnRpYXJ5LWNvbG9yLCAjOEEyQkUyKSA0MCUpO1xufVxuXG4ubW92ZUxlZ2VuZEluc2lkZSB7XG4gIGRpc3BsYXk6IG5vbmU7XG59XG5cbi5jaGVja2JveFBhZGRpbmcge1xuICBwYWRkaW5nOiAwcHg7XG4gIHBhZGRpbmctYm90dG9tOiAxMHB4O1xuICBwYWRkaW5nLWxlZnQ6IDEwcHg7XG4gIHBhZGRpbmctcmlnaHQ6IDEwcHg7XG59Il19 */";
+var style$5 = {"formField":"formfield-module_formField__w6mH9","coles-solid-selectControl":"formfield-module_coles-solid-selectControl__T4o-N","primary":"formfield-module_primary__7BYyQ","accent":"formfield-module_accent__L-LRd","tertiary":"formfield-module_tertiary__B0ozS","moveLegendInside":"formfield-module_moveLegendInside__zQ4vt","checkboxPadding":"formfield-module_checkboxPadding__DU1CG"};
+styleInject(css_248z$7);
 
-var _tmpl$$9 = /*#__PURE__*/template(`<fieldset><legend>`);
+var _tmpl$$a = /*#__PURE__*/template(`<fieldset><legend>`);
 const FormField = props => {
   return createComponent(Provider, {
     get name() {
@@ -739,38 +1051,48 @@ const FormField = props => {
 const FormField2 = props => {
   const [local, others] = splitProps(props, ["children", "styleType", "name", "class", "value", "legendClass"]);
   const context = useFormProvider();
-  const hasInsideText = createMemo(() => !context.getValue() && !context.getFocused() && !context.getTextInside());
-  // -- context -- 
+  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 hasInsideText = createMemo(() => !hasValue(context?.getValue?.()) && !context?.getFocused?.() && !context?.getTextInside?.());
   const theChildren = children(() => props.children);
   const [fieldRef, setFieldRef] = createSignal();
   useClickOutside(fieldRef, () => {
-    context.setTextInside(!!context.getValue().trim());
-    context.setFocused(false);
+    context?.setTextInside(!!context?.getValue?.()?.trim());
+    context?.setFocused(false);
   });
   createRenderEffect(() => {
     context.setName(props.name);
   });
+  context?.setFocused?.(false);
   return (() => {
-    var _el$ = _tmpl$$9(),
+    var _el$ = _tmpl$$a(),
       _el$2 = _el$.firstChild;
     use(setFieldRef, _el$);
     spread(_el$, mergeProps(others, {
       "onClick": () => context.setFocused(true),
       get ["class"]() {
-        return `.${local.styleType ?? "accent"} .formField ${local.class ?? ''}`;
+        return `${style$5[local.styleType ?? "accent"]} ${style$5.formField} ${local.class ?? ''}`;
       }
     }), false, true);
     insert(_el$2, (() => {
-      var _c$ = createMemo(() => !!context.getName());
+      var _c$ = createMemo(() => !!(context.getName() && !hasInsideText()));
       return () => _c$() ? context.getName() : ``;
     })());
     insert(_el$, theChildren, null);
-    createRenderEffect(() => className(_el$2, `${hasInsideText() ? `.moveLegendInside` : ``} ${local?.legendClass ?? ''}`));
+    createRenderEffect(() => className(_el$2, `${hasInsideText() ? style$5.moveLegendInside : ``} ${local?.legendClass ?? ''}`));
     return _el$;
   })();
 };
 
-var _tmpl$$8 = /*#__PURE__*/template(`<input>`);
+var css_248z$6 = "@charset \"UTF-8\";\n.input-module_input__-LMoi {\n  width: 100%;\n  max-width: 400px;\n  border-radius: var(--border-radius-lg, 16px);\n  font-size: var(--font-size-base, 16px);\n}\n@media screen and (max-width: 768px) {\n  .input-module_input__-LMoi {\n    width: 100%;\n    max-width: 100%;\n  }\n}\n.input-module_input__-LMoi[type=checkbox] {\n  width: -moz-min-content;\n  width: min-content;\n  -webkit-appearance: none;\n  border: 1px solid #cacece;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);\n  padding: var(--spacing-1, 8px);\n  border-radius: var(--border-radius-sm);\n  display: inline-block;\n  position: relative;\n}\n.input-module_input__-LMoi[type=checkbox]:checked {\n  background-color: inherit;\n  border: 1px solid #adb8c0;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);\n  color: inherit;\n}\n.input-module_input__-LMoi[type=checkbox]:checked:after {\n  content: \"✔\";\n  position: absolute;\n  top: -15%;\n  left: 15%;\n  width: 10px;\n  height: 10px;\n  border-radius: 10%;\n}\n.input-module_input__-LMoi:focus {\n  outline: none;\n}\n.input-module_input__-LMoi.input-module_error__vs2kz {\n  border: 1px solid var(--warn-color);\n}\n.input-module_input__-LMoi.input-module_success__beiu5 {\n  border: 1px solid green;\n}\n.input-module_input__-LMoi.input-module_warning__b6S5s {\n  border: 1px solid orange;\n}\n.input-module_input__-LMoi.input-module_info__pWO0n {\n  border: 1px solid blue;\n}\n.input-module_input__-LMoi.input-module_disabled__40ZHw {\n  border: 1px solid gray;\n}\n\n.input-module_inFormField__kk-PD {\n  border: none;\n  outline: none;\n}\n\n.input-module_checkbox__Yu-9M {\n  cursor: pointer;\n}\n\n.input-module_transparent__aXcGX {\n  background-color: inherit !important;\n  opacity: 1;\n  color: inherit !important;\n  border: none;\n}\n.input-module_transparent__aXcGX :focus {\n  outline: none;\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImlucHV0Lm1vZHVsZS5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGdCQUFnQjtBQUNoQjtFQUNFLFdBQVc7RUFDWCxnQkFBZ0I7RUFDaEIsNENBQTRDO0VBQzVDLHNDQUFzQztBQUN4QztBQUNBO0VBQ0U7SUFDRSxXQUFXO0lBQ1gsZUFBZTtFQUNqQjtBQUNGO0FBQ0E7RUFDRSx1QkFBa0I7RUFBbEIsa0JBQWtCO0VBQ2xCLHdCQUF3QjtFQUN4Qix5QkFBeUI7RUFDekIseUZBQXlGO0VBQ3pGLDhCQUE4QjtFQUM5QixzQ0FBc0M7RUFDdEMscUJBQXFCO0VBQ3JCLGtCQUFrQjtBQUNwQjtBQUNBO0VBQ0UseUJBQXlCO0VBQ3pCLHlCQUF5QjtFQUN6Qix5SUFBeUk7RUFDekksY0FBYztBQUNoQjtBQUNBO0VBQ0UsWUFBWTtFQUNaLGtCQUFrQjtFQUNsQixTQUFTO0VBQ1QsU0FBUztFQUNULFdBQVc7RUFDWCxZQUFZO0VBQ1osa0JBQWtCO0FBQ3BCO0FBQ0E7RUFDRSxhQUFhO0FBQ2Y7QUFDQTtFQUNFLG1DQUFtQztBQUNyQztBQUNBO0VBQ0UsdUJBQXVCO0FBQ3pCO0FBQ0E7RUFDRSx3QkFBd0I7QUFDMUI7QUFDQTtFQUNFLHNCQUFzQjtBQUN4QjtBQUNBO0VBQ0Usc0JBQXNCO0FBQ3hCOztBQUVBO0VBQ0UsWUFBWTtFQUNaLGFBQWE7QUFDZjs7QUFFQTtFQUNFLGVBQWU7QUFDakI7O0FBRUE7RUFDRSxvQ0FBb0M7RUFDcEMsVUFBVTtFQUNWLHlCQUF5QjtFQUN6QixZQUFZO0FBQ2Q7QUFDQTtFQUNFLGFBQWE7QUFDZiIsImZpbGUiOiJpbnB1dC5tb2R1bGUuc2NzcyIsInNvdXJjZXNDb250ZW50IjpbIkBjaGFyc2V0IFwiVVRGLThcIjtcbi5pbnB1dCB7XG4gIHdpZHRoOiAxMDAlO1xuICBtYXgtd2lkdGg6IDQwMHB4O1xuICBib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzLWxnLCAxNnB4KTtcbiAgZm9udC1zaXplOiB2YXIoLS1mb250LXNpemUtYmFzZSwgMTZweCk7XG59XG5AbWVkaWEgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiA3NjhweCkge1xuICAuaW5wdXQge1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIG1heC13aWR0aDogMTAwJTtcbiAgfVxufVxuLmlucHV0W3R5cGU9Y2hlY2tib3hdIHtcbiAgd2lkdGg6IG1pbi1jb250ZW50O1xuICAtd2Via2l0LWFwcGVhcmFuY2U6IG5vbmU7XG4gIGJvcmRlcjogMXB4IHNvbGlkICNjYWNlY2U7XG4gIGJveC1zaGFkb3c6IDAgMXB4IDJweCByZ2JhKDAsIDAsIDAsIDAuMDUpLCBpbnNldCAwcHggLTE1cHggMTBweCAtMTJweCByZ2JhKDAsIDAsIDAsIDAuMDUpO1xuICBwYWRkaW5nOiB2YXIoLS1zcGFjaW5nLTEsIDhweCk7XG4gIGJvcmRlci1yYWRpdXM6IHZhcigtLWJvcmRlci1yYWRpdXMtc20pO1xuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbn1cbi5pbnB1dFt0eXBlPWNoZWNrYm94XTpjaGVja2VkIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogaW5oZXJpdDtcbiAgYm9yZGVyOiAxcHggc29saWQgI2FkYjhjMDtcbiAgYm94LXNoYWRvdzogMCAxcHggMnB4IHJnYmEoMCwgMCwgMCwgMC4wNSksIGluc2V0IDBweCAtMTVweCAxMHB4IC0xMnB4IHJnYmEoMCwgMCwgMCwgMC4wNSksIGluc2V0IDE1cHggMTBweCAtMTJweCByZ2JhKDI1NSwgMjU1LCAyNTUsIDAuMSk7XG4gIGNvbG9yOiBpbmhlcml0O1xufVxuLmlucHV0W3R5cGU9Y2hlY2tib3hdOmNoZWNrZWQ6YWZ0ZXIge1xuICBjb250ZW50OiBcIuKclFwiO1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHRvcDogLTE1JTtcbiAgbGVmdDogMTUlO1xuICB3aWR0aDogMTBweDtcbiAgaGVpZ2h0OiAxMHB4O1xuICBib3JkZXItcmFkaXVzOiAxMCU7XG59XG4uaW5wdXQ6Zm9jdXMge1xuICBvdXRsaW5lOiBub25lO1xufVxuLmlucHV0LmVycm9yIHtcbiAgYm9yZGVyOiAxcHggc29saWQgdmFyKC0td2Fybi1jb2xvcik7XG59XG4uaW5wdXQuc3VjY2VzcyB7XG4gIGJvcmRlcjogMXB4IHNvbGlkIGdyZWVuO1xufVxuLmlucHV0Lndhcm5pbmcge1xuICBib3JkZXI6IDFweCBzb2xpZCBvcmFuZ2U7XG59XG4uaW5wdXQuaW5mbyB7XG4gIGJvcmRlcjogMXB4IHNvbGlkIGJsdWU7XG59XG4uaW5wdXQuZGlzYWJsZWQge1xuICBib3JkZXI6IDFweCBzb2xpZCBncmF5O1xufVxuXG4uaW5Gb3JtRmllbGQge1xuICBib3JkZXI6IG5vbmU7XG4gIG91dGxpbmU6IG5vbmU7XG59XG5cbi5jaGVja2JveCB7XG4gIGN1cnNvcjogcG9pbnRlcjtcbn1cblxuLnRyYW5zcGFyZW50IHtcbiAgYmFja2dyb3VuZC1jb2xvcjogaW5oZXJpdCAhaW1wb3J0YW50O1xuICBvcGFjaXR5OiAxO1xuICBjb2xvcjogaW5oZXJpdCAhaW1wb3J0YW50O1xuICBib3JkZXI6IG5vbmU7XG59XG4udHJhbnNwYXJlbnQgOmZvY3VzIHtcbiAgb3V0bGluZTogbm9uZTtcbn0iXX0= */";
+var styles$1 = {"input":"input-module_input__-LMoi","inFormField":"input-module_inFormField__kk-PD","transparent":"input-module_transparent__aXcGX"};
+styleInject(css_248z$6);
+
+var _tmpl$$9 = /*#__PURE__*/template(`<input>`);
 const Input = props => {
   const [customProps, normalProps] = splitProps(props, ["tooltip", "transparent", "value", "onChange"]);
   const noTransparent = type => "checkbox" !== (type ?? "text");
@@ -792,7 +1114,7 @@ const Input = props => {
     }
   });
   return (() => {
-    var _el$ = _tmpl$$8();
+    var _el$ = _tmpl$$9();
     spread(_el$, mergeProps(normalProps, {
       get placeholder() {
         return createMemo(() => !!(!!context.getName() && !context.getTextInside() && !context.getFocused()))() ? context.getName() : props.placeholder;
@@ -831,7 +1153,7 @@ const Input = props => {
         if (props.onChange) props.onChange(e);
       },
       get ["class"]() {
-        return `input ${hasTrasparent() && noTransparent(normalProps.type) ? 'transparent' : ""} ${props.class ?? ""}`;
+        return `${styles$1.input} ${hasTrasparent() && noTransparent(normalProps.type) ? styles$1.transparent : ""} ${!!context?.getName() ? styles$1.inFormField : ''} ${props.class ?? ""}`;
       },
       get title() {
         return customProps.tooltip;
@@ -841,25 +1163,52 @@ const Input = props => {
   })();
 };
 
-var _tmpl$$7 = /*#__PURE__*/template(`<span class=solid-select__placeholder>`),
-  _tmpl$2$5 = /*#__PURE__*/template(`<span>`),
-  _tmpl$3$2 = /*#__PURE__*/template(`<span class=solid-select__arrow>▲`),
-  _tmpl$4$2 = /*#__PURE__*/template(`<span class=solid-select__arrow>▼`),
-  _tmpl$5$1 = /*#__PURE__*/template(`<div>`),
-  _tmpl$6 = /*#__PURE__*/template(`<div tabindex=0><div><span class=solid-select__value>`);
+var css_248z$5 = "/* Container and control (trigger) */\n.selectStyles_solid_select__NKR-3 {\n  position: relative;\n  display: inline-block;\n  width: -moz-max-content;\n  width: max-content;\n  height: -moz-max-content;\n  height: max-content;\n  margin-right: calc(var(--spacing-1, 8px) * 1.5);\n  border-radius: var(--border-radius-md, 8px);\n  text-align: left;\n}\n\n.selectStyles_solid_select__value__6Wfm7 {\n  flex-grow: 1;\n}\n\n.selectStyles_solid_select__arrow__kTemB {\n  float: right;\n}\n\n.selectStyles_solid_select__control__5tiE- {\n  display: flex;\n  align-items: center;\n  min-width: 200px;\n  width: 100%;\n  padding: calc(var(--spacing-1, 8px) * 0.5) var(--spacing-1, 8px);\n  cursor: pointer;\n}\n\n.selectStyles_solid_select__control__5tiE-:hover {\n  border-color: #999;\n}\n\n/* Placeholder text style */\n.selectStyles_solid_select__placeholder__G5WXj {\n  color: #888;\n}\n\n/* Dropdown arrow icon */\n.selectStyles_solid_select__arrow__kTemB {\n  font-size: 0.7em;\n  margin-left: 8px;\n}\n\n/* Dropdown menu */\n.selectStyles_solid_select__dropdown__HDHJw {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: 90000;\n  width: -moz-fit-content !important;\n  width: fit-content !important;\n  min-height: var(--spacing-4, 32px);\n  max-height: 200px;\n  min-width: 200px;\n  border-radius: var(--border-radius-md, 8px);\n  overflow-y: auto;\n  border: 1px solid #ccc;\n  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);\n}\n\n.selectStyles_option-label__hZrPh {\n  width: -moz-fit-content;\n  width: fit-content;\n}\n\n.selectStyles_solid_select__option__euHDA {\n  width: -moz-fit-content;\n  width: fit-content;\n}\n.selectStyles_solid_select__option__euHDA:has(.selectStyles_selected__ux-hP) {\n  font-weight: bold;\n}\n.selectStyles_solid_select__option__euHDA:hover {\n  cursor: pointer;\n}\n\n/* Colors */\n.selectStyles_solid_select__transparent__ak6Va {\n  background-color: transparent;\n  color: var(--on-background-color);\n}\n\n.selectStyles_solid_select__primary__tQ3sJ {\n  background-color: var(--primary-color);\n  color: var(--on-primary-color);\n}\n\n.selectStyles_solid_select__option_primary__zixQP {\n  background-color: var(--primary-color);\n  color: var(--on-primary-color);\n}\n.selectStyles_solid_select__option_primary__zixQP:has(.selectStyles_selected__ux-hP) {\n  background: var(--primary-color-dark);\n}\n\n.selectStyles_solid_select__option_primary__zixQP:hover {\n  background: var(--primary-color-dark);\n}\n\n.selectStyles_solid_select__primary_dropdown__ohWbr {\n  background-color: var(--primary-color);\n  color: var(--on-primary-color);\n}\n\n.selectStyles_solid_select__accent__Rt07n {\n  background-color: var(--secondary-color);\n  color: var(--on-secondary-color);\n}\n.selectStyles_solid_select__accent__Rt07n:has(.selectStyles_selected__ux-hP) {\n  background: var(--secondary-color-dark);\n}\n\n.selectStyles_solid_select__option_accent__xYJuA {\n  background-color: var(--secondary-color);\n  color: var(--on-secondary-color);\n}\n\n.selectStyles_solid_select__option_accent__xYJuA:hover {\n  background: var(--secondary-color-dark);\n}\n\n.selectStyles_solid_select__accent_dropdown__PY023 {\n  background-color: var(--secondary-color);\n  color: var(--on-secondary-color);\n}\n\n.selectStyles_solid_select__tertiary__8D4YE {\n  background-color: var(--tertiary-color);\n  color: var(--on-tertiary-color);\n}\n.selectStyles_solid_select__tertiary__8D4YE:has(.selectStyles_selected__ux-hP) {\n  background: var(--tertiary-color-dark);\n}\n\n.selectStyles_solid_select__option_tertiary__OIRkB {\n  background-color: var(--tertiary-color);\n  color: var(--on-tertiary-color);\n}\n\n.selectStyles_solid_select__option_tertiary__OIRkB:hover {\n  background: var(--tertiary-color-dark);\n}\n\n.selectStyles_solid_select__tertiary_dropdown__k1M09 {\n  background-color: var(--tertiary-color);\n  color: var(--on-tertiary-color);\n}\n\n/* Option items */\n.selectStyles_solid_select__option__euHDA {\n  padding: 8px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  min-height: var(--spacing-4, 32px);\n  width: 95%;\n  min-width: 200px;\n}\n\n.selectStyles_checkmark__zu0id {\n  display: inline-block;\n  width: 1.2em; /* reserve space for the checkmark */\n  margin-right: 4px;\n  text-align: center;\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNlbGVjdFN0eWxlcy5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLG9DQUFvQztBQUNwQztFQUNFLGtCQUFrQjtFQUNsQixxQkFBcUI7RUFDckIsdUJBQWtCO0VBQWxCLGtCQUFrQjtFQUNsQix3QkFBbUI7RUFBbkIsbUJBQW1CO0VBQ25CLCtDQUErQztFQUMvQywyQ0FBMkM7RUFDM0MsZ0JBQWdCO0FBQ2xCOztBQUVBO0VBQ0UsWUFBWTtBQUNkOztBQUVBO0VBQ0UsWUFBWTtBQUNkOztBQUVBO0VBQ0UsYUFBYTtFQUNiLG1CQUFtQjtFQUNuQixnQkFBZ0I7RUFDaEIsV0FBVztFQUNYLGdFQUFnRTtFQUNoRSxlQUFlO0FBQ2pCOztBQUVBO0VBQ0Usa0JBQWtCO0FBQ3BCOztBQUVBLDJCQUEyQjtBQUMzQjtFQUNFLFdBQVc7QUFDYjs7QUFFQSx3QkFBd0I7QUFDeEI7RUFDRSxnQkFBZ0I7RUFDaEIsZ0JBQWdCO0FBQ2xCOztBQUVBLGtCQUFrQjtBQUNsQjtFQUNFLGtCQUFrQjtFQUNsQixTQUFTO0VBQ1QsT0FBTztFQUNQLGNBQWM7RUFDZCxrQ0FBNkI7RUFBN0IsNkJBQTZCO0VBQzdCLGtDQUFrQztFQUNsQyxpQkFBaUI7RUFDakIsZ0JBQWdCO0VBQ2hCLDJDQUEyQztFQUMzQyxnQkFBZ0I7RUFDaEIsc0JBQXNCO0VBQ3RCLHdDQUF3QztBQUMxQzs7QUFFQTtFQUNFLHVCQUFrQjtFQUFsQixrQkFBa0I7QUFDcEI7O0FBRUE7RUFDRSx1QkFBa0I7RUFBbEIsa0JBQWtCO0FBQ3BCO0FBQ0E7RUFDRSxpQkFBaUI7QUFDbkI7QUFDQTtFQUNFLGVBQWU7QUFDakI7O0FBRUEsV0FBVztBQUNYO0VBQ0UsNkJBQTZCO0VBQzdCLGlDQUFpQztBQUNuQzs7QUFFQTtFQUNFLHNDQUFzQztFQUN0Qyw4QkFBOEI7QUFDaEM7O0FBRUE7RUFDRSxzQ0FBc0M7RUFDdEMsOEJBQThCO0FBQ2hDO0FBQ0E7RUFDRSxxQ0FBcUM7QUFDdkM7O0FBRUE7RUFDRSxxQ0FBcUM7QUFDdkM7O0FBRUE7RUFDRSxzQ0FBc0M7RUFDdEMsOEJBQThCO0FBQ2hDOztBQUVBO0VBQ0Usd0NBQXdDO0VBQ3hDLGdDQUFnQztBQUNsQztBQUNBO0VBQ0UsdUNBQXVDO0FBQ3pDOztBQUVBO0VBQ0Usd0NBQXdDO0VBQ3hDLGdDQUFnQztBQUNsQzs7QUFFQTtFQUNFLHVDQUF1QztBQUN6Qzs7QUFFQTtFQUNFLHdDQUF3QztFQUN4QyxnQ0FBZ0M7QUFDbEM7O0FBRUE7RUFDRSx1Q0FBdUM7RUFDdkMsK0JBQStCO0FBQ2pDO0FBQ0E7RUFDRSxzQ0FBc0M7QUFDeEM7O0FBRUE7RUFDRSx1Q0FBdUM7RUFDdkMsK0JBQStCO0FBQ2pDOztBQUVBO0VBQ0Usc0NBQXNDO0FBQ3hDOztBQUVBO0VBQ0UsdUNBQXVDO0VBQ3ZDLCtCQUErQjtBQUNqQzs7QUFFQSxpQkFBaUI7QUFDakI7RUFDRSxZQUFZO0VBQ1osZUFBZTtFQUNmLGFBQWE7RUFDYixtQkFBbUI7RUFDbkIsa0NBQWtDO0VBQ2xDLFVBQVU7RUFDVixnQkFBZ0I7QUFDbEI7O0FBRUE7RUFDRSxxQkFBcUI7RUFDckIsWUFBWSxFQUFFLG9DQUFvQztFQUNsRCxpQkFBaUI7RUFDakIsa0JBQWtCO0FBQ3BCIiwiZmlsZSI6InNlbGVjdFN0eWxlcy5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyogQ29udGFpbmVyIGFuZCBjb250cm9sICh0cmlnZ2VyKSAqL1xuLnNvbGlkX3NlbGVjdCB7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICB3aWR0aDogbWF4LWNvbnRlbnQ7XG4gIGhlaWdodDogbWF4LWNvbnRlbnQ7XG4gIG1hcmdpbi1yaWdodDogY2FsYyh2YXIoLS1zcGFjaW5nLTEsIDhweCkgKiAxLjUpO1xuICBib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzLW1kLCA4cHgpO1xuICB0ZXh0LWFsaWduOiBsZWZ0O1xufVxuXG4uc29saWRfc2VsZWN0X192YWx1ZSB7XG4gIGZsZXgtZ3JvdzogMTtcbn1cblxuLnNvbGlkX3NlbGVjdF9fYXJyb3cge1xuICBmbG9hdDogcmlnaHQ7XG59XG5cbi5zb2xpZF9zZWxlY3RfX2NvbnRyb2wge1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBtaW4td2lkdGg6IDIwMHB4O1xuICB3aWR0aDogMTAwJTtcbiAgcGFkZGluZzogY2FsYyh2YXIoLS1zcGFjaW5nLTEsIDhweCkgKiAwLjUpIHZhcigtLXNwYWNpbmctMSwgOHB4KTtcbiAgY3Vyc29yOiBwb2ludGVyO1xufVxuXG4uc29saWRfc2VsZWN0X19jb250cm9sOmhvdmVyIHtcbiAgYm9yZGVyLWNvbG9yOiAjOTk5O1xufVxuXG4vKiBQbGFjZWhvbGRlciB0ZXh0IHN0eWxlICovXG4uc29saWRfc2VsZWN0X19wbGFjZWhvbGRlciB7XG4gIGNvbG9yOiAjODg4O1xufVxuXG4vKiBEcm9wZG93biBhcnJvdyBpY29uICovXG4uc29saWRfc2VsZWN0X19hcnJvdyB7XG4gIGZvbnQtc2l6ZTogMC43ZW07XG4gIG1hcmdpbi1sZWZ0OiA4cHg7XG59XG5cbi8qIERyb3Bkb3duIG1lbnUgKi9cbi5zb2xpZF9zZWxlY3RfX2Ryb3Bkb3duIHtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB0b3A6IDEwMCU7XG4gIGxlZnQ6IDA7XG4gIHotaW5kZXg6IDkwMDAwO1xuICB3aWR0aDogZml0LWNvbnRlbnQgIWltcG9ydGFudDtcbiAgbWluLWhlaWdodDogdmFyKC0tc3BhY2luZy00LCAzMnB4KTtcbiAgbWF4LWhlaWdodDogMjAwcHg7XG4gIG1pbi13aWR0aDogMjAwcHg7XG4gIGJvcmRlci1yYWRpdXM6IHZhcigtLWJvcmRlci1yYWRpdXMtbWQsIDhweCk7XG4gIG92ZXJmbG93LXk6IGF1dG87XG4gIGJvcmRlcjogMXB4IHNvbGlkICNjY2M7XG4gIGJveC1zaGFkb3c6IDAgMnB4IDVweCByZ2JhKDAsIDAsIDAsIDAuMik7XG59XG5cbi5vcHRpb24tbGFiZWwge1xuICB3aWR0aDogZml0LWNvbnRlbnQ7XG59XG5cbi5zb2xpZF9zZWxlY3RfX29wdGlvbiB7XG4gIHdpZHRoOiBmaXQtY29udGVudDtcbn1cbi5zb2xpZF9zZWxlY3RfX29wdGlvbjpoYXMoLnNlbGVjdGVkKSB7XG4gIGZvbnQtd2VpZ2h0OiBib2xkO1xufVxuLnNvbGlkX3NlbGVjdF9fb3B0aW9uOmhvdmVyIHtcbiAgY3Vyc29yOiBwb2ludGVyO1xufVxuXG4vKiBDb2xvcnMgKi9cbi5zb2xpZF9zZWxlY3RfX3RyYW5zcGFyZW50IHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGNvbG9yOiB2YXIoLS1vbi1iYWNrZ3JvdW5kLWNvbG9yKTtcbn1cblxuLnNvbGlkX3NlbGVjdF9fcHJpbWFyeSB7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXByaW1hcnktY29sb3IpO1xuICBjb2xvcjogdmFyKC0tb24tcHJpbWFyeS1jb2xvcik7XG59XG5cbi5zb2xpZF9zZWxlY3RfX29wdGlvbl9wcmltYXJ5IHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tcHJpbWFyeS1jb2xvcik7XG4gIGNvbG9yOiB2YXIoLS1vbi1wcmltYXJ5LWNvbG9yKTtcbn1cbi5zb2xpZF9zZWxlY3RfX29wdGlvbl9wcmltYXJ5Omhhcyguc2VsZWN0ZWQpIHtcbiAgYmFja2dyb3VuZDogdmFyKC0tcHJpbWFyeS1jb2xvci1kYXJrKTtcbn1cblxuLnNvbGlkX3NlbGVjdF9fb3B0aW9uX3ByaW1hcnk6aG92ZXIge1xuICBiYWNrZ3JvdW5kOiB2YXIoLS1wcmltYXJ5LWNvbG9yLWRhcmspO1xufVxuXG4uc29saWRfc2VsZWN0X19wcmltYXJ5X2Ryb3Bkb3duIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tcHJpbWFyeS1jb2xvcik7XG4gIGNvbG9yOiB2YXIoLS1vbi1wcmltYXJ5LWNvbG9yKTtcbn1cblxuLnNvbGlkX3NlbGVjdF9fYWNjZW50IHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc2Vjb25kYXJ5LWNvbG9yKTtcbiAgY29sb3I6IHZhcigtLW9uLXNlY29uZGFyeS1jb2xvcik7XG59XG4uc29saWRfc2VsZWN0X19hY2NlbnQ6aGFzKC5zZWxlY3RlZCkge1xuICBiYWNrZ3JvdW5kOiB2YXIoLS1zZWNvbmRhcnktY29sb3ItZGFyayk7XG59XG5cbi5zb2xpZF9zZWxlY3RfX29wdGlvbl9hY2NlbnQge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zZWNvbmRhcnktY29sb3IpO1xuICBjb2xvcjogdmFyKC0tb24tc2Vjb25kYXJ5LWNvbG9yKTtcbn1cblxuLnNvbGlkX3NlbGVjdF9fb3B0aW9uX2FjY2VudDpob3ZlciB7XG4gIGJhY2tncm91bmQ6IHZhcigtLXNlY29uZGFyeS1jb2xvci1kYXJrKTtcbn1cblxuLnNvbGlkX3NlbGVjdF9fYWNjZW50X2Ryb3Bkb3duIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc2Vjb25kYXJ5LWNvbG9yKTtcbiAgY29sb3I6IHZhcigtLW9uLXNlY29uZGFyeS1jb2xvcik7XG59XG5cbi5zb2xpZF9zZWxlY3RfX3RlcnRpYXJ5IHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tdGVydGlhcnktY29sb3IpO1xuICBjb2xvcjogdmFyKC0tb24tdGVydGlhcnktY29sb3IpO1xufVxuLnNvbGlkX3NlbGVjdF9fdGVydGlhcnk6aGFzKC5zZWxlY3RlZCkge1xuICBiYWNrZ3JvdW5kOiB2YXIoLS10ZXJ0aWFyeS1jb2xvci1kYXJrKTtcbn1cblxuLnNvbGlkX3NlbGVjdF9fb3B0aW9uX3RlcnRpYXJ5IHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tdGVydGlhcnktY29sb3IpO1xuICBjb2xvcjogdmFyKC0tb24tdGVydGlhcnktY29sb3IpO1xufVxuXG4uc29saWRfc2VsZWN0X19vcHRpb25fdGVydGlhcnk6aG92ZXIge1xuICBiYWNrZ3JvdW5kOiB2YXIoLS10ZXJ0aWFyeS1jb2xvci1kYXJrKTtcbn1cblxuLnNvbGlkX3NlbGVjdF9fdGVydGlhcnlfZHJvcGRvd24ge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS10ZXJ0aWFyeS1jb2xvcik7XG4gIGNvbG9yOiB2YXIoLS1vbi10ZXJ0aWFyeS1jb2xvcik7XG59XG5cbi8qIE9wdGlvbiBpdGVtcyAqL1xuLnNvbGlkX3NlbGVjdF9fb3B0aW9uIHtcbiAgcGFkZGluZzogOHB4O1xuICBjdXJzb3I6IHBvaW50ZXI7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIG1pbi1oZWlnaHQ6IHZhcigtLXNwYWNpbmctNCwgMzJweCk7XG4gIHdpZHRoOiA5NSU7XG4gIG1pbi13aWR0aDogMjAwcHg7XG59XG5cbi5jaGVja21hcmsge1xuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIHdpZHRoOiAxLjJlbTsgLyogcmVzZXJ2ZSBzcGFjZSBmb3IgdGhlIGNoZWNrbWFyayAqL1xuICBtYXJnaW4tcmlnaHQ6IDRweDtcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xufSJdfQ== */";
+var styles = {"solid_select":"selectStyles_solid_select__NKR-3","solid_select__value":"selectStyles_solid_select__value__6Wfm7","solid_select__arrow":"selectStyles_solid_select__arrow__kTemB","solid_select__control":"selectStyles_solid_select__control__5tiE-","solid_select__placeholder":"selectStyles_solid_select__placeholder__G5WXj","solid_select__dropdown":"selectStyles_solid_select__dropdown__HDHJw","option-label":"selectStyles_option-label__hZrPh","solid_select__option":"selectStyles_solid_select__option__euHDA","selected":"selectStyles_selected__ux-hP","solid_select__transparent":"selectStyles_solid_select__transparent__ak6Va","solid_select__primary":"selectStyles_solid_select__primary__tQ3sJ","solid_select__option_primary":"selectStyles_solid_select__option_primary__zixQP","solid_select__primary_dropdown":"selectStyles_solid_select__primary_dropdown__ohWbr","solid_select__accent":"selectStyles_solid_select__accent__Rt07n","solid_select__option_accent":"selectStyles_solid_select__option_accent__xYJuA","solid_select__accent_dropdown":"selectStyles_solid_select__accent_dropdown__PY023","solid_select__tertiary":"selectStyles_solid_select__tertiary__8D4YE","solid_select__option_tertiary":"selectStyles_solid_select__option_tertiary__OIRkB","solid_select__tertiary_dropdown":"selectStyles_solid_select__tertiary_dropdown__k1M09","checkmark":"selectStyles_checkmark__zu0id"};
+styleInject(css_248z$5);
+
+var _tmpl$$8 = /*#__PURE__*/template(`<span class=solid_select__placeholder>`),
+  _tmpl$2$6 = /*#__PURE__*/template(`<span>`),
+  _tmpl$3$2 = /*#__PURE__*/template(`<span>▲`),
+  _tmpl$4$1 = /*#__PURE__*/template(`<span>▼`),
+  _tmpl$5 = /*#__PURE__*/template(`<div>`),
+  _tmpl$6 = /*#__PURE__*/template(`<div tabindex=0><div><span>`);
 const SelectContext = createContext();
 function Select(props) {
   const isMultiple = Object.keys(props).includes("multiple") || props.multiple === true ? !!props.multiple : false;
   // Internal state for selected value(s). Use provided value or defaultValue or an initial default.
-  const currStyle = props.style ?? "accent";
+  const [currStyle, setCurrStyle] = createSignal(props.style ?? "accent");
   const defaultSelected = isMultiple ? props.value ?? props.defaultValue ?? [] : props.value ?? props.defaultValue ?? undefined;
   const [selected, setSelected] = createSignal(defaultSelected);
   const [selectRef, setSelectRef] = createSignal();
   const [dropdownRef, setDropdownRef] = createSignal();
+  const form = useFormProvider();
   // Update internal state if `value` prop changes (controlled mode)
   createEffect(() => {
-    if (!isNullish(props.value)) {
-      setSelected(() => props.value);
+    const formSet = textInside => {
+      if (!isNullish(form.getName)) {
+        form.setTextInside(textInside);
+        props.placeholder = form.getName();
+      }
+    };
+    if (isMultiple) {
+      const value = props.value;
+      if (!isNullish(value) || value.length !== 0) {
+        formSet(true);
+        form.setValue(props.value);
+      } else {
+        formSet(false);
+        form.setValue(props.value);
+      }
+    } else {
+      const value = props.value;
+      if (!isNullish(value) || !(typeof value === "string" && !!!value.trim())) {
+        formSet(true);
+        form.setValue(props.value);
+      } else {
+        formSet(false);
+        form.setValue(props.value);
+      }
     }
   });
   // Signal for dropdown open/closed
@@ -883,13 +1232,11 @@ function Select(props) {
       // For multi-select, toggle the value in the array
       const current = selected() ?? [];
       let newSelected;
-      console.log('current', current, val);
       if (current.includes(val)) {
         newSelected = current.filter(item => item !== val);
       } else {
         newSelected = [...current, val];
       }
-      console.log('newSelected', newSelected);
       setSelected(newSelected);
       props.onChange?.(newSelected);
     } else {
@@ -916,10 +1263,17 @@ function Select(props) {
     if (isMultiple) {
       const selectedArray = Array.isArray(current) ? current : [];
       if (selectedArray.length === 0) {
+        if (form.getName !== undefined && form.getTextInside()) {
+          return (() => {
+            var _el$ = _tmpl$$8();
+            insert(_el$, () => form.getName() || props.placeholder || "Select...");
+            return _el$;
+          })();
+        }
         return (() => {
-          var _el$ = _tmpl$$7();
-          insert(_el$, () => props.placeholder || "Select...");
-          return _el$;
+          var _el$2 = _tmpl$$8();
+          insert(_el$2, () => props.placeholder || "Select...");
+          return _el$2;
         })();
       }
       if (props.renderValue) {
@@ -927,19 +1281,26 @@ function Select(props) {
       } else {
         const labels = selectedArray.map(val => optionsMap.get(val) || String(val));
         return (() => {
-          var _el$2 = _tmpl$2$5();
-          insert(_el$2, () => labels.join(", "));
-          return _el$2;
+          var _el$3 = _tmpl$2$6();
+          insert(_el$3, () => labels.join(", "));
+          return _el$3;
         })();
       }
     } else {
       // Single selection
       const singleVal = current;
       if (singleVal === undefined || singleVal === null) {
+        if (form.getName !== undefined) {
+          return (() => {
+            var _el$4 = _tmpl$$8();
+            insert(_el$4, () => form.getName() || props.placeholder || "Select...");
+            return _el$4;
+          })();
+        }
         return (() => {
-          var _el$3 = _tmpl$$7();
-          insert(_el$3, () => props.placeholder || "Select...");
-          return _el$3;
+          var _el$5 = _tmpl$$8();
+          insert(_el$5, () => props.placeholder || "Select...");
+          return _el$5;
         })();
       }
       if (props.renderValue) {
@@ -947,16 +1308,30 @@ function Select(props) {
       } else {
         const label = optionsMap.get(singleVal) || String(singleVal);
         return (() => {
-          var _el$4 = _tmpl$2$5();
-          insert(_el$4, label);
-          return _el$4;
+          var _el$6 = _tmpl$2$6();
+          insert(_el$6, label);
+          return _el$6;
         })();
       }
     }
   });
+  const dropdownBelowScreen = () => {
+    if (selectRef() && dropdownRef()) {
+      const selectRect = selectRef().getBoundingClientRect();
+      const dropdownRect = dropdownRef().getBoundingClientRect();
+      return selectRect.bottom + dropdownRect.height > window.innerHeight;
+    }
+    return false;
+  };
   const selectLocation = () => {
     if (selectRef()) {
       const rect = selectRef().getBoundingClientRect();
+      if (dropdownBelowScreen()) {
+        return {
+          x: rect.left,
+          y: rect.top - rect.height
+        };
+      }
       return {
         x: rect.left,
         y: rect.bottom
@@ -973,63 +1348,64 @@ function Select(props) {
     }
     return 0;
   };
-  createEffect(() => {
-    console.log('selected', selected());
-  });
   // Update width of select to match option text width
   createEffect(() => {
     if (selectRef() && dropdownRef()) {
       const dropdownWidth = dropdownRef().getBoundingClientRect().width;
       const selectWidth = selectRef().getBoundingClientRect().width;
-      if (dropdownWidth > selectWidth) {
-        setSelectRef(old => {
+      if (dropdownWidth !== selectWidth) {
+        setDropdownRef(old => {
           if (!old) return;
-          old.style.width = `${dropdownWidth}px`;
+          old.style.width = `${selectWidth}px`;
           return old;
         });
       }
     }
   });
   const isTransparent = Object.keys(props).includes("transparent") || props.transparent === true;
-  const styleClass = !isTransparent ? "solid-select__" + currStyle : '';
-  const styleClassDropdown = "solid-select__" + currStyle + "_dropdown";
-  const styleClassTransparent = isTransparent ? "solid-select__transparent" : "";
+  const styleClass = !isTransparent ? "solid_select__" + currStyle() : '';
+  const styleClassDropdown = "solid_select__" + currStyle() + "_dropdown";
+  const styleClassTransparent = isTransparent ? "solid_select__transparent" : "";
   return (() => {
-    var _el$5 = _tmpl$6(),
-      _el$6 = _el$5.firstChild,
-      _el$7 = _el$6.firstChild;
-    _el$5.$$keydown = e => {
+    var _el$7 = _tmpl$6(),
+      _el$8 = _el$7.firstChild,
+      _el$9 = _el$8.firstChild;
+    _el$7.$$keydown = e => {
       // (Optional) keyboard support for navigation can be added here
       if (e.key === "Escape") setOpen(false);
     };
-    _el$5.addEventListener("focus", () => {});
-    use(setSelectRef, _el$5);
-    className(_el$5, `solid-select ${styleClass} ${styleClassTransparent}`);
-    _el$6.$$click = toggleOpen;
-    insert(_el$7, displayValue);
-    insert(_el$6, createComponent(Show, {
+    _el$7.addEventListener("focus", () => {});
+    use(setSelectRef, _el$7);
+    _el$8.$$click = toggleOpen;
+    insert(_el$9, displayValue);
+    insert(_el$8, createComponent(Show, {
       get when() {
         return open();
       },
       get children() {
-        return _tmpl$3$2();
+        var _el$10 = _tmpl$3$2();
+        createRenderEffect(() => className(_el$10, styles['solid_select__arrow']));
+        return _el$10;
       }
     }), null);
-    insert(_el$6, createComponent(Show, {
+    insert(_el$8, createComponent(Show, {
       get when() {
         return !open();
       },
       get children() {
-        return _tmpl$4$2();
+        var _el$11 = _tmpl$4$1();
+        createRenderEffect(() => className(_el$11, styles['solid_select__arrow']));
+        return _el$11;
       }
     }), null);
-    insert(_el$5, createComponent(SelectContext.Provider, {
+    insert(_el$7, createComponent(SelectContext.Provider, {
       value: {
         isSelected,
         selectValue,
         registerOption,
         unregisterOption,
-        selectRef
+        selectRef,
+        selectStyle: currStyle
       },
       get children() {
         return createComponent(Show, {
@@ -1039,18 +1415,18 @@ function Select(props) {
           get children() {
             return createComponent(Portal, {
               get children() {
-                var _el$10 = _tmpl$5$1();
-                use(setDropdownRef, _el$10);
-                insert(_el$10, () => props.children);
+                var _el$12 = _tmpl$5();
+                use(setDropdownRef, _el$12);
+                insert(_el$12, () => props.children);
                 createRenderEffect(_p$ => {
-                  var _v$ = `solid-select__dropdown ${styleClassDropdown} ${props.dropdownClass || ""}`,
+                  var _v$ = `${styles['solid_select__dropdown']} ${styles[styleClassDropdown]} ${props.dropdownClass || ""}`,
                     _v$2 = `${selectLocation().y}px`,
                     _v$3 = `${selectLocation().x}px`,
                     _v$4 = `${selectWidth()}px`;
-                  _v$ !== _p$.e && className(_el$10, _p$.e = _v$);
-                  _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$10.style.setProperty("top", _v$2) : _el$10.style.removeProperty("top"));
-                  _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$10.style.setProperty("left", _v$3) : _el$10.style.removeProperty("left"));
-                  _v$4 !== _p$.o && ((_p$.o = _v$4) != null ? _el$10.style.setProperty("width", _v$4) : _el$10.style.removeProperty("width"));
+                  _v$ !== _p$.e && className(_el$12, _p$.e = _v$);
+                  _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$12.style.setProperty("top", _v$2) : _el$12.style.removeProperty("top"));
+                  _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$12.style.setProperty("left", _v$3) : _el$12.style.removeProperty("left"));
+                  _v$4 !== _p$.o && ((_p$.o = _v$4) != null ? _el$12.style.setProperty("width", _v$4) : _el$12.style.removeProperty("width"));
                   return _p$;
                 }, {
                   e: undefined,
@@ -1058,7 +1434,7 @@ function Select(props) {
                   a: undefined,
                   o: undefined
                 });
-                return _el$10;
+                return _el$12;
               }
             });
           }
@@ -1067,23 +1443,29 @@ function Select(props) {
     }), null);
     createRenderEffect(_p$ => {
       var _v$5 = props.id,
-        _v$6 = props.tooltip,
-        _v$7 = `solid-select__control ${props.class || ""}`;
-      _v$5 !== _p$.e && setAttribute(_el$5, "id", _p$.e = _v$5);
-      _v$6 !== _p$.t && setAttribute(_el$5, "title", _p$.t = _v$6);
-      _v$7 !== _p$.a && className(_el$6, _p$.a = _v$7);
+        _v$6 = `${styles.solid_select} ${styles[styleClass]} ${styles[styleClassTransparent]} coles-solid-selectControl`,
+        _v$7 = props.tooltip,
+        _v$8 = `${styles['solid_select__control']} ${props.class || ""}`,
+        _v$9 = styles['solid_select__value'];
+      _v$5 !== _p$.e && setAttribute(_el$7, "id", _p$.e = _v$5);
+      _v$6 !== _p$.t && className(_el$7, _p$.t = _v$6);
+      _v$7 !== _p$.a && setAttribute(_el$7, "title", _p$.a = _v$7);
+      _v$8 !== _p$.o && className(_el$8, _p$.o = _v$8);
+      _v$9 !== _p$.i && className(_el$9, _p$.i = _v$9);
       return _p$;
     }, {
       e: undefined,
       t: undefined,
-      a: undefined
+      a: undefined,
+      o: undefined,
+      i: undefined
     });
-    return _el$5;
+    return _el$7;
   })();
 }
 delegateEvents(["keydown", "click"]);
 
-var _tmpl$$6 = /*#__PURE__*/template(`<div><span class=checkmark></span><span class=option-label>`);
+var _tmpl$$7 = /*#__PURE__*/template(`<div><span></span><span>`);
 function Option(props) {
   const select = useContext(SelectContext);
   if (!select) {
@@ -1096,29 +1478,39 @@ function Option(props) {
     select.selectValue(props.value);
   };
   return (() => {
-    var _el$ = _tmpl$$6(),
+    var _el$ = _tmpl$$7(),
       _el$2 = _el$.firstChild,
       _el$3 = _el$2.nextSibling;
     _el$.$$click = handleClick;
     insert(_el$2, () => select.isSelected(props.value) ? "✓" : "");
     insert(_el$3, () => props.children ?? "");
     createRenderEffect(_p$ => {
-      var _v$ = `solid-select__option ${props.class || ""}`,
-        _v$2 = !!select.isSelected(props.value);
+      var _v$ = `${styles['solid_select__option']} ${styles[`solid_select__option_${select?.selectStyle?.() ?? 'accent'}`]} ${props.class || ""}`,
+        _v$2 = !!select.isSelected(props.value),
+        _v$3 = `${styles['checkmark']}`,
+        _v$4 = `${styles['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);
       return _p$;
     }, {
       e: undefined,
-      t: undefined
+      t: undefined,
+      a: undefined,
+      o: undefined
     });
     return _el$;
   })();
 }
 delegateEvents(["click"]);
 
-var _tmpl$$5 = /*#__PURE__*/template(`<div class=snackContainer>`),
-  _tmpl$2$4 = /*#__PURE__*/template(`<div><span>`);
+var css_248z$4 = ".snackbar-module_snack__Dkcmp {\n  position: fixed;\n  bottom: 10px;\n  left: 45vw;\n  right: 45vw;\n  border-radius: 15px;\n  margin: 0;\n  padding: 0;\n  z-index: 9999;\n  display: flex;\n  flex-direction: row;\n  align-items: flex-end;\n  max-width: 10vw;\n  padding: 5px;\n}\n@media screen and (max-width: 768px) {\n  .snackbar-module_snack__Dkcmp {\n    left: 8vw;\n    right: 8vw;\n    bottom: 20vh;\n    max-width: 70vw;\n  }\n}\n.snackbar-module_snack__Dkcmp span {\n  flex-grow: 1;\n  margin: auto 0;\n  text-wrap: wrap;\n}\n.snackbar-module_snack__Dkcmp button {\n  margin: auto 0;\n}\n\n.snackbar-module_error__7IShA {\n  border: 2px solid red;\n  border-color: red;\n  color: red;\n  font-weight: bold;\n}\n\n.snackbar-module_success__JPkNY {\n  border-color: #4caf50;\n  border: 2px solid #4caf50;\n  color: #4caf50;\n}\n\n.snackbar-module_info__52mgJ {\n  border-color: var(--on-primary-color, #ffffff);\n  border: 2px solid var(--on-primary-color, #ffffff);\n  color: var(--on-primary-color, #ffffff);\n}\n\n.snackbar-module_warning__K1oCK {\n  border-color: #ff9800;\n  border: 2px solid #ff9800;\n  color: #ff9800;\n}\n\n.snackbar-module_open__Bdhg1 {\n  animation: snackbar-module_slideIn__aM-2K 0.5s forwards;\n}\n\n.snackbar-module_close__-JXxs {\n  animation: snackbar-module_slideOut__6sQkv 0.5s forwards;\n}\n\n.snackbar-module_primary__j2zPB {\n  background-color: var(--primary-color, #3F51B5);\n  color: var(--on-primary-color, #ffffff);\n}\n.snackbar-module_primary__j2zPB:hover {\n  cursor: pointer;\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNuYWNrYmFyLm1vZHVsZS5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsZUFBZTtFQUNmLFlBQVk7RUFDWixVQUFVO0VBQ1YsV0FBVztFQUNYLG1CQUFtQjtFQUNuQixTQUFTO0VBQ1QsVUFBVTtFQUNWLGFBQWE7RUFDYixhQUFhO0VBQ2IsbUJBQW1CO0VBQ25CLHFCQUFxQjtFQUNyQixlQUFlO0VBQ2YsWUFBWTtBQUNkO0FBQ0E7RUFDRTtJQUNFLFNBQVM7SUFDVCxVQUFVO0lBQ1YsWUFBWTtJQUNaLGVBQWU7RUFDakI7QUFDRjtBQUNBO0VBQ0UsWUFBWTtFQUNaLGNBQWM7RUFDZCxlQUFlO0FBQ2pCO0FBQ0E7RUFDRSxjQUFjO0FBQ2hCOztBQUVBO0VBQ0UscUJBQXFCO0VBQ3JCLGlCQUFpQjtFQUNqQixVQUFVO0VBQ1YsaUJBQWlCO0FBQ25COztBQUVBO0VBQ0UscUJBQXFCO0VBQ3JCLHlCQUF5QjtFQUN6QixjQUFjO0FBQ2hCOztBQUVBO0VBQ0UsOENBQThDO0VBQzlDLGtEQUFrRDtFQUNsRCx1Q0FBdUM7QUFDekM7O0FBRUE7RUFDRSxxQkFBcUI7RUFDckIseUJBQXlCO0VBQ3pCLGNBQWM7QUFDaEI7O0FBRUE7RUFDRSx1REFBZ0M7QUFDbEM7O0FBRUE7RUFDRSx3REFBaUM7QUFDbkM7O0FBRUE7RUFDRSwrQ0FBK0M7RUFDL0MsdUNBQXVDO0FBQ3pDO0FBQ0E7RUFDRSxlQUFlO0FBQ2pCIiwiZmlsZSI6InNuYWNrYmFyLm1vZHVsZS5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLnNuYWNrIHtcbiAgcG9zaXRpb246IGZpeGVkO1xuICBib3R0b206IDEwcHg7XG4gIGxlZnQ6IDQ1dnc7XG4gIHJpZ2h0OiA0NXZ3O1xuICBib3JkZXItcmFkaXVzOiAxNXB4O1xuICBtYXJnaW46IDA7XG4gIHBhZGRpbmc6IDA7XG4gIHotaW5kZXg6IDk5OTk7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiByb3c7XG4gIGFsaWduLWl0ZW1zOiBmbGV4LWVuZDtcbiAgbWF4LXdpZHRoOiAxMHZ3O1xuICBwYWRkaW5nOiA1cHg7XG59XG5AbWVkaWEgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiA3NjhweCkge1xuICAuc25hY2sge1xuICAgIGxlZnQ6IDh2dztcbiAgICByaWdodDogOHZ3O1xuICAgIGJvdHRvbTogMjB2aDtcbiAgICBtYXgtd2lkdGg6IDcwdnc7XG4gIH1cbn1cbi5zbmFjayBzcGFuIHtcbiAgZmxleC1ncm93OiAxO1xuICBtYXJnaW46IGF1dG8gMDtcbiAgdGV4dC13cmFwOiB3cmFwO1xufVxuLnNuYWNrIGJ1dHRvbiB7XG4gIG1hcmdpbjogYXV0byAwO1xufVxuXG4uZXJyb3Ige1xuICBib3JkZXI6IDJweCBzb2xpZCByZWQ7XG4gIGJvcmRlci1jb2xvcjogcmVkO1xuICBjb2xvcjogcmVkO1xuICBmb250LXdlaWdodDogYm9sZDtcbn1cblxuLnN1Y2Nlc3Mge1xuICBib3JkZXItY29sb3I6ICM0Y2FmNTA7XG4gIGJvcmRlcjogMnB4IHNvbGlkICM0Y2FmNTA7XG4gIGNvbG9yOiAjNGNhZjUwO1xufVxuXG4uaW5mbyB7XG4gIGJvcmRlci1jb2xvcjogdmFyKC0tb24tcHJpbWFyeS1jb2xvciwgI2ZmZmZmZik7XG4gIGJvcmRlcjogMnB4IHNvbGlkIHZhcigtLW9uLXByaW1hcnktY29sb3IsICNmZmZmZmYpO1xuICBjb2xvcjogdmFyKC0tb24tcHJpbWFyeS1jb2xvciwgI2ZmZmZmZik7XG59XG5cbi53YXJuaW5nIHtcbiAgYm9yZGVyLWNvbG9yOiAjZmY5ODAwO1xuICBib3JkZXI6IDJweCBzb2xpZCAjZmY5ODAwO1xuICBjb2xvcjogI2ZmOTgwMDtcbn1cblxuLm9wZW4ge1xuICBhbmltYXRpb246IHNsaWRlSW4gMC41cyBmb3J3YXJkcztcbn1cblxuLmNsb3NlIHtcbiAgYW5pbWF0aW9uOiBzbGlkZU91dCAwLjVzIGZvcndhcmRzO1xufVxuXG4ucHJpbWFyeSB7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXByaW1hcnktY29sb3IsICMzRjUxQjUpO1xuICBjb2xvcjogdmFyKC0tb24tcHJpbWFyeS1jb2xvciwgI2ZmZmZmZik7XG59XG4ucHJpbWFyeTpob3ZlciB7XG4gIGN1cnNvcjogcG9pbnRlcjtcbn0iXX0= */";
+var style$4 = {"snack":"snackbar-module_snack__Dkcmp","error":"snackbar-module_error__7IShA","success":"snackbar-module_success__JPkNY","info":"snackbar-module_info__52mgJ","warning":"snackbar-module_warning__K1oCK","open":"snackbar-module_open__Bdhg1","slideIn":"snackbar-module_slideIn__aM-2K","close":"snackbar-module_close__-JXxs","slideOut":"snackbar-module_slideOut__6sQkv","primary":"snackbar-module_primary__j2zPB"};
+styleInject(css_248z$4);
+
+var _tmpl$$6 = /*#__PURE__*/template(`<div>`),
+  _tmpl$2$5 = /*#__PURE__*/template(`<div><span>`);
 const [snackbars, setSnackbars] = createSignal([]);
 const addSnackbar = snack => {
   setSnackbars(old => [...old, snack]);
@@ -1132,7 +1524,7 @@ const SnackbarController = () => {
       return snackbars().length > 0;
     },
     get children() {
-      var _el$ = _tmpl$$5();
+      var _el$ = _tmpl$$6();
       insert(_el$, createComponent(For, {
         get each() {
           return snackbars();
@@ -1144,6 +1536,7 @@ const SnackbarController = () => {
           onClose: () => removeSnackbar(index())
         }))
       }));
+      createRenderEffect(() => className(_el$, style$4.snackContainer));
       return _el$;
     }
   });
@@ -1163,7 +1556,7 @@ const Snackbar = props => {
           return isOpen();
         },
         get children() {
-          var _el$2 = _tmpl$2$4(),
+          var _el$2 = _tmpl$2$5(),
             _el$3 = _el$2.firstChild;
           insert(_el$3, () => props.message);
           insert(_el$2, createComponent(Button, {
@@ -1174,7 +1567,7 @@ const Snackbar = props => {
           }), null);
           createRenderEffect(_p$ => {
             var _v$ = `${10 + props.index * (50 + messageLength * 8)}px`,
-              _v$2 = `.primary .snack ${props.severity ?? "info"}`;
+              _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$;
@@ -1213,11 +1606,11 @@ function getTableContext() {
   return useContext(tableContext);
 }
 
-var _tmpl$$4 = /*#__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$3 = /*#__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>`);
+var _tmpl$$5 = /*#__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$$4();
+    var _el$ = _tmpl$$5();
     spread(_el$, mergeProps(props, {
       "viewBox": "0 0 46 44",
       "fill": "none",
@@ -1228,7 +1621,7 @@ const UpArrow = props => {
 };
 const DownArrow = props => {
   return (() => {
-    var _el$2 = _tmpl$2$3();
+    var _el$2 = _tmpl$2$4();
     spread(_el$2, mergeProps(props, {
       "viewBox": "0 0 44 43",
       "fill": "none",
@@ -1238,10 +1631,10 @@ const DownArrow = props => {
   })();
 };
 
-var _tmpl$$3 = /*#__PURE__*/template(`<table><thead></thead><tbody>`),
-  _tmpl$2$2 = /*#__PURE__*/template(`<tr><td>`),
+var _tmpl$$4 = /*#__PURE__*/template(`<table><thead></thead><tbody>`),
+  _tmpl$2$3 = /*#__PURE__*/template(`<tr><td>`),
   _tmpl$3$1 = /*#__PURE__*/template(`<tr>`),
-  _tmpl$4$1 = /*#__PURE__*/template(`<td>`);
+  _tmpl$4 = /*#__PURE__*/template(`<td>`);
 const Table = props => {
   return createComponent(TableProvider, {
     value: {
@@ -1275,7 +1668,7 @@ const TableComponent = props => {
   };
   props.children;
   return (() => {
-    var _el$ = _tmpl$$3(),
+    var _el$ = _tmpl$$4(),
       _el$2 = _el$.firstChild,
       _el$3 = _el$2.nextSibling;
     spread(_el$, others, false, true);
@@ -1358,7 +1751,7 @@ const BuildTableRow = props => {
       return createMemo(() => !!props.isDropTable)() && hasTransforms();
     },
     get children() {
-      var _el$4 = _tmpl$2$2(),
+      var _el$4 = _tmpl$2$3(),
         _el$5 = _el$4.firstChild;
       insert(_el$4, createComponent(For, {
         get each() {
@@ -1369,7 +1762,7 @@ const BuildTableRow = props => {
           return createComponent(Show, {
             when: typeof cellTransform === "function",
             get children() {
-              var _el$7 = _tmpl$4$1();
+              var _el$7 = _tmpl$4();
               spread(_el$7, mergeProps({
                 get ["data-index"]() {
                   return i();
@@ -1444,7 +1837,7 @@ const BuildTableRow = props => {
           return createComponent(Show, {
             when: typeof cellTransform === "function",
             get children() {
-              var _el$8 = _tmpl$4$1();
+              var _el$8 = _tmpl$4();
               spread(_el$8, mergeProps({
                 get ["data-index"]() {
                   return i();
@@ -1462,7 +1855,7 @@ const BuildTableRow = props => {
 };
 const BuildSecondRow = props => {
   return (() => {
-    var _el$9 = _tmpl$2$2(),
+    var _el$9 = _tmpl$2$3(),
       _el$10 = _el$9.firstChild;
     insert(_el$10, () => props.transform(props.row, props.rowI));
     createRenderEffect(() => setAttribute(_el$10, "colspan", props.colSpan));
@@ -1470,56 +1863,88 @@ const BuildSecondRow = props => {
   })();
 };
 
-const Tab = props => {
-  const {
-    tabs,
-    setTabs
-  } = getTabContext();
-  createEffect(() => {
-    if (props.hidden) {
-      if (props.hidden()) {
-        setTabs(old => {
-          const newTabs = {
-            ...old
-          };
-          delete newTabs[props.name];
-          return newTabs;
-        });
-      } else {
-        if (!!props.name && !Object.keys(tabs()).includes(props.name)) {
-          setTabs(old => ({
-            ...old,
-            [props.name]: props.children
-          }));
-        }
-      }
-    }
+var css_248z$3 = ".popup-module_popup__Oeq7F {\n  padding: 0px;\n  padding-top: var(--spacing-1, 8px);\n  padding-bottom: var(--spacing-1, 5px);\n  overflow: hidden;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  border: var(--on-primary-color) 1px solid;\n  border-radius: var(--border-radius-md, 8px);\n  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n  z-index: 1000;\n  text-align: center;\n}\n\n.popup-module_wrapper__S7cXt {\n  padding: 0px;\n  overflow-y: hidden;\n  padding-bottom: 5px;\n  display: flex;\n  flex-direction: column;\n}\n.popup-module_wrapper__S7cXt :not(span):nth-child(2) {\n  margin-top: 5%;\n  height: 95%;\n  flex-grow: 1;\n  overflow-y: auto;\n}\n\n.popup-module_header__aKiI0 {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 5%;\n  overflow-y: hidden;\n  padding: 5px;\n  min-height: 2em;\n}\n.popup-module_header__aKiI0 h2 {\n  text-align: left;\n  margin-left: 5%;\n  flex-grow: 1;\n  padding: 0px;\n  padding-bottom: 5px;\n  margin: 0px;\n  margin-left: 1em;\n}\n.popup-module_header__aKiI0 span {\n  flex-shrink: 0;\n  width: -moz-min-content;\n  width: min-content;\n  height: -moz-min-content;\n  height: min-content;\n}\n.popup-module_header__aKiI0 span button:hover {\n  cursor: pointer;\n}\n\n.popup-module_body__ouRAt {\n  flex-grow: 1;\n}\n\n.popup-module_primary__tm77N {\n  background-color: var(--primary-color, #3F51B5);\n  color: var(--on-primary-color, #FFFFFF);\n}\n\n.popup-module_accent__AzLZ1 {\n  background-color: var(--secondary-color, #5C6BC0);\n  color: var(--on-secondary-color, #FFFFFF);\n}\n\n.popup-module_tertiary__69E41 {\n  background-color: var(--tertiary-color, #8A2BE2);\n  color: var(--on-tertiary-color, #FFFFFF);\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBvcHVwLm1vZHVsZS5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsWUFBWTtFQUNaLGtDQUFrQztFQUNsQyxxQ0FBcUM7RUFDckMsZ0JBQWdCO0VBQ2hCLGVBQWU7RUFDZixRQUFRO0VBQ1IsU0FBUztFQUNULHlDQUF5QztFQUN6QywyQ0FBMkM7RUFDM0MsdUNBQXVDO0VBQ3ZDLGFBQWE7RUFDYixrQkFBa0I7QUFDcEI7O0FBRUE7RUFDRSxZQUFZO0VBQ1osa0JBQWtCO0VBQ2xCLG1CQUFtQjtFQUNuQixhQUFhO0VBQ2Isc0JBQXNCO0FBQ3hCO0FBQ0E7RUFDRSxjQUFjO0VBQ2QsV0FBVztFQUNYLFlBQVk7RUFDWixnQkFBZ0I7QUFDbEI7O0FBRUE7RUFDRSxhQUFhO0VBQ2IsbUJBQW1CO0VBQ25CLDhCQUE4QjtFQUM5QixlQUFlO0VBQ2YsTUFBTTtFQUNOLE9BQU87RUFDUCxRQUFRO0VBQ1IsVUFBVTtFQUNWLGtCQUFrQjtFQUNsQixZQUFZO0VBQ1osZUFBZTtBQUNqQjtBQUNBO0VBQ0UsZ0JBQWdCO0VBQ2hCLGVBQWU7RUFDZixZQUFZO0VBQ1osWUFBWTtFQUNaLG1CQUFtQjtFQUNuQixXQUFXO0VBQ1gsZ0JBQWdCO0FBQ2xCO0FBQ0E7RUFDRSxjQUFjO0VBQ2QsdUJBQWtCO0VBQWxCLGtCQUFrQjtFQUNsQix3QkFBbUI7RUFBbkIsbUJBQW1CO0FBQ3JCO0FBQ0E7RUFDRSxlQUFlO0FBQ2pCOztBQUVBO0VBQ0UsWUFBWTtBQUNkOztBQUVBO0VBQ0UsK0NBQStDO0VBQy9DLHVDQUF1QztBQUN6Qzs7QUFFQTtFQUNFLGlEQUFpRDtFQUNqRCx5Q0FBeUM7QUFDM0M7O0FBRUE7RUFDRSxnREFBZ0Q7RUFDaEQsd0NBQXdDO0FBQzFDIiwiZmlsZSI6InBvcHVwLm1vZHVsZS5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLnBvcHVwIHtcbiAgcGFkZGluZzogMHB4O1xuICBwYWRkaW5nLXRvcDogdmFyKC0tc3BhY2luZy0xLCA4cHgpO1xuICBwYWRkaW5nLWJvdHRvbTogdmFyKC0tc3BhY2luZy0xLCA1cHgpO1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBwb3NpdGlvbjogZml4ZWQ7XG4gIHRvcDogNTAlO1xuICBsZWZ0OiA1MCU7XG4gIGJvcmRlcjogdmFyKC0tb24tcHJpbWFyeS1jb2xvcikgMXB4IHNvbGlkO1xuICBib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzLW1kLCA4cHgpO1xuICBib3gtc2hhZG93OiAwIDAgMTBweCByZ2JhKDAsIDAsIDAsIDAuMSk7XG4gIHotaW5kZXg6IDEwMDA7XG4gIHRleHQtYWxpZ246IGNlbnRlcjtcbn1cblxuLndyYXBwZXIge1xuICBwYWRkaW5nOiAwcHg7XG4gIG92ZXJmbG93LXk6IGhpZGRlbjtcbiAgcGFkZGluZy1ib3R0b206IDVweDtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbn1cbi53cmFwcGVyIDpub3Qoc3Bhbik6bnRoLWNoaWxkKDIpIHtcbiAgbWFyZ2luLXRvcDogNSU7XG4gIGhlaWdodDogOTUlO1xuICBmbGV4LWdyb3c6IDE7XG4gIG92ZXJmbG93LXk6IGF1dG87XG59XG5cbi5oZWFkZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogcm93O1xuICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG4gIHBvc2l0aW9uOiBmaXhlZDtcbiAgdG9wOiAwO1xuICBsZWZ0OiAwO1xuICByaWdodDogMDtcbiAgaGVpZ2h0OiA1JTtcbiAgb3ZlcmZsb3cteTogaGlkZGVuO1xuICBwYWRkaW5nOiA1cHg7XG4gIG1pbi1oZWlnaHQ6IDJlbTtcbn1cbi5oZWFkZXIgaDIge1xuICB0ZXh0LWFsaWduOiBsZWZ0O1xuICBtYXJnaW4tbGVmdDogNSU7XG4gIGZsZXgtZ3JvdzogMTtcbiAgcGFkZGluZzogMHB4O1xuICBwYWRkaW5nLWJvdHRvbTogNXB4O1xuICBtYXJnaW46IDBweDtcbiAgbWFyZ2luLWxlZnQ6IDFlbTtcbn1cbi5oZWFkZXIgc3BhbiB7XG4gIGZsZXgtc2hyaW5rOiAwO1xuICB3aWR0aDogbWluLWNvbnRlbnQ7XG4gIGhlaWdodDogbWluLWNvbnRlbnQ7XG59XG4uaGVhZGVyIHNwYW4gYnV0dG9uOmhvdmVyIHtcbiAgY3Vyc29yOiBwb2ludGVyO1xufVxuXG4uYm9keSB7XG4gIGZsZXgtZ3JvdzogMTtcbn1cblxuLnByaW1hcnkge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1wcmltYXJ5LWNvbG9yLCAjM0Y1MUI1KTtcbiAgY29sb3I6IHZhcigtLW9uLXByaW1hcnktY29sb3IsICNGRkZGRkYpO1xufVxuXG4uYWNjZW50IHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc2Vjb25kYXJ5LWNvbG9yLCAjNUM2QkMwKTtcbiAgY29sb3I6IHZhcigtLW9uLXNlY29uZGFyeS1jb2xvciwgI0ZGRkZGRik7XG59XG5cbi50ZXJ0aWFyeSB7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXRlcnRpYXJ5LWNvbG9yLCAjOEEyQkUyKTtcbiAgY29sb3I6IHZhcigtLW9uLXRlcnRpYXJ5LWNvbG9yLCAjRkZGRkZGKTtcbn0iXX0= */";
+var style$3 = {"popup":"popup-module_popup__Oeq7F","wrapper":"popup-module_wrapper__S7cXt","header":"popup-module_header__aKiI0","body":"popup-module_body__ouRAt","primary":"popup-module_primary__tm77N","accent":"popup-module_accent__AzLZ1","tertiary":"popup-module_tertiary__69E41"};
+styleInject(css_248z$3);
+
+var _tmpl$$3 = /*#__PURE__*/template(`<b>X`),
+  _tmpl$2$2 = /*#__PURE__*/template(`<div><div><h2></h2><span></span></div><div>`);
+/**
+ *
+ * @param title {string} {string} - The title of the modal.
+ * @param width {string} {string} - The css width of the modal.
+ * @param maxWidth {string} {string} - The optional css max-width of the modal.
+ * @param height {string} {string} - The css height of the modal.
+ * @param maxHeight {string} {string} - The optional css max-height of the modal.
+ * @param translate {x{x: string, y: string} - Override the default x and y coordinates of the modal.
+ * @param backgroundClick [Accessor <bool>, Setter <bool>] - A signal and setter for enabling the background click.
+ * @returns - A Modal component.
+ */
+const Modal = props => {
+  const defaultX = props.translate?.x ?? "-50%";
+  const defaultY = props.translate?.y ?? "-50%";
+  const [popupRef, setPopupRef] = createSignal();
+  const outside = useClickOutside(() => props.ref ? props.ref() : popupRef(), () => {
+    props.show[1](old => false);
   });
-  onMount(() => {
-    if (props.name !== undefined) {
-      if (!props.hidden || props.hidden && !props.hidden()) {
-        setTabs(old => ({
-          ...old,
-          [props.name]: props.children
-        }));
-      }
-    }
+  onCleanup(() => {
+    outside();
   });
   return createComponent(Show, {
     get when() {
-      return !props.hidden || props.hidden();
+      return createMemo(() => !!props.show)() ? props.show[0]() : true;
     },
     get children() {
-      return props.children;
+      return createComponent(Portal, {
+        get children() {
+          var _el$ = _tmpl$2$2(),
+            _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, {
+            onClick: () => props.setClose ? props.setClose(old => !old) : props.show[1](old => !old),
+            get children() {
+              return _tmpl$$3();
+            }
+          }));
+          insert(_el$6, () => props.children);
+          createRenderEffect(_p$ => {
+            var _v$ = props.width ? props.width : isMobile() ? "90vw" : "45vw",
+              _v$2 = props.height ? props.height : isMobile() ? "90vh" : "60vh",
+              _v$3 = `${style$3[props.styleType ?? "primary"]} ${style$3.wrapper} ${style$3.popup}`,
+              _v$4 = `${style$3.accent} ${style$3.header}`,
+              _v$5 = style$3.body;
+            _v$ !== _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 _tmpl$$2 = /*#__PURE__*/template(`<span class=leftArrow>`),
-  _tmpl$2$1 = /*#__PURE__*/template(`<span class=rightArrow>`),
-  _tmpl$3 = /*#__PURE__*/template(`<div class=.tabs><div><div class=tabHeader></div></div><div>`),
-  _tmpl$4 = /*#__PURE__*/template(`<b>`),
-  _tmpl$5 = /*#__PURE__*/template(`<span class=hover>`);
+var css_248z$2 = ".tabs-module_tabs__AqLFl {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n.tabs-module_singleTabs__SOD5d {\n  display: flex;\n  flex-direction: row;\n  border-radius: 10px;\n  border-bottom: 1px solid white;\n}\n\n.tabs-module_hover__4r8g4:hover {\n  cursor: pointer;\n}\n\n.tabs-module_tabHeader__X1-FY {\n  display: flex;\n  flex-direction: row;\n  max-width: 88%;\n  scroll-behavior: smooth;\n  overflow: hidden;\n  font-size: 1rem;\n  padding: 0;\n  float: left;\n}\n@media screen and (max-width: 768px) {\n  .tabs-module_tabHeader__X1-FY {\n    margin: 0px auto;\n    max-width: 100%;\n  }\n}\n.tabs-module_tabHeader__X1-FY :first-child {\n  border-left: none;\n}\n.tabs-module_tabHeader__X1-FY span {\n  height: inherit;\n  padding: 10px 20px;\n  border-left: 1px solid white;\n}\n@media screen and (max-width: 768px) {\n  .tabs-module_tabHeader__X1-FY span {\n    padding-bottom: 0px;\n  }\n}\n\n.tabs-module_tabBody__rJfud {\n  width: 100%;\n  height: 100%;\n  border-radius: 10px;\n  padding: 5px;\n}\n\n.tabs-module_leftArrow__0imd- {\n  margin-right: 10px;\n  align-self: flex-start;\n  margin: auto 0px;\n}\n\n.tabs-module_rightArrow__aCBVp {\n  margin-left: 10px;\n  align-self: flex-end;\n  margin: auto 0px;\n}\n\n.tabs-module_transparent__yL988 {\n  background: inherit;\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRhYnMubW9kdWxlLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxXQUFXO0VBQ1gsYUFBYTtFQUNiLHNCQUFzQjtBQUN4Qjs7QUFFQTtFQUNFLGFBQWE7RUFDYixtQkFBbUI7RUFDbkIsbUJBQW1CO0VBQ25CLDhCQUE4QjtBQUNoQzs7QUFFQTtFQUNFLGVBQWU7QUFDakI7O0FBRUE7RUFDRSxhQUFhO0VBQ2IsbUJBQW1CO0VBQ25CLGNBQWM7RUFDZCx1QkFBdUI7RUFDdkIsZ0JBQWdCO0VBQ2hCLGVBQWU7RUFDZixVQUFVO0VBQ1YsV0FBVztBQUNiO0FBQ0E7RUFDRTtJQUNFLGdCQUFnQjtJQUNoQixlQUFlO0VBQ2pCO0FBQ0Y7QUFDQTtFQUNFLGlCQUFpQjtBQUNuQjtBQUNBO0VBQ0UsZUFBZTtFQUNmLGtCQUFrQjtFQUNsQiw0QkFBNEI7QUFDOUI7QUFDQTtFQUNFO0lBQ0UsbUJBQW1CO0VBQ3JCO0FBQ0Y7O0FBRUE7RUFDRSxXQUFXO0VBQ1gsWUFBWTtFQUNaLG1CQUFtQjtFQUNuQixZQUFZO0FBQ2Q7O0FBRUE7RUFDRSxrQkFBa0I7RUFDbEIsc0JBQXNCO0VBQ3RCLGdCQUFnQjtBQUNsQjs7QUFFQTtFQUNFLGlCQUFpQjtFQUNqQixvQkFBb0I7RUFDcEIsZ0JBQWdCO0FBQ2xCOztBQUVBO0VBQ0UsbUJBQW1CO0FBQ3JCIiwiZmlsZSI6InRhYnMubW9kdWxlLnNjc3MiLCJzb3VyY2VzQ29udGVudCI6WyIudGFicyB7XG4gIHdpZHRoOiAxMDAlO1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xufVxuXG4uc2luZ2xlVGFicyB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiByb3c7XG4gIGJvcmRlci1yYWRpdXM6IDEwcHg7XG4gIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCB3aGl0ZTtcbn1cblxuLmhvdmVyOmhvdmVyIHtcbiAgY3Vyc29yOiBwb2ludGVyO1xufVxuXG4udGFiSGVhZGVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IHJvdztcbiAgbWF4LXdpZHRoOiA4OCU7XG4gIHNjcm9sbC1iZWhhdmlvcjogc21vb3RoO1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBmb250LXNpemU6IDFyZW07XG4gIHBhZGRpbmc6IDA7XG4gIGZsb2F0OiBsZWZ0O1xufVxuQG1lZGlhIHNjcmVlbiBhbmQgKG1heC13aWR0aDogNzY4cHgpIHtcbiAgLnRhYkhlYWRlciB7XG4gICAgbWFyZ2luOiAwcHggYXV0bztcbiAgICBtYXgtd2lkdGg6IDEwMCU7XG4gIH1cbn1cbi50YWJIZWFkZXIgOmZpcnN0LWNoaWxkIHtcbiAgYm9yZGVyLWxlZnQ6IG5vbmU7XG59XG4udGFiSGVhZGVyIHNwYW4ge1xuICBoZWlnaHQ6IGluaGVyaXQ7XG4gIHBhZGRpbmc6IDEwcHggMjBweDtcbiAgYm9yZGVyLWxlZnQ6IDFweCBzb2xpZCB3aGl0ZTtcbn1cbkBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDc2OHB4KSB7XG4gIC50YWJIZWFkZXIgc3BhbiB7XG4gICAgcGFkZGluZy1ib3R0b206IDBweDtcbiAgfVxufVxuXG4udGFiQm9keSB7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIGJvcmRlci1yYWRpdXM6IDEwcHg7XG4gIHBhZGRpbmc6IDVweDtcbn1cblxuLmxlZnRBcnJvdyB7XG4gIG1hcmdpbi1yaWdodDogMTBweDtcbiAgYWxpZ24tc2VsZjogZmxleC1zdGFydDtcbiAgbWFyZ2luOiBhdXRvIDBweDtcbn1cblxuLnJpZ2h0QXJyb3cge1xuICBtYXJnaW4tbGVmdDogMTBweDtcbiAgYWxpZ24tc2VsZjogZmxleC1lbmQ7XG4gIG1hcmdpbjogYXV0byAwcHg7XG59XG5cbi50cmFuc3BhcmVudCB7XG4gIGJhY2tncm91bmQ6IGluaGVyaXQ7XG59Il19 */";
+var style$2 = {"tabs":"tabs-module_tabs__AqLFl","singleTabs":"tabs-module_singleTabs__SOD5d","hover":"tabs-module_hover__4r8g4","tabHeader":"tabs-module_tabHeader__X1-FY","tabBody":"tabs-module_tabBody__rJfud","leftArrow":"tabs-module_leftArrow__0imd-","rightArrow":"tabs-module_rightArrow__aCBVp","transparent":"tabs-module_transparent__yL988"};
+styleInject(css_248z$2);
+
+var _tmpl$$2 = /*#__PURE__*/template(`<span>`),
+  _tmpl$2$1 = /*#__PURE__*/template(`<div><div><div></div></div><div>`),
+  _tmpl$3 = /*#__PURE__*/template(`<b>`);
 const tabContext = createContext({
   tabs: () => ({}),
   setTabs: () => {}
@@ -1565,7 +1990,6 @@ const TabInternal = props => {
   const [selectedTab, setSelectedTab] = createSignal(Object.keys(tabs())[0]);
   const currentElement = createMemo(() => tabs()[selectedTab()]);
   children(() => props.children);
-  const isMobile = createMemo(() => window.innerWidth < 768);
   const hasTranparent = createMemo(() => Object.keys(props).includes("transparent"));
   createRenderEffect(() => {
     setSelectedTab(Object.keys(tabs())[0]);
@@ -1613,7 +2037,7 @@ const TabInternal = props => {
     setTabsArr(Object.keys(tabs()));
   });
   return (() => {
-    var _el$ = _tmpl$3(),
+    var _el$ = _tmpl$2$1(),
       _el$2 = _el$.firstChild,
       _el$4 = _el$2.firstChild,
       _el$6 = _el$2.nextSibling;
@@ -1627,6 +2051,7 @@ const TabInternal = props => {
           onClick: scrollLeft,
           children: "\u2190"
         }));
+        createRenderEffect(() => className(_el$3, style$2.leftArrow));
         return _el$3;
       }
     }), _el$4);
@@ -1637,14 +2062,14 @@ const TabInternal = props => {
         return tabsArr();
       },
       children: (tab, index) => (() => {
-        var _el$7 = _tmpl$5();
+        var _el$7 = _tmpl$$2();
         _el$7.$$click = () => setSelectedTab(tab);
         insert(_el$7, createComponent(Show, {
           get when() {
             return tab === selectedTab();
           },
           get children() {
-            var _el$8 = _tmpl$4();
+            var _el$8 = _tmpl$3();
             insert(_el$8, tab);
             return _el$8;
           }
@@ -1655,6 +2080,7 @@ const TabInternal = props => {
           },
           children: tab
         }), null);
+        createRenderEffect(() => className(_el$7, style$2.hover));
         return _el$7;
       })()
     }));
@@ -1663,35 +2089,89 @@ const TabInternal = props => {
         return showRight();
       },
       get children() {
-        var _el$5 = _tmpl$2$1();
+        var _el$5 = _tmpl$$2();
         insert(_el$5, createComponent(Button, {
           onClick: scrollRight,
           children: "\u2192"
         }));
+        createRenderEffect(() => className(_el$5, style$2.rightArrow));
         return _el$5;
       }
     }), null);
     insert(_el$6, currentElement);
     createRenderEffect(_p$ => {
-      var _v$ = `${styleType} singleTabs ${hasTranparent() === true ? 'transparent' : ""}`,
-        _v$2 = `${styleType} tabBody ${hasTranparent() === true ? 'transparent' : ""}`;
-      _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
-      _v$2 !== _p$.t && className(_el$6, _p$.t = _v$2);
+      var _v$ = style$2.tabs,
+        _v$2 = `${style$2[styleType]} ${style$2.singleTabs} ${hasTranparent() === true ? style$2.transparent : ""}`,
+        _v$3 = style$2.tabHeader,
+        _v$4 = `${styleType} ${style$2.tabBody} ${hasTranparent() === true ? style$2.transparent : ""}`;
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
+      _v$3 !== _p$.a && className(_el$4, _p$.a = _v$3);
+      _v$4 !== _p$.o && className(_el$6, _p$.o = _v$4);
       return _p$;
     }, {
       e: undefined,
-      t: undefined
+      t: undefined,
+      a: undefined,
+      o: undefined
     });
     return _el$;
   })();
 };
+const Tab = props => {
+  const {
+    tabs,
+    setTabs
+  } = getTabContext();
+  createEffect(() => {
+    if (props.hidden) {
+      if (props.hidden()) {
+        setTabs(old => {
+          const newTabs = {
+            ...old
+          };
+          delete newTabs[props.name];
+          return newTabs;
+        });
+      } else {
+        if (!!props.name && !Object.keys(tabs()).includes(props.name)) {
+          setTabs(old => ({
+            ...old,
+            [props.name]: props.children
+          }));
+        }
+      }
+    }
+  });
+  onMount(() => {
+    if (props.name !== undefined) {
+      if (!props.hidden || props.hidden && !props.hidden()) {
+        setTabs(old => ({
+          ...old,
+          [props.name]: props.children
+        }));
+      }
+    }
+  });
+  return createComponent(Show, {
+    get when() {
+      return !props.hidden || props.hidden();
+    },
+    get children() {
+      return props.children;
+    }
+  });
+};
 delegateEvents(["click"]);
 
+var css_248z$1 = ".TextArea-module_areaStyle__AshKi {\n  padding: 0.5rem;\n  margin-right: calc(var(--spacing-1, 8px) / 2);\n  border: 1px solid #ccc;\n  border-radius: var(--border-radius-md, 6px);\n  width: 98%;\n  height: 100%;\n  resize: none;\n}\n@media screen and (max-width: 768px) {\n  .TextArea-module_areaStyle__AshKi {\n    width: 90%;\n  }\n}\n\n.TextArea-module_picButton__TV9ZE {\n  padding: calc(var(--spacing-1, 8px) / 2) var(--spacing-1, 8px) !important;\n  background-color: transparent;\n  border-top: 1px solid white;\n  border-bottom: 1px solid white;\n}\n\n.TextArea-module_transparent__pwXRO {\n  background-color: transparent;\n  border: none;\n  color: white;\n  padding: 0.5rem;\n  width: inherit;\n  height: 100%;\n  resize: none;\n}\n.TextArea-module_transparent__pwXRO:focus {\n  outline: none;\n  border: none;\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRleHRBcmVhLm1vZHVsZS5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsZUFBZTtFQUNmLDZDQUE2QztFQUM3QyxzQkFBc0I7RUFDdEIsMkNBQTJDO0VBQzNDLFVBQVU7RUFDVixZQUFZO0VBQ1osWUFBWTtBQUNkO0FBQ0E7RUFDRTtJQUNFLFVBQVU7RUFDWjtBQUNGOztBQUVBO0VBQ0UseUVBQXlFO0VBQ3pFLDZCQUE2QjtFQUM3QiwyQkFBMkI7RUFDM0IsOEJBQThCO0FBQ2hDOztBQUVBO0VBQ0UsNkJBQTZCO0VBQzdCLFlBQVk7RUFDWixZQUFZO0VBQ1osZUFBZTtFQUNmLGNBQWM7RUFDZCxZQUFZO0VBQ1osWUFBWTtBQUNkO0FBQ0E7RUFDRSxhQUFhO0VBQ2IsWUFBWTtBQUNkIiwiZmlsZSI6IlRleHRBcmVhLm1vZHVsZS5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLmFyZWFTdHlsZSB7XG4gIHBhZGRpbmc6IDAuNXJlbTtcbiAgbWFyZ2luLXJpZ2h0OiBjYWxjKHZhcigtLXNwYWNpbmctMSwgOHB4KSAvIDIpO1xuICBib3JkZXI6IDFweCBzb2xpZCAjY2NjO1xuICBib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzLW1kLCA2cHgpO1xuICB3aWR0aDogOTglO1xuICBoZWlnaHQ6IDEwMCU7XG4gIHJlc2l6ZTogbm9uZTtcbn1cbkBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDc2OHB4KSB7XG4gIC5hcmVhU3R5bGUge1xuICAgIHdpZHRoOiA5MCU7XG4gIH1cbn1cblxuLnBpY0J1dHRvbiB7XG4gIHBhZGRpbmc6IGNhbGModmFyKC0tc3BhY2luZy0xLCA4cHgpIC8gMikgdmFyKC0tc3BhY2luZy0xLCA4cHgpICFpbXBvcnRhbnQ7XG4gIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuICBib3JkZXItdG9wOiAxcHggc29saWQgd2hpdGU7XG4gIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCB3aGl0ZTtcbn1cblxuLnRyYW5zcGFyZW50IHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGJvcmRlcjogbm9uZTtcbiAgY29sb3I6IHdoaXRlO1xuICBwYWRkaW5nOiAwLjVyZW07XG4gIHdpZHRoOiBpbmhlcml0O1xuICBoZWlnaHQ6IDEwMCU7XG4gIHJlc2l6ZTogbm9uZTtcbn1cbi50cmFuc3BhcmVudDpmb2N1cyB7XG4gIG91dGxpbmU6IG5vbmU7XG4gIGJvcmRlcjogbm9uZTtcbn0iXX0= */";
+var style$1 = {"areaStyle":"TextArea-module_areaStyle__AshKi"};
+styleInject(css_248z$1);
+
 var _tmpl$$1 = /*#__PURE__*/template(`<textarea>`);
 const TextArea = props => {
   let myElement;
   const [customProps, normalProps] = splitProps(props, ["minSize", "text", "setText", "class", "tooltip", "transparent"]);
-  const [showPicModal, setShowPicModal] = createSignal(false);
   const context = useFormProvider();
   /**
      * Function to set the height of the textarea based on the content
@@ -1743,7 +2223,7 @@ const TextArea = props => {
         return createMemo(() => !!(!!context.getName && !context.getTextInside() && !context.getFocused()))() ? context.getName() : props.placeholder;
       },
       get ["class"]() {
-        return `.areaStyle ${customProps.class ?? ""} ${customProps.transparent ? '.transparent' : ""}`;
+        return `${style$1.areaStyle} ${customProps.class ?? ""} ${customProps.transparent ? customProps.transparent : ""}`;
       },
       get value() {
         return customProps.text();
@@ -1767,15 +2247,23 @@ const TextArea = props => {
   })();
 };
 
-var _tmpl$ = /*#__PURE__*/template(`<div class=".accent .body">`),
-  _tmpl$2 = /*#__PURE__*/template(`<div class=".totalPanel .styles"><div class=".accent .header"><span>`);
+var css_248z = ".expansion-module_header__eaZ-i {\n  width: 100%;\n  max-width: 100%;\n  border-bottom: 1px solid;\n  display: flex;\n  flex-direction: row;\n  border-radius: var(--border-radius-sm, 5px) var(--border-radius-sm, 5px) var(--border-radius-md, 10px) var(--border-radius-md, 10px);\n  box-shadow: inset 1px 1px 5px 1px;\n  height: -moz-min-content;\n  height: min-content;\n  text-wrap: wrap;\n}\n.expansion-module_header__eaZ-i :first-child {\n  flex-grow: 1;\n}\n.expansion-module_header__eaZ-i :last-child {\n  align-self: flex-end;\n  padding: 10px;\n}\n.expansion-module_header__eaZ-i button {\n  height: -moz-min-content;\n  height: min-content;\n  background: none;\n}\n.expansion-module_header__eaZ-i button svg {\n  height: 50%;\n}\n\n.expansion-module_body__OYZTn {\n  max-width: 100%;\n  padding: calc(var(--spacing-1, 8px) - 2px);\n  border-radius: var(--border-radius-sm, 5px) var(--border-radius-sm, 5px) var(--border-radius-md, 10px) var(--border-radius-md, 10px);\n}\n.expansion-module_body__OYZTn :nth-child(n) {\n  text-wrap: wrap !important;\n}\n\n.expansion-module_totalPanel__o0hyd {\n  max-width: 100%;\n  display: flex !important;\n  flex-direction: column !important;\n  border: 1px solid;\n  border-radius: var(--border-radius-sm, 5px) var(--border-radius-sm, 5px) var(--border-radius-md, 10px) var(--border-radius-md, 10px);\n}\n\n.expansion-module_hover__lzPNA:hover {\n  cursor: pointer;\n}\n\n.expansion-module_primary__oPhus {\n  background-color: var(--primary-color);\n  color: var(--on-primary-color);\n  border-color: var(--on-primary-color);\n}\n\n.expansion-module_accent__HYwcP {\n  background-color: var(--secondary-color);\n  color: var(--on-secondary-color);\n  border-color: var(--on-secondary-color);\n}\n\n.expansion-module_tertiary__hl403 {\n  background-color: var(--tertiary-color);\n  color: var(--on-tertiary-color);\n  border-color: var(--on-tertiary-color);\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImV4cGFuc2lvbi5tb2R1bGUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLFdBQVc7RUFDWCxlQUFlO0VBQ2Ysd0JBQXdCO0VBQ3hCLGFBQWE7RUFDYixtQkFBbUI7RUFDbkIsb0lBQW9JO0VBQ3BJLGlDQUFpQztFQUNqQyx3QkFBbUI7RUFBbkIsbUJBQW1CO0VBQ25CLGVBQWU7QUFDakI7QUFDQTtFQUNFLFlBQVk7QUFDZDtBQUNBO0VBQ0Usb0JBQW9CO0VBQ3BCLGFBQWE7QUFDZjtBQUNBO0VBQ0Usd0JBQW1CO0VBQW5CLG1CQUFtQjtFQUNuQixnQkFBZ0I7QUFDbEI7QUFDQTtFQUNFLFdBQVc7QUFDYjs7QUFFQTtFQUNFLGVBQWU7RUFDZiwwQ0FBMEM7RUFDMUMsb0lBQW9JO0FBQ3RJO0FBQ0E7RUFDRSwwQkFBMEI7QUFDNUI7O0FBRUE7RUFDRSxlQUFlO0VBQ2Ysd0JBQXdCO0VBQ3hCLGlDQUFpQztFQUNqQyxpQkFBaUI7RUFDakIsb0lBQW9JO0FBQ3RJOztBQUVBO0VBQ0UsZUFBZTtBQUNqQjs7QUFFQTtFQUNFLHNDQUFzQztFQUN0Qyw4QkFBOEI7RUFDOUIscUNBQXFDO0FBQ3ZDOztBQUVBO0VBQ0Usd0NBQXdDO0VBQ3hDLGdDQUFnQztFQUNoQyx1Q0FBdUM7QUFDekM7O0FBRUE7RUFDRSx1Q0FBdUM7RUFDdkMsK0JBQStCO0VBQy9CLHNDQUFzQztBQUN4QyIsImZpbGUiOiJleHBhbnNpb24ubW9kdWxlLnNjc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuaGVhZGVyIHtcbiAgd2lkdGg6IDEwMCU7XG4gIG1heC13aWR0aDogMTAwJTtcbiAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkO1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogcm93O1xuICBib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzLXNtLCA1cHgpIHZhcigtLWJvcmRlci1yYWRpdXMtc20sIDVweCkgdmFyKC0tYm9yZGVyLXJhZGl1cy1tZCwgMTBweCkgdmFyKC0tYm9yZGVyLXJhZGl1cy1tZCwgMTBweCk7XG4gIGJveC1zaGFkb3c6IGluc2V0IDFweCAxcHggNXB4IDFweDtcbiAgaGVpZ2h0OiBtaW4tY29udGVudDtcbiAgdGV4dC13cmFwOiB3cmFwO1xufVxuLmhlYWRlciA6Zmlyc3QtY2hpbGQge1xuICBmbGV4LWdyb3c6IDE7XG59XG4uaGVhZGVyIDpsYXN0LWNoaWxkIHtcbiAgYWxpZ24tc2VsZjogZmxleC1lbmQ7XG4gIHBhZGRpbmc6IDEwcHg7XG59XG4uaGVhZGVyIGJ1dHRvbiB7XG4gIGhlaWdodDogbWluLWNvbnRlbnQ7XG4gIGJhY2tncm91bmQ6IG5vbmU7XG59XG4uaGVhZGVyIGJ1dHRvbiBzdmcge1xuICBoZWlnaHQ6IDUwJTtcbn1cblxuLmJvZHkge1xuICBtYXgtd2lkdGg6IDEwMCU7XG4gIHBhZGRpbmc6IGNhbGModmFyKC0tc3BhY2luZy0xLCA4cHgpIC0gMnB4KTtcbiAgYm9yZGVyLXJhZGl1czogdmFyKC0tYm9yZGVyLXJhZGl1cy1zbSwgNXB4KSB2YXIoLS1ib3JkZXItcmFkaXVzLXNtLCA1cHgpIHZhcigtLWJvcmRlci1yYWRpdXMtbWQsIDEwcHgpIHZhcigtLWJvcmRlci1yYWRpdXMtbWQsIDEwcHgpO1xufVxuLmJvZHkgOm50aC1jaGlsZChuKSB7XG4gIHRleHQtd3JhcDogd3JhcCAhaW1wb3J0YW50O1xufVxuXG4udG90YWxQYW5lbCB7XG4gIG1heC13aWR0aDogMTAwJTtcbiAgZGlzcGxheTogZmxleCAhaW1wb3J0YW50O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uICFpbXBvcnRhbnQ7XG4gIGJvcmRlcjogMXB4IHNvbGlkO1xuICBib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzLXNtLCA1cHgpIHZhcigtLWJvcmRlci1yYWRpdXMtc20sIDVweCkgdmFyKC0tYm9yZGVyLXJhZGl1cy1tZCwgMTBweCkgdmFyKC0tYm9yZGVyLXJhZGl1cy1tZCwgMTBweCk7XG59XG5cbi5ob3Zlcjpob3ZlciB7XG4gIGN1cnNvcjogcG9pbnRlcjtcbn1cblxuLnByaW1hcnkge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1wcmltYXJ5LWNvbG9yKTtcbiAgY29sb3I6IHZhcigtLW9uLXByaW1hcnktY29sb3IpO1xuICBib3JkZXItY29sb3I6IHZhcigtLW9uLXByaW1hcnktY29sb3IpO1xufVxuXG4uYWNjZW50IHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc2Vjb25kYXJ5LWNvbG9yKTtcbiAgY29sb3I6IHZhcigtLW9uLXNlY29uZGFyeS1jb2xvcik7XG4gIGJvcmRlci1jb2xvcjogdmFyKC0tb24tc2Vjb25kYXJ5LWNvbG9yKTtcbn1cblxuLnRlcnRpYXJ5IHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tdGVydGlhcnktY29sb3IpO1xuICBjb2xvcjogdmFyKC0tb24tdGVydGlhcnktY29sb3IpO1xuICBib3JkZXItY29sb3I6IHZhcigtLW9uLXRlcnRpYXJ5LWNvbG9yKTtcbn0iXX0= */";
+var style = {"header":"expansion-module_header__eaZ-i","body":"expansion-module_body__OYZTn","totalPanel":"expansion-module_totalPanel__o0hyd","hover":"expansion-module_hover__lzPNA","primary":"expansion-module_primary__oPhus","accent":"expansion-module_accent__HYwcP","tertiary":"expansion-module_tertiary__hl403"};
+styleInject(css_248z);
+
+var _tmpl$ = /*#__PURE__*/template(`<div>`),
+  _tmpl$2 = /*#__PURE__*/template(`<div><div><span>`);
 const ExpansionPanel = props => {
   const [open, setOpen] = createSignal(!!props.startOpen);
   return (() => {
     var _el$ = _tmpl$2(),
       _el$2 = _el$.firstChild,
       _el$3 = _el$2.firstChild;
-    spread(_el$, props, false, true);
+    spread(_el$, mergeProps(props, {
+      get ["class"]() {
+        return `${style.totalPanel} .styles`;
+      }
+    }), false, true);
     _el$3.style.setProperty("width", "min-content");
     _el$3.style.setProperty("height", "min-content");
     insert(_el$3, () => props.children[0]);
@@ -1790,7 +2278,9 @@ const ExpansionPanel = props => {
         setOpen(old => !old);
         props.extraLogic ? props.extraLogic() : null;
       },
-      "class": `.hover`,
+      get ["class"]() {
+        return `${style.hover}`;
+      },
       get children() {
         return [createComponent(Show, {
           get when() {
@@ -1838,11 +2328,13 @@ const ExpansionPanel = props => {
       get children() {
         var _el$4 = _tmpl$();
         insert(_el$4, () => props.children[1]);
+        createRenderEffect(() => className(_el$4, `${style[props.styleType ?? 'accent']} ${style.body}`));
         return _el$4;
       }
     }), null);
+    createRenderEffect(() => className(_el$2, `${style[props.styleType ?? 'accent']} ${style.header}`));
     return _el$;
   })();
 };
 
-export { Body, Button, Chip, Chipbar, ExpansionPanel, FormField, Input, Option, Select, SelectContext, SnackbarController, Tab, Table, Tabs, TextArea, addSnackbar, getTabContext };
+export { Body, Button, Carousel, Chip, Chipbar, ExpansionPanel, FormField, Input, Modal, Option, Select, SelectContext, Slide, SnackbarController, Tab, Table, Tabs, TextArea, addSnackbar, addTheme, carouselTitleContext, getTabContext };