@devgateway/dvz-ui-react 1.9.1 → 1.9.3

package/dist/esm/embeddable/newsletter/index.js

@@ -1,51 +1,48 @@
-import { jsxs as m, jsx as t } from "react/jsx-runtime";
-import "react";
-import { Input as f, Button as v, Message as c } from "semantic-ui-react";
-import { connect as x } from "react-redux";
-import { setEmail as S, newsletterSubscription as C } from "../reducers/embeddable.js";
-const I = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/, P = (e) => {
-  const a = () => {
-    const { email: s, list: i, tag: b } = e;
-    e.onSubmit({ email: s, list: i, tag: b });
-  }, {
-    status: l,
-    editing: o,
-    list: k,
-    placeholder: d = "enter your email address",
-    successmessage: u = "Thanks",
-    failuremessage: g = "Something didn't go well",
-    label: p = "Send",
-    tag: y,
-    email: r,
-    onChange: h
-  } = e;
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import S from "react";
+import { Input as x, Button as C, Message as o } from "semantic-ui-react";
+import { connect as I } from "react-redux";
+import { setEmail as R, newsletterSubscription as E } from "../reducers/embeddable.js";
+const l = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/, P = (t) => {
+  const {
+    status: a,
+    editing: i,
+    "data-list": m,
+    "data-placeholder": c = "enter your email address",
+    "data-success-message": d = "Thanks",
+    "data-failure-message": u = "Something didn't go well",
+    "data-label": p = "Send",
+    "data-tag": g
+  } = t, [s, f] = S.useState(""), h = () => {
+    l.test(s) && t.onSubmit({ email: s, list: m, tag: g });
+  };
   let n = "";
-  (l === "OK" || o) && (n = /* @__PURE__ */ t(c, { success: !0, children: /* @__PURE__ */ t("p", { children: u }) })), (l === "ERROR" || o) && (n = /* @__PURE__ */ t(c, { negative: !0, children: /* @__PURE__ */ t("p", { children: g }) }));
-  const w = I.test(r);
-  return /* @__PURE__ */ m("div", { className: "viz newsLetter", children: [
-    /* @__PURE__ */ m("div", { className: "viz newsLetter form", children: [
-      /* @__PURE__ */ t(
-        f,
+  (a === "OK" || i) && (n = /* @__PURE__ */ e(o, { success: !0, children: /* @__PURE__ */ e("p", { children: d }) })), (a === "ERROR" || i) && (n = /* @__PURE__ */ e(o, { negative: !0, children: /* @__PURE__ */ e("p", { children: u }) }));
+  const w = l.test(s);
+  return /* @__PURE__ */ r("div", { className: "viz newsLetter", children: [
+    /* @__PURE__ */ r("div", { className: "viz newsLetter form", children: [
+      /* @__PURE__ */ e(
+        x,
         {
           icon: "envelope",
           name: "email",
-          value: r,
-          onChange: (s, i) => h(i.value),
+          value: s,
+          onChange: (b, v) => f(v.value),
           iconPosition: "left",
-          placeholder: d
+          placeholder: c
         }
       ),
-      /* @__PURE__ */ t(v, { disabled: !w, primary: !0, onClick: (s) => a(), children: p })
+      /* @__PURE__ */ e(C, { disabled: !w, primary: !0, onClick: (b) => h(), children: p })
     ] }),
     n
   ] });
-}, R = (e, a) => ({
-  status: e.getIn(["embeddable", "newsletter", "status"]),
-  email: e.getIn(["embeddable", "newsletter", "email"])
-}), j = {
-  onSubmit: C,
-  onChange: S
-}, T = x(R, j)(P);
+}, j = (t, a) => ({
+  status: t.getIn(["embeddable", "newsletter", "status"]),
+  email: t.getIn(["embeddable", "newsletter", "email"])
+}), k = {
+  onSubmit: E,
+  onChange: R
+}, T = I(j, k)(P);
 export {
   T as default
 };

package/dist/esm/embeddable/sankeychart/index.js

@@ -1,159 +1,159 @@
-import { jsx as c, jsxs as F } from "react/jsx-runtime";
-import z, { useRef as Pe, useState as Ee } from "react";
-import { Container as R } from "semantic-ui-react";
-import Ie from "../data/DataProvider.js";
-import Oe from "../data/DataConsumer.js";
-import { PostContent as we } from "@devgateway/wp-react-lib";
-import Fe from "../common/colors/ColorProvider.js";
-import K from "../common/Messages.js";
-import { connect as Re } from "react-redux";
-import je from "./Sankey.js";
-import He from "papaparse";
-const Se = (h) => {
+import { jsx as c, jsxs as R } from "react/jsx-runtime";
+import Q, { useRef as Ie, useState as Oe } from "react";
+import { Container as j } from "semantic-ui-react";
+import we from "../data/DataProvider.js";
+import Fe from "../data/DataConsumer.js";
+import { PostContent as Re } from "@devgateway/wp-react-lib";
+import je from "../common/colors/ColorProvider.js";
+import X from "../common/Messages.js";
+import { connect as He } from "react-redux";
+import Se from "./Sankey.js";
+import Te from "papaparse";
+const Ne = (h) => {
   const {
-    parent: B,
+    parent: x,
     editing: u = !1,
     unique: C,
     childContent: o,
-    categories: x,
+    categories: L,
     injectedMeasures: r,
     "data-csv": i = "",
-    "data-no-data-message": d = "No data matches your selection",
-    "data-view-mode": t = "info",
+    "data-no-data-message": s = "No data matches your selection",
+    "data-view-mode": a = "info",
     "data-height": n,
     "data-source": m,
     "data-dimension1": e,
-    "data-dimension2": s,
-    "data-dimension3": a,
-    "data-scheme": v = "nivo",
+    "data-dimension2": d,
+    "data-dimension3": t,
+    "data-scheme": y = "nivo",
     "data-margin-left": f,
-    "data-margin-top": k,
-    "data-margin-right": Q,
-    "data-margin-bottom": X,
-    "data-show-legends": j,
-    "data-legend-position": Y,
+    "data-margin-top": v,
+    "data-margin-right": Y,
+    "data-margin-bottom": Z,
+    "data-show-legends": H,
+    "data-legend-position": _,
     "data-app": p,
-    "data-measures": L = {},
-    "data-format": Z = "{}",
-    "data-tooltip-html": E,
-    "data-layout": _,
-    "data-group": H,
-    "data-filters": ee = [],
-    "data-no-data-message": $e,
-    "data-legend-label": ae,
-    "data-tooltip-enabled": S,
-    "data-use-label-background": T,
-    "data-use-check-box-background": N,
-    "data-legend-label-color": te,
-    "data-tooltip-enable-markdown": D,
-    "data-reverse-legend": U,
+    "data-measures": k = {},
+    "data-format": ee = "{}",
+    "data-tooltip-html": I,
+    "data-layout": te,
+    "data-group": S,
+    "data-filters": ae = [],
+    "data-no-data-message": Ge,
+    "data-legend-label": oe,
+    "data-tooltip-enabled": T,
+    "data-use-label-background": N,
+    "data-use-check-box-background": U,
+    "data-legend-label-color": ne,
+    "data-tooltip-enable-markdown": B,
+    "data-reverse-legend": W,
     "data-sort": $,
-    "data-node-thickness": oe,
-    "data-node-opacity": ne,
-    "data-node-hover-opacity": re,
-    "data-node-inner-padding": ie,
-    "data-node-spacing": de,
-    "data-node-hover-others-opacity": se,
-    "data-node-border-width": le,
-    "data-node-border-radius": ce,
-    "data-link-opacity": ue,
-    "data-link-hover-opacity": me,
-    "data-link-hover-others-opacity": pe,
-    "data-link-contract": ge,
+    "data-node-thickness": re,
+    "data-node-opacity": ie,
+    "data-node-hover-opacity": se,
+    "data-node-inner-padding": de,
+    "data-node-spacing": le,
+    "data-node-hover-others-opacity": ce,
+    "data-node-border-width": ue,
+    "data-node-border-radius": me,
+    "data-link-opacity": pe,
+    "data-link-hover-opacity": ge,
+    "data-link-hover-others-opacity": he,
+    "data-link-contract": fe,
     "data-enable-link-gradient": G,
     "data-enable-labels": V,
-    "data-label-position": he,
-    "data-label-padding": fe,
+    "data-label-position": be,
+    "data-label-padding": ye,
     "data-use-custom-label-color": q,
-    "data-label-text-color": be,
-    "data-label-orientation": ye,
-    "data-manual-colors": ve = "{}"
-  } = h, A = h.intl.locale, ke = Pe(null), I = (l) => u ? l : decodeURIComponent(l), b = (l) => {
+    "data-label-text-color": ve,
+    "data-label-orientation": ke,
+    "data-manual-colors": Ce = "{}"
+  } = h, A = h.intl.locale, Le = Ie(null), O = (l) => u ? l : decodeURIComponent(l), D = (l) => {
     try {
-      return JSON.parse(I(l));
+      return JSON.parse(O(l));
     } catch {
       console.error("error parsing value:" + l);
     }
     return null;
-  }, Ce = () => b(ve)[p], y = b(Z), xe = y ? {
-    style: y.style === "compacted" ? "decimal" : y.style,
-    notation: y.style === "compacted" ? "compact" : "standard",
-    currency: y.currency,
-    minimumFractionDigits: parseInt(y.minimumFractionDigits),
-    maximumFractionDigits: parseInt(y.maximumFractionDigits)
+  }, xe = () => D(Ce)[p], b = D(ee), Be = b ? {
+    style: b.style === "compacted" ? "decimal" : b.style,
+    notation: b.style === "compacted" ? "compact" : "standard",
+    currency: b.currency,
+    minimumFractionDigits: parseInt(b.minimumFractionDigits),
+    maximumFractionDigits: parseInt(b.maximumFractionDigits)
   } : {
     notation: "standard",
     currency: "USD",
     minimumFractionDigits: 2,
     maximumFractionDigits: 2
-  }, [Le, Ge] = Ee(t), Be = u ? t : Le, De = {
-    scheme: v
-  }, M = u ? n - 80 : n - 40, Me = {}, J = {
+  }, [De, Ve] = Oe(a), Me = u ? a : De, Pe = {
+    scheme: y
+  }, M = u ? n - 80 : n - 40, Ee = {}, J = {
     app: p,
-    layout: _,
-    showLegends: j == !0 || j == "true",
-    legendLabel: ae,
+    layout: te,
+    showLegends: H == !0 || H == "true",
+    legendLabel: oe,
     marginLeft: parseInt(f),
-    marginTop: parseInt(k),
-    marginRight: parseInt(Q),
-    marginBottom: parseInt(X),
+    marginTop: parseInt(v),
+    marginRight: parseInt(Y),
+    marginBottom: parseInt(Z),
     height: `${M}px`,
-    legendPosition: Y,
-    legends: Me,
-    tooltip: E ? D === !0 || D === "true" ? I(E) : I(E).replace(/\r\n/g, "<hr/>").replace(/[\r\n]/g, "<hr/>") : "",
-    colors: De,
-    format: xe,
-    categories: x,
-    legendLabelColor: decodeURIComponent(te),
-    tooltipEnabled: S == !0 || S == "true",
-    tooltipEnableMarkdown: D == !0 || D == "true",
-    reverseLegend: U == !0 || U == "true",
+    legendPosition: _,
+    legends: Ee,
+    tooltip: I ? B === !0 || B === "true" ? O(I) : O(I).replace(/\r\n/g, "<hr/>").replace(/[\r\n]/g, "<hr/>") : "",
+    colors: Pe,
+    format: Be,
+    categories: L,
+    legendLabelColor: decodeURIComponent(ne),
+    tooltipEnabled: T == !0 || T == "true",
+    tooltipEnableMarkdown: B == !0 || B == "true",
+    reverseLegend: W == !0 || W == "true",
     sort: $,
-    nodeThickness: oe,
-    nodeOpacity: ne,
-    nodeHoverOpacity: re,
-    nodeInnerPadding: ie,
-    nodeSpacing: de,
-    nodeHoverOthersOpacity: se,
-    nodeBorderWidth: le,
-    nodeBorderRadius: parseInt(ce),
-    linkOpacity: ue,
-    linkHoverOpacity: me,
-    linkContract: ge,
+    nodeThickness: re,
+    nodeOpacity: ie,
+    nodeHoverOpacity: se,
+    nodeInnerPadding: de,
+    nodeSpacing: le,
+    nodeHoverOthersOpacity: ce,
+    nodeBorderWidth: ue,
+    nodeBorderRadius: parseInt(me),
+    linkOpacity: pe,
+    linkHoverOpacity: ge,
+    linkContract: fe,
     enableLinkGradient: G == !0 || G == "true",
-    linkHoverOthersOpacity: pe,
+    linkHoverOthersOpacity: he,
     enableLabels: V == !0 || V == "true",
-    labelPosition: he,
-    labelPadding: fe,
+    labelPosition: be,
+    labelPadding: ye,
     useCustomLabelColor: q == !0 || q == "true",
-    labelTextColor: be,
-    labelOrientation: ye,
-    useLabelBackground: T == !0 || T == "true",
-    useCheckBoxBackground: N == !0 || N == "true"
-  }, W = {}, O = b(ee) || {};
-  O && O.forEach && O.forEach((l) => {
-    l.value != null && l.value.filter((w) => w != null && w.toString().trim() != "").length > 0 && (W[l.param] = l.value);
+    labelTextColor: ve,
+    labelOrientation: ke,
+    useLabelBackground: N == !0 || N == "true",
+    useCheckBoxBackground: U == !0 || U == "true"
+  }, z = D(k), P = z !== null ? z : typeof k == "string" && k && !k.trim().startsWith("{") && !k.trim().startsWith("[") ? [k] : [], K = {}, w = D(ae) || {};
+  w && w.forEach && w.forEach((l) => {
+    l.value != null && l.value.filter((F) => F != null && F.toString().trim() != "").length > 0 && (K[l.param] = l.value);
   });
-  let P = !1;
+  let E = !1;
   const g = [];
-  return e != "none" && g.push(e), s != "none" && g.push(s), a != "none" && g.push(a), p != "csv" ? (!g.length || !L || !b(L) || !b(L)[0]) && (P = !0) : i.length == 0 && (P = !0), /* @__PURE__ */ c("div", { ref: ke, children: /* @__PURE__ */ F(R, { className: "chart container", style: { minHeight: n + "px" }, fluid: !0, children: [
+  return e != "none" && g.push(e), d != "none" && g.push(d), t != "none" && g.push(t), p != "csv" ? (!g.length || !P.length || !P[0]) && (E = !0) : i.length == 0 && (E = !0), /* @__PURE__ */ c("div", { ref: Le, children: /* @__PURE__ */ R(j, { className: "chart container", style: { minHeight: n + "px" }, fluid: !0, children: [
     /* @__PURE__ */ c(
-      Ie,
+      we,
       {
         style: { height: `${M}px` },
-        params: W,
+        params: K,
         app: p,
-        group: H,
+        group: S,
         csv: i,
         editing: u,
         store: [p, C, ...g],
         source: g.join("/"),
-        children: /* @__PURE__ */ F(R, { style: { height: `${M}px` }, className: "body", fluid: !0, children: [
-          P && /* @__PURE__ */ c(K, { editing: u }),
-          !P && /* @__PURE__ */ F(Oe, { children: [
-            /* @__PURE__ */ c(K, { app: p, group: H, noDataMsg: d, children: " " }),
+        children: /* @__PURE__ */ R(j, { style: { height: `${M}px` }, className: "body", fluid: !0, children: [
+          E && /* @__PURE__ */ c(X, { editing: u }),
+          !E && /* @__PURE__ */ R(Fe, { children: [
+            /* @__PURE__ */ c(X, { app: p, group: S, noDataMsg: s, children: " " }),
             /* @__PURE__ */ c(
-              Te,
+              Ue,
               {
                 locale: A,
                 colorBy: "id",
@@ -161,17 +161,17 @@ const Se = (h) => {
                 sort: $,
                 csv: i,
                 app: p,
-                measure: b(L)[0] || null,
+                measure: P[0] || null,
                 children: /* @__PURE__ */ c(
-                  Fe,
+                  je,
                   {
                     app: p,
                     locale: A,
-                    manualColors: Ce(),
+                    manualColors: xe(),
                     colorBy: "id",
-                    scheme: v,
+                    scheme: y,
                     barColor: J.barColor,
-                    children: /* @__PURE__ */ c(je, { ...J, dimensions: g, measure: b(L)[0] || null })
+                    children: /* @__PURE__ */ c(Se, { ...J, dimensions: g, measure: P[0] || null })
                   }
                 )
               }
@@ -181,58 +181,58 @@ const Se = (h) => {
       }
     ),
     /* @__PURE__ */ c("br", {}),
-    o && Be == "info" && /* @__PURE__ */ c(R, { fluid: !0, style: { height: M + "px" }, className: "body", children: /* @__PURE__ */ c(we, { post: { content: { rendered: o } } }) })
+    o && Me == "info" && /* @__PURE__ */ c(j, { fluid: !0, style: { height: M + "px" }, className: "body", children: /* @__PURE__ */ c(Re, { post: { content: { rendered: o } } }) })
   ] }) });
-}, Te = (h) => {
-  const { children: B, csv: u, app: C } = h;
-  let o = { nodes: [], links: [] }, x = {
+}, Ue = (h) => {
+  const { children: x, csv: u, app: C } = h;
+  let o = { nodes: [], links: [] }, L = {
     indexBy: "",
     keys: o.nodes.map((r) => r.id),
     data: o
   };
   if (C != "csv") {
-    const r = (d) => {
-      const { data: t, dimensions: n, measure: m } = d, e = [], s = [], a = {};
-      return a[t.type] = t.value, i(t.children, e, s, null, m, a), { nodes: e, links: s };
-    }, i = (d = [], t, n, m, e, s) => {
-      d.forEach((a) => {
-        const v = {};
-        if (v[a.type] = a.value, t.find((f) => f.id === a.value) || t.push({ id: a.value }), m) {
-          const f = n.find((k) => k.source === m && k.target === a.value);
+    const r = (s) => {
+      const { data: a, dimensions: n, measure: m } = s, e = [], d = [], t = {};
+      return t[a.type] = a.value, i(a.children, e, d, null, m, t), { nodes: e, links: d };
+    }, i = (s = [], a, n, m, e, d) => {
+      s.forEach((t) => {
+        const y = {};
+        if (y[t.type] = t.value, a.find((f) => f.id === t.value) || a.push({ id: t.value }), m) {
+          const f = n.find((v) => v.source === m && v.target === t.value);
           if (f)
-            f.value = f.value + a[e];
+            f.value = f.value + t[e];
           else {
-            const k = { ...a, ...v, ...s };
-            n.push({ source: m, target: a.value, value: a[e], data: k });
+            const v = { ...t, ...y, ...d };
+            n.push({ source: m, target: t.value, value: t[e], data: v });
           }
         }
-        a.children && a.children.length > 0 && i(a.children, t, n, a.value, e, v);
+        t.children && t.children.length > 0 && i(t.children, a, n, t.value, e, y);
       });
     };
-    o = r(h), x = {
+    o = r(h), L = {
       indexBy: "",
-      keys: o.nodes.map((d) => d.id),
+      keys: o.nodes.map((s) => s.id),
       data: o
     };
   } else {
-    const r = He.parse(u, { header: !0, dynamicTyping: !0 }), i = r.meta.fields, d = i.shift(), t = r.data.map((e) => e[d]), n = [...i.map((e) => ({ id: e })), ...t.map((e) => ({ id: e }))], m = [];
+    const r = Te.parse(u, { header: !0, dynamicTyping: !0 }), i = r.meta.fields, s = i.shift(), a = r.data.map((e) => e[s]), n = [...i.map((e) => ({ id: e })), ...a.map((e) => ({ id: e }))], m = [];
     r.data.forEach((e) => {
-      i.forEach((s) => {
-        m.push({ source: s, target: e[d], value: e[s] });
+      i.forEach((d) => {
+        m.push({ source: d, target: e[s], value: e[d] });
       });
-    }), x = {
+    }), L = {
       indexBy: "",
       keys: n.map((e) => e.id),
       data: { nodes: n, links: m }
     };
   }
-  return z.Children.map(B, (r) => z.cloneElement(r, { options: x }));
-}, Ne = (h, B) => {
-  const { "data-app": u, "data-group": C } = B, o = h.getIn(["data", "measures", u, C]);
+  return Q.Children.map(x, (r) => Q.cloneElement(r, { options: L }));
+}, We = (h, x) => {
+  const { "data-app": u, "data-group": C } = x, o = h.getIn(["data", "measures", u, C]);
   return o ? {
     injectedMeasures: o
   } : {};
-}, Ue = {}, _e = Re(Ne, Ue)(Se);
+}, $e = {}, tt = He(We, $e)(Ne);
 export {
-  _e as default
+  tt as default
 };

package/dist/esm/embeddable/showcase/index.js

@@ -1,5 +1,5 @@
 import { jsx as e, jsxs as h, Fragment as q } from "react/jsx-runtime";
-import A, { useState as x, useRef as D, useEffect as V, useImperativeHandle as j, useCallback as I } from "react";
+import A, { useState as b, useRef as D, useEffect as V, useImperativeHandle as j, useCallback as I } from "react";
 import { Container as N, Grid as i, Form as P, TextArea as L, Button as k, Message as O, Input as M, Label as U, Icon as B } from "semantic-ui-react";
 import { COUNTRY_OPTIONS as $ } from "../../countries.js";
 import { reset as G, sendShowCaseForm as H } from "../reducers/embeddable.js";
@@ -13,14 +13,14 @@ const J = $.map((o) => ({
 }));
 A.createRef();
 function Q({ onSelectionChange: o, showValidation: f, inputRef: g, name: a }) {
-  const [r, c] = x([]), [n, s] = x([]), l = I((m) => {
+  const [r, c] = b([]), [n, s] = b([]), l = I((m) => {
     c([...r, ...m]), s([]);
   }, [r]), u = I((m) => {
     s([...m]);
   }, [r]), {
     acceptedFiles: v,
     getRootProps: w,
-    getInputProps: b,
+    getInputProps: x,
     open: E
   } = Y({ accept: "application/pdf,.pdf,.doc,.docx,.xls,.xlsx,.csv,.txt,.rtf,.html,.zip,.mp3,.wma,.mpg,.flv,.avi,.jpg,.jpeg,.png,.gif", maxFiles: 5, multiple: !0, onDrop: l, onDropRejected: u });
   j(g, () => ({
@@ -31,7 +31,7 @@ function Q({ onSelectionChange: o, showValidation: f, inputRef: g, name: a }) {
     hasErrors: () => r.length == 0,
     value: () => r
   }));
-  const y = (m) => {
+  const S = (m) => {
     const d = [...r];
     d.splice(m, 1), c(d);
   }, z = r.length === 0;
@@ -39,7 +39,7 @@ function Q({ onSelectionChange: o, showValidation: f, inputRef: g, name: a }) {
     n && n[0] && n[0].errors && /* @__PURE__ */ e(N, { fluid: !0, className: `upload files ${z ? "error" : ""}`, children: /* @__PURE__ */ e("div", { className: "error-messages", children: /* @__PURE__ */ e("ul", { style: {}, children: n[0].errors.map((m, d) => /* @__PURE__ */ e("li", { children: "File type not allowed. File type must be - application/-pdf,.pdf,.doc,.docx,.xls,.xlsx,.csv,.txt,.rtf,.html,.zip,.mp3,.wma,.mpg,.flv,.avi,.jpg,.jpeg,.png,.gif " }, d)) }) }) }),
     /* @__PURE__ */ h(N, { fluid: !0, className: "upload files", children: [
       /* @__PURE__ */ h("div", { ...w({ className: "dropzone" }), children: [
-        /* @__PURE__ */ e("input", { ...b() }),
+        /* @__PURE__ */ e("input", { ...x() }),
         /* @__PURE__ */ h("p", { children: [
           "Drag 'n' drop files here, or click select button to select files. The maximum file size allowed is ",
           _.maxUploadFileSize,
@@ -48,7 +48,7 @@ function Q({ onSelectionChange: o, showValidation: f, inputRef: g, name: a }) {
         r.length > 0 ? /* @__PURE__ */ e("ul", { children: r.map((m, d) => /* @__PURE__ */ h("li", { children: [
           /* @__PURE__ */ e(U, { color: "green", icon: "file", children: m.name }),
           /* @__PURE__ */ e(B, { color: "red", name: "remove", size: "large", onClick: (C) => {
-            C.stopPropagation(), y(d);
+            C.stopPropagation(), S(d);
           } })
         ] }, d)) }) : null
       ] }),
@@ -57,7 +57,7 @@ function Q({ onSelectionChange: o, showValidation: f, inputRef: g, name: a }) {
   ] });
 }
 const W = ({ options: o, placeholder: f, name: g, required: a, showValidation: r, icon: c, inputRef: n }) => {
-  const [s, l] = x(null), [u, v] = x(!0);
+  const [s, l] = b(null), [u, v] = b(!0);
   return V(() => {
     a && s == null ? v(!0) : v(!1);
   }, [s]), j(n, () => ({
@@ -73,8 +73,8 @@ const W = ({ options: o, placeholder: f, name: g, required: a, showValidation: r
       value: s,
       error: u && r,
       name: g,
-      onChange: (w, b) => {
-        l(b.value);
+      onChange: (w, x) => {
+        l(x.value);
       },
       multiple: !1,
       search: !0,
@@ -83,8 +83,8 @@ const W = ({ options: o, placeholder: f, name: g, required: a, showValidation: r
       placeholder: f
     }
   );
-}, S = ({ placeholder: o, name: f, icon: g, required: a, pattern: r, as: c, inputRef: n, showValidation: s }) => {
-  const [l, u] = x(""), [v, w] = x(!0);
+}, y = ({ placeholder: o, name: f, icon: g, required: a, pattern: r, as: c, inputRef: n, showValidation: s }) => {
+  const [l, u] = b(""), [v, w] = b(!0);
   return V(() => {
     a && l.trim() == "" || r && !r.test(l) ? w(!0) : w(!1);
   }, [l]), j(n, () => ({
@@ -107,7 +107,7 @@ const W = ({ options: o, placeholder: f, name: g, required: a, showValidation: r
     }
   );
 }, X = (o) => {
-  const [f, g] = x({});
+  const [f, g] = b({});
   D();
   const a = D({}), r = (t) => {
     const R = Object.keys(a.current).map((p) => a.current[p]), T = R.map((p) => p.hasErrors()).reduce((p, F) => p || F);
@@ -127,20 +127,20 @@ const W = ({ options: o, placeholder: f, name: g, required: a, showValidation: r
     t && (a.current[t.name] = t);
   }, {
     status: s,
-    organization: l = "Organization",
-    name: u = "Name",
-    email: v = "Email",
-    country: w = "Country",
-    message: b = "Message",
-    resetlabel: E = "Reset",
-    submitlabel: y = "Submit",
-    successmessage: z = "Thanks for submitting your data",
-    failuremessage: m = "Something didn't go well, please try again later",
+    "data-organization": l = "Organization",
+    "data-name": u = "Name",
+    "data-email": v = "Email",
+    "data-country": w = "Country",
+    "data-message": x = "Message",
+    "data-reset-label": E = "Reset",
+    "data-submit-label": S = "Submit",
+    "data-success-message": z = "Thanks for submitting your data",
+    "data-failure-message": m = "Something didn't go well, please try again later",
     editing: d
   } = o, { showValidation: C, token: te, reset: re } = f;
   return /* @__PURE__ */ e(N, { fluid: !0, className: "viz showcase", children: /* @__PURE__ */ h(i, { columns: 1, className: C ? "validated" : "", children: [
     /* @__PURE__ */ e(i.Column, { children: /* @__PURE__ */ e(
-      S,
+      y,
       {
         inputRef: (t) => n(t),
         showValidation: C,
@@ -151,7 +151,7 @@ const W = ({ options: o, placeholder: f, name: g, required: a, showValidation: r
       }
     ) }),
     /* @__PURE__ */ e(i.Column, { children: /* @__PURE__ */ e(
-      S,
+      y,
       {
         inputRef: (t) => n(t),
         showValidation: C,
@@ -162,7 +162,7 @@ const W = ({ options: o, placeholder: f, name: g, required: a, showValidation: r
       }
     ) }),
     /* @__PURE__ */ e(i.Column, { children: /* @__PURE__ */ e(
-      S,
+      y,
       {
         inputRef: (t) => n(t),
         showValidation: C,
@@ -193,10 +193,10 @@ const W = ({ options: o, placeholder: f, name: g, required: a, showValidation: r
       }
     ) }),
     /* @__PURE__ */ e(i.Column, { children: /* @__PURE__ */ e(
-      S,
+      y,
       {
         inputRef: (t) => n(t),
-        placeholder: b,
+        placeholder: x,
         name: "message",
         as: L
       }
@@ -216,7 +216,7 @@ const W = ({ options: o, placeholder: f, name: g, required: a, showValidation: r
           {
             secondary: !0,
             onClick: (t) => r(),
-            children: y
+            children: S
           }
         )
       ] }),