@undp/data-viz 1.2.8 → 1.3.0

package/dist/Types.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=Types.js.map

package/dist/Types.js.map

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

package/dist/Typography-CDR-DAHH.cjs

@@ -0,0 +1,2 @@
+"use strict";const o=require("./index-BHm2KTjD-D8FylaKc.cjs");var d={},g;function z(){return g||(g=1,function(m){Object.defineProperty(m,Symbol.toStringTag,{value:"Module"});const a=o.requireUtilsD9QIS7T();m.cn=a.cn,m.generateRandomId=a.generateRandomId}(d)),d}var H=z(),x={},u;function S(){return u||(u=1,function(m){Object.defineProperty(m,Symbol.toStringTag,{value:"Module"});const a=o.requireJsxRuntimeDszzpdy0(),l=o.requireIndexBHm2KTjD(),i=o.requireUtilsD9QIS7T(),b=l.cva("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 h({children:e,className:t,size:n,leading:r,marginBottom:c,...T}){return a.jsxRuntimeExports.jsx("p",{...T,className:i.cn(b({size:n,leading:r,marginBottom:c}),t),children:e})}const p=l.cva("mt-0 ml-0 mr-0 p-0 font-bold uppercase",{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"},size:{base:"text-[2.938rem] md:text-[5.125rem] lg:text-[6.25rem] tracking-[0.06rem] leading-[1.08]",sm:"text-[2.5rem] md:text-[2.813rem] lg:text-[3.438rem] leading-[1.1]"}},defaultVariants:{marginBottom:"base-responsive",size:"base"}});function f({children:e,className:t,marginBottom:n,size:r,...c}){return a.jsxRuntimeExports.jsx("h1",{...c,className:i.cn(p({marginBottom:n,size:r}),t),children:e})}const s=l.cva("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 j({children:e,className:t,marginBottom:n,...r}){return a.jsxRuntimeExports.jsx("h2",{...r,className:i.cn("text-[2.5rem] md:text-[2.813rem] lg:text-[3.438rem] font-bold leading-[1.1]",s({marginBottom:n}),t),children:e})}function B({children:e,className:t,marginBottom:n,...r}){return a.jsxRuntimeExports.jsx("h3",{...r,className:i.cn("text-[1.875rem] md:text-[2.188rem] font-semibold leading-[1.15]",s({marginBottom:n}),t),children:e})}function y({children:e,className:t,marginBottom:n,...r}){return a.jsxRuntimeExports.jsx("h4",{...r,className:i.cn("text-[1.563rem] md:text-[2.188rem] font-normal leading-[1.15]",s({marginBottom:n}),t),children:e})}function v({children:e,className:t,marginBottom:n,...r}){return a.jsxRuntimeExports.jsx("h5",{...r,className:i.cn("text-[1.25rem] md:text-[1.563rem] font-normal leading-[1.15]",s({marginBottom:n}),t),children:e})}function N({children:e,className:t,marginBottom:n,...r}){return a.jsxRuntimeExports.jsx("h6",{...r,className:i.cn("text-base font-bold leading-[1.15] uppercase tracking-[0.48px]",s({marginBottom:n}),t),children:e})}function R({children:e,className:t,marginBottom:n,...r}){return a.jsxRuntimeExports.jsx("cite",{...r,className:i.cn("text-xl md:text-2xl leading-[1.1] block font-normal",s({marginBottom:n}),t),children:e})}function E({children:e,className:t,...n}){return a.jsxRuntimeExports.jsx("code",{...n,className:i.cn("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",t),children:e})}function k({children:e,className:t,marginBottom:n,...r}){return a.jsxRuntimeExports.jsx("blockquote",{...r,className:i.cn("text-[1.625rem] md:text-[2.188rem] font-semibold leading-[1.1] md:leading-[1.25]",s({marginBottom:n}),t),children:e})}function q({children:e,className:t,...n}){return a.jsxRuntimeExports.jsx("a",{...n,className:i.cn("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})}m.A=q,m.Blockquote=k,m.Cite=R,m.Code=E,m.H1=f,m.H2=j,m.H3=B,m.H4=y,m.H5=v,m.H6=N,m.P=h}(x)),x}var w=S();exports.TypographyExports=w;exports.cnExports=H;
+//# sourceMappingURL=Typography-CDR-DAHH.cjs.map

