@undp/data-viz 1.2.8 → 1.3.1

package/dist/Types.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=Types.js.map

package/dist/Types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/Typography-Ctgfl1J5.js

@@ -0,0 +1,140 @@
+import { a as n, m as s, b as r } from "./index-CHPV5EwG-BPSP-7Jg.js";
+const d = r("mt-0 ml-0 mr-0", {
+  variants: {
+    size: {
+      xs: "text-xs",
+      sm: "text-sm",
+      base: "text-base",
+      "base-responsive": "text-base md:text-xl",
+      lg: "text-lg",
+      xl: "text-xl"
+    },
+    leading: {
+      none: "leading-none",
+      xs: "leading-[1.25]",
+      sm: "leading-[1.375]",
+      base: "leading-[1.4]",
+      lg: "leading-[1.625]",
+      xl: "leading-[2]"
+    },
+    marginBottom: {
+      none: "mb-0",
+      "3xs": "mb-1",
+      "2xs": "mb-2",
+      xs: "mb-3",
+      sm: "mb-4",
+      base: "mb-5",
+      lg: "mb-6",
+      xl: "mb-7"
+    }
+  },
+  defaultVariants: {
+    size: "base-responsive",
+    leading: "base",
+    marginBottom: "base"
+  }
+});
+function x({
+  children: e,
+  className: t,
+  size: m,
+  leading: a,
+  marginBottom: l,
+  ...o
+}) {
+  return /* @__PURE__ */ n.jsx("p", { ...o, className: s(d({ size: m, leading: a, marginBottom: l }), t), children: e });
+}
+const i = r("mt-0 ml-0 mr-0 p-0", {
+  variants: {
+    marginBottom: {
+      none: "mb-0",
+      "2xs": "mb-1",
+      xs: "mb-2",
+      sm: "mb-3",
+      "base-responsive": "mb-3 md:mb-4",
+      base: "mb-4",
+      lg: "mb-5",
+      xl: "mb-6"
+    }
+  },
+  defaultVariants: { marginBottom: "base-responsive" }
+});
+function g({
+  children: e,
+  className: t,
+  marginBottom: m,
+  ...a
+}) {
+  return /* @__PURE__ */ n.jsx(
+    "h2",
+    {
+      ...a,
+      className: s(
+        "text-[2.5rem] md:text-[2.813rem] lg:text-[3.438rem] font-bold leading-[1.1]",
+        i({ marginBottom: m }),
+        t
+      ),
+      children: e
+    }
+  );
+}
+function c({
+  children: e,
+  className: t,
+  marginBottom: m,
+  ...a
+}) {
+  return /* @__PURE__ */ n.jsx(
+    "h3",
+    {
+      ...a,
+      className: s(
+        "text-[1.875rem] md:text-[2.188rem] font-semibold leading-[1.15]",
+        i({ marginBottom: m }),
+        t
+      ),
+      children: e
+    }
+  );
+}
+function u({
+  children: e,
+  className: t,
+  marginBottom: m,
+  ...a
+}) {
+  return /* @__PURE__ */ n.jsx(
+    "h5",
+    {
+      ...a,
+      className: s(
+        "text-[1.25rem] md:text-[1.563rem] font-normal leading-[1.15]",
+        i({ marginBottom: m }),
+        t
+      ),
+      children: e
+    }
+  );
+}
+function h({ children: e, className: t, ...m }) {
+  return /* @__PURE__ */ n.jsx(
+    "a",
+    {
+      ...m,
+      className: s(
+        "undp-link light text-primary-black dark:text-primary-white dark:text-primary-white bg-double-red dark:bg-double-white",
+        "cursor-pointer no-underline focus-visible:outline-hidden focus-visible:shadow-[0_0_0_#0468b1]",
+        t
+      ),
+      children: e
+    }
+  );
+}
+export {
+  h as H,
+  g as f,
+  c as h,
+  u as k,
+  x as u
+};
+//# sourceMappingURL=Typography-Ctgfl1J5.js.map

package/dist/Typography-Ctgfl1J5.js.map

@@ -0,0 +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]}

package/dist/Typography-k-kOjICQ.cjs

