@jigowatts/jigowatts-ui 2.1.2 → 2.3.0

package/dist/components/SearchForm/index.es.js

@@ -1,66 +1,60 @@
-import { jsxs as o, jsx as n } from "react/jsx-runtime";
-import { ExpandMore as h, Search as p } from "@mui/icons-material";
-import { Accordion as _, AccordionSummary as x, AccordionDetails as f, Button as r } from "@mui/material";
-import { FlexButtons as b } from "../FlexButtons/index.es.js";
-import '../../assets/index6.css';const F = "_container_89suu_1", I = "_header_89suu_6", C = "_mainContent_89suu_19", N = "_searchForm_89suu_27", k = "_inputItems_89suu_33", e = {
-  container: F,
-  header: I,
-  mainContent: C,
-  searchForm: N,
-  inputItems: k
-}, y = ({
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { ExpandMore as _, Search as h } from "@mui/icons-material";
+import { Accordion as p, AccordionSummary as v, AccordionDetails as B } from "@mui/material";
+import { Button as r } from "../Button/index.es.js";
+import { FlexButtons as f } from "../FlexButtons/index.es.js";
+import '../../assets/index6.css';const j = "_container_vj5gz_1", g = "_header_vj5gz_6", x = "_mainContent_vj5gz_19", z = "_searchForm_vj5gz_27", N = "_inputItems_vj5gz_33", b = "_clearButton_vj5gz_39", F = "_submitButton_vj5gz_47", n = {
+  container: j,
+  header: g,
+  mainContent: x,
+  searchForm: z,
+  inputItems: N,
+  clearButton: b,
+  submitButton: F
+}, D = ({
   headerTitle: a,
   children: c,
   defaultExpanded: s,
   handleSubmit: i,
   onSubmitSearch: m,
-  onClickClear: t
+  onClickClear: e
 }) => {
-  const d = () => {
-    t && t();
-  }, l = i((u) => {
-    m(u);
+  const l = () => {
+    e && e();
+  }, u = i((d) => {
+    m(d);
   });
-  return /* @__PURE__ */ o(_, { defaultExpanded: s, className: e.container, children: [
-    /* @__PURE__ */ n(
-      x,
+  return /* @__PURE__ */ o(p, { defaultExpanded: s, className: n.container, children: [
+    /* @__PURE__ */ t(
+      v,
       {
-        className: e.header,
+        className: n.header,
         "aria-controls": "panel-content",
-        expandIcon: /* @__PURE__ */ n(h, {}),
+        expandIcon: /* @__PURE__ */ t(_, {}),
         children: a || "絞り込み"
       }
     ),
-    /* @__PURE__ */ n(f, { className: e.mainContent, children: /* @__PURE__ */ o("form", { className: e.searchForm, onSubmit: l, children: [
-      /* @__PURE__ */ n("div", { className: e.inputItems, children: c }),
-      /* @__PURE__ */ o(b, { position: "flex-end", children: [
-        /* @__PURE__ */ n(
+    /* @__PURE__ */ t(B, { className: n.mainContent, children: /* @__PURE__ */ o("form", { className: n.searchForm, onSubmit: u, children: [
+      /* @__PURE__ */ t("div", { className: n.inputItems, children: c }),
+      /* @__PURE__ */ o(f, { position: "flex-end", children: [
+        /* @__PURE__ */ t(
           r,
           {
-            onClick: d,
+            onClick: l,
             variant: "outlined",
-            sx: {
-              p: 1,
-              background: "white",
-              color: "#6672e8",
-              borderBlockColor: "#6672e8",
-              width: "128px"
-            },
+            color: "primary",
+            className: n.clearButton,
             children: "クリア"
           }
         ),
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ t(
           r,
           {
             type: "submit",
             variant: "contained",
-            startIcon: /* @__PURE__ */ n(p, {}),
-            sx: {
-              background: "#6672e8",
-              color: "white",
-              ":hover": { background: "#6672e8" },
-              width: "128px"
-            },
+            startIcon: /* @__PURE__ */ t(h, {}),
+            color: "primary",
+            className: n.submitButton,
             children: "検索"
           }
         )
@@ -69,7 +63,7 @@ import '../../assets/index6.css';const F = "_container_89suu_1", I = "_header_89
   ] });
 };
 export {
-  y as SearchForm,
-  y as default
+  D as SearchForm,
+  D as default
 };
 //# sourceMappingURL=index.es.js.map

package/dist/components/SearchForm/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../../src/components/SearchForm/index.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport { ExpandMore, Search } from \"@mui/icons-material\";\nimport {\n  Accordion,\n  AccordionDetails,\n  AccordionSummary,\n  Button,\n} from \"@mui/material\";\nimport { type FieldValues, type useForm } from \"react-hook-form\";\n\nimport { FlexButtons } from \"../FlexButtons\";\nimport styles from \"./index.module.scss\";\n\ntype Props<T extends FieldValues = FieldValues> = {\n  headerTitle?: string;\n  children: ReactNode;\n  defaultExpanded?: boolean;\n  handleSubmit: ReturnType<typeof useForm<T>>[\"handleSubmit\"];\n  onSubmitSearch: (data: T) => void;\n  onClickClear?: () => void;\n};\n\nexport const SearchForm = <T extends FieldValues = FieldValues>({\n  headerTitle,\n  children,\n  defaultExpanded,\n  handleSubmit,\n  onSubmitSearch,\n  onClickClear,\n}: Props<T>) => {\n  const handleClear = () => {\n    if (onClickClear) {\n      onClickClear();\n    }\n  };\n\n  const handle = handleSubmit((data) => {\n    onSubmitSearch(data);\n  });\n\n  return (\n    <Accordion defaultExpanded={defaultExpanded} className={styles.container}>\n      <AccordionSummary\n        className={styles.header}\n        aria-controls=\"panel-content\"\n        expandIcon={<ExpandMore />}\n      >\n        {headerTitle || \"絞り込み\"}\n      </AccordionSummary>\n      <AccordionDetails className={styles.mainContent}>\n        <form className={styles.searchForm} onSubmit={handle}>\n          <div className={styles.inputItems}>{children}</div>\n          <FlexButtons position=\"flex-end\">\n            <Button\n              onClick={handleClear}\n              variant=\"outlined\"\n              sx={{\n                p: 1,\n                background: \"white\",\n                color: \"#6672e8\",\n                borderBlockColor: \"#6672e8\",\n                width: \"128px\",\n              }}\n            >\n              クリア\n            </Button>\n            <Button\n              type=\"submit\"\n              variant=\"contained\"\n              startIcon={<Search />}\n              sx={{\n                background: \"#6672e8\",\n                color: \"white\",\n                \":hover\": { background: \"#6672e8\" },\n                width: \"128px\",\n              }}\n            >\n              検索\n            </Button>\n          </FlexButtons>\n        </form>\n      </AccordionDetails>\n    </Accordion>\n  );\n};\n\nexport default SearchForm;\n"],"names":["SearchForm","headerTitle","children","defaultExpanded","handleSubmit","onSubmitSearch","onClickClear","handleClear","handle","data","jsxs","Accordion","styles","jsx","AccordionSummary","ExpandMore","AccordionDetails","FlexButtons","Button","Search"],"mappings":";;;;;;;;;;GAsBaA,IAAa,CAAsC;AAAA,EAC9D,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAC;AACF,MAAgB;AACd,QAAMC,IAAc,MAAM;AACxB,IAAID,KACFA,EAAA;AAAA,EAEJ,GAEME,IAASJ,EAAa,CAACK,MAAS;AACpC,IAAAJ,EAAeI,CAAI;AAAA,EACrB,CAAC;AAED,SACE,gBAAAC,EAACC,GAAA,EAAU,iBAAAR,GAAkC,WAAWS,EAAO,WAC7D,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAWF,EAAO;AAAA,QAClB,iBAAc;AAAA,QACd,8BAAaG,GAAA,EAAW;AAAA,QAEvB,UAAAd,KAAe;AAAA,MAAA;AAAA,IAAA;AAAA,IAElB,gBAAAY,EAACG,GAAA,EAAiB,WAAWJ,EAAO,aAClC,UAAA,gBAAAF,EAAC,QAAA,EAAK,WAAWE,EAAO,YAAY,UAAUJ,GAC5C,UAAA;AAAA,MAAA,gBAAAK,EAAC,OAAA,EAAI,WAAWD,EAAO,YAAa,UAAAV,GAAS;AAAA,MAC7C,gBAAAQ,EAACO,GAAA,EAAY,UAAS,YACpB,UAAA;AAAA,QAAA,gBAAAJ;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,SAASX;AAAA,YACT,SAAQ;AAAA,YACR,IAAI;AAAA,cACF,GAAG;AAAA,cACH,YAAY;AAAA,cACZ,OAAO;AAAA,cACP,kBAAkB;AAAA,cAClB,OAAO;AAAA,YAAA;AAAA,YAEV,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGD,gBAAAM;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,6BAAYC,GAAA,EAAO;AAAA,YACnB,IAAI;AAAA,cACF,YAAY;AAAA,cACZ,OAAO;AAAA,cACP,UAAU,EAAE,YAAY,UAAA;AAAA,cACxB,OAAO;AAAA,YAAA;AAAA,YAEV,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAED,EAAA,CACF;AAAA,IAAA,EAAA,CACF,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"index.es.js","sources":["../../../src/components/SearchForm/index.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport { ExpandMore, Search } from \"@mui/icons-material\";\nimport {\n  Accordion,\n  AccordionDetails,\n  AccordionSummary,\n} from \"@mui/material\";\nimport { type FieldValues, type useForm } from \"react-hook-form\";\n\nimport Button from \"../Button\";\nimport { FlexButtons } from \"../FlexButtons\";\nimport styles from \"./index.module.scss\";\n\ntype Props<T extends FieldValues = FieldValues> = {\n  headerTitle?: string;\n  children: ReactNode;\n  defaultExpanded?: boolean;\n  handleSubmit: ReturnType<typeof useForm<T>>[\"handleSubmit\"];\n  onSubmitSearch: (data: T) => void;\n  onClickClear?: () => void;\n};\n\nexport const SearchForm = <T extends FieldValues = FieldValues>({\n  headerTitle,\n  children,\n  defaultExpanded,\n  handleSubmit,\n  onSubmitSearch,\n  onClickClear,\n}: Props<T>) => {\n  const handleClear = () => {\n    if (onClickClear) {\n      onClickClear();\n    }\n  };\n\n  const handle = handleSubmit((data) => {\n    onSubmitSearch(data);\n  });\n\n  return (\n    <Accordion defaultExpanded={defaultExpanded} className={styles.container}>\n      <AccordionSummary\n        className={styles.header}\n        aria-controls=\"panel-content\"\n        expandIcon={<ExpandMore />}\n      >\n        {headerTitle || \"絞り込み\"}\n      </AccordionSummary>\n      <AccordionDetails className={styles.mainContent}>\n        <form className={styles.searchForm} onSubmit={handle}>\n          <div className={styles.inputItems}>{children}</div>\n          <FlexButtons position=\"flex-end\">\n            <Button\n              onClick={handleClear}\n              variant=\"outlined\"\n              color=\"primary\"\n              className={styles.clearButton}\n            >\n              クリア\n            </Button>\n            <Button\n              type=\"submit\"\n              variant=\"contained\"\n              startIcon={<Search />}\n              color=\"primary\"\n              className={styles.submitButton}\n            >\n              検索\n            </Button>\n          </FlexButtons>\n        </form>\n      </AccordionDetails>\n    </Accordion>\n  );\n};\n\nexport default SearchForm;\n"],"names":["SearchForm","headerTitle","children","defaultExpanded","handleSubmit","onSubmitSearch","onClickClear","handleClear","handle","data","jsxs","Accordion","styles","jsx","AccordionSummary","ExpandMore","AccordionDetails","FlexButtons","Button","Search"],"mappings":";;;;;;;;;;;;;GAsBaA,IAAa,CAAsC;AAAA,EAC9D,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAC;AACF,MAAgB;AACd,QAAMC,IAAc,MAAM;AACxB,IAAID,KACFA,EAAA;AAAA,EAEJ,GAEME,IAASJ,EAAa,CAACK,MAAS;AACpC,IAAAJ,EAAeI,CAAI;AAAA,EACrB,CAAC;AAED,SACE,gBAAAC,EAACC,GAAA,EAAU,iBAAAR,GAAkC,WAAWS,EAAO,WAC7D,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAWF,EAAO;AAAA,QAClB,iBAAc;AAAA,QACd,8BAAaG,GAAA,EAAW;AAAA,QAEvB,UAAAd,KAAe;AAAA,MAAA;AAAA,IAAA;AAAA,IAElB,gBAAAY,EAACG,GAAA,EAAiB,WAAWJ,EAAO,aAClC,UAAA,gBAAAF,EAAC,QAAA,EAAK,WAAWE,EAAO,YAAY,UAAUJ,GAC5C,UAAA;AAAA,MAAA,gBAAAK,EAAC,OAAA,EAAI,WAAWD,EAAO,YAAa,UAAAV,GAAS;AAAA,MAC7C,gBAAAQ,EAACO,GAAA,EAAY,UAAS,YACpB,UAAA;AAAA,QAAA,gBAAAJ;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,SAASX;AAAA,YACT,SAAQ;AAAA,YACR,OAAM;AAAA,YACN,WAAWK,EAAO;AAAA,YACnB,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGD,gBAAAC;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,6BAAYC,GAAA,EAAO;AAAA,YACnB,OAAM;AAAA,YACN,WAAWP,EAAO;AAAA,YACnB,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAED,EAAA,CACF;AAAA,IAAA,EAAA,CACF,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/SelectBox/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require("react/jsx-runtime");require("classnames");const e=require("../../index-SHLzSoKB.cjs");exports.SelectBox=e.SelectBox;exports.default=e.SelectBox;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require("react/jsx-runtime");require("classnames");const e=require("../../index-DNu4-rkL.cjs");exports.SelectBox=e.SelectBox;exports.default=e.SelectBox;
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/SelectBox/index.es.js

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
 import "classnames";
-import { S as a, S as m } from "../../index-D7VNQwOv.js";
+import { S as a, S as m } from "../../index-omG0Vz2u.js";
 export {
   a as SelectBox,
   m as default

package/dist/components/SelectBox/index.test.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const n=require("react/jsx-runtime"),e=require("../../react.esm-DGuy6Rn3.cjs"),o=require("../../index-SHLzSoKB.cjs");describe("SelectBox component",()=>{const r=[{label:"Option 1",value:"option1"},{label:"Option 2",value:"option2"}],c="test-selectbox",l="test-name";it("renders the select box with correct options",()=>{e.render(n.jsx(o.SelectBox,{id:c,name:l,values:r}));const t=e.screen.getByRole("combobox");expect(t).toHaveAttribute("id",c),expect(t).toHaveAttribute("name",l),r.forEach(({label:s,value:a})=>{const x=e.screen.getByText(s);expect(x).toBeInTheDocument(),expect(x).toHaveAttribute("value",a)})}),it("shows error message when provided",()=>{const t="Error message";e.render(n.jsx(o.SelectBox,{values:r,errorMessage:t}));const s=e.screen.getByText(t);expect(s).toBeInTheDocument()}),it("does not show error message when not provided",()=>{e.render(n.jsx(o.SelectBox,{values:r}));const t=e.screen.queryByText(/Error message/i);expect(t).not.toBeInTheDocument()}),it("applies the error class to select box when errorMessage is provided",()=>{e.render(n.jsx(o.SelectBox,{values:r,errorMessage:"Error message"}));const s=e.screen.getByRole("combobox");expect(s).toHaveClass(o.styles.error)}),it("does not apply the error class to select box when errorMessage is not provided",()=>{e.render(n.jsx(o.SelectBox,{values:r}));const t=e.screen.getByRole("combobox");expect(t).not.toHaveClass(o.styles.error)})});
+"use strict";const n=require("react/jsx-runtime"),e=require("../../react.esm-DGuy6Rn3.cjs"),o=require("../../index-DNu4-rkL.cjs");describe("SelectBox component",()=>{const r=[{label:"Option 1",value:"option1"},{label:"Option 2",value:"option2"}],c="test-selectbox",l="test-name";it("renders the select box with correct options",()=>{e.render(n.jsx(o.SelectBox,{id:c,name:l,values:r}));const t=e.screen.getByRole("combobox");expect(t).toHaveAttribute("id",c),expect(t).toHaveAttribute("name",l),r.forEach(({label:s,value:a})=>{const x=e.screen.getByText(s);expect(x).toBeInTheDocument(),expect(x).toHaveAttribute("value",a)})}),it("shows error message when provided",()=>{const t="Error message";e.render(n.jsx(o.SelectBox,{values:r,errorMessage:t}));const s=e.screen.getByText(t);expect(s).toBeInTheDocument()}),it("does not show error message when not provided",()=>{e.render(n.jsx(o.SelectBox,{values:r}));const t=e.screen.queryByText(/Error message/i);expect(t).not.toBeInTheDocument()}),it("applies the error class to select box when errorMessage is provided",()=>{e.render(n.jsx(o.SelectBox,{values:r,errorMessage:"Error message"}));const s=e.screen.getByRole("combobox");expect(s).toHaveClass(o.styles.error)}),it("does not apply the error class to select box when errorMessage is not provided",()=>{e.render(n.jsx(o.SelectBox,{values:r}));const t=e.screen.getByRole("combobox");expect(t).not.toHaveClass(o.styles.error)})});
 //# sourceMappingURL=index.test.cjs.js.map

package/dist/components/SelectBox/index.test.es.js

@@ -1,6 +1,6 @@
 import { jsx as s } from "react/jsx-runtime";
 import { r as n, s as t } from "../../react.esm-BBESb8eI.js";
-import { s as p, S as c } from "../../index-D7VNQwOv.js";
+import { s as p, S as c } from "../../index-omG0Vz2u.js";
 describe("SelectBox component", () => {
   const o = [
     { label: "Option 1", value: "option1" },

package/dist/components/SelectBoxController/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../../assets/index5.css');const l=require("react/jsx-runtime"),f=require("@mui/icons-material"),n=require("@mui/material"),A=require("react-hook-form"),B="_placeholder_egyvt_6",_={placeholder:B},x=g=>{const{control:v,name:y,options:a,defaultValue:j,isMulti:t,placeholder:b,emptyValue:i=t?[]:"",onChange:s,onClear:u,inputProps:M}=g,c=r=>Array.isArray(r)&&r.length||!t&&r;return l.jsx(n.Box,{display:"grid",children:l.jsx(A.Controller,{control:v,name:y,defaultValue:j,render:({field:r,fieldState:p})=>{var d;return l.jsxs(n.FormControl,{error:p.invalid,children:[l.jsx(n.Select,{...r,onChange:(e,o)=>{!t&&e.target.value===""?r.onChange(void 0):r.onChange(e),s==null||s(e,o)},multiple:t,size:"small",value:r.value??i,displayEmpty:!0,inputProps:{...M},renderValue:()=>{var o;const e=r.value;if(t&&Array.isArray(e)){if(e.length)return e.map(C=>{var h;return(h=a.find(S=>S.value===C))==null?void 0:h.label}).join(", ")}else if(e&&(typeof e=="string"||typeof e=="number"))return(o=a.find(m=>m.value===e))==null?void 0:o.label;return l.jsx("span",{className:_.placeholder,children:b})},endAdornment:l.jsx(n.IconButton,{sx:{visibility:c(r.value)?"visible":"hidden"},onClick:e=>{r.onChange(t?[]:i===""?void 0:i),u==null||u(e)},children:l.jsx(f.Clear,{})}),sx:{"& .MuiSelect-iconOutlined":{display:c(r.value)?"none":""},"&.Mui-focused .MuiIconButton-root":{color:"primary.main"},"& .MuiSelect-select ":{whiteSpace:"break-spaces !important",paddingRight:"4px !important",fontSize:{xs:"1rem",sm:"0.875rem"},paddingLeft:"9.5px"},paddingRight:"4px !important"},children:a.map(e=>l.jsxs(n.MenuItem,{value:e.value,children:[" ",e.label," "]},e.value))}),l.jsx(n.FormHelperText,{children:(d=p.error)==null?void 0:d.message})]})}})})};exports.SelectBoxController=x;exports.default=x;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../../assets/index5.css');const l=require("react/jsx-runtime"),f=require("@mui/icons-material"),o=require("@mui/material"),A=require("react-hook-form"),B="_placeholder_egyvt_6",_={placeholder:B},x=g=>{const{control:v,name:y,options:a,defaultValue:j,isMulti:t,placeholder:b,emptyValue:i=t?[]:"",onChange:s,onClear:u,inputProps:M}=g,c=r=>Array.isArray(r)&&r.length||!t&&r;return l.jsx(o.Box,{display:"grid",children:l.jsx(A.Controller,{control:v,name:y,defaultValue:j,render:({field:r,fieldState:p})=>{var d;return l.jsxs(o.FormControl,{error:p.invalid,children:[l.jsx(o.Select,{...r,onChange:(e,n)=>{!t&&e.target.value===""?r.onChange(void 0):r.onChange(e),s==null||s(e,n)},multiple:t,size:"small",value:r.value??i,displayEmpty:!0,inputProps:{...M},renderValue:()=>{var n;const e=r.value;if(t&&Array.isArray(e)){if(e.length)return e.map(C=>{var h;return(h=a.find(S=>S.value===C))==null?void 0:h.label}).join(", ")}else if(e&&(typeof e=="string"||typeof e=="number"))return(n=a.find(m=>m.value===e))==null?void 0:n.label;return l.jsx("span",{className:_.placeholder,children:b})},endAdornment:l.jsx(o.IconButton,{sx:{visibility:c(r.value)?"visible":"hidden"},onClick:e=>{r.onChange(t?[]:i===""?void 0:i),u==null||u(e)},children:l.jsx(f.Clear,{})}),sx:{"& .MuiSelect-iconOutlined":{display:c(r.value)?"none":""},"&.Mui-focused .MuiIconButton-root":{color:"var(--jigowatts-color-primary, #6672e8)"},"& .MuiSelect-select ":{whiteSpace:"break-spaces !important",paddingRight:"4px !important",fontSize:{xs:"1rem",sm:"0.875rem"},paddingLeft:"9.5px"},paddingRight:"4px !important"},children:a.map(e=>l.jsxs(o.MenuItem,{value:e.value,children:[" ",e.label," "]},e.value))}),l.jsx(o.FormHelperText,{children:(d=p.error)==null?void 0:d.message})]})}})})};exports.SelectBoxController=x;exports.default=x;
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/SelectBoxController/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../src/components/SelectBoxController/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { Clear } from \"@mui/icons-material\";\nimport {\n  Box,\n  FormControl,\n  FormHelperText,\n  IconButton,\n  InputBaseComponentProps,\n  MenuItem,\n  Select,\n  SelectChangeEvent,\n} from \"@mui/material\";\nimport {\n  Controller,\n  FieldPath,\n  FieldValues,\n  PathValue,\n  type Control,\n} from \"react-hook-form\";\n\nimport styles from \"./index.module.scss\";\n\nexport type SelectBoxOption = {\n  readonly label: string;\n  readonly value: string | number;\n};\n\ntype Props<T extends FieldValues> = {\n  control: Control<T>;\n  name: FieldPath<T>;\n  options: SelectBoxOption[];\n  defaultValue?: PathValue<T, FieldPath<T>>;\n  emptyValue?: [] | string | null | undefined;\n  isMulti: boolean;\n  placeholder?: string;\n  onChange?: (\n    event: SelectChangeEvent<unknown>,\n    child: React.ReactNode,\n  ) => void;\n  onClear?: React.MouseEventHandler<HTMLButtonElement> | undefined;\n  inputProps?: InputBaseComponentProps;\n};\n\nexport const SelectBoxController = <T extends FieldValues>(props: Props<T>) => {\n  const {\n    control,\n    name,\n    options,\n    defaultValue,\n    isMulti,\n    placeholder,\n    emptyValue = isMulti ? [] : \"\",\n    onChange,\n    onClear,\n    inputProps,\n  } = props;\n\n  const existValue = (\n    value: SelectBoxOption[\"value\"] | SelectBoxOption[] | null,\n  ) => {\n    return (Array.isArray(value) && value.length) || (!isMulti && value);\n  };\n\n  return (\n    <Box display={\"grid\"}>\n      <Controller\n        control={control}\n        name={name}\n        defaultValue={defaultValue}\n        render={({ field, fieldState }) => (\n          <FormControl error={fieldState.invalid}>\n            <Select\n              {...field}\n              onChange={(event, child) => {\n                if (!isMulti && event.target.value === \"\") {\n                  field.onChange(undefined);\n                } else {\n                  field.onChange(event);\n                }\n                onChange?.(event, child);\n              }}\n              multiple={isMulti}\n              size=\"small\"\n              value={field.value ?? emptyValue}\n              displayEmpty\n              inputProps={{ ...inputProps }}\n              renderValue={() => {\n                const value = field.value;\n                if (isMulti && Array.isArray(value)) {\n                  if (value.length) {\n                    const labels = value.map(\n                      (val: SelectBoxOption[\"value\"]) =>\n                        options.find((option) => option.value === val)?.label,\n                    );\n                    return labels.join(\", \");\n                  }\n                } else if (\n                  value &&\n                  (typeof value === \"string\" || typeof value === \"number\")\n                ) {\n                  return options.find((option) => option.value === value)\n                    ?.label;\n                }\n                return (\n                  <span className={styles.placeholder}>{placeholder}</span>\n                );\n              }}\n              endAdornment={\n                <IconButton\n                  sx={{\n                    visibility: existValue(field.value) ? \"visible\" : \"hidden\",\n                  }}\n                  onClick={(event) => {\n                    field.onChange(\n                      isMulti ? [] : emptyValue === \"\" ? undefined : emptyValue,\n                    );\n                    onClear?.(event);\n                  }}\n                >\n                  <Clear />\n                </IconButton>\n              }\n              sx={{\n                \"& .MuiSelect-iconOutlined\": {\n                  display: existValue(field.value) ? \"none\" : \"\",\n                },\n                \"&.Mui-focused .MuiIconButton-root\": {\n                  color: \"primary.main\",\n                },\n                \"& .MuiSelect-select \": {\n                  whiteSpace: \"break-spaces !important\",\n                  paddingRight: \"4px !important\",\n                  fontSize: {\n                    xs: \"1rem\",\n                    sm: \"0.875rem\",\n                  },\n                  paddingLeft: \"9.5px\",\n                },\n                paddingRight: \"4px !important\",\n              }}\n            >\n              {options.map((m) => (\n                <MenuItem value={m.value} key={m.value}>\n                  {\" \"}\n                  {m.label}{\" \"}\n                </MenuItem>\n              ))}\n            </Select>\n            <FormHelperText>{fieldState.error?.message}</FormHelperText>\n          </FormControl>\n        )}\n      />\n    </Box>\n  );\n};\n\nexport default SelectBoxController;\n"],"names":["SelectBoxController","props","control","name","options","defaultValue","isMulti","placeholder","emptyValue","onChange","onClear","inputProps","existValue","value","jsx","Box","Controller","field","fieldState","jsxs","FormControl","Select","event","child","val","_a","option","styles","IconButton","Clear","m","MenuItem","FormHelperText"],"mappings":"qRA2CaA,EAA8CC,GAAoB,CAC7E,KAAM,CACJ,QAAAC,EACA,KAAAC,EACA,QAAAC,EACA,aAAAC,EACA,QAAAC,EACA,YAAAC,EACA,WAAAC,EAAaF,EAAU,CAAA,EAAK,GAC5B,SAAAG,EACA,QAAAC,EACA,WAAAC,CAAA,EACEV,EAEEW,EACJC,GAEQ,MAAM,QAAQA,CAAK,GAAKA,EAAM,QAAY,CAACP,GAAWO,EAGhE,OACEC,EAAAA,IAACC,EAAAA,IAAA,CAAI,QAAS,OACZ,SAAAD,EAAAA,IAACE,EAAAA,WAAA,CACC,QAAAd,EACA,KAAAC,EACA,aAAAE,EACA,OAAQ,CAAC,CAAE,MAAAY,EAAO,WAAAC,YAChBC,OAAAA,EAAAA,KAACC,EAAAA,YAAA,CAAY,MAAOF,EAAW,QAC7B,SAAA,CAAAJ,EAAAA,IAACO,EAAAA,OAAA,CACE,GAAGJ,EACJ,SAAU,CAACK,EAAOC,IAAU,CACtB,CAACjB,GAAWgB,EAAM,OAAO,QAAU,GACrCL,EAAM,SAAS,MAAS,EAExBA,EAAM,SAASK,CAAK,EAEtBb,GAAA,MAAAA,EAAWa,EAAOC,EACpB,EACA,SAAUjB,EACV,KAAK,QACL,MAAOW,EAAM,OAAST,EACtB,aAAY,GACZ,WAAY,CAAE,GAAGG,CAAA,EACjB,YAAa,IAAM,OACjB,MAAME,EAAQI,EAAM,MACpB,GAAIX,GAAW,MAAM,QAAQO,CAAK,GAChC,GAAIA,EAAM,OAKR,OAJeA,EAAM,IAClBW,UACC,OAAAC,EAAArB,EAAQ,KAAMsB,GAAWA,EAAO,QAAUF,CAAG,IAA7C,YAAAC,EAAgD,MAAA,EAEtC,KAAK,IAAI,UAGzBZ,IACC,OAAOA,GAAU,UAAY,OAAOA,GAAU,UAE/C,OAAOY,EAAArB,EAAQ,KAAMsB,GAAWA,EAAO,QAAUb,CAAK,IAA/C,YAAAY,EACH,MAEN,OACEX,EAAAA,IAAC,OAAA,CAAK,UAAWa,EAAO,YAAc,SAAApB,EAAY,CAEtD,EACA,aACEO,EAAAA,IAACc,EAAAA,WAAA,CACC,GAAI,CACF,WAAYhB,EAAWK,EAAM,KAAK,EAAI,UAAY,QAAA,EAEpD,QAAUK,GAAU,CAClBL,EAAM,SACJX,EAAU,CAAA,EAAKE,IAAe,GAAK,OAAYA,CAAA,EAEjDE,GAAA,MAAAA,EAAUY,EACZ,EAEA,eAACO,EAAAA,MAAA,CAAA,CAAM,CAAA,CAAA,EAGX,GAAI,CACF,4BAA6B,CAC3B,QAASjB,EAAWK,EAAM,KAAK,EAAI,OAAS,EAAA,EAE9C,oCAAqC,CACnC,MAAO,cAAA,EAET,uBAAwB,CACtB,WAAY,0BACZ,aAAc,iBACd,SAAU,CACR,GAAI,OACJ,GAAI,UAAA,EAEN,YAAa,OAAA,EAEf,aAAc,gBAAA,EAGf,SAAAb,EAAQ,IAAK0B,UACXC,EAAAA,SAAA,CAAS,MAAOD,EAAE,MAChB,SAAA,CAAA,IACAA,EAAE,MAAO,GAAA,CAAA,EAFmBA,EAAE,KAGjC,CACD,CAAA,CAAA,EAEHhB,EAAAA,IAACkB,EAAAA,eAAA,CAAgB,UAAAP,EAAAP,EAAW,QAAX,YAAAO,EAAkB,OAAA,CAAQ,CAAA,CAAA,CAC7C,EAAA,CAAA,EAGN,CAEJ"}
+{"version":3,"file":"index.cjs.js","sources":["../../../src/components/SelectBoxController/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { Clear } from \"@mui/icons-material\";\nimport {\n  Box,\n  FormControl,\n  FormHelperText,\n  IconButton,\n  InputBaseComponentProps,\n  MenuItem,\n  Select,\n  SelectChangeEvent,\n} from \"@mui/material\";\nimport {\n  Controller,\n  FieldPath,\n  FieldValues,\n  PathValue,\n  type Control,\n} from \"react-hook-form\";\n\nimport styles from \"./index.module.scss\";\n\nexport type SelectBoxOption = {\n  readonly label: string;\n  readonly value: string | number;\n};\n\ntype Props<T extends FieldValues> = {\n  control: Control<T>;\n  name: FieldPath<T>;\n  options: SelectBoxOption[];\n  defaultValue?: PathValue<T, FieldPath<T>>;\n  emptyValue?: [] | string | null | undefined;\n  isMulti: boolean;\n  placeholder?: string;\n  onChange?: (\n    event: SelectChangeEvent<unknown>,\n    child: React.ReactNode,\n  ) => void;\n  onClear?: React.MouseEventHandler<HTMLButtonElement> | undefined;\n  inputProps?: InputBaseComponentProps;\n};\n\nexport const SelectBoxController = <T extends FieldValues>(props: Props<T>) => {\n  const {\n    control,\n    name,\n    options,\n    defaultValue,\n    isMulti,\n    placeholder,\n    emptyValue = isMulti ? [] : \"\",\n    onChange,\n    onClear,\n    inputProps,\n  } = props;\n\n  const existValue = (\n    value: SelectBoxOption[\"value\"] | SelectBoxOption[] | null,\n  ) => {\n    return (Array.isArray(value) && value.length) || (!isMulti && value);\n  };\n\n  return (\n    <Box display={\"grid\"}>\n      <Controller\n        control={control}\n        name={name}\n        defaultValue={defaultValue}\n        render={({ field, fieldState }) => (\n          <FormControl error={fieldState.invalid}>\n            <Select\n              {...field}\n              onChange={(event, child) => {\n                if (!isMulti && event.target.value === \"\") {\n                  field.onChange(undefined);\n                } else {\n                  field.onChange(event);\n                }\n                onChange?.(event, child);\n              }}\n              multiple={isMulti}\n              size=\"small\"\n              value={field.value ?? emptyValue}\n              displayEmpty\n              inputProps={{ ...inputProps }}\n              renderValue={() => {\n                const value = field.value;\n                if (isMulti && Array.isArray(value)) {\n                  if (value.length) {\n                    const labels = value.map(\n                      (val: SelectBoxOption[\"value\"]) =>\n                        options.find((option) => option.value === val)?.label,\n                    );\n                    return labels.join(\", \");\n                  }\n                } else if (\n                  value &&\n                  (typeof value === \"string\" || typeof value === \"number\")\n                ) {\n                  return options.find((option) => option.value === value)\n                    ?.label;\n                }\n                return (\n                  <span className={styles.placeholder}>{placeholder}</span>\n                );\n              }}\n              endAdornment={\n                <IconButton\n                  sx={{\n                    visibility: existValue(field.value) ? \"visible\" : \"hidden\",\n                  }}\n                  onClick={(event) => {\n                    field.onChange(\n                      isMulti ? [] : emptyValue === \"\" ? undefined : emptyValue,\n                    );\n                    onClear?.(event);\n                  }}\n                >\n                  <Clear />\n                </IconButton>\n              }\n              sx={{\n                \"& .MuiSelect-iconOutlined\": {\n                  display: existValue(field.value) ? \"none\" : \"\",\n                },\n                \"&.Mui-focused .MuiIconButton-root\": {\n                  color: \"var(--jigowatts-color-primary, #6672e8)\",\n                },\n                \"& .MuiSelect-select \": {\n                  whiteSpace: \"break-spaces !important\",\n                  paddingRight: \"4px !important\",\n                  fontSize: {\n                    xs: \"1rem\",\n                    sm: \"0.875rem\",\n                  },\n                  paddingLeft: \"9.5px\",\n                },\n                paddingRight: \"4px !important\",\n              }}\n            >\n              {options.map((m) => (\n                <MenuItem value={m.value} key={m.value}>\n                  {\" \"}\n                  {m.label}{\" \"}\n                </MenuItem>\n              ))}\n            </Select>\n            <FormHelperText>{fieldState.error?.message}</FormHelperText>\n          </FormControl>\n        )}\n      />\n    </Box>\n  );\n};\n\nexport default SelectBoxController;\n"],"names":["SelectBoxController","props","control","name","options","defaultValue","isMulti","placeholder","emptyValue","onChange","onClear","inputProps","existValue","value","jsx","Box","Controller","field","fieldState","jsxs","FormControl","Select","event","child","val","_a","option","styles","IconButton","Clear","m","MenuItem","FormHelperText"],"mappings":"qRA2CaA,EAA8CC,GAAoB,CAC7E,KAAM,CACJ,QAAAC,EACA,KAAAC,EACA,QAAAC,EACA,aAAAC,EACA,QAAAC,EACA,YAAAC,EACA,WAAAC,EAAaF,EAAU,CAAA,EAAK,GAC5B,SAAAG,EACA,QAAAC,EACA,WAAAC,CAAA,EACEV,EAEEW,EACJC,GAEQ,MAAM,QAAQA,CAAK,GAAKA,EAAM,QAAY,CAACP,GAAWO,EAGhE,OACEC,EAAAA,IAACC,EAAAA,IAAA,CAAI,QAAS,OACZ,SAAAD,EAAAA,IAACE,EAAAA,WAAA,CACC,QAAAd,EACA,KAAAC,EACA,aAAAE,EACA,OAAQ,CAAC,CAAE,MAAAY,EAAO,WAAAC,YAChBC,OAAAA,EAAAA,KAACC,EAAAA,YAAA,CAAY,MAAOF,EAAW,QAC7B,SAAA,CAAAJ,EAAAA,IAACO,EAAAA,OAAA,CACE,GAAGJ,EACJ,SAAU,CAACK,EAAOC,IAAU,CACtB,CAACjB,GAAWgB,EAAM,OAAO,QAAU,GACrCL,EAAM,SAAS,MAAS,EAExBA,EAAM,SAASK,CAAK,EAEtBb,GAAA,MAAAA,EAAWa,EAAOC,EACpB,EACA,SAAUjB,EACV,KAAK,QACL,MAAOW,EAAM,OAAST,EACtB,aAAY,GACZ,WAAY,CAAE,GAAGG,CAAA,EACjB,YAAa,IAAM,OACjB,MAAME,EAAQI,EAAM,MACpB,GAAIX,GAAW,MAAM,QAAQO,CAAK,GAChC,GAAIA,EAAM,OAKR,OAJeA,EAAM,IAClBW,UACC,OAAAC,EAAArB,EAAQ,KAAMsB,GAAWA,EAAO,QAAUF,CAAG,IAA7C,YAAAC,EAAgD,MAAA,EAEtC,KAAK,IAAI,UAGzBZ,IACC,OAAOA,GAAU,UAAY,OAAOA,GAAU,UAE/C,OAAOY,EAAArB,EAAQ,KAAMsB,GAAWA,EAAO,QAAUb,CAAK,IAA/C,YAAAY,EACH,MAEN,OACEX,EAAAA,IAAC,OAAA,CAAK,UAAWa,EAAO,YAAc,SAAApB,EAAY,CAEtD,EACA,aACEO,EAAAA,IAACc,EAAAA,WAAA,CACC,GAAI,CACF,WAAYhB,EAAWK,EAAM,KAAK,EAAI,UAAY,QAAA,EAEpD,QAAUK,GAAU,CAClBL,EAAM,SACJX,EAAU,CAAA,EAAKE,IAAe,GAAK,OAAYA,CAAA,EAEjDE,GAAA,MAAAA,EAAUY,EACZ,EAEA,eAACO,EAAAA,MAAA,CAAA,CAAM,CAAA,CAAA,EAGX,GAAI,CACF,4BAA6B,CAC3B,QAASjB,EAAWK,EAAM,KAAK,EAAI,OAAS,EAAA,EAE9C,oCAAqC,CACnC,MAAO,yCAAA,EAET,uBAAwB,CACtB,WAAY,0BACZ,aAAc,iBACd,SAAU,CACR,GAAI,OACJ,GAAI,UAAA,EAEN,YAAa,OAAA,EAEf,aAAc,gBAAA,EAGf,SAAAb,EAAQ,IAAK0B,UACXC,EAAAA,SAAA,CAAS,MAAOD,EAAE,MAChB,SAAA,CAAA,IACAA,EAAE,MAAO,GAAA,CAAA,EAFmBA,EAAE,KAGjC,CACD,CAAA,CAAA,EAEHhB,EAAAA,IAACkB,EAAAA,eAAA,CAAgB,UAAAP,EAAAP,EAAW,QAAX,YAAAO,EAAkB,OAAA,CAAQ,CAAA,CAAA,CAC7C,EAAA,CAAA,EAGN,CAEJ"}

package/dist/components/SelectBoxController/index.es.js

@@ -1,57 +1,57 @@
 import { jsx as l, jsxs as h } from "react/jsx-runtime";
 import { Clear as A } from "@mui/icons-material";
-import { Box as S, FormControl as B, Select as V, MenuItem as j, IconButton as I, FormHelperText as _ } from "@mui/material";
+import { Box as S, FormControl as j, Select as B, MenuItem as V, IconButton as I, FormHelperText as _ } from "@mui/material";
 import { Controller as k } from "react-hook-form";
-import '../../assets/index5.css';const z = "_placeholder_egyvt_6", F = {
-  placeholder: z
+import '../../assets/index5.css';const w = "_placeholder_egyvt_6", z = {
+  placeholder: w
 }, H = (g) => {
   const {
-    control: y,
-    name: v,
-    options: t,
+    control: v,
+    name: y,
+    options: n,
     defaultValue: x,
-    isMulti: n,
+    isMulti: o,
     placeholder: b,
-    emptyValue: a = n ? [] : "",
+    emptyValue: a = o ? [] : "",
     onChange: i,
     onClear: s,
     inputProps: f
-  } = g, p = (r) => Array.isArray(r) && r.length || !n && r;
+  } = g, p = (r) => Array.isArray(r) && r.length || !o && r;
   return /* @__PURE__ */ l(S, { display: "grid", children: /* @__PURE__ */ l(
     k,
     {
-      control: y,
-      name: v,
+      control: v,
+      name: y,
       defaultValue: x,
       render: ({ field: r, fieldState: u }) => {
         var c;
-        return /* @__PURE__ */ h(B, { error: u.invalid, children: [
+        return /* @__PURE__ */ h(j, { error: u.invalid, children: [
           /* @__PURE__ */ l(
-            V,
+            B,
             {
               ...r,
-              onChange: (e, o) => {
-                !n && e.target.value === "" ? r.onChange(void 0) : r.onChange(e), i == null || i(e, o);
+              onChange: (e, t) => {
+                !o && e.target.value === "" ? r.onChange(void 0) : r.onChange(e), i == null || i(e, t);
               },
-              multiple: n,
+              multiple: o,
               size: "small",
               value: r.value ?? a,
               displayEmpty: !0,
               inputProps: { ...f },
               renderValue: () => {
-                var o;
+                var t;
                 const e = r.value;
-                if (n && Array.isArray(e)) {
+                if (o && Array.isArray(e)) {
                   if (e.length)
                     return e.map(
                       (C) => {
                         var m;
-                        return (m = t.find((M) => M.value === C)) == null ? void 0 : m.label;
+                        return (m = n.find((M) => M.value === C)) == null ? void 0 : m.label;
                       }
                     ).join(", ");
                 } else if (e && (typeof e == "string" || typeof e == "number"))
-                  return (o = t.find((d) => d.value === e)) == null ? void 0 : o.label;
-                return /* @__PURE__ */ l("span", { className: F.placeholder, children: b });
+                  return (t = n.find((d) => d.value === e)) == null ? void 0 : t.label;
+                return /* @__PURE__ */ l("span", { className: z.placeholder, children: b });
               },
               endAdornment: /* @__PURE__ */ l(
                 I,
@@ -61,7 +61,7 @@ import '../../assets/index5.css';const z = "_placeholder_egyvt_6", F = {
                   },
                   onClick: (e) => {
                     r.onChange(
-                      n ? [] : a === "" ? void 0 : a
+                      o ? [] : a === "" ? void 0 : a
                     ), s == null || s(e);
                   },
                   children: /* @__PURE__ */ l(A, {})
@@ -72,7 +72,7 @@ import '../../assets/index5.css';const z = "_placeholder_egyvt_6", F = {
                   display: p(r.value) ? "none" : ""
                 },
                 "&.Mui-focused .MuiIconButton-root": {
-                  color: "primary.main"
+                  color: "var(--jigowatts-color-primary, #6672e8)"
                 },
                 "& .MuiSelect-select ": {
                   whiteSpace: "break-spaces !important",
@@ -85,7 +85,7 @@ import '../../assets/index5.css';const z = "_placeholder_egyvt_6", F = {
                 },
                 paddingRight: "4px !important"
               },
-              children: t.map((e) => /* @__PURE__ */ h(j, { value: e.value, children: [
+              children: n.map((e) => /* @__PURE__ */ h(V, { value: e.value, children: [
                 " ",
                 e.label,
                 " "

package/dist/components/SelectBoxController/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../../src/components/SelectBoxController/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { Clear } from \"@mui/icons-material\";\nimport {\n  Box,\n  FormControl,\n  FormHelperText,\n  IconButton,\n  InputBaseComponentProps,\n  MenuItem,\n  Select,\n  SelectChangeEvent,\n} from \"@mui/material\";\nimport {\n  Controller,\n  FieldPath,\n  FieldValues,\n  PathValue,\n  type Control,\n} from \"react-hook-form\";\n\nimport styles from \"./index.module.scss\";\n\nexport type SelectBoxOption = {\n  readonly label: string;\n  readonly value: string | number;\n};\n\ntype Props<T extends FieldValues> = {\n  control: Control<T>;\n  name: FieldPath<T>;\n  options: SelectBoxOption[];\n  defaultValue?: PathValue<T, FieldPath<T>>;\n  emptyValue?: [] | string | null | undefined;\n  isMulti: boolean;\n  placeholder?: string;\n  onChange?: (\n    event: SelectChangeEvent<unknown>,\n    child: React.ReactNode,\n  ) => void;\n  onClear?: React.MouseEventHandler<HTMLButtonElement> | undefined;\n  inputProps?: InputBaseComponentProps;\n};\n\nexport const SelectBoxController = <T extends FieldValues>(props: Props<T>) => {\n  const {\n    control,\n    name,\n    options,\n    defaultValue,\n    isMulti,\n    placeholder,\n    emptyValue = isMulti ? [] : \"\",\n    onChange,\n    onClear,\n    inputProps,\n  } = props;\n\n  const existValue = (\n    value: SelectBoxOption[\"value\"] | SelectBoxOption[] | null,\n  ) => {\n    return (Array.isArray(value) && value.length) || (!isMulti && value);\n  };\n\n  return (\n    <Box display={\"grid\"}>\n      <Controller\n        control={control}\n        name={name}\n        defaultValue={defaultValue}\n        render={({ field, fieldState }) => (\n          <FormControl error={fieldState.invalid}>\n            <Select\n              {...field}\n              onChange={(event, child) => {\n                if (!isMulti && event.target.value === \"\") {\n                  field.onChange(undefined);\n                } else {\n                  field.onChange(event);\n                }\n                onChange?.(event, child);\n              }}\n              multiple={isMulti}\n              size=\"small\"\n              value={field.value ?? emptyValue}\n              displayEmpty\n              inputProps={{ ...inputProps }}\n              renderValue={() => {\n                const value = field.value;\n                if (isMulti && Array.isArray(value)) {\n                  if (value.length) {\n                    const labels = value.map(\n                      (val: SelectBoxOption[\"value\"]) =>\n                        options.find((option) => option.value === val)?.label,\n                    );\n                    return labels.join(\", \");\n                  }\n                } else if (\n                  value &&\n                  (typeof value === \"string\" || typeof value === \"number\")\n                ) {\n                  return options.find((option) => option.value === value)\n                    ?.label;\n                }\n                return (\n                  <span className={styles.placeholder}>{placeholder}</span>\n                );\n              }}\n              endAdornment={\n                <IconButton\n                  sx={{\n                    visibility: existValue(field.value) ? \"visible\" : \"hidden\",\n                  }}\n                  onClick={(event) => {\n                    field.onChange(\n                      isMulti ? [] : emptyValue === \"\" ? undefined : emptyValue,\n                    );\n                    onClear?.(event);\n                  }}\n                >\n                  <Clear />\n                </IconButton>\n              }\n              sx={{\n                \"& .MuiSelect-iconOutlined\": {\n                  display: existValue(field.value) ? \"none\" : \"\",\n                },\n                \"&.Mui-focused .MuiIconButton-root\": {\n                  color: \"primary.main\",\n                },\n                \"& .MuiSelect-select \": {\n                  whiteSpace: \"break-spaces !important\",\n                  paddingRight: \"4px !important\",\n                  fontSize: {\n                    xs: \"1rem\",\n                    sm: \"0.875rem\",\n                  },\n                  paddingLeft: \"9.5px\",\n                },\n                paddingRight: \"4px !important\",\n              }}\n            >\n              {options.map((m) => (\n                <MenuItem value={m.value} key={m.value}>\n                  {\" \"}\n                  {m.label}{\" \"}\n                </MenuItem>\n              ))}\n            </Select>\n            <FormHelperText>{fieldState.error?.message}</FormHelperText>\n          </FormControl>\n        )}\n      />\n    </Box>\n  );\n};\n\nexport default SelectBoxController;\n"],"names":["SelectBoxController","props","control","name","options","defaultValue","isMulti","placeholder","emptyValue","onChange","onClear","inputProps","existValue","value","jsx","Box","Controller","field","fieldState","jsxs","FormControl","Select","event","child","val","_a","option","styles","IconButton","Clear","m","MenuItem","FormHelperText"],"mappings":";;;;;;GA2CaA,IAAsB,CAAwBC,MAAoB;AAC7E,QAAM;AAAA,IACJ,SAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC;AAAA,IACA,cAAAC;AAAA,IACA,SAAAC;AAAA,IACA,aAAAC;AAAA,IACA,YAAAC,IAAaF,IAAU,CAAA,IAAK;AAAA,IAC5B,UAAAG;AAAA,IACA,SAAAC;AAAA,IACA,YAAAC;AAAA,EAAA,IACEV,GAEEW,IAAa,CACjBC,MAEQ,MAAM,QAAQA,CAAK,KAAKA,EAAM,UAAY,CAACP,KAAWO;AAGhE,SACE,gBAAAC,EAACC,GAAA,EAAI,SAAS,QACZ,UAAA,gBAAAD;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,SAAAd;AAAA,MACA,MAAAC;AAAA,MACA,cAAAE;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAY,GAAO,YAAAC;;AAChB,+BAAAC,EAACC,GAAA,EAAY,OAAOF,EAAW,SAC7B,UAAA;AAAA,UAAA,gBAAAJ;AAAA,YAACO;AAAA,YAAA;AAAA,cACE,GAAGJ;AAAA,cACJ,UAAU,CAACK,GAAOC,MAAU;AAC1B,gBAAI,CAACjB,KAAWgB,EAAM,OAAO,UAAU,KACrCL,EAAM,SAAS,MAAS,IAExBA,EAAM,SAASK,CAAK,GAEtBb,KAAA,QAAAA,EAAWa,GAAOC;AAAA,cACpB;AAAA,cACA,UAAUjB;AAAA,cACV,MAAK;AAAA,cACL,OAAOW,EAAM,SAAST;AAAA,cACtB,cAAY;AAAA,cACZ,YAAY,EAAE,GAAGG,EAAA;AAAA,cACjB,aAAa,MAAM;;AACjB,sBAAME,IAAQI,EAAM;AACpB,oBAAIX,KAAW,MAAM,QAAQO,CAAK;AAChC,sBAAIA,EAAM;AAKR,2BAJeA,EAAM;AAAA,sBACnB,CAACW;;AACC,gCAAAC,IAAArB,EAAQ,KAAK,CAACsB,MAAWA,EAAO,UAAUF,CAAG,MAA7C,gBAAAC,EAAgD;AAAA;AAAA,oBAAA,EAEtC,KAAK,IAAI;AAAA,2BAGzBZ,MACC,OAAOA,KAAU,YAAY,OAAOA,KAAU;AAE/C,0BAAOY,IAAArB,EAAQ,KAAK,CAACsB,MAAWA,EAAO,UAAUb,CAAK,MAA/C,gBAAAY,EACH;AAEN,uBACE,gBAAAX,EAAC,QAAA,EAAK,WAAWa,EAAO,aAAc,UAAApB,GAAY;AAAA,cAEtD;AAAA,cACA,cACE,gBAAAO;AAAA,gBAACc;AAAA,gBAAA;AAAA,kBACC,IAAI;AAAA,oBACF,YAAYhB,EAAWK,EAAM,KAAK,IAAI,YAAY;AAAA,kBAAA;AAAA,kBAEpD,SAAS,CAACK,MAAU;AAClB,oBAAAL,EAAM;AAAA,sBACJX,IAAU,CAAA,IAAKE,MAAe,KAAK,SAAYA;AAAA,oBAAA,GAEjDE,KAAA,QAAAA,EAAUY;AAAA,kBACZ;AAAA,kBAEA,4BAACO,GAAA,CAAA,CAAM;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGX,IAAI;AAAA,gBACF,6BAA6B;AAAA,kBAC3B,SAASjB,EAAWK,EAAM,KAAK,IAAI,SAAS;AAAA,gBAAA;AAAA,gBAE9C,qCAAqC;AAAA,kBACnC,OAAO;AAAA,gBAAA;AAAA,gBAET,wBAAwB;AAAA,kBACtB,YAAY;AAAA,kBACZ,cAAc;AAAA,kBACd,UAAU;AAAA,oBACR,IAAI;AAAA,oBACJ,IAAI;AAAA,kBAAA;AAAA,kBAEN,aAAa;AAAA,gBAAA;AAAA,gBAEf,cAAc;AAAA,cAAA;AAAA,cAGf,UAAAb,EAAQ,IAAI,CAAC0B,wBACXC,GAAA,EAAS,OAAOD,EAAE,OAChB,UAAA;AAAA,gBAAA;AAAA,gBACAA,EAAE;AAAA,gBAAO;AAAA,cAAA,EAAA,GAFmBA,EAAE,KAGjC,CACD;AAAA,YAAA;AAAA,UAAA;AAAA,UAEH,gBAAAhB,EAACkB,GAAA,EAAgB,WAAAP,IAAAP,EAAW,UAAX,gBAAAO,EAAkB,QAAA,CAAQ;AAAA,QAAA,EAAA,CAC7C;AAAA;AAAA,IAAA;AAAA,EAAA,GAGN;AAEJ;"}
+{"version":3,"file":"index.es.js","sources":["../../../src/components/SelectBoxController/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { Clear } from \"@mui/icons-material\";\nimport {\n  Box,\n  FormControl,\n  FormHelperText,\n  IconButton,\n  InputBaseComponentProps,\n  MenuItem,\n  Select,\n  SelectChangeEvent,\n} from \"@mui/material\";\nimport {\n  Controller,\n  FieldPath,\n  FieldValues,\n  PathValue,\n  type Control,\n} from \"react-hook-form\";\n\nimport styles from \"./index.module.scss\";\n\nexport type SelectBoxOption = {\n  readonly label: string;\n  readonly value: string | number;\n};\n\ntype Props<T extends FieldValues> = {\n  control: Control<T>;\n  name: FieldPath<T>;\n  options: SelectBoxOption[];\n  defaultValue?: PathValue<T, FieldPath<T>>;\n  emptyValue?: [] | string | null | undefined;\n  isMulti: boolean;\n  placeholder?: string;\n  onChange?: (\n    event: SelectChangeEvent<unknown>,\n    child: React.ReactNode,\n  ) => void;\n  onClear?: React.MouseEventHandler<HTMLButtonElement> | undefined;\n  inputProps?: InputBaseComponentProps;\n};\n\nexport const SelectBoxController = <T extends FieldValues>(props: Props<T>) => {\n  const {\n    control,\n    name,\n    options,\n    defaultValue,\n    isMulti,\n    placeholder,\n    emptyValue = isMulti ? [] : \"\",\n    onChange,\n    onClear,\n    inputProps,\n  } = props;\n\n  const existValue = (\n    value: SelectBoxOption[\"value\"] | SelectBoxOption[] | null,\n  ) => {\n    return (Array.isArray(value) && value.length) || (!isMulti && value);\n  };\n\n  return (\n    <Box display={\"grid\"}>\n      <Controller\n        control={control}\n        name={name}\n        defaultValue={defaultValue}\n        render={({ field, fieldState }) => (\n          <FormControl error={fieldState.invalid}>\n            <Select\n              {...field}\n              onChange={(event, child) => {\n                if (!isMulti && event.target.value === \"\") {\n                  field.onChange(undefined);\n                } else {\n                  field.onChange(event);\n                }\n                onChange?.(event, child);\n              }}\n              multiple={isMulti}\n              size=\"small\"\n              value={field.value ?? emptyValue}\n              displayEmpty\n              inputProps={{ ...inputProps }}\n              renderValue={() => {\n                const value = field.value;\n                if (isMulti && Array.isArray(value)) {\n                  if (value.length) {\n                    const labels = value.map(\n                      (val: SelectBoxOption[\"value\"]) =>\n                        options.find((option) => option.value === val)?.label,\n                    );\n                    return labels.join(\", \");\n                  }\n                } else if (\n                  value &&\n                  (typeof value === \"string\" || typeof value === \"number\")\n                ) {\n                  return options.find((option) => option.value === value)\n                    ?.label;\n                }\n                return (\n                  <span className={styles.placeholder}>{placeholder}</span>\n                );\n              }}\n              endAdornment={\n                <IconButton\n                  sx={{\n                    visibility: existValue(field.value) ? \"visible\" : \"hidden\",\n                  }}\n                  onClick={(event) => {\n                    field.onChange(\n                      isMulti ? [] : emptyValue === \"\" ? undefined : emptyValue,\n                    );\n                    onClear?.(event);\n                  }}\n                >\n                  <Clear />\n                </IconButton>\n              }\n              sx={{\n                \"& .MuiSelect-iconOutlined\": {\n                  display: existValue(field.value) ? \"none\" : \"\",\n                },\n                \"&.Mui-focused .MuiIconButton-root\": {\n                  color: \"var(--jigowatts-color-primary, #6672e8)\",\n                },\n                \"& .MuiSelect-select \": {\n                  whiteSpace: \"break-spaces !important\",\n                  paddingRight: \"4px !important\",\n                  fontSize: {\n                    xs: \"1rem\",\n                    sm: \"0.875rem\",\n                  },\n                  paddingLeft: \"9.5px\",\n                },\n                paddingRight: \"4px !important\",\n              }}\n            >\n              {options.map((m) => (\n                <MenuItem value={m.value} key={m.value}>\n                  {\" \"}\n                  {m.label}{\" \"}\n                </MenuItem>\n              ))}\n            </Select>\n            <FormHelperText>{fieldState.error?.message}</FormHelperText>\n          </FormControl>\n        )}\n      />\n    </Box>\n  );\n};\n\nexport default SelectBoxController;\n"],"names":["SelectBoxController","props","control","name","options","defaultValue","isMulti","placeholder","emptyValue","onChange","onClear","inputProps","existValue","value","jsx","Box","Controller","field","fieldState","jsxs","FormControl","Select","event","child","val","_a","option","styles","IconButton","Clear","m","MenuItem","FormHelperText"],"mappings":"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"}

package/dist/components/SideMenu/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../../assets/index4.css');const s=require("react/jsx-runtime"),m=require("react"),v=require("next/image"),f=require("next/link"),y=require("@mui/material"),I=require("classnames"),k="_sideMenu_1qefs_1",M="_logo_1qefs_7",S="_logoImage_1qefs_12",D="_menus_1qefs_16",N="_menuTitle_1qefs_23",T="_menuItem_1qefs_31",w="_selected_1qefs_45",t={sideMenu:k,logo:M,logoImage:S,menus:D,menuTitle:N,menuItem:T,selected:w},_=235,h=g=>{const{isOpen:c,isMobile:l,onClose:a,menus:x,logoSrc:p,topPageUrl:b="/",isStorybook:q=!1,currentPath:n}=g,d=(n==null?void 0:n.split("/")[1])??null,i=d===""?"/":"/"+d,[u,j]=m.useState(i);m.useEffect(()=>{j(i)},[i,n]);const r=e=>{l&&a(),q&&e.preventDefault()};return s.jsx(y.Drawer,{variant:l?"temporary":"permanent",open:l?c:void 0,onClose:a,sx:{width:_,flexShrink:0,"& .MuiDrawer-paper":{width:_,boxSizing:"border-box"},display:c?"block":"none"},children:s.jsxs("div",{className:t.sideMenu,children:[s.jsx("div",{className:t.logo,children:s.jsx(f,{href:b,style:{textDecoration:"none"},onClick:e=>r(e),children:s.jsx(v,{src:p,alt:"logo",width:202,height:56,className:t.logoImage,priority:!0})})}),s.jsx("div",{className:t.menus,children:x.map(e=>e.isTitle?s.jsx("div",{className:t.menuTitle,children:e.label},e.label):s.jsx(f,{href:e.href??"",style:{textDecoration:"none"},role:"menuitem","aria-current":u===e.href?"page":void 0,children:s.jsxs("div",{onClick:o=>r(o),className:I(t.menuItem,{[t.selected]:u===e.href}),tabIndex:0,onKeyDown:o=>{(o.key==="Enter"||o.key===" ")&&r(o)},children:[e.icon,s.jsx("div",{children:e.label})]})},e.label))})]})})};exports.SideMenu=h;exports.default=h;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../../assets/index4.css');const s=require("react/jsx-runtime"),h=require("react"),y=require("next/image"),m=require("next/link"),I=require("@mui/material"),k=require("classnames"),M="_sideMenu_i4h48_1",S="_logo_i4h48_7",D="_logoImage_i4h48_12",N="_menus_i4h48_16",T="_menuTitle_i4h48_23",q="_menuItem_i4h48_31",w="_selected_i4h48_45",t={sideMenu:M,logo:S,logoImage:D,menus:N,menuTitle:T,menuItem:q,selected:w},_=235,g=f=>{const{isOpen:c,isMobile:n,onClose:a,menus:x,logoSrc:p,topPageUrl:b="/",isStorybook:j=!1,currentPath:o}=f,d=(o==null?void 0:o.split("/")[1])??null,l=d===""?"/":"/"+d,[u,v]=h.useState(l);h.useEffect(()=>{v(l)},[l,o]);const r=e=>{n&&a(),j&&e.preventDefault()};return s.jsx(I.Drawer,{variant:n?"temporary":"permanent",open:n?c:void 0,onClose:a,sx:{width:_,flexShrink:0,"& .MuiDrawer-paper":{width:_,boxSizing:"border-box"},display:c?"block":"none"},children:s.jsxs("div",{className:t.sideMenu,children:[s.jsx("div",{className:t.logo,children:s.jsx(m,{href:b,style:{textDecoration:"none"},onClick:e=>r(e),children:s.jsx(y,{src:p,alt:"logo",width:202,height:56,className:t.logoImage,priority:!0})})}),s.jsx("div",{className:t.menus,children:x.map(e=>e.isTitle?s.jsx("div",{className:t.menuTitle,children:e.label},e.label):s.jsx(m,{href:e.href??"",style:{textDecoration:"none"},role:"menuitem","aria-current":u===e.href?"page":void 0,children:s.jsxs("div",{onClick:i=>r(i),className:k(t.menuItem,{[t.selected]:u===e.href}),tabIndex:0,onKeyDown:i=>{(i.key==="Enter"||i.key===" ")&&r(i)},children:[e.icon,s.jsx("div",{children:e.label})]})},e.label))})]})})};exports.SideMenu=g;exports.default=g;
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/SideMenu/index.es.js

@@ -1,21 +1,21 @@
-import { jsx as o, jsxs as f } from "react/jsx-runtime";
+import { jsx as o, jsxs as h } from "react/jsx-runtime";
 import { useState as v, useEffect as x } from "react";
 import y from "next/image";
-import h from "next/link";
+import f from "next/link";
 import { Drawer as D } from "@mui/material";
-import q from "classnames";
-import '../../assets/index4.css';const M = "_sideMenu_1qefs_1", N = "_logo_1qefs_7", S = "_logoImage_1qefs_12", w = "_menus_1qefs_16", T = "_menuTitle_1qefs_23", C = "_menuItem_1qefs_31", E = "_selected_1qefs_45", s = {
-  sideMenu: M,
-  logo: N,
-  logoImage: S,
-  menus: w,
-  menuTitle: T,
-  menuItem: C,
-  selected: E
-}, _ = 235, A = (p) => {
+import M from "classnames";
+import '../../assets/index4.css';const N = "_sideMenu_i4h48_1", S = "_logo_i4h48_7", w = "_logoImage_i4h48_12", T = "_menus_i4h48_16", C = "_menuTitle_i4h48_23", E = "_menuItem_i4h48_31", H = "_selected_i4h48_45", i = {
+  sideMenu: N,
+  logo: S,
+  logoImage: w,
+  menus: T,
+  menuTitle: C,
+  menuItem: E,
+  selected: H
+}, _ = 235, K = (p) => {
   const {
     isOpen: c,
-    isMobile: i,
+    isMobile: s,
     onClose: a,
     menus: g,
     logoSrc: u,
@@ -27,13 +27,13 @@ import '../../assets/index4.css';const M = "_sideMenu_1qefs_1", N = "_logo_1qefs
     k(n);
   }, [n, l]);
   const r = (e) => {
-    i && a(), I && e.preventDefault();
+    s && a(), I && e.preventDefault();
   };
   return /* @__PURE__ */ o(
     D,
     {
-      variant: i ? "temporary" : "permanent",
-      open: i ? c : void 0,
+      variant: s ? "temporary" : "permanent",
+      open: s ? c : void 0,
       onClose: a,
       sx: {
         width: _,
@@ -44,9 +44,9 @@ import '../../assets/index4.css';const M = "_sideMenu_1qefs_1", N = "_logo_1qefs
         },
         display: c ? "block" : "none"
       },
-      children: /* @__PURE__ */ f("div", { className: s.sideMenu, children: [
-        /* @__PURE__ */ o("div", { className: s.logo, children: /* @__PURE__ */ o(
-          h,
+      children: /* @__PURE__ */ h("div", { className: i.sideMenu, children: [
+        /* @__PURE__ */ o("div", { className: i.logo, children: /* @__PURE__ */ o(
+          f,
           {
             href: b,
             style: { textDecoration: "none" },
@@ -58,26 +58,26 @@ import '../../assets/index4.css';const M = "_sideMenu_1qefs_1", N = "_logo_1qefs
                 alt: "logo",
                 width: 202,
                 height: 56,
-                className: s.logoImage,
+                className: i.logoImage,
                 priority: !0
               }
             )
           }
         ) }),
-        /* @__PURE__ */ o("div", { className: s.menus, children: g.map(
-          (e) => e.isTitle ? /* @__PURE__ */ o("div", { className: s.menuTitle, children: e.label }, e.label) : /* @__PURE__ */ o(
-            h,
+        /* @__PURE__ */ o("div", { className: i.menus, children: g.map(
+          (e) => e.isTitle ? /* @__PURE__ */ o("div", { className: i.menuTitle, children: e.label }, e.label) : /* @__PURE__ */ o(
+            f,
             {
               href: e.href ?? "",
               style: { textDecoration: "none" },
               role: "menuitem",
               "aria-current": d === e.href ? "page" : void 0,
-              children: /* @__PURE__ */ f(
+              children: /* @__PURE__ */ h(
                 "div",
                 {
                   onClick: (t) => r(t),
-                  className: q(s.menuItem, {
-                    [s.selected]: d === e.href
+                  className: M(i.menuItem, {
+                    [i.selected]: d === e.href
                   }),
                   tabIndex: 0,
                   onKeyDown: (t) => {
@@ -98,7 +98,7 @@ import '../../assets/index4.css';const M = "_sideMenu_1qefs_1", N = "_logo_1qefs
   );
 };
 export {
-  A as SideMenu,
-  A as default
+  K as SideMenu,
+  K as default
 };
 //# sourceMappingURL=index.es.js.map

package/dist/components/SubMenu/index.test.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const n=require("react/jsx-runtime"),e=require("../../react.esm-DGuy6Rn3.cjs"),x=require("./index.cjs.js");describe("SubMenu component",()=>{test("renders SubMenu component with given menu items and button element",()=>{const c=jest.fn(),o=jest.fn(),u=jest.fn(),s=[{icon:n.jsx("span",{children:"Icon 1"}),title:"Menu 1",onClick:c,closeWhenClick:!0},{icon:n.jsx("span",{children:"Icon 2"}),title:"Menu 2",onClick:o},{icon:n.jsx("span",{children:"Icon 3"}),title:"Menu 3",onClick:u,closeWhenClick:!1}],i=n.jsx("button",{children:"Menu Button"});e.render(n.jsx(x.SubMenu,{menuItems:s,buttonElement:i}));const t=e.screen.getByText("Menu Button");e.fireEvent.click(t);const l=e.screen.getByText("Menu 1");e.fireEvent.click(l),expect(c).toHaveBeenCalled(),setTimeout(()=>{expect(e.screen.queryByText("Menu 1")).toBeNull()},0),e.fireEvent.click(t);const r=e.screen.getByText("Menu 2");e.fireEvent.click(r),expect(o).toHaveBeenCalled(),setTimeout(()=>{expect(e.screen.queryByText("Menu 2")).toBeNull()},0),e.fireEvent.click(t);const m=e.screen.getByText("Menu 3");e.fireEvent.click(m),expect(u).toHaveBeenCalled(),setTimeout(()=>{expect(e.screen.queryByText("Menu 3")).not.toBeNull()},0)})});
+"use strict";const n=require("react/jsx-runtime"),e=require("../../react.esm-DGuy6Rn3.cjs"),x=require("./index.cjs.js");describe("SubMenu component",()=>{test("renders SubMenu component with given menu items and button element",()=>{const c=jest.fn(),o=jest.fn(),s=jest.fn(),u=[{icon:n.jsx("span",{children:"Icon 1"}),title:"Menu 1",onClick:c,closeWhenClick:!0},{icon:n.jsx("span",{children:"Icon 2"}),title:"Menu 2",onClick:o},{icon:n.jsx("span",{children:"Icon 3"}),title:"Menu 3",onClick:s,closeWhenClick:!1}],i=n.jsx("span",{children:"Menu Button"});e.render(n.jsx(x.SubMenu,{menuItems:u,buttonElement:i}));const t=e.screen.getByText("Menu Button");e.fireEvent.click(t);const l=e.screen.getByText("Menu 1");e.fireEvent.click(l),expect(c).toHaveBeenCalled(),setTimeout(()=>{expect(e.screen.queryByText("Menu 1")).toBeNull()},0),e.fireEvent.click(t);const r=e.screen.getByText("Menu 2");e.fireEvent.click(r),expect(o).toHaveBeenCalled(),setTimeout(()=>{expect(e.screen.queryByText("Menu 2")).toBeNull()},0),e.fireEvent.click(t);const m=e.screen.getByText("Menu 3");e.fireEvent.click(m),expect(s).toHaveBeenCalled(),setTimeout(()=>{expect(e.screen.queryByText("Menu 3")).not.toBeNull()},0)})});
 //# sourceMappingURL=index.test.cjs.js.map

package/dist/components/SubMenu/index.test.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.test.cjs.js","sources":["../../../src/components/SubMenu/index.test.tsx"],"sourcesContent":["import { fireEvent, render, screen } from \"@testing-library/react\";\n\nimport { SubMenu } from \".\";\n\ndescribe(\"SubMenu component\", () => {\n  test(\"renders SubMenu component with given menu items and button element\", () => {\n    const mockOnClickMenu1 = jest.fn();\n    const mockOnClickMenu2 = jest.fn();\n    const mockOnClickMenu3 = jest.fn();\n\n    const menuItems = [\n      {\n        icon: <span>Icon 1</span>,\n        title: \"Menu 1\",\n        onClick: mockOnClickMenu1,\n        closeWhenClick: true,\n      },\n      {\n        icon: <span>Icon 2</span>,\n        title: \"Menu 2\",\n        onClick: mockOnClickMenu2,\n      },\n      {\n        icon: <span>Icon 3</span>,\n        title: \"Menu 3\",\n        onClick: mockOnClickMenu3,\n        closeWhenClick: false,\n      },\n    ];\n\n    const buttonElement = <button>Menu Button</button>;\n\n    render(<SubMenu menuItems={menuItems} buttonElement={buttonElement} />);\n\n    // Menu 1のテスト menuクリック時消えていること\n    const button = screen.getByText(\"Menu Button\");\n    fireEvent.click(button);\n    const menuItem1 = screen.getByText(\"Menu 1\");\n    fireEvent.click(menuItem1);\n    expect(mockOnClickMenu1).toHaveBeenCalled();\n    setTimeout(() => {\n      expect(screen.queryByText(\"Menu 1\")).toBeNull();\n    }, 0);\n\n    // Menu 2のテスト menuクリック時消えていること\n    fireEvent.click(button);\n    const menuItem2 = screen.getByText(\"Menu 2\");\n    fireEvent.click(menuItem2);\n    expect(mockOnClickMenu2).toHaveBeenCalled();\n    setTimeout(() => {\n      expect(screen.queryByText(\"Menu 2\")).toBeNull();\n    }, 0);\n\n    // Menu 3のテスト menuクリック時消えていないこと\n    fireEvent.click(button);\n    const menuItem3 = screen.getByText(\"Menu 3\");\n    fireEvent.click(menuItem3);\n    expect(mockOnClickMenu3).toHaveBeenCalled();\n    setTimeout(() => {\n      expect(screen.queryByText(\"Menu 3\")).not.toBeNull();\n    }, 0);\n  });\n});\n"],"names":["mockOnClickMenu1","mockOnClickMenu2","mockOnClickMenu3","menuItems","jsx","buttonElement","render","SubMenu","button","screen","fireEvent","menuItem1","menuItem2","menuItem3"],"mappings":"wHAIA,SAAS,oBAAqB,IAAM,CAClC,KAAK,qEAAsE,IAAM,CAC/E,MAAMA,EAAmB,KAAK,GAAA,EACxBC,EAAmB,KAAK,GAAA,EACxBC,EAAmB,KAAK,GAAA,EAExBC,EAAY,CAChB,CACE,KAAMC,EAAAA,IAAC,OAAA,CAAK,SAAA,QAAA,CAAM,EAClB,MAAO,SACP,QAASJ,EACT,eAAgB,EAAA,EAElB,CACE,KAAMI,EAAAA,IAAC,OAAA,CAAK,SAAA,QAAA,CAAM,EAClB,MAAO,SACP,QAASH,CAAA,EAEX,CACE,KAAMG,EAAAA,IAAC,OAAA,CAAK,SAAA,QAAA,CAAM,EAClB,MAAO,SACP,QAASF,EACT,eAAgB,EAAA,CAClB,EAGIG,EAAgBD,EAAAA,IAAC,SAAA,CAAO,SAAA,aAAA,CAAW,EAEzCE,EAAAA,OAAOF,EAAAA,IAACG,EAAAA,QAAA,CAAQ,UAAAJ,EAAsB,cAAAE,CAAA,CAA8B,CAAE,EAGtE,MAAMG,EAASC,EAAAA,OAAO,UAAU,aAAa,EAC7CC,EAAAA,UAAU,MAAMF,CAAM,EACtB,MAAMG,EAAYF,EAAAA,OAAO,UAAU,QAAQ,EAC3CC,EAAAA,UAAU,MAAMC,CAAS,EACzB,OAAOX,CAAgB,EAAE,iBAAA,EACzB,WAAW,IAAM,CACf,OAAOS,EAAAA,OAAO,YAAY,QAAQ,CAAC,EAAE,SAAA,CACvC,EAAG,CAAC,EAGJC,EAAAA,UAAU,MAAMF,CAAM,EACtB,MAAMI,EAAYH,EAAAA,OAAO,UAAU,QAAQ,EAC3CC,EAAAA,UAAU,MAAME,CAAS,EACzB,OAAOX,CAAgB,EAAE,iBAAA,EACzB,WAAW,IAAM,CACf,OAAOQ,EAAAA,OAAO,YAAY,QAAQ,CAAC,EAAE,SAAA,CACvC,EAAG,CAAC,EAGJC,EAAAA,UAAU,MAAMF,CAAM,EACtB,MAAMK,EAAYJ,EAAAA,OAAO,UAAU,QAAQ,EAC3CC,EAAAA,UAAU,MAAMG,CAAS,EACzB,OAAOX,CAAgB,EAAE,iBAAA,EACzB,WAAW,IAAM,CACf,OAAOO,EAAAA,OAAO,YAAY,QAAQ,CAAC,EAAE,IAAI,SAAA,CAC3C,EAAG,CAAC,CACN,CAAC,CACH,CAAC"}
+{"version":3,"file":"index.test.cjs.js","sources":["../../../src/components/SubMenu/index.test.tsx"],"sourcesContent":["import { fireEvent, render, screen } from \"@testing-library/react\";\n\nimport { SubMenu } from \".\";\n\ndescribe(\"SubMenu component\", () => {\n  test(\"renders SubMenu component with given menu items and button element\", () => {\n    const mockOnClickMenu1 = jest.fn();\n    const mockOnClickMenu2 = jest.fn();\n    const mockOnClickMenu3 = jest.fn();\n\n    const menuItems = [\n      {\n        icon: <span>Icon 1</span>,\n        title: \"Menu 1\",\n        onClick: mockOnClickMenu1,\n        closeWhenClick: true,\n      },\n      {\n        icon: <span>Icon 2</span>,\n        title: \"Menu 2\",\n        onClick: mockOnClickMenu2,\n      },\n      {\n        icon: <span>Icon 3</span>,\n        title: \"Menu 3\",\n        onClick: mockOnClickMenu3,\n        closeWhenClick: false,\n      },\n    ];\n\n    const buttonElement = <span>Menu Button</span>;\n\n    render(<SubMenu menuItems={menuItems} buttonElement={buttonElement} />);\n\n    // Menu 1のテスト menuクリック時消えていること\n    const button = screen.getByText(\"Menu Button\");\n    fireEvent.click(button);\n    const menuItem1 = screen.getByText(\"Menu 1\");\n    fireEvent.click(menuItem1);\n    expect(mockOnClickMenu1).toHaveBeenCalled();\n    setTimeout(() => {\n      expect(screen.queryByText(\"Menu 1\")).toBeNull();\n    }, 0);\n\n    // Menu 2のテスト menuクリック時消えていること\n    fireEvent.click(button);\n    const menuItem2 = screen.getByText(\"Menu 2\");\n    fireEvent.click(menuItem2);\n    expect(mockOnClickMenu2).toHaveBeenCalled();\n    setTimeout(() => {\n      expect(screen.queryByText(\"Menu 2\")).toBeNull();\n    }, 0);\n\n    // Menu 3のテスト menuクリック時消えていないこと\n    fireEvent.click(button);\n    const menuItem3 = screen.getByText(\"Menu 3\");\n    fireEvent.click(menuItem3);\n    expect(mockOnClickMenu3).toHaveBeenCalled();\n    setTimeout(() => {\n      expect(screen.queryByText(\"Menu 3\")).not.toBeNull();\n    }, 0);\n  });\n});\n"],"names":["mockOnClickMenu1","mockOnClickMenu2","mockOnClickMenu3","menuItems","jsx","buttonElement","render","SubMenu","button","screen","fireEvent","menuItem1","menuItem2","menuItem3"],"mappings":"wHAIA,SAAS,oBAAqB,IAAM,CAClC,KAAK,qEAAsE,IAAM,CAC/E,MAAMA,EAAmB,KAAK,GAAA,EACxBC,EAAmB,KAAK,GAAA,EACxBC,EAAmB,KAAK,GAAA,EAExBC,EAAY,CAChB,CACE,KAAMC,EAAAA,IAAC,OAAA,CAAK,SAAA,QAAA,CAAM,EAClB,MAAO,SACP,QAASJ,EACT,eAAgB,EAAA,EAElB,CACE,KAAMI,EAAAA,IAAC,OAAA,CAAK,SAAA,QAAA,CAAM,EAClB,MAAO,SACP,QAASH,CAAA,EAEX,CACE,KAAMG,EAAAA,IAAC,OAAA,CAAK,SAAA,QAAA,CAAM,EAClB,MAAO,SACP,QAASF,EACT,eAAgB,EAAA,CAClB,EAGIG,EAAgBD,EAAAA,IAAC,OAAA,CAAK,SAAA,aAAA,CAAW,EAEvCE,EAAAA,OAAOF,EAAAA,IAACG,EAAAA,QAAA,CAAQ,UAAAJ,EAAsB,cAAAE,CAAA,CAA8B,CAAE,EAGtE,MAAMG,EAASC,EAAAA,OAAO,UAAU,aAAa,EAC7CC,EAAAA,UAAU,MAAMF,CAAM,EACtB,MAAMG,EAAYF,EAAAA,OAAO,UAAU,QAAQ,EAC3CC,EAAAA,UAAU,MAAMC,CAAS,EACzB,OAAOX,CAAgB,EAAE,iBAAA,EACzB,WAAW,IAAM,CACf,OAAOS,EAAAA,OAAO,YAAY,QAAQ,CAAC,EAAE,SAAA,CACvC,EAAG,CAAC,EAGJC,EAAAA,UAAU,MAAMF,CAAM,EACtB,MAAMI,EAAYH,EAAAA,OAAO,UAAU,QAAQ,EAC3CC,EAAAA,UAAU,MAAME,CAAS,EACzB,OAAOX,CAAgB,EAAE,iBAAA,EACzB,WAAW,IAAM,CACf,OAAOQ,EAAAA,OAAO,YAAY,QAAQ,CAAC,EAAE,SAAA,CACvC,EAAG,CAAC,EAGJC,EAAAA,UAAU,MAAMF,CAAM,EACtB,MAAMK,EAAYJ,EAAAA,OAAO,UAAU,QAAQ,EAC3CC,EAAAA,UAAU,MAAMG,CAAS,EACzB,OAAOX,CAAgB,EAAE,iBAAA,EACzB,WAAW,IAAM,CACf,OAAOO,EAAAA,OAAO,YAAY,QAAQ,CAAC,EAAE,IAAI,SAAA,CAC3C,EAAG,CAAC,CACN,CAAC,CACH,CAAC"}

package/dist/components/SubMenu/index.test.es.js

@@ -1,40 +1,40 @@
-import { jsx as n } from "react/jsx-runtime";
-import { r, s as e, f as t } from "../../react.esm-BBESb8eI.js";
+import { jsx as t } from "react/jsx-runtime";
+import { r, s as e, f as n } from "../../react.esm-BBESb8eI.js";
 import { SubMenu as k } from "./index.es.js";
 describe("SubMenu component", () => {
   test("renders SubMenu component with given menu items and button element", () => {
     const o = jest.fn(), u = jest.fn(), l = jest.fn();
-    r(/* @__PURE__ */ n(k, { menuItems: [
+    r(/* @__PURE__ */ t(k, { menuItems: [
       {
-        icon: /* @__PURE__ */ n("span", { children: "Icon 1" }),
+        icon: /* @__PURE__ */ t("span", { children: "Icon 1" }),
         title: "Menu 1",
         onClick: o,
         closeWhenClick: !0
       },
       {
-        icon: /* @__PURE__ */ n("span", { children: "Icon 2" }),
+        icon: /* @__PURE__ */ t("span", { children: "Icon 2" }),
         title: "Menu 2",
         onClick: u
       },
       {
-        icon: /* @__PURE__ */ n("span", { children: "Icon 3" }),
+        icon: /* @__PURE__ */ t("span", { children: "Icon 3" }),
         title: "Menu 3",
         onClick: l,
         closeWhenClick: !1
       }
-    ], buttonElement: /* @__PURE__ */ n("button", { children: "Menu Button" }) }));
+    ], buttonElement: /* @__PURE__ */ t("span", { children: "Menu Button" }) }));
     const c = e.getByText("Menu Button");
-    t.click(c);
+    n.click(c);
     const i = e.getByText("Menu 1");
-    t.click(i), expect(o).toHaveBeenCalled(), setTimeout(() => {
+    n.click(i), expect(o).toHaveBeenCalled(), setTimeout(() => {
       expect(e.queryByText("Menu 1")).toBeNull();
-    }, 0), t.click(c);
+    }, 0), n.click(c);
     const s = e.getByText("Menu 2");
-    t.click(s), expect(u).toHaveBeenCalled(), setTimeout(() => {
+    n.click(s), expect(u).toHaveBeenCalled(), setTimeout(() => {
       expect(e.queryByText("Menu 2")).toBeNull();
-    }, 0), t.click(c);
+    }, 0), n.click(c);
     const m = e.getByText("Menu 3");
-    t.click(m), expect(l).toHaveBeenCalled(), setTimeout(() => {
+    n.click(m), expect(l).toHaveBeenCalled(), setTimeout(() => {
       expect(e.queryByText("Menu 3")).not.toBeNull();
     }, 0);
   });

package/dist/components/SubMenu/index.test.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.test.es.js","sources":["../../../src/components/SubMenu/index.test.tsx"],"sourcesContent":["import { fireEvent, render, screen } from \"@testing-library/react\";\n\nimport { SubMenu } from \".\";\n\ndescribe(\"SubMenu component\", () => {\n  test(\"renders SubMenu component with given menu items and button element\", () => {\n    const mockOnClickMenu1 = jest.fn();\n    const mockOnClickMenu2 = jest.fn();\n    const mockOnClickMenu3 = jest.fn();\n\n    const menuItems = [\n      {\n        icon: <span>Icon 1</span>,\n        title: \"Menu 1\",\n        onClick: mockOnClickMenu1,\n        closeWhenClick: true,\n      },\n      {\n        icon: <span>Icon 2</span>,\n        title: \"Menu 2\",\n        onClick: mockOnClickMenu2,\n      },\n      {\n        icon: <span>Icon 3</span>,\n        title: \"Menu 3\",\n        onClick: mockOnClickMenu3,\n        closeWhenClick: false,\n      },\n    ];\n\n    const buttonElement = <button>Menu Button</button>;\n\n    render(<SubMenu menuItems={menuItems} buttonElement={buttonElement} />);\n\n    // Menu 1のテスト menuクリック時消えていること\n    const button = screen.getByText(\"Menu Button\");\n    fireEvent.click(button);\n    const menuItem1 = screen.getByText(\"Menu 1\");\n    fireEvent.click(menuItem1);\n    expect(mockOnClickMenu1).toHaveBeenCalled();\n    setTimeout(() => {\n      expect(screen.queryByText(\"Menu 1\")).toBeNull();\n    }, 0);\n\n    // Menu 2のテスト menuクリック時消えていること\n    fireEvent.click(button);\n    const menuItem2 = screen.getByText(\"Menu 2\");\n    fireEvent.click(menuItem2);\n    expect(mockOnClickMenu2).toHaveBeenCalled();\n    setTimeout(() => {\n      expect(screen.queryByText(\"Menu 2\")).toBeNull();\n    }, 0);\n\n    // Menu 3のテスト menuクリック時消えていないこと\n    fireEvent.click(button);\n    const menuItem3 = screen.getByText(\"Menu 3\");\n    fireEvent.click(menuItem3);\n    expect(mockOnClickMenu3).toHaveBeenCalled();\n    setTimeout(() => {\n      expect(screen.queryByText(\"Menu 3\")).not.toBeNull();\n    }, 0);\n  });\n});\n"],"names":["mockOnClickMenu1","mockOnClickMenu2","mockOnClickMenu3","render","jsx","SubMenu","button","screen","fireEvent","menuItem1","menuItem2","menuItem3"],"mappings":";;;AAIA,SAAS,qBAAqB,MAAM;AAClC,OAAK,sEAAsE,MAAM;AAC/E,UAAMA,IAAmB,KAAK,GAAA,GACxBC,IAAmB,KAAK,GAAA,GACxBC,IAAmB,KAAK,GAAA;AAwB9B,IAAAC,EAAO,gBAAAC,EAACC,GAAA,EAAQ,WAtBE;AAAA,MAChB;AAAA,QACE,MAAM,gBAAAD,EAAC,QAAA,EAAK,UAAA,SAAA,CAAM;AAAA,QAClB,OAAO;AAAA,QACP,SAASJ;AAAA,QACT,gBAAgB;AAAA,MAAA;AAAA,MAElB;AAAA,QACE,MAAM,gBAAAI,EAAC,QAAA,EAAK,UAAA,SAAA,CAAM;AAAA,QAClB,OAAO;AAAA,QACP,SAASH;AAAA,MAAA;AAAA,MAEX;AAAA,QACE,MAAM,gBAAAG,EAAC,QAAA,EAAK,UAAA,SAAA,CAAM;AAAA,QAClB,OAAO;AAAA,QACP,SAASF;AAAA,QACT,gBAAgB;AAAA,MAAA;AAAA,IAClB,GAKoC,eAFhB,gBAAAE,EAAC,UAAA,EAAO,UAAA,cAAA,CAAW,EAEH,CAA8B,CAAE;AAGtE,UAAME,IAASC,EAAO,UAAU,aAAa;AAC7C,IAAAC,EAAU,MAAMF,CAAM;AACtB,UAAMG,IAAYF,EAAO,UAAU,QAAQ;AAC3C,IAAAC,EAAU,MAAMC,CAAS,GACzB,OAAOT,CAAgB,EAAE,iBAAA,GACzB,WAAW,MAAM;AACf,aAAOO,EAAO,YAAY,QAAQ,CAAC,EAAE,SAAA;AAAA,IACvC,GAAG,CAAC,GAGJC,EAAU,MAAMF,CAAM;AACtB,UAAMI,IAAYH,EAAO,UAAU,QAAQ;AAC3C,IAAAC,EAAU,MAAME,CAAS,GACzB,OAAOT,CAAgB,EAAE,iBAAA,GACzB,WAAW,MAAM;AACf,aAAOM,EAAO,YAAY,QAAQ,CAAC,EAAE,SAAA;AAAA,IACvC,GAAG,CAAC,GAGJC,EAAU,MAAMF,CAAM;AACtB,UAAMK,IAAYJ,EAAO,UAAU,QAAQ;AAC3C,IAAAC,EAAU,MAAMG,CAAS,GACzB,OAAOT,CAAgB,EAAE,iBAAA,GACzB,WAAW,MAAM;AACf,aAAOK,EAAO,YAAY,QAAQ,CAAC,EAAE,IAAI,SAAA;AAAA,IAC3C,GAAG,CAAC;AAAA,EACN,CAAC;AACH,CAAC;"}
+{"version":3,"file":"index.test.es.js","sources":["../../../src/components/SubMenu/index.test.tsx"],"sourcesContent":["import { fireEvent, render, screen } from \"@testing-library/react\";\n\nimport { SubMenu } from \".\";\n\ndescribe(\"SubMenu component\", () => {\n  test(\"renders SubMenu component with given menu items and button element\", () => {\n    const mockOnClickMenu1 = jest.fn();\n    const mockOnClickMenu2 = jest.fn();\n    const mockOnClickMenu3 = jest.fn();\n\n    const menuItems = [\n      {\n        icon: <span>Icon 1</span>,\n        title: \"Menu 1\",\n        onClick: mockOnClickMenu1,\n        closeWhenClick: true,\n      },\n      {\n        icon: <span>Icon 2</span>,\n        title: \"Menu 2\",\n        onClick: mockOnClickMenu2,\n      },\n      {\n        icon: <span>Icon 3</span>,\n        title: \"Menu 3\",\n        onClick: mockOnClickMenu3,\n        closeWhenClick: false,\n      },\n    ];\n\n    const buttonElement = <span>Menu Button</span>;\n\n    render(<SubMenu menuItems={menuItems} buttonElement={buttonElement} />);\n\n    // Menu 1のテスト menuクリック時消えていること\n    const button = screen.getByText(\"Menu Button\");\n    fireEvent.click(button);\n    const menuItem1 = screen.getByText(\"Menu 1\");\n    fireEvent.click(menuItem1);\n    expect(mockOnClickMenu1).toHaveBeenCalled();\n    setTimeout(() => {\n      expect(screen.queryByText(\"Menu 1\")).toBeNull();\n    }, 0);\n\n    // Menu 2のテスト menuクリック時消えていること\n    fireEvent.click(button);\n    const menuItem2 = screen.getByText(\"Menu 2\");\n    fireEvent.click(menuItem2);\n    expect(mockOnClickMenu2).toHaveBeenCalled();\n    setTimeout(() => {\n      expect(screen.queryByText(\"Menu 2\")).toBeNull();\n    }, 0);\n\n    // Menu 3のテスト menuクリック時消えていないこと\n    fireEvent.click(button);\n    const menuItem3 = screen.getByText(\"Menu 3\");\n    fireEvent.click(menuItem3);\n    expect(mockOnClickMenu3).toHaveBeenCalled();\n    setTimeout(() => {\n      expect(screen.queryByText(\"Menu 3\")).not.toBeNull();\n    }, 0);\n  });\n});\n"],"names":["mockOnClickMenu1","mockOnClickMenu2","mockOnClickMenu3","render","jsx","SubMenu","button","screen","fireEvent","menuItem1","menuItem2","menuItem3"],"mappings":";;;AAIA,SAAS,qBAAqB,MAAM;AAClC,OAAK,sEAAsE,MAAM;AAC/E,UAAMA,IAAmB,KAAK,GAAA,GACxBC,IAAmB,KAAK,GAAA,GACxBC,IAAmB,KAAK,GAAA;AAwB9B,IAAAC,EAAO,gBAAAC,EAACC,GAAA,EAAQ,WAtBE;AAAA,MAChB;AAAA,QACE,MAAM,gBAAAD,EAAC,QAAA,EAAK,UAAA,SAAA,CAAM;AAAA,QAClB,OAAO;AAAA,QACP,SAASJ;AAAA,QACT,gBAAgB;AAAA,MAAA;AAAA,MAElB;AAAA,QACE,MAAM,gBAAAI,EAAC,QAAA,EAAK,UAAA,SAAA,CAAM;AAAA,QAClB,OAAO;AAAA,QACP,SAASH;AAAA,MAAA;AAAA,MAEX;AAAA,QACE,MAAM,gBAAAG,EAAC,QAAA,EAAK,UAAA,SAAA,CAAM;AAAA,QAClB,OAAO;AAAA,QACP,SAASF;AAAA,QACT,gBAAgB;AAAA,MAAA;AAAA,IAClB,GAKoC,eAFhB,gBAAAE,EAAC,QAAA,EAAK,UAAA,cAAA,CAAW,EAED,CAA8B,CAAE;AAGtE,UAAME,IAASC,EAAO,UAAU,aAAa;AAC7C,IAAAC,EAAU,MAAMF,CAAM;AACtB,UAAMG,IAAYF,EAAO,UAAU,QAAQ;AAC3C,IAAAC,EAAU,MAAMC,CAAS,GACzB,OAAOT,CAAgB,EAAE,iBAAA,GACzB,WAAW,MAAM;AACf,aAAOO,EAAO,YAAY,QAAQ,CAAC,EAAE,SAAA;AAAA,IACvC,GAAG,CAAC,GAGJC,EAAU,MAAMF,CAAM;AACtB,UAAMI,IAAYH,EAAO,UAAU,QAAQ;AAC3C,IAAAC,EAAU,MAAME,CAAS,GACzB,OAAOT,CAAgB,EAAE,iBAAA,GACzB,WAAW,MAAM;AACf,aAAOM,EAAO,YAAY,QAAQ,CAAC,EAAE,SAAA;AAAA,IACvC,GAAG,CAAC,GAGJC,EAAU,MAAMF,CAAM;AACtB,UAAMK,IAAYJ,EAAO,UAAU,QAAQ;AAC3C,IAAAC,EAAU,MAAMG,CAAS,GACzB,OAAOT,CAAgB,EAAE,iBAAA,GACzB,WAAW,MAAM;AACf,aAAOK,EAAO,YAAY,QAAQ,CAAC,EAAE,IAAI,SAAA;AAAA,IAC3C,GAAG,CAAC;AAAA,EACN,CAAC;AACH,CAAC;"}