@redocly/theme 0.10.0 → 0.11.1

package/lib/components/ColorModeSwitcher/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../../components/ColorModeSwitcher/ColorModeSwitcher"), exports);
+//# sourceMappingURL=index.js.map

package/lib/components/CopyButton/CopyButton.js

@@ -0,0 +1,54 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CopyButton = void 0;
+const react_1 = __importStar(require("react"));
+const copy_to_clipboard_1 = __importDefault(require("copy-to-clipboard"));
+const _theme_1 = require("../../index.js");
+const CopyButton = ({ text, dataTestId = 'copy-button' }) => {
+    const [title, setTitle] = (0, react_1.useState)('Copy');
+    function write() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield (0, copy_to_clipboard_1.default)(text);
+            setTitle('Copied!');
+            setTimeout(() => setTitle('Copy'), 1500);
+        });
+    }
+    return (react_1.default.createElement(_theme_1.Button, { color: "secondary", onClick: write, "data-cy": dataTestId, "data-component-name": "CopyButton/CopyButton" }, title));
+};
+exports.CopyButton = CopyButton;
+//# sourceMappingURL=CopyButton.js.map

package/lib/components/CopyButton/CopyButtonWrapper.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { TooltipProps } from '../../components/Tooltip';
+export interface CopyButtonWrapperProps {
+    data: unknown;
+    children: (props: {
+        renderCopyButton: (placement?: TooltipProps['placement']) => JSX.Element;
+    }) => JSX.Element;
+    onCopyClick?: () => void;
+    dataTestId?: string;
+}
+export declare const CopyButtonWrapper: React.NamedExoticComponent<CopyButtonWrapperProps>;

package/lib/components/CopyButton/CopyButtonWrapper.js

@@ -0,0 +1,53 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CopyButtonWrapper = void 0;
+const react_1 = __importStar(require("react"));
+const SamplesPanelControls_1 = require("../../components/SamplesPanelControls");
+const Tooltip_1 = require("../../components/Tooltip");
+const hooks_1 = require("../../hooks");
+const utils_1 = require("../../utils");
+function CopyButtonWrapperComponent({ data, children, onCopyClick, dataTestId = 'copy-button', }) {
+    const tooltip = (0, hooks_1.useControl)();
+    const showTooltip = () => {
+        tooltip.handleOpen();
+        setTimeout(() => {
+            tooltip.handleClose();
+        }, 1500);
+    };
+    const copy = () => {
+        const content = typeof data === 'string' ? data : JSON.stringify(data, null, 2);
+        utils_1.ClipboardService.copyCustom(content);
+        showTooltip();
+        onCopyClick === null || onCopyClick === void 0 ? void 0 : onCopyClick();
+    };
+    const renderCopyButton = (placement = 'top') => {
+        return (react_1.default.createElement(Tooltip_1.Tooltip, { className: "copy-button", tip: "Copied", isOpen: tooltip.isOpened, placement: placement },
+            react_1.default.createElement(SamplesPanelControls_1.SamplesControlButton, { onClick: copy, "data-cy": dataTestId }, "Copy")));
+    };
+    return children({ renderCopyButton });
+}
+exports.CopyButtonWrapper = (0, react_1.memo)(CopyButtonWrapperComponent);
+//# sourceMappingURL=CopyButtonWrapper.js.map

package/lib/components/CopyButton/index.d.ts

@@ -0,0 +1,2 @@
+export * from '../../components/CopyButton/CopyButtonWrapper';
+export * from '../../components/CopyButton/CopyButton';

package/lib/components/CopyButton/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../../components/CopyButton/CopyButtonWrapper"), exports);
+__exportStar(require("../../components/CopyButton/CopyButton"), exports);
+//# sourceMappingURL=index.js.map