package/dist/Typography-CDR-DAHH.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography-CDR-DAHH.cjs","sources":["../node_modules/@undp/design-system-react/dist/cn.js","../node_modules/@undp/design-system-react/dist/Typography.js"],"sourcesContent":["\"use strict\";Object.defineProperty(exports,Symbol.toStringTag,{value:\"Module\"});const e=require(\"./utils-D9-qIS7T.cjs\");exports.cn=e.cn;exports.generateRandomId=e.generateRandomId;\n//# sourceMappingURL=cn.js.map\n","\"use strict\";Object.defineProperty(exports,Symbol.toStringTag,{value:\"Module\"});const m=require(\"./jsx-runtime-Dszzpdy0.cjs\"),o=require(\"./index-BHm2KTjD.cjs\"),a=require(\"./utils-D9-qIS7T.cjs\"),l=o.cva(\"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 b({children:e,className:t,size:n,leading:s,marginBottom:i,...x}){return m.jsxRuntimeExports.jsx(\"p\",{...x,className:a.cn(l({size:n,leading:s,marginBottom:i}),t),children:e})}const c=o.cva(\"mt-0 ml-0 mr-0 p-0 font-bold uppercase\",{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\"},size:{base:\"text-[2.938rem] md:text-[5.125rem] lg:text-[6.25rem] tracking-[0.06rem] leading-[1.08]\",sm:\"text-[2.5rem] md:text-[2.813rem] lg:text-[3.438rem] leading-[1.1]\"}},defaultVariants:{marginBottom:\"base-responsive\",size:\"base\"}});function d({children:e,className:t,marginBottom:n,size:s,...i}){return m.jsxRuntimeExports.jsx(\"h1\",{...i,className:a.cn(c({marginBottom:n,size:s}),t),children:e})}const r=o.cva(\"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 u({children:e,className:t,marginBottom:n,...s}){return m.jsxRuntimeExports.jsx(\"h2\",{...s,className:a.cn(\"text-[2.5rem] md:text-[2.813rem] lg:text-[3.438rem] font-bold leading-[1.1]\",r({marginBottom:n}),t),children:e})}function g({children:e,className:t,marginBottom:n,...s}){return m.jsxRuntimeExports.jsx(\"h3\",{...s,className:a.cn(\"text-[1.875rem] md:text-[2.188rem] font-semibold leading-[1.15]\",r({marginBottom:n}),t),children:e})}function p({children:e,className:t,marginBottom:n,...s}){return m.jsxRuntimeExports.jsx(\"h4\",{...s,className:a.cn(\"text-[1.563rem] md:text-[2.188rem] font-normal leading-[1.15]\",r({marginBottom:n}),t),children:e})}function f({children:e,className:t,marginBottom:n,...s}){return m.jsxRuntimeExports.jsx(\"h5\",{...s,className:a.cn(\"text-[1.25rem] md:text-[1.563rem] font-normal leading-[1.15]\",r({marginBottom:n}),t),children:e})}function j({children:e,className:t,marginBottom:n,...s}){return m.jsxRuntimeExports.jsx(\"h6\",{...s,className:a.cn(\"text-base font-bold leading-[1.15] uppercase tracking-[0.48px]\",r({marginBottom:n}),t),children:e})}function h({children:e,className:t,marginBottom:n,...s}){return m.jsxRuntimeExports.jsx(\"cite\",{...s,className:a.cn(\"text-xl md:text-2xl leading-[1.1] block font-normal\",r({marginBottom:n}),t),children:e})}function v({children:e,className:t,...n}){return m.jsxRuntimeExports.jsx(\"code\",{...n,className:a.cn(\"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\",t),children:e})}function k({children:e,className:t,marginBottom:n,...s}){return m.jsxRuntimeExports.jsx(\"blockquote\",{...s,className:a.cn(\"text-[1.625rem] md:text-[2.188rem] font-semibold leading-[1.1] md:leading-[1.25]\",r({marginBottom:n}),t),children:e})}function H({children:e,className:t,...n}){return m.jsxRuntimeExports.jsx(\"a\",{...n,className:a.cn(\"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})}exports.A=H;exports.Blockquote=k;exports.Cite=h;exports.Code=v;exports.H1=d;exports.H2=u;exports.H3=g;exports.H4=p;exports.H5=f;exports.H6=j;exports.P=b;\n//# sourceMappingURL=Typography.js.map\n"],"names":["exports","e","m","require$$0","o","require$$1","a","require$$2","l","b","s","i","x","c","d","r","u","g","p","f","j","h","v","H"],"mappings":"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","x_google_ignoreList":[0,1]}

package/dist/Typography-XJoSE-By.js

