@redocly/theme 0.70.0-next.1 → 0.70.0-next.10

package/lib/components/Feedback/Rating.js

@@ -1,190 +0,0 @@
-"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 () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __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.FEEDBACK_MAX_RATING = void 0;
-exports.Rating = Rating;
-const React = __importStar(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const Reasons_1 = require("../../components/Feedback/Reasons");
-const hooks_1 = require("../../core/hooks");
-const RadioCheckButtonIcon_1 = require("../../icons/RadioCheckButtonIcon/RadioCheckButtonIcon");
-const Comment_1 = require("../../components/Feedback/Comment");
-const Stars_1 = require("../../components/Feedback/Stars");
-const Button_1 = require("../../components/Button/Button");
-const constants_1 = require("../../core/constants");
-exports.FEEDBACK_MAX_RATING = 5;
-function Rating({ settings, onSubmit, className }) {
-    const { label, submitText, comment: commentSettings, reasons: reasonsSettings, optionalEmail: optionalEmailSettings, } = settings || {};
-    const [isSubmitted, setIsSubmitted] = React.useState(false);
-    const [score, setScore] = React.useState(0);
-    const [reasons, setReasons] = React.useState([]);
-    const [comment, setComment] = React.useState('');
-    const [email, setEmail] = React.useState();
-    const { useTranslate, useUserMenu } = (0, hooks_1.useThemeHooks)();
-    const { userData } = useUserMenu();
-    const { translate } = useTranslate();
-    const hasReasons = !!(reasonsSettings && !reasonsSettings.hide);
-    const hasComment = !(commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.hide);
-    const hasOptionalEmail = !(optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.hide) && !(userData === null || userData === void 0 ? void 0 : userData.isAuthenticated);
-    const onEmailChange = (e) => {
-        const value = e.target.value;
-        setEmail(value || undefined);
-    };
-    const submitRating = (ratingScore) => {
-        const trimmedComment = (comment === null || comment === void 0 ? void 0 : comment.trim()) || undefined;
-        const trimmedEmail = (email === null || email === void 0 ? void 0 : email.trim()) || undefined;
-        onSubmit({
-            score: ratingScore,
-            comment: trimmedComment,
-            reasons,
-            max: exports.FEEDBACK_MAX_RATING,
-            email: trimmedEmail,
-        });
-        setIsSubmitted(true);
-    };
-    const onSubmitRatingForm = () => {
-        submitRating(score);
-    };
-    const onScoreChange = (newScore) => {
-        setScore(newScore);
-        if (newScore && !hasReasons && !hasComment && !hasOptionalEmail) {
-            submitRating(newScore);
-        }
-    };
-    const onCancelRatingForm = () => {
-        setScore(0);
-        setComment('');
-        setReasons([]);
-        setEmail(undefined);
-    };
-    const displayReasons = !!score && hasReasons;
-    const displayComment = !!score && hasComment;
-    const displaySubmitBnt = !!(score && (displayReasons || displayComment));
-    const displayFeedbackEmail = !!score && hasOptionalEmail;
-    if (isSubmitted) {
-        return (React.createElement(RatingWrapper, { "data-component-name": "Feedback/Rating" },
-            React.createElement(StyledFormMandatoryFields, null,
-                React.createElement(Label, { "data-translation-key": "feedback.settings.submitText" }, submitText ||
-                    translate('feedback.settings.submitText', 'Thank you for helping improve our documentation!')),
-                React.createElement(RadioCheckButtonIcon_1.RadioCheckButtonIcon, null))));
-    }
-    return (React.createElement(RatingWrapper, { "data-component-name": "Feedback/Rating", className: className },
-        React.createElement(StyledForm, null,
-            React.createElement(StyledFormMandatoryFields, null,
-                React.createElement(Label, { "data-translation-key": "feedback.settings.label" }, label || translate('feedback.settings.label', 'Was this helpful?')),
-                React.createElement(StyledMandatoryFieldContainer, null,
-                    React.createElement(Stars_1.Stars, { max: exports.FEEDBACK_MAX_RATING, onChange: onScoreChange, value: score }))),
-            (displayReasons || displayComment) && (React.createElement(StyledFormOptionalFields, null,
-                displayReasons && (React.createElement(Reasons_1.Reasons, { settings: {
-                        label: reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.label,
-                        items: (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.items) || [],
-                        component: reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.component,
-                    }, onChange: setReasons })),
-                displayComment && (React.createElement(Comment_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: {
-                        label: (commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.label) ||
-                            translate('feedback.settings.comment.label', 'Please share your feedback with us.'),
-                    } })))),
-            displayFeedbackEmail && (React.createElement(StyledFormOptionalFields, null,
-                React.createElement(InputLabel, { "data-translation-key": "feedback.settings.optionalEmail.label" }, (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.label) ||
-                    translate('feedback.settings.optionalEmail.label', 'Your email (optional, for follow-up)')),
-                React.createElement(EmailInput, { onChange: onEmailChange, placeholder: (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.placeholder) ||
-                        translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com'), type: "email", maxLength: constants_1.MAX_EMAIL_LENGTH, required: !!email, onKeyDown: (e) => {
-                        if (e.key === 'Enter') {
-                            e.preventDefault();
-                            onSubmitRatingForm();
-                        }
-                    } }))),
-            displaySubmitBnt && (React.createElement(ButtonsContainer, null,
-                React.createElement(Button_1.Button, { onClick: onCancelRatingForm, variant: "text", size: "small" }, translate('feedback.cancel', 'Cancel')),
-                React.createElement(Button_1.Button, { onClick: onSubmitRatingForm, variant: "secondary", size: "small" }, translate('feedback.submit', 'Submit')))))));
-}
-const StyledForm = styled_components_1.default.form `
-  width: 100%;
-  gap: var(--spacing-sm);
-  display: flex;
-  flex-direction: column;
-`;
-const StyledFormOptionalFields = styled_components_1.default.div `
-  display: flex;
-  flex-flow: column;
-`;
-const StyledFormMandatoryFields = styled_components_1.default.div `
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--spacing-xs);
-`;
-const StyledMandatoryFieldContainer = styled_components_1.default.div `
-  display: flex;
-`;
-const RatingWrapper = styled_components_1.default.div `
-  font-family: var(--font-family-base);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`;
-const Label = styled_components_1.default.h4 `
-  font-family: var(--feedback-font-family);
-  font-weight: var(--font-weight-regular);
-  font-size: var(--feedback-header-font-size);
-  line-height: var(--feedback-header-line-height);
-  color: var(--feedback-header-text-color);
-  margin: 0;
-`;
-const InputLabel = styled_components_1.default.h4 `
-  font-weight: var(--font-weight-regular);
-  font-size: var(--feedback-font-size);
-  line-height: var(--feedback-line-height);
-  margin: 0;
-`;
-const ButtonsContainer = styled_components_1.default.div `
-  display: flex;
-  justify-content: end;
-  margin-bottom: var(--spacing-xxs);
-  gap: var(--spacing-xxs);
-`;
-const EmailInput = styled_components_1.default.input `
-  background-color: var(--bg-color);
-  border-radius: var(--border-radius-lg);
-  border: var(--input-border);
-  outline: none;
-  color: var(--feedback-text-color);
-  font-family: var(--feedback-font-family);
-  padding: 10px;
-`;
-//# sourceMappingURL=Rating.js.map

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