package/lib/components/EditPageButton/EditPageButton.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditPageButton = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Link_1 = require("../../mocks/Link");
+const EditPageButton = ({ text, to, icon }) => {
+    return (react_1.default.createElement(EditButton, { to: to },
+        icon ? react_1.default.createElement(ButtonIcon, { src: icon }) : null,
+        react_1.default.createElement(ButtonText, null, text)));
+};
+exports.EditPageButton = EditPageButton;
+const EditButton = (0, styled_components_1.default)(Link_1.Link) `
+  margin-left: auto;
+  display: inline-flex;
+  color: var(--color-content);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-base);
+  font-family: var(--font-family-base);
+  text-decoration: none;
+
+  @media print {
+    display: none;
+  }
+`;
+const ButtonIcon = styled_components_1.default.img `
+  height: 14px;
+  padding-right: 3px;
+`;
+const ButtonText = styled_components_1.default.span `
+  line-height: 14px;
+`;
+//# sourceMappingURL=EditPageButton.js.map

package/lib/components/EditPageButton/index.d.ts

@@ -0,0 +1 @@
+export * from '../../components/EditPageButton/EditPageButton';

package/lib/components/EditPageButton/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../../components/EditPageButton/EditPageButton"), exports);
+//# sourceMappingURL=index.js.map

package/lib/components/Feedback/Comment.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { CommentProps } from '../../components/Feedback';
+export declare const Comment: ({ settings, onSubmit, onCancel }: CommentProps) => JSX.Element;

package/lib/components/Feedback/Comment.js

