{"version":3,"sources":["../src/components/elements/XIcon.tsx"],"names":["React","Icon","useSetRecoilState","isEqual","compareProps","prevProps","nextProps","XIcon","config","breakpoint","useBreakpoint","env","useXoraiaValue","xElement","useXElement","setSelectedElement","USE_SELECTED_INDEX","value","valueAtBreakPoint","getValueOnBreakpoint","devProps","e","clickHandler","icon","hoverColor","hoverFontSize","baseClassName","padding","margin","color","pack","bgColor","border","borderRadius","sx","generateBorder","generateRadius","generateSide","XIcon_default"],"mappings":"6SAAA,UAAYA,MAAW,QACvB,OAAS,QAAAC,MAAY,gBAKrB,OAAS,qBAAAC,MAAyB,SAKlC,OAAS,WAAAC,MAAe,SASxB,IAAMC,EAAe,CAACC,EAAgBC,IAC7BH,EAAQE,EAAWC,CAAS,EAG/BC,EAAoC,OACxC,CAAC,CAAE,OAAAC,EAAS,CAAC,CAAoB,IAAM,CAErC,IAAMC,EAAaC,EAAc,EAE3B,CAAE,IAAAC,CAAI,EAAIC,EAAe,EAGzB,CAAE,SAAAC,CAAS,EAAIC,EAAuCN,EAAO,KAAK,EAGlEO,EAAqBb,EAAkBc,CAAkB,EAG/D,GAAI,CAACH,GAAY,OAAO,KAAKA,CAAQ,EAAE,SAAW,EAAG,OAAO,KAG5D,GAAM,CAAE,MAAAI,CAAM,EAAIJ,EAGZK,EAAoBC,EACxBF,EACAR,CACF,EAEMW,EAAW,CACf,GAAIZ,EAAO,MACX,QAAUa,GAAWC,EAAaD,EAAGN,EAAoBP,EAAO,KAAK,CACvE,EAEM,CACJ,KAAAe,EACA,WAAAC,EACA,cAAAC,EACA,cAAAC,EACA,QAAAC,EACA,OAAAC,EACA,MAAAC,EACA,KAAAC,EAAO,KACP,QAAAC,EACA,OAAAC,EACA,aAAAC,KACGC,CACL,EAAIhB,EAEJ,MAAI,CAACK,GAAQZ,IAAQ,OAAe,KAGlC,gBAACV,EAAA,CACE,GAAIU,IAAQ,OAASS,EACtB,cAAeM,EACf,GAAI,CACF,GAAGQ,EACH,MAAOL,EACP,QAASE,EACT,OAAQI,EAAeH,CAAM,EAC7B,aAAcI,EAAeH,CAAY,EACzC,QAASI,EAAa,UAAWV,CAAO,EACxC,OAAQU,EAAa,SAAUT,CAAM,EAErC,mBAAoB,CAClB,SAAUM,EAAG,UAAY,UACzB,MAAOL,EACP,WAAY,KACd,EACA,UAAW,CACT,MAAOL,EACP,SAAUC,CACZ,EACA,WAAY,MACZ,cAAe,CACjB,GAECF,GAAQ,MAEX,CAEJ,EACAnB,CACF,EAEOkC,EAAQ/B","sourcesContent":["import * as React from \"react\";\nimport { Icon } from \"@mui/material\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\nimport { useXoraiaValue } from \"../../hooks/useXoraia\";\nimport { TUseXElement, useXElement } from \"../../hooks/useXElement\";\nimport { USE_SELECTED_INDEX } from \"../../hooks/useSelectedElement\";\nimport { useSetRecoilState } from \"recoil\";\nimport { getValueOnBreakpoint } from \"../../lib/getValueOnBreakpoint\";\nimport { clickHandler } from \"../../lib/clickHandler\";\nimport { XElementConfig } from \"../../utils/interfaces/Elements/XElement.interfaces\";\n\nimport { isEqual } from \"lodash\";\nimport { generateSide } from \"../../lib/generateSide\";\nimport {\n  IXIconProps,\n  XIconProps,\n} from \"../../utils/interfaces/Elements/XIcon.interfaces\";\nimport { generateBorder } from \"../../lib/generateBorder\";\nimport { generateRadius } from \"../../lib/generateRadius\";\n\nconst compareProps = (prevProps: any, nextProps: any) => {\n  return isEqual(prevProps, nextProps);\n};\n\nconst XIcon: React.FC<XIconProps> = React.memo(\n  ({ config = {} as XElementConfig }) => {\n    // WE TRACK THE BREAK POINTS CHANGES\n    const breakpoint = useBreakpoint();\n\n    const { env } = useXoraiaValue();\n\n    // WE ARE GETTING THE CURRENT ELEMENT FROM THE ATOM FAMILY\n    const { xElement } = useXElement<TUseXElement<IXIconProps>>(config.index);\n\n    // GARBING THE INDEX UPDATER FOR GENERAL USAGE\n    const setSelectedElement = useSetRecoilState(USE_SELECTED_INDEX);\n\n    // IF WE DONT HAVE THIS ELEMENT CONFIGS ADDED WE DON'T SHOW IT\n    if (!xElement || Object.keys(xElement).length === 0) return null;\n\n    // WE GET ALL DEVICES PROPS AS VALUE\n    const { value } = xElement;\n\n    // WE NOW USE THE CURRENT BREAKPOINT VALUE ON THIS ELEMENT\n    const valueAtBreakPoint = getValueOnBreakpoint<IXIconProps>(\n      value as any,\n      breakpoint\n    );\n\n    const devProps = {\n      id: config.index,\n      onClick: (e: any) => clickHandler(e, setSelectedElement, config.index),\n    };\n\n    const {\n      icon,\n      hoverColor,\n      hoverFontSize,\n      baseClassName,\n      padding,\n      margin,\n      color,\n      pack = \"md\",\n      bgColor,\n      border,\n      borderRadius,\n      ...sx\n    } = valueAtBreakPoint;\n\n    if (!icon && env === \"prod\") return null;\n\n    return (\n      <Icon\n        {...(env === \"dev\" && devProps)}\n        baseClassName={baseClassName}\n        sx={{\n          ...sx,\n          color: color,\n          bgcolor: bgColor,\n          border: generateBorder(border),\n          borderRadius: generateRadius(borderRadius),\n          padding: generateSide(\"padding\", padding),\n          margin: generateSide(\"margin\", margin),\n\n          \"&.material-icons\": {\n            fontSize: sx.fontSize || \"inherit\",\n            color: color,\n            lineHeight: \"1em\",\n          },\n          \"&:hover\": {\n            color: hoverColor,\n            fontSize: hoverFontSize,\n          },\n          lineHeight: \"1em\",\n          letterSpacing: 0,\n        }}\n      >\n        {icon ?? \"mood\"}\n        {/* {iconComponent ? iconComponent(props) : icon || \"mood\"} */}\n      </Icon>\n    );\n  },\n  compareProps\n);\n\nexport default XIcon;\n"]}