@@ -0,0 +1,2 @@
+"use strict";const e=require("./index-CHPV5EwG-DDoeWRVt.cjs"),l=e.j("mt-0 ml-0 mr-0",{variants:{size:{xs:"text-xs",sm:"text-sm",base:"text-base","base-responsive":"text-base md:text-xl",lg:"text-lg",xl:"text-xl"},leading:{none:"leading-none",xs:"leading-[1.25]",sm:"leading-[1.375]",base:"leading-[1.4]",lg:"leading-[1.625]",xl:"leading-[2]"},marginBottom:{none:"mb-0","3xs":"mb-1","2xs":"mb-2",xs:"mb-3",sm:"mb-4",base:"mb-5",lg:"mb-6",xl:"mb-7"}},defaultVariants:{size:"base-responsive",leading:"base",marginBottom:"base"}});function o({children:t,className:m,size:a,leading:n,marginBottom:i,...r}){return e.ae.jsx("p",{...r,className:e.mo(l({size:a,leading:n,marginBottom:i}),m),children:t})}const s=e.j("mt-0 ml-0 mr-0 p-0",{variants:{marginBottom:{none:"mb-0","2xs":"mb-1",xs:"mb-2",sm:"mb-3","base-responsive":"mb-3 md:mb-4",base:"mb-4",lg:"mb-5",xl:"mb-6"}},defaultVariants:{marginBottom:"base-responsive"}});function d({children:t,className:m,marginBottom:a,...n}){return e.ae.jsx("h2",{...n,className:e.mo("text-[2.5rem] md:text-[2.813rem] lg:text-[3.438rem] font-bold leading-[1.1]",s({marginBottom:a}),m),children:t})}function b({children:t,className:m,marginBottom:a,...n}){return e.ae.jsx("h3",{...n,className:e.mo("text-[1.875rem] md:text-[2.188rem] font-semibold leading-[1.15]",s({marginBottom:a}),m),children:t})}function x({children:t,className:m,marginBottom:a,...n}){return e.ae.jsx("h5",{...n,className:e.mo("text-[1.25rem] md:text-[1.563rem] font-normal leading-[1.15]",s({marginBottom:a}),m),children:t})}function g({children:t,className:m,...a}){return e.ae.jsx("a",{...a,className:e.mo("undp-link light text-primary-black dark:text-primary-white dark:text-primary-white bg-double-red dark:bg-double-white","cursor-pointer no-underline focus-visible:outline-hidden focus-visible:shadow-[0_0_0_#0468b1]",m),children:t})}exports.H=g;exports.f=d;exports.h=b;exports.k=x;exports.u=o;
+//# sourceMappingURL=Typography-k-kOjICQ.cjs.map

package/dist/Typography-k-kOjICQ.cjs.map

@@ -0,0 +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]}

package/dist/UnitChart.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./index-CHPV5EwG-DDoeWRVt.cjs"),F=require("react"),O=require("./index-C21TvELx.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-BCmzDU2O.cjs"),Y=require("./index-DVOJ7vxH.cjs"),Z=require("./proxy-PQd2AItT.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"}`,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=_;
+//# sourceMappingURL=UnitChart.cjs.map

package/dist/UnitChart.cjs.map

@@ -0,0 +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          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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"}

package/dist/UnitChart.d.ts

