@undp/data-viz 1.5.7 → 1.5.9

package/dist/{Typography-k-kOjICQ.cjs.map → Typography-BDULiwlF.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Typography-k-kOjICQ.cjs","sources":["../node_modules/@undp/design-system-react/dist/Typography.js"],"sourcesContent":["import { j as n } from \"./jsx-runtime-OVHDjVDe.js\";\nimport { c as o } from \"./index-CHPV5EwG.js\";\nimport { c as s } from \"./utils-D_Pof5Gy.js\";\nconst x = o(\"mt-0 ml-0 mr-0\", {\n  variants: {\n    size: {\n      xs: \"text-xs\",\n      sm: \"text-sm\",\n      base: \"text-base\",\n      \"base-responsive\": \"text-base md:text-xl\",\n      lg: \"text-lg\",\n      xl: \"text-xl\"\n    },\n    leading: {\n      none: \"leading-none\",\n      xs: \"leading-[1.25]\",\n      sm: \"leading-[1.375]\",\n      base: \"leading-[1.4]\",\n      lg: \"leading-[1.625]\",\n      xl: \"leading-[2]\"\n    },\n    marginBottom: {\n      none: \"mb-0\",\n      \"3xs\": \"mb-1\",\n      \"2xs\": \"mb-2\",\n      xs: \"mb-3\",\n      sm: \"mb-4\",\n      base: \"mb-5\",\n      lg: \"mb-6\",\n      xl: \"mb-7\"\n    }\n  },\n  defaultVariants: {\n    size: \"base-responsive\",\n    leading: \"base\",\n    marginBottom: \"base\"\n  }\n});\nfunction u({\n  children: e,\n  className: t,\n  size: a,\n  leading: m,\n  marginBottom: i,\n  ...l\n}) {\n  return /* @__PURE__ */ n.jsx(\"p\", { ...l, className: s(x({ size: a, leading: m, marginBottom: i }), t), children: e });\n}\nconst b = o(\"mt-0 ml-0 mr-0 p-0 font-bold uppercase\", {\n  variants: {\n    marginBottom: {\n      none: \"mb-0\",\n      \"2xs\": \"mb-1\",\n      xs: \"mb-2\",\n      sm: \"mb-3\",\n      \"base-responsive\": \"mb-3 md:mb-4\",\n      base: \"mb-4\",\n      lg: \"mb-5\",\n      xl: \"mb-6\"\n    },\n    size: {\n      base: \"text-[2.938rem] md:text-[5.125rem] lg:text-[6.25rem] tracking-[0.06rem] leading-[1.08]\",\n      sm: \"text-[2.5rem] md:text-[2.813rem] lg:text-[3.438rem] leading-[1.1]\"\n    }\n  },\n  defaultVariants: {\n    marginBottom: \"base-responsive\",\n    size: \"base\"\n  }\n});\nfunction p({\n  children: e,\n  className: t,\n  marginBottom: a,\n  size: m,\n  ...i\n}) {\n  return /* @__PURE__ */ n.jsx(\"h1\", { ...i, className: s(b({ marginBottom: a, size: m }), t), children: e });\n}\nconst r = o(\"mt-0 ml-0 mr-0 p-0\", {\n  variants: {\n    marginBottom: {\n      none: \"mb-0\",\n      \"2xs\": \"mb-1\",\n      xs: \"mb-2\",\n      sm: \"mb-3\",\n      \"base-responsive\": \"mb-3 md:mb-4\",\n      base: \"mb-4\",\n      lg: \"mb-5\",\n      xl: \"mb-6\"\n    }\n  },\n  defaultVariants: { marginBottom: \"base-responsive\" }\n});\nfunction f({\n  children: e,\n  className: t,\n  marginBottom: a,\n  ...m\n}) {\n  return /* @__PURE__ */ n.jsx(\n    \"h2\",\n    {\n      ...m,\n      className: s(\n        \"text-[2.5rem] md:text-[2.813rem] lg:text-[3.438rem] font-bold leading-[1.1]\",\n        r({ marginBottom: a }),\n        t\n      ),\n      children: e\n    }\n  );\n}\nfunction h({\n  children: e,\n  className: t,\n  marginBottom: a,\n  ...m\n}) {\n  return /* @__PURE__ */ n.jsx(\n    \"h3\",\n    {\n      ...m,\n      className: s(\n        \"text-[1.875rem] md:text-[2.188rem] font-semibold leading-[1.15]\",\n        r({ marginBottom: a }),\n        t\n      ),\n      children: e\n    }\n  );\n}\nfunction j({\n  children: e,\n  className: t,\n  marginBottom: a,\n  ...m\n}) {\n  return /* @__PURE__ */ n.jsx(\n    \"h4\",\n    {\n      ...m,\n      className: s(\n        \"text-[1.563rem] md:text-[2.188rem] font-normal leading-[1.15]\",\n        r({ marginBottom: a }),\n        t\n      ),\n      children: e\n    }\n  );\n}\nfunction k({\n  children: e,\n  className: t,\n  marginBottom: a,\n  ...m\n}) {\n  return /* @__PURE__ */ n.jsx(\n    \"h5\",\n    {\n      ...m,\n      className: s(\n        \"text-[1.25rem] md:text-[1.563rem] font-normal leading-[1.15]\",\n        r({ marginBottom: a }),\n        t\n      ),\n      children: e\n    }\n  );\n}\nfunction v({\n  children: e,\n  className: t,\n  marginBottom: a,\n  ...m\n}) {\n  return /* @__PURE__ */ n.jsx(\n    \"h6\",\n    {\n      ...m,\n      className: s(\n        \"text-base font-bold leading-[1.15] uppercase tracking-[0.48px]\",\n        r({ marginBottom: a }),\n        t\n      ),\n      children: e\n    }\n  );\n}\nfunction N({\n  children: e,\n  className: t,\n  marginBottom: a,\n  ...m\n}) {\n  return /* @__PURE__ */ n.jsx(\n    \"cite\",\n    {\n      ...m,\n      className: s(\n        \"text-xl md:text-2xl leading-[1.1] block font-normal\",\n        r({ marginBottom: a }),\n        t\n      ),\n      children: e\n    }\n  );\n}\nfunction y({ children: e, className: t, ...a }) {\n  return /* @__PURE__ */ n.jsx(\n    \"code\",\n    {\n      ...a,\n      className: s(\n        \"font-mono mt-0 text-base bg-primary-gray-200 dark:bg-primary-gray-600 px-2 pb-2 text-primary-black dark:text-primary-white\",\n        t\n      ),\n      children: e\n    }\n  );\n}\nfunction B({\n  children: e,\n  className: t,\n  marginBottom: a,\n  ...m\n}) {\n  return /* @__PURE__ */ n.jsx(\n    \"blockquote\",\n    {\n      ...m,\n      className: s(\n        \"text-[1.625rem] md:text-[2.188rem] font-semibold leading-[1.1] md:leading-[1.25]\",\n        r({ marginBottom: a }),\n        t\n      ),\n      children: e\n    }\n  );\n}\nfunction H({ children: e, className: t, ...a }) {\n  return /* @__PURE__ */ n.jsx(\n    \"a\",\n    {\n      ...a,\n      className: s(\n        \"undp-link light text-primary-black dark:text-primary-white dark:text-primary-white bg-double-red dark:bg-double-white\",\n        \"cursor-pointer no-underline focus-visible:outline-hidden focus-visible:shadow-[0_0_0_#0468b1]\",\n        t\n      ),\n      children: e\n    }\n  );\n}\nexport {\n  H as A,\n  B as Blockquote,\n  N as Cite,\n  y as Code,\n  p as H1,\n  f as H2,\n  h as H3,\n  j as H4,\n  k as H5,\n  v as H6,\n  u as P\n};\n//# sourceMappingURL=Typography.js.map\n"],"names":["x","o","u","e","t","m","l","n","s","r","f","h","k","H"],"mappings":"8DAGMA,EAAIC,EAAAA,EAAE,iBAAkB,CAC5B,SAAU,CACR,KAAM,CACJ,GAAI,UACJ,GAAI,UACJ,KAAM,YACN,kBAAmB,uBACnB,GAAI,UACJ,GAAI,SACV,EACI,QAAS,CACP,KAAM,eACN,GAAI,iBACJ,GAAI,kBACJ,KAAM,gBACN,GAAI,kBACJ,GAAI,aACV,EACI,aAAc,CACZ,KAAM,OACN,MAAO,OACP,MAAO,OACP,GAAI,OACJ,GAAI,OACJ,KAAM,OACN,GAAI,OACJ,GAAI,MACV,CACA,EACE,gBAAiB,CACf,KAAM,kBACN,QAAS,OACT,aAAc,MAClB,CACA,CAAC,EACD,SAASC,EAAE,CACT,SAAUC,EACV,UAAWC,EACX,KAAM,EACN,QAASC,EACT,aAAc,EACd,GAAGC,CACL,EAAG,CACD,OAAuBC,EAAAA,GAAE,IAAI,IAAK,CAAE,GAAGD,EAAG,UAAWE,KAAER,EAAE,CAAE,KAAM,EAAG,QAASK,EAAG,aAAc,CAAC,CAAE,EAAGD,CAAC,EAAG,SAAUD,EAAG,CACvH,CAgCA,MAAMM,EAAIR,EAAAA,EAAE,qBAAsB,CAChC,SAAU,CACR,aAAc,CACZ,KAAM,OACN,MAAO,OACP,GAAI,OACJ,GAAI,OACJ,kBAAmB,eACnB,KAAM,OACN,GAAI,OACJ,GAAI,MACV,CACA,EACE,gBAAiB,CAAE,aAAc,iBAAiB,CACpD,CAAC,EACD,SAASS,EAAE,CACT,SAAUP,EACV,UAAWC,EACX,aAAc,EACd,GAAGC,CACL,EAAG,CACD,OAAuBE,EAAAA,GAAE,IACvB,KACA,CACE,GAAGF,EACH,UAAWG,EAAAA,GACT,8EACAC,EAAE,CAAE,aAAc,EAAG,EACrBL,CACR,EACM,SAAUD,CAChB,CACA,CACA,CACA,SAASQ,EAAE,CACT,SAAUR,EACV,UAAWC,EACX,aAAc,EACd,GAAGC,CACL,EAAG,CACD,OAAuBE,EAAAA,GAAE,IACvB,KACA,CACE,GAAGF,EACH,UAAWG,EAAAA,GACT,kEACAC,EAAE,CAAE,aAAc,EAAG,EACrBL,CACR,EACM,SAAUD,CAChB,CACA,CACA,CAoBA,SAASS,EAAE,CACT,SAAUT,EACV,UAAWC,EACX,aAAc,EACd,GAAGC,CACL,EAAG,CACD,OAAuBE,EAAAA,GAAE,IACvB,KACA,CACE,GAAGF,EACH,UAAWG,EAAAA,GACT,+DACAC,EAAE,CAAE,aAAc,EAAG,EACrBL,CACR,EACM,SAAUD,CAChB,CACA,CACA,CAuEA,SAASU,EAAE,CAAE,SAAUV,EAAG,UAAWC,EAAG,GAAG,GAAK,CAC9C,OAAuBG,EAAAA,GAAE,IACvB,IACA,CACE,GAAG,EACH,UAAWC,EAAAA,GACT,wHACA,gGACAJ,CACR,EACM,SAAUD,CAChB,CACA,CACA","x_google_ignoreList":[0]}
+{"version":3,"file":"Typography-BDULiwlF.cjs","sources":["../node_modules/@undp/design-system-react/dist/Typography.js"],"sourcesContent":["import { j as n } from \"./jsx-runtime-BzflLqGi.js\";\nimport { c as o } from \"./index-CHPV5EwG.js\";\nimport { c as s } from \"./utils-D_Pof5Gy.js\";\nconst x = o(\"mt-0 ml-0 mr-0\", {\n  variants: {\n    size: {\n      xs: \"text-xs\",\n      sm: \"text-sm\",\n      base: \"text-base\",\n      \"base-responsive\": \"text-base md:text-xl\",\n      lg: \"text-lg\",\n      xl: \"text-xl\"\n    },\n    leading: {\n      none: \"leading-none\",\n      xs: \"leading-[1.25]\",\n      sm: \"leading-[1.375]\",\n      base: \"leading-[1.4]\",\n      lg: \"leading-[1.625]\",\n      xl: \"leading-[2]\"\n    },\n    marginBottom: {\n      none: \"mb-0\",\n      \"3xs\": \"mb-1\",\n      \"2xs\": \"mb-2\",\n      xs: \"mb-3\",\n      sm: \"mb-4\",\n      base: \"mb-5\",\n      lg: \"mb-6\",\n      xl: \"mb-7\"\n    }\n  },\n  defaultVariants: {\n    size: \"base-responsive\",\n    leading: \"base\",\n    marginBottom: \"base\"\n  }\n});\nfunction u({\n  children: e,\n  className: t,\n  size: a,\n  leading: m,\n  marginBottom: i,\n  ...l\n}) {\n  return /* @__PURE__ */ n.jsx(\"p\", { ...l, className: s(x({ size: a, leading: m, marginBottom: i }), t), children: e });\n}\nconst b = o(\"mt-0 ml-0 mr-0 p-0 font-bold uppercase\", {\n  variants: {\n    marginBottom: {\n      none: \"mb-0\",\n      \"2xs\": \"mb-1\",\n      xs: \"mb-2\",\n      sm: \"mb-3\",\n      \"base-responsive\": \"mb-3 md:mb-4\",\n      base: \"mb-4\",\n      lg: \"mb-5\",\n      xl: \"mb-6\"\n    },\n    size: {\n      base: \"text-[2.938rem] md:text-[5.125rem] lg:text-[6.25rem] tracking-[0.06rem] leading-[1.08]\",\n      sm: \"text-[2.5rem] md:text-[2.813rem] lg:text-[3.438rem] leading-[1.1]\"\n    }\n  },\n  defaultVariants: {\n    marginBottom: \"base-responsive\",\n    size: \"base\"\n  }\n});\nfunction p({\n  children: e,\n  className: t,\n  marginBottom: a,\n  size: m,\n  ...i\n}) {\n  return /* @__PURE__ */ n.jsx(\"h1\", { ...i, className: s(b({ marginBottom: a, size: m }), t), children: e });\n}\nconst r = o(\"mt-0 ml-0 mr-0 p-0\", {\n  variants: {\n    marginBottom: {\n      none: \"mb-0\",\n      \"2xs\": \"mb-1\",\n      xs: \"mb-2\",\n      sm: \"mb-3\",\n      \"base-responsive\": \"mb-3 md:mb-4\",\n      base: \"mb-4\",\n      lg: \"mb-5\",\n      xl: \"mb-6\"\n    }\n  },\n  defaultVariants: { marginBottom: \"base-responsive\" }\n});\nfunction f({\n  children: e,\n  className: t,\n  marginBottom: a,\n  ...m\n}) {\n  return /* @__PURE__ */ n.jsx(\n    \"h2\",\n    {\n      ...m,\n      className: s(\n        \"text-[2.5rem] md:text-[2.813rem] lg:text-[3.438rem] font-bold leading-[1.1]\",\n        r({ marginBottom: a }),\n        t\n      ),\n      children: e\n    }\n  );\n}\nfunction h({\n  children: e,\n  className: t,\n  marginBottom: a,\n  ...m\n}) {\n  return /* @__PURE__ */ n.jsx(\n    \"h3\",\n    {\n      ...m,\n      className: s(\n        \"text-[1.875rem] md:text-[2.188rem] font-semibold leading-[1.15]\",\n        r({ marginBottom: a }),\n        t\n      ),\n      children: e\n    }\n  );\n}\nfunction j({\n  children: e,\n  className: t,\n  marginBottom: a,\n  ...m\n}) {\n  return /* @__PURE__ */ n.jsx(\n    \"h4\",\n    {\n      ...m,\n      className: s(\n        \"text-[1.563rem] md:text-[2.188rem] font-normal leading-[1.15]\",\n        r({ marginBottom: a }),\n        t\n      ),\n      children: e\n    }\n  );\n}\nfunction k({\n  children: e,\n  className: t,\n  marginBottom: a,\n  ...m\n}) {\n  return /* @__PURE__ */ n.jsx(\n    \"h5\",\n    {\n      ...m,\n      className: s(\n        \"text-[1.25rem] md:text-[1.563rem] font-normal leading-[1.15]\",\n        r({ marginBottom: a }),\n        t\n      ),\n      children: e\n    }\n  );\n}\nfunction v({\n  children: e,\n  className: t,\n  marginBottom: a,\n  ...m\n}) {\n  return /* @__PURE__ */ n.jsx(\n    \"h6\",\n    {\n      ...m,\n      className: s(\n        \"text-base font-bold leading-[1.15] uppercase tracking-[0.48px]\",\n        r({ marginBottom: a }),\n        t\n      ),\n      children: e\n    }\n  );\n}\nfunction N({\n  children: e,\n  className: t,\n  marginBottom: a,\n  ...m\n}) {\n  return /* @__PURE__ */ n.jsx(\n    \"cite\",\n    {\n      ...m,\n      className: s(\n        \"text-xl md:text-2xl leading-[1.1] block font-normal\",\n        r({ marginBottom: a }),\n        t\n      ),\n      children: e\n    }\n  );\n}\nfunction y({ children: e, className: t, ...a }) {\n  return /* @__PURE__ */ n.jsx(\n    \"code\",\n    {\n      ...a,\n      className: s(\n        \"font-mono mt-0 text-base bg-primary-gray-200 dark:bg-primary-gray-600 px-2 pb-2 text-primary-black dark:text-primary-white\",\n        t\n      ),\n      children: e\n    }\n  );\n}\nfunction B({\n  children: e,\n  className: t,\n  marginBottom: a,\n  ...m\n}) {\n  return /* @__PURE__ */ n.jsx(\n    \"blockquote\",\n    {\n      ...m,\n      className: s(\n        \"text-[1.625rem] md:text-[2.188rem] font-semibold leading-[1.1] md:leading-[1.25]\",\n        r({ marginBottom: a }),\n        t\n      ),\n      children: e\n    }\n  );\n}\nfunction H({ children: e, className: t, ...a }) {\n  return /* @__PURE__ */ n.jsx(\n    \"a\",\n    {\n      ...a,\n      className: s(\n        \"undp-link light text-primary-black dark:text-primary-white dark:text-primary-white bg-double-red dark:bg-double-white\",\n        \"cursor-pointer no-underline focus-visible:outline-hidden focus-visible:shadow-[0_0_0_#0468b1]\",\n        t\n      ),\n      children: e\n    }\n  );\n}\nexport {\n  H as A,\n  B as Blockquote,\n  N as Cite,\n  y as Code,\n  p as H1,\n  f as H2,\n  h as H3,\n  j as H4,\n  k as H5,\n  v as H6,\n  u as P\n};\n//# sourceMappingURL=Typography.js.map\n"],"names":["x","o","u","e","t","m","l","n","s","r","f","h","k","H"],"mappings":"8DAGMA,EAAIC,EAAAA,EAAE,iBAAkB,CAC5B,SAAU,CACR,KAAM,CACJ,GAAI,UACJ,GAAI,UACJ,KAAM,YACN,kBAAmB,uBACnB,GAAI,UACJ,GAAI,SACV,EACI,QAAS,CACP,KAAM,eACN,GAAI,iBACJ,GAAI,kBACJ,KAAM,gBACN,GAAI,kBACJ,GAAI,aACV,EACI,aAAc,CACZ,KAAM,OACN,MAAO,OACP,MAAO,OACP,GAAI,OACJ,GAAI,OACJ,KAAM,OACN,GAAI,OACJ,GAAI,MACV,CACA,EACE,gBAAiB,CACf,KAAM,kBACN,QAAS,OACT,aAAc,MAClB,CACA,CAAC,EACD,SAASC,EAAE,CACT,SAAUC,EACV,UAAWC,EACX,KAAM,EACN,QAASC,EACT,aAAc,EACd,GAAGC,CACL,EAAG,CACD,OAAuBC,EAAAA,GAAE,IAAI,IAAK,CAAE,GAAGD,EAAG,UAAWE,KAAER,EAAE,CAAE,KAAM,EAAG,QAASK,EAAG,aAAc,CAAC,CAAE,EAAGD,CAAC,EAAG,SAAUD,EAAG,CACvH,CAgCA,MAAMM,EAAIR,EAAAA,EAAE,qBAAsB,CAChC,SAAU,CACR,aAAc,CACZ,KAAM,OACN,MAAO,OACP,GAAI,OACJ,GAAI,OACJ,kBAAmB,eACnB,KAAM,OACN,GAAI,OACJ,GAAI,MACV,CACA,EACE,gBAAiB,CAAE,aAAc,iBAAiB,CACpD,CAAC,EACD,SAASS,EAAE,CACT,SAAUP,EACV,UAAWC,EACX,aAAc,EACd,GAAGC,CACL,EAAG,CACD,OAAuBE,EAAAA,GAAE,IACvB,KACA,CACE,GAAGF,EACH,UAAWG,EAAAA,GACT,8EACAC,EAAE,CAAE,aAAc,EAAG,EACrBL,CACR,EACM,SAAUD,CAChB,CACA,CACA,CACA,SAASQ,EAAE,CACT,SAAUR,EACV,UAAWC,EACX,aAAc,EACd,GAAGC,CACL,EAAG,CACD,OAAuBE,EAAAA,GAAE,IACvB,KACA,CACE,GAAGF,EACH,UAAWG,EAAAA,GACT,kEACAC,EAAE,CAAE,aAAc,EAAG,EACrBL,CACR,EACM,SAAUD,CAChB,CACA,CACA,CAoBA,SAASS,EAAE,CACT,SAAUT,EACV,UAAWC,EACX,aAAc,EACd,GAAGC,CACL,EAAG,CACD,OAAuBE,EAAAA,GAAE,IACvB,KACA,CACE,GAAGF,EACH,UAAWG,EAAAA,GACT,+DACAC,EAAE,CAAE,aAAc,EAAG,EACrBL,CACR,EACM,SAAUD,CAChB,CACA,CACA,CAuEA,SAASU,EAAE,CAAE,SAAUV,EAAG,UAAWC,EAAG,GAAG,GAAK,CAC9C,OAAuBG,EAAAA,GAAE,IACvB,IACA,CACE,GAAG,EACH,UAAWC,EAAAA,GACT,wHACA,gGACAJ,CACR,EACM,SAAUD,CAChB,CACA,CACA","x_google_ignoreList":[0]}

