@zydon/common 2.7.88 → 2.7.90

package/dist/chunk-E3TW4QI3.js

@@ -0,0 +1,16 @@
+import { a } from './chunk-LQRRMVFN.js';
+import { useState } from 'react';
+import C from '@mui/material/Box';
+import k from '@mui/material/IconButton';
+import g from '@mui/material/InputAdornment';
+import x from '@mui/material/Popover';
+import I from '@mui/material/TextField';
+import { ChromePicker } from 'react-color';
+import { styled } from '@mui/material/styles';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var p=styled(ChromePicker)({fontFamily:"inherit",boxShadow:"none"});var b=({value:l,tabIndex:s,onChangeColor:a$1,...t})=>{let[m,c]=useState(),n=m||l,r=n?"#"+n.replaceAll("#",""):"",e=a(),u=()=>{e.onClose(),a$1(r);};return jsxs(Fragment,{children:[jsx(I,{...t,value:r,InputProps:{...t.InputProps,startAdornment:jsx(g,{position:"start",sx:{ml:2},children:jsx(k,{edge:"start","aria-label":"Escolher cor",onClick:e.onOpen,children:jsx(C,{sx:{minWidth:24,minHeight:24,backgroundColor:r,borderRadius:.5}})})})},inputProps:{readOnly:!0,...t.inputProps,maxLength:7,tabIndex:s}}),jsx(x,{className:"popover-color-picker",open:!!e.open,anchorEl:e.open,onClose:u,anchorOrigin:{vertical:"bottom",horizontal:"center"},transformOrigin:{vertical:"center",horizontal:"center"},slotProps:{paper:{style:{borderRadius:8}}},children:jsx(p,{color:r,onChange:({hex:d})=>c(d),styles:{default:{picker:{fontFamily:"inherit",boxShadow:"none"}}},disableAlpha:!0})})]})},L=b;
+
+export { L as a };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-E3TW4QI3.js.map