@@ -0,0 +1,132 @@
+import { JSX } from 'react/jsx-runtime';
+
+declare interface AnimateDataType {
+    duration: number;
+    once: boolean;
+    amount: 'some' | 'all' | number;
+}
+
+declare interface AxesClassNameObject {
+    gridLines?: string;
+    labels?: string;
+    title?: string;
+    axis?: string;
+}
+
+declare interface AxesStyleObject {
+    gridLines?: React.CSSProperties;
+    labels?: React.CSSProperties;
+    title?: React.CSSProperties;
+    axis?: React.CSSProperties;
+}
+
+declare interface ClassNameObject {
+    title?: string;
+    footnote?: string;
+    source?: string;
+    description?: string;
+    tooltip?: string;
+    xAxis?: AxesClassNameObject;
+    yAxis?: AxesClassNameObject;
+    legend?: string;
+    graphContainer?: string;
+    graphObjectValues?: string;
+    dataConnectors?: string;
+    mouseOverLine?: string;
+    regLine?: string;
+    dataCards?: string;
+}
+
+declare type Languages = 'en' | 'ar' | 'az' | 'bn' | 'cy' | 'he' | 'hi' | 'jp' | 'ka' | 'km' | 'ko' | 'my' | 'ne' | 'zh' | 'custom';
+
+declare interface Props {
+    /** Array of data objects */
+    data: UnitChartDataType[];
+    /** Title of the graph */
+    graphTitle?: string | React.ReactNode;
+    /** Description of the graph */
+    graphDescription?: string | React.ReactNode;
+    /** Note with h2 tag just above the graph. Can be used to highlight text */
+    note?: string;
+    /** Footnote for the graph */
+    footNote?: string | React.ReactNode;
+    /** Source data for the graph */
+    sources?: SourcesDataType[];
+    /** Accessibility label */
+    ariaLabel?: string;
+    /** Colors of the highlighted circles */
+    colors?: string[];
+    /** Background color of the graph */
+    backgroundColor?: string | boolean;
+    /** Custom styles for the graph. Each object should be a valid React CSS style object. */
+    styles?: StyleObject;
+    /** Custom class names */
+    classNames?: ClassNameObject;
+    /** Width of the graph */
+    width?: number;
+    /** Height of the graph */
+    height?: number;
+    /** Minimum height of the graph */
+    minHeight?: number;
+    /** Relative height scaling factor. This overwrites the height props */
+    relativeHeight?: number;
+    /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */
+    padding?: string;
+    /** Size of the visualization */
+    size?: number;
+    /** No. of dots in a single row */
+    gridSize?: number;
+    /** Spacing between 2 dots */
+    unitPadding?: number;
+    /** Total no. of dot that are rendered in the chart */
+    totalNoOfDots?: number;
+    /** Toggle visibility of stroke for the unfilled dots */
+    showStrokeForWhiteDots?: boolean;
+    /** Toggles if the graph animates in when loaded.  */
+    animate?: boolean | AnimateDataType;
+    /** Toggle visibility of color scale */
+    showColorScale?: boolean;
+    /** Specifies the number of decimal places to display in the value. */
+    precision?: number;
+    /** Enable graph download option as png */
+    graphDownload?: boolean;
+    /** Enable data download option as a csv */
+    dataDownload?: boolean;
+    /** Language setting  */
+    language?: Languages;
+    /** Color theme */
+    theme?: 'light' | 'dark';
+    /** Unique ID for the graph */
+    graphID?: string;
+}
+
+declare interface SourcesDataType {
+    source: string;
+    link?: string;
+}
+
+declare interface StyleObject {
+    title?: React.CSSProperties;
+    footnote?: React.CSSProperties;
+    source?: React.CSSProperties;
+    description?: React.CSSProperties;
+    graphContainer?: React.CSSProperties;
+    tooltip?: React.CSSProperties;
+    xAxis?: AxesStyleObject;
+    yAxis?: AxesStyleObject;
+    graphObjectValues?: React.CSSProperties;
+    dataConnectors?: React.CSSProperties;
+    mouseOverLine?: React.CSSProperties;
+    regLine?: React.CSSProperties;
+    dataCards?: React.CSSProperties;
+}
+
+export declare function UnitChart(props: Props): JSX.Element | null;
+
+declare interface UnitChartDataType {
+    label: number | string;
+    value: number;
+    data?: object;
+}
+
+export { }

package/dist/UnitChart.js

