@web-site-utilities/feedback 0.0.17 → 0.0.19-dev.594db9f

package/dist/index.cjs.js

@@ -1271,6 +1271,13 @@ const CssVariables = dt.div`
   --depth: ${(props) => props.$theme["depth"]};
   --spacing: ${(props) => props.$theme["spacing"]};
   --all-fields-size: ${(props) => props.$theme["allFieldsSize"]};
+  
+  //--breakpoint-xs: 576px;
+  //--breakpoint-s: 576px;
+  //--breakpoint-m: 768px;
+  //--breakpoint-l: 992px;
+  //--breakpoint-xl: 1200px;
+  //--breakpoint-xxl: 1400px;
 `;
 const ThemeProvider = (props) => {
   const selectedVariant = props.selectedVariant ?? "primary";
@@ -1304,8 +1311,33 @@ const useDefaultVariantContentColor = (override) => {
   const colorVariantKey = override ? `${override}Content` : `${defaultVariant}Content`;
   return theme2[colorVariantKey];
 };
+const env = "DEV";
+var Environments = /* @__PURE__ */ ((Environments2) => {
+  Environments2["LOCAL"] = "LOCAL";
+  Environments2["DEV"] = "DEV";
+  Environments2["PROD"] = "PROD";
+  return Environments2;
+})(Environments || {});
+const endpoints = {
+  [Environments.LOCAL]: {
+    // host: "http://localhost:3000/mock",
+    host: "http://localhost:4000/external"
+  },
+  [Environments.DEV]: {
+    // utils-service is exposed directly at this host, no path prefix.
+    host: "https://utils.dev.zabedovskii.com/external"
+  },
+  [Environments.PROD]: {
+    // Traefik's strip-api-prefix Middleware routes feedback.oiva.dev/api/*
+    // to utils-service with /api removed, landing on the same /external/* routes.
+    host: "https://feedback.oiva.dev/api/external"
+  }
+};
+const getEnvironmentConf = () => {
+  return endpoints[env];
+};
 const createBaseApi = () => {
-  const apiUrl = "http://localhost:4000/external";
+  const apiUrl = getEnvironmentConf().host;
   const unwrap = async (req) => {
     const unwrapped = await req;
     if (!unwrapped.ok) {
@@ -1361,20 +1393,26 @@ const createBaseApi = () => {
   };
 };
 const baseApi$1 = createBaseApi();
-const getFormConf = (formId, options) => baseApi$1.get(`/feedback/form/${formId}`, options);
-const useRequest = (request) => {
+const getFormConf = (payload, options) => baseApi$1.get(`/feedback/form/${payload.formId}?locale=${payload.locale}`, options);
+const useRequest = (props) => {
   const [data, setData] = React.useState();
   const [loading, setLoading] = React.useState(true);
   const [error, setError] = React.useState(null);
-  React.useEffect(() => {
+  const exec = () => {
     const abortController = new AbortController();
     setLoading(true);
-    request(abortController).then(setData).catch(setError).finally(() => setLoading(false));
+    props.request().then((res) => setData(res.data)).catch(setError).finally(() => setLoading(false));
+    return abortController;
+  };
+  React.useEffect(() => {
+    if (props.preventInitial) return () => {
+    };
+    const ac = exec();
     return () => {
-      abortController.abort();
+      ac.abort();
     };
   }, []);
-  return { data, loading, error };
+  return { data, loading, error, exec };
 };
 const Button = dt.button((props) => {
   const variantColor = useDefaultVariantColor();
@@ -1434,6 +1472,7 @@ const Div$3 = dt.div`
   max-width: 100%;
   @media (max-width: 900px) {
     min-height: auto;
+    display: ${(props) => props.$isVisible ? "block" : "none"};
     height: ${(props) => props.$isVisible ? "auto" : "0"};
     width: ${(props) => props.$isVisible ? "auto" : "0"};
   }
@@ -1447,6 +1486,7 @@ const Step = (props) => {
   }, [ref, props.onSetMaxHeight]);
   return React.createElement(Div$3, {
     ref,
+    key: "step",
     $height: props.height,
     $isVisible: props.isVisible,
     children: props.children
@@ -1655,9 +1695,82 @@ const useForm = (props) => {
     getStateByKey
   };
 };
-const baseApi = createBaseApi();
-const saveForm = (body, options) => baseApi.post(`/feedback-receiver`, body, options);
-/*! @license DOMPurify 3.2.7 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.2.7/LICENSE */
+const byteToHex = [];
+for (let i = 0; i < 256; ++i) {
+  byteToHex.push((i + 256).toString(16).slice(1));
+}
+function unsafeStringify(arr, offset = 0) {
+  return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + "-" + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + "-" + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + "-" + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + "-" + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
+}
+let getRandomValues;
+const rnds8 = new Uint8Array(16);
+function rng() {
+  if (!getRandomValues) {
+    if (typeof crypto === "undefined" || !crypto.getRandomValues) {
+      throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
+    }
+    getRandomValues = crypto.getRandomValues.bind(crypto);
+  }
+  return getRandomValues(rnds8);
+}
+const _state = {};
+function v7(options, buf, offset) {
+  let bytes;
+  {
+    const now = Date.now();
+    const rnds = rng();
+    updateV7State(_state, now, rnds);
+    bytes = v7Bytes(rnds, _state.msecs, _state.seq, buf, offset);
+  }
+  return buf ?? unsafeStringify(bytes);
+}
+function updateV7State(state, now, rnds) {
+  state.msecs ?? (state.msecs = -Infinity);
+  state.seq ?? (state.seq = 0);
+  if (now > state.msecs) {
+    state.seq = rnds[6] << 23 | rnds[7] << 16 | rnds[8] << 8 | rnds[9];
+    state.msecs = now;
+  } else {
+    state.seq = state.seq + 1 | 0;
+    if (state.seq === 0) {
+      state.msecs++;
+    }
+  }
+  return state;
+}
+function v7Bytes(rnds, msecs, seq, buf, offset = 0) {
+  if (rnds.length < 16) {
+    throw new Error("Random bytes length must be >= 16");
+  }
+  if (!buf) {
+    buf = new Uint8Array(16);
+    offset = 0;
+  } else {
+    if (offset < 0 || offset + 16 > buf.length) {
+      throw new RangeError(`UUID byte range ${offset}:${offset + 15} is out of buffer bounds`);
+    }
+  }
+  msecs ?? (msecs = Date.now());
+  seq ?? (seq = rnds[6] * 127 << 24 | rnds[7] << 16 | rnds[8] << 8 | rnds[9]);
+  buf[offset++] = msecs / 1099511627776 & 255;
+  buf[offset++] = msecs / 4294967296 & 255;
+  buf[offset++] = msecs / 16777216 & 255;
+  buf[offset++] = msecs / 65536 & 255;
+  buf[offset++] = msecs / 256 & 255;
+  buf[offset++] = msecs & 255;
+  buf[offset++] = 112 | seq >>> 28 & 15;
+  buf[offset++] = seq >>> 20 & 255;
+  buf[offset++] = 128 | seq >>> 14 & 63;
+  buf[offset++] = seq >>> 6 & 255;
+  buf[offset++] = seq << 2 & 255 | rnds[10] & 3;
+  buf[offset++] = rnds[11];
+  buf[offset++] = rnds[12];
+  buf[offset++] = rnds[13];
+  buf[offset++] = rnds[14];
+  buf[offset++] = rnds[15];
+  return buf;
+}
+/*! @license DOMPurify 3.3.1 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.3.1/LICENSE */
 const {
   entries,
   setPrototypeOf,
@@ -1798,14 +1911,14 @@ function lookupGetter(object, prop) {
   return fallbackValue;
 }
 const html$1 = freeze(["a", "abbr", "acronym", "address", "area", "article", "aside", "audio", "b", "bdi", "bdo", "big", "blink", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "content", "data", "datalist", "dd", "decorator", "del", "details", "dfn", "dialog", "dir", "div", "dl", "dt", "element", "em", "fieldset", "figcaption", "figure", "font", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup", "hr", "html", "i", "img", "input", "ins", "kbd", "label", "legend", "li", "main", "map", "mark", "marquee", "menu", "menuitem", "meter", "nav", "nobr", "ol", "optgroup", "option", "output", "p", "picture", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "search", "section", "select", "shadow", "slot", "small", "source", "spacer", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "tr", "track", "tt", "u", "ul", "var", "video", "wbr"]);
-const svg$1 = freeze(["svg", "a", "altglyph", "altglyphdef", "altglyphitem", "animatecolor", "animatemotion", "animatetransform", "circle", "clippath", "defs", "desc", "ellipse", "enterkeyhint", "exportparts", "filter", "font", "g", "glyph", "glyphref", "hkern", "image", "inputmode", "line", "lineargradient", "marker", "mask", "metadata", "mpath", "part", "path", "pattern", "polygon", "polyline", "radialgradient", "rect", "slot", "stop", "style", "switch", "symbol", "text", "textpath", "title", "tref", "tspan", "view", "vkern"]);
+const svg$1 = freeze(["svg", "a", "altglyph", "altglyphdef", "altglyphitem", "animatecolor", "animatemotion", "animatetransform", "circle", "clippath", "defs", "desc", "ellipse", "enterkeyhint", "exportparts", "filter", "font", "g", "glyph", "glyphref", "hkern", "image", "inputmode", "line", "lineargradient", "marker", "mask", "metadata", "mpath", "part", "path", "pattern", "polygon", "polyline", "radialgradient", "rect", "stop", "style", "switch", "symbol", "text", "textpath", "title", "tref", "tspan", "view", "vkern"]);
 const svgFilters = freeze(["feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence"]);
 const svgDisallowed = freeze(["animate", "color-profile", "cursor", "discard", "font-face", "font-face-format", "font-face-name", "font-face-src", "font-face-uri", "foreignobject", "hatch", "hatchpath", "mesh", "meshgradient", "meshpatch", "meshrow", "missing-glyph", "script", "set", "solidcolor", "unknown", "use"]);
 const mathMl$1 = freeze(["math", "menclose", "merror", "mfenced", "mfrac", "mglyph", "mi", "mlabeledtr", "mmultiscripts", "mn", "mo", "mover", "mpadded", "mphantom", "mroot", "mrow", "ms", "mspace", "msqrt", "mstyle", "msub", "msup", "msubsup", "mtable", "mtd", "mtext", "mtr", "munder", "munderover", "mprescripts"]);
 const mathMlDisallowed = freeze(["maction", "maligngroup", "malignmark", "mlongdiv", "mscarries", "mscarry", "msgroup", "mstack", "msline", "msrow", "semantics", "annotation", "annotation-xml", "mprescripts", "none"]);
 const text = freeze(["#text"]);
 const html = freeze(["accept", "action", "align", "alt", "autocapitalize", "autocomplete", "autopictureinpicture", "autoplay", "background", "bgcolor", "border", "capture", "cellpadding", "cellspacing", "checked", "cite", "class", "clear", "color", "cols", "colspan", "controls", "controlslist", "coords", "crossorigin", "datetime", "decoding", "default", "dir", "disabled", "disablepictureinpicture", "disableremoteplayback", "download", "draggable", "enctype", "enterkeyhint", "exportparts", "face", "for", "headers", "height", "hidden", "high", "href", "hreflang", "id", "inert", "inputmode", "integrity", "ismap", "kind", "label", "lang", "list", "loading", "loop", "low", "max", "maxlength", "media", "method", "min", "minlength", "multiple", "muted", "name", "nonce", "noshade", "novalidate", "nowrap", "open", "optimum", "part", "pattern", "placeholder", "playsinline", "popover", "popovertarget", "popovertargetaction", "poster", "preload", "pubdate", "radiogroup", "readonly", "rel", "required", "rev", "reversed", "role", "rows", "rowspan", "spellcheck", "scope", "selected", "shape", "size", "sizes", "slot", "span", "srclang", "start", "src", "srcset", "step", "style", "summary", "tabindex", "title", "translate", "type", "usemap", "valign", "value", "width", "wrap", "xmlns", "slot"]);
-const svg = freeze(["accent-height", "accumulate", "additive", "alignment-baseline", "amplitude", "ascent", "attributename", "attributetype", "azimuth", "basefrequency", "baseline-shift", "begin", "bias", "by", "class", "clip", "clippathunits", "clip-path", "clip-rule", "color", "color-interpolation", "color-interpolation-filters", "color-profile", "color-rendering", "cx", "cy", "d", "dx", "dy", "diffuseconstant", "direction", "display", "divisor", "dur", "edgemode", "elevation", "end", "exponent", "fill", "fill-opacity", "fill-rule", "filter", "filterunits", "flood-color", "flood-opacity", "font-family", "font-size", "font-size-adjust", "font-stretch", "font-style", "font-variant", "font-weight", "fx", "fy", "g1", "g2", "glyph-name", "glyphref", "gradientunits", "gradienttransform", "height", "href", "id", "image-rendering", "in", "in2", "intercept", "k", "k1", "k2", "k3", "k4", "kerning", "keypoints", "keysplines", "keytimes", "lang", "lengthadjust", "letter-spacing", "kernelmatrix", "kernelunitlength", "lighting-color", "local", "marker-end", "marker-mid", "marker-start", "markerheight", "markerunits", "markerwidth", "maskcontentunits", "maskunits", "max", "mask", "media", "method", "mode", "min", "name", "numoctaves", "offset", "operator", "opacity", "order", "orient", "orientation", "origin", "overflow", "paint-order", "path", "pathlength", "patterncontentunits", "patterntransform", "patternunits", "points", "preservealpha", "preserveaspectratio", "primitiveunits", "r", "rx", "ry", "radius", "refx", "refy", "repeatcount", "repeatdur", "restart", "result", "rotate", "scale", "seed", "shape-rendering", "slope", "specularconstant", "specularexponent", "spreadmethod", "startoffset", "stddeviation", "stitchtiles", "stop-color", "stop-opacity", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke", "stroke-width", "style", "surfacescale", "systemlanguage", "tabindex", "tablevalues", "targetx", "targety", "transform", "transform-origin", "text-anchor", "text-decoration", "text-rendering", "textlength", "type", "u1", "u2", "unicode", "values", "viewbox", "visibility", "version", "vert-adv-y", "vert-origin-x", "vert-origin-y", "width", "word-spacing", "wrap", "writing-mode", "xchannelselector", "ychannelselector", "x", "x1", "x2", "xmlns", "y", "y1", "y2", "z", "zoomandpan"]);
+const svg = freeze(["accent-height", "accumulate", "additive", "alignment-baseline", "amplitude", "ascent", "attributename", "attributetype", "azimuth", "basefrequency", "baseline-shift", "begin", "bias", "by", "class", "clip", "clippathunits", "clip-path", "clip-rule", "color", "color-interpolation", "color-interpolation-filters", "color-profile", "color-rendering", "cx", "cy", "d", "dx", "dy", "diffuseconstant", "direction", "display", "divisor", "dur", "edgemode", "elevation", "end", "exponent", "fill", "fill-opacity", "fill-rule", "filter", "filterunits", "flood-color", "flood-opacity", "font-family", "font-size", "font-size-adjust", "font-stretch", "font-style", "font-variant", "font-weight", "fx", "fy", "g1", "g2", "glyph-name", "glyphref", "gradientunits", "gradienttransform", "height", "href", "id", "image-rendering", "in", "in2", "intercept", "k", "k1", "k2", "k3", "k4", "kerning", "keypoints", "keysplines", "keytimes", "lang", "lengthadjust", "letter-spacing", "kernelmatrix", "kernelunitlength", "lighting-color", "local", "marker-end", "marker-mid", "marker-start", "markerheight", "markerunits", "markerwidth", "maskcontentunits", "maskunits", "max", "mask", "mask-type", "media", "method", "mode", "min", "name", "numoctaves", "offset", "operator", "opacity", "order", "orient", "orientation", "origin", "overflow", "paint-order", "path", "pathlength", "patterncontentunits", "patterntransform", "patternunits", "points", "preservealpha", "preserveaspectratio", "primitiveunits", "r", "rx", "ry", "radius", "refx", "refy", "repeatcount", "repeatdur", "restart", "result", "rotate", "scale", "seed", "shape-rendering", "slope", "specularconstant", "specularexponent", "spreadmethod", "startoffset", "stddeviation", "stitchtiles", "stop-color", "stop-opacity", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke", "stroke-width", "style", "surfacescale", "systemlanguage", "tabindex", "tablevalues", "targetx", "targety", "transform", "transform-origin", "text-anchor", "text-decoration", "text-rendering", "textlength", "type", "u1", "u2", "unicode", "values", "viewbox", "visibility", "version", "vert-adv-y", "vert-origin-x", "vert-origin-y", "width", "word-spacing", "wrap", "writing-mode", "xchannelselector", "ychannelselector", "x", "x1", "x2", "xmlns", "y", "y1", "y2", "z", "zoomandpan"]);
 const mathMl = freeze(["accent", "accentunder", "align", "bevelled", "close", "columnsalign", "columnlines", "columnspan", "denomalign", "depth", "dir", "display", "displaystyle", "encoding", "fence", "frame", "height", "href", "id", "largeop", "length", "linethickness", "lspace", "lquote", "mathbackground", "mathcolor", "mathsize", "mathvariant", "maxsize", "minsize", "movablelimits", "notation", "numalign", "open", "rowalign", "rowlines", "rowspacing", "rowspan", "rspace", "rquote", "scriptlevel", "scriptminsize", "scriptsizemultiplier", "selection", "separator", "separators", "stretchy", "subscriptshift", "supscriptshift", "symmetric", "voffset", "width", "xmlns"]);
 const xml = freeze(["xlink:href", "xml:id", "xlink:title", "xml:space", "xmlns:xlink"]);
 const MUSTACHE_EXPR = seal(/\{\{[\w\W]*|[\w\W]*\}\}/gm);
@@ -1888,7 +2001,7 @@ const _createHooksMap = function _createHooksMap2() {
 function createDOMPurify() {
   let window2 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : getGlobal();
   const DOMPurify = (root) => createDOMPurify(root);
-  DOMPurify.version = "3.2.7";
+  DOMPurify.version = "3.3.1";
   DOMPurify.removed = [];
   if (!window2 || !window2.document || window2.document.nodeType !== NODE_TYPE.document || !window2.Element) {
     DOMPurify.isSupported = false;
@@ -1974,6 +2087,20 @@ function createDOMPurify() {
   }));
   let FORBID_TAGS = null;
   let FORBID_ATTR = null;
+  const EXTRA_ELEMENT_HANDLING = Object.seal(create(null, {
+    tagCheck: {
+      writable: true,
+      configurable: false,
+      enumerable: true,
+      value: null
+    },
+    attributeCheck: {
+      writable: true,
+      configurable: false,
+      enumerable: true,
+      value: null
+    }
+  }));
   let ALLOW_ARIA_ATTR = true;
   let ALLOW_DATA_ATTR = true;
   let ALLOW_UNKNOWN_PROTOCOLS = false;
@@ -2097,16 +2224,24 @@ function createDOMPurify() {
       }
     }
     if (cfg.ADD_TAGS) {
-      if (ALLOWED_TAGS === DEFAULT_ALLOWED_TAGS) {
-        ALLOWED_TAGS = clone(ALLOWED_TAGS);
+      if (typeof cfg.ADD_TAGS === "function") {
+        EXTRA_ELEMENT_HANDLING.tagCheck = cfg.ADD_TAGS;
+      } else {
+        if (ALLOWED_TAGS === DEFAULT_ALLOWED_TAGS) {
+          ALLOWED_TAGS = clone(ALLOWED_TAGS);
+        }
+        addToSet(ALLOWED_TAGS, cfg.ADD_TAGS, transformCaseFunc);
       }
-      addToSet(ALLOWED_TAGS, cfg.ADD_TAGS, transformCaseFunc);
     }
     if (cfg.ADD_ATTR) {
-      if (ALLOWED_ATTR === DEFAULT_ALLOWED_ATTR) {
-        ALLOWED_ATTR = clone(ALLOWED_ATTR);
+      if (typeof cfg.ADD_ATTR === "function") {
+        EXTRA_ELEMENT_HANDLING.attributeCheck = cfg.ADD_ATTR;
+      } else {
+        if (ALLOWED_ATTR === DEFAULT_ALLOWED_ATTR) {
+          ALLOWED_ATTR = clone(ALLOWED_ATTR);
+        }
+        addToSet(ALLOWED_ATTR, cfg.ADD_ATTR, transformCaseFunc);
       }
-      addToSet(ALLOWED_ATTR, cfg.ADD_ATTR, transformCaseFunc);
     }
     if (cfg.ADD_URI_SAFE_ATTR) {
       addToSet(URI_SAFE_ATTRIBUTES, cfg.ADD_URI_SAFE_ATTR, transformCaseFunc);
@@ -2117,6 +2252,12 @@ function createDOMPurify() {
       }
       addToSet(FORBID_CONTENTS, cfg.FORBID_CONTENTS, transformCaseFunc);
     }
+    if (cfg.ADD_FORBID_CONTENTS) {
+      if (FORBID_CONTENTS === DEFAULT_FORBID_CONTENTS) {
+        FORBID_CONTENTS = clone(FORBID_CONTENTS);
+      }
+      addToSet(FORBID_CONTENTS, cfg.ADD_FORBID_CONTENTS, transformCaseFunc);
+    }
     if (KEEP_CONTENT) {
       ALLOWED_TAGS["#text"] = true;
     }
@@ -2312,7 +2453,7 @@ function createDOMPurify() {
       _forceRemove(currentNode);
       return true;
     }
-    if (!ALLOWED_TAGS[tagName] || FORBID_TAGS[tagName]) {
+    if (!(EXTRA_ELEMENT_HANDLING.tagCheck instanceof Function && EXTRA_ELEMENT_HANDLING.tagCheck(tagName)) && (!ALLOWED_TAGS[tagName] || FORBID_TAGS[tagName])) {
       if (!FORBID_TAGS[tagName] && _isBasicCustomElement(tagName)) {
         if (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, tagName)) {
           return false;
@@ -2365,6 +2506,7 @@ function createDOMPurify() {
     }
     if (ALLOW_DATA_ATTR && !FORBID_ATTR[lcName] && regExpTest(DATA_ATTR2, lcName)) ;
     else if (ALLOW_ARIA_ATTR && regExpTest(ARIA_ATTR2, lcName)) ;
+    else if (EXTRA_ELEMENT_HANDLING.attributeCheck instanceof Function && EXTRA_ELEMENT_HANDLING.attributeCheck(lcName, lcTag)) ;
     else if (!ALLOWED_ATTR[lcName] || FORBID_ATTR[lcName]) {
       if (
         // First condition does a very basic check if a) it's basically a valid custom element tagname AND
@@ -2639,6 +2781,13 @@ function createDOMPurify() {
 var purify = createDOMPurify();
 const isNil = (value) => value === void 0 || value === null;
 const isNotNil = (value) => !isNil(value);
+const baseApi = createBaseApi();
+const saveForm = (body, options) => baseApi.post(`/feedback`, body, options);
+const SESSION_ID_SESSION_STORAGE_KEY = "@web-site-utilities/feedback/SESSION_ID_SESSION_STORAGE_KEY";
+const sessionIdPersistence = {
+  get: () => sessionStorage.getItem(SESSION_ID_SESSION_STORAGE_KEY),
+  set: (value) => sessionStorage.setItem(SESSION_ID_SESSION_STORAGE_KEY, value)
+};
 const validate = (value, validations) => {
   if (!validations) return null;
   if (validations.required) {
@@ -2675,20 +2824,24 @@ const useStepper = (props) => {
   const [errors, setErrors] = React.useState([]);
   const saveData = React.useCallback(async () => {
     try {
+      const sessionId = sessionIdPersistence.get() || `${props.options.sessionId || "NOT_DEFINED"}-${v7()}`;
+      sessionIdPersistence.set(sessionId);
       await saveForm({
-        feedbackFormId: props.formId,
-        link: window.location.pathname,
+        formId: props.formId,
+        sessionId,
+        versionId: props.versionId,
+        path: window.location.pathname,
+        locale: "en",
         rawHtml: purify.sanitize(document.getElementsByTagName("html")[0] ?? ""),
         domainId: props.domainId,
         data: props.state,
         formType: props.formType,
         viewport: {
-          first: document.body.clientWidth,
-          second: document.body.clientHeight
+          width: document.body.clientWidth,
+          height: document.body.clientHeight
         },
-        browser: {
+        browserInfo: {
           productSub: navigator.productSub,
-          vendor: navigator.vendor,
           pdfViewerEnabled: navigator.pdfViewerEnabled,
           maxTouchPoints: navigator.maxTouchPoints,
           hardwareConcurrency: navigator.hardwareConcurrency,
@@ -2697,7 +2850,6 @@ const useStepper = (props) => {
           platform: navigator.platform,
           userAgent: navigator.userAgent,
           language: navigator.language,
-          onLine: navigator.onLine,
           webdriver: navigator.webdriver,
           // @ts-ignore
           deviceMemory: navigator.deviceMemory
@@ -2736,7 +2888,7 @@ const useStepper = (props) => {
   return {
     step,
     errors,
-    isLastStep: step === props.stepsCount,
+    isLastStep: step + 1 === props.stepsCount,
     onContinue,
     onBack
   };
@@ -2905,9 +3057,6 @@ const MatrixEl = dt(Button)(() => {
     "&:last-of-type": {
       borderTopLeftRadius: "0",
       borderBottomLeftRadius: "0"
-    },
-    "@media (max-width: 900px)": {
-      // display: 'none',
     }
   };
 });
@@ -2919,14 +3068,14 @@ const QuestionMatrixItem = (props) => {
   });
 };
 const TextIndicator = dt("span")(({
-  min,
-  variant
+  $min,
+  $variant
 }) => {
-  const color = variant || useDefaultVariantColor();
+  const color = $variant || useDefaultVariantColor();
   return {
     position: "absolute",
-    left: min ? "0" : void 0,
-    right: min ? void 0 : "0",
+    left: $min ? "0" : void 0,
+    right: $min ? void 0 : "0",
     bottom: "-2px",
     opacity: "0.5",
     fontWeight: "300",
@@ -2940,25 +3089,29 @@ const QuestionMatrixContainer = dt.div((props) => {
     verticalAlign: "middle",
     display: "inline-flex",
     position: "relative",
-    marginBottom: props.withText ? "calc(var(--spacing) * 6)" : "0"
+    marginBottom: props.$withText ? "calc(var(--spacing) * 6)" : "0"
   };
 });
 const QuestionMatrix = (props) => {
   return React.createElement("div", {
     children: [
       React.createElement(Typography, {
+        key: "question-matrix-typography",
         children: props.label,
         variant: "section"
       }),
       React.createElement(QuestionMatrixContainer, {
-        withText: props.maxText || props.minText,
+        $withText: props.maxText || props.minText,
+        key: "question-matrix-container",
         children: [
           props.maxText ? React.createElement(TextIndicator, {
-            min: false,
+            $min: false,
+            key: `max-text-indicator-${props.maxText}`,
             children: props.maxText
           }) : null,
           props.minText ? React.createElement(TextIndicator, {
-            min: true,
+            $min: true,
+            key: `min-text-indicator-${props.minText}`,
             children: props.minText
           }) : null,
           Array(props.max).fill(1).map((_2, i) => {
@@ -2972,6 +3125,7 @@ const QuestionMatrix = (props) => {
         ]
       }),
       React.createElement(ErrorMessage, {
+        key: "question-matrix-errors",
         errors: props.errors
       })
     ]
@@ -3346,15 +3500,17 @@ const Textarea = (props) => {
     children: [
       React.createElement(Typography, {
         variant: "section",
+        key: "textarea-copy",
         children: props.label
       }),
       React.createElement(TextareaStyled, {
         value: props.value ?? "",
-        useThemeColors: props.colorVariant,
+        key: "textarea",
         rows: props.rows ?? 3,
         onChange
       }),
       React.createElement(ErrorMessage, {
+        key: "errors",
         errors: props.errors
       })
     ]
@@ -3548,10 +3704,10 @@ const Div = dt.div({
   fontSize: "var(--font-size)"
 });
 const Footer$1 = dt.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-top: calc(var(--spacing) * 10);
+    display: flex;
+    align-items: center;
+    justify-content: ${(props) => props.$isFirstStep ? `flex-end` : "space-between"};
+    margin-top: calc(var(--spacing) * 10);
 `;
 const InPlaceForm = (props) => {
   const formClientRandomId = React.useMemo(
@@ -3576,6 +3732,8 @@ const InPlaceForm = (props) => {
   const stepper = useStepper({
     domainId: props.domainId,
     formType: "inlineForm",
+    options: props.options,
+    versionId: props.versionId,
     stepsCount: populatedForm.steps.length,
     validationsPerStep: populatedForm.validationsPerStep,
     formId: props.formId,
@@ -3596,32 +3754,41 @@ const InPlaceForm = (props) => {
             onSetMaxHeight,
             isVisible: index === stepper.step,
             children: step.fields.map(
-              (field) => React.createElement(Field, {
-                type: field.type,
-                fieldProps: field,
-                dataField: field.dataField,
-                formClientId: formClientRandomId,
-                onContinue: stepper.onContinue,
-                errors: stepper.errors.filter((e) => e.field === field.dataField),
-                getStateByKey: populatedForm.getStateByKey,
-                setStateByKey: populatedForm.setStateByKey
-              })
+              (field, fieldIndex) => {
+                var _a2;
+                return React.createElement(Field, {
+                  key: `${(_a2 = step.meta) == null ? void 0 : _a2.name}-${field.type}-${fieldIndex}`,
+                  type: field.type,
+                  fieldProps: field,
+                  dataField: field.dataField,
+                  formClientId: formClientRandomId,
+                  onContinue: stepper.onContinue,
+                  errors: stepper.errors.filter((e) => e.field === field.dataField),
+                  getStateByKey: populatedForm.getStateByKey,
+                  setStateByKey: populatedForm.setStateByKey
+                });
+              }
             )
           });
         }
       ),
       React.createElement(Footer$1, {
+        key: "footer-key",
+        $isFirstStep: stepper.step === 0,
         children: [
-          React.createElement(Button, {
+          stepper.step === 0 ? null : React.createElement(Button, {
+            key: "btn-key",
             children: props.inlineForm.config.previousButtonText,
             disabled: stepper.step === 0,
             onClick: stepper.onBack
           }),
-          React.createElement(StepsProgress, {
+          stepper.step === 0 ? null : React.createElement(StepsProgress, {
+            key: "stepProgress-key",
             steps: populatedForm.steps,
             currentStepIndex: stepper.step
           }),
           React.createElement(Button, {
+            key: "btn-last-key",
             children: stepper.isLastStep ? props.inlineForm.config.submitButtonText : props.inlineForm.config.nextButtonText,
             onClick: stepper.onContinue
           })
@@ -3778,6 +3945,7 @@ const PopupForm = (props) => {
   const stepper = useStepper({
     domainId: props.domainId,
     formType: "inlineForm",
+    options: props.options,
     stepsCount: populatedForm.steps.length,
     validationsPerStep: populatedForm.validationsPerStep,
     formId: props.formId,
@@ -3860,32 +4028,40 @@ const PopupForm = (props) => {
   });
 };
 const App = (props) => {
-  const [isClient, setIsClient] = React.useState(false);
-  let { data, loading, error } = useRequest(
-    () => getFormConf(props.formId)
-  );
-  React.useEffect(() => setIsClient(true), []);
+  const { formId, locale } = props.options;
+  let { data, loading, error, exec } = useRequest({
+    request: () => getFormConf({
+      formId,
+      locale: locale ?? "en"
+    }),
+    preventInitial: true
+  });
+  React.useEffect(() => {
+    exec();
+  }, []);
   const inPlaceForm = React.useMemo(() => {
     if (!(data == null ? void 0 : data.inlineForm)) return null;
     return React.createElement(InPlaceForm, {
-      key: `inline-form-${props.formId}`,
-      formId: props.formId,
+      key: `inline-form-${formId}`,
+      formId,
+      options: props.options,
+      versionId: data.versionId,
       domainId: data.domainId,
       formTheme: data.attributes.theme,
       inlineForm: data.inlineForm
     });
-  }, [data == null ? void 0 : data.attributes.theme, data == null ? void 0 : data.domainId, data == null ? void 0 : data.inlineForm, props.formId]);
+  }, [data == null ? void 0 : data.attributes.theme, data == null ? void 0 : data.domainId, data == null ? void 0 : data.inlineForm, formId]);
   const popupForm = React.useMemo(() => {
     if (!(data == null ? void 0 : data.popupForm)) return null;
     return React.createElement(PopupForm, {
-      key: `popup-form-${props.formId}`,
-      formId: props.formId,
+      key: `popup-form-${formId}`,
+      formId,
+      options: props.options,
       domainId: data.domainId,
       formTheme: data.attributes.theme,
       popupForm: data.popupForm
     });
-  }, [data == null ? void 0 : data.attributes.theme, data == null ? void 0 : data.domainId, data == null ? void 0 : data.inlineForm, props.formId]);
-  if (!isClient) return null;
+  }, [data == null ? void 0 : data.attributes.theme, data == null ? void 0 : data.domainId, data == null ? void 0 : data.inlineForm, formId]);
   if (!data && loading) return "Loading...";
   if (!data || error) return error ? error.message : "Unknown error";
   return React.createElement(ThemeProvider, {
@@ -3907,7 +4083,7 @@ const initiateFeedbackModule = (options) => {
   if (typeof window !== "undefined") {
     root.render(
       React.createElement(App, {
-        formId: options.formId
+        options
       })
     );
   }
@@ -3923,24 +4099,30 @@ const renderFeedbackModule = (options) => {
   }
   if (typeof window === "undefined") return null;
   return React.createElement(App, {
-    formId: options.formId
+    key: options.formId,
+    options
   });
 };
 const FeedbackModule = (options) => {
+  const [isClient, setIsClient] = React.useState(false);
+  React.useEffect(() => {
+    setIsClient(true);
+  }, []);
+  if (!isClient) return null;
   return renderFeedbackModule(options);
 };
 const PreviewInPlaceForm = (props) => {
   return React.createElement(ThemeProvider, {
     theme: props.formTheme,
     selectedVariant: props.variant,
-    children: [React.createElement(InPlaceForm, props)]
+    children: React.createElement(InPlaceForm, props)
   });
 };
 const PreviewPopupForm = (props) => {
   return React.createElement(ThemeProvider, {
     theme: props.formTheme,
     selectedVariant: props.variant,
-    children: [React.createElement(PopupForm, props)]
+    children: React.createElement(PopupForm, props)
   });
 };
 const SurveyFormComponents = {