package/dist/chunk-E3TW4QI3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ColorPickerInput/index.tsx","../src/components/ColorPickerInput/styles.ts"],"names":["useState","Box","IconButton","InputAdornment","Popover","TextField","ChromePickerOrigin","styled","ChromePicker","Fragment","jsx","jsxs","ColorPickerInput","value","tabIndex","onChangeColor","other","color","setColor","currentColor","hexValue","popover","usePopover_default","handleCloseColorPicker","hex","ColorPickerInput_default"],"mappings":"wCAAA,OAAS,YAAAA,MAAgB,QACzB,OAAOC,MAAS,oBAChB,OAAOC,MAAgB,2BACvB,OAAOC,MAAoB,+BAC3B,OAAOC,MAAa,wBACpB,OAAOC,MAAe,0BCLtB,OAAS,gBAAgBC,MAA0B,cACnD,OAAS,UAAAC,MAAc,uBAEhB,IAAMC,EAAeD,EAAOD,CAAkB,EAAE,CACrD,WAAY,UACZ,UAAW,MACb,CAAC,EDwBG,mBAAAG,EAaY,OAAAC,EAbZ,QAAAC,MAAA,oBAlBJ,IAAMC,EAAmB,CAAC,CACxB,MAAAC,EACA,SAAAC,EACA,cAAAC,EACA,GAAGC,CACL,IAA6B,CAC3B,GAAM,CAACC,EAAOC,CAAQ,EAAIlB,EAAuB,EAC3CmB,EAAeF,GAASJ,EACxBO,EAAWD,EAAe,IAAMA,EAAa,WAAW,IAAK,EAAE,EAAI,GAEnEE,EAAUC,EAAW,EAErBC,EAAyB,IAAM,CACnCF,EAAQ,QAAQ,EAChBN,EAAcK,CAAQ,CACxB,EAEA,OACET,EAAAF,EAAA,CACE,UAAAC,EAACL,EAAA,CACE,GAAGW,EACJ,MAAOI,EACP,WAAY,CACV,GAAGJ,EAAM,WACT,eACEN,EAACP,EAAA,CAAe,SAAS,QAAQ,GAAI,CAAE,GAAI,CAAE,EAC3C,SAAAO,EAACR,EAAA,CACC,KAAK,QACL,aAAW,eACX,QAASmB,EAAQ,OAEjB,SAAAX,EAACT,EAAA,CACC,GAAI,CACF,SAAU,GACV,UAAW,GACX,gBAAiBmB,EACjB,aAAc,EAChB,EACF,EACF,EACF,CAEJ,EACA,WAAY,CACV,SAAU,GACV,GAAGJ,EAAM,WACT,UAAW,EACX,SAAAF,CACF,EACF,EACAJ,EAACN,EAAA,CACC,UAAU,uBACV,KAAM,EAAQiB,EAAQ,KACtB,SAAUA,EAAQ,KAClB,QAASE,EACT,aAAc,CACZ,SAAU,SACV,WAAY,QACd,EACA,gBAAiB,CACf,SAAU,SACV,WAAY,QACd,EACA,UAAW,CACT,MAAO,CACL,MAAO,CAAE,aAAc,CAAE,CAC3B,CACF,EAEA,SAAAb,EAACF,EAAA,CACC,MAAOY,EACP,SAAU,CAAC,CAAE,IAAAI,CAAI,IAAuBN,EAASM,CAAmB,EACpE,OAAQ,CACN,QAAS,CACP,OAAQ,CACN,WAAY,UACZ,UAAW,MACb,CACF,CACF,EACA,aAAY,GACd,EACF,GACF,CAEJ,EAEOC,EAAQb","sourcesContent":["import { useState } from 'react';\nimport Box from '@mui/material/Box';\nimport IconButton from '@mui/material/IconButton';\nimport InputAdornment from '@mui/material/InputAdornment';\nimport Popover from '@mui/material/Popover';\nimport TextField from '@mui/material/TextField';\n\nimport usePopover from 'hooks/usePopover';\n\nimport { ColorPickerInputProps } from './props';\nimport { ChromePicker } from './styles';\n\nconst ColorPickerInput = ({\n  value,\n  tabIndex,\n  onChangeColor,\n  ...other\n}: ColorPickerInputProps) => {\n  const [color, setColor] = useState<`#${string}`>();\n  const currentColor = color || value;\n  const hexValue = currentColor ? '#' + currentColor.replaceAll('#', '') : '';\n\n  const popover = usePopover();\n\n  const handleCloseColorPicker = () => {\n    popover.onClose();\n    onChangeColor(hexValue);\n  };\n\n  return (\n    <>\n      <TextField\n        {...other}\n        value={hexValue}\n        InputProps={{\n          ...other.InputProps,\n          startAdornment: (\n            <InputAdornment position=\"start\" sx={{ ml: 2 }}>\n              <IconButton\n                edge=\"start\"\n                aria-label=\"Escolher cor\"\n                onClick={popover.onOpen}\n              >\n                <Box\n                  sx={{\n                    minWidth: 24,\n                    minHeight: 24,\n                    backgroundColor: hexValue,\n                    borderRadius: 0.5,\n                  }}\n                />\n              </IconButton>\n            </InputAdornment>\n          ),\n        }}\n        inputProps={{\n          readOnly: true,\n          ...other.inputProps,\n          maxLength: 7,\n          tabIndex,\n        }}\n      />\n      <Popover\n        className=\"popover-color-picker\"\n        open={Boolean(popover.open)}\n        anchorEl={popover.open}\n        onClose={handleCloseColorPicker}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'center',\n        }}\n        transformOrigin={{\n          vertical: 'center',\n          horizontal: 'center',\n        }}\n        slotProps={{\n          paper: {\n            style: { borderRadius: 8 },\n          },\n        }}\n      >\n        <ChromePicker\n          color={hexValue}\n          onChange={({ hex }: { hex: string }) => setColor(hex as `#${string}`)}\n          styles={{\n            default: {\n              picker: {\n                fontFamily: 'inherit',\n                boxShadow: 'none',\n              },\n            },\n          }}\n          disableAlpha\n        />\n      </Popover>\n    </>\n  );\n};\n\nexport default ColorPickerInput;\n","import { ChromePicker as ChromePickerOrigin } from 'react-color';\nimport { styled } from '@mui/material/styles';\n\nexport const ChromePicker = styled(ChromePickerOrigin)({\n  fontFamily: 'inherit',\n  boxShadow: 'none',\n});\n"]}

package/dist/components/ColorPickerInput/index.d.ts

@@ -7,6 +7,6 @@ type ColorPickerInputProps = TextFieldProps & {
     onChangeColor(color: string): void;
 };
 
-declare const ColorPickerInput: ({ value, onChangeColor, tabIndex, ...other }: ColorPickerInputProps) => react_jsx_runtime.JSX.Element;
+declare const ColorPickerInput: ({ value, tabIndex, onChangeColor, ...other }: ColorPickerInputProps) => react_jsx_runtime.JSX.Element;
 
 export { ColorPickerInput as default };

package/dist/components/ColorPickerInput/index.js

@@ -1,4 +1,4 @@
-export { a as default } from '../../chunk-UHD4ZFH3.js';
+export { a as default } from '../../chunk-E3TW4QI3.js';
 import '../../chunk-LQRRMVFN.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

package/dist/components/form/ColorPicker/index.d.ts

@@ -3,8 +3,10 @@ import { TextFieldProps } from '@mui/material/TextField';
 import { BaseField } from '../../../types/baseField.js';
 import 'react-hook-form';
 
-type ColorPickerProps = BaseField<TextFieldProps>;
+type ColorPickerProps = BaseField<TextFieldProps> & {
+    onChangeColor?: (color: string) => void;
+};
 
-declare const ColorPicker: ({ name, rules, helperText, ...other }: ColorPickerProps) => react_jsx_runtime.JSX.Element;
+declare const ColorPicker: ({ name, rules, helperText, onChangeColor, ...other }: ColorPickerProps) => react_jsx_runtime.JSX.Element;
 
 export { ColorPicker as default };

package/dist/components/form/ColorPicker/index.js

@@ -1,10 +1,10 @@
-import { a } from '../../../chunk-UHD4ZFH3.js';
+import { a } from '../../../chunk-E3TW4QI3.js';
 import '../../../chunk-LQRRMVFN.js';
 import { useFormContext, Controller } from 'react-hook-form';
 import { jsx } from 'react/jsx-runtime';
 
-var u=({name:o,rules:t,helperText:c,...f})=>{let{control:d}=useFormContext();return jsx(Controller,{name:o,control:d,rules:{...t,validate:{...t?.validate,validation:e=>{let r="#"+e.replaceAll("#","");return /^#([0-9A-Fa-f]{3}){1,2}$/.test(r)?!0:"Cor inv\xE1lida"}}},render:({field:{ref:e,onChange:r,...l},fieldState:{error:i}})=>jsx(a,{...l,onChangeColor:r,inputRef:e,fullWidth:!0,error:!!i,helperText:i?.message||c,"data-intercom-target":o,...f})})},g=u;
+var m=({name:o,rules:t,helperText:c,onChangeColor:d,...p})=>{let{control:s}=useFormContext();return jsx(Controller,{name:o,control:s,rules:{...t,validate:{...t?.validate,validation:e=>{let r="#"+e.replaceAll("#","");return /^#([0-9A-Fa-f]{3}){1,2}$/.test(r)?!0:"Cor inv\xE1lida"}}},render:({field:{ref:e,onChange:r,...l},fieldState:{error:i}})=>jsx(a,{...l,onChangeColor:n=>{r(n),d?.(n);},inputRef:e,fullWidth:!0,error:!!i,helperText:i?.message||c,"data-intercom-target":o,...p})})},P=m;
 
-export { g as default };
+export { P as default };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

package/dist/components/form/ColorPicker/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/form/ColorPicker/index.tsx"],"names":["Controller","useFormContext","jsx","ColorPicker","name","rules","helperText","other","control","v","fValue","ref","onChange","field","error","ColorPickerInput_default","ColorPicker_default"],"mappings":"kFAAA,OAAS,cAAAA,EAAY,kBAAAC,MAAsB,kBAoCnC,cAAAC,MAAA,oBA9BR,IAAMC,EAAc,CAAC,CACnB,KAAAC,EACA,MAAAC,EACA,WAAAC,EACA,GAAGC,CACL,IAAwB,CACtB,GAAM,CAAE,QAAAC,CAAQ,EAAIP,EAAe,EAEnC,OACEC,EAACF,EAAA,CACC,KAAMI,EACN,QAASI,EACT,MAAO,CACL,GAAGH,EACH,SAAU,CACR,GAAGA,GAAO,SACV,WAAaI,GAAc,CACzB,IAAMC,EAAS,IAAMD,EAAE,WAAW,IAAK,EAAE,EAGzC,MAFiB,2BAEH,KAAKC,CAAM,EAElB,GAF4B,iBAGrC,CACF,CACF,EACA,OAAQ,CAAC,CACP,MAAO,CAAE,IAAAC,EAAK,SAAAC,EAAU,GAAGC,CAAM,EACjC,WAAY,CAAE,MAAAC,CAAM,CACtB,IACEZ,EAACa,EAAA,CACE,GAAGF,EACJ,cAAeD,EACf,SAAUD,EACV,UAAS,GACT,MAAO,CAAC,CAACG,EACT,WAAYA,GAAO,SAAWR,EAC9B,uBAAsBF,EACrB,GAAGG,EACN,EAEJ,CAEJ,EAEOS,EAAQb","sourcesContent":["import { Controller, useFormContext } from 'react-hook-form';\n\nimport ColorPickerInput from 'components/ColorPickerInput';\n\nimport { ColorPickerProps } from './props';\n\nconst ColorPicker = ({\n  name,\n  rules,\n  helperText,\n  ...other\n}: ColorPickerProps) => {\n  const { control } = useFormContext();\n\n  return (\n    <Controller\n      name={name}\n      control={control}\n      rules={{\n        ...rules,\n        validate: {\n          ...rules?.validate,\n          validation: (v: string) => {\n            const fValue = '#' + v.replaceAll('#', '');\n            const hexRegex = /^#([0-9A-Fa-f]{3}){1,2}$/;\n\n            if (!hexRegex.test(fValue)) return 'Cor inválida';\n\n            return true;\n          },\n        },\n      }}\n      render={({\n        field: { ref, onChange, ...field },\n        fieldState: { error },\n      }) => (\n        <ColorPickerInput\n          {...field}\n          onChangeColor={onChange}\n          inputRef={ref}\n          fullWidth\n          error={!!error}\n          helperText={error?.message || helperText}\n          data-intercom-target={name}\n          {...other}\n        />\n      )}\n    />\n  );\n};\n\nexport default ColorPicker;\n"]}
+{"version":3,"sources":["../../../../src/components/form/ColorPicker/index.tsx"],"names":["Controller","useFormContext","jsx","ColorPicker","name","rules","helperText","onChangeColor","other","control","v","fValue","ref","onChange","field","error","ColorPickerInput_default","color","ColorPicker_default"],"mappings":"6EAAA,OAAS,cAAAA,EAAY,kBAAAC,MAAsB,kBAqCnC,cAAAC,MAAA,oBA/BR,IAAMC,EAAc,CAAC,CACnB,KAAAC,EACA,MAAAC,EACA,WAAAC,EACA,cAAAC,EACA,GAAGC,CACL,IAAwB,CACtB,GAAM,CAAE,QAAAC,CAAQ,EAAIR,EAAe,EAEnC,OACEC,EAACF,EAAA,CACC,KAAMI,EACN,QAASK,EACT,MAAO,CACL,GAAGJ,EACH,SAAU,CACR,GAAGA,GAAO,SACV,WAAaK,GAAc,CACzB,IAAMC,EAAS,IAAMD,EAAE,WAAW,IAAK,EAAE,EAGzC,MAFiB,2BAEH,KAAKC,CAAM,EAElB,GAF4B,iBAGrC,CACF,CACF,EACA,OAAQ,CAAC,CACP,MAAO,CAAE,IAAAC,EAAK,SAAAC,EAAU,GAAGC,CAAM,EACjC,WAAY,CAAE,MAAAC,CAAM,CACtB,IACEb,EAACc,EAAA,CACE,GAAGF,EACJ,cAAeG,GAAS,CACtBJ,EAASI,CAAK,EACdV,IAAgBU,CAAK,CACvB,EACA,SAAUL,EACV,UAAS,GACT,MAAO,CAAC,CAACG,EACT,WAAYA,GAAO,SAAWT,EAC9B,uBAAsBF,EACrB,GAAGI,EACN,EAEJ,CAEJ,EAEOU,EAAQf","sourcesContent":["import { Controller, useFormContext } from 'react-hook-form';\n\nimport ColorPickerInput from 'components/ColorPickerInput';\n\nimport { ColorPickerProps } from './props';\n\nconst ColorPicker = ({\n  name,\n  rules,\n  helperText,\n  onChangeColor,\n  ...other\n}: ColorPickerProps) => {\n  const { control } = useFormContext();\n\n  return (\n    <Controller\n      name={name}\n      control={control}\n      rules={{\n        ...rules,\n        validate: {\n          ...rules?.validate,\n          validation: (v: string) => {\n            const fValue = '#' + v.replaceAll('#', '');\n            const hexRegex = /^#([0-9A-Fa-f]{3}){1,2}$/;\n\n            if (!hexRegex.test(fValue)) return 'Cor inválida';\n\n            return true;\n          },\n        },\n      }}\n      render={({\n        field: { ref, onChange, ...field },\n        fieldState: { error },\n      }) => (\n        <ColorPickerInput\n          {...field}\n          onChangeColor={color => {\n            onChange(color);\n            onChangeColor?.(color);\n          }}\n          inputRef={ref}\n          fullWidth\n          error={!!error}\n          helperText={error?.message || helperText}\n          data-intercom-target={name}\n          {...other}\n        />\n      )}\n    />\n  );\n};\n\nexport default ColorPicker;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zydon/common",
-  "version": "2.7.88",
+  "version": "2.7.90",
   "license": "MIT",
   "type": "module",
   "module": "./dist/index.js",

package/dist/chunk-UHD4ZFH3.js

@@ -1,16 +0,0 @@
-import { a as a$1 } from './chunk-LQRRMVFN.js';
-import { useState } from 'react';
-import g from '@mui/material/Box';
-import P from '@mui/material/IconButton';
-import x from '@mui/material/InputAdornment';
-import k from '@mui/material/Popover';
-import I from '@mui/material/TextField';
-import { ChromePicker } from 'react-color';
-import { styled } from '@mui/material/styles';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-
-var a=styled(ChromePicker)({fontFamily:"inherit",boxShadow:"none"});var b=({value:m,onChangeColor:c,tabIndex:h,...t})=>{let[u,i]=useState(),p=u||m,n=p?"#"+p.replaceAll("#",""):"",e=a$1(),l=(o="")=>{(/^#[0-9a-fA-F]*$/.test(o)||o===""||o==="#")&&c("#"+o.replaceAll("#","")),i(void 0);};return jsxs(Fragment,{children:[jsx(I,{...t,value:n,onChange:o=>l(o.target.value),InputProps:{...t.InputProps,startAdornment:jsx(x,{position:"start",sx:{ml:2},children:jsx(P,{edge:"start","aria-label":"Escolher cor",onClick:e.onOpen,children:jsx(g,{sx:{minWidth:24,minHeight:24,backgroundColor:n,borderRadius:.5}})})})},inputProps:{...t.inputProps,maxLength:7,tabIndex:h}}),jsx(k,{className:"popover-color-picker",open:!!e.open,anchorEl:e.open,onClose:e.onClose,anchorOrigin:{vertical:"bottom",horizontal:"center"},transformOrigin:{vertical:"center",horizontal:"center"},slotProps:{paper:{style:{borderRadius:8}}},children:jsx(a,{color:n,onChange:({hex:o})=>i(o),onChangeComplete:({hex:o})=>l(o),styles:{default:{picker:{fontFamily:"inherit",boxShadow:"none"}}},disableAlpha:!0})})]})},N=b;
-
-export { N as a };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-UHD4ZFH3.js.map

package/dist/chunk-UHD4ZFH3.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/ColorPickerInput/index.tsx","../src/components/ColorPickerInput/styles.ts"],"names":["useState","Box","IconButton","InputAdornment","Popover","TextField","ChromePickerOrigin","styled","ChromePicker","Fragment","jsx","jsxs","ColorPickerInput","value","onChangeColor","tabIndex","other","color","setColor","currentColor","hexValue","popover","usePopover_default","handleChangeColor","v","e","hex","ColorPickerInput_default"],"mappings":"wCAAA,OAAS,YAAAA,MAAgB,QACzB,OAAOC,MAAS,oBAChB,OAAOC,MAAgB,2BACvB,OAAOC,MAAoB,+BAC3B,OAAOC,MAAa,wBACpB,OAAOC,MAAe,0BCLtB,OAAS,gBAAgBC,MAA0B,cACnD,OAAS,UAAAC,MAAc,uBAEhB,IAAMC,EAAeD,EAAOD,CAAkB,EAAE,CACrD,WAAY,UACZ,UAAW,MACb,CAAC,ED6BG,mBAAAG,EAcY,OAAAC,EAdZ,QAAAC,MAAA,oBAvBJ,IAAMC,EAAmB,CAAC,CACxB,MAAAC,EACA,cAAAC,EACA,SAAAC,EACA,GAAGC,CACL,IAA6B,CAC3B,GAAM,CAACC,EAAOC,CAAQ,EAAIlB,EAAuB,EAC3CmB,EAAeF,GAASJ,EACxBO,EAAWD,EAAe,IAAMA,EAAa,WAAW,IAAK,EAAE,EAAI,GAEnEE,EAAUC,EAAW,EAErBC,EAAoB,CAACC,EAAI,KAAO,EACnB,kBAEJ,KAAKA,CAAC,GAAKA,IAAM,IAAMA,IAAM,MACxCV,EAAc,IAAMU,EAAE,WAAW,IAAK,EAAE,CAAC,EAG3CN,EAAS,MAAS,CACpB,EAEA,OACEP,EAAAF,EAAA,CACE,UAAAC,EAACL,EAAA,CACE,GAAGW,EACJ,MAAOI,EACP,SAAUK,GAAKF,EAAkBE,EAAE,OAAO,KAAK,EAC/C,WAAY,CACV,GAAGT,EAAM,WACT,eACEN,EAACP,EAAA,CAAe,SAAS,QAAQ,GAAI,CAAE,GAAI,CAAE,EAC3C,SAAAO,EAACR,EAAA,CACC,KAAK,QACL,aAAW,eACX,QAASmB,EAAQ,OAEjB,SAAAX,EAACT,EAAA,CACC,GAAI,CACF,SAAU,GACV,UAAW,GACX,gBAAiBmB,EACjB,aAAc,EAChB,EACF,EACF,EACF,CAEJ,EACA,WAAY,CACV,GAAGJ,EAAM,WACT,UAAW,EACX,SAAAD,CACF,EACF,EACAL,EAACN,EAAA,CACC,UAAU,uBACV,KAAM,EAAQiB,EAAQ,KACtB,SAAUA,EAAQ,KAClB,QAASA,EAAQ,QACjB,aAAc,CACZ,SAAU,SACV,WAAY,QACd,EACA,gBAAiB,CACf,SAAU,SACV,WAAY,QACd,EACA,UAAW,CACT,MAAO,CACL,MAAO,CAAE,aAAc,CAAE,CAC3B,CACF,EAEA,SAAAX,EAACF,EAAA,CACC,MAAOY,EACP,SAAU,CAAC,CAAE,IAAAM,CAAI,IAAuBR,EAASQ,CAAmB,EACpE,iBAAkB,CAAC,CAAE,IAAAA,CAAI,IACvBH,EAAkBG,CAAG,EAEvB,OAAQ,CACN,QAAS,CACP,OAAQ,CACN,WAAY,UACZ,UAAW,MACb,CACF,CACF,EACA,aAAY,GACd,EACF,GACF,CAEJ,EAEOC,EAAQf","sourcesContent":["import { useState } from 'react';\nimport Box from '@mui/material/Box';\nimport IconButton from '@mui/material/IconButton';\nimport InputAdornment from '@mui/material/InputAdornment';\nimport Popover from '@mui/material/Popover';\nimport TextField from '@mui/material/TextField';\n\nimport usePopover from 'hooks/usePopover';\n\nimport { ColorPickerInputProps } from './props';\nimport { ChromePicker } from './styles';\n\nconst ColorPickerInput = ({\n  value,\n  onChangeColor,\n  tabIndex,\n  ...other\n}: ColorPickerInputProps) => {\n  const [color, setColor] = useState<`#${string}`>();\n  const currentColor = color || value;\n  const hexValue = currentColor ? '#' + currentColor.replaceAll('#', '') : '';\n\n  const popover = usePopover();\n\n  const handleChangeColor = (v = '') => {\n    const hexRegex = /^#[0-9a-fA-F]*$/;\n\n    if (hexRegex.test(v) || v === '' || v === '#') {\n      onChangeColor('#' + v.replaceAll('#', ''));\n    }\n\n    setColor(undefined);\n  };\n\n  return (\n    <>\n      <TextField\n        {...other}\n        value={hexValue}\n        onChange={e => handleChangeColor(e.target.value)}\n        InputProps={{\n          ...other.InputProps,\n          startAdornment: (\n            <InputAdornment position=\"start\" sx={{ ml: 2 }}>\n              <IconButton\n                edge=\"start\"\n                aria-label=\"Escolher cor\"\n                onClick={popover.onOpen}\n              >\n                <Box\n                  sx={{\n                    minWidth: 24,\n                    minHeight: 24,\n                    backgroundColor: hexValue,\n                    borderRadius: 0.5,\n                  }}\n                />\n              </IconButton>\n            </InputAdornment>\n          ),\n        }}\n        inputProps={{\n          ...other.inputProps,\n          maxLength: 7,\n          tabIndex,\n        }}\n      />\n      <Popover\n        className=\"popover-color-picker\"\n        open={Boolean(popover.open)}\n        anchorEl={popover.open}\n        onClose={popover.onClose}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'center',\n        }}\n        transformOrigin={{\n          vertical: 'center',\n          horizontal: 'center',\n        }}\n        slotProps={{\n          paper: {\n            style: { borderRadius: 8 },\n          },\n        }}\n      >\n        <ChromePicker\n          color={hexValue}\n          onChange={({ hex }: { hex: string }) => setColor(hex as `#${string}`)}\n          onChangeComplete={({ hex }: { hex: string }) =>\n            handleChangeColor(hex)\n          }\n          styles={{\n            default: {\n              picker: {\n                fontFamily: 'inherit',\n                boxShadow: 'none',\n              },\n            },\n          }}\n          disableAlpha\n        />\n      </Popover>\n    </>\n  );\n};\n\nexport default ColorPickerInput;\n","import { ChromePicker as ChromePickerOrigin } from 'react-color';\nimport { styled } from '@mui/material/styles';\n\nexport const ChromePicker = styled(ChromePickerOrigin)({\n  fontFamily: 'inherit',\n  boxShadow: 'none',\n});\n"]}