@@ -0,0 +1,93 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Comment = void 0;
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Button_1 = require("../../components/Button/Button");
+const Comment = ({ settings, onSubmit, onCancel }) => {
+    const { label, submitText } = settings || {};
+    const [text, setText] = React.useState('');
+    const [submitValue, setSubmitValue] = React.useState('');
+    const send = () => {
+        if (!text)
+            return;
+        setSubmitValue(text);
+        onSubmit({ comment: text });
+    };
+    const handleTextAreaChange = (e) => {
+        setText(e.target.value);
+    };
+    if (submitValue) {
+        return (React.createElement(Wrapper, null,
+            React.createElement(Label, null, submitText || 'Thank you for helping improve our documentation!')));
+    }
+    return (React.createElement(Wrapper, { "data-component-name": "Feedback/Comment" },
+        React.createElement(Label, null, label || 'Please share your feedback with us.'),
+        React.createElement(TextArea, { rows: 3, onChange: handleTextAreaChange }),
+        React.createElement(ButtonsContainer, null,
+            React.createElement(SendButton, { onClick: send }, "Send"),
+            onCancel && React.createElement(CancelButton, { onClick: onCancel }, "Cancel"))));
+};
+exports.Comment = Comment;
+const Wrapper = styled_components_1.default.div `
+  font-family: var(--font-family-base);
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+const Label = styled_components_1.default.h3 `
+  margin-right: 15px;
+`;
+const TextArea = styled_components_1.default.textarea `
+  font-family: var(--font-family-base);
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  color: black;
+  margin: 0 0 10px 0;
+  padding: 10px;
+`;
+const ButtonsContainer = styled_components_1.default.div `
+  display: flex;
+  justify-content: start;
+`;
+const SendButton = (0, styled_components_1.default)(Button_1.Button).attrs(() => ({
+    color: 'primary',
+})) `
+  width: 100px;
+  margin-left: 0;
+  margin-right: 0;
+`;
+const CancelButton = (0, styled_components_1.default)(Button_1.Button).attrs(() => ({
+    color: 'secondary',
+})) `
+  width: 100px;
+  margin-left: 0;
+  margin-right: 0;
+`;
+//# sourceMappingURL=Comment.js.map

package/lib/components/Feedback/Feedback.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { FeedbackProps } from '../../types/portal/src/shared/types/feedback';
+export declare const Feedback: (props: FeedbackProps & {
+    path?: string;
+}) => JSX.Element;

package/lib/components/Feedback/Feedback.js

@@ -0,0 +1,54 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Feedback = void 0;
+const React = __importStar(require("react"));
+const react_router_dom_1 = require("react-router-dom");
+const Feedback_1 = require("../../components/Feedback");
+const hooks_1 = require("../../hooks");
+const useSubmitFeedback_1 = require("../../mocks/Feedback/useSubmitFeedback");
+const Feedback = (props) => {
+    const { submitFeedback } = (0, useSubmitFeedback_1.useSubmitFeedback)();
+    const { pathname } = (0, react_router_dom_1.useLocation)();
+    const { feedback: themeFeedbackConf } = (0, hooks_1.useThemeConfig)();
+    const feedbackConf = Object.assign(Object.assign({}, themeFeedbackConf), props);
+    const renderFeedbackComponent = () => {
+        switch (type) {
+            case 'rating':
+                return (React.createElement(Feedback_1.Rating, { settings: settings, onSubmit: (values) => submitFeedback({ type: 'rating', values, path }) }));
+            case 'sentiment':
+                return (React.createElement(Feedback_1.Sentiment, { settings: settings, onSubmit: (values) => submitFeedback({ type: 'sentiment', values, path }) }));
+            case 'comment':
+                return (React.createElement(Feedback_1.Comment, { settings: settings, onSubmit: (values) => submitFeedback({ type: 'comment', values, path }) }));
+            default:
+                console.log(`No feedback with type ${type}!`);
+                break;
+        }
+    };
+    const { type, settings, path } = feedbackConf;
+    return React.createElement(React.Fragment, { key: pathname }, renderFeedbackComponent());
+};
+exports.Feedback = Feedback;
+//# sourceMappingURL=Feedback.js.map

package/lib/components/Feedback/Rating.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { RatingProps } from '../../components/Feedback';
+export declare const Rating: ({ settings, onSubmit }: RatingProps) => JSX.Element;

package/lib/components/Feedback/Rating.js

@@ -0,0 +1,82 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Rating = void 0;
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Feedback_1 = require("../../components/Feedback");
+const Rating = ({ settings, onSubmit }) => {
+    const { label, max, submitText, comment: commentSettings, reasons: reasonsSettings, } = settings || {};
+    const [score, setScore] = React.useState(0);
+    const [comment, setComment] = React.useState('');
+    const [reasons, setReasons] = React.useState([]);
+    if (score && (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.enable) && !reasons.length) {
+        const { label: reasonsLabel, items, multi } = reasonsSettings;
+        const buttonText = (commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.enable) ? 'Next' : 'Send';
+        return (React.createElement(Feedback_1.Reasons, { onSubmit: ({ reasons }) => setReasons(reasons), settings: { label: reasonsLabel, items, multi, buttonText } }));
+    }
+    if (score && (commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.enable) && !comment) {
+        return (React.createElement(Feedback_1.Comment, { onSubmit: ({ comment }) => setComment(comment), settings: { label: commentSettings.label } }));
+    }
+    if (score) {
+        onSubmit({
+            score,
+            comment,
+            reasons,
+        });
+        return (React.createElement(Wrapper, null,
+            React.createElement(Label, null, submitText || 'Thank you for helping improve our documentation!')));
+    }
+    return (React.createElement(Wrapper, { "data-component-name": "Feedback/Rating" },
+        React.createElement(Label, null, label || 'How helpful was this page?'),
+        React.createElement(Stars, { max: max || 5, onSubmit: setScore })));
+};
+exports.Rating = Rating;
+const Stars = ({ max, onSubmit }) => {
+    const [hovered, setHovered] = React.useState(0);
+    const stars = [];
+    for (let index = 1; index <= max; index++) {
+        stars.push(React.createElement(Star, { key: index, onClick: () => onSubmit(index), onMouseOver: () => setHovered(index), onMouseLeave: () => setHovered(0) },
+            React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20" }, hovered < index ? (React.createElement("g", { fill: "#e8c002" },
+                React.createElement("path", { d: "M20 7h-7L10 .5 7 7H0l5.46 5.47-1.64 7 6.18-3.7 6.18 3.73-1.63-7zm-10 6.9-3.76 2.27 1-4.28L3.5 8.5h4.61L10 4.6l1.9 3.9h4.6l-3.73 3.4 1 4.28z" }))) : (React.createElement("g", { fill: "#e8c002" },
+                React.createElement("path", { d: "M20 7h-7L10 .5 7 7H0l5.46 5.47-1.64 7 6.18-3.7 6.18 3.73-1.63-7z" }))))));
+    }
+    return React.createElement(React.Fragment, null, stars);
+};
+const Wrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+`;
+const Star = styled_components_1.default.span `
+  cursor: pointer;
+`;
+const Label = styled_components_1.default.h3 `
+  margin-right: 15px;
+  font-family: var(--font-family-base);
+`;
+//# sourceMappingURL=Rating.js.map

