amotify 0.1.31 → 0.1.32

package/dist/fn/Input/_.js

@@ -1 +1,48 @@
-import"../../chunk-VY3566IV.js";import o from"./Plain";import i from"./Hidden";import a from"./Text";import p from"./TextArea";import m from"./AutoHeightText";import n from"./Contenteditable";import l from"./DigitCharacters";import c from"./Time/_";import s from"./Select";import d from"./RichSelect";import*as r from"./List";import x from"./Chips/_";import h from"./Search";import _ from"./Filer";import y from"./Slider";import C from"./Switch";import T from"./Checker";import u from"./Segmented";import f from"./Parts";var t;(e=>(e.Plain=o,e.Hidden=i,e.Text=a,e.TextArea=p,e.AutoHeightText=m,e.Contenteditable=n,e.DigitCharacters=l,e.Time=c,e.Select=s,e.RichSelect=d,e.List=r.List,e.Radio=r.Radio,e.Checkbox=r.Checkbox,e.Checker=T,e.Chips=x,e.Search=h,e.Filer=_,e.Slider=y,e.Switch=C,e.Segmented=u,e.Comps=f))(t||(t={}));export{t as Input,t as default};
+import "../../chunk-JJ3PEWPN.js";
+import _Plain from "./Plain";
+import _Hidden from "./Hidden";
+import _Text from "./Text";
+import _TextArea from "./TextArea";
+import _AutoHeightText from "./AutoHeightText";
+import _Contenteditable from "./Contenteditable";
+import _DigitCharacters from "./DigitCharacters";
+import _Time from "./Time/_";
+import _Select from "./Select";
+import _RichSelect from "./RichSelect";
+import * as _List from "./List";
+import _Chips from "./Chips/_";
+import _Search from "./Search";
+import _Filer from "./Filer";
+import _Slider from "./Slider";
+import _Switch from "./Switch";
+import _Checker from "./Checker";
+import _Segmented from "./Segmented";
+import _Parts from "./Parts";
+var Input;
+((Input2) => {
+  Input2.Plain = _Plain;
+  Input2.Hidden = _Hidden;
+  Input2.Text = _Text;
+  Input2.TextArea = _TextArea;
+  Input2.AutoHeightText = _AutoHeightText;
+  Input2.Contenteditable = _Contenteditable;
+  Input2.DigitCharacters = _DigitCharacters;
+  Input2.Time = _Time;
+  Input2.Select = _Select;
+  Input2.RichSelect = _RichSelect;
+  Input2.List = _List.List;
+  Input2.Radio = _List.Radio;
+  Input2.Checkbox = _List.Checkbox;
+  Input2.Checker = _Checker;
+  Input2.Chips = _Chips;
+  Input2.Search = _Search;
+  Input2.Filer = _Filer;
+  Input2.Slider = _Slider;
+  Input2.Switch = _Switch;
+  Input2.Segmented = _Segmented;
+  Input2.Comps = _Parts;
+})(Input || (Input = {}));
+export {
+  Input,
+  Input as default
+};

package/dist/fn/Input/core.js

