@wix/web5-core 1.56.0

package/dist/cjs/components/ui/FeedbackBar.css

@@ -0,0 +1,267 @@
+/* "Was this helpful?" bar + popover. Mounted by the host app inside the
+   sections container; clients can override the whole component via the
+   FeedbackBarComponent UI slot. */
+
+.web5-feedback-bar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 12px;
+  width: fit-content;
+  /* Negative top margin pulls the bar up into the previous section's bottom
+     padding so it visually sits inside that section's color band (matches
+     Figma — bar at the bottom of the NextSteps purple gradient) without
+     changing its DOM position. Tune via --web5-feedback-margin-top. */
+  margin: var(--web5-feedback-margin-top, -4rem) 0
+    var(--web5-feedback-margin-bottom, 1.5rem) 0;
+  font-size: var(--web5-feedback-bar-font-size, 13px);
+  font-weight: 400;
+  line-height: normal;
+  /* Bar-scoped label color falls back to the shared muted color so popover
+     elements (title-hint, close button) stay readable on white when Circana
+     re-skins the bar text to light. */
+  color: var(
+    --web5-feedback-bar-color,
+    var(--web5-feedback-label-color, #6b7280)
+  );
+}
+
+.web5-feedback-label {
+  margin: 0;
+}
+
+.web5-feedback-thumb {
+  position: relative;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: 0;
+  background: transparent;
+  color: var(--web5-feedback-thumb-color, #2b2b2b);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition:
+    background 0.12s,
+    color 0.12s;
+}
+
+/* Hover tooltip — pill above the thumb. Scoped to bar thumbs only; the
+   popover header thumbs are sentiment switchers and don't need tooltips. */
+.web5-feedback-bar .web5-feedback-thumb[data-tooltip]::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 8px 16px;
+  background: var(--web5-feedback-tooltip-bg, #1f1f1f);
+  color: var(--web5-feedback-tooltip-color, #fff);
+  border-radius: 999px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.12s;
+  z-index: 50;
+}
+
+.web5-feedback-bar .web5-feedback-thumb[data-tooltip]:hover::after,
+.web5-feedback-bar .web5-feedback-thumb[data-tooltip]:focus-visible::after {
+  opacity: 1;
+}
+
+.web5-feedback-thumb:hover {
+  background: var(--web5-feedback-thumb-hover-bg, rgba(0, 0, 0, 0.06));
+}
+
+.web5-feedback-thumb--active {
+  background: var(--web5-feedback-accent, #1a1422);
+  color: #fff;
+}
+
+.web5-feedback-thumb--active:hover {
+  background: var(--web5-feedback-accent-hover, #2a2236);
+}
+
+/* Bar-only overrides — the bar may sit on a colored band (e.g. NextSteps'
+   purple gradient) and need light icons/hover, while the popover thumbs
+   always sit on white and stay dark. Selector path stops at the bar's own
+   thumbs-row to avoid leaking into the popover header thumbs. */
+.web5-feedback-bar > .web5-feedback-thumbs-row > .web5-feedback-thumb {
+  color: var(
+    --web5-feedback-bar-thumb-color,
+    var(--web5-feedback-thumb-color, #2b2b2b)
+  );
+}
+
+.web5-feedback-bar > .web5-feedback-thumbs-row > .web5-feedback-thumb:hover {
+  background: var(
+    --web5-feedback-bar-thumb-hover-bg,
+    var(--web5-feedback-thumb-hover-bg, rgba(0, 0, 0, 0.06))
+  );
+}
+
+/* Dim the rest of the page while the popover is open. */
+.web5-feedback-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 65;
+  animation: web5-feedback-backdrop-in 0.18s ease both;
+}
+
+@keyframes web5-feedback-backdrop-in {
+  from {
+    opacity: 0;
+  }
+}
+
+/* Centered on the viewport rather than anchored to the bar — so the form
+   reads as a focused modal regardless of where the bar sits on the page. */
+.web5-feedback-popover {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: min(574px, 92vw);
+  z-index: 70;
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  border-radius: 14px;
+  padding: 30px;
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+  box-shadow: 0 24px 48px -12px rgba(20, 14, 32, 0.25),
+    0 8px 16px -8px rgba(20, 14, 32, 0.12);
+  animation: web5-feedback-pop-in 0.18s ease both;
+}
+
+@keyframes web5-feedback-pop-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, calc(-50% + 8px));
+  }
+}
+
+.web5-feedback-head {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.web5-feedback-thumbs-row {
+  display: flex;
+  gap: 0;
+}
+
+.web5-feedback-title {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--web5-feedback-title-color, #2b2b2b);
+}
+
+.web5-feedback-title-hint {
+  font-weight: 400;
+  color: var(--web5-feedback-label-color, #6b7280);
+}
+
+.web5-feedback-close {
+  position: absolute;
+  top: 24px;
+  right: 24px;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: 0;
+  background: transparent;
+  color: var(--web5-feedback-label-color, #6b7280);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.web5-feedback-close:hover {
+  background: rgba(0, 0, 0, 0.06);
+  color: var(--web5-feedback-title-color, #2b2b2b);
+}
+
+.web5-feedback-chips {
+  display: flex;
+  gap: 13px;
+  flex-wrap: wrap;
+}
+
+.web5-feedback-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 8px 15px;
+  height: 30px;
+  border-radius: 999px;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  background: #fff;
+  color: var(--web5-feedback-chip-color, #2b2b2b);
+  font-size: 13px;
+  cursor: pointer;
+  transition:
+    background 0.12s,
+    border-color 0.12s,
+    color 0.12s;
+}
+
+/* Hover: neutral fill, default border — no accent tint. */
+.web5-feedback-chip:hover {
+  background: var(--web5-feedback-chip-hover-bg, rgba(0, 0, 0, 0.04));
+}
+
+/* Selected: accent-colored border, subtle fill, default text color
+   (matches Figma — the chip label stays dark, only the outline changes). */
+.web5-feedback-chip.web5-feedback-chip--selected,
+.web5-feedback-chip.web5-feedback-chip--selected:hover {
+  background: var(--web5-feedback-chip-selected-bg, rgba(0, 0, 0, 0.04));
+  border-color: var(--web5-feedback-accent, #1a1422);
+}
+
+.web5-feedback-textarea {
+  width: 100%;
+  min-height: 100px;
+  padding: 15px;
+  border-radius: 10px;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  background: #fff;
+  font: 14px/1.4 inherit;
+  color: var(--web5-feedback-title-color, #2b2b2b);
+  resize: vertical;
+}
+
+.web5-feedback-textarea::placeholder {
+  color: var(--web5-feedback-placeholder-color, #7a838a);
+}
+
+.web5-feedback-submit {
+  width: 100%;
+  height: 38px;
+  border-radius: 999px;
+  border: 0;
+  background: var(--web5-feedback-accent, #1a1422);
+  color: #fff;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.12s;
+}
+
+.web5-feedback-submit:hover {
+  background: var(--web5-feedback-accent-hover, #2a2236);
+}
+
+.web5-feedback-submit:disabled {
+  background: var(--web5-feedback-accent-disabled, rgba(26, 20, 34, 0.45));
+  cursor: not-allowed;
+}

package/dist/cjs/components/ui/FeedbackBar.js

@@ -0,0 +1,417 @@
+"use strict";
+
+exports.__esModule = true;
+exports.FeedbackBar = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _utils = require("../../lib/utils");
+var _jsxFileName = "/home/builduser/work/c2b6ca0b3fa984ee/packages/web5-core/dist/cjs/components/ui/FeedbackBar.tsx";
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const DEFAULT_POSITIVE_CATEGORIES = [{
+  value: 'SAVED_TIME',
+  label: 'Saved time'
+}, {
+  value: 'COMPREHENSIVE',
+  label: 'Accurate'
+}, {
+  value: 'CLEAR',
+  label: 'Easy to understand'
+}, {
+  value: 'HELPFUL',
+  label: 'Helpful'
+}, {
+  value: 'OTHER',
+  label: 'Other'
+}];
+const DEFAULT_NEGATIVE_CATEGORIES = [{
+  value: 'INCORRECT',
+  label: 'Not accurate'
+}, {
+  value: 'INAPPROPRIATE',
+  label: 'Not relevant'
+}, {
+  value: 'UNHELPFUL',
+  label: 'Unhelpful'
+}, {
+  value: 'OTHER',
+  label: 'Other'
+}];
+const ThumbUpIcon = () => /*#__PURE__*/_react.default.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "14",
+  height: "13",
+  viewBox: "0 0 14 13",
+  fill: "currentColor",
+  "aria-hidden": "true",
+  __self: void 0,
+  __source: {
+    fileName: _jsxFileName,
+    lineNumber: 54,
+    columnNumber: 3
+  }
+}, /*#__PURE__*/_react.default.createElement("path", {
+  d: "M13.625 4.0075C13.4842 3.84795 13.3111 3.72019 13.1171 3.63269C12.9231 3.54519 12.7128 3.49996 12.5 3.5H9V2.5C9 1.83696 8.73661 1.20107 8.26777 0.732233C7.79893 0.263392 7.16304 1.28189e-07 6.5 1.28189e-07C6.40711 -6.63752e-05 6.31604 0.0257445 6.237 0.0745385C6.15795 0.123333 6.09407 0.19318 6.0525 0.27625L3.69125 5H1C0.734784 5 0.48043 5.10536 0.292893 5.29289C0.105357 5.48043 0 5.73478 0 6V11.5C0 11.7652 0.105357 12.0196 0.292893 12.2071C0.48043 12.3946 0.734784 12.5 1 12.5H11.75C12.1154 12.5001 12.4684 12.3668 12.7425 12.1252C13.0166 11.8835 13.1931 11.5501 13.2388 11.1875L13.9888 5.1875C14.0153 4.97626 13.9966 4.76179 13.9339 4.55833C13.8712 4.35488 13.7659 4.16711 13.625 4.0075ZM1 6H3.5V11.5H1V6ZM12.9963 5.0625L12.2463 11.0625C12.231 11.1834 12.1722 11.2945 12.0808 11.3751C11.9895 11.4556 11.8718 11.5 11.75 11.5H4.5V5.61812L6.79437 1.02875C7.13443 1.09681 7.4404 1.2806 7.66021 1.54884C7.88002 1.81708 8.0001 2.1532 8 2.5V4C8 4.13261 8.05268 4.25979 8.14645 4.35355C8.24021 4.44732 8.36739 4.5 8.5 4.5H12.5C12.571 4.49998 12.6411 4.51505 12.7058 4.54423C12.7704 4.5734 12.8282 4.61601 12.8751 4.66922C12.9221 4.72242 12.9571 4.78501 12.978 4.85282C12.9989 4.92063 13.0051 4.9921 12.9963 5.0625Z",
+  __self: void 0,
+  __source: {
+    fileName: _jsxFileName,
+    lineNumber: 62,
+    columnNumber: 5
+  }
+}));
+const ThumbDownIcon = () => /*#__PURE__*/_react.default.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "14",
+  height: "13",
+  viewBox: "0 0 14 13",
+  fill: "currentColor",
+  "aria-hidden": "true",
+  __self: void 0,
+  __source: {
+    fileName: _jsxFileName,
+    lineNumber: 67,
+    columnNumber: 3
+  }
+}, /*#__PURE__*/_react.default.createElement("path", {
+  d: "M13.625 8.4925C13.4842 8.65205 13.3111 8.77981 13.1171 8.86731C12.9231 8.95481 12.7128 9.00004 12.5 9H9V10C9 10.663 8.73661 11.2989 8.26777 11.7678C7.79893 12.2366 7.16304 12.5 6.5 12.5C6.40711 12.5001 6.31604 12.4743 6.237 12.4255C6.15795 12.3767 6.09407 12.3068 6.0525 12.2237L3.69125 7.5H1C0.734784 7.5 0.48043 7.39464 0.292893 7.20711C0.105357 7.01957 0 6.76522 0 6.5V1C0 0.734783 0.105357 0.48043 0.292893 0.292893C0.48043 0.105357 0.734784 0 1 0H11.75C12.1154 -0.000125885 12.4684 0.133161 12.7425 0.374829C13.0166 0.616498 13.1931 0.949926 13.2388 1.3125L13.9888 7.3125C14.0153 7.52374 13.9966 7.73821 13.9339 7.94167C13.8712 8.14512 13.7659 8.33289 13.625 8.4925ZM1 6.5H3.5V1H1V6.5ZM12.9963 7.4375L12.2463 1.4375C12.231 1.31664 12.1722 1.2055 12.0808 1.12494C11.9895 1.04439 11.8718 0.999958 11.75 1H4.5V6.88188L6.79437 11.4712C7.13443 11.4032 7.4404 11.2194 7.66021 10.9512C7.88002 10.6829 8.0001 10.3468 8 10V8.5C8 8.36739 8.05268 8.24021 8.14645 8.14645C8.24021 8.05268 8.36739 8 8.5 8H12.5C12.571 8.00002 12.6411 7.98495 12.7058 7.95577C12.7704 7.9266 12.8282 7.88399 12.8751 7.83078C12.9221 7.77758 12.9571 7.71499 12.978 7.64718C12.9989 7.57937 13.0051 7.5079 12.9963 7.4375Z",
+  __self: void 0,
+  __source: {
+    fileName: _jsxFileName,
+    lineNumber: 75,
+    columnNumber: 5
+  }
+}));
+const CloseIcon = () => /*#__PURE__*/_react.default.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "16",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: "2",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  "aria-hidden": "true",
+  __self: void 0,
+  __source: {
+    fileName: _jsxFileName,
+    lineNumber: 80,
+    columnNumber: 3
+  }
+}, /*#__PURE__*/_react.default.createElement("path", {
+  d: "M18 6 6 18",
+  __self: void 0,
+  __source: {
+    fileName: _jsxFileName,
+    lineNumber: 92,
+    columnNumber: 5
+  }
+}), /*#__PURE__*/_react.default.createElement("path", {
+  d: "m6 6 12 12",
+  __self: void 0,
+  __source: {
+    fileName: _jsxFileName,
+    lineNumber: 93,
+    columnNumber: 5
+  }
+}));
+const FeedbackPopover = ({
+  initialSentiment,
+  positiveCategories,
+  negativeCategories,
+  positiveTitle,
+  negativeTitle,
+  onSubmit,
+  onClose,
+  onSentimentChange
+}) => {
+  const [sentiment, setSentiment] = (0, _react.useState)(initialSentiment);
+  const [category, setCategory] = (0, _react.useState)(null);
+  const [comment, setComment] = (0, _react.useState)('');
+  const [submitting, setSubmitting] = (0, _react.useState)(false);
+  const [submitted, setSubmitted] = (0, _react.useState)(false);
+
+  // Reset chip selection when sentiment flips — chip lists differ per sentiment.
+  (0, _react.useEffect)(() => {
+    setCategory(null);
+  }, [sentiment]);
+  const options = (0, _react.useMemo)(() => sentiment === 'POSITIVE' ? positiveCategories : negativeCategories, [sentiment, positiveCategories, negativeCategories]);
+  const flipSentiment = next => {
+    setSentiment(next);
+    onSentimentChange(next);
+  };
+  const submit = async () => {
+    if (submitting || submitted) return;
+    setSubmitting(true);
+    // Auto-select "OTHER" if the user typed without picking a chip.
+    const finalCategory = category ?? 'OTHER';
+    try {
+      await onSubmit({
+        sentiment,
+        categories: [finalCategory],
+        comment: comment.trim() || undefined
+      });
+      setSubmitted(true);
+      setTimeout(onClose, 600);
+    } catch (e) {
+      console.error('[web5-feedback] submit failed', e);
+      setSubmitting(false);
+    }
+  };
+  const title = sentiment === 'POSITIVE' ? positiveTitle : negativeTitle;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "web5-feedback-backdrop",
+    onClick: onClose,
+    "aria-hidden": "true",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 162,
+      columnNumber: 7
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "web5-feedback-popover",
+    role: "dialog",
+    "aria-label": title,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 167,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "web5-feedback-close",
+    onClick: onClose,
+    "aria-label": "Close feedback",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 168,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/_react.default.createElement(CloseIcon, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 174,
+      columnNumber: 11
+    }
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "web5-feedback-head",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 176,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "web5-feedback-thumbs-row",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 177,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: (0, _utils.cn)('web5-feedback-thumb', sentiment === 'POSITIVE' && 'web5-feedback-thumb--active'),
+    onClick: () => flipSentiment('POSITIVE'),
+    "aria-label": "Positive feedback",
+    "aria-pressed": sentiment === 'POSITIVE',
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 178,
+      columnNumber: 13
+    }
+  }, /*#__PURE__*/_react.default.createElement(ThumbUpIcon, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 188,
+      columnNumber: 15
+    }
+  })), /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: (0, _utils.cn)('web5-feedback-thumb', sentiment === 'NEGATIVE' && 'web5-feedback-thumb--active'),
+    onClick: () => flipSentiment('NEGATIVE'),
+    "aria-label": "Negative feedback",
+    "aria-pressed": sentiment === 'NEGATIVE',
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 190,
+      columnNumber: 13
+    }
+  }, /*#__PURE__*/_react.default.createElement(ThumbDownIcon, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 200,
+      columnNumber: 15
+    }
+  }))), /*#__PURE__*/_react.default.createElement("h3", {
+    className: "web5-feedback-title",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 203,
+      columnNumber: 11
+    }
+  }, title, ' ', /*#__PURE__*/_react.default.createElement("span", {
+    className: "web5-feedback-title-hint",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 205,
+      columnNumber: 13
+    }
+  }, "(optional)"))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "web5-feedback-chips",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 209,
+      columnNumber: 9
+    }
+  }, options.map(opt => {
+    const selected = category === opt.value;
+    return /*#__PURE__*/_react.default.createElement("button", {
+      key: opt.value,
+      type: "button",
+      className: (0, _utils.cn)('web5-feedback-chip', selected && 'web5-feedback-chip--selected'),
+      onClick: () => setCategory(selected ? null : opt.value),
+      "aria-pressed": selected,
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 213,
+        columnNumber: 15
+      }
+    }, opt.label);
+  })), /*#__PURE__*/_react.default.createElement("textarea", {
+    className: "web5-feedback-textarea",
+    placeholder: "Anything else to add...",
+    value: comment,
+    onChange: e => setComment(e.target.value),
+    rows: 3,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 229,
+      columnNumber: 9
+    }
+  }), /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "web5-feedback-submit",
+    onClick: submit,
+    disabled: submitting || submitted,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 237,
+      columnNumber: 9
+    }
+  }, submitted ? 'Thanks!' : submitting ? 'Submitting…' : 'Submit')));
+};
+
+/**
+ * "Was this helpful?" bar — renders a label + thumbs-up/down buttons inline.
+ * Clicking a thumb opens a popover for sentiment-specific category chips and
+ * an optional comment, then calls `onSubmit` with the structured payload.
+ *
+ * Exposed via the `FeedbackBarComponent` UI slot so clients can override the
+ * component wholesale; consumers that don't override fall back to this default.
+ */
+const FeedbackBar = ({
+  onSubmit,
+  label = 'Was this helpful?',
+  positiveCategories = DEFAULT_POSITIVE_CATEGORIES,
+  negativeCategories = DEFAULT_NEGATIVE_CATEGORIES,
+  positiveTitle = 'What went well?',
+  negativeTitle = 'What could be better?',
+  positiveTooltip = 'Good response',
+  negativeTooltip = 'Bad response',
+  className
+}) => {
+  const [openSentiment, setOpenSentiment] = (0, _react.useState)(null);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _utils.cn)('web5-feedback-bar', className),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 274,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "web5-feedback-label",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 275,
+      columnNumber: 7
+    }
+  }, label), /*#__PURE__*/_react.default.createElement("div", {
+    className: "web5-feedback-thumbs-row",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 276,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: (0, _utils.cn)('web5-feedback-thumb', openSentiment === 'POSITIVE' && 'web5-feedback-thumb--active'),
+    onClick: () => setOpenSentiment('POSITIVE'),
+    "aria-label": positiveTooltip,
+    "data-tooltip": positiveTooltip,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 277,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/_react.default.createElement(ThumbUpIcon, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 287,
+      columnNumber: 11
+    }
+  })), /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: (0, _utils.cn)('web5-feedback-thumb', openSentiment === 'NEGATIVE' && 'web5-feedback-thumb--active'),
+    onClick: () => setOpenSentiment('NEGATIVE'),
+    "aria-label": negativeTooltip,
+    "data-tooltip": negativeTooltip,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 289,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/_react.default.createElement(ThumbDownIcon, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 299,
+      columnNumber: 11
+    }
+  }))), openSentiment && /*#__PURE__*/_react.default.createElement(FeedbackPopover, {
+    initialSentiment: openSentiment,
+    positiveCategories: positiveCategories,
+    negativeCategories: negativeCategories,
+    positiveTitle: positiveTitle,
+    negativeTitle: negativeTitle,
+    onSubmit: onSubmit,
+    onClose: () => setOpenSentiment(null),
+    onSentimentChange: setOpenSentiment,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 303,
+      columnNumber: 9
+    }
+  }));
+};
+exports.FeedbackBar = FeedbackBar;
+//# sourceMappingURL=FeedbackBar.js.map