@jigowatts/jigowatts-ui 2.2.0 → 2.3.0

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":"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"}
+{"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/Tabs/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),s=require("@mui/material"),i=s.styled(e=>a.jsx(s.Tabs,{...e,"aria-label":"wrapped tabs",TabIndicatorProps:{children:a.jsx("span",{className:"MuiTabs-indicatorSpan"})}}))({"& .MuiTabs-indicator":{display:"flex",justifyContent:"center",backgroundColor:"transparent"},"& .MuiTabs-indicatorSpan":{width:"100%",backgroundColor:"#6672e8"}}),c=s.styled(e=>a.jsx(s.Tab,{...e,iconPosition:"start"}))(({})=>({"&.Mui-selected":{color:"#000",fontWeight:"800"}})),n=e=>{const{items:l,value:o,handleChange:r}=e;return a.jsx(s.Box,{sx:{width:"100%"},children:a.jsx(i,{value:o,onChange:r,"aria-label":"wrapped tabs",children:l.map(t=>a.jsx(c,{icon:t.icon,label:t.label,value:t.value},t.value))})})};exports.Tabs=n;exports.default=n;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),t=require("@mui/material"),i=t.styled(e=>a.jsx(t.Tabs,{...e,"aria-label":"wrapped tabs",TabIndicatorProps:{children:a.jsx("span",{className:"MuiTabs-indicatorSpan"})}}))({"& .MuiTabs-indicator":{display:"flex",justifyContent:"center",backgroundColor:"transparent"},"& .MuiTabs-indicatorSpan":{width:"100%",backgroundColor:"var(--jigowatts-color-primary, #6672e8)"}}),c=t.styled(e=>a.jsx(t.Tab,{...e,iconPosition:"start"}))(({})=>({"&.Mui-selected":{color:"var(--jigowatts-color-text, #000)",fontWeight:"800"}})),o=e=>{const{items:r,value:l,handleChange:n}=e;return a.jsx(t.Box,{sx:{width:"100%"},children:a.jsx(i,{value:l,onChange:n,"aria-label":"wrapped tabs",children:r.map(s=>a.jsx(c,{icon:s.icon,label:s.label,value:s.value},s.value))})})};exports.Tabs=o;exports.default=o;
 //# sourceMappingURL=index.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../src/components/Tabs/index.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Box, Tabs as MuiTabs, styled, Tab } from \"@mui/material\";\n\ntype TabItem = {\n  /** タブの識別値 */\n  value: string;\n  /** 表示名 */\n  label: string;\n  /** 表示アイコン example:\n   * <PhoneIcon sx={{ fontSize: 20 }} />\n   */\n  icon?: React.ReactElement<unknown>;\n};\n\ntype Props = {\n  /** タブアイテム情報*/\n  items: TabItem[];\n  /** 現在選択中のvalue state管理 */\n  value: string;\n  /** 選択中のTabが変更された時のhandler */\n  handleChange: (event: React.SyntheticEvent, newValue: string) => void;\n};\n\ninterface StyledTabsProps {\n  children?: React.ReactNode;\n  value: string;\n  onChange: (event: React.SyntheticEvent, newValue: string) => void;\n}\n\nconst StyledTabs = styled((props: StyledTabsProps) => (\n  <MuiTabs\n    {...props}\n    aria-label=\"wrapped tabs\"\n    TabIndicatorProps={{ children: <span className=\"MuiTabs-indicatorSpan\" /> }}\n  />\n))({\n  \"& .MuiTabs-indicator\": {\n    display: \"flex\",\n    justifyContent: \"center\",\n    backgroundColor: \"transparent\",\n  },\n  \"& .MuiTabs-indicatorSpan\": {\n    width: \"100%\",\n    backgroundColor: \"#6672e8\",\n  },\n});\n\nconst StyledTab = styled((props: TabItem) => (\n  <Tab {...props} iconPosition=\"start\" />\n))(({}) => ({\n  \"&.Mui-selected\": {\n    color: \"#000\",\n    fontWeight: \"800\",\n  },\n}));\n\nexport const Tabs = (props: Props) => {\n  const { items, value, handleChange } = props;\n\n  return (\n    <Box sx={{ width: \"100%\" }}>\n      <StyledTabs\n        value={value}\n        onChange={handleChange}\n        aria-label=\"wrapped tabs\"\n      >\n        {items.map((item) => (\n          <StyledTab\n            key={item.value}\n            icon={item.icon}\n            label={item.label}\n            value={item.value}\n          />\n        ))}\n      </StyledTabs>\n    </Box>\n  );\n};\n\nexport default Tabs;\n"],"names":["StyledTabs","styled","props","jsx","MuiTabs","StyledTab","Tab","Tabs","items","value","handleChange","Box","item"],"mappings":"4KA6BMA,EAAaC,EAAAA,OAAQC,GACzBC,EAAAA,IAACC,EAAAA,KAAA,CACE,GAAGF,EACJ,aAAW,eACX,kBAAmB,CAAE,eAAW,OAAA,CAAK,UAAU,wBAAwB,CAAA,CAAG,CAC5E,CACD,EAAE,CACD,uBAAwB,CACtB,QAAS,OACT,eAAgB,SAChB,gBAAiB,aAAA,EAEnB,2BAA4B,CAC1B,MAAO,OACP,gBAAiB,SAAA,CAErB,CAAC,EAEKG,EAAYJ,EAAAA,OAAQC,SACvBI,EAAAA,IAAA,CAAK,GAAGJ,EAAO,aAAa,OAAA,CAAQ,CACtC,EAAE,CAAC,CAAA,KAAQ,CACV,iBAAkB,CAChB,MAAO,OACP,WAAY,KAAA,CAEhB,EAAE,EAEWK,EAAQL,GAAiB,CACpC,KAAM,CAAE,MAAAM,EAAO,MAAAC,EAAO,aAAAC,CAAA,EAAiBR,EAEvC,aACGS,EAAAA,IAAA,CAAI,GAAI,CAAE,MAAO,QAChB,SAAAR,EAAAA,IAACH,EAAA,CACC,MAAAS,EACA,SAAUC,EACV,aAAW,eAEV,SAAAF,EAAM,IAAKI,GACVT,EAAAA,IAACE,EAAA,CAEC,KAAMO,EAAK,KACX,MAAOA,EAAK,MACZ,MAAOA,EAAK,KAAA,EAHPA,EAAK,KAAA,CAKb,CAAA,CAAA,EAEL,CAEJ"}
+{"version":3,"file":"index.cjs.js","sources":["../../../src/components/Tabs/index.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Box, Tabs as MuiTabs, styled, Tab } from \"@mui/material\";\n\ntype TabItem = {\n  /** タブの識別値 */\n  value: string;\n  /** 表示名 */\n  label: string;\n  /** 表示アイコン example:\n   * <PhoneIcon sx={{ fontSize: 20 }} />\n   */\n  icon?: React.ReactElement<unknown>;\n};\n\ntype Props = {\n  /** タブアイテム情報*/\n  items: TabItem[];\n  /** 現在選択中のvalue state管理 */\n  value: string;\n  /** 選択中のTabが変更された時のhandler */\n  handleChange: (event: React.SyntheticEvent, newValue: string) => void;\n};\n\ninterface StyledTabsProps {\n  children?: React.ReactNode;\n  value: string;\n  onChange: (event: React.SyntheticEvent, newValue: string) => void;\n}\n\nconst StyledTabs = styled((props: StyledTabsProps) => (\n  <MuiTabs\n    {...props}\n    aria-label=\"wrapped tabs\"\n    TabIndicatorProps={{ children: <span className=\"MuiTabs-indicatorSpan\" /> }}\n  />\n))({\n  \"& .MuiTabs-indicator\": {\n    display: \"flex\",\n    justifyContent: \"center\",\n    backgroundColor: \"transparent\",\n  },\n  \"& .MuiTabs-indicatorSpan\": {\n    width: \"100%\",\n    backgroundColor: \"var(--jigowatts-color-primary, #6672e8)\",\n  },\n});\n\nconst StyledTab = styled((props: TabItem) => (\n  <Tab {...props} iconPosition=\"start\" />\n))(({}) => ({\n  \"&.Mui-selected\": {\n    color: \"var(--jigowatts-color-text, #000)\",\n    fontWeight: \"800\",\n  },\n}));\n\nexport const Tabs = (props: Props) => {\n  const { items, value, handleChange } = props;\n\n  return (\n    <Box sx={{ width: \"100%\" }}>\n      <StyledTabs\n        value={value}\n        onChange={handleChange}\n        aria-label=\"wrapped tabs\"\n      >\n        {items.map((item) => (\n          <StyledTab\n            key={item.value}\n            icon={item.icon}\n            label={item.label}\n            value={item.value}\n          />\n        ))}\n      </StyledTabs>\n    </Box>\n  );\n};\n\nexport default Tabs;\n"],"names":["StyledTabs","styled","props","jsx","MuiTabs","StyledTab","Tab","Tabs","items","value","handleChange","Box","item"],"mappings":"4KA6BMA,EAAaC,EAAAA,OAAQC,GACzBC,EAAAA,IAACC,EAAAA,KAAA,CACE,GAAGF,EACJ,aAAW,eACX,kBAAmB,CAAE,eAAW,OAAA,CAAK,UAAU,wBAAwB,CAAA,CAAG,CAC5E,CACD,EAAE,CACD,uBAAwB,CACtB,QAAS,OACT,eAAgB,SAChB,gBAAiB,aAAA,EAEnB,2BAA4B,CAC1B,MAAO,OACP,gBAAiB,yCAAA,CAErB,CAAC,EAEKG,EAAYJ,EAAAA,OAAQC,SACvBI,EAAAA,IAAA,CAAK,GAAGJ,EAAO,aAAa,OAAA,CAAQ,CACtC,EAAE,CAAC,CAAA,KAAQ,CACV,iBAAkB,CAChB,MAAO,oCACP,WAAY,KAAA,CAEhB,EAAE,EAEWK,EAAQL,GAAiB,CACpC,KAAM,CAAE,MAAAM,EAAO,MAAAC,EAAO,aAAAC,CAAA,EAAiBR,EAEvC,aACGS,EAAAA,IAAA,CAAI,GAAI,CAAE,MAAO,QAChB,SAAAR,EAAAA,IAACH,EAAA,CACC,MAAAS,EACA,SAAUC,EACV,aAAW,eAEV,SAAAF,EAAM,IAAKI,GACVT,EAAAA,IAACE,EAAA,CAEC,KAAMO,EAAK,KACX,MAAOA,EAAK,MACZ,MAAOA,EAAK,KAAA,EAHPA,EAAK,KAAA,CAKb,CAAA,CAAA,EAEL,CAEJ"}

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

@@ -1,9 +1,9 @@
 import { jsx as a } from "react/jsx-runtime";
-import { styled as o, Tabs as l, Tab as i, Box as c } from "@mui/material";
-const d = o((e) => /* @__PURE__ */ a(
-  l,
+import { styled as r, Tabs as i, Tab as l, Box as c } from "@mui/material";
+const d = r((o) => /* @__PURE__ */ a(
+  i,
   {
-    ...e,
+    ...o,
     "aria-label": "wrapped tabs",
     TabIndicatorProps: { children: /* @__PURE__ */ a("span", { className: "MuiTabs-indicatorSpan" }) }
   }
@@ -15,29 +15,29 @@ const d = o((e) => /* @__PURE__ */ a(
   },
   "& .MuiTabs-indicatorSpan": {
     width: "100%",
-    backgroundColor: "#6672e8"
+    backgroundColor: "var(--jigowatts-color-primary, #6672e8)"
   }
-}), b = o((e) => /* @__PURE__ */ a(i, { ...e, iconPosition: "start" }))(({}) => ({
+}), b = r((o) => /* @__PURE__ */ a(l, { ...o, iconPosition: "start" }))(({}) => ({
   "&.Mui-selected": {
-    color: "#000",
+    color: "var(--jigowatts-color-text, #000)",
     fontWeight: "800"
   }
-})), T = (e) => {
-  const { items: t, value: s, handleChange: r } = e;
+})), T = (o) => {
+  const { items: e, value: n, handleChange: s } = o;
   return /* @__PURE__ */ a(c, { sx: { width: "100%" }, children: /* @__PURE__ */ a(
     d,
     {
-      value: s,
-      onChange: r,
+      value: n,
+      onChange: s,
       "aria-label": "wrapped tabs",
-      children: t.map((n) => /* @__PURE__ */ a(
+      children: e.map((t) => /* @__PURE__ */ a(
         b,
         {
-          icon: n.icon,
-          label: n.label,
-          value: n.value
+          icon: t.icon,
+          label: t.label,
+          value: t.value
         },
-        n.value
+        t.value
       ))
     }
   ) });

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

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../../src/components/Tabs/index.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Box, Tabs as MuiTabs, styled, Tab } from \"@mui/material\";\n\ntype TabItem = {\n  /** タブの識別値 */\n  value: string;\n  /** 表示名 */\n  label: string;\n  /** 表示アイコン example:\n   * <PhoneIcon sx={{ fontSize: 20 }} />\n   */\n  icon?: React.ReactElement<unknown>;\n};\n\ntype Props = {\n  /** タブアイテム情報*/\n  items: TabItem[];\n  /** 現在選択中のvalue state管理 */\n  value: string;\n  /** 選択中のTabが変更された時のhandler */\n  handleChange: (event: React.SyntheticEvent, newValue: string) => void;\n};\n\ninterface StyledTabsProps {\n  children?: React.ReactNode;\n  value: string;\n  onChange: (event: React.SyntheticEvent, newValue: string) => void;\n}\n\nconst StyledTabs = styled((props: StyledTabsProps) => (\n  <MuiTabs\n    {...props}\n    aria-label=\"wrapped tabs\"\n    TabIndicatorProps={{ children: <span className=\"MuiTabs-indicatorSpan\" /> }}\n  />\n))({\n  \"& .MuiTabs-indicator\": {\n    display: \"flex\",\n    justifyContent: \"center\",\n    backgroundColor: \"transparent\",\n  },\n  \"& .MuiTabs-indicatorSpan\": {\n    width: \"100%\",\n    backgroundColor: \"#6672e8\",\n  },\n});\n\nconst StyledTab = styled((props: TabItem) => (\n  <Tab {...props} iconPosition=\"start\" />\n))(({}) => ({\n  \"&.Mui-selected\": {\n    color: \"#000\",\n    fontWeight: \"800\",\n  },\n}));\n\nexport const Tabs = (props: Props) => {\n  const { items, value, handleChange } = props;\n\n  return (\n    <Box sx={{ width: \"100%\" }}>\n      <StyledTabs\n        value={value}\n        onChange={handleChange}\n        aria-label=\"wrapped tabs\"\n      >\n        {items.map((item) => (\n          <StyledTab\n            key={item.value}\n            icon={item.icon}\n            label={item.label}\n            value={item.value}\n          />\n        ))}\n      </StyledTabs>\n    </Box>\n  );\n};\n\nexport default Tabs;\n"],"names":["StyledTabs","styled","props","jsx","MuiTabs","StyledTab","Tab","Tabs","items","value","handleChange","Box","item"],"mappings":";;AA6BA,MAAMA,IAAaC,EAAO,CAACC,MACzB,gBAAAC;AAAA,EAACC;AAAAA,EAAA;AAAA,IACE,GAAGF;AAAA,IACJ,cAAW;AAAA,IACX,mBAAmB,EAAE,4BAAW,QAAA,EAAK,WAAU,yBAAwB,EAAA;AAAA,EAAG;AAC5E,CACD,EAAE;AAAA,EACD,wBAAwB;AAAA,IACtB,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,EAAA;AAAA,EAEnB,4BAA4B;AAAA,IAC1B,OAAO;AAAA,IACP,iBAAiB;AAAA,EAAA;AAErB,CAAC,GAEKG,IAAYJ,EAAO,CAACC,wBACvBI,GAAA,EAAK,GAAGJ,GAAO,cAAa,QAAA,CAAQ,CACtC,EAAE,CAAC,CAAA,OAAQ;AAAA,EACV,kBAAkB;AAAA,IAChB,OAAO;AAAA,IACP,YAAY;AAAA,EAAA;AAEhB,EAAE,GAEWK,IAAO,CAACL,MAAiB;AACpC,QAAM,EAAE,OAAAM,GAAO,OAAAC,GAAO,cAAAC,EAAA,IAAiBR;AAEvC,2BACGS,GAAA,EAAI,IAAI,EAAE,OAAO,UAChB,UAAA,gBAAAR;AAAA,IAACH;AAAA,IAAA;AAAA,MACC,OAAAS;AAAA,MACA,UAAUC;AAAA,MACV,cAAW;AAAA,MAEV,UAAAF,EAAM,IAAI,CAACI,MACV,gBAAAT;AAAA,QAACE;AAAA,QAAA;AAAA,UAEC,MAAMO,EAAK;AAAA,UACX,OAAOA,EAAK;AAAA,UACZ,OAAOA,EAAK;AAAA,QAAA;AAAA,QAHPA,EAAK;AAAA,MAAA,CAKb;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;"}
+{"version":3,"file":"index.es.js","sources":["../../../src/components/Tabs/index.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Box, Tabs as MuiTabs, styled, Tab } from \"@mui/material\";\n\ntype TabItem = {\n  /** タブの識別値 */\n  value: string;\n  /** 表示名 */\n  label: string;\n  /** 表示アイコン example:\n   * <PhoneIcon sx={{ fontSize: 20 }} />\n   */\n  icon?: React.ReactElement<unknown>;\n};\n\ntype Props = {\n  /** タブアイテム情報*/\n  items: TabItem[];\n  /** 現在選択中のvalue state管理 */\n  value: string;\n  /** 選択中のTabが変更された時のhandler */\n  handleChange: (event: React.SyntheticEvent, newValue: string) => void;\n};\n\ninterface StyledTabsProps {\n  children?: React.ReactNode;\n  value: string;\n  onChange: (event: React.SyntheticEvent, newValue: string) => void;\n}\n\nconst StyledTabs = styled((props: StyledTabsProps) => (\n  <MuiTabs\n    {...props}\n    aria-label=\"wrapped tabs\"\n    TabIndicatorProps={{ children: <span className=\"MuiTabs-indicatorSpan\" /> }}\n  />\n))({\n  \"& .MuiTabs-indicator\": {\n    display: \"flex\",\n    justifyContent: \"center\",\n    backgroundColor: \"transparent\",\n  },\n  \"& .MuiTabs-indicatorSpan\": {\n    width: \"100%\",\n    backgroundColor: \"var(--jigowatts-color-primary, #6672e8)\",\n  },\n});\n\nconst StyledTab = styled((props: TabItem) => (\n  <Tab {...props} iconPosition=\"start\" />\n))(({}) => ({\n  \"&.Mui-selected\": {\n    color: \"var(--jigowatts-color-text, #000)\",\n    fontWeight: \"800\",\n  },\n}));\n\nexport const Tabs = (props: Props) => {\n  const { items, value, handleChange } = props;\n\n  return (\n    <Box sx={{ width: \"100%\" }}>\n      <StyledTabs\n        value={value}\n        onChange={handleChange}\n        aria-label=\"wrapped tabs\"\n      >\n        {items.map((item) => (\n          <StyledTab\n            key={item.value}\n            icon={item.icon}\n            label={item.label}\n            value={item.value}\n          />\n        ))}\n      </StyledTabs>\n    </Box>\n  );\n};\n\nexport default Tabs;\n"],"names":["StyledTabs","styled","props","jsx","MuiTabs","StyledTab","Tab","Tabs","items","value","handleChange","Box","item"],"mappings":";;AA6BA,MAAMA,IAAaC,EAAO,CAACC,MACzB,gBAAAC;AAAA,EAACC;AAAAA,EAAA;AAAA,IACE,GAAGF;AAAA,IACJ,cAAW;AAAA,IACX,mBAAmB,EAAE,4BAAW,QAAA,EAAK,WAAU,yBAAwB,EAAA;AAAA,EAAG;AAC5E,CACD,EAAE;AAAA,EACD,wBAAwB;AAAA,IACtB,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,EAAA;AAAA,EAEnB,4BAA4B;AAAA,IAC1B,OAAO;AAAA,IACP,iBAAiB;AAAA,EAAA;AAErB,CAAC,GAEKG,IAAYJ,EAAO,CAACC,wBACvBI,GAAA,EAAK,GAAGJ,GAAO,cAAa,QAAA,CAAQ,CACtC,EAAE,CAAC,CAAA,OAAQ;AAAA,EACV,kBAAkB;AAAA,IAChB,OAAO;AAAA,IACP,YAAY;AAAA,EAAA;AAEhB,EAAE,GAEWK,IAAO,CAACL,MAAiB;AACpC,QAAM,EAAE,OAAAM,GAAO,OAAAC,GAAO,cAAAC,EAAA,IAAiBR;AAEvC,2BACGS,GAAA,EAAI,IAAI,EAAE,OAAO,UAChB,UAAA,gBAAAR;AAAA,IAACH;AAAA,IAAA;AAAA,MACC,OAAAS;AAAA,MACA,UAAUC;AAAA,MACV,cAAW;AAAA,MAEV,UAAAF,EAAM,IAAI,CAACI,MACV,gBAAAT;AAAA,QAACE;AAAA,QAAA;AAAA,UAEC,MAAMO,EAAK;AAAA,UACX,OAAOA,EAAK;AAAA,UACZ,OAAOA,EAAK;AAAA,QAAA;AAAA,QAHPA,EAAK;AAAA,MAAA,CAKb;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../../assets/index2.css');const s=require("react/jsx-runtime"),u=require("classnames"),d="_inputContainer_qfvgb_1",_="_textArea_qfvgb_8",g="_error_qfvgb_22",x="_errorMessage_qfvgb_26",e={inputContainer:d,textArea:_,error:g,errorMessage:x},t=a=>{const{id:o,register:n,placeholder:i,rows:l,errorMessage:r,disabled:c}=a;return s.jsxs("div",{className:e.inputContainer,children:[s.jsx("textarea",{id:o,...n,className:u(e.textArea,{[e.error]:r}),placeholder:i,rows:l,disabled:c}),r&&s.jsx("small",{className:e.errorMessage,children:r})]})};t.defaultProps={rows:3,disabled:!1};exports.TextArea=t;exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../../assets/index2.css');const s=require("react/jsx-runtime"),u=require("classnames"),d="_inputContainer_1kt9j_1",_="_textArea_1kt9j_8",x="_error_1kt9j_23",j="_errorMessage_1kt9j_27",e={inputContainer:d,textArea:_,error:x,errorMessage:j},t=a=>{const{id:o,register:n,placeholder:i,rows:l,errorMessage:r,disabled:c}=a;return s.jsxs("div",{className:e.inputContainer,children:[s.jsx("textarea",{id:o,...n,className:u(e.textArea,{[e.error]:r}),placeholder:i,rows:l,disabled:c}),r&&s.jsx("small",{className:e.errorMessage,children:r})]})};t.defaultProps={rows:3,disabled:!1};exports.TextArea=t;exports.default=t;
 //# sourceMappingURL=index.cjs.js.map

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

@@ -1,11 +1,11 @@
 import { jsxs as c, jsx as s } from "react/jsx-runtime";
 import _ from "classnames";
-import '../../assets/index2.css';const d = "_inputContainer_qfvgb_1", g = "_textArea_qfvgb_8", f = "_error_qfvgb_22", m = "_errorMessage_qfvgb_26", e = {
+import '../../assets/index2.css';const d = "_inputContainer_1kt9j_1", m = "_textArea_1kt9j_8", p = "_error_1kt9j_23", x = "_errorMessage_1kt9j_27", e = {
   inputContainer: d,
-  textArea: g,
-  error: f,
-  errorMessage: m
-}, p = (t) => {
+  textArea: m,
+  error: p,
+  errorMessage: x
+}, u = (t) => {
   const { id: a, register: o, placeholder: n, rows: i, errorMessage: r, disabled: l } = t;
   return /* @__PURE__ */ c("div", { className: e.inputContainer, children: [
     /* @__PURE__ */ s(
@@ -24,12 +24,12 @@ import '../../assets/index2.css';const d = "_inputContainer_qfvgb_1", g = "_text
     r && /* @__PURE__ */ s("small", { className: e.errorMessage, children: r })
   ] });
 };
-p.defaultProps = {
+u.defaultProps = {
   rows: 3,
   disabled: !1
 };
 export {
-  p as TextArea,
-  p as default
+  u as TextArea,
+  u as default
 };
 //# sourceMappingURL=index.es.js.map

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),a=require("@mui/icons-material"),t=require("@mui/material"),o={NOT_SELECTED:"not_selected",ENABLED:"enabled",DISABLED:"disabled"},s=r=>{const{twoFaStatus:i,labelEnabled:l="有効",labelDisabled:n="無効"}=r,d=i===o.ENABLED;return e.jsx(t.Box,{sx:{display:"flex",flexDirection:"row",gap:"6px",alignItems:"center"},children:d?e.jsxs(e.Fragment,{children:[e.jsx(a.VerifiedUser,{"data-testid":"two-fa-icon",sx:{fontSize:"1rem",color:"#6672e8"}}),e.jsx(t.Typography,{"data-testid":"two-fa-text",sx:{fontSize:"0.8rem",color:"#6672e8"},children:l})]}):e.jsxs(e.Fragment,{children:[e.jsx(a.Shield,{"data-testid":"two-fa-icon",sx:{fontSize:"1rem",color:"grey"}}),e.jsx(t.Typography,{"data-testid":"two-fa-text",sx:{fontSize:"0.8rem",color:"grey"},children:n})]})})};exports.TwoFaLabel=s;exports.TwoFaStatus=o;exports.default=s;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),a=require("@mui/icons-material"),t=require("@mui/material"),o={NOT_SELECTED:"not_selected",ENABLED:"enabled",DISABLED:"disabled"},r=s=>{const{twoFaStatus:i,labelEnabled:l="有効",labelDisabled:n="無効"}=s,d=i===o.ENABLED;return e.jsx(t.Box,{sx:{display:"flex",flexDirection:"row",gap:"6px",alignItems:"center"},children:d?e.jsxs(e.Fragment,{children:[e.jsx(a.VerifiedUser,{"data-testid":"two-fa-icon",sx:{fontSize:"1rem",color:"var(--jigowatts-color-primary, #6672e8)"}}),e.jsx(t.Typography,{"data-testid":"two-fa-text",sx:{fontSize:"0.8rem",color:"var(--jigowatts-color-primary, #6672e8)"},children:l})]}):e.jsxs(e.Fragment,{children:[e.jsx(a.Shield,{"data-testid":"two-fa-icon",sx:{fontSize:"1rem",color:"var(--jigowatts-color-text-muted, grey)"}}),e.jsx(t.Typography,{"data-testid":"two-fa-text",sx:{fontSize:"0.8rem",color:"var(--jigowatts-color-text-muted, grey)"},children:n})]})})};exports.TwoFaLabel=r;exports.TwoFaStatus=o;exports.default=r;
 //# sourceMappingURL=index.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../src/components/TwoFaLabel/index.tsx"],"sourcesContent":["import { Shield, VerifiedUser } from \"@mui/icons-material\";\nimport { Box, Typography } from \"@mui/material\";\n\nexport const TwoFaStatus = {\n  NOT_SELECTED: \"not_selected\",\n  ENABLED: \"enabled\",\n  DISABLED: \"disabled\",\n} as const;\n\nexport type CommonTwoFaStatus = (typeof TwoFaStatus)[keyof typeof TwoFaStatus];\n\nexport type TwoFaLabelProps = {\n  /**\n   * 2要素認証のステータスを設定します。\n   * - `enabled`: 有効\n   * - `disabled`: 無効\n   * - `not_selected`: 未設定（無効として表示）\n   */\n  twoFaStatus?: CommonTwoFaStatus;\n  /**\n   * \"有効\" の場合に表示するテキスト (デフォルト: \"有効\")\n   */\n  labelEnabled?: string;\n  /**\n   * \"無効\" の場合に表示するテキスト (デフォルト: \"無効\")\n   */\n  labelDisabled?: string;\n};\n\n/**\n * 2要素認証済みか否かを表示するラベルコンポーネントです。\n */\nexport const TwoFaLabel = (props: TwoFaLabelProps) => {\n  const { twoFaStatus, labelEnabled = \"有効\", labelDisabled = \"無効\" } = props;\n\n  const isEnabled = twoFaStatus === TwoFaStatus.ENABLED;\n\n  return (\n    <Box\n      sx={{\n        display: \"flex\",\n        flexDirection: \"row\",\n        gap: \"6px\",\n        alignItems: \"center\",\n      }}\n    >\n      {isEnabled ? (\n        <>\n          <VerifiedUser\n            data-testid=\"two-fa-icon\"\n            sx={{ fontSize: \"1rem\", color: \"#6672e8\" }}\n          />\n          <Typography\n            data-testid=\"two-fa-text\"\n            sx={{ fontSize: \"0.8rem\", color: \"#6672e8\" }}\n          >\n            {labelEnabled}\n          </Typography>\n        </>\n      ) : (\n        <>\n          <Shield\n            data-testid=\"two-fa-icon\"\n            sx={{ fontSize: \"1rem\", color: \"grey\" }}\n          />\n          <Typography\n            data-testid=\"two-fa-text\"\n            sx={{ fontSize: \"0.8rem\", color: \"grey\" }}\n          >\n            {labelDisabled}\n          </Typography>\n        </>\n      )}\n    </Box>\n  );\n};\n\nexport default TwoFaLabel;\n"],"names":["TwoFaStatus","TwoFaLabel","props","twoFaStatus","labelEnabled","labelDisabled","isEnabled","jsx","Box","jsxs","Fragment","VerifiedUser","Typography","Shield"],"mappings":"6MAGaA,EAAc,CACzB,aAAc,eACd,QAAS,UACT,SAAU,UACZ,EAyBaC,EAAcC,GAA2B,CACpD,KAAM,CAAE,YAAAC,EAAa,aAAAC,EAAe,KAAM,cAAAC,EAAgB,MAASH,EAE7DI,EAAYH,IAAgBH,EAAY,QAE9C,OACEO,EAAAA,IAACC,EAAAA,IAAA,CACC,GAAI,CACF,QAAS,OACT,cAAe,MACf,IAAK,MACL,WAAY,QAAA,EAGb,WACCC,EAAAA,KAAAC,EAAAA,SAAA,CACE,SAAA,CAAAH,EAAAA,IAACI,EAAAA,aAAA,CACC,cAAY,cACZ,GAAI,CAAE,SAAU,OAAQ,MAAO,SAAA,CAAU,CAAA,EAE3CJ,EAAAA,IAACK,EAAAA,WAAA,CACC,cAAY,cACZ,GAAI,CAAE,SAAU,SAAU,MAAO,SAAA,EAEhC,SAAAR,CAAA,CAAA,CACH,CAAA,CACF,EAEAK,EAAAA,KAAAC,EAAAA,SAAA,CACE,SAAA,CAAAH,EAAAA,IAACM,EAAAA,OAAA,CACC,cAAY,cACZ,GAAI,CAAE,SAAU,OAAQ,MAAO,MAAA,CAAO,CAAA,EAExCN,EAAAA,IAACK,EAAAA,WAAA,CACC,cAAY,cACZ,GAAI,CAAE,SAAU,SAAU,MAAO,MAAA,EAEhC,SAAAP,CAAA,CAAA,CACH,CAAA,CACF,CAAA,CAAA,CAIR"}
+{"version":3,"file":"index.cjs.js","sources":["../../../src/components/TwoFaLabel/index.tsx"],"sourcesContent":["import { Shield, VerifiedUser } from \"@mui/icons-material\";\nimport { Box, Typography } from \"@mui/material\";\n\nexport const TwoFaStatus = {\n  NOT_SELECTED: \"not_selected\",\n  ENABLED: \"enabled\",\n  DISABLED: \"disabled\",\n} as const;\n\nexport type CommonTwoFaStatus = (typeof TwoFaStatus)[keyof typeof TwoFaStatus];\n\nexport type TwoFaLabelProps = {\n  /**\n   * 2要素認証のステータスを設定します。\n   * - `enabled`: 有効\n   * - `disabled`: 無効\n   * - `not_selected`: 未設定（無効として表示）\n   */\n  twoFaStatus?: CommonTwoFaStatus;\n  /**\n   * \"有効\" の場合に表示するテキスト (デフォルト: \"有効\")\n   */\n  labelEnabled?: string;\n  /**\n   * \"無効\" の場合に表示するテキスト (デフォルト: \"無効\")\n   */\n  labelDisabled?: string;\n};\n\n/**\n * 2要素認証済みか否かを表示するラベルコンポーネントです。\n */\nexport const TwoFaLabel = (props: TwoFaLabelProps) => {\n  const { twoFaStatus, labelEnabled = \"有効\", labelDisabled = \"無効\" } = props;\n\n  const isEnabled = twoFaStatus === TwoFaStatus.ENABLED;\n\n  return (\n    <Box\n      sx={{\n        display: \"flex\",\n        flexDirection: \"row\",\n        gap: \"6px\",\n        alignItems: \"center\",\n      }}\n    >\n      {isEnabled ? (\n        <>\n          <VerifiedUser\n            data-testid=\"two-fa-icon\"\n            sx={{\n              fontSize: \"1rem\",\n              color: \"var(--jigowatts-color-primary, #6672e8)\",\n            }}\n          />\n          <Typography\n            data-testid=\"two-fa-text\"\n            sx={{\n              fontSize: \"0.8rem\",\n              color: \"var(--jigowatts-color-primary, #6672e8)\",\n            }}\n          >\n            {labelEnabled}\n          </Typography>\n        </>\n      ) : (\n        <>\n          <Shield\n            data-testid=\"two-fa-icon\"\n            sx={{\n              fontSize: \"1rem\",\n              color: \"var(--jigowatts-color-text-muted, grey)\",\n            }}\n          />\n          <Typography\n            data-testid=\"two-fa-text\"\n            sx={{\n              fontSize: \"0.8rem\",\n              color: \"var(--jigowatts-color-text-muted, grey)\",\n            }}\n          >\n            {labelDisabled}\n          </Typography>\n        </>\n      )}\n    </Box>\n  );\n};\n\nexport default TwoFaLabel;\n"],"names":["TwoFaStatus","TwoFaLabel","props","twoFaStatus","labelEnabled","labelDisabled","isEnabled","jsx","Box","jsxs","Fragment","VerifiedUser","Typography","Shield"],"mappings":"6MAGaA,EAAc,CACzB,aAAc,eACd,QAAS,UACT,SAAU,UACZ,EAyBaC,EAAcC,GAA2B,CACpD,KAAM,CAAE,YAAAC,EAAa,aAAAC,EAAe,KAAM,cAAAC,EAAgB,MAASH,EAE7DI,EAAYH,IAAgBH,EAAY,QAE9C,OACEO,EAAAA,IAACC,EAAAA,IAAA,CACC,GAAI,CACF,QAAS,OACT,cAAe,MACf,IAAK,MACL,WAAY,QAAA,EAGb,WACCC,EAAAA,KAAAC,EAAAA,SAAA,CACE,SAAA,CAAAH,EAAAA,IAACI,EAAAA,aAAA,CACC,cAAY,cACZ,GAAI,CACF,SAAU,OACV,MAAO,yCAAA,CACT,CAAA,EAEFJ,EAAAA,IAACK,EAAAA,WAAA,CACC,cAAY,cACZ,GAAI,CACF,SAAU,SACV,MAAO,yCAAA,EAGR,SAAAR,CAAA,CAAA,CACH,CAAA,CACF,EAEAK,EAAAA,KAAAC,EAAAA,SAAA,CACE,SAAA,CAAAH,EAAAA,IAACM,EAAAA,OAAA,CACC,cAAY,cACZ,GAAI,CACF,SAAU,OACV,MAAO,yCAAA,CACT,CAAA,EAEFN,EAAAA,IAACK,EAAAA,WAAA,CACC,cAAY,cACZ,GAAI,CACF,SAAU,SACV,MAAO,yCAAA,EAGR,SAAAP,CAAA,CAAA,CACH,CAAA,CACF,CAAA,CAAA,CAIR"}

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

@@ -1,14 +1,14 @@
-import { jsx as e, jsxs as t, Fragment as o } from "react/jsx-runtime";
+import { jsx as t, jsxs as e, Fragment as o } from "react/jsx-runtime";
 import { VerifiedUser as n, Shield as c } from "@mui/icons-material";
-import { Box as f, Typography as a } from "@mui/material";
+import { Box as m, Typography as r } from "@mui/material";
 const x = {
   NOT_SELECTED: "not_selected",
   ENABLED: "enabled",
   DISABLED: "disabled"
-}, S = (r) => {
-  const { twoFaStatus: i, labelEnabled: l = "有効", labelDisabled: s = "無効" } = r, d = i === x.ENABLED;
-  return /* @__PURE__ */ e(
-    f,
+}, g = (a) => {
+  const { twoFaStatus: i, labelEnabled: l = "有効", labelDisabled: s = "無効" } = a, d = i === x.ENABLED;
+  return /* @__PURE__ */ t(
+    m,
     {
       sx: {
         display: "flex",
@@ -16,35 +16,47 @@ const x = {
         gap: "6px",
         alignItems: "center"
       },
-      children: d ? /* @__PURE__ */ t(o, { children: [
-        /* @__PURE__ */ e(
+      children: d ? /* @__PURE__ */ e(o, { children: [
+        /* @__PURE__ */ t(
           n,
           {
             "data-testid": "two-fa-icon",
-            sx: { fontSize: "1rem", color: "#6672e8" }
+            sx: {
+              fontSize: "1rem",
+              color: "var(--jigowatts-color-primary, #6672e8)"
+            }
           }
         ),
-        /* @__PURE__ */ e(
-          a,
+        /* @__PURE__ */ t(
+          r,
           {
             "data-testid": "two-fa-text",
-            sx: { fontSize: "0.8rem", color: "#6672e8" },
+            sx: {
+              fontSize: "0.8rem",
+              color: "var(--jigowatts-color-primary, #6672e8)"
+            },
             children: l
           }
         )
-      ] }) : /* @__PURE__ */ t(o, { children: [
-        /* @__PURE__ */ e(
+      ] }) : /* @__PURE__ */ e(o, { children: [
+        /* @__PURE__ */ t(
           c,
           {
             "data-testid": "two-fa-icon",
-            sx: { fontSize: "1rem", color: "grey" }
+            sx: {
+              fontSize: "1rem",
+              color: "var(--jigowatts-color-text-muted, grey)"
+            }
           }
         ),
-        /* @__PURE__ */ e(
-          a,
+        /* @__PURE__ */ t(
+          r,
           {
             "data-testid": "two-fa-text",
-            sx: { fontSize: "0.8rem", color: "grey" },
+            sx: {
+              fontSize: "0.8rem",
+              color: "var(--jigowatts-color-text-muted, grey)"
+            },
             children: s
           }
         )
@@ -53,8 +65,8 @@ const x = {
   );
 };
 export {
-  S as TwoFaLabel,
+  g as TwoFaLabel,
   x as TwoFaStatus,
-  S as default
+  g as default
 };
 //# sourceMappingURL=index.es.js.map