@@ -1 +1,626 @@
-import{b as o,c as a,e as B}from"../../chunk-VY3566IV.js";import{jsx as m,jsxs as C}from"react/jsx-runtime";import{useState as N,useEffect as T,useRef as O}from"react";import{$$ as i,$$fromRoot as W,Config as z,useStore as v,GenerateClassName as P}from"../../@utils/_";import{InputClasses as k}from"../../@styles/componentClasses/_";import x from"../../atoms/Box";import E from"../../atoms/Flex";import V from"../../atoms/FAI";import L from"../../mols/Row";import A from"../../mols/Column";import U from"../Button";import D from"../Tooltips";const se=e=>{let[t]=N(e.componentID||i.uuid.gen());e=o({},e),e.params=a(o({enableFormSubmit:!0,status_id:i.uuid.gen(),override:"never",name:i.uuid.gen(),id:i.uuid.gen(),"aria-label":"Input-"+t},e.params),{componentID:t});let{children:n}=e;return m(n,o({},e.params))},ue=e=>{let{children:t,val_status:n,set_status:r,val_validate:c,params:l}=e,{clearButton:s,rightIcon:u,leftIcon:p,wrapStyles:y}=l;return n.eventType=="init"&&!l.checkValidationAtFirst&&(c.notice=[]),C(x,a(o({position:"relative"},y),{id:"BoxWrapper-"+n.componentID,children:[C(E,{flexWrap:!1,flexSizing:0,className:k("Wrapper"),children:[l.leftIndicator,C(E,{position:"relative",flexSizing:"auto",children:[p,t,s&&n.dataValue?m(U.Button.Normal.R,{ssSphere:2,flexCenter:!0,fontColor:"5.translucent",ssEffectsOnActive:["ripple.theme"],position:"absolute",right:1,top:"50%",freeCSS:{zIndex:3},className:k("IndicatorIcon"),onClick:()=>{r(a(o({},n),{dataValue:"",formatValue:"",eventType:"update",eventID:i.uuid.gen()}))},children:m(V.Times,{})}):u]}),l.rightIndicator]}),m($,{notice:c.notice,val_status:n})]}))},$=e=>{let{notice:t,val_status:n}=e,{componentID:r,eventType:c}=n;i.interval.clear("NoticeTimer-"+r),i.interval.clear("NoticeTimerClose-"+r);let l="notice-"+e.val_status.componentID,s="notice-tips-"+e.val_status.componentID;if(!t.length)return D.close(s),null;let u=t.map(p=>{let{type:y,label:I}=p,S=y=="invalid"?V.Times:y=="warn"?V.Exclamation:V.Check;return C(L.Left,{gap:0,borderRadius:"2.tone.secondary",children:[m(S,{flexCenter:!0,fontSize:"3.paragraph",fontColor:{invalid:"nega",warn:"warn",valid:"posi"}[y]}),m(x,{fontColor:"white",children:I})]})});return i.interval.standBy("NoticeTimer-"+r,350,()=>{D.open({tipsID:s,parent:"#"+l,padding:["1/2",0],content:C(D.Comps.Body,{padding:["1/2","2/3"],fontSize:"1.mini",position:"relative",children:[m(x,{position:"absolute",unitHeight:1,unitWidth:1,left:1,backgroundColor:"dark",freeCSS:{zIndex:1,transform:"rotate(45deg)",top:-6}}),m(A,{gap:"1/3",position:"relative",freeCSS:{zIndex:2},backgroundColor:"inherit",children:u})]})}),i.interval.standBy("NoticeTimerClose-"+r,7500,()=>{D.close(s)})}),m(x,{className:k("Notices"),id:l})},de=e=>{let{type:t,params:n,val_status:r,set_status:c,ExtraOverrideParams:l,ExtraStoreParams:s,val_validate:u,set_validate:p,DefaultValidation:y,onUpdateValue:I,onUpdateValidValue:S}=e;n=o({},n);let{componentID:R}=r,[F,w]=N(i.uuid.gen());T(()=>(v.update({key:R,value:o({ResolveRefresh:null,Refresh:()=>new Promise((d,f)=>{v.get(R).ResolveRefresh=d,w(i.uuid.gen())}),GenNotice:d=>{let{ok:f,notice:g}=d;p({ok:f,notice:g})}},s)}),()=>{v.delete(R)}),[]);const _=O(!1);T(()=>{_.current?c(a(o({},r),{eventType:"refresh",eventID:i.uuid.gen()})):_.current=!0},[F]),T(()=>{n.value=r.dataValue,i.interval.clear("ValidationTimer-"+R),j({val_status:r,set_validate:p,DefaultValidation:y,params:n})},[r.eventID]),(()=>{let{override:d}=n;if(d=="never"||d=="beforeModified"&&!["init","override"].includes(r.eventType))return;let f=v.get(r.componentID);f&&(n.value!=r.dataValue&&n.status_id!=f.status_id&&c(a(o(a(o({},r),{dataValue:n.value}),l),{eventType:"override",eventID:i.uuid.gen()})),f.status_id=n.status_id)})(),T(()=>{let{componentID:d,eventType:f,dataValue:g}=r,h=g;if(t=="list"?h=g.map(b=>JSON.parse(b)):t=="select"||t=="richSelect"?h=JSON.parse(g):t=="file"&&v.update({key:d,value:{Files:r.dataValue}}),f=="refresh"){let b=v.get(d);b&&b.ResolveRefresh&&b.ResolveRefresh(null)}f=="update"&&(I&&I({componentID:d,value:h,storeData:v.get(d),eventType:f}),i.scope(()=>{u.ok&&S&&S({componentID:d,value:h,storeData:v.get(d),eventType:f})}))},[u])},j=e=>{let{val_status:t,params:n,set_validate:r,DefaultValidation:c}=e,l=c({value:t.dataValue,params:n});if(!l.ok){r(l);return}let s=l.notice;const u=()=>B(void 0,null,function*(){if(!n.onValidate)return;let p=yield n.onValidate({value:t.dataValue,eventType:t.eventType,props:e});if(!p.ok){r({ok:!1,notice:[...s,...p.notice]});return}r({ok:!0,notice:[...s,...p.notice]})});n.onValidate?t.eventType=="refresh"?u():i.interval.standBy("ValidationTimer-"+t.componentID,450,u):r({ok:!0,notice:s})},ce=e=>{let t=e.target,{form:n,formName:r}=t.dataset;n=r||n;let c=!1,l=W(`[data-form-submit-button="${n}"]`)[0];if(!l)return c;let s=l.dataset.sdfike||"",u=e.key,p=e.ctrlKey||e.metaKey;return i.scope(()=>{s.includes("enter")&&(u!="Enter"||e.nativeEvent.isComposing||z.get().browserIs=="safari"&&e.keyCode==229)||((u=="Enter"&&(s.includes("enter")||s.includes("auxEnter")&&p)||u==" "&&s.includes("space"))&&(l.click(),e.preventDefault()),c=!0)}),c},K={Input:e=>{if(e=="plain")return{};let t={padding:"3/4",transition:"middle",flexSizing:"auto",boxShadow:"0.thin"};return e=="border"?t=a(o({},t),{border:!0,borderRadius:"2.tone.secondary",backgroundColor:"1.layer.base"}):e=="cloud"?t=a(o({},t),{border:"1.thin",borderRadius:"2.tone.secondary",backgroundColor:"cloud"}):e=="bottomBorder"&&(t=a(o({},t),{borderRadius:0,border:"unset",borderBottom:!0,backgroundColor:"cloud"})),t},ListCell:e=>{e=o({},e),e.tone||(e.tone="border");let{tone:t}=e;return t=="plain"||(e=a(o({},e),{cellStyles:o({position:"relative",padding:["3/4",1],borderRadius:"2.tone.secondary",transition:"middle"},e.cellStyles)}),t=="normal"?e=a(o({gap:"1/2"},e),{cellStyles:o({isSemiBoldFont:!0},e.cellStyles),cellCheckedStyles:{backgroundColor:"cloud"}}):(e=a(o({gap:"3/4"},e),{cellStyles:o({boxShadow:"0.thin"},e.cellStyles)}),(t=="cloud"||t=="vivid")&&(e.cellStyles=o({border:"1.thin",backgroundColor:"2.layer.cloud"},e.cellStyles)),t=="border"?(e.cellStyles=o({border:!0,backgroundColor:"1.layer.base"},e.cellStyles),e.cellCheckedStyles=o({borderColor:"theme",fontColor:"theme"},e.cellCheckedStyles)):t=="cloud"?e.cellCheckedStyles=o({backgroundColor:"tcOpFew",fontColor:"theme",borderColor:"theme"},e.cellCheckedStyles):t=="vivid"&&(e.cellCheckedStyles=o({backgroundColor:"theme",fontColor:"white",borderColor:"theme"},e.cellCheckedStyles)))),P(e)},Boxish:e=>{e=o({},e),e.tone||(e.tone="border");let t=a(o(o(o(a(o({},K.Input(e.tone)),{fontColor:"2.normal"}),e),e.leftIndicator?{borderTopLeftRadius:"2/3",borderBottomLeftRadius:"2/3",marginLeft:"1/4"}:null),e.rightIndicator?{borderTopRightRadius:"2/3",borderBottomRightRadius:"2/3",marginRight:"1/4"}:null),{className:[k("Input"),e.className].join(" ")});return P(t)},Indicator:e=>{if(e||(e="border"),e=="plain")return{};let t={flexSizing:"none",flexCenter:!0,padding:[0,1],borderRadius:"2.tone.secondary",backgroundColor:"cloud"};return e=="border"?t=a(o({},t),{border:!0}):e=="cloud"?t=a(o({},t),{border:"1.thin"}):e=="bottomBorder"&&(t=a(o({},t),{borderRadius:0,borderBottom:!0})),t},IndicatorIcon:{position:"absolute",unitWidth:2,unitHeight:2,top:"50%",flexCenter:!0,fontColor:"theme",fontSize:"1.mini",backgroundColor:"inherit"}};export{ue as BoxWrapper,de as CommonEffects,K as DefaultStyles,ce as SubmitForm,j as ValidationCheck,se as Wrapper};
+import {
+  __async,
+  __spreadProps,
+  __spreadValues
+} from "../../chunk-JJ3PEWPN.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  useState,
+  useEffect,
+  useRef
+} from "react";
+import {
+  $$,
+  $$fromRoot,
+  Config,
+  useStore,
+  GenerateClassName
+} from "../../@utils/_";
+import { InputClasses } from "../../@styles/componentClasses/_";
+import Box from "../../atoms/Box";
+import Flex from "../../atoms/Flex";
+import FAI from "../../atoms/FAI";
+import Row from "../../mols/Row";
+import Column from "../../mols/Column";
+import Button from "../Button";
+import Tooltips from "../Tooltips";
+const Wrapper = (props) => {
+  let [val_componentID] = useState(props.componentID || $$.uuid.gen());
+  props = __spreadValues({}, props);
+  props.params = __spreadProps(__spreadValues({
+    enableFormSubmit: true,
+    // override: 'beforeModified',
+    status_id: $$.uuid.gen(),
+    override: "never",
+    name: $$.uuid.gen(),
+    id: $$.uuid.gen(),
+    "aria-label": "Input-" + val_componentID
+  }, props.params), {
+    componentID: val_componentID
+  });
+  let {
+    children: Children
+  } = props;
+  return /* @__PURE__ */ jsx(Children, __spreadValues({}, props.params));
+};
+const BoxWrapper = (props) => {
+  let {
+    children,
+    val_status,
+    set_status,
+    val_validate,
+    params
+  } = props;
+  let {
+    clearButton,
+    rightIcon,
+    leftIcon,
+    wrapStyles
+  } = params;
+  if (val_status.eventType == "init" && !params.checkValidationAtFirst)
+    val_validate.notice = [];
+  return /* @__PURE__ */ jsxs(
+    Box,
+    __spreadProps(__spreadValues({
+      position: "relative"
+    }, wrapStyles), {
+      id: "BoxWrapper-" + val_status.componentID,
+      children: [
+        /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            flexWrap: false,
+            flexSizing: 0,
+            className: InputClasses("Wrapper"),
+            children: [
+              params.leftIndicator,
+              /* @__PURE__ */ jsxs(
+                Flex,
+                {
+                  position: "relative",
+                  flexSizing: "auto",
+                  children: [
+                    leftIcon,
+                    children,
+                    clearButton && !!val_status.dataValue ? /* @__PURE__ */ jsx(
+                      Button.Button.Normal.R,
+                      {
+                        ssSphere: 2,
+                        flexCenter: true,
+                        fontColor: "5.translucent",
+                        ssEffectsOnActive: ["ripple.theme"],
+                        position: "absolute",
+                        right: 1,
+                        top: "50%",
+                        freeCSS: {
+                          zIndex: 3
+                        },
+                        className: InputClasses("IndicatorIcon"),
+                        onClick: () => {
+                          set_status(__spreadProps(__spreadValues({}, val_status), {
+                            dataValue: "",
+                            formatValue: "",
+                            eventType: "update",
+                            eventID: $$.uuid.gen()
+                          }));
+                        },
+                        children: /* @__PURE__ */ jsx(FAI.Times, {})
+                      }
+                    ) : rightIcon
+                  ]
+                }
+              ),
+              params.rightIndicator
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          GenNotices,
+          {
+            notice: val_validate.notice,
+            val_status
+          }
+        )
+      ]
+    })
+  );
+};
+const GenNotices = (params) => {
+  let { notice, val_status } = params;
+  let {
+    componentID,
+    eventType
+  } = val_status;
+  $$.interval.clear("NoticeTimer-" + componentID);
+  $$.interval.clear("NoticeTimerClose-" + componentID);
+  let parentID = "notice-" + params.val_status.componentID;
+  let tipsID = "notice-tips-" + params.val_status.componentID;
+  if (!notice.length) {
+    Tooltips.close(tipsID);
+    return null;
+  }
+  let Notices = notice.map((cell) => {
+    let { type, label } = cell;
+    let ICON = type == "invalid" ? FAI.Times : type == "warn" ? FAI.Exclamation : FAI.Check;
+    return /* @__PURE__ */ jsxs(
+      Row.Left,
+      {
+        gap: 0,
+        borderRadius: "2.tone.secondary",
+        children: [
+          /* @__PURE__ */ jsx(
+            ICON,
+            {
+              flexCenter: true,
+              fontSize: "3.paragraph",
+              fontColor: {
+                "invalid": "nega",
+                "warn": "warn",
+                "valid": "posi"
+              }[type]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              fontColor: "white",
+              children: label
+            }
+          )
+        ]
+      }
+    );
+  });
+  $$.interval.standBy(
+    "NoticeTimer-" + componentID,
+    350,
+    () => {
+      Tooltips.open({
+        tipsID,
+        parent: "#" + parentID,
+        padding: ["1/2", 0],
+        content: /* @__PURE__ */ jsxs(
+          Tooltips.Comps.Body,
+          {
+            padding: ["1/2", "2/3"],
+            fontSize: "1.mini",
+            position: "relative",
+            children: [
+              /* @__PURE__ */ jsx(
+                Box,
+                {
+                  position: "absolute",
+                  unitHeight: 1,
+                  unitWidth: 1,
+                  left: 1,
+                  backgroundColor: "dark",
+                  freeCSS: {
+                    zIndex: 1,
+                    transform: "rotate(45deg)",
+                    top: -6
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Column,
+                {
+                  gap: "1/3",
+                  position: "relative",
+                  freeCSS: {
+                    zIndex: 2
+                  },
+                  backgroundColor: "inherit",
+                  children: Notices
+                }
+              )
+            ]
+          }
+        )
+      });
+      $$.interval.standBy(
+        "NoticeTimerClose-" + componentID,
+        7500,
+        () => {
+          Tooltips.close(tipsID);
+        }
+      );
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className: InputClasses("Notices"),
+      id: parentID
+    }
+  );
+};
+const CommonEffects = (props) => {
+  let {
+    type,
+    params,
+    val_status,
+    set_status,
+    ExtraOverrideParams,
+    ExtraStoreParams,
+    val_validate,
+    set_validate,
+    DefaultValidation,
+    onUpdateValue,
+    onUpdateValidValue
+  } = props;
+  params = __spreadValues({}, params);
+  let {
+    componentID
+  } = val_status;
+  let [val_refresh, set_refresh] = useState($$.uuid.gen());
+  useEffect(() => {
+    useStore.update({
+      key: componentID,
+      value: __spreadValues({
+        ResolveRefresh: null,
+        Refresh: () => {
+          return new Promise((res, rej) => {
+            useStore.get(componentID).ResolveRefresh = res;
+            set_refresh($$.uuid.gen());
+          });
+        },
+        GenNotice: (props2) => {
+          let { ok, notice } = props2;
+          set_validate({ ok, notice });
+        }
+      }, ExtraStoreParams)
+    });
+    return () => {
+      useStore.delete(componentID);
+    };
+  }, []);
+  const mounted = useRef(false);
+  useEffect(() => {
+    if (mounted.current) {
+      set_status(__spreadProps(__spreadValues({}, val_status), {
+        eventType: "refresh",
+        eventID: $$.uuid.gen()
+      }));
+    } else {
+      mounted.current = true;
+    }
+  }, [val_refresh]);
+  useEffect(() => {
+    params.value = val_status.dataValue;
+    $$.interval.clear("ValidationTimer-" + componentID);
+    ValidationCheck({
+      val_status,
+      set_validate,
+      DefaultValidation,
+      params
+    });
+  }, [val_status.eventID]);
+  (() => {
+    let {
+      override
+    } = params;
+    if (override == "never")
+      return;
+    if (override == "beforeModified") {
+      if (!["init", "override"].includes(val_status.eventType))
+        return;
+    }
+    let component = useStore.get(val_status.componentID);
+    if (!component)
+      return;
+    if (params.value != val_status.dataValue && params.status_id != component.status_id) {
+      set_status(__spreadProps(__spreadValues(__spreadProps(__spreadValues({}, val_status), {
+        dataValue: params.value
+      }), ExtraOverrideParams), {
+        eventType: "override",
+        eventID: $$.uuid.gen()
+      }));
+    }
+    component.status_id = params.status_id;
+  })();
+  useEffect(() => {
+    let {
+      componentID: componentID2,
+      eventType,
+      dataValue
+    } = val_status;
+    let Value = dataValue;
+    if (type == "list") {
+      Value = dataValue.map((value) => JSON.parse(value));
+    } else if (type == "select") {
+      Value = JSON.parse(dataValue);
+    } else if (type == "richSelect") {
+      Value = JSON.parse(dataValue);
+    } else if (type == "file") {
+      useStore.update({
+        key: componentID2,
+        value: {
+          Files: val_status.dataValue
+        }
+      });
+    }
+    if (eventType == "refresh") {
+      let comp = useStore.get(componentID2);
+      if (comp && comp.ResolveRefresh)
+        comp.ResolveRefresh(null);
+    }
+    if (eventType == "update") {
+      if (onUpdateValue)
+        onUpdateValue({
+          componentID: componentID2,
+          value: Value,
+          storeData: useStore.get(componentID2),
+          eventType
+        });
+      $$.scope(() => {
+        if (!val_validate.ok)
+          return;
+        if (!onUpdateValidValue)
+          return;
+        onUpdateValidValue({
+          componentID: componentID2,
+          value: Value,
+          storeData: useStore.get(componentID2),
+          eventType
+        });
+      });
+    }
+  }, [val_validate]);
+};
+const ValidationCheck = (props) => {
+  let {
+    val_status,
+    params,
+    set_validate,
+    DefaultValidation
+  } = props;
+  let result = DefaultValidation({
+    value: val_status.dataValue,
+    params
+  });
+  if (!result.ok) {
+    set_validate(result);
+    return;
+  }
+  let sysDefaultNotice = result.notice;
+  const FN = () => __async(void 0, null, function* () {
+    if (!params.onValidate)
+      return;
+    let result2 = yield params.onValidate({
+      value: val_status.dataValue,
+      eventType: val_status.eventType,
+      props
+    });
+    if (!result2.ok) {
+      set_validate({
+        ok: false,
+        notice: [
+          ...sysDefaultNotice,
+          ...result2.notice
+        ]
+      });
+      return;
+    }
+    set_validate({
+      ok: true,
+      notice: [
+        ...sysDefaultNotice,
+        ...result2.notice
+      ]
+    });
+  });
+  if (params.onValidate) {
+    if (val_status.eventType == "refresh") {
+      FN();
+    } else {
+      $$.interval.standBy(
+        "ValidationTimer-" + val_status.componentID,
+        450,
+        FN
+      );
+    }
+  } else {
+    set_validate({
+      ok: true,
+      notice: sysDefaultNotice
+    });
+  }
+};
+const SubmitForm = (event) => {
+  let input = event.target;
+  let { form, formName } = input.dataset;
+  form = formName || form;
+  let complete = false;
+  let Button2 = $$fromRoot(`[data-form-submit-button="${form}"]`)[0];
+  if (!Button2)
+    return complete;
+  let gestures = Button2.dataset.sdfike || "";
+  let key = event.key;
+  let auxKey = event.ctrlKey || event.metaKey;
+  $$.scope(() => {
+    if (gestures.includes("enter")) {
+      if (key != "Enter")
+        return;
+      let isComposing = event.nativeEvent.isComposing;
+      if (isComposing)
+        return;
+      if (Config.get().browserIs == "safari") {
+        if (event.keyCode == 229)
+          return;
+      }
+    }
+    if (key == "Enter" && (gestures.includes("enter") || gestures.includes("auxEnter") && auxKey) || key == " " && gestures.includes("space")) {
+      Button2.click();
+      event.preventDefault();
+    }
+    complete = true;
+  });
+  return complete;
+};
+const DefaultStyles = {
+  Input: (type) => {
+    if (type == "plain")
+      return {};
+    let Styles = {
+      padding: "3/4",
+      transition: "middle",
+      flexSizing: "auto",
+      boxShadow: "0.thin"
+    };
+    if (type == "border") {
+      Styles = __spreadProps(__spreadValues({}, Styles), {
+        border: true,
+        borderRadius: "2.tone.secondary",
+        backgroundColor: "1.layer.base"
+      });
+    } else if (type == "cloud") {
+      Styles = __spreadProps(__spreadValues({}, Styles), {
+        border: "1.thin",
+        borderRadius: "2.tone.secondary",
+        backgroundColor: "cloud"
+      });
+    } else if (type == "bottomBorder") {
+      Styles = __spreadProps(__spreadValues({}, Styles), {
+        borderRadius: 0,
+        border: "unset",
+        borderBottom: true,
+        backgroundColor: "cloud"
+      });
+    }
+    return Styles;
+  },
+  ListCell: (params) => {
+    params = __spreadValues({}, params);
+    if (!params.tone)
+      params.tone = "border";
+    let { tone } = params;
+    if (tone == "plain") {
+    } else {
+      params = __spreadProps(__spreadValues({}, params), {
+        cellStyles: __spreadValues({
+          position: "relative",
+          padding: ["3/4", 1],
+          borderRadius: "2.tone.secondary",
+          transition: "middle"
+        }, params.cellStyles)
+      });
+      if (tone == "normal") {
+        params = __spreadProps(__spreadValues({
+          gap: "1/2"
+        }, params), {
+          cellStyles: __spreadValues({
+            isSemiBoldFont: true
+          }, params.cellStyles),
+          cellCheckedStyles: {
+            backgroundColor: "cloud"
+          }
+        });
+      } else {
+        params = __spreadProps(__spreadValues({
+          gap: "3/4"
+        }, params), {
+          cellStyles: __spreadValues({
+            boxShadow: "0.thin"
+          }, params.cellStyles)
+        });
+        if (tone == "cloud" || tone == "vivid") {
+          params.cellStyles = __spreadValues({
+            border: "1.thin",
+            backgroundColor: "2.layer.cloud"
+          }, params.cellStyles);
+        }
+        if (tone == "border") {
+          params.cellStyles = __spreadValues({
+            border: true,
+            backgroundColor: "1.layer.base"
+          }, params.cellStyles);
+          params.cellCheckedStyles = __spreadValues({
+            borderColor: "theme",
+            fontColor: "theme"
+          }, params.cellCheckedStyles);
+        } else if (tone == "cloud") {
+          params.cellCheckedStyles = __spreadValues({
+            backgroundColor: "tcOpFew",
+            fontColor: "theme",
+            borderColor: "theme"
+          }, params.cellCheckedStyles);
+        } else if (tone == "vivid") {
+          params.cellCheckedStyles = __spreadValues({
+            backgroundColor: "theme",
+            fontColor: "white",
+            borderColor: "theme"
+          }, params.cellCheckedStyles);
+        }
+      }
+    }
+    return GenerateClassName(params);
+  },
+  Boxish: (params) => {
+    params = __spreadValues({}, params);
+    if (!params.tone)
+      params.tone = "border";
+    let Styles = __spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadProps(__spreadValues({}, DefaultStyles.Input(params.tone)), {
+      fontColor: "2.normal"
+    }), params), !!params.leftIndicator && {
+      borderTopLeftRadius: "2/3",
+      borderBottomLeftRadius: "2/3",
+      marginLeft: "1/4"
+    }), !!params.rightIndicator && {
+      borderTopRightRadius: "2/3",
+      borderBottomRightRadius: "2/3",
+      marginRight: "1/4"
+    }), {
+      className: [
+        InputClasses("Input"),
+        params.className
+      ].join(" ")
+    });
+    return GenerateClassName(Styles);
+  },
+  Indicator: (type) => {
+    if (!type)
+      type = "border";
+    if (type == "plain")
+      return {};
+    let styles = {
+      flexSizing: "none",
+      flexCenter: true,
+      padding: [0, 1],
+      borderRadius: "2.tone.secondary",
+      backgroundColor: "cloud"
+    };
+    if (type == "border") {
+      styles = __spreadProps(__spreadValues({}, styles), {
+        border: true
+      });
+    } else if (type == "cloud") {
+      styles = __spreadProps(__spreadValues({}, styles), {
+        border: "1.thin"
+      });
+    } else if (type == "bottomBorder") {
+      styles = __spreadProps(__spreadValues({}, styles), {
+        borderRadius: 0,
+        borderBottom: true
+      });
+    }
+    return styles;
+  },
+  IndicatorIcon: {
+    position: "absolute",
+    unitWidth: 2,
+    unitHeight: 2,
+    top: "50%",
+    flexCenter: true,
+    fontColor: "theme",
+    fontSize: "1.mini",
+    backgroundColor: "inherit"
+  }
+};
+export {
+  BoxWrapper,
+  CommonEffects,
+  DefaultStyles,
+  SubmitForm,
+  ValidationCheck,
+  Wrapper
+};