{"version":3,"file":"ColorLegend.cjs","names":[],"sources":["../src/Components/Elements/ColorLegend.tsx"],"sourcesContent":["import { cn } from '@undp/design-system-react/cn';\r\nimport { P } from '@undp/design-system-react/Typography';\r\n\r\nimport { Colors } from '@/Components/ColorPalette';\r\n\r\ninterface Props {\r\n  colors: string[];\r\n  colorDomain: (string | number)[];\r\n  dashedLines?: (string | number)[];\r\n  labelsToBeHidden?: (string | number)[];\r\n  colorLegendTitle?: string;\r\n  showNAColor: boolean;\r\n  width?: number;\r\n  isCenter?: boolean;\r\n  className?: string;\r\n}\r\n\r\nexport function ColorLegend(props: Props) {\r\n  const {\r\n    colorLegendTitle,\r\n    colorDomain,\r\n    colors,\r\n    showNAColor,\r\n    width,\r\n    isCenter,\r\n    className,\r\n    labelsToBeHidden = [],\r\n  } = props;\r\n\r\n  return (\r\n    <div\r\n      className={cn('flex leading-0 pb-3', isCenter && 'justify-center', className)}\r\n      style={{ maxWidth: width ? `${width}px` : 'none' }}\r\n    >\r\n      <div>\r\n        {colorLegendTitle && colorLegendTitle !== '' ? (\r\n          <P size='sm' marginBottom='2xs' className={isCenter ? 'text-center' : ''}>\r\n            {colorLegendTitle}\r\n          </P>\r\n        ) : null}\r\n        <div className='flex flex-wrap mb-0 gap-3.5'>\r\n          {colorDomain.map((d, i) =>\r\n            labelsToBeHidden.includes(d) ? null : (\r\n              // biome-ignore lint/suspicious/noArrayIndexKey: index is the unique identifier\r\n              <div key={i} className='flex items-center gap-1'>\r\n                <div\r\n                  className='w-3 h-3 rounded-full'\r\n                  style={{ backgroundColor: colors[i % colors.length] }}\r\n                />\r\n                {d === '' ? null : (\r\n                  <P size='sm' marginBottom='none'>\r\n                    {d}\r\n                  </P>\r\n                )}\r\n              </div>\r\n            ),\r\n          )}\r\n          {showNAColor ? (\r\n            <div className='flex items-center gap-1'>\r\n              <div className='w-3 h-3 rounded-full' style={{ backgroundColor: Colors.gray }} />\r\n              <P size='sm' marginBottom='none'>\r\n                NA\r\n              </P>\r\n            </div>\r\n          ) : null}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"mappings":"kQAiBA,SAAgB,EAAY,EAAc,CACxC,GAAM,CACJ,mBACA,cACA,SACA,cACA,QACA,WACA,YACA,mBAAmB,CAAC,GAClB,EAEJ,OACE,EAAA,EAAA,KAAC,MAAD,CACE,WAAA,EAAA,EAAA,IAAc,sBAAuB,GAAY,iBAAkB,CAAS,EAC5E,MAAO,CAAE,SAAU,EAAQ,GAAG,EAAM,IAAM,MAAO,YAEjD,EAAA,EAAA,MAAC,MAAD,CAAA,SAAA,CACG,GAAoB,IAAqB,IACxC,EAAA,EAAA,KAAC,EAAA,EAAD,CAAG,KAAK,KAAK,aAAa,MAAM,UAAW,EAAW,cAAgB,YACnE,CACA,CAAA,EACD,MACJ,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,uCAAf,CACG,EAAY,KAAK,EAAG,IACnB,EAAiB,SAAS,CAAC,EAAI,MAE7B,EAAA,EAAA,MAAC,MAAD,CAAa,UAAU,mCAAvB,EACE,EAAA,EAAA,KAAC,MAAD,CACE,UAAU,uBACV,MAAO,CAAE,gBAAiB,EAAO,EAAI,EAAO,OAAQ,CACrD,CAAA,EACA,IAAM,GAAK,MACV,EAAA,EAAA,KAAC,EAAA,EAAD,CAAG,KAAK,KAAK,aAAa,gBACvB,CACA,CAAA,CAEF,GAVK,CAUL,CAET,EACC,GACC,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,mCAAf,EACE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,uBAAuB,MAAO,CAAE,gBAAiB,EAAA,OAAO,IAAK,CAAI,CAAA,GAChF,EAAA,EAAA,KAAC,EAAA,EAAD,CAAG,KAAK,KAAK,aAAa,gBAAO,IAE9B,CAAA,CACA,IACH,IACD,GACF,CAAA,CAAA,CACF,CAAA,CAET"}