package/dist/{Typography-Ctgfl1J5.js → Typography-LmZ9LEpe.js}

@@ -1,4 +1,4 @@
-import { a as n, m as s, b as r } from "./index-CHPV5EwG-BPSP-7Jg.js";
+import { a as n, m as s, b as r } from "./index-CHPV5EwG-DBWUSD9b.js";
 const d = r("mt-0 ml-0 mr-0", {
   variants: {
     size: {
@@ -137,4 +137,4 @@ export {
   u as k,
   x as u
 };
-//# sourceMappingURL=Typography-Ctgfl1J5.js.map
+//# sourceMappingURL=Typography-LmZ9LEpe.js.map

package/dist/{Typography-Ctgfl1J5.js.map → Typography-LmZ9LEpe.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Typography-Ctgfl1J5.js","sources":["../node_modules/@undp/design-system-react/dist/Typography.js"],"sourcesContent":["import { j as n } from \"./jsx-runtime-OVHDjVDe.js\";\nimport { c as o } from \"./index-CHPV5EwG.js\";\nimport { c as s } from \"./utils-D_Pof5Gy.js\";\nconst x = o(\"mt-0 ml-0 mr-0\", {\n  variants: {\n    size: {\n      xs: \"text-xs\",\n      sm: \"text-sm\",\n      base: \"text-base\",\n      \"base-responsive\": \"text-base md:text-xl\",\n      lg: \"text-lg\",\n      xl: \"text-xl\"\n    },\n    leading: {\n      none: \"leading-none\",\n      xs: \"leading-[1.25]\",\n      sm: \"leading-[1.375]\",\n      base: \"leading-[1.4]\",\n      lg: \"leading-[1.625]\",\n      xl: \"leading-[2]\"\n    },\n    marginBottom: {\n      none: \"mb-0\",\n      \"3xs\": \"mb-1\",\n      \"2xs\": \"mb-2\",\n      xs: \"mb-3\",\n      sm: \"mb-4\",\n      base: \"mb-5\",\n      lg: \"mb-6\",\n      xl: \"mb-7\"\n    }\n  },\n  defaultVariants: {\n    size: \"base-responsive\",\n    leading: \"base\",\n    marginBottom: \"base\"\n  }\n});\nfunction u({\n  children: e,\n  className: t,\n  size: a,\n  leading: m,\n  marginBottom: i,\n  ...l\n}) {\n  return /* @__PURE__ */ n.jsx(\"p\", { ...l, className: s(x({ size: a, leading: m, marginBottom: i }), t), children: e });\n}\nconst b = o(\"mt-0 ml-0 mr-0 p-0 font-bold uppercase\", {\n  variants: {\n    marginBottom: {\n      none: \"mb-0\",\n      \"2xs\": \"mb-1\",\n      xs: \"mb-2\",\n      sm: \"mb-3\",\n      \"base-responsive\": \"mb-3 md:mb-4\",\n      base: \"mb-4\",\n      lg: \"mb-5\",\n      xl: \"mb-6\"\n    },\n    size: {\n      base: \"text-[2.938rem] md:text-[5.125rem] lg:text-[6.25rem] tracking-[0.06rem] leading-[1.08]\",\n      sm: \"text-[2.5rem] md:text-[2.813rem] lg:text-[3.438rem] leading-[1.1]\"\n    }\n  },\n  defaultVariants: {\n    marginBottom: \"base-responsive\",\n    size: \"base\"\n  }\n});\nfunction p({\n  children: e,\n  className: t,\n  marginBottom: a,\n  size: m,\n  ...i\n}) {\n  return /* @__PURE__ */ n.jsx(\"h1\", { ...i, className: s(b({ marginBottom: a, size: m }), t), children: e });\n}\nconst r = o(\"mt-0 ml-0 mr-0 p-0\", {\n  variants: {\n    marginBottom: {\n      none: \"mb-0\",\n      \"2xs\": \"mb-1\",\n      xs: \"mb-2\",\n      sm: \"mb-3\",\n      \"base-responsive\": \"mb-3 md:mb-4\",\n      base: \"mb-4\",\n      lg: \"mb-5\",\n      xl: \"mb-6\"\n    }\n  },\n  defaultVariants: { marginBottom: \"base-responsive\" }\n});\nfunction f({\n  children: e,\n  className: t,\n  marginBottom: a,\n  ...m\n}) {\n  return /* @__PURE__ */ n.jsx(\n    \"h2\",\n    {\n      ...m,\n      className: s(\n        \"text-[2.5rem] md:text-[2.813rem] lg:text-[3.438rem] font-bold leading-[1.1]\",\n        r({ marginBottom: a }),\n        t\n      ),\n      children: e\n    }\n  );\n}\nfunction h({\n  children: e,\n  className: t,\n  marginBottom: a,\n  ...m\n}) {\n  return /* @__PURE__ */ n.jsx(\n    \"h3\",\n    {\n      ...m,\n      className: s(\n        \"text-[1.875rem] md:text-[2.188rem] font-semibold leading-[1.15]\",\n        r({ marginBottom: a }),\n        t\n      ),\n      children: e\n    }\n  );\n}\nfunction j({\n  children: e,\n  className: t,\n  marginBottom: a,\n  ...m\n}) {\n  return /* @__PURE__ */ n.jsx(\n    \"h4\",\n    {\n      ...m,\n      className: s(\n        \"text-[1.563rem] md:text-[2.188rem] font-normal leading-[1.15]\",\n        r({ marginBottom: a }),\n        t\n      ),\n      children: e\n    }\n  );\n}\nfunction k({\n  children: e,\n  className: t,\n  marginBottom: a,\n  ...m\n}) {\n  return /* @__PURE__ */ n.jsx(\n    \"h5\",\n    {\n      ...m,\n      className: s(\n        \"text-[1.25rem] md:text-[1.563rem] font-normal leading-[1.15]\",\n        r({ marginBottom: a }),\n        t\n      ),\n      children: e\n    }\n  );\n}\nfunction v({\n  children: e,\n  className: t,\n  marginBottom: a,\n  ...m\n}) {\n  return /* @__PURE__ */ n.jsx(\n    \"h6\",\n    {\n      ...m,\n      className: s(\n        \"text-base font-bold leading-[1.15] uppercase tracking-[0.48px]\",\n        r({ marginBottom: a }),\n        t\n      ),\n      children: e\n    }\n  );\n}\nfunction N({\n  children: e,\n  className: t,\n  marginBottom: a,\n  ...m\n}) {\n  return /* @__PURE__ */ n.jsx(\n    \"cite\",\n    {\n      ...m,\n      className: s(\n        \"text-xl md:text-2xl leading-[1.1] block font-normal\",\n        r({ marginBottom: a }),\n        t\n      ),\n      children: e\n    }\n  );\n}\nfunction y({ children: e, className: t, ...a }) {\n  return /* @__PURE__ */ n.jsx(\n    \"code\",\n    {\n      ...a,\n      className: s(\n        \"font-mono mt-0 text-base bg-primary-gray-200 dark:bg-primary-gray-600 px-2 pb-2 text-primary-black dark:text-primary-white\",\n        t\n      ),\n      children: e\n    }\n  );\n}\nfunction B({\n  children: e,\n  className: t,\n  marginBottom: a,\n  ...m\n}) {\n  return /* @__PURE__ */ n.jsx(\n    \"blockquote\",\n    {\n      ...m,\n      className: s(\n        \"text-[1.625rem] md:text-[2.188rem] font-semibold leading-[1.1] md:leading-[1.25]\",\n        r({ marginBottom: a }),\n        t\n      ),\n      children: e\n    }\n  );\n}\nfunction H({ children: e, className: t, ...a }) {\n  return /* @__PURE__ */ n.jsx(\n    \"a\",\n    {\n      ...a,\n      className: s(\n        \"undp-link light text-primary-black dark:text-primary-white dark:text-primary-white bg-double-red dark:bg-double-white\",\n        \"cursor-pointer no-underline focus-visible:outline-hidden focus-visible:shadow-[0_0_0_#0468b1]\",\n        t\n      ),\n      children: e\n    }\n  );\n}\nexport {\n  H as A,\n  B as Blockquote,\n  N as Cite,\n  y as Code,\n  p as H1,\n  f as H2,\n  h as H3,\n  j as H4,\n  k as H5,\n  v as H6,\n  u as P\n};\n//# sourceMappingURL=Typography.js.map\n"],"names":["x","o","u","a","m","i","l","n","s","r","f","h","k","H"],"mappings":"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","x_google_ignoreList":[0]}
+{"version":3,"file":"Typography-LmZ9LEpe.js","sources":["../node_modules/@undp/design-system-react/dist/Typography.js"],"sourcesContent":["import { j as n } from \"./jsx-runtime-BzflLqGi.js\";\nimport { c as o } from \"./index-CHPV5EwG.js\";\nimport { c as s } from \"./utils-D_Pof5Gy.js\";\nconst x = o(\"mt-0 ml-0 mr-0\", {\n  variants: {\n    size: {\n      xs: \"text-xs\",\n      sm: \"text-sm\",\n      base: \"text-base\",\n      \"base-responsive\": \"text-base md:text-xl\",\n      lg: \"text-lg\",\n      xl: \"text-xl\"\n    },\n    leading: {\n      none: \"leading-none\",\n      xs: \"leading-[1.25]\",\n      sm: \"leading-[1.375]\",\n      base: \"leading-[1.4]\",\n      lg: \"leading-[1.625]\",\n      xl: \"leading-[2]\"\n    },\n    marginBottom: {\n      none: \"mb-0\",\n      \"3xs\": \"mb-1\",\n      \"2xs\": \"mb-2\",\n      xs: \"mb-3\",\n      sm: \"mb-4\",\n      base: \"mb-5\",\n      lg: \"mb-6\",\n      xl: \"mb-7\"\n    }\n  },\n  defaultVariants: {\n    size: \"base-responsive\",\n    leading: \"base\",\n    marginBottom: \"base\"\n  }\n});\nfunction u({\n  children: e,\n  className: t,\n  size: a,\n  leading: m,\n  marginBottom: i,\n  ...l\n}) {\n  return /* @__PURE__ */ n.jsx(\"p\", { ...l, className: s(x({ size: a, leading: m, marginBottom: i }), t), children: e });\n}\nconst b = o(\"mt-0 ml-0 mr-0 p-0 font-bold uppercase\", {\n  variants: {\n    marginBottom: {\n      none: \"mb-0\",\n      \"2xs\": \"mb-1\",\n      xs: \"mb-2\",\n      sm: \"mb-3\",\n      \"base-responsive\": \"mb-3 md:mb-4\",\n      base: \"mb-4\",\n      lg: \"mb-5\",\n      xl: \"mb-6\"\n    },\n    size: {\n      base: \"text-[2.938rem] md:text-[5.125rem] lg:text-[6.25rem] tracking-[0.06rem] leading-[1.08]\",\n      sm: \"text-[2.5rem] md:text-[2.813rem] lg:text-[3.438rem] leading-[1.1]\"\n    }\n  },\n  defaultVariants: {\n    marginBottom: \"base-responsive\",\n    size: \"base\"\n  }\n});\nfunction p({\n  children: e,\n  className: t,\n  marginBottom: a,\n  size: m,\n  ...i\n}) {\n  return /* @__PURE__ */ n.jsx(\"h1\", { ...i, className: s(b({ marginBottom: a, size: m }), t), children: e });\n}\nconst r = o(\"mt-0 ml-0 mr-0 p-0\", {\n  variants: {\n    marginBottom: {\n      none: \"mb-0\",\n      \"2xs\": \"mb-1\",\n      xs: \"mb-2\",\n      sm: \"mb-3\",\n      \"base-responsive\": \"mb-3 md:mb-4\",\n      base: \"mb-4\",\n      lg: \"mb-5\",\n      xl: \"mb-6\"\n    }\n  },\n  defaultVariants: { marginBottom: \"base-responsive\" }\n});\nfunction f({\n  children: e,\n  className: t,\n  marginBottom: a,\n  ...m\n}) {\n  return /* @__PURE__ */ n.jsx(\n    \"h2\",\n    {\n      ...m,\n      className: s(\n        \"text-[2.5rem] md:text-[2.813rem] lg:text-[3.438rem] font-bold leading-[1.1]\",\n        r({ marginBottom: a }),\n        t\n      ),\n      children: e\n    }\n  );\n}\nfunction h({\n  children: e,\n  className: t,\n  marginBottom: a,\n  ...m\n}) {\n  return /* @__PURE__ */ n.jsx(\n    \"h3\",\n    {\n      ...m,\n      className: s(\n        \"text-[1.875rem] md:text-[2.188rem] font-semibold leading-[1.15]\",\n        r({ marginBottom: a }),\n        t\n      ),\n      children: e\n    }\n  );\n}\nfunction j({\n  children: e,\n  className: t,\n  marginBottom: a,\n  ...m\n}) {\n  return /* @__PURE__ */ n.jsx(\n    \"h4\",\n    {\n      ...m,\n      className: s(\n        \"text-[1.563rem] md:text-[2.188rem] font-normal leading-[1.15]\",\n        r({ marginBottom: a }),\n        t\n      ),\n      children: e\n    }\n  );\n}\nfunction k({\n  children: e,\n  className: t,\n  marginBottom: a,\n  ...m\n}) {\n  return /* @__PURE__ */ n.jsx(\n    \"h5\",\n    {\n      ...m,\n      className: s(\n        \"text-[1.25rem] md:text-[1.563rem] font-normal leading-[1.15]\",\n        r({ marginBottom: a }),\n        t\n      ),\n      children: e\n    }\n  );\n}\nfunction v({\n  children: e,\n  className: t,\n  marginBottom: a,\n  ...m\n}) {\n  return /* @__PURE__ */ n.jsx(\n    \"h6\",\n    {\n      ...m,\n      className: s(\n        \"text-base font-bold leading-[1.15] uppercase tracking-[0.48px]\",\n        r({ marginBottom: a }),\n        t\n      ),\n      children: e\n    }\n  );\n}\nfunction N({\n  children: e,\n  className: t,\n  marginBottom: a,\n  ...m\n}) {\n  return /* @__PURE__ */ n.jsx(\n    \"cite\",\n    {\n      ...m,\n      className: s(\n        \"text-xl md:text-2xl leading-[1.1] block font-normal\",\n        r({ marginBottom: a }),\n        t\n      ),\n      children: e\n    }\n  );\n}\nfunction y({ children: e, className: t, ...a }) {\n  return /* @__PURE__ */ n.jsx(\n    \"code\",\n    {\n      ...a,\n      className: s(\n        \"font-mono mt-0 text-base bg-primary-gray-200 dark:bg-primary-gray-600 px-2 pb-2 text-primary-black dark:text-primary-white\",\n        t\n      ),\n      children: e\n    }\n  );\n}\nfunction B({\n  children: e,\n  className: t,\n  marginBottom: a,\n  ...m\n}) {\n  return /* @__PURE__ */ n.jsx(\n    \"blockquote\",\n    {\n      ...m,\n      className: s(\n        \"text-[1.625rem] md:text-[2.188rem] font-semibold leading-[1.1] md:leading-[1.25]\",\n        r({ marginBottom: a }),\n        t\n      ),\n      children: e\n    }\n  );\n}\nfunction H({ children: e, className: t, ...a }) {\n  return /* @__PURE__ */ n.jsx(\n    \"a\",\n    {\n      ...a,\n      className: s(\n        \"undp-link light text-primary-black dark:text-primary-white dark:text-primary-white bg-double-red dark:bg-double-white\",\n        \"cursor-pointer no-underline focus-visible:outline-hidden focus-visible:shadow-[0_0_0_#0468b1]\",\n        t\n      ),\n      children: e\n    }\n  );\n}\nexport {\n  H as A,\n  B as Blockquote,\n  N as Cite,\n  y as Code,\n  p as H1,\n  f as H2,\n  h as H3,\n  j as H4,\n  k as H5,\n  v as H6,\n  u as P\n};\n//# sourceMappingURL=Typography.js.map\n"],"names":["x","o","u","a","m","i","l","n","s","r","f","h","k","H"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/UnitChart.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./index-CHPV5EwG-DDoeWRVt.cjs"),F=require("react"),O=require("./index-CSNtgibC.cjs"),M=require("./Typography-k-kOjICQ.cjs"),U=require("./GraphFooter.cjs"),J=require("./GraphHeader.cjs"),K=require("./Colors.cjs"),Q=require("./numberFormattingFunction-02t-wJta.cjs"),X=require("./use-in-view-sQJZ_xDO.cjs"),Y=require("./index-BW8iNx7E.cjs"),Z=require("./proxy-BHRoeZgd.cjs");function _(z){const{data:n,size:g=200,graphTitle:x,sources:R,colors:E=K.Colors.light.categoricalColors.colors,graphDescription:d,totalNoOfDots:f=100,unitPadding:G=3,gridSize:c=10,footNote:b,padding:N,backgroundColor:l=!1,graphID:H,graphDownload:k=!1,language:j="en",showColorScale:I=!0,showStrokeForWhiteDots:m=!0,note:C,dataDownload:S=!1,theme:P="light",width:r,height:h,minHeight:s=0,relativeHeight:a,ariaLabel:T,styles:u,classNames:w,animate:$=!1,precision:L=2}=z,q=F.useRef(null),y=$===!0?{duration:.5,once:!0,amount:.5}:$||{duration:0,once:!0,amount:0},W=X.useInView(q,{once:y.once,amount:y.amount}),B=O.sum(n.map(e=>e.value)),D=F.useRef(null),o=g/c,p=(o-G*2)/2;if(p<=0)return console.error("The size of single unit is less than or equal to zero. Check values for ((dimension / gridSize) - (padding * 2)) / 2 is not less than or equal to 0."),null;const v=[];return n.forEach((e,i)=>{const A=Math.round(e.value/B*f);for(let V=0;V<A;V+=1)v.push({color:E[i]})}),t.jsxRuntimeExports.jsx("div",{className:`${P||"light"} flex  ${r?"w-fit grow-0":"w-full grow"}`,dir:j==="he"||j==="ar"?"rtl":void 0,children:t.jsxRuntimeExports.jsx("div",{className:t.mo(`${l?l===!0?"bg-primary-gray-200 dark:bg-primary-gray-650 ":"":"bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${j||"en"}`,r?"w-fit":"w-full",w?.graphContainer),style:{...u?.graphContainer||{},minHeight:"inherit",...l&&l!==!0?{backgroundColor:l}:{}},id:H,ref:D,"aria-label":T||`${x?`The graph shows ${x}. `:""}${d?` ${d}`:""}`,children:t.jsxRuntimeExports.jsx("div",{className:"flex grow",style:{padding:l?N||"1rem":N||0},children:t.jsxRuntimeExports.jsxs("div",{className:"flex flex-col gap-3 w-full grow",children:[x||d||k?t.jsxRuntimeExports.jsx(J.GraphHeader,{styles:{title:u?.title,description:u?.description},classNames:{title:w?.title,description:w?.description},graphTitle:x,graphDescription:d,width:r,graphDownload:k?D.current:void 0,dataDownload:S?n.map(e=>e.data).filter(e=>e!==void 0).length>0?n.map(e=>e.data).filter(e=>e!==void 0):n.filter(e=>e!==void 0):null}):null,C?t.jsxRuntimeExports.jsx(M.f,{marginBottom:"2xs",className:"text-primary-gray-700 dark:text-primary-gray-100 font-bold",style:{width:r?`${r}px`:"100%"},children:C}):null,t.jsxRuntimeExports.jsxs("div",{className:"flex grow flex-col gap-4 justify-between",children:[t.jsxRuntimeExports.jsxs("div",{children:[I?t.jsxRuntimeExports.jsx("div",{className:"mb-4 leading-0",style:{width:r?`${r}px`:"100%"},"aria-label":"Color legend",children:t.jsxRuntimeExports.jsx("div",{className:"flex mb-0 flex-wrap gap-x-4 gap-y-1",children:n.map((e,i)=>t.jsxRuntimeExports.jsxs("div",{className:"flex gap-2 items-center",children:[t.jsxRuntimeExports.jsx("div",{className:"w-3 h-3 rounded-full",style:{backgroundColor:E[i]}}),t.jsxRuntimeExports.jsxs(M.u,{marginBottom:"none",size:"sm",className:"text-primary-gray-700 dark:text-primary-gray-100",children:[e.label,":"," ",t.jsxRuntimeExports.jsx("span",{className:"font-bold",children:Q.numberFormattingFunction(e.value,"NA",L)})]})]},i))})}):null,t.jsxRuntimeExports.jsx("div",{"aria-label":"Graph area",children:t.jsxRuntimeExports.jsx("svg",{width:`${r||g}px`,height:`${Math.max(s,h?a&&r?s?r*a>s?r*a:s:r*a:h:Math.floor((f-1)/c)*o+o/2+p+5)}px`,ref:q,direction:"ltr",viewBox:`0 0 ${r||g} ${Math.max(s,h?a&&r?s?r*a>s?r*a:s:r*a:h:Math.floor((f-1)/c)*o+o/2+p+5)}`,children:t.jsxRuntimeExports.jsx(Y.AnimatePresence,{children:t.jsxRuntimeExports.jsx("g",{children:v.map((e,i)=>t.jsxRuntimeExports.jsx(Z.motion.circle,{cx:i%c*o+o/2,cy:Math.floor(i/c)*o+o/2,style:{...m?{}:{stroke:e.color},strokeWidth:1},variants:{initial:{fill:"#fff",opacity:0,...m?{}:{stroke:e.color},strokeWidth:1},whileInView:{fill:e.color,opacity:1,...m?{}:{stroke:e.color},strokeWidth:1,transition:{duration:0,delay:y.duration/v.length*i}}},initial:"initial",animate:W?"whileInView":"initial",className:(e.color.toLowerCase()==="#fff"||e.color.toLowerCase()==="#ffffff"||e.color.toLowerCase()==="white")&&m?"stroke-primary-gray-400 dark:stroke-primary-gray-500":"",r:p},i))})})})})]}),R||b?t.jsxRuntimeExports.jsx(U.GraphFooter,{styles:{footnote:u?.footnote,source:u?.source},sources:R,footNote:b,width:r}):null]})]})})})})}exports.UnitChart=_;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./index-CHPV5EwG-DjM48pIC.cjs"),F=require("react"),O=require("./index-CSNtgibC.cjs"),M=require("./Typography-BDULiwlF.cjs"),U=require("./GraphFooter.cjs"),J=require("./GraphHeader.cjs"),K=require("./Colors.cjs"),Q=require("./numberFormattingFunction-02t-wJta.cjs"),X=require("./use-in-view-CEwlc_dd.cjs"),Y=require("./index-Cm8NIdOO.cjs"),Z=require("./proxy-CKadx4lC.cjs");function _(z){const{data:n,size:p=200,graphTitle:x,sources:R,colors:E=K.Colors.light.categoricalColors.colors,graphDescription:d,totalNoOfDots:g=100,unitPadding:G=3,gridSize:c=10,footNote:b,padding:N,backgroundColor:l=!1,graphID:H,graphDownload:C=!1,language:f="en",showColorScale:I=!0,showStrokeForWhiteDots:j=!0,note:k,dataDownload:S=!1,theme:P="light",width:r,height:m,minHeight:s=0,relativeHeight:a,ariaLabel:T,styles:u,classNames:w,animate:$=!1,precision:L=2}=z,q=F.useRef(null),y=$===!0?{duration:.5,once:!0,amount:.5}:$||{duration:0,once:!0,amount:0},W=X.useInView(q,{once:y.once,amount:y.amount}),B=O.sum(n.map(e=>e.value)),D=F.useRef(null),o=p/c,h=(o-G*2)/2;if(h<=0)return console.error("The size of single unit is less than or equal to zero. Check values for ((dimension / gridSize) - (padding * 2)) / 2 is not less than or equal to 0."),null;const v=[];return n.forEach((e,i)=>{const A=Math.round(e.value/B*g);for(let V=0;V<A;V+=1)v.push({color:E[i]})}),t.jsxRuntimeExports.jsx("div",{className:`${P||"light"} flex  ${r?"w-fit grow-0":"w-full grow"}`,dir:f==="he"||f==="ar"?"rtl":void 0,children:t.jsxRuntimeExports.jsx("div",{className:t.mo(`${l?l===!0?"bg-primary-gray-200 dark:bg-primary-gray-650 ":"":"bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${f||"en"}`,r?"w-fit":"w-full",w?.graphContainer),style:{...u?.graphContainer||{},minHeight:"inherit",...l&&l!==!0?{backgroundColor:l}:{}},id:H,ref:D,"aria-label":T||`${x?`The graph shows ${x}. `:""}${d?` ${d}`:""}`,children:t.jsxRuntimeExports.jsx("div",{className:"flex grow",style:{padding:l?N||"1rem":N||0},children:t.jsxRuntimeExports.jsxs("div",{className:"flex flex-col gap-3 w-full grow",children:[x||d||C?t.jsxRuntimeExports.jsx(J.GraphHeader,{styles:{title:u?.title,description:u?.description},classNames:{title:w?.title,description:w?.description},graphTitle:x,graphDescription:d,width:r,graphDownload:C?D.current:void 0,dataDownload:S?n.map(e=>e.data).filter(e=>e!==void 0).length>0?n.map(e=>e.data).filter(e=>e!==void 0):n.filter(e=>e!==void 0):null}):null,k?t.jsxRuntimeExports.jsx(M.f,{marginBottom:"2xs",className:"text-primary-gray-700 dark:text-primary-gray-100 font-bold",style:{width:r?`${r}px`:"100%"},children:k}):null,t.jsxRuntimeExports.jsxs("div",{className:"flex grow flex-col gap-4 justify-between",children:[t.jsxRuntimeExports.jsxs("div",{children:[I?t.jsxRuntimeExports.jsx("div",{className:"mb-4 leading-0",style:{width:r?`${r}px`:"100%"},"aria-label":"Color legend",children:t.jsxRuntimeExports.jsx("div",{className:"flex mb-0 flex-wrap gap-x-4 gap-y-1",children:n.map((e,i)=>t.jsxRuntimeExports.jsxs("div",{className:"flex gap-2 items-center",children:[t.jsxRuntimeExports.jsx("div",{className:"w-3 h-3 rounded-full",style:{backgroundColor:E[i]}}),t.jsxRuntimeExports.jsxs(M.u,{marginBottom:"none",size:"sm",className:"text-primary-gray-700 dark:text-primary-gray-100",children:[e.label,":"," ",t.jsxRuntimeExports.jsx("span",{className:"font-bold",children:Q.numberFormattingFunction(e.value,"NA",L)})]})]},i))})}):null,t.jsxRuntimeExports.jsx("div",{"aria-label":"Graph area",children:t.jsxRuntimeExports.jsx("svg",{width:`${r||p}px`,height:`${Math.max(s,m?a&&r?s?r*a>s?r*a:s:r*a:m:Math.floor((g-1)/c)*o+o/2+h+5)}px`,ref:q,direction:"ltr",viewBox:`0 0 ${r||p} ${Math.max(s,m?a&&r?s?r*a>s?r*a:s:r*a:m:Math.floor((g-1)/c)*o+o/2+h+5)}`,children:t.jsxRuntimeExports.jsx(Y.AnimatePresence,{children:t.jsxRuntimeExports.jsx("g",{children:v.map((e,i)=>t.jsxRuntimeExports.jsx(Z.motion.circle,{style:{strokeWidth:1},variants:{initial:{fill:"#fff",opacity:0,...j?{}:{stroke:e.color},strokeWidth:1},whileInView:{fill:e.color,opacity:1,...j?{}:{stroke:e.color},strokeWidth:1,cx:i%c*o+o/2,cy:Math.floor(i/c)*o+o/2,transition:{duration:0,delay:y.duration/v.length*i}}},initial:"initial",animate:W?"whileInView":"initial",className:(e.color.toLowerCase()==="#fff"||e.color.toLowerCase()==="#ffffff"||e.color.toLowerCase()==="white")&&j?"stroke-primary-gray-400 dark:stroke-primary-gray-500":"",r:h},i))})})})})]}),R||b?t.jsxRuntimeExports.jsx(U.GraphFooter,{styles:{footnote:u?.footnote,source:u?.source},sources:R,footNote:b,width:r}):null]})]})})})})}exports.UnitChart=_;
 //# sourceMappingURL=UnitChart.cjs.map

package/dist/UnitChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"UnitChart.cjs","sources":["../src/Components/Graphs/UnitChart/index.tsx"],"sourcesContent":["import { useRef } from 'react';\r\nimport sum from 'lodash.sum';\r\nimport { H2, P } from '@undp/design-system-react/Typography';\r\nimport { AnimatePresence, motion, useInView } from 'motion/react';\r\nimport { cn } from '@undp/design-system-react/cn';\r\n\r\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\r\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\r\nimport { Colors } from '@/Components/ColorPalette';\r\nimport {\r\n  UnitChartDataType,\r\n  SourcesDataType,\r\n  Languages,\r\n  StyleObject,\r\n  ClassNameObject,\r\n  AnimateDataType,\r\n} from '@/Types';\r\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\r\n\r\ninterface Props {\r\n  // Data\r\n  /** Array of data objects */\r\n  data: UnitChartDataType[];\r\n\r\n  // Titles, Labels, and Sources\r\n  /** Title of the graph */\r\n  graphTitle?: string | React.ReactNode;\r\n  /** Description of the graph */\r\n  graphDescription?: string | React.ReactNode;\r\n  /** Note with h2 tag just above the graph. Can be used to highlight text */\r\n  note?: string;\r\n  /** Footnote for the graph */\r\n  footNote?: string | React.ReactNode;\r\n  /** Source data for the graph */\r\n  sources?: SourcesDataType[];\r\n  /** Accessibility label */\r\n  ariaLabel?: string;\r\n\r\n  // Colors and Styling\r\n  /** Colors of the highlighted circles */\r\n  colors?: string[];\r\n  /** Background color of the graph */\r\n  backgroundColor?: string | boolean;\r\n  /** Custom styles for the graph. Each object should be a valid React CSS style object. */\r\n  styles?: StyleObject;\r\n  /** Custom class names */\r\n  classNames?: ClassNameObject;\r\n\r\n  // Size and Spacing\r\n  /** Width of the graph */\r\n  width?: number;\r\n  /** Height of the graph */\r\n  height?: number;\r\n  /** Minimum height of the graph */\r\n  minHeight?: number;\r\n  /** Relative height scaling factor. This overwrites the height props */\r\n  relativeHeight?: number;\r\n  /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */\r\n  padding?: string;\r\n\r\n  // Graph Parameters\r\n  /** Size of the visualization */\r\n  size?: number;\r\n  /** No. of dots in a single row */\r\n  gridSize?: number;\r\n  /** Spacing between 2 dots */\r\n  unitPadding?: number;\r\n  /** Total no. of dot that are rendered in the chart */\r\n  totalNoOfDots?: number;\r\n  /** Toggle visibility of stroke for the unfilled dots */\r\n  showStrokeForWhiteDots?: boolean;\r\n  /** Toggles if the graph animates in when loaded.  */\r\n  animate?: boolean | AnimateDataType;\r\n  /** Toggle visibility of color scale */\r\n  showColorScale?: boolean;\r\n  /** Specifies the number of decimal places to display in the value. */\r\n  precision?: number;\r\n  /** Enable graph download option as png */\r\n  graphDownload?: boolean;\r\n  /** Enable data download option as a csv */\r\n  dataDownload?: boolean;\r\n\r\n  // Configuration and Options\r\n  /** Language setting  */\r\n  language?: Languages;\r\n  /** Color theme */\r\n  theme?: 'light' | 'dark';\r\n  /** Unique ID for the graph */\r\n  graphID?: string;\r\n}\r\n\r\nexport function UnitChart(props: Props) {\r\n  const {\r\n    data,\r\n    size = 200,\r\n    graphTitle,\r\n    sources,\r\n    colors = Colors.light.categoricalColors.colors,\r\n    graphDescription,\r\n    totalNoOfDots = 100,\r\n    unitPadding = 3,\r\n    gridSize = 10,\r\n    footNote,\r\n    padding,\r\n    backgroundColor = false,\r\n    graphID,\r\n    graphDownload = false,\r\n    language = 'en',\r\n    showColorScale = true,\r\n    showStrokeForWhiteDots = true,\r\n    note,\r\n    dataDownload = false,\r\n    theme = 'light',\r\n    width,\r\n    height,\r\n    minHeight = 0,\r\n    relativeHeight,\r\n    ariaLabel,\r\n    styles,\r\n    classNames,\r\n    animate = false,\r\n    precision = 2,\r\n  } = props;\r\n  const svgRef = useRef(null);\r\n  const animateValue =\r\n    animate === true\r\n      ? { duration: 0.5, once: true, amount: 0.5 }\r\n      : animate || { duration: 0, once: true, amount: 0 };\r\n  const isInView = useInView(svgRef, {\r\n    once: animateValue.once,\r\n    amount: animateValue.amount,\r\n  });\r\n  const totalValue = sum(data.map(d => d.value));\r\n  const graphParentDiv = useRef<HTMLDivElement>(null);\r\n  const gridDimension = size / gridSize;\r\n  const radius = (gridDimension - unitPadding * 2) / 2;\r\n  if (radius <= 0) {\r\n    console.error(\r\n      'The size of single unit is less than or equal to zero. Check values for ((dimension / gridSize) - (padding * 2)) / 2 is not less than or equal to 0.',\r\n    );\r\n    return null;\r\n  }\r\n\r\n  const cellsData: { color: string }[] = [];\r\n  data.forEach((item, index) => {\r\n    const count = Math.round((item.value / totalValue) * totalNoOfDots);\r\n    for (let i = 0; i < count; i += 1) {\r\n      cellsData.push({ color: colors[index] });\r\n    }\r\n  });\r\n  return (\r\n    <div\r\n      className={`${theme || 'light'} flex  ${width ? 'w-fit grow-0' : 'w-full grow'}`}\r\n      dir={language === 'he' || language === 'ar' ? 'rtl' : undefined}\r\n    >\r\n      <div\r\n        className={cn(\r\n          `${\r\n            !backgroundColor\r\n              ? 'bg-transparent '\r\n              : backgroundColor === true\r\n                ? 'bg-primary-gray-200 dark:bg-primary-gray-650 '\r\n                : ''\r\n          }ml-auto mr-auto flex flex-col grow h-inherit ${language || 'en'}`,\r\n          width ? 'w-fit' : 'w-full',\r\n          classNames?.graphContainer,\r\n        )}\r\n        style={{\r\n          ...(styles?.graphContainer || {}),\r\n          minHeight: 'inherit',\r\n          ...(backgroundColor && backgroundColor !== true ? { backgroundColor } : {}),\r\n        }}\r\n        id={graphID}\r\n        ref={graphParentDiv}\r\n        aria-label={\r\n          ariaLabel ||\r\n          `${graphTitle ? `The graph shows ${graphTitle}. ` : ''}${\r\n            graphDescription ? ` ${graphDescription}` : ''\r\n          }`\r\n        }\r\n      >\r\n        <div\r\n          className='flex grow'\r\n          style={{ padding: backgroundColor ? padding || '1rem' : padding || 0 }}\r\n        >\r\n          <div className='flex flex-col gap-3 w-full grow'>\r\n            {graphTitle || graphDescription || graphDownload ? (\r\n              <GraphHeader\r\n                styles={{\r\n                  title: styles?.title,\r\n                  description: styles?.description,\r\n                }}\r\n                classNames={{\r\n                  title: classNames?.title,\r\n                  description: classNames?.description,\r\n                }}\r\n                graphTitle={graphTitle}\r\n                graphDescription={graphDescription}\r\n                width={width}\r\n                graphDownload={graphDownload ? graphParentDiv.current : undefined}\r\n                dataDownload={\r\n                  dataDownload\r\n                    ? data.map(d => d.data).filter(d => d !== undefined).length > 0\r\n                      ? data.map(d => d.data).filter(d => d !== undefined)\r\n                      : data.filter(d => d !== undefined)\r\n                    : null\r\n                }\r\n              />\r\n            ) : null}\r\n            {note ? (\r\n              <H2\r\n                marginBottom='2xs'\r\n                className='text-primary-gray-700 dark:text-primary-gray-100 font-bold'\r\n                style={{ width: width ? `${width}px` : '100%' }}\r\n              >\r\n                {note}\r\n              </H2>\r\n            ) : null}\r\n            <div className='flex grow flex-col gap-4 justify-between'>\r\n              <div>\r\n                {showColorScale ? (\r\n                  <div\r\n                    className='mb-4 leading-0'\r\n                    style={{ width: width ? `${width}px` : '100%' }}\r\n                    aria-label='Color legend'\r\n                  >\r\n                    <div className='flex mb-0 flex-wrap gap-x-4 gap-y-1'>\r\n                      {data.map((d, i) => (\r\n                        <div className='flex gap-2 items-center' key={i}>\r\n                          <div\r\n                            className='w-3 h-3 rounded-full'\r\n                            style={{ backgroundColor: colors[i] }}\r\n                          />\r\n                          <P\r\n                            marginBottom='none'\r\n                            size='sm'\r\n                            className='text-primary-gray-700 dark:text-primary-gray-100'\r\n                          >\r\n                            {d.label}:{' '}\r\n                            <span className='font-bold'>\r\n                              {numberFormattingFunction(d.value, 'NA', precision)}\r\n                            </span>\r\n                          </P>\r\n                        </div>\r\n                      ))}\r\n                    </div>\r\n                  </div>\r\n                ) : null}\r\n                <div aria-label='Graph area'>\r\n                  <svg\r\n                    width={`${width || size}px`}\r\n                    height={`${Math.max(\r\n                      minHeight,\r\n                      height\r\n                        ? relativeHeight && width\r\n                          ? minHeight\r\n                            ? width * relativeHeight > minHeight\r\n                              ? width * relativeHeight\r\n                              : minHeight\r\n                            : width * relativeHeight\r\n                          : height\r\n                        : Math.floor((totalNoOfDots - 1) / gridSize) * gridDimension +\r\n                            gridDimension / 2 +\r\n                            radius +\r\n                            5,\r\n                    )}px`}\r\n                    ref={svgRef}\r\n                    direction='ltr'\r\n                    viewBox={`0 0 ${width || size} ${Math.max(\r\n                      minHeight,\r\n                      height\r\n                        ? relativeHeight && width\r\n                          ? minHeight\r\n                            ? width * relativeHeight > minHeight\r\n                              ? width * relativeHeight\r\n                              : minHeight\r\n                            : width * relativeHeight\r\n                          : height\r\n                        : Math.floor((totalNoOfDots - 1) / gridSize) * gridDimension +\r\n                            gridDimension / 2 +\r\n                            radius +\r\n                            5,\r\n                    )}`}\r\n                  >\r\n                    <AnimatePresence>\r\n                      <g>\r\n                        {cellsData.map((d, i) => (\r\n                          <motion.circle\r\n                            key={i}\r\n                            cx={(i % gridSize) * gridDimension + gridDimension / 2}\r\n                            cy={Math.floor(i / gridSize) * gridDimension + gridDimension / 2}\r\n                            style={{\r\n                              ...(!showStrokeForWhiteDots ? { stroke: d.color } : {}),\r\n                              strokeWidth: 1,\r\n                            }}\r\n                            variants={{\r\n                              initial: {\r\n                                fill: '#fff',\r\n                                opacity: 0,\r\n                                ...(!showStrokeForWhiteDots ? { stroke: d.color } : {}),\r\n                                strokeWidth: 1,\r\n                              },\r\n                              whileInView: {\r\n                                fill: d.color,\r\n                                opacity: 1,\r\n                                ...(!showStrokeForWhiteDots ? { stroke: d.color } : {}),\r\n                                strokeWidth: 1,\r\n                                transition: {\r\n                                  duration: 0,\r\n                                  delay: (animateValue.duration / cellsData.length) * i,\r\n                                },\r\n                              },\r\n                            }}\r\n                            initial='initial'\r\n                            animate={isInView ? 'whileInView' : 'initial'}\r\n                            className={\r\n                              (d.color.toLowerCase() === '#fff' ||\r\n                                d.color.toLowerCase() === '#ffffff' ||\r\n                                d.color.toLowerCase() === 'white') &&\r\n                              showStrokeForWhiteDots\r\n                                ? 'stroke-primary-gray-400 dark:stroke-primary-gray-500'\r\n                                : ''\r\n                            }\r\n                            r={radius}\r\n                          />\r\n                        ))}\r\n                      </g>\r\n                    </AnimatePresence>\r\n                  </svg>\r\n                </div>\r\n              </div>\r\n              {sources || footNote ? (\r\n                <GraphFooter\r\n                  styles={{\r\n                    footnote: styles?.footnote,\r\n                    source: styles?.source,\r\n                  }}\r\n                  sources={sources}\r\n                  footNote={footNote}\r\n                  width={width}\r\n                />\r\n              ) : null}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"names":["UnitChart","props","data","size","graphTitle","sources","colors","Colors","graphDescription","totalNoOfDots","unitPadding","gridSize","footNote","padding","backgroundColor","graphID","graphDownload","language","showColorScale","showStrokeForWhiteDots","note","dataDownload","theme","width","height","minHeight","relativeHeight","ariaLabel","styles","classNames","animate","precision","svgRef","useRef","animateValue","isInView","useInView","totalValue","sum","d","graphParentDiv","gridDimension","radius","cellsData","item","index","count","i","jsx","cn","jsxs","GraphHeader","H2","P","AnimatePresence","motion","GraphFooter"],"mappings":"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"}
+{"version":3,"file":"UnitChart.cjs","sources":["../src/Components/Graphs/UnitChart/index.tsx"],"sourcesContent":["import { useRef } from 'react';\r\nimport sum from 'lodash.sum';\r\nimport { H2, P } from '@undp/design-system-react/Typography';\r\nimport { AnimatePresence, motion, useInView } from 'motion/react';\r\nimport { cn } from '@undp/design-system-react/cn';\r\n\r\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\r\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\r\nimport { Colors } from '@/Components/ColorPalette';\r\nimport {\r\n  UnitChartDataType,\r\n  SourcesDataType,\r\n  Languages,\r\n  StyleObject,\r\n  ClassNameObject,\r\n  AnimateDataType,\r\n} from '@/Types';\r\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\r\n\r\ninterface Props {\r\n  // Data\r\n  /** Array of data objects */\r\n  data: UnitChartDataType[];\r\n\r\n  // Titles, Labels, and Sources\r\n  /** Title of the graph */\r\n  graphTitle?: string | React.ReactNode;\r\n  /** Description of the graph */\r\n  graphDescription?: string | React.ReactNode;\r\n  /** Note with h2 tag just above the graph. Can be used to highlight text */\r\n  note?: string;\r\n  /** Footnote for the graph */\r\n  footNote?: string | React.ReactNode;\r\n  /** Source data for the graph */\r\n  sources?: SourcesDataType[];\r\n  /** Accessibility label */\r\n  ariaLabel?: string;\r\n\r\n  // Colors and Styling\r\n  /** Colors of the highlighted circles */\r\n  colors?: string[];\r\n  /** Background color of the graph */\r\n  backgroundColor?: string | boolean;\r\n  /** Custom styles for the graph. Each object should be a valid React CSS style object. */\r\n  styles?: StyleObject;\r\n  /** Custom class names */\r\n  classNames?: ClassNameObject;\r\n\r\n  // Size and Spacing\r\n  /** Width of the graph */\r\n  width?: number;\r\n  /** Height of the graph */\r\n  height?: number;\r\n  /** Minimum height of the graph */\r\n  minHeight?: number;\r\n  /** Relative height scaling factor. This overwrites the height props */\r\n  relativeHeight?: number;\r\n  /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */\r\n  padding?: string;\r\n\r\n  // Graph Parameters\r\n  /** Size of the visualization */\r\n  size?: number;\r\n  /** No. of dots in a single row */\r\n  gridSize?: number;\r\n  /** Spacing between 2 dots */\r\n  unitPadding?: number;\r\n  /** Total no. of dot that are rendered in the chart */\r\n  totalNoOfDots?: number;\r\n  /** Toggle visibility of stroke for the unfilled dots */\r\n  showStrokeForWhiteDots?: boolean;\r\n  /** Toggles if the graph animates in when loaded.  */\r\n  animate?: boolean | AnimateDataType;\r\n  /** Toggle visibility of color scale */\r\n  showColorScale?: boolean;\r\n  /** Specifies the number of decimal places to display in the value. */\r\n  precision?: number;\r\n  /** Enable graph download option as png */\r\n  graphDownload?: boolean;\r\n  /** Enable data download option as a csv */\r\n  dataDownload?: boolean;\r\n\r\n  // Configuration and Options\r\n  /** Language setting  */\r\n  language?: Languages;\r\n  /** Color theme */\r\n  theme?: 'light' | 'dark';\r\n  /** Unique ID for the graph */\r\n  graphID?: string;\r\n}\r\n\r\nexport function UnitChart(props: Props) {\r\n  const {\r\n    data,\r\n    size = 200,\r\n    graphTitle,\r\n    sources,\r\n    colors = Colors.light.categoricalColors.colors,\r\n    graphDescription,\r\n    totalNoOfDots = 100,\r\n    unitPadding = 3,\r\n    gridSize = 10,\r\n    footNote,\r\n    padding,\r\n    backgroundColor = false,\r\n    graphID,\r\n    graphDownload = false,\r\n    language = 'en',\r\n    showColorScale = true,\r\n    showStrokeForWhiteDots = true,\r\n    note,\r\n    dataDownload = false,\r\n    theme = 'light',\r\n    width,\r\n    height,\r\n    minHeight = 0,\r\n    relativeHeight,\r\n    ariaLabel,\r\n    styles,\r\n    classNames,\r\n    animate = false,\r\n    precision = 2,\r\n  } = props;\r\n  const svgRef = useRef(null);\r\n  const animateValue =\r\n    animate === true\r\n      ? { duration: 0.5, once: true, amount: 0.5 }\r\n      : animate || { duration: 0, once: true, amount: 0 };\r\n  const isInView = useInView(svgRef, {\r\n    once: animateValue.once,\r\n    amount: animateValue.amount,\r\n  });\r\n  const totalValue = sum(data.map(d => d.value));\r\n  const graphParentDiv = useRef<HTMLDivElement>(null);\r\n  const gridDimension = size / gridSize;\r\n  const radius = (gridDimension - unitPadding * 2) / 2;\r\n  if (radius <= 0) {\r\n    console.error(\r\n      'The size of single unit is less than or equal to zero. Check values for ((dimension / gridSize) - (padding * 2)) / 2 is not less than or equal to 0.',\r\n    );\r\n    return null;\r\n  }\r\n\r\n  const cellsData: { color: string }[] = [];\r\n  data.forEach((item, index) => {\r\n    const count = Math.round((item.value / totalValue) * totalNoOfDots);\r\n    for (let i = 0; i < count; i += 1) {\r\n      cellsData.push({ color: colors[index] });\r\n    }\r\n  });\r\n  return (\r\n    <div\r\n      className={`${theme || 'light'} flex  ${width ? 'w-fit grow-0' : 'w-full grow'}`}\r\n      dir={language === 'he' || language === 'ar' ? 'rtl' : undefined}\r\n    >\r\n      <div\r\n        className={cn(\r\n          `${\r\n            !backgroundColor\r\n              ? 'bg-transparent '\r\n              : backgroundColor === true\r\n                ? 'bg-primary-gray-200 dark:bg-primary-gray-650 '\r\n                : ''\r\n          }ml-auto mr-auto flex flex-col grow h-inherit ${language || 'en'}`,\r\n          width ? 'w-fit' : 'w-full',\r\n          classNames?.graphContainer,\r\n        )}\r\n        style={{\r\n          ...(styles?.graphContainer || {}),\r\n          minHeight: 'inherit',\r\n          ...(backgroundColor && backgroundColor !== true ? { backgroundColor } : {}),\r\n        }}\r\n        id={graphID}\r\n        ref={graphParentDiv}\r\n        aria-label={\r\n          ariaLabel ||\r\n          `${graphTitle ? `The graph shows ${graphTitle}. ` : ''}${\r\n            graphDescription ? ` ${graphDescription}` : ''\r\n          }`\r\n        }\r\n      >\r\n        <div\r\n          className='flex grow'\r\n          style={{ padding: backgroundColor ? padding || '1rem' : padding || 0 }}\r\n        >\r\n          <div className='flex flex-col gap-3 w-full grow'>\r\n            {graphTitle || graphDescription || graphDownload ? (\r\n              <GraphHeader\r\n                styles={{\r\n                  title: styles?.title,\r\n                  description: styles?.description,\r\n                }}\r\n                classNames={{\r\n                  title: classNames?.title,\r\n                  description: classNames?.description,\r\n                }}\r\n                graphTitle={graphTitle}\r\n                graphDescription={graphDescription}\r\n                width={width}\r\n                graphDownload={graphDownload ? graphParentDiv.current : undefined}\r\n                dataDownload={\r\n                  dataDownload\r\n                    ? data.map(d => d.data).filter(d => d !== undefined).length > 0\r\n                      ? data.map(d => d.data).filter(d => d !== undefined)\r\n                      : data.filter(d => d !== undefined)\r\n                    : null\r\n                }\r\n              />\r\n            ) : null}\r\n            {note ? (\r\n              <H2\r\n                marginBottom='2xs'\r\n                className='text-primary-gray-700 dark:text-primary-gray-100 font-bold'\r\n                style={{ width: width ? `${width}px` : '100%' }}\r\n              >\r\n                {note}\r\n              </H2>\r\n            ) : null}\r\n            <div className='flex grow flex-col gap-4 justify-between'>\r\n              <div>\r\n                {showColorScale ? (\r\n                  <div\r\n                    className='mb-4 leading-0'\r\n                    style={{ width: width ? `${width}px` : '100%' }}\r\n                    aria-label='Color legend'\r\n                  >\r\n                    <div className='flex mb-0 flex-wrap gap-x-4 gap-y-1'>\r\n                      {data.map((d, i) => (\r\n                        <div className='flex gap-2 items-center' key={i}>\r\n                          <div\r\n                            className='w-3 h-3 rounded-full'\r\n                            style={{ backgroundColor: colors[i] }}\r\n                          />\r\n                          <P\r\n                            marginBottom='none'\r\n                            size='sm'\r\n                            className='text-primary-gray-700 dark:text-primary-gray-100'\r\n                          >\r\n                            {d.label}:{' '}\r\n                            <span className='font-bold'>\r\n                              {numberFormattingFunction(d.value, 'NA', precision)}\r\n                            </span>\r\n                          </P>\r\n                        </div>\r\n                      ))}\r\n                    </div>\r\n                  </div>\r\n                ) : null}\r\n                <div aria-label='Graph area'>\r\n                  <svg\r\n                    width={`${width || size}px`}\r\n                    height={`${Math.max(\r\n                      minHeight,\r\n                      height\r\n                        ? relativeHeight && width\r\n                          ? minHeight\r\n                            ? width * relativeHeight > minHeight\r\n                              ? width * relativeHeight\r\n                              : minHeight\r\n                            : width * relativeHeight\r\n                          : height\r\n                        : Math.floor((totalNoOfDots - 1) / gridSize) * gridDimension +\r\n                            gridDimension / 2 +\r\n                            radius +\r\n                            5,\r\n                    )}px`}\r\n                    ref={svgRef}\r\n                    direction='ltr'\r\n                    viewBox={`0 0 ${width || size} ${Math.max(\r\n                      minHeight,\r\n                      height\r\n                        ? relativeHeight && width\r\n                          ? minHeight\r\n                            ? width * relativeHeight > minHeight\r\n                              ? width * relativeHeight\r\n                              : minHeight\r\n                            : width * relativeHeight\r\n                          : height\r\n                        : Math.floor((totalNoOfDots - 1) / gridSize) * gridDimension +\r\n                            gridDimension / 2 +\r\n                            radius +\r\n                            5,\r\n                    )}`}\r\n                  >\r\n                    <AnimatePresence>\r\n                      <g>\r\n                        {cellsData.map((d, i) => (\r\n                          <motion.circle\r\n                            key={i}\r\n                            style={{\r\n                              strokeWidth: 1,\r\n                            }}\r\n                            variants={{\r\n                              initial: {\r\n                                fill: '#fff',\r\n                                opacity: 0,\r\n                                ...(!showStrokeForWhiteDots ? { stroke: d.color } : {}),\r\n                                strokeWidth: 1,\r\n                              },\r\n                              whileInView: {\r\n                                fill: d.color,\r\n                                opacity: 1,\r\n                                ...(!showStrokeForWhiteDots ? { stroke: d.color } : {}),\r\n                                strokeWidth: 1,\r\n                                cx: (i % gridSize) * gridDimension + gridDimension / 2,\r\n                                cy: Math.floor(i / gridSize) * gridDimension + gridDimension / 2,\r\n                                transition: {\r\n                                  duration: 0,\r\n                                  delay: (animateValue.duration / cellsData.length) * i,\r\n                                },\r\n                              },\r\n                            }}\r\n                            initial='initial'\r\n                            animate={isInView ? 'whileInView' : 'initial'}\r\n                            className={\r\n                              (d.color.toLowerCase() === '#fff' ||\r\n                                d.color.toLowerCase() === '#ffffff' ||\r\n                                d.color.toLowerCase() === 'white') &&\r\n                              showStrokeForWhiteDots\r\n                                ? 'stroke-primary-gray-400 dark:stroke-primary-gray-500'\r\n                                : ''\r\n                            }\r\n                            r={radius}\r\n                          />\r\n                        ))}\r\n                      </g>\r\n                    </AnimatePresence>\r\n                  </svg>\r\n                </div>\r\n              </div>\r\n              {sources || footNote ? (\r\n                <GraphFooter\r\n                  styles={{\r\n                    footnote: styles?.footnote,\r\n                    source: styles?.source,\r\n                  }}\r\n                  sources={sources}\r\n                  footNote={footNote}\r\n                  width={width}\r\n                />\r\n              ) : null}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"names":["UnitChart","props","data","size","graphTitle","sources","colors","Colors","graphDescription","totalNoOfDots","unitPadding","gridSize","footNote","padding","backgroundColor","graphID","graphDownload","language","showColorScale","showStrokeForWhiteDots","note","dataDownload","theme","width","height","minHeight","relativeHeight","ariaLabel","styles","classNames","animate","precision","svgRef","useRef","animateValue","isInView","useInView","totalValue","sum","d","graphParentDiv","gridDimension","radius","cellsData","item","index","count","i","jsx","cn","jsxs","GraphHeader","H2","P","AnimatePresence","motion","GraphFooter"],"mappings":"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"}

package/dist/UnitChart.js

@@ -1,23 +1,23 @@
-import { j as r, m as E } from "./index-CHPV5EwG-BPSP-7Jg.js";
+import { j as r, m as E } from "./index-CHPV5EwG-DBWUSD9b.js";
 import { useRef as F } from "react";
 import { s as O } from "./index-CeVNqhMO.js";
-import { f as U, u as J } from "./Typography-Ctgfl1J5.js";
+import { f as U, u as J } from "./Typography-LmZ9LEpe.js";
 import { GraphFooter as K } from "./GraphFooter.js";
 import { GraphHeader as Q } from "./GraphHeader.js";
 import { Colors as X } from "./Colors.js";
 import { n as Y } from "./numberFormattingFunction-14YCbkN2.js";
-import { u as Z } from "./use-in-view-yS6jzJAp.js";
-import { A as _ } from "./index-CNvov0eg.js";
-import { m as ee } from "./proxy-CkpFesk1.js";
+import { u as Z } from "./use-in-view-DR-UTB96.js";
+import { A as _ } from "./index-Cwgh7i7X.js";
+import { m as ee } from "./proxy-BYIC9BuT.js";
 function he(H) {
   const {
     data: s,
-    size: p = 200,
+    size: g = 200,
     graphTitle: d,
     sources: N,
     colors: b = X.light.categoricalColors.colors,
     graphDescription: h,
-    totalNoOfDots: x = 100,
+    totalNoOfDots: p = 100,
     unitPadding: L = 3,
     gridSize: c = 10,
     footNote: k,
@@ -25,14 +25,14 @@ function he(H) {
     backgroundColor: n = !1,
     graphID: S,
     graphDownload: C = !1,
-    language: w = "en",
+    language: x = "en",
     showColorScale: W = !0,
-    showStrokeForWhiteDots: f = !0,
+    showStrokeForWhiteDots: w = !0,
     note: D,
     dataDownload: A = !1,
     theme: B = "light",
     width: o,
-    height: u,
+    height: f,
     minHeight: i = 0,
     relativeHeight: l,
     ariaLabel: G,
@@ -43,26 +43,26 @@ function he(H) {
   } = H, M = F(null), v = z === !0 ? { duration: 0.5, once: !0, amount: 0.5 } : z || { duration: 0, once: !0, amount: 0 }, R = Z(M, {
     once: v.once,
     amount: v.amount
-  }), T = O(s.map((e) => e.value)), V = F(null), a = p / c, g = (a - L * 2) / 2;
-  if (g <= 0)
+  }), T = O(s.map((e) => e.value)), V = F(null), a = g / c, u = (a - L * 2) / 2;
+  if (u <= 0)
     return console.error(
       "The size of single unit is less than or equal to zero. Check values for ((dimension / gridSize) - (padding * 2)) / 2 is not less than or equal to 0."
     ), null;
   const j = [];
   return s.forEach((e, t) => {
-    const q = Math.round(e.value / T * x);
+    const q = Math.round(e.value / T * p);
     for (let I = 0; I < q; I += 1)
       j.push({ color: b[t] });
   }), /* @__PURE__ */ r.jsx(
     "div",
     {
       className: `${B || "light"} flex  ${o ? "w-fit grow-0" : "w-full grow"}`,
-      dir: w === "he" || w === "ar" ? "rtl" : void 0,
+      dir: x === "he" || x === "ar" ? "rtl" : void 0,
       children: /* @__PURE__ */ r.jsx(
         "div",
         {
           className: E(
-            `${n ? n === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${w || "en"}`,
+            `${n ? n === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${x || "en"}`,
             o ? "w-fit" : "w-full",
             y?.graphContainer
           ),
@@ -143,38 +143,37 @@ function he(H) {
                     /* @__PURE__ */ r.jsx("div", { "aria-label": "Graph area", children: /* @__PURE__ */ r.jsx(
                       "svg",
                       {
-                        width: `${o || p}px`,
+                        width: `${o || g}px`,
                         height: `${Math.max(
                           i,
-                          u ? l && o ? i ? o * l > i ? o * l : i : o * l : u : Math.floor((x - 1) / c) * a + a / 2 + g + 5
+                          f ? l && o ? i ? o * l > i ? o * l : i : o * l : f : Math.floor((p - 1) / c) * a + a / 2 + u + 5
                         )}px`,
                         ref: M,
                         direction: "ltr",
-                        viewBox: `0 0 ${o || p} ${Math.max(
+                        viewBox: `0 0 ${o || g} ${Math.max(
                           i,
-                          u ? l && o ? i ? o * l > i ? o * l : i : o * l : u : Math.floor((x - 1) / c) * a + a / 2 + g + 5
+                          f ? l && o ? i ? o * l > i ? o * l : i : o * l : f : Math.floor((p - 1) / c) * a + a / 2 + u + 5
                         )}`,
                         children: /* @__PURE__ */ r.jsx(_, { children: /* @__PURE__ */ r.jsx("g", { children: j.map((e, t) => /* @__PURE__ */ r.jsx(
                           ee.circle,
                           {
-                            cx: t % c * a + a / 2,
-                            cy: Math.floor(t / c) * a + a / 2,
                             style: {
-                              ...f ? {} : { stroke: e.color },
                               strokeWidth: 1
                             },
                             variants: {
                               initial: {
                                 fill: "#fff",
                                 opacity: 0,
-                                ...f ? {} : { stroke: e.color },
+                                ...w ? {} : { stroke: e.color },
                                 strokeWidth: 1
                               },
                               whileInView: {
                                 fill: e.color,
                                 opacity: 1,
-                                ...f ? {} : { stroke: e.color },
+                                ...w ? {} : { stroke: e.color },
                                 strokeWidth: 1,
+                                cx: t % c * a + a / 2,
+                                cy: Math.floor(t / c) * a + a / 2,
                                 transition: {
                                   duration: 0,
                                   delay: v.duration / j.length * t
@@ -183,8 +182,8 @@ function he(H) {
                             },
                             initial: "initial",
                             animate: R ? "whileInView" : "initial",
-                            className: (e.color.toLowerCase() === "#fff" || e.color.toLowerCase() === "#ffffff" || e.color.toLowerCase() === "white") && f ? "stroke-primary-gray-400 dark:stroke-primary-gray-500" : "",
-                            r: g
+                            className: (e.color.toLowerCase() === "#fff" || e.color.toLowerCase() === "#ffffff" || e.color.toLowerCase() === "white") && w ? "stroke-primary-gray-400 dark:stroke-primary-gray-500" : "",
+                            r: u
                           },
                           t
                         )) }) })

package/dist/UnitChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"UnitChart.js","sources":["../src/Components/Graphs/UnitChart/index.tsx"],"sourcesContent":["import { useRef } from 'react';\r\nimport sum from 'lodash.sum';\r\nimport { H2, P } from '@undp/design-system-react/Typography';\r\nimport { AnimatePresence, motion, useInView } from 'motion/react';\r\nimport { cn } from '@undp/design-system-react/cn';\r\n\r\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\r\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\r\nimport { Colors } from '@/Components/ColorPalette';\r\nimport {\r\n  UnitChartDataType,\r\n  SourcesDataType,\r\n  Languages,\r\n  StyleObject,\r\n  ClassNameObject,\r\n  AnimateDataType,\r\n} from '@/Types';\r\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\r\n\r\ninterface Props {\r\n  // Data\r\n  /** Array of data objects */\r\n  data: UnitChartDataType[];\r\n\r\n  // Titles, Labels, and Sources\r\n  /** Title of the graph */\r\n  graphTitle?: string | React.ReactNode;\r\n  /** Description of the graph */\r\n  graphDescription?: string | React.ReactNode;\r\n  /** Note with h2 tag just above the graph. Can be used to highlight text */\r\n  note?: string;\r\n  /** Footnote for the graph */\r\n  footNote?: string | React.ReactNode;\r\n  /** Source data for the graph */\r\n  sources?: SourcesDataType[];\r\n  /** Accessibility label */\r\n  ariaLabel?: string;\r\n\r\n  // Colors and Styling\r\n  /** Colors of the highlighted circles */\r\n  colors?: string[];\r\n  /** Background color of the graph */\r\n  backgroundColor?: string | boolean;\r\n  /** Custom styles for the graph. Each object should be a valid React CSS style object. */\r\n  styles?: StyleObject;\r\n  /** Custom class names */\r\n  classNames?: ClassNameObject;\r\n\r\n  // Size and Spacing\r\n  /** Width of the graph */\r\n  width?: number;\r\n  /** Height of the graph */\r\n  height?: number;\r\n  /** Minimum height of the graph */\r\n  minHeight?: number;\r\n  /** Relative height scaling factor. This overwrites the height props */\r\n  relativeHeight?: number;\r\n  /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */\r\n  padding?: string;\r\n\r\n  // Graph Parameters\r\n  /** Size of the visualization */\r\n  size?: number;\r\n  /** No. of dots in a single row */\r\n  gridSize?: number;\r\n  /** Spacing between 2 dots */\r\n  unitPadding?: number;\r\n  /** Total no. of dot that are rendered in the chart */\r\n  totalNoOfDots?: number;\r\n  /** Toggle visibility of stroke for the unfilled dots */\r\n  showStrokeForWhiteDots?: boolean;\r\n  /** Toggles if the graph animates in when loaded.  */\r\n  animate?: boolean | AnimateDataType;\r\n  /** Toggle visibility of color scale */\r\n  showColorScale?: boolean;\r\n  /** Specifies the number of decimal places to display in the value. */\r\n  precision?: number;\r\n  /** Enable graph download option as png */\r\n  graphDownload?: boolean;\r\n  /** Enable data download option as a csv */\r\n  dataDownload?: boolean;\r\n\r\n  // Configuration and Options\r\n  /** Language setting  */\r\n  language?: Languages;\r\n  /** Color theme */\r\n  theme?: 'light' | 'dark';\r\n  /** Unique ID for the graph */\r\n  graphID?: string;\r\n}\r\n\r\nexport function UnitChart(props: Props) {\r\n  const {\r\n    data,\r\n    size = 200,\r\n    graphTitle,\r\n    sources,\r\n    colors = Colors.light.categoricalColors.colors,\r\n    graphDescription,\r\n    totalNoOfDots = 100,\r\n    unitPadding = 3,\r\n    gridSize = 10,\r\n    footNote,\r\n    padding,\r\n    backgroundColor = false,\r\n    graphID,\r\n    graphDownload = false,\r\n    language = 'en',\r\n    showColorScale = true,\r\n    showStrokeForWhiteDots = true,\r\n    note,\r\n    dataDownload = false,\r\n    theme = 'light',\r\n    width,\r\n    height,\r\n    minHeight = 0,\r\n    relativeHeight,\r\n    ariaLabel,\r\n    styles,\r\n    classNames,\r\n    animate = false,\r\n    precision = 2,\r\n  } = props;\r\n  const svgRef = useRef(null);\r\n  const animateValue =\r\n    animate === true\r\n      ? { duration: 0.5, once: true, amount: 0.5 }\r\n      : animate || { duration: 0, once: true, amount: 0 };\r\n  const isInView = useInView(svgRef, {\r\n    once: animateValue.once,\r\n    amount: animateValue.amount,\r\n  });\r\n  const totalValue = sum(data.map(d => d.value));\r\n  const graphParentDiv = useRef<HTMLDivElement>(null);\r\n  const gridDimension = size / gridSize;\r\n  const radius = (gridDimension - unitPadding * 2) / 2;\r\n  if (radius <= 0) {\r\n    console.error(\r\n      'The size of single unit is less than or equal to zero. Check values for ((dimension / gridSize) - (padding * 2)) / 2 is not less than or equal to 0.',\r\n    );\r\n    return null;\r\n  }\r\n\r\n  const cellsData: { color: string }[] = [];\r\n  data.forEach((item, index) => {\r\n    const count = Math.round((item.value / totalValue) * totalNoOfDots);\r\n    for (let i = 0; i < count; i += 1) {\r\n      cellsData.push({ color: colors[index] });\r\n    }\r\n  });\r\n  return (\r\n    <div\r\n      className={`${theme || 'light'} flex  ${width ? 'w-fit grow-0' : 'w-full grow'}`}\r\n      dir={language === 'he' || language === 'ar' ? 'rtl' : undefined}\r\n    >\r\n      <div\r\n        className={cn(\r\n          `${\r\n            !backgroundColor\r\n              ? 'bg-transparent '\r\n              : backgroundColor === true\r\n                ? 'bg-primary-gray-200 dark:bg-primary-gray-650 '\r\n                : ''\r\n          }ml-auto mr-auto flex flex-col grow h-inherit ${language || 'en'}`,\r\n          width ? 'w-fit' : 'w-full',\r\n          classNames?.graphContainer,\r\n        )}\r\n        style={{\r\n          ...(styles?.graphContainer || {}),\r\n          minHeight: 'inherit',\r\n          ...(backgroundColor && backgroundColor !== true ? { backgroundColor } : {}),\r\n        }}\r\n        id={graphID}\r\n        ref={graphParentDiv}\r\n        aria-label={\r\n          ariaLabel ||\r\n          `${graphTitle ? `The graph shows ${graphTitle}. ` : ''}${\r\n            graphDescription ? ` ${graphDescription}` : ''\r\n          }`\r\n        }\r\n      >\r\n        <div\r\n          className='flex grow'\r\n          style={{ padding: backgroundColor ? padding || '1rem' : padding || 0 }}\r\n        >\r\n          <div className='flex flex-col gap-3 w-full grow'>\r\n            {graphTitle || graphDescription || graphDownload ? (\r\n              <GraphHeader\r\n                styles={{\r\n                  title: styles?.title,\r\n                  description: styles?.description,\r\n                }}\r\n                classNames={{\r\n                  title: classNames?.title,\r\n                  description: classNames?.description,\r\n                }}\r\n                graphTitle={graphTitle}\r\n                graphDescription={graphDescription}\r\n                width={width}\r\n                graphDownload={graphDownload ? graphParentDiv.current : undefined}\r\n                dataDownload={\r\n                  dataDownload\r\n                    ? data.map(d => d.data).filter(d => d !== undefined).length > 0\r\n                      ? data.map(d => d.data).filter(d => d !== undefined)\r\n                      : data.filter(d => d !== undefined)\r\n                    : null\r\n                }\r\n              />\r\n            ) : null}\r\n            {note ? (\r\n              <H2\r\n                marginBottom='2xs'\r\n                className='text-primary-gray-700 dark:text-primary-gray-100 font-bold'\r\n                style={{ width: width ? `${width}px` : '100%' }}\r\n              >\r\n                {note}\r\n              </H2>\r\n            ) : null}\r\n            <div className='flex grow flex-col gap-4 justify-between'>\r\n              <div>\r\n                {showColorScale ? (\r\n                  <div\r\n                    className='mb-4 leading-0'\r\n                    style={{ width: width ? `${width}px` : '100%' }}\r\n                    aria-label='Color legend'\r\n                  >\r\n                    <div className='flex mb-0 flex-wrap gap-x-4 gap-y-1'>\r\n                      {data.map((d, i) => (\r\n                        <div className='flex gap-2 items-center' key={i}>\r\n                          <div\r\n                            className='w-3 h-3 rounded-full'\r\n                            style={{ backgroundColor: colors[i] }}\r\n                          />\r\n                          <P\r\n                            marginBottom='none'\r\n                            size='sm'\r\n                            className='text-primary-gray-700 dark:text-primary-gray-100'\r\n                          >\r\n                            {d.label}:{' '}\r\n                            <span className='font-bold'>\r\n                              {numberFormattingFunction(d.value, 'NA', precision)}\r\n                            </span>\r\n                          </P>\r\n                        </div>\r\n                      ))}\r\n                    </div>\r\n                  </div>\r\n                ) : null}\r\n                <div aria-label='Graph area'>\r\n                  <svg\r\n                    width={`${width || size}px`}\r\n                    height={`${Math.max(\r\n                      minHeight,\r\n                      height\r\n                        ? relativeHeight && width\r\n                          ? minHeight\r\n                            ? width * relativeHeight > minHeight\r\n                              ? width * relativeHeight\r\n                              : minHeight\r\n                            : width * relativeHeight\r\n                          : height\r\n                        : Math.floor((totalNoOfDots - 1) / gridSize) * gridDimension +\r\n                            gridDimension / 2 +\r\n                            radius +\r\n                            5,\r\n                    )}px`}\r\n                    ref={svgRef}\r\n                    direction='ltr'\r\n                    viewBox={`0 0 ${width || size} ${Math.max(\r\n                      minHeight,\r\n                      height\r\n                        ? relativeHeight && width\r\n                          ? minHeight\r\n                            ? width * relativeHeight > minHeight\r\n                              ? width * relativeHeight\r\n                              : minHeight\r\n                            : width * relativeHeight\r\n                          : height\r\n                        : Math.floor((totalNoOfDots - 1) / gridSize) * gridDimension +\r\n                            gridDimension / 2 +\r\n                            radius +\r\n                            5,\r\n                    )}`}\r\n                  >\r\n                    <AnimatePresence>\r\n                      <g>\r\n                        {cellsData.map((d, i) => (\r\n                          <motion.circle\r\n                            key={i}\r\n                            cx={(i % gridSize) * gridDimension + gridDimension / 2}\r\n                            cy={Math.floor(i / gridSize) * gridDimension + gridDimension / 2}\r\n                            style={{\r\n                              ...(!showStrokeForWhiteDots ? { stroke: d.color } : {}),\r\n                              strokeWidth: 1,\r\n                            }}\r\n                            variants={{\r\n                              initial: {\r\n                                fill: '#fff',\r\n                                opacity: 0,\r\n                                ...(!showStrokeForWhiteDots ? { stroke: d.color } : {}),\r\n                                strokeWidth: 1,\r\n                              },\r\n                              whileInView: {\r\n                                fill: d.color,\r\n                                opacity: 1,\r\n                                ...(!showStrokeForWhiteDots ? { stroke: d.color } : {}),\r\n                                strokeWidth: 1,\r\n                                transition: {\r\n                                  duration: 0,\r\n                                  delay: (animateValue.duration / cellsData.length) * i,\r\n                                },\r\n                              },\r\n                            }}\r\n                            initial='initial'\r\n                            animate={isInView ? 'whileInView' : 'initial'}\r\n                            className={\r\n                              (d.color.toLowerCase() === '#fff' ||\r\n                                d.color.toLowerCase() === '#ffffff' ||\r\n                                d.color.toLowerCase() === 'white') &&\r\n                              showStrokeForWhiteDots\r\n                                ? 'stroke-primary-gray-400 dark:stroke-primary-gray-500'\r\n                                : ''\r\n                            }\r\n                            r={radius}\r\n                          />\r\n                        ))}\r\n                      </g>\r\n                    </AnimatePresence>\r\n                  </svg>\r\n                </div>\r\n              </div>\r\n              {sources || footNote ? (\r\n                <GraphFooter\r\n                  styles={{\r\n                    footnote: styles?.footnote,\r\n                    source: styles?.source,\r\n                  }}\r\n                  sources={sources}\r\n                  footNote={footNote}\r\n                  width={width}\r\n                />\r\n              ) : null}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"names":["UnitChart","props","data","size","graphTitle","sources","colors","Colors","graphDescription","totalNoOfDots","unitPadding","gridSize","footNote","padding","backgroundColor","graphID","graphDownload","language","showColorScale","showStrokeForWhiteDots","note","dataDownload","theme","width","height","minHeight","relativeHeight","ariaLabel","styles","classNames","animate","precision","svgRef","useRef","animateValue","isInView","useInView","totalValue","sum","d","graphParentDiv","gridDimension","radius","cellsData","item","index","count","i","jsx","cn","jsxs","GraphHeader","H2","P","AnimatePresence","motion","GraphFooter"],"mappings":"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"}
+{"version":3,"file":"UnitChart.js","sources":["../src/Components/Graphs/UnitChart/index.tsx"],"sourcesContent":["import { useRef } from 'react';\r\nimport sum from 'lodash.sum';\r\nimport { H2, P } from '@undp/design-system-react/Typography';\r\nimport { AnimatePresence, motion, useInView } from 'motion/react';\r\nimport { cn } from '@undp/design-system-react/cn';\r\n\r\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\r\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\r\nimport { Colors } from '@/Components/ColorPalette';\r\nimport {\r\n  UnitChartDataType,\r\n  SourcesDataType,\r\n  Languages,\r\n  StyleObject,\r\n  ClassNameObject,\r\n  AnimateDataType,\r\n} from '@/Types';\r\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\r\n\r\ninterface Props {\r\n  // Data\r\n  /** Array of data objects */\r\n  data: UnitChartDataType[];\r\n\r\n  // Titles, Labels, and Sources\r\n  /** Title of the graph */\r\n  graphTitle?: string | React.ReactNode;\r\n  /** Description of the graph */\r\n  graphDescription?: string | React.ReactNode;\r\n  /** Note with h2 tag just above the graph. Can be used to highlight text */\r\n  note?: string;\r\n  /** Footnote for the graph */\r\n  footNote?: string | React.ReactNode;\r\n  /** Source data for the graph */\r\n  sources?: SourcesDataType[];\r\n  /** Accessibility label */\r\n  ariaLabel?: string;\r\n\r\n  // Colors and Styling\r\n  /** Colors of the highlighted circles */\r\n  colors?: string[];\r\n  /** Background color of the graph */\r\n  backgroundColor?: string | boolean;\r\n  /** Custom styles for the graph. Each object should be a valid React CSS style object. */\r\n  styles?: StyleObject;\r\n  /** Custom class names */\r\n  classNames?: ClassNameObject;\r\n\r\n  // Size and Spacing\r\n  /** Width of the graph */\r\n  width?: number;\r\n  /** Height of the graph */\r\n  height?: number;\r\n  /** Minimum height of the graph */\r\n  minHeight?: number;\r\n  /** Relative height scaling factor. This overwrites the height props */\r\n  relativeHeight?: number;\r\n  /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */\r\n  padding?: string;\r\n\r\n  // Graph Parameters\r\n  /** Size of the visualization */\r\n  size?: number;\r\n  /** No. of dots in a single row */\r\n  gridSize?: number;\r\n  /** Spacing between 2 dots */\r\n  unitPadding?: number;\r\n  /** Total no. of dot that are rendered in the chart */\r\n  totalNoOfDots?: number;\r\n  /** Toggle visibility of stroke for the unfilled dots */\r\n  showStrokeForWhiteDots?: boolean;\r\n  /** Toggles if the graph animates in when loaded.  */\r\n  animate?: boolean | AnimateDataType;\r\n  /** Toggle visibility of color scale */\r\n  showColorScale?: boolean;\r\n  /** Specifies the number of decimal places to display in the value. */\r\n  precision?: number;\r\n  /** Enable graph download option as png */\r\n  graphDownload?: boolean;\r\n  /** Enable data download option as a csv */\r\n  dataDownload?: boolean;\r\n\r\n  // Configuration and Options\r\n  /** Language setting  */\r\n  language?: Languages;\r\n  /** Color theme */\r\n  theme?: 'light' | 'dark';\r\n  /** Unique ID for the graph */\r\n  graphID?: string;\r\n}\r\n\r\nexport function UnitChart(props: Props) {\r\n  const {\r\n    data,\r\n    size = 200,\r\n    graphTitle,\r\n    sources,\r\n    colors = Colors.light.categoricalColors.colors,\r\n    graphDescription,\r\n    totalNoOfDots = 100,\r\n    unitPadding = 3,\r\n    gridSize = 10,\r\n    footNote,\r\n    padding,\r\n    backgroundColor = false,\r\n    graphID,\r\n    graphDownload = false,\r\n    language = 'en',\r\n    showColorScale = true,\r\n    showStrokeForWhiteDots = true,\r\n    note,\r\n    dataDownload = false,\r\n    theme = 'light',\r\n    width,\r\n    height,\r\n    minHeight = 0,\r\n    relativeHeight,\r\n    ariaLabel,\r\n    styles,\r\n    classNames,\r\n    animate = false,\r\n    precision = 2,\r\n  } = props;\r\n  const svgRef = useRef(null);\r\n  const animateValue =\r\n    animate === true\r\n      ? { duration: 0.5, once: true, amount: 0.5 }\r\n      : animate || { duration: 0, once: true, amount: 0 };\r\n  const isInView = useInView(svgRef, {\r\n    once: animateValue.once,\r\n    amount: animateValue.amount,\r\n  });\r\n  const totalValue = sum(data.map(d => d.value));\r\n  const graphParentDiv = useRef<HTMLDivElement>(null);\r\n  const gridDimension = size / gridSize;\r\n  const radius = (gridDimension - unitPadding * 2) / 2;\r\n  if (radius <= 0) {\r\n    console.error(\r\n      'The size of single unit is less than or equal to zero. Check values for ((dimension / gridSize) - (padding * 2)) / 2 is not less than or equal to 0.',\r\n    );\r\n    return null;\r\n  }\r\n\r\n  const cellsData: { color: string }[] = [];\r\n  data.forEach((item, index) => {\r\n    const count = Math.round((item.value / totalValue) * totalNoOfDots);\r\n    for (let i = 0; i < count; i += 1) {\r\n      cellsData.push({ color: colors[index] });\r\n    }\r\n  });\r\n  return (\r\n    <div\r\n      className={`${theme || 'light'} flex  ${width ? 'w-fit grow-0' : 'w-full grow'}`}\r\n      dir={language === 'he' || language === 'ar' ? 'rtl' : undefined}\r\n    >\r\n      <div\r\n        className={cn(\r\n          `${\r\n            !backgroundColor\r\n              ? 'bg-transparent '\r\n              : backgroundColor === true\r\n                ? 'bg-primary-gray-200 dark:bg-primary-gray-650 '\r\n                : ''\r\n          }ml-auto mr-auto flex flex-col grow h-inherit ${language || 'en'}`,\r\n          width ? 'w-fit' : 'w-full',\r\n          classNames?.graphContainer,\r\n        )}\r\n        style={{\r\n          ...(styles?.graphContainer || {}),\r\n          minHeight: 'inherit',\r\n          ...(backgroundColor && backgroundColor !== true ? { backgroundColor } : {}),\r\n        }}\r\n        id={graphID}\r\n        ref={graphParentDiv}\r\n        aria-label={\r\n          ariaLabel ||\r\n          `${graphTitle ? `The graph shows ${graphTitle}. ` : ''}${\r\n            graphDescription ? ` ${graphDescription}` : ''\r\n          }`\r\n        }\r\n      >\r\n        <div\r\n          className='flex grow'\r\n          style={{ padding: backgroundColor ? padding || '1rem' : padding || 0 }}\r\n        >\r\n          <div className='flex flex-col gap-3 w-full grow'>\r\n            {graphTitle || graphDescription || graphDownload ? (\r\n              <GraphHeader\r\n                styles={{\r\n                  title: styles?.title,\r\n                  description: styles?.description,\r\n                }}\r\n                classNames={{\r\n                  title: classNames?.title,\r\n                  description: classNames?.description,\r\n                }}\r\n                graphTitle={graphTitle}\r\n                graphDescription={graphDescription}\r\n                width={width}\r\n                graphDownload={graphDownload ? graphParentDiv.current : undefined}\r\n                dataDownload={\r\n                  dataDownload\r\n                    ? data.map(d => d.data).filter(d => d !== undefined).length > 0\r\n                      ? data.map(d => d.data).filter(d => d !== undefined)\r\n                      : data.filter(d => d !== undefined)\r\n                    : null\r\n                }\r\n              />\r\n            ) : null}\r\n            {note ? (\r\n              <H2\r\n                marginBottom='2xs'\r\n                className='text-primary-gray-700 dark:text-primary-gray-100 font-bold'\r\n                style={{ width: width ? `${width}px` : '100%' }}\r\n              >\r\n                {note}\r\n              </H2>\r\n            ) : null}\r\n            <div className='flex grow flex-col gap-4 justify-between'>\r\n              <div>\r\n                {showColorScale ? (\r\n                  <div\r\n                    className='mb-4 leading-0'\r\n                    style={{ width: width ? `${width}px` : '100%' }}\r\n                    aria-label='Color legend'\r\n                  >\r\n                    <div className='flex mb-0 flex-wrap gap-x-4 gap-y-1'>\r\n                      {data.map((d, i) => (\r\n                        <div className='flex gap-2 items-center' key={i}>\r\n                          <div\r\n                            className='w-3 h-3 rounded-full'\r\n                            style={{ backgroundColor: colors[i] }}\r\n                          />\r\n                          <P\r\n                            marginBottom='none'\r\n                            size='sm'\r\n                            className='text-primary-gray-700 dark:text-primary-gray-100'\r\n                          >\r\n                            {d.label}:{' '}\r\n                            <span className='font-bold'>\r\n                              {numberFormattingFunction(d.value, 'NA', precision)}\r\n                            </span>\r\n                          </P>\r\n                        </div>\r\n                      ))}\r\n                    </div>\r\n                  </div>\r\n                ) : null}\r\n                <div aria-label='Graph area'>\r\n                  <svg\r\n                    width={`${width || size}px`}\r\n                    height={`${Math.max(\r\n                      minHeight,\r\n                      height\r\n                        ? relativeHeight && width\r\n                          ? minHeight\r\n                            ? width * relativeHeight > minHeight\r\n                              ? width * relativeHeight\r\n                              : minHeight\r\n                            : width * relativeHeight\r\n                          : height\r\n                        : Math.floor((totalNoOfDots - 1) / gridSize) * gridDimension +\r\n                            gridDimension / 2 +\r\n                            radius +\r\n                            5,\r\n                    )}px`}\r\n                    ref={svgRef}\r\n                    direction='ltr'\r\n                    viewBox={`0 0 ${width || size} ${Math.max(\r\n                      minHeight,\r\n                      height\r\n                        ? relativeHeight && width\r\n                          ? minHeight\r\n                            ? width * relativeHeight > minHeight\r\n                              ? width * relativeHeight\r\n                              : minHeight\r\n                            : width * relativeHeight\r\n                          : height\r\n                        : Math.floor((totalNoOfDots - 1) / gridSize) * gridDimension +\r\n                            gridDimension / 2 +\r\n                            radius +\r\n                            5,\r\n                    )}`}\r\n                  >\r\n                    <AnimatePresence>\r\n                      <g>\r\n                        {cellsData.map((d, i) => (\r\n                          <motion.circle\r\n                            key={i}\r\n                            style={{\r\n                              strokeWidth: 1,\r\n                            }}\r\n                            variants={{\r\n                              initial: {\r\n                                fill: '#fff',\r\n                                opacity: 0,\r\n                                ...(!showStrokeForWhiteDots ? { stroke: d.color } : {}),\r\n                                strokeWidth: 1,\r\n                              },\r\n                              whileInView: {\r\n                                fill: d.color,\r\n                                opacity: 1,\r\n                                ...(!showStrokeForWhiteDots ? { stroke: d.color } : {}),\r\n                                strokeWidth: 1,\r\n                                cx: (i % gridSize) * gridDimension + gridDimension / 2,\r\n                                cy: Math.floor(i / gridSize) * gridDimension + gridDimension / 2,\r\n                                transition: {\r\n                                  duration: 0,\r\n                                  delay: (animateValue.duration / cellsData.length) * i,\r\n                                },\r\n                              },\r\n                            }}\r\n                            initial='initial'\r\n                            animate={isInView ? 'whileInView' : 'initial'}\r\n                            className={\r\n                              (d.color.toLowerCase() === '#fff' ||\r\n                                d.color.toLowerCase() === '#ffffff' ||\r\n                                d.color.toLowerCase() === 'white') &&\r\n                              showStrokeForWhiteDots\r\n                                ? 'stroke-primary-gray-400 dark:stroke-primary-gray-500'\r\n                                : ''\r\n                            }\r\n                            r={radius}\r\n                          />\r\n                        ))}\r\n                      </g>\r\n                    </AnimatePresence>\r\n                  </svg>\r\n                </div>\r\n              </div>\r\n              {sources || footNote ? (\r\n                <GraphFooter\r\n                  styles={{\r\n                    footnote: styles?.footnote,\r\n                    source: styles?.source,\r\n                  }}\r\n                  sources={sources}\r\n                  footNote={footNote}\r\n                  width={width}\r\n                />\r\n              ) : null}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"names":["UnitChart","props","data","size","graphTitle","sources","colors","Colors","graphDescription","totalNoOfDots","unitPadding","gridSize","footNote","padding","backgroundColor","graphID","graphDownload","language","showColorScale","showStrokeForWhiteDots","note","dataDownload","theme","width","height","minHeight","relativeHeight","ariaLabel","styles","classNames","animate","precision","svgRef","useRef","animateValue","isInView","useInView","totalValue","sum","d","graphParentDiv","gridDimension","radius","cellsData","item","index","count","i","jsx","cn","jsxs","GraphHeader","H2","P","AnimatePresence","motion","GraphFooter"],"mappings":"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"}

package/dist/{XAxesLabels-Drf7M3YK.cjs → XAxesLabels-CLZnBgSr.cjs}

@@ -1,2 +1,2 @@
-"use strict";const i=require("./index-CHPV5EwG-DDoeWRVt.cjs"),u=require("./proxy-BHRoeZgd.cjs");function d(s){const{value:r,y:t,x:e,style:a,className:l,width:x,height:o,alignment:c="top",animate:n,isInView:m}=s;return i.jsxRuntimeExports.jsx(u.motion.g,{variants:{initial:{x:e,y:t},whileInView:{x:e,y:t,transition:{duration:n.duration}}},initial:"initial",animate:m?"whileInView":"initial",exit:{opacity:0,transition:{duration:n.duration}},children:i.jsxRuntimeExports.jsx("foreignObject",{width:x,height:o,y:0,x:0,children:i.jsxRuntimeExports.jsx("div",{className:`flex flex-col items-center h-inherit ${c==="top"?"justify-start":"justify-end"}`,children:i.jsxRuntimeExports.jsx("p",{className:i.mo("fill-primary-gray-700 dark:fill-primary-gray-300 text-xs m-0 py-0 px-1.5 text-center leading-none",l),style:a,children:r})})})},t)}exports.XAxesLabels=d;
-//# sourceMappingURL=XAxesLabels-Drf7M3YK.cjs.map
+"use strict";const i=require("./index-CHPV5EwG-DjM48pIC.cjs"),u=require("./proxy-CKadx4lC.cjs");function d(s){const{value:r,y:t,x:e,style:a,className:l,width:x,height:o,alignment:c="top",animate:n,isInView:m}=s;return i.jsxRuntimeExports.jsx(u.motion.g,{variants:{initial:{x:e,y:t},whileInView:{x:e,y:t,transition:{duration:n.duration}}},initial:"initial",animate:m?"whileInView":"initial",exit:{opacity:0,transition:{duration:n.duration}},children:i.jsxRuntimeExports.jsx("foreignObject",{width:x,height:o,y:0,x:0,children:i.jsxRuntimeExports.jsx("div",{className:`flex flex-col items-center h-inherit ${c==="top"?"justify-start":"justify-end"}`,children:i.jsxRuntimeExports.jsx("p",{className:i.mo("fill-primary-gray-700 dark:fill-primary-gray-300 text-xs m-0 py-0 px-1.5 text-center leading-none",l),style:a,children:r})})})},t)}exports.XAxesLabels=d;
+//# sourceMappingURL=XAxesLabels-CLZnBgSr.cjs.map

package/dist/{XAxesLabels-Drf7M3YK.cjs.map → XAxesLabels-CLZnBgSr.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"XAxesLabels-Drf7M3YK.cjs","sources":["../src/Components/Elements/Axes/XAxesLabels.tsx"],"sourcesContent":["import { cn } from '@undp/design-system-react/cn';\r\nimport { motion } from 'motion/react';\r\n\r\nimport { AnimateDataType } from '@/Types';\r\n\r\ninterface Props {\r\n  value: number | string;\r\n  y: number;\r\n  x: number;\r\n  width: number;\r\n  height: number;\r\n  style?: React.CSSProperties;\r\n  className?: string;\r\n  alignment?: 'top' | 'bottom';\r\n  animate: AnimateDataType;\r\n  isInView: boolean;\r\n}\r\n\r\nexport function XAxesLabels(props: Props) {\r\n  const {\r\n    value,\r\n    y,\r\n    x,\r\n    style,\r\n    className,\r\n    width,\r\n    height,\r\n    alignment = 'top',\r\n    animate,\r\n    isInView,\r\n  } = props;\r\n  return (\r\n    <motion.g\r\n      key={y}\r\n      variants={{\r\n        initial: {\r\n          x,\r\n          y,\r\n        },\r\n        whileInView: {\r\n          x,\r\n          y,\r\n          transition: { duration: animate.duration },\r\n        },\r\n      }}\r\n      initial='initial'\r\n      animate={isInView ? 'whileInView' : 'initial'}\r\n      exit={{ opacity: 0, transition: { duration: animate.duration } }}\r\n    >\r\n      <foreignObject width={width} height={height} y={0} x={0}>\r\n        <div\r\n          className={`flex flex-col items-center h-inherit ${\r\n            alignment === 'top' ? 'justify-start' : 'justify-end'\r\n          }`}\r\n        >\r\n          <p\r\n            className={cn(\r\n              'fill-primary-gray-700 dark:fill-primary-gray-300 text-xs m-0 py-0 px-1.5 text-center leading-none',\r\n              className,\r\n            )}\r\n            style={style}\r\n          >\r\n            {value}\r\n          </p>\r\n        </div>\r\n      </foreignObject>\r\n    </motion.g>\r\n  );\r\n}\r\n"],"names":["XAxesLabels","props","value","y","x","style","className","width","height","alignment","animate","isInView","jsx","motion","cn"],"mappings":"gGAkBO,SAASA,EAAYC,EAAc,CACxC,KAAM,CACJ,MAAAC,EACA,EAAAC,EACA,EAAAC,EACA,MAAAC,EACA,UAAAC,EACA,MAAAC,EACA,OAAAC,EACA,UAAAC,EAAY,MACZ,QAAAC,EACA,SAAAC,CAAA,EACEV,EACJ,OACEW,EAAAA,kBAAAA,IAACC,EAAAA,OAAO,EAAP,CAEC,SAAU,CACR,QAAS,CACP,EAAAT,EACA,EAAAD,CAAA,EAEF,YAAa,CACX,EAAAC,EACA,EAAAD,EACA,WAAY,CAAE,SAAUO,EAAQ,QAAA,CAAS,CAC3C,EAEF,QAAQ,UACR,QAASC,EAAW,cAAgB,UACpC,KAAM,CAAE,QAAS,EAAG,WAAY,CAAE,SAAUD,EAAQ,SAAS,EAE7D,iCAAC,gBAAA,CAAc,MAAAH,EAAc,OAAAC,EAAgB,EAAG,EAAG,EAAG,EACpD,SAAAI,EAAAA,kBAAAA,IAAC,MAAA,CACC,UAAW,wCACTH,IAAc,MAAQ,gBAAkB,aAC1C,GAEA,SAAAG,EAAAA,kBAAAA,IAAC,IAAA,CACC,UAAWE,EAAAA,GACT,oGACAR,CAAA,EAEF,MAAAD,EAEC,SAAAH,CAAA,CAAA,CACH,CAAA,CACF,CACF,CAAA,EAhCKC,CAAA,CAmCX"}
+{"version":3,"file":"XAxesLabels-CLZnBgSr.cjs","sources":["../src/Components/Elements/Axes/XAxesLabels.tsx"],"sourcesContent":["import { cn } from '@undp/design-system-react/cn';\r\nimport { motion } from 'motion/react';\r\n\r\nimport { AnimateDataType } from '@/Types';\r\n\r\ninterface Props {\r\n  value: number | string;\r\n  y: number;\r\n  x: number;\r\n  width: number;\r\n  height: number;\r\n  style?: React.CSSProperties;\r\n  className?: string;\r\n  alignment?: 'top' | 'bottom';\r\n  animate: AnimateDataType;\r\n  isInView: boolean;\r\n}\r\n\r\nexport function XAxesLabels(props: Props) {\r\n  const {\r\n    value,\r\n    y,\r\n    x,\r\n    style,\r\n    className,\r\n    width,\r\n    height,\r\n    alignment = 'top',\r\n    animate,\r\n    isInView,\r\n  } = props;\r\n  return (\r\n    <motion.g\r\n      key={y}\r\n      variants={{\r\n        initial: {\r\n          x,\r\n          y,\r\n        },\r\n        whileInView: {\r\n          x,\r\n          y,\r\n          transition: { duration: animate.duration },\r\n        },\r\n      }}\r\n      initial='initial'\r\n      animate={isInView ? 'whileInView' : 'initial'}\r\n      exit={{ opacity: 0, transition: { duration: animate.duration } }}\r\n    >\r\n      <foreignObject width={width} height={height} y={0} x={0}>\r\n        <div\r\n          className={`flex flex-col items-center h-inherit ${\r\n            alignment === 'top' ? 'justify-start' : 'justify-end'\r\n          }`}\r\n        >\r\n          <p\r\n            className={cn(\r\n              'fill-primary-gray-700 dark:fill-primary-gray-300 text-xs m-0 py-0 px-1.5 text-center leading-none',\r\n              className,\r\n            )}\r\n            style={style}\r\n          >\r\n            {value}\r\n          </p>\r\n        </div>\r\n      </foreignObject>\r\n    </motion.g>\r\n  );\r\n}\r\n"],"names":["XAxesLabels","props","value","y","x","style","className","width","height","alignment","animate","isInView","jsx","motion","cn"],"mappings":"gGAkBO,SAASA,EAAYC,EAAc,CACxC,KAAM,CACJ,MAAAC,EACA,EAAAC,EACA,EAAAC,EACA,MAAAC,EACA,UAAAC,EACA,MAAAC,EACA,OAAAC,EACA,UAAAC,EAAY,MACZ,QAAAC,EACA,SAAAC,CAAA,EACEV,EACJ,OACEW,EAAAA,kBAAAA,IAACC,EAAAA,OAAO,EAAP,CAEC,SAAU,CACR,QAAS,CACP,EAAAT,EACA,EAAAD,CAAA,EAEF,YAAa,CACX,EAAAC,EACA,EAAAD,EACA,WAAY,CAAE,SAAUO,EAAQ,QAAA,CAAS,CAC3C,EAEF,QAAQ,UACR,QAASC,EAAW,cAAgB,UACpC,KAAM,CAAE,QAAS,EAAG,WAAY,CAAE,SAAUD,EAAQ,SAAS,EAE7D,iCAAC,gBAAA,CAAc,MAAAH,EAAc,OAAAC,EAAgB,EAAG,EAAG,EAAG,EACpD,SAAAI,EAAAA,kBAAAA,IAAC,MAAA,CACC,UAAW,wCACTH,IAAc,MAAQ,gBAAkB,aAC1C,GAEA,SAAAG,EAAAA,kBAAAA,IAAC,IAAA,CACC,UAAWE,EAAAA,GACT,oGACAR,CAAA,EAEF,MAAAD,EAEC,SAAAH,CAAA,CAAA,CACH,CAAA,CACF,CACF,CAAA,EAhCKC,CAAA,CAmCX"}

package/dist/{XAxesLabels-loO78vUO.js → XAxesLabels-SOSmso5J.js}

@@ -1,5 +1,5 @@
-import { j as i, m as d } from "./index-CHPV5EwG-BPSP-7Jg.js";
-import { m as p } from "./proxy-CkpFesk1.js";
+import { j as i, m as d } from "./index-CHPV5EwG-DBWUSD9b.js";
+import { m as p } from "./proxy-BYIC9BuT.js";
 function f(a) {
   const {
     value: r,
@@ -54,4 +54,4 @@ function f(a) {
 export {
   f as X
 };
-//# sourceMappingURL=XAxesLabels-loO78vUO.js.map
+//# sourceMappingURL=XAxesLabels-SOSmso5J.js.map

package/dist/{XAxesLabels-loO78vUO.js.map → XAxesLabels-SOSmso5J.js.map}

@@ -1 +1 @@
-{"version":3,"file":"XAxesLabels-loO78vUO.js","sources":["../src/Components/Elements/Axes/XAxesLabels.tsx"],"sourcesContent":["import { cn } from '@undp/design-system-react/cn';\r\nimport { motion } from 'motion/react';\r\n\r\nimport { AnimateDataType } from '@/Types';\r\n\r\ninterface Props {\r\n  value: number | string;\r\n  y: number;\r\n  x: number;\r\n  width: number;\r\n  height: number;\r\n  style?: React.CSSProperties;\r\n  className?: string;\r\n  alignment?: 'top' | 'bottom';\r\n  animate: AnimateDataType;\r\n  isInView: boolean;\r\n}\r\n\r\nexport function XAxesLabels(props: Props) {\r\n  const {\r\n    value,\r\n    y,\r\n    x,\r\n    style,\r\n    className,\r\n    width,\r\n    height,\r\n    alignment = 'top',\r\n    animate,\r\n    isInView,\r\n  } = props;\r\n  return (\r\n    <motion.g\r\n      key={y}\r\n      variants={{\r\n        initial: {\r\n          x,\r\n          y,\r\n        },\r\n        whileInView: {\r\n          x,\r\n          y,\r\n          transition: { duration: animate.duration },\r\n        },\r\n      }}\r\n      initial='initial'\r\n      animate={isInView ? 'whileInView' : 'initial'}\r\n      exit={{ opacity: 0, transition: { duration: animate.duration } }}\r\n    >\r\n      <foreignObject width={width} height={height} y={0} x={0}>\r\n        <div\r\n          className={`flex flex-col items-center h-inherit ${\r\n            alignment === 'top' ? 'justify-start' : 'justify-end'\r\n          }`}\r\n        >\r\n          <p\r\n            className={cn(\r\n              'fill-primary-gray-700 dark:fill-primary-gray-300 text-xs m-0 py-0 px-1.5 text-center leading-none',\r\n              className,\r\n            )}\r\n            style={style}\r\n          >\r\n            {value}\r\n          </p>\r\n        </div>\r\n      </foreignObject>\r\n    </motion.g>\r\n  );\r\n}\r\n"],"names":["XAxesLabels","props","value","y","x","style","className","width","height","alignment","animate","isInView","jsx","motion","cn"],"mappings":";;AAkBO,SAASA,EAAYC,GAAc;AACxC,QAAM;AAAA,IACJ,OAAAC;AAAA,IACA,GAAAC;AAAA,IACA,GAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,SAAAC;AAAA,IACA,UAAAC;AAAA,EAAA,IACEV;AACJ,SACEW,gBAAAA,EAAAA;AAAAA,IAACC,EAAO;AAAA,IAAP;AAAA,MAEC,UAAU;AAAA,QACR,SAAS;AAAA,UACP,GAAAT;AAAA,UACA,GAAAD;AAAA,QAAA;AAAA,QAEF,aAAa;AAAA,UACX,GAAAC;AAAA,UACA,GAAAD;AAAA,UACA,YAAY,EAAE,UAAUO,EAAQ,SAAA;AAAA,QAAS;AAAA,MAC3C;AAAA,MAEF,SAAQ;AAAA,MACR,SAASC,IAAW,gBAAgB;AAAA,MACpC,MAAM,EAAE,SAAS,GAAG,YAAY,EAAE,UAAUD,EAAQ,WAAS;AAAA,MAE7D,gCAAC,iBAAA,EAAc,OAAAH,GAAc,QAAAC,GAAgB,GAAG,GAAG,GAAG,GACpD,UAAAI,gBAAAA,EAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,wCACTH,MAAc,QAAQ,kBAAkB,aAC1C;AAAA,UAEA,UAAAG,gBAAAA,EAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWE;AAAAA,gBACT;AAAA,gBACAR;AAAA,cAAA;AAAA,cAEF,OAAAD;AAAA,cAEC,UAAAH;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA,EACF,CACF;AAAA,IAAA;AAAA,IAhCKC;AAAA,EAAA;AAmCX;"}
+{"version":3,"file":"XAxesLabels-SOSmso5J.js","sources":["../src/Components/Elements/Axes/XAxesLabels.tsx"],"sourcesContent":["import { cn } from '@undp/design-system-react/cn';\r\nimport { motion } from 'motion/react';\r\n\r\nimport { AnimateDataType } from '@/Types';\r\n\r\ninterface Props {\r\n  value: number | string;\r\n  y: number;\r\n  x: number;\r\n  width: number;\r\n  height: number;\r\n  style?: React.CSSProperties;\r\n  className?: string;\r\n  alignment?: 'top' | 'bottom';\r\n  animate: AnimateDataType;\r\n  isInView: boolean;\r\n}\r\n\r\nexport function XAxesLabels(props: Props) {\r\n  const {\r\n    value,\r\n    y,\r\n    x,\r\n    style,\r\n    className,\r\n    width,\r\n    height,\r\n    alignment = 'top',\r\n    animate,\r\n    isInView,\r\n  } = props;\r\n  return (\r\n    <motion.g\r\n      key={y}\r\n      variants={{\r\n        initial: {\r\n          x,\r\n          y,\r\n        },\r\n        whileInView: {\r\n          x,\r\n          y,\r\n          transition: { duration: animate.duration },\r\n        },\r\n      }}\r\n      initial='initial'\r\n      animate={isInView ? 'whileInView' : 'initial'}\r\n      exit={{ opacity: 0, transition: { duration: animate.duration } }}\r\n    >\r\n      <foreignObject width={width} height={height} y={0} x={0}>\r\n        <div\r\n          className={`flex flex-col items-center h-inherit ${\r\n            alignment === 'top' ? 'justify-start' : 'justify-end'\r\n          }`}\r\n        >\r\n          <p\r\n            className={cn(\r\n              'fill-primary-gray-700 dark:fill-primary-gray-300 text-xs m-0 py-0 px-1.5 text-center leading-none',\r\n              className,\r\n            )}\r\n            style={style}\r\n          >\r\n            {value}\r\n          </p>\r\n        </div>\r\n      </foreignObject>\r\n    </motion.g>\r\n  );\r\n}\r\n"],"names":["XAxesLabels","props","value","y","x","style","className","width","height","alignment","animate","isInView","jsx","motion","cn"],"mappings":";;AAkBO,SAASA,EAAYC,GAAc;AACxC,QAAM;AAAA,IACJ,OAAAC;AAAA,IACA,GAAAC;AAAA,IACA,GAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,SAAAC;AAAA,IACA,UAAAC;AAAA,EAAA,IACEV;AACJ,SACEW,gBAAAA,EAAAA;AAAAA,IAACC,EAAO;AAAA,IAAP;AAAA,MAEC,UAAU;AAAA,QACR,SAAS;AAAA,UACP,GAAAT;AAAA,UACA,GAAAD;AAAA,QAAA;AAAA,QAEF,aAAa;AAAA,UACX,GAAAC;AAAA,UACA,GAAAD;AAAA,UACA,YAAY,EAAE,UAAUO,EAAQ,SAAA;AAAA,QAAS;AAAA,MAC3C;AAAA,MAEF,SAAQ;AAAA,MACR,SAASC,IAAW,gBAAgB;AAAA,MACpC,MAAM,EAAE,SAAS,GAAG,YAAY,EAAE,UAAUD,EAAQ,WAAS;AAAA,MAE7D,gCAAC,iBAAA,EAAc,OAAAH,GAAc,QAAAC,GAAgB,GAAG,GAAG,GAAG,GACpD,UAAAI,gBAAAA,EAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,wCACTH,MAAc,QAAQ,kBAAkB,aAC1C;AAAA,UAEA,UAAAG,gBAAAA,EAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWE;AAAAA,gBACT;AAAA,gBACAR;AAAA,cAAA;AAAA,cAEF,OAAAD;AAAA,cAEC,UAAAH;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA,EACF,CACF;AAAA,IAAA;AAAA,IAhCKC;AAAA,EAAA;AAmCX;"}

package/dist/{XTicksAndGridLines-Bn9u5gOM.js → XTicksAndGridLines-DuydSnZ_.js}

@@ -1,4 +1,4 @@
-import { j as a, m as x } from "./index-CHPV5EwG-BPSP-7Jg.js";
+import { j as a, m as x } from "./index-CHPV5EwG-DBWUSD9b.js";
 import { n as u } from "./numberFormattingFunction-14YCbkN2.js";
 function b(o) {
   const {
@@ -53,4 +53,4 @@ function b(o) {
 export {
   b as X
 };
-//# sourceMappingURL=XTicksAndGridLines-Bn9u5gOM.js.map
+//# sourceMappingURL=XTicksAndGridLines-DuydSnZ_.js.map

package/dist/{XTicksAndGridLines-Bn9u5gOM.js.map → XTicksAndGridLines-DuydSnZ_.js.map}

@@ -1 +1 @@
-{"version":3,"file":"XTicksAndGridLines-Bn9u5gOM.js","sources":["../src/Components/Elements/Axes/XTicksAndGridLines.tsx"],"sourcesContent":["import { cn } from '@undp/design-system-react/cn';\r\n\r\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\r\n\r\ninterface Props {\r\n  values?: (number | string)[];\r\n  x: number[];\r\n  y2: number;\r\n  y1: number;\r\n  styles: { gridLines?: React.CSSProperties; labels?: React.CSSProperties };\r\n  classNames: { gridLines?: string; labels?: string };\r\n  prefix?: string;\r\n  suffix?: string;\r\n  labelType: 'primary' | 'secondary';\r\n  showGridLines: boolean;\r\n  leftLabel?: boolean;\r\n  precision: number;\r\n}\r\n\r\nexport function XTicksAndGridLines(props: Props) {\r\n  const {\r\n    values,\r\n    x,\r\n    y1,\r\n    y2,\r\n    styles,\r\n    classNames,\r\n    prefix,\r\n    suffix,\r\n    labelType,\r\n    showGridLines,\r\n    precision,\r\n    leftLabel = false,\r\n  } = props;\r\n  if (!values && !showGridLines) return null;\r\n  return (\r\n    <>\r\n      {x.map((d, i) => (\r\n        <g key={i}>\r\n          {showGridLines ? (\r\n            <line\r\n              x1={d}\r\n              x2={d}\r\n              y1={y1}\r\n              y2={y2}\r\n              className={cn(\r\n                'undp-tick-line stroke-primary-gray-500 dark:stroke-primary-gray-550',\r\n                classNames?.gridLines,\r\n              )}\r\n              style={styles?.gridLines}\r\n            />\r\n          ) : null}\r\n          {values ? (\r\n            <text\r\n              x={d}\r\n              y={labelType === 'primary' ? y2 : y1}\r\n              dy={labelType === 'primary' ? '1em' : '0.75em'}\r\n              dx={labelType === 'primary' ? 0 : d < 0 || leftLabel ? -3 : 3}\r\n              style={{\r\n                textAnchor:\r\n                  labelType === 'primary' ? 'middle' : d < 0 || leftLabel ? 'end' : 'start',\r\n                ...(styles?.labels || {}),\r\n              }}\r\n              className={cn(\r\n                labelType === 'primary'\r\n                  ? 'fill-primary-gray-700 dark:fill-primary-gray-300 text-xs'\r\n                  : 'fill-primary-gray-550 dark:fill-primary-gray-500 text-xs',\r\n                classNames?.labels,\r\n              )}\r\n            >\r\n              {typeof values[i] === 'string'\r\n                ? values[i]\r\n                : numberFormattingFunction(values[i], 'NA', precision, prefix, suffix)}\r\n            </text>\r\n          ) : null}\r\n        </g>\r\n      ))}\r\n    </>\r\n  );\r\n}\r\n"],"names":["XTicksAndGridLines","props","values","x","y1","y2","styles","classNames","prefix","suffix","labelType","showGridLines","precision","leftLabel","d","jsx","cn","numberFormattingFunction"],"mappings":";;AAmBO,SAASA,EAAmBC,GAAc;AAC/C,QAAM;AAAA,IACJ,QAAAC;AAAA,IACA,GAAAC;AAAA,IACA,IAAAC;AAAA,IACA,IAAAC;AAAA,IACA,QAAAC;AAAA,IACA,YAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC;AAAA,IACA,WAAAC;AAAA,IACA,eAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,EAAA,IACVZ;AACJ,SAAI,CAACC,KAAU,CAACS,IAAsB,2CAGjC,UAAAR,EAAE,IAAI,CAACW,GAAG,6BACR,KAAA,EACE,UAAA;AAAA,IAAAH,IACCI,gBAAAA,EAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAID;AAAA,QACJ,IAAIA;AAAA,QACJ,IAAAV;AAAA,QACA,IAAAC;AAAA,QACA,WAAWW;AAAAA,UACT;AAAA,UACAT,GAAY;AAAA,QAAA;AAAA,QAEd,OAAOD,GAAQ;AAAA,MAAA;AAAA,IAAA,IAEf;AAAA,IACHJ,IACCa,gBAAAA,EAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAGD;AAAA,QACH,GAAGJ,MAAc,YAAYL,IAAKD;AAAA,QAClC,IAAIM,MAAc,YAAY,QAAQ;AAAA,QACtC,IAAIA,MAAc,YAAY,IAAII,IAAI,KAAKD,IAAY,KAAK;AAAA,QAC5D,OAAO;AAAA,UACL,YACEH,MAAc,YAAY,WAAWI,IAAI,KAAKD,IAAY,QAAQ;AAAA,UACpE,GAAIP,GAAQ,UAAU,CAAA;AAAA,QAAC;AAAA,QAEzB,WAAWU;AAAAA,UACTN,MAAc,YACV,6DACA;AAAA,UACJH,GAAY;AAAA,QAAA;AAAA,QAGb,UAAA,OAAOL,EAAO,CAAC,KAAM,WAClBA,EAAO,CAAC,IACRe,EAAyBf,EAAO,CAAC,GAAG,MAAMU,GAAWJ,GAAQC,CAAM;AAAA,MAAA;AAAA,IAAA,IAEvE;AAAA,EAAA,KApCE,CAqCR,CACD,GACH;AAEJ;"}
+{"version":3,"file":"XTicksAndGridLines-DuydSnZ_.js","sources":["../src/Components/Elements/Axes/XTicksAndGridLines.tsx"],"sourcesContent":["import { cn } from '@undp/design-system-react/cn';\r\n\r\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\r\n\r\ninterface Props {\r\n  values?: (number | string)[];\r\n  x: number[];\r\n  y2: number;\r\n  y1: number;\r\n  styles: { gridLines?: React.CSSProperties; labels?: React.CSSProperties };\r\n  classNames: { gridLines?: string; labels?: string };\r\n  prefix?: string;\r\n  suffix?: string;\r\n  labelType: 'primary' | 'secondary';\r\n  showGridLines: boolean;\r\n  leftLabel?: boolean;\r\n  precision: number;\r\n}\r\n\r\nexport function XTicksAndGridLines(props: Props) {\r\n  const {\r\n    values,\r\n    x,\r\n    y1,\r\n    y2,\r\n    styles,\r\n    classNames,\r\n    prefix,\r\n    suffix,\r\n    labelType,\r\n    showGridLines,\r\n    precision,\r\n    leftLabel = false,\r\n  } = props;\r\n  if (!values && !showGridLines) return null;\r\n  return (\r\n    <>\r\n      {x.map((d, i) => (\r\n        <g key={i}>\r\n          {showGridLines ? (\r\n            <line\r\n              x1={d}\r\n              x2={d}\r\n              y1={y1}\r\n              y2={y2}\r\n              className={cn(\r\n                'undp-tick-line stroke-primary-gray-500 dark:stroke-primary-gray-550',\r\n                classNames?.gridLines,\r\n              )}\r\n              style={styles?.gridLines}\r\n            />\r\n          ) : null}\r\n          {values ? (\r\n            <text\r\n              x={d}\r\n              y={labelType === 'primary' ? y2 : y1}\r\n              dy={labelType === 'primary' ? '1em' : '0.75em'}\r\n              dx={labelType === 'primary' ? 0 : d < 0 || leftLabel ? -3 : 3}\r\n              style={{\r\n                textAnchor:\r\n                  labelType === 'primary' ? 'middle' : d < 0 || leftLabel ? 'end' : 'start',\r\n                ...(styles?.labels || {}),\r\n              }}\r\n              className={cn(\r\n                labelType === 'primary'\r\n                  ? 'fill-primary-gray-700 dark:fill-primary-gray-300 text-xs'\r\n                  : 'fill-primary-gray-550 dark:fill-primary-gray-500 text-xs',\r\n                classNames?.labels,\r\n              )}\r\n            >\r\n              {typeof values[i] === 'string'\r\n                ? values[i]\r\n                : numberFormattingFunction(values[i], 'NA', precision, prefix, suffix)}\r\n            </text>\r\n          ) : null}\r\n        </g>\r\n      ))}\r\n    </>\r\n  );\r\n}\r\n"],"names":["XTicksAndGridLines","props","values","x","y1","y2","styles","classNames","prefix","suffix","labelType","showGridLines","precision","leftLabel","d","jsx","cn","numberFormattingFunction"],"mappings":";;AAmBO,SAASA,EAAmBC,GAAc;AAC/C,QAAM;AAAA,IACJ,QAAAC;AAAA,IACA,GAAAC;AAAA,IACA,IAAAC;AAAA,IACA,IAAAC;AAAA,IACA,QAAAC;AAAA,IACA,YAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC;AAAA,IACA,WAAAC;AAAA,IACA,eAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,EAAA,IACVZ;AACJ,SAAI,CAACC,KAAU,CAACS,IAAsB,2CAGjC,UAAAR,EAAE,IAAI,CAACW,GAAG,6BACR,KAAA,EACE,UAAA;AAAA,IAAAH,IACCI,gBAAAA,EAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAID;AAAA,QACJ,IAAIA;AAAA,QACJ,IAAAV;AAAA,QACA,IAAAC;AAAA,QACA,WAAWW;AAAAA,UACT;AAAA,UACAT,GAAY;AAAA,QAAA;AAAA,QAEd,OAAOD,GAAQ;AAAA,MAAA;AAAA,IAAA,IAEf;AAAA,IACHJ,IACCa,gBAAAA,EAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAGD;AAAA,QACH,GAAGJ,MAAc,YAAYL,IAAKD;AAAA,QAClC,IAAIM,MAAc,YAAY,QAAQ;AAAA,QACtC,IAAIA,MAAc,YAAY,IAAII,IAAI,KAAKD,IAAY,KAAK;AAAA,QAC5D,OAAO;AAAA,UACL,YACEH,MAAc,YAAY,WAAWI,IAAI,KAAKD,IAAY,QAAQ;AAAA,UACpE,GAAIP,GAAQ,UAAU,CAAA;AAAA,QAAC;AAAA,QAEzB,WAAWU;AAAAA,UACTN,MAAc,YACV,6DACA;AAAA,UACJH,GAAY;AAAA,QAAA;AAAA,QAGb,UAAA,OAAOL,EAAO,CAAC,KAAM,WAClBA,EAAO,CAAC,IACRe,EAAyBf,EAAO,CAAC,GAAG,MAAMU,GAAWJ,GAAQC,CAAM;AAAA,MAAA;AAAA,IAAA,IAEvE;AAAA,EAAA,KApCE,CAqCR,CACD,GACH;AAEJ;"}

package/dist/{XTicksAndGridLines-CCzXIV8d.cjs → XTicksAndGridLines-RKy7BVCO.cjs}

@@ -1,2 +1,2 @@
-"use strict";const r=require("./index-CHPV5EwG-DDoeWRVt.cjs"),g=require("./numberFormattingFunction-02t-wJta.cjs");function f(p){const{values:e,x:o,y1:n,y2:a,styles:l,classNames:m,prefix:u,suffix:c,labelType:i,showGridLines:x,precision:d,leftLabel:y=!1}=p;return!e&&!x?null:r.jsxRuntimeExports.jsx(r.jsxRuntimeExports.Fragment,{children:o.map((s,t)=>r.jsxRuntimeExports.jsxs("g",{children:[x?r.jsxRuntimeExports.jsx("line",{x1:s,x2:s,y1:n,y2:a,className:r.mo("undp-tick-line stroke-primary-gray-500 dark:stroke-primary-gray-550",m?.gridLines),style:l?.gridLines}):null,e?r.jsxRuntimeExports.jsx("text",{x:s,y:i==="primary"?a:n,dy:i==="primary"?"1em":"0.75em",dx:i==="primary"?0:s<0||y?-3:3,style:{textAnchor:i==="primary"?"middle":s<0||y?"end":"start",...l?.labels||{}},className:r.mo(i==="primary"?"fill-primary-gray-700 dark:fill-primary-gray-300 text-xs":"fill-primary-gray-550 dark:fill-primary-gray-500 text-xs",m?.labels),children:typeof e[t]=="string"?e[t]:g.numberFormattingFunction(e[t],"NA",d,u,c)}):null]},t))})}exports.XTicksAndGridLines=f;
-//# sourceMappingURL=XTicksAndGridLines-CCzXIV8d.cjs.map
+"use strict";const r=require("./index-CHPV5EwG-DjM48pIC.cjs"),g=require("./numberFormattingFunction-02t-wJta.cjs");function f(p){const{values:e,x:o,y1:n,y2:a,styles:l,classNames:m,prefix:u,suffix:c,labelType:i,showGridLines:x,precision:d,leftLabel:y=!1}=p;return!e&&!x?null:r.jsxRuntimeExports.jsx(r.jsxRuntimeExports.Fragment,{children:o.map((s,t)=>r.jsxRuntimeExports.jsxs("g",{children:[x?r.jsxRuntimeExports.jsx("line",{x1:s,x2:s,y1:n,y2:a,className:r.mo("undp-tick-line stroke-primary-gray-500 dark:stroke-primary-gray-550",m?.gridLines),style:l?.gridLines}):null,e?r.jsxRuntimeExports.jsx("text",{x:s,y:i==="primary"?a:n,dy:i==="primary"?"1em":"0.75em",dx:i==="primary"?0:s<0||y?-3:3,style:{textAnchor:i==="primary"?"middle":s<0||y?"end":"start",...l?.labels||{}},className:r.mo(i==="primary"?"fill-primary-gray-700 dark:fill-primary-gray-300 text-xs":"fill-primary-gray-550 dark:fill-primary-gray-500 text-xs",m?.labels),children:typeof e[t]=="string"?e[t]:g.numberFormattingFunction(e[t],"NA",d,u,c)}):null]},t))})}exports.XTicksAndGridLines=f;
+//# sourceMappingURL=XTicksAndGridLines-RKy7BVCO.cjs.map