@@ -0,0 +1,217 @@
+import { j as r, m as E } from "./index-CHPV5EwG-BPSP-7Jg.js";
+import { useRef as F } from "react";
+import { s as O } from "./index-D7ltPi18.js";
+import { f as U, u as J } from "./Typography-Ctgfl1J5.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-BAHrBy6b.js";
+import { A as _ } from "./index-BxAUvrua.js";
+import { m as ee } from "./proxy-DJxJg1kD.js";
+function he(H) {
+  const {
+    data: s,
+    size: u = 200,
+    graphTitle: d,
+    sources: N,
+    colors: b = X.light.categoricalColors.colors,
+    graphDescription: h,
+    totalNoOfDots: x = 100,
+    unitPadding: L = 3,
+    gridSize: c = 10,
+    footNote: k,
+    padding: $,
+    backgroundColor: n = !1,
+    graphID: S,
+    graphDownload: C = !1,
+    language: w = "en",
+    showColorScale: W = !0,
+    showStrokeForWhiteDots: f = !0,
+    note: D,
+    dataDownload: A = !1,
+    theme: B = "light",
+    width: o,
+    height: g,
+    minHeight: i = 0,
+    relativeHeight: l,
+    ariaLabel: G,
+    styles: m,
+    classNames: y,
+    animate: z = !1,
+    precision: P = 2
+  } = 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 = u / c, p = (a - L * 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 j = [];
+  return s.forEach((e, t) => {
+    const q = Math.round(e.value / T * x);
+    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,
+      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"}`,
+            y?.graphContainer
+          ),
+          style: {
+            ...m?.graphContainer || {},
+            minHeight: "inherit",
+            ...n && n !== !0 ? { backgroundColor: n } : {}
+          },
+          id: S,
+          ref: V,
+          "aria-label": G || `${d ? `The graph shows ${d}. ` : ""}${h ? ` ${h}` : ""}`,
+          children: /* @__PURE__ */ r.jsx(
+            "div",
+            {
+              className: "flex grow",
+              style: { padding: n ? $ || "1rem" : $ || 0 },
+              children: /* @__PURE__ */ r.jsxs("div", { className: "flex flex-col gap-3 w-full grow", children: [
+                d || h || C ? /* @__PURE__ */ r.jsx(
+                  Q,
+                  {
+                    styles: {
+                      title: m?.title,
+                      description: m?.description
+                    },
+                    classNames: {
+                      title: y?.title,
+                      description: y?.description
+                    },
+                    graphTitle: d,
+                    graphDescription: h,
+                    width: o,
+                    graphDownload: C ? V.current : void 0,
+                    dataDownload: A ? s.map((e) => e.data).filter((e) => e !== void 0).length > 0 ? s.map((e) => e.data).filter((e) => e !== void 0) : s.filter((e) => e !== void 0) : null
+                  }
+                ) : null,
+                D ? /* @__PURE__ */ r.jsx(
+                  U,
+                  {
+                    marginBottom: "2xs",
+                    className: "text-primary-gray-700 dark:text-primary-gray-100 font-bold",
+                    style: { width: o ? `${o}px` : "100%" },
+                    children: D
+                  }
+                ) : null,
+                /* @__PURE__ */ r.jsxs("div", { className: "flex grow flex-col gap-4 justify-between", children: [
+                  /* @__PURE__ */ r.jsxs("div", { children: [
+                    W ? /* @__PURE__ */ r.jsx(
+                      "div",
+                      {
+                        className: "mb-4 leading-0",
+                        style: { width: o ? `${o}px` : "100%" },
+                        "aria-label": "Color legend",
+                        children: /* @__PURE__ */ r.jsx("div", { className: "flex mb-0 flex-wrap gap-x-4 gap-y-1", children: s.map((e, t) => /* @__PURE__ */ r.jsxs("div", { className: "flex gap-2 items-center", children: [
+                          /* @__PURE__ */ r.jsx(
+                            "div",
+                            {
+                              className: "w-3 h-3 rounded-full",
+                              style: { backgroundColor: b[t] }
+                            }
+                          ),
+                          /* @__PURE__ */ r.jsxs(
+                            J,
+                            {
+                              marginBottom: "none",
+                              size: "sm",
+                              className: "text-primary-gray-700 dark:text-primary-gray-100",
+                              children: [
+                                e.label,
+                                ":",
+                                " ",
+                                /* @__PURE__ */ r.jsx("span", { className: "font-bold", children: Y(e.value, "NA", P) })
+                              ]
+                            }
+                          )
+                        ] }, t)) })
+                      }
+                    ) : null,
+                    /* @__PURE__ */ r.jsx("div", { "aria-label": "Graph area", children: /* @__PURE__ */ r.jsx(
+                      "svg",
+                      {
+                        width: `${o || u}px`,
+                        height: `${Math.max(
+                          i,
+                          g ? l && o ? i ? o * l > i ? o * l : i : o * l : g : Math.floor((x - 1) / c) * a + a / 2 + p + 5
+                        )}px`,
+                        ref: M,
+                        direction: "ltr",
+                        viewBox: `0 0 ${o || u} ${Math.max(
+                          i,
+                          g ? l && o ? i ? o * l > i ? o * l : i : o * l : g : Math.floor((x - 1) / c) * a + a / 2 + p + 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 },
+                                strokeWidth: 1
+                              },
+                              whileInView: {
+                                fill: e.color,
+                                opacity: 1,
+                                ...f ? {} : { stroke: e.color },
+                                strokeWidth: 1,
+                                transition: {
+                                  duration: 0,
+                                  delay: v.duration / j.length * t
+                                }
+                              }
+                            },
+                            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: p
+                          },
+                          t
+                        )) }) })
+                      }
+                    ) })
+                  ] }),
+                  N || k ? /* @__PURE__ */ r.jsx(
+                    K,
+                    {
+                      styles: {
+                        footnote: m?.footnote,
+                        source: m?.source
+                      },
+                      sources: N,
+                      footNote: k,
+                      width: o
+                    }
+                  ) : null
+                ] })
+              ] })
+            }
+          )
+        }
+      )
+    }
+  );
+}
+export {
+  he as UnitChart
+};
+//# sourceMappingURL=UnitChart.js.map