@@ -1,11 +0,0 @@
-import type { JSX } from 'react';
-export type ReasonsProps = {
-    onChange: (value: string[]) => void;
-    settings: {
-        label?: string;
-        component?: string;
-        items: string[];
-    };
-    className?: string;
-};
-export declare function Reasons({ settings, onChange, className }: ReasonsProps): JSX.Element | null;

package/lib/components/Feedback/Reasons.js

@@ -1,90 +0,0 @@
-"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 () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __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 = Reasons;
-const React = __importStar(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const hooks_1 = require("../../core/hooks");
-function Reasons({ settings, onChange, className }) {
-    const { label, component = 'checkbox', items = [] } = settings;
-    const [checkedState, setCheckedState] = React.useState(new Array(items.length).fill(false));
-    const { useTranslate } = (0, hooks_1.useThemeHooks)();
-    const { translate } = useTranslate();
-    if (!items.length) {
-        return null;
-    }
-    const handleOptionChange = (position) => {
-        const updatedCheckedState = component === 'checkbox'
-            ? checkedState.map((item, index) => (index === position ? !item : item))
-            : items.map((_, idx) => position === idx);
-        setCheckedState(updatedCheckedState);
-        onChange(items.filter((_, index) => !!updatedCheckedState[index]));
-    };
-    return (React.createElement(ReasonsWrapper, { "data-component-name": "Feedback/Reasons", "data-translation-key": "feedback.settings.reasons.label", className: className },
-        React.createElement(Label, null, label ||
-            translate('feedback.settings.reasons.label', 'Which statement describes your thoughts about this page?')),
-        items.map((reason, idx) => (React.createElement(OptionWrapper, { key: reason },
-            React.createElement("input", { type: component, value: reason, checked: checkedState[idx], name: "reasons", onChange: () => handleOptionChange(idx) }),
-            React.createElement("label", { "data-translation-key": `feedback.settings.reasons.items.${idx + 1}`, id: reason, onClick: () => handleOptionChange(idx) }, translate(`feedback.settings.reasons.items.${idx + 1}`, reason)))))));
-}
-const ReasonsWrapper = styled_components_1.default.div `
-  font-family: var(--feedback-font-family);
-  display: flex;
-  flex-direction: column;
-`;
-const Label = styled_components_1.default.h4 `
-  font-family: var(--feedback-font-family);
-  font-weight: var(--font-weight-regular);
-  font-size: var(--feedback-font-size);
-  line-height: var(--feedback-header-line-height);
-  color: var(--feedback-header-text-color);
-  margin: 0;
-`;
-const OptionWrapper = styled_components_1.default.div `
-  margin: 5px 0;
-  display: flex;
-  input {
-    margin-right: 10px;
-    cursor: pointer;
-  }
-  label {
-    font-size: var(--feedback-font-size);
-    cursor: pointer;
-  }
-`;
-//# sourceMappingURL=Reasons.js.map

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

@@ -1,14 +0,0 @@
-import type { JSX } from 'react';
-import type { SubmitFeedbackParams } from '../../core/types';
-export type ReportDialogProps = {
-    location: string;
-    lang?: string;
-    onSubmit: () => void;
-    onCancel: () => void;
-    settings: {
-        label?: string;
-    };
-    submitFeedback: ({ type, values, path, location }: SubmitFeedbackParams) => Promise<void>;
-    className?: string;
-};
-export declare function ReportDialog({ location, settings, onSubmit, onCancel, submitFeedback, lang, }: ReportDialogProps): JSX.Element;

package/lib/components/Feedback/ReportDialog.js

@@ -1,67 +0,0 @@
-"use strict";
-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.ReportDialog = ReportDialog;
-const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const react_router_1 = require("react-router");
-const hooks_1 = require("../../core/hooks");
-const Comment_1 = require("../../components/Feedback/Comment");
-const Portal_1 = require("../../components/Portal/Portal");
-const utils_1 = require("../../core/utils");
-function ReportDialog({ location, settings, onSubmit, onCancel, submitFeedback, lang, }) {
-    const { label } = settings;
-    const { useTelemetry } = (0, hooks_1.useThemeHooks)();
-    const { pathname } = (0, react_router_1.useLocation)();
-    const telemetry = useTelemetry();
-    return (react_1.default.createElement(Portal_1.Portal, null,
-        react_1.default.createElement(ReportDialogWrapper, { className: "scroll-lock", "data-component-name": "Feedback/ReportDialog" },
-            react_1.default.createElement(Comment_1.Comment, { settings: { label }, onSubmit: (value) => __awaiter(this, void 0, void 0, function* () {
-                    yield submitFeedback({
-                        type: 'problem',
-                        values: value,
-                        location,
-                        path: pathname,
-                        lang,
-                    });
-                    telemetry.sendCodeSnippetReportedMessage([
-                        (0, utils_1.getBaseDataAttributes)('codeSnippet', 'markdocTag'),
-                    ]);
-                    onSubmit();
-                }), isDialog: true, onCancel: onCancel }))));
-}
-const ReportDialogWrapper = styled_components_1.default.div `
-  font-family: var(--font-family-base);
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background: var(--bg-color-modal-overlay);
-  z-index: var(--z-index-overlay);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  & > * {
-    background: var(--modal-bg-color);
-    box-shadow: var(--modal-box-shadow);
-    padding: var(--spacing-base);
-    margin: var(--spacing-base);
-    max-width: var(--feedback-report-dialog-max-width);
-    width: var(--feedback-report-dialog-width);
-    max-height: var(--feedback-report-dialog-max-height);
-  }
-`;
-//# sourceMappingURL=ReportDialog.js.map

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

@@ -1,31 +0,0 @@
-import type { JSX } from 'react';
-import type { OptionalEmailSettings } from '@redocly/config';
-export declare const MAX_SCALE = 10;
-export type ScaleProps = {
-    onSubmit: (value: {
-        score: number;
-        comment?: string;
-        reasons?: string[];
-        max?: number;
-        email?: string;
-    }) => void;
-    settings?: {
-        label?: string;
-        submitText?: string;
-        leftScaleLabel?: string;
-        rightScaleLabel?: string;
-        comment?: {
-            hide?: boolean;
-            label?: string;
-        };
-        reasons?: {
-            hide?: boolean;
-            label?: string;
-            component?: string;
-            items: string[];
-        };
-        optionalEmail?: OptionalEmailSettings;
-    };
-    className?: string;
-};
-export declare function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Element;

package/lib/components/Feedback/Scale.js

@@ -1,227 +0,0 @@
-"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 () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __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.MAX_SCALE = void 0;
-exports.Scale = Scale;
-const React = __importStar(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const utils_1 = require("../../core/utils");
-const hooks_1 = require("../../core/hooks");
-const RadioCheckButtonIcon_1 = require("../../icons/RadioCheckButtonIcon/RadioCheckButtonIcon");
-const Comment_1 = require("../../components/Feedback/Comment");
-const Reasons_1 = require("../../components/Feedback/Reasons");
-const Button_1 = require("../../components/Button/Button");
-const constants_1 = require("../../core/constants");
-exports.MAX_SCALE = 10;
-function Scale({ settings, onSubmit, className }) {
-    const { label, submitText, leftScaleLabel, rightScaleLabel, comment: commentSettings, reasons: reasonsSettings, optionalEmail: optionalEmailSettings, } = settings || {};
-    const [score, setScore] = React.useState(0);
-    const [isSubmitted, setIsSubmitted] = React.useState(false);
-    const [comment, setComment] = React.useState('');
-    const [reasons, setReasons] = React.useState([]);
-    const [email, setEmail] = React.useState();
-    const { useTranslate, useUserMenu } = (0, hooks_1.useThemeHooks)();
-    const { userData } = useUserMenu();
-    const { translate } = useTranslate();
-    const onEmailChange = (e) => {
-        const value = e.target.value;
-        setEmail(value || undefined);
-    };
-    const hasReasons = !!(reasonsSettings && !reasonsSettings.hide);
-    const hasComment = !(commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.hide);
-    const hasOptionalEmail = !(optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.hide) && !(userData === null || userData === void 0 ? void 0 : userData.isAuthenticated);
-    const submitScale = (scaleScore) => {
-        const trimmedComment = (comment === null || comment === void 0 ? void 0 : comment.trim()) || undefined;
-        const trimmedEmail = (email === null || email === void 0 ? void 0 : email.trim()) || undefined;
-        onSubmit({
-            score: scaleScore,
-            comment: trimmedComment,
-            reasons,
-            max: exports.MAX_SCALE,
-            email: trimmedEmail,
-        });
-        setIsSubmitted(true);
-    };
-    const onSubmitScaleForm = () => {
-        submitScale(score);
-    };
-    const onScoreChange = (newScore) => {
-        setScore(newScore);
-        if (newScore && !hasReasons && !hasComment && !hasOptionalEmail) {
-            submitScale(newScore);
-        }
-    };
-    const handleCancel = () => {
-        setScore(0);
-        setComment('');
-        setReasons([]);
-        setEmail(undefined);
-    };
-    const scaleOptions = [];
-    for (let i = 1; i <= exports.MAX_SCALE; i++) {
-        scaleOptions.push(React.createElement(Button_1.Button, { id: `scale-option-${i}`, key: `scale-option-${i}`, type: "button", onClick: () => onScoreChange(i), className: `${score === i ? 'active' : ''}` }, i));
-    }
-    const displayReasons = !!score && hasReasons;
-    const displayComment = !!score && hasComment;
-    const displaySubmitBnt = !!score && (displayReasons || displayComment);
-    const displayFeedbackEmail = !!score && hasOptionalEmail;
-    if (isSubmitted) {
-        return (React.createElement(ScaleWrapper, { "data-component-name": "Feedback/Scale" },
-            React.createElement(Label, { "data-translation-key": "feedback.settings.submitText" }, submitText ||
-                translate('feedback.settings.submitText', 'Thank you for helping improve our documentation!')),
-            React.createElement(RadioCheckButtonIcon_1.RadioCheckButtonIcon, null)));
-    }
-    return (React.createElement(ScaleWrapper, { "data-component-name": "Feedback/Scale", className: className },
-        React.createElement(StyledForm, { onSubmit: onSubmitScaleForm },
-            React.createElement(StyledFormMandatoryFields, null,
-                React.createElement(Label, { "data-translation-key": "feedback.settings.label" }, label || translate('feedback.settings.label', 'Was this helpful?')),
-                React.createElement(ScaleOptionsWrapper, null, scaleOptions),
-                React.createElement(SubLabelContainer, null,
-                    React.createElement(SubLabel, { "data-translation-key": "feedback.settings.leftScaleLabel" }, leftScaleLabel ||
-                        translate('feedback.settings.leftScaleLabel', 'Not helpful at all')),
-                    React.createElement(SubLabel, { "data-translation-key": "feedback.settings.rightScaleLabel" }, rightScaleLabel ||
-                        translate('feedback.settings.rightScaleLabel', 'Extremely helpful')))),
-            React.createElement(StyledFormOptionalFields, null,
-                displayReasons && (React.createElement(Reasons_1.Reasons, { settings: {
-                        label: reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.label,
-                        items: (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.items) || [],
-                        component: reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.component,
-                    }, onChange: setReasons })),
-                displayComment && (React.createElement(Comment_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: {
-                        label: (commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.label) ||
-                            translate('feedback.settings.comment.label', 'Please share your feedback with us.'),
-                    } }))),
-            displayFeedbackEmail && (React.createElement(StyledFormOptionalFields, null,
-                React.createElement(InputLabel, { "data-translation-key": "feedback.settings.optionalEmail.label" }, (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.label) ||
-                    translate('feedback.settings.optionalEmail.label', 'Your email (optional, for follow-up)')),
-                React.createElement(EmailInput, { onChange: onEmailChange, placeholder: (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.placeholder) ||
-                        translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com'), type: "email", maxLength: constants_1.MAX_EMAIL_LENGTH, required: !!email, onKeyDown: (e) => {
-                        if (e.key === 'Enter') {
-                            e.preventDefault();
-                            onSubmitScaleForm();
-                        }
-                    } }))),
-            displaySubmitBnt && (React.createElement(ButtonsContainer, null,
-                React.createElement(Button_1.Button, { "data-translation-key": "feedback.settings.comment.cancel", onClick: handleCancel, variant: "text", size: "small" }, translate('feedback.settings.comment.cancel', 'Cancel')),
-                React.createElement(Button_1.Button, { "data-translation-key": "feedback.submit", type: "submit", variant: "secondary", size: "small" }, translate('feedback.submit', 'Submit')))))));
-}
-const ScaleWrapper = styled_components_1.default.div `
-  font-family: var(--feedback-font-family);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`;
-const Label = styled_components_1.default.h4 `
-  font-family: var(--feedback-font-family);
-  font-weight: var(--font-weight-regular);
-  font-size: var(--feedback-header-font-size);
-  line-height: var(--feedback-header-line-height);
-  color: var(--feedback-header-text-color);
-  margin: 0;
-  width: 100%;
-`;
-const InputLabel = styled_components_1.default.h4 `
-  font-weight: var(--font-weight-regular);
-  font-size: var(--feedback-font-size);
-  line-height: var(--feedback-line-height);
-  margin: 0;
-`;
-const SubLabelContainer = styled_components_1.default.div `
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  flex-direction: row;
-`;
-const SubLabel = (0, styled_components_1.default)(Label) `
-  width: fit-content;
-  color: var(--text-color-description);
-  font-size: var(--feedback-font-size);
-  margin-bottom: var(--spacing-xxs);
-`;
-const StyledForm = styled_components_1.default.form `
-  width: 100%;
-  gap: var(--spacing-sm);
-  display: flex;
-  flex-direction: column;
-`;
-const ButtonsContainer = styled_components_1.default.div `
-  display: flex;
-  justify-content: end;
-  margin-bottom: var(--spacing-xxs);
-  gap: var(--spacing-xxs);
-`;
-const StyledFormOptionalFields = styled_components_1.default.div `
-  display: flex;
-  flex-flow: column;
-
-  &:empty {
-    display: none;
-  }
-`;
-const StyledFormMandatoryFields = styled_components_1.default.div `
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--spacing-sm);
-  align-items: center;
-`;
-const ScaleOptionsWrapper = styled_components_1.default.div `
-  display: flex;
-  justify-content: space-between;
-  flex-direction: row;
-  gap: var(--spacing-xxs);
-  width: 100%;
-
-  ${Button_1.Button} {
-    margin-left: 0;
-  }
-
-  @media screen and (max-width: ${utils_1.breakpoints.small}) {
-    gap: 2px;
-  }
-`;
-const EmailInput = styled_components_1.default.input `
-  background-color: var(--bg-color);
-  border-radius: var(--border-radius-lg);
-  border: var(--input-border);
-  outline: none;
-  color: var(--feedback-text-color);
-  font-family: var(--feedback-font-family);
-  padding: 10px;
-`;
-//# sourceMappingURL=Scale.js.map

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

@@ -1,26 +0,0 @@
-import type { JSX } from 'react';
-import type { OptionalEmailSettings, ReasonsSettingsSchema } from '@redocly/config';
-export type SentimentProps = {
-    onSubmit: (value: {
-        score: number;
-        comment?: string;
-        reasons?: string[];
-        email?: string;
-    }) => void;
-    settings?: {
-        label?: string;
-        submitText?: string;
-        comment?: {
-            hide?: boolean;
-            likeLabel?: string;
-            dislikeLabel?: string;
-        };
-        reasons?: ReasonsSettingsSchema & {
-            like?: ReasonsSettingsSchema;
-            dislike?: ReasonsSettingsSchema;
-        };
-        optionalEmail?: OptionalEmailSettings;
-    };
-    className?: string;
-};
-export declare function Sentiment({ settings, onSubmit, className }: SentimentProps): JSX.Element;