@@ -0,0 +1,58 @@
+import { b, a as T, r as H } from "./index-BHm2KTjD-2e-Fu8L-.js";
+var c = {}, x;
+function w() {
+  return x || (x = 1, function(r) {
+    Object.defineProperty(r, Symbol.toStringTag, { value: "Module" });
+    const m = /* @__PURE__ */ b();
+    r.cn = m.cn, r.generateRandomId = m.generateRandomId;
+  }(c)), c;
+}
+var I = /* @__PURE__ */ w(), d = {}, g;
+function S() {
+  return g || (g = 1, function(r) {
+    Object.defineProperty(r, Symbol.toStringTag, { value: "Module" });
+    const m = /* @__PURE__ */ H(), o = /* @__PURE__ */ T(), i = /* @__PURE__ */ b(), u = o.cva("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 h({ children: e, className: t, size: n, leading: a, marginBottom: l, ...q }) {
+      return m.jsxRuntimeExports.jsx("p", { ...q, className: i.cn(u({ size: n, leading: a, marginBottom: l }), t), children: e });
+    }
+    const p = o.cva("mt-0 ml-0 mr-0 p-0 font-bold uppercase", { 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" }, size: { base: "text-[2.938rem] md:text-[5.125rem] lg:text-[6.25rem] tracking-[0.06rem] leading-[1.08]", sm: "text-[2.5rem] md:text-[2.813rem] lg:text-[3.438rem] leading-[1.1]" } }, defaultVariants: { marginBottom: "base-responsive", size: "base" } });
+    function f({ children: e, className: t, marginBottom: n, size: a, ...l }) {
+      return m.jsxRuntimeExports.jsx("h1", { ...l, className: i.cn(p({ marginBottom: n, size: a }), t), children: e });
+    }
+    const s = o.cva("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 j({ children: e, className: t, marginBottom: n, ...a }) {
+      return m.jsxRuntimeExports.jsx("h2", { ...a, className: i.cn("text-[2.5rem] md:text-[2.813rem] lg:text-[3.438rem] font-bold leading-[1.1]", s({ marginBottom: n }), t), children: e });
+    }
+    function B({ children: e, className: t, marginBottom: n, ...a }) {
+      return m.jsxRuntimeExports.jsx("h3", { ...a, className: i.cn("text-[1.875rem] md:text-[2.188rem] font-semibold leading-[1.15]", s({ marginBottom: n }), t), children: e });
+    }
+    function v({ children: e, className: t, marginBottom: n, ...a }) {
+      return m.jsxRuntimeExports.jsx("h4", { ...a, className: i.cn("text-[1.563rem] md:text-[2.188rem] font-normal leading-[1.15]", s({ marginBottom: n }), t), children: e });
+    }
+    function y({ children: e, className: t, marginBottom: n, ...a }) {
+      return m.jsxRuntimeExports.jsx("h5", { ...a, className: i.cn("text-[1.25rem] md:text-[1.563rem] font-normal leading-[1.15]", s({ marginBottom: n }), t), children: e });
+    }
+    function N({ children: e, className: t, marginBottom: n, ...a }) {
+      return m.jsxRuntimeExports.jsx("h6", { ...a, className: i.cn("text-base font-bold leading-[1.15] uppercase tracking-[0.48px]", s({ marginBottom: n }), t), children: e });
+    }
+    function R({ children: e, className: t, marginBottom: n, ...a }) {
+      return m.jsxRuntimeExports.jsx("cite", { ...a, className: i.cn("text-xl md:text-2xl leading-[1.1] block font-normal", s({ marginBottom: n }), t), children: e });
+    }
+    function k({ children: e, className: t, ...n }) {
+      return m.jsxRuntimeExports.jsx("code", { ...n, className: i.cn("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", t), children: e });
+    }
+    function E({ children: e, className: t, marginBottom: n, ...a }) {
+      return m.jsxRuntimeExports.jsx("blockquote", { ...a, className: i.cn("text-[1.625rem] md:text-[2.188rem] font-semibold leading-[1.1] md:leading-[1.25]", s({ marginBottom: n }), t), children: e });
+    }
+    function z({ children: e, className: t, ...n }) {
+      return m.jsxRuntimeExports.jsx("a", { ...n, className: i.cn("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 });
+    }
+    r.A = z, r.Blockquote = E, r.Cite = R, r.Code = k, r.H1 = f, r.H2 = j, r.H3 = B, r.H4 = v, r.H5 = y, r.H6 = N, r.P = h;
+  }(d)), d;
+}
+var D = /* @__PURE__ */ S();
+export {
+  D as T,
+  I as c
+};
+//# sourceMappingURL=Typography-XJoSE-By.js.map

package/dist/Typography-XJoSE-By.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography-XJoSE-By.js","sources":["../node_modules/@undp/design-system-react/dist/cn.js","../node_modules/@undp/design-system-react/dist/Typography.js"],"sourcesContent":["\"use strict\";Object.defineProperty(exports,Symbol.toStringTag,{value:\"Module\"});const e=require(\"./utils-D9-qIS7T.cjs\");exports.cn=e.cn;exports.generateRandomId=e.generateRandomId;\n//# sourceMappingURL=cn.js.map\n","\"use strict\";Object.defineProperty(exports,Symbol.toStringTag,{value:\"Module\"});const m=require(\"./jsx-runtime-Dszzpdy0.cjs\"),o=require(\"./index-BHm2KTjD.cjs\"),a=require(\"./utils-D9-qIS7T.cjs\"),l=o.cva(\"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 b({children:e,className:t,size:n,leading:s,marginBottom:i,...x}){return m.jsxRuntimeExports.jsx(\"p\",{...x,className:a.cn(l({size:n,leading:s,marginBottom:i}),t),children:e})}const c=o.cva(\"mt-0 ml-0 mr-0 p-0 font-bold uppercase\",{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\"},size:{base:\"text-[2.938rem] md:text-[5.125rem] lg:text-[6.25rem] tracking-[0.06rem] leading-[1.08]\",sm:\"text-[2.5rem] md:text-[2.813rem] lg:text-[3.438rem] leading-[1.1]\"}},defaultVariants:{marginBottom:\"base-responsive\",size:\"base\"}});function d({children:e,className:t,marginBottom:n,size:s,...i}){return m.jsxRuntimeExports.jsx(\"h1\",{...i,className:a.cn(c({marginBottom:n,size:s}),t),children:e})}const r=o.cva(\"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 u({children:e,className:t,marginBottom:n,...s}){return m.jsxRuntimeExports.jsx(\"h2\",{...s,className:a.cn(\"text-[2.5rem] md:text-[2.813rem] lg:text-[3.438rem] font-bold leading-[1.1]\",r({marginBottom:n}),t),children:e})}function g({children:e,className:t,marginBottom:n,...s}){return m.jsxRuntimeExports.jsx(\"h3\",{...s,className:a.cn(\"text-[1.875rem] md:text-[2.188rem] font-semibold leading-[1.15]\",r({marginBottom:n}),t),children:e})}function p({children:e,className:t,marginBottom:n,...s}){return m.jsxRuntimeExports.jsx(\"h4\",{...s,className:a.cn(\"text-[1.563rem] md:text-[2.188rem] font-normal leading-[1.15]\",r({marginBottom:n}),t),children:e})}function f({children:e,className:t,marginBottom:n,...s}){return m.jsxRuntimeExports.jsx(\"h5\",{...s,className:a.cn(\"text-[1.25rem] md:text-[1.563rem] font-normal leading-[1.15]\",r({marginBottom:n}),t),children:e})}function j({children:e,className:t,marginBottom:n,...s}){return m.jsxRuntimeExports.jsx(\"h6\",{...s,className:a.cn(\"text-base font-bold leading-[1.15] uppercase tracking-[0.48px]\",r({marginBottom:n}),t),children:e})}function h({children:e,className:t,marginBottom:n,...s}){return m.jsxRuntimeExports.jsx(\"cite\",{...s,className:a.cn(\"text-xl md:text-2xl leading-[1.1] block font-normal\",r({marginBottom:n}),t),children:e})}function v({children:e,className:t,...n}){return m.jsxRuntimeExports.jsx(\"code\",{...n,className:a.cn(\"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\",t),children:e})}function k({children:e,className:t,marginBottom:n,...s}){return m.jsxRuntimeExports.jsx(\"blockquote\",{...s,className:a.cn(\"text-[1.625rem] md:text-[2.188rem] font-semibold leading-[1.1] md:leading-[1.25]\",r({marginBottom:n}),t),children:e})}function H({children:e,className:t,...n}){return m.jsxRuntimeExports.jsx(\"a\",{...n,className:a.cn(\"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})}exports.A=H;exports.Blockquote=k;exports.Cite=h;exports.Code=v;exports.H1=d;exports.H2=u;exports.H3=g;exports.H4=p;exports.H5=f;exports.H6=j;exports.P=b;\n//# sourceMappingURL=Typography.js.map\n"],"names":["exports","e","require$$0","require$$1","a","require$$2","l","b","s","i","x","c","d","r","u","g","p","f","j","h","v","k","H"],"mappings":"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","x_google_ignoreList":[0,1]}

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,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./index-BHm2KTjD-D8FylaKc.cjs"),H=require("react"),U=require("./index-C21TvELx.cjs"),E=require("./Typography-CDR-DAHH.cjs"),K=require("./GraphFooter.js"),J=require("./GraphHeader.js"),Q=require("./Colors.js"),X=require("./numberFormattingFunction.js"),M=require("./use-in-view-Dl1CsAIo.cjs"),Y=require("./index-a2C2Bqn2.cjs");function Z(V){const{data:n,size:g=200,graphTitle:x,sources:R,colors:b=Q.Colors.light.categoricalColors.colors,graphDescription:d,totalNoOfDots:f=100,unitPadding:z=3,gridSize:c=10,footNote:N,padding:$,backgroundColor:l=!1,graphID:I,graphDownload:k=!1,language:j="en",showColorScale:S=!0,showStrokeForWhiteDots:m=!0,note:C,dataDownload:G=!1,theme:P="light",width:r,height:p,minHeight:s=0,relativeHeight:a,ariaLabel:B,styles:u,classNames:y,animate:q=!1,precision:L=2}=V,D=H.useRef(null),w=q===!0?{duration:.5,once:!0,amount:.5}:q||{duration:0,once:!0,amount:0},W=M.useInView(D,{once:w.once,amount:w.amount}),A=U.sum(n.map(e=>e.value)),T=H.useRef(null),o=g/c,h=(o-z*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 O=Math.round(e.value/A*f);for(let F=0;F<O;F+=1)v.push({color:b[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:E.cnExports.cn(`${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"}`,y?.graphContainer),style:{...u?.graphContainer||{},minHeight:"inherit",...l&&l!==!0?{backgroundColor:l}:{}},id:I,ref:T,"aria-label":B||`${x?`The graph shows ${x}. `:""}${d?` ${d}`:""}`,children:t.jsxRuntimeExports.jsx("div",{className:"flex grow",style:{padding:l?$||"1rem":$||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:y?.title,description:y?.description},graphTitle:x,graphDescription:d,width:r,graphDownload:k?T.current:void 0,dataDownload:G?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(E.TypographyExports.H2,{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:[S?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:b[i]}}),t.jsxRuntimeExports.jsxs(E.TypographyExports.P,{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:X.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,p?a&&r?s?r*a>s?r*a:s:r*a:p:Math.floor((f-1)/c)*o+o/2+h+5)}px`,ref:D,direction:"ltr",viewBox:`0 0 ${r||g} ${Math.max(s,p?a&&r?s?r*a>s?r*a:s:r*a:p:Math.floor((f-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(M.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:w.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:h},i))})})})})]}),R||N?t.jsxRuntimeExports.jsx(K.GraphFooter,{styles:{footnote:u?.footnote,source:u?.source},sources:R,footNote:N,width:r}):null]})]})})})})}exports.UnitChart=Z;
+//# sourceMappingURL=UnitChart.js.map

package/dist/UnitChart.js.map

@@ -0,0 +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          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/XAxesLabels-C9REbQQs.cjs

@@ -0,0 +1,2 @@
+"use strict";const i=require("./index-BHm2KTjD-D8FylaKc.cjs"),m=require("./Typography-CDR-DAHH.cjs"),p=require("./use-in-view-Dl1CsAIo.cjs");function d(n){const{value:s,y:r,x:t,style:a,className:l,width:o,height:x,alignment:c="top",animate:e,isInView:u}=n;return i.jsxRuntimeExports.jsx(p.motion.foreignObject,{width:o,height:x,y:r,variants:{initial:{x:t},whileInView:{x:t,transition:{duration:e.duration}}},initial:"initial",animate:u?"whileInView":"initial",exit:{opacity:0,transition:{duration:e.duration}},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:m.cnExports.cn("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:s})})})}exports.XAxesLabels=d;
+//# sourceMappingURL=XAxesLabels-C9REbQQs.cjs.map

package/dist/XAxesLabels-C9REbQQs.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"XAxesLabels-C9REbQQs.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.foreignObject\r\n      width={width}\r\n      height={height}\r\n      y={y}\r\n      variants={{\r\n        initial: {\r\n          x,\r\n        },\r\n        whileInView: {\r\n          x,\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      <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    </motion.foreignObject>\r\n  );\r\n}\r\n"],"names":["XAxesLabels","props","value","y","x","style","className","width","height","alignment","animate","isInView","jsx","motion","cn"],"mappings":"6IAkBO,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,cAAP,CACC,MAAAN,EACA,OAAAC,EACA,EAAAL,EACA,SAAU,CACR,QAAS,CACP,EAAAC,CAAA,EAEF,YAAa,CACX,EAAAA,EACA,WAAY,CAAE,SAAUM,EAAQ,QAAA,CAAS,CAC3C,EAEF,QAAQ,UACR,QAASC,EAAW,cAAgB,UACpC,KAAM,CAAE,QAAS,EAAG,WAAY,CAAE,SAAUD,EAAQ,SAAS,EAE7D,SAAAE,EAAAA,kBAAAA,IAAC,MAAA,CACC,UAAW,wCACTH,IAAc,MAAQ,gBAAkB,aAC1C,GAEA,SAAAG,EAAAA,kBAAAA,IAAC,IAAA,CACC,UAAWE,EAAAA,UAAAA,GACT,oGACAR,CAAA,EAEF,MAAAD,EAEC,SAAAH,CAAA,CAAA,CACH,CAAA,CACF,CAAA,CAGN"}

package/dist/XAxesLabels-DVw7Lvuz.js

@@ -0,0 +1,58 @@
+import { j as i } from "./index-BHm2KTjD-2e-Fu8L-.js";
+import { c as p } from "./Typography-XJoSE-By.js";
+import { m as d } from "./use-in-view-CZPXmTZM.js";
+function y(e) {
+  const {
+    value: a,
+    y: r,
+    x: t,
+    style: s,
+    className: o,
+    width: l,
+    height: m,
+    alignment: c = "top",
+    animate: n,
+    isInView: x
+  } = e;
+  return /* @__PURE__ */ i.jsx(
+    d.foreignObject,
+    {
+      width: l,
+      height: m,
+      y: r,
+      variants: {
+        initial: {
+          x: t
+        },
+        whileInView: {
+          x: t,
+          transition: { duration: n.duration }
+        }
+      },
+      initial: "initial",
+      animate: x ? "whileInView" : "initial",
+      exit: { opacity: 0, transition: { duration: n.duration } },
+      children: /* @__PURE__ */ i.jsx(
+        "div",
+        {
+          className: `flex flex-col items-center h-inherit ${c === "top" ? "justify-start" : "justify-end"}`,
+          children: /* @__PURE__ */ i.jsx(
+            "p",
+            {
+              className: p.cn(
+                "fill-primary-gray-700 dark:fill-primary-gray-300 text-xs m-0 py-0 px-1.5 text-center leading-none",
+                o
+              ),
+              style: s,
+              children: a
+            }
+          )
+        }
+      )
+    }
+  );
+}
+export {
+  y as X
+};
+//# sourceMappingURL=XAxesLabels-DVw7Lvuz.js.map

package/dist/XAxesLabels-DVw7Lvuz.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"XAxesLabels-DVw7Lvuz.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.foreignObject\r\n      width={width}\r\n      height={height}\r\n      y={y}\r\n      variants={{\r\n        initial: {\r\n          x,\r\n        },\r\n        whileInView: {\r\n          x,\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      <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    </motion.foreignObject>\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,MACC,OAAAN;AAAA,MACA,QAAAC;AAAA,MACA,GAAAL;AAAA,MACA,UAAU;AAAA,QACR,SAAS;AAAA,UACP,GAAAC;AAAA,QAAA;AAAA,QAEF,aAAa;AAAA,UACX,GAAAA;AAAA,UACA,YAAY,EAAE,UAAUM,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,UAAAE,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,EAAAA;AAAAA,gBACT;AAAA,gBACAR;AAAA,cAAA;AAAA,cAEF,OAAAD;AAAA,cAEC,UAAAH;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}

package/dist/XTicksAndGridLines-CUefTINd.js

@@ -0,0 +1,57 @@
+import { j as s } from "./index-BHm2KTjD-2e-Fu8L-.js";
+import { c as x } from "./Typography-XJoSE-By.js";
+import { numberFormattingFunction as u } from "./numberFormattingFunction.js";
+function h(o) {
+  const {
+    values: r,
+    x: c,
+    y1: l,
+    y2: t,
+    styles: n,
+    classNames: m,
+    prefix: f,
+    suffix: d,
+    labelType: e,
+    showGridLines: y,
+    precision: g,
+    leftLabel: p = !1
+  } = o;
+  return !r && !y ? null : /* @__PURE__ */ s.jsx(s.Fragment, { children: c.map((i, a) => /* @__PURE__ */ s.jsxs("g", { children: [
+    y ? /* @__PURE__ */ s.jsx(
+      "line",
+      {
+        x1: i,
+        x2: i,
+        y1: l,
+        y2: t,
+        className: x.cn(
+          "undp-tick-line stroke-primary-gray-500 dark:stroke-primary-gray-550",
+          m?.gridLines
+        ),
+        style: n?.gridLines
+      }
+    ) : null,
+    r ? /* @__PURE__ */ s.jsx(
+      "text",
+      {
+        x: i,
+        y: e === "primary" ? t : l,
+        dy: e === "primary" ? "1em" : "0.75em",
+        dx: e === "primary" ? 0 : i < 0 || p ? -3 : 3,
+        style: {
+          textAnchor: e === "primary" ? "middle" : i < 0 || p ? "end" : "start",
+          ...n?.labels || {}
+        },
+        className: x.cn(
+          e === "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 r[a] == "string" ? r[a] : u(r[a], "NA", g, f, d)
+      }
+    ) : null
+  ] }, a)) });
+}
+export {
+  h as X
+};
+//# sourceMappingURL=XTicksAndGridLines-CUefTINd.js.map

package/dist/XTicksAndGridLines-CUefTINd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"XTicksAndGridLines-CUefTINd.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","i","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,GAAGC,6BACR,KAAA,EACE,UAAA;AAAA,IAAAJ,IACCK,gBAAAA,EAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAIF;AAAA,QACJ,IAAIA;AAAA,QACJ,IAAAV;AAAA,QACA,IAAAC;AAAA,QACA,WAAWY,EAAAA;AAAAA,UACT;AAAA,UACAV,GAAY;AAAA,QAAA;AAAA,QAEd,OAAOD,GAAQ;AAAA,MAAA;AAAA,IAAA,IAEf;AAAA,IACHJ,IACCc,gBAAAA,EAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAGF;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,WAAWW,EAAAA;AAAAA,UACTP,MAAc,YACV,6DACA;AAAA,UACJH,GAAY;AAAA,QAAA;AAAA,QAGb,UAAA,OAAOL,EAAOa,CAAC,KAAM,WAClBb,EAAOa,CAAC,IACRG,EAAyBhB,EAAOa,CAAC,GAAG,MAAMH,GAAWJ,GAAQC,CAAM;AAAA,MAAA;AAAA,IAAA,IAEvE;AAAA,EAAA,KApCEM,CAqCR,CACD,GACH;AAEJ;"}

package/dist/XTicksAndGridLines-DuK35ROS.cjs

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

package/dist/XTicksAndGridLines-DuK35ROS.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"XTicksAndGridLines-DuK35ROS.cjs","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","i","jsx","cn","numberFormattingFunction"],"mappings":"gJAmBO,SAASA,EAAmBC,EAAc,CAC/C,KAAM,CACJ,OAAAC,EACA,EAAAC,EACA,GAAAC,EACA,GAAAC,EACA,OAAAC,EACA,WAAAC,EACA,OAAAC,EACA,OAAAC,EACA,UAAAC,EACA,cAAAC,EACA,UAAAC,EACA,UAAAC,EAAY,EAAA,EACVZ,EACJ,MAAI,CAACC,GAAU,CAACS,EAAsB,2DAGjC,SAAAR,EAAE,IAAI,CAACW,EAAGC,6BACR,IAAA,CACE,SAAA,CAAAJ,EACCK,EAAAA,kBAAAA,IAAC,OAAA,CACC,GAAIF,EACJ,GAAIA,EACJ,GAAAV,EACA,GAAAC,EACA,UAAWY,EAAAA,UAAAA,GACT,sEACAV,GAAY,SAAA,EAEd,MAAOD,GAAQ,SAAA,CAAA,EAEf,KACHJ,EACCc,EAAAA,kBAAAA,IAAC,OAAA,CACC,EAAGF,EACH,EAAGJ,IAAc,UAAYL,EAAKD,EAClC,GAAIM,IAAc,UAAY,MAAQ,SACtC,GAAIA,IAAc,UAAY,EAAII,EAAI,GAAKD,EAAY,GAAK,EAC5D,MAAO,CACL,WACEH,IAAc,UAAY,SAAWI,EAAI,GAAKD,EAAY,MAAQ,QACpE,GAAIP,GAAQ,QAAU,CAAA,CAAC,EAEzB,UAAWW,EAAAA,UAAAA,GACTP,IAAc,UACV,2DACA,2DACJH,GAAY,MAAA,EAGb,SAAA,OAAOL,EAAOa,CAAC,GAAM,SAClBb,EAAOa,CAAC,EACRG,EAAAA,yBAAyBhB,EAAOa,CAAC,EAAG,KAAMH,EAAWJ,EAAQC,CAAM,CAAA,CAAA,EAEvE,IAAA,GApCEM,CAqCR,CACD,EACH,CAEJ"}

package/dist/YAxesLabels-CYVY053X.js

@@ -0,0 +1,53 @@
+import { j as i } from "./index-BHm2KTjD-2e-Fu8L-.js";
+import { c as p } from "./Typography-XJoSE-By.js";
+import { m as d } from "./use-in-view-CZPXmTZM.js";
+function y(a) {
+  const {
+    value: e,
+    y: t,
+    x: r,
+    style: s,
+    className: l,
+    width: o,
+    height: m,
+    alignment: x = "right",
+    animate: n,
+    isInView: c
+  } = a;
+  return /* @__PURE__ */ i.jsx(
+    d.foreignObject,
+    {
+      width: o,
+      height: m,
+      x: r,
+      variants: {
+        initial: {
+          y: t
+        },
+        whileInView: {
+          y: t,
+          transition: { duration: n.duration }
+        }
+      },
+      initial: "initial",
+      animate: c ? "whileInView" : "initial",
+      exit: { opacity: 0, transition: { duration: n.duration } },
+      children: /* @__PURE__ */ i.jsx("div", { className: "flex flex-col justify-center h-inherit", children: /* @__PURE__ */ i.jsx(
+        "p",
+        {
+          className: p.cn(
+            "fill-primary-gray-700 dark:fill-primary-gray-300 text-xs m-0 py-0 px-1.5 leading-none",
+            `text-${x}`,
+            l
+          ),
+          style: s,
+          children: e
+        }
+      ) })
+    }
+  );
+}
+export {
+  y as Y
+};
+//# sourceMappingURL=YAxesLabels-CYVY053X.js.map

package/dist/YAxesLabels-CYVY053X.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"YAxesLabels-CYVY053X.js","sources":["../src/Components/Elements/Axes/YAxesLabels.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?: 'left' | 'right' | 'center';\r\n  animate: AnimateDataType;\r\n  isInView: boolean;\r\n}\r\n\r\nexport function YAxesLabels(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 = 'right',\r\n    animate,\r\n    isInView,\r\n  } = props;\r\n  return (\r\n    <motion.foreignObject\r\n      width={width}\r\n      height={height}\r\n      x={x}\r\n      variants={{\r\n        initial: {\r\n          y,\r\n        },\r\n        whileInView: {\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      <div className='flex flex-col justify-center h-inherit'>\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 leading-none',\r\n            `text-${alignment}`,\r\n            className,\r\n          )}\r\n          style={style}\r\n        >\r\n          {value}\r\n        </p>\r\n      </div>\r\n    </motion.foreignObject>\r\n  );\r\n}\r\n"],"names":["YAxesLabels","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,MACC,OAAAN;AAAA,MACA,QAAAC;AAAA,MACA,GAAAJ;AAAA,MACA,UAAU;AAAA,QACR,SAAS;AAAA,UACP,GAAAD;AAAA,QAAA;AAAA,QAEF,aAAa;AAAA,UACX,GAAAA;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,UAAAE,gBAAAA,EAAAA,IAAC,OAAA,EAAI,WAAU,0CACb,UAAAA,gBAAAA,EAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWE,EAAAA;AAAAA,YACT;AAAA,YACA,QAAQL,CAAS;AAAA,YACjBH;AAAA,UAAA;AAAA,UAEF,OAAAD;AAAA,UAEC,UAAAH;AAAA,QAAA;AAAA,MAAA,EACH,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/YAxesLabels-DhBdLk3Z.cjs

@@ -0,0 +1,2 @@
+"use strict";const i=require("./index-BHm2KTjD-D8FylaKc.cjs"),m=require("./Typography-CDR-DAHH.cjs"),d=require("./use-in-view-Dl1CsAIo.cjs");function h(n){const{value:r,y:e,x:a,style:s,className:l,width:o,height:x,alignment:c="right",animate:t,isInView:u}=n;return i.jsxRuntimeExports.jsx(d.motion.foreignObject,{width:o,height:x,x:a,variants:{initial:{y:e},whileInView:{y:e,transition:{duration:t.duration}}},initial:"initial",animate:u?"whileInView":"initial",exit:{opacity:0,transition:{duration:t.duration}},children:i.jsxRuntimeExports.jsx("div",{className:"flex flex-col justify-center h-inherit",children:i.jsxRuntimeExports.jsx("p",{className:m.cnExports.cn("fill-primary-gray-700 dark:fill-primary-gray-300 text-xs m-0 py-0 px-1.5 leading-none",`text-${c}`,l),style:s,children:r})})})}exports.YAxesLabels=h;
+//# sourceMappingURL=YAxesLabels-DhBdLk3Z.cjs.map

package/dist/YAxesLabels-DhBdLk3Z.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"YAxesLabels-DhBdLk3Z.cjs","sources":["../src/Components/Elements/Axes/YAxesLabels.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?: 'left' | 'right' | 'center';\r\n  animate: AnimateDataType;\r\n  isInView: boolean;\r\n}\r\n\r\nexport function YAxesLabels(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 = 'right',\r\n    animate,\r\n    isInView,\r\n  } = props;\r\n  return (\r\n    <motion.foreignObject\r\n      width={width}\r\n      height={height}\r\n      x={x}\r\n      variants={{\r\n        initial: {\r\n          y,\r\n        },\r\n        whileInView: {\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      <div className='flex flex-col justify-center h-inherit'>\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 leading-none',\r\n            `text-${alignment}`,\r\n            className,\r\n          )}\r\n          style={style}\r\n        >\r\n          {value}\r\n        </p>\r\n      </div>\r\n    </motion.foreignObject>\r\n  );\r\n}\r\n"],"names":["YAxesLabels","props","value","y","x","style","className","width","height","alignment","animate","isInView","jsx","motion","cn"],"mappings":"6IAkBO,SAASA,EAAYC,EAAc,CACxC,KAAM,CACJ,MAAAC,EACA,EAAAC,EACA,EAAAC,EACA,MAAAC,EACA,UAAAC,EACA,MAAAC,EACA,OAAAC,EACA,UAAAC,EAAY,QACZ,QAAAC,EACA,SAAAC,CAAA,EACEV,EACJ,OACEW,EAAAA,kBAAAA,IAACC,EAAAA,OAAO,cAAP,CACC,MAAAN,EACA,OAAAC,EACA,EAAAJ,EACA,SAAU,CACR,QAAS,CACP,EAAAD,CAAA,EAEF,YAAa,CACX,EAAAA,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,SAAAE,EAAAA,kBAAAA,IAAC,MAAA,CAAI,UAAU,yCACb,SAAAA,EAAAA,kBAAAA,IAAC,IAAA,CACC,UAAWE,EAAAA,UAAAA,GACT,wFACA,QAAQL,CAAS,GACjBH,CAAA,EAEF,MAAAD,EAEC,SAAAH,CAAA,CAAA,CACH,CACF,CAAA,CAAA,CAGN"}

package/dist/YTicksAndGridLines-BJRXuBdC.js

@@ -0,0 +1,57 @@
+import { j as r } from "./index-BHm2KTjD-2e-Fu8L-.js";
+import { c as y } from "./Typography-XJoSE-By.js";
+import { numberFormattingFunction as g } from "./numberFormattingFunction.js";
+function h(x) {
+  const {
+    values: s,
+    y: o,
+    x1: l,
+    x2: c,
+    styles: t,
+    classNames: n,
+    prefix: p,
+    suffix: d,
+    labelType: f,
+    showGridLines: m,
+    labelPos: e = "vertical",
+    precision: u
+  } = x;
+  return !s && !m ? null : /* @__PURE__ */ r.jsx(r.Fragment, { children: o.map((i, a) => /* @__PURE__ */ r.jsxs("g", { children: [
+    m ? /* @__PURE__ */ r.jsx(
+      "line",
+      {
+        x1: l,
+        x2: c,
+        y1: i,
+        y2: i,
+        className: y.cn(
+          "undp-tick-line stroke-primary-gray-500 dark:stroke-primary-gray-550",
+          n?.gridLines
+        ),
+        style: t?.gridLines
+      }
+    ) : null,
+    s ? /* @__PURE__ */ r.jsx(
+      "text",
+      {
+        x: l,
+        y: i,
+        dy: e === "side" ? "0.33em" : s[a] < 0 ? "1em" : -5,
+        dx: e === "side" ? -4 : 0,
+        style: {
+          textAnchor: e === "side" ? "end" : "start",
+          ...t?.labels || {}
+        },
+        className: y.cn(
+          f === "primary" ? "fill-primary-gray-700 dark:fill-primary-gray-300 text-xs" : "fill-primary-gray-550 dark:fill-primary-gray-500 text-xs",
+          n?.labels
+        ),
+        children: g(s[a], "NA", u, p, d)
+      }
+    ) : null
+  ] }, a)) });
+}
+export {
+  h as Y
+};
+//# sourceMappingURL=YTicksAndGridLines-BJRXuBdC.js.map