package/lib/components/Feedback/Reasons.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { ReasonsProps } from '../../components/Feedback';
+export declare const Reasons: ({ settings, onSubmit }: ReasonsProps) => JSX.Element;

package/lib/components/Feedback/Reasons.js

@@ -0,0 +1,85 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Reasons = void 0;
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Button_1 = require("../../components/Button/Button");
+const Reasons = ({ settings, onSubmit }) => {
+    const { label, multi, buttonText, items = [] } = settings;
+    const [checkedState, setCheckedState] = React.useState(new Array(items.length).fill(false));
+    if (!items.length) {
+        return React.createElement(React.Fragment, null);
+    }
+    const input_type = multi ? 'checkbox' : 'radio';
+    const handleOptionChange = (position) => {
+        const updatedCheckedState = multi
+            ? checkedState.map((item, index) => (index === position ? !item : item))
+            : items.map((_, idx) => position === idx);
+        setCheckedState(updatedCheckedState);
+    };
+    const submitForm = () => {
+        onSubmit({ reasons: items.filter((_, index) => !!checkedState[index]) });
+    };
+    return (React.createElement(Wrapper, { "data-component-name": "Feedback/Reasons" },
+        React.createElement(Label, null, label || 'Which statement describes your thoughts about this page?'),
+        items.map((reason, idx) => (React.createElement(OptionWrapper, { key: reason },
+            React.createElement("input", { type: input_type, value: reason, checked: checkedState[idx], name: "reasons", onChange: () => handleOptionChange(idx) }),
+            React.createElement("label", { id: reason, onClick: () => handleOptionChange(idx) }, reason)))),
+        React.createElement(SendButton, { onClick: submitForm }, buttonText || 'Send')));
+};
+exports.Reasons = Reasons;
+const Wrapper = styled_components_1.default.div `
+  font-family: var(--font-family-base);
+  display: flex;
+  flex-direction: column;
+`;
+const Label = styled_components_1.default.h3 `
+  margin-right: 15px;
+`;
+const SendButton = (0, styled_components_1.default)(Button_1.Button).attrs(() => ({
+    color: 'primary',
+})) `
+  width: 100px;
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 15px;
+`;
+const OptionWrapper = styled_components_1.default.div `
+  margin: 5px 0;
+  display: flex;
+  input {
+    margin-right: 10px;
+    cursor: pointer;
+  }
+  label {
+    font-size: 14px;
+    cursor: pointer;
+  }
+`;
+//# sourceMappingURL=Reasons.js.map

package/lib/components/Feedback/ReportDialog.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { ReportDialogProps } from '../../components/Feedback';
+export declare const ReportDialog: ({ location, settings, onSubmit, onCancel, submitFeedback, }: ReportDialogProps) => JSX.Element;

package/lib/components/Feedback/ReportDialog.js

@@ -0,0 +1,64 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReportDialog = void 0;
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Comment_1 = require("../../components/Feedback/Comment");
+const ReportDialog = ({ location, settings, onSubmit, onCancel, submitFeedback, }) => {
+    const { label } = settings;
+    return (React.createElement(Wrapper, { className: "modal" },
+        React.createElement(Comment_1.Comment, { settings: { label }, onSubmit: (value) => {
+                submitFeedback({ type: 'problem', values: value, path: location });
+                onSubmit();
+            }, onCancel: onCancel })));
+};
+exports.ReportDialog = ReportDialog;
+const Wrapper = styled_components_1.default.div `
+  font-family: var(--font-family-base);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: var(--modal-overlay-background-color);
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  & > * {
+    background: var(--modal-background-color);
+    box-shadow: var(--modal-box-shadow);
+    padding: 15px;
+    margin: 15px;
+    max-width: 500px;
+    max-height: 300px;
+  }
+`;
+//# sourceMappingURL=ReportDialog.js.map

package/lib/components/Feedback/Sentiment.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { SentimentProps } from '../../components/Feedback';
+export declare const Sentiment: ({ settings, onSubmit }: SentimentProps) => JSX.Element;