@redocly/theme 0.0.0-react18-20231120182601

package/lib/components/EditPageButton/EditPageButton.js

@@ -0,0 +1,43 @@
+"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 telemetry_1 = require("../../mocks/telemetry");
+const icons_1 = require("../../icons");
+const hooks_1 = require("../../mocks/hooks");
+const EditPageButton = ({ to }) => {
+    const { translate } = (0, hooks_1.useTranslate)();
+    return (react_1.default.createElement(EditButton, { "data-component-name": "EditPageButton/EditPageButton", to: to, onClick: () => telemetry_1.telemetry.send('edit_page_link_clicked', {}) },
+        react_1.default.createElement(ButtonIcon, null),
+        react_1.default.createElement(ButtonText, { "data-translation-key": "theme.markdown.editPage.text" }, translate('theme.markdown.editPage.text', 'Edit'))));
+};
+exports.EditPageButton = EditPageButton;
+const EditButton = (0, styled_components_1.default)(Link_1.Link) `
+  margin-left: auto;
+  display: inline-flex;
+  color: var(--text-secondary);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-base);
+  font-family: var(--font-family-base);
+  text-decoration: none;
+
+  &:hover {
+    color: var(--text-primary);
+  }
+
+  @media print {
+    display: none;
+  }
+`;
+const ButtonIcon = (0, styled_components_1.default)(icons_1.EditIcon) `
+  margin-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, className, standAlone, }: CommentProps) => JSX.Element;

package/lib/components/Feedback/Comment.js

@@ -0,0 +1,123 @@
+"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 hooks_1 = require("../../mocks/hooks");
+const RadioCheckButtonIcon_1 = require("../../icons/RadioCheckButtonIcon");
+const media_css_1 = require("../../mocks/media-css");
+const Comment = ({ settings, onSubmit, onCancel, className, standAlone = true, }) => {
+    const { label, submitText } = settings || {};
+    const [text, setText] = React.useState('');
+    const [submitValue, setSubmitValue] = React.useState('');
+    const { translate } = (0, hooks_1.useTranslate)();
+    const send = () => {
+        if (!text)
+            return;
+        setSubmitValue(text);
+        onSubmit({ comment: text });
+    };
+    const handleTextAreaChange = (e) => {
+        const commentValue = e.target.value;
+        setText(commentValue);
+        if (!standAlone) {
+            onSubmit({ comment: commentValue });
+        }
+    };
+    if (submitValue) {
+        return (React.createElement(StateWrapper, { className: className },
+            React.createElement(Label, { "data-translation-key": "theme.feedback.settings.comment.submitText" }, submitText ||
+                translate('theme.feedback.settings.comment.submitText', 'Thank you for helping improve our documentation!')),
+            React.createElement(RadioCheckButtonIcon_1.RadioCheckButtonIcon, null)));
+    }
+    return (React.createElement(Wrapper, { "data-component-name": "Feedback/Comment", className: className, style: standAlone ? { width: '424px', padding: '16px 24px' } : { width: 'auto' } },
+        React.createElement(Label, { "data-translation-key": "theme.feedback.settings.comment.label" }, label ||
+            translate('theme.feedback.settings.comment.label', 'Please share your feedback with us.')),
+        React.createElement(TextArea, { rows: 3, onChange: handleTextAreaChange }),
+        standAlone && (React.createElement(ButtonsContainer, null,
+            onCancel && (React.createElement(CancelButton, { "data-translation-key": "theme.feedback.settings.comment.cancel", onClick: onCancel }, translate('theme.feedback.settings.comment.cancel', 'Cancel'))),
+            React.createElement(SendButton, { "data-translation-key": "theme.feedback.settings.comment.send", onClick: send }, translate('theme.feedback.settings.comment.send', 'Send'))))));
+};
+exports.Comment = Comment;
+const Wrapper = styled_components_1.default.div `
+  font-family: var(--font-family-base);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  border-radius: 8px;
+  background: var(--bg-raised);
+`;
+const StateWrapper = (0, styled_components_1.default)(Wrapper) `
+  flex-direction: row;
+  align-items: center;
+  width: 424px;
+  padding: 16px 24px;
+
+  @media screen and (max-width: ${media_css_1.breakpoints.small}) {
+    width: 100%;
+  }
+`;
+const Label = styled_components_1.default.h4 `
+  font-family: var(--h4-font-family);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--h4-font-size);
+  line-height: var(--h4-line-height);
+  color: var(--h4-text-color);
+  margin-right: 15px;
+`;
+const TextArea = styled_components_1.default.textarea `
+  background-color: var(--bg-base);
+  border-radius: var(--border-radius-lg);
+  border: var(--input-border);
+  outline: none;
+  color: var(--text-primary);
+  font-family: var(--font-family-base);
+  margin: 0 0 10px 0;
+  padding: 10px;
+`;
+const ButtonsContainer = styled_components_1.default.div `
+  display: flex;
+  justify-content: end;
+`;
+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/Emotions.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export declare const Satisfied: () => React.JSX.Element;
+export declare const Dissatisfied: () => React.JSX.Element;
+export declare const Neutral: () => React.JSX.Element;

package/lib/components/Feedback/Emotions.js

@@ -0,0 +1,57 @@
+"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.Neutral = exports.Dissatisfied = exports.Satisfied = void 0;
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const icons_1 = require("../../icons");
+const Satisfied = () => {
+    return (React.createElement(Icon, null,
+        React.createElement(icons_1.SatisfiedIcon, null)));
+};
+exports.Satisfied = Satisfied;
+const Dissatisfied = () => {
+    return (React.createElement(Icon, null,
+        React.createElement(icons_1.DissatisfiedIcon, null)));
+};
+exports.Dissatisfied = Dissatisfied;
+const Neutral = () => {
+    return (React.createElement(Icon, null,
+        React.createElement(icons_1.NeutralIcon, null)));
+};
+exports.Neutral = Neutral;
+const Icon = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  > svg {
+    > g {
+      fill: var(--color-info-text);
+    }
+  }
+`;
+//# sourceMappingURL=Emotions.js.map

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

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

package/lib/components/Feedback/Feedback.js

@@ -0,0 +1,88 @@
+"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.Feedback = void 0;
+const React = __importStar(require("react"));
+const react_router_dom_1 = require("react-router-dom");
+const styled_components_1 = __importDefault(require("styled-components"));
+const Feedback_1 = require("../../components/Feedback");
+const hooks_1 = require("../../hooks");
+const useSubmitFeedback_1 = require("../../mocks/Feedback/useSubmitFeedback");
+const telemetry_1 = require("../../mocks/telemetry");
+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 = () => {
+        const { type, settings, path } = feedbackConf;
+        switch (type) {
+            case 'rating':
+                return (React.createElement(Wrapper, null,
+                    React.createElement(Feedback_1.Rating, { settings: settings, onSubmit: (values) => {
+                            submitFeedback({ type: 'rating', values, path });
+                            telemetry_1.telemetry.send('feedback_sent', { type: 'rating' });
+                        } })));
+            case 'sentiment':
+                return (React.createElement(Wrapper, null,
+                    React.createElement(Feedback_1.Sentiment, { settings: settings, onSubmit: (values) => {
+                            submitFeedback({ type: 'sentiment', values, path });
+                            telemetry_1.telemetry.send('feedback_sent', { type: 'sentiment' });
+                        } })));
+            case 'mood':
+                return (React.createElement(Wrapper, null,
+                    React.createElement(Feedback_1.Mood, { settings: settings, onSubmit: (values) => {
+                            submitFeedback({ type: 'mood', values, path });
+                            telemetry_1.telemetry.send('feedback_sent', { type: 'mood' });
+                        } })));
+            case 'scale':
+                return (React.createElement(Wrapper, null,
+                    React.createElement(Feedback_1.Scale, { settings: settings, onSubmit: (values) => {
+                            submitFeedback({ type: 'scale', values, path });
+                            telemetry_1.telemetry.send('feedback_sent', { type: 'scale' });
+                        } })));
+            case 'comment':
+                return (React.createElement(Wrapper, null,
+                    React.createElement(Feedback_1.Comment, { settings: settings, onSubmit: (values) => {
+                            submitFeedback({ type: 'comment', values, path });
+                            telemetry_1.telemetry.send('feedback_sent', { type: 'comment' });
+                        } })));
+            default:
+                console.log(`No feedback with type ${type}!`);
+                break;
+        }
+    };
+    return React.createElement(React.Fragment, { key: pathname }, renderFeedbackComponent());
+};
+exports.Feedback = Feedback;
+const Wrapper = styled_components_1.default.div `
+  @media print {
+    display: none;
+  }
+`;
+//# sourceMappingURL=Feedback.js.map

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { MoodProps } from '../../components';
+export declare enum MOOD_STATES {
+    SATISFIED = "satisfied",
+    NEUTRAL = "neutral",
+    DISSATISFIED = "dissatisfied"
+}
+export declare const Mood: ({ settings, onSubmit, className }: MoodProps) => JSX.Element;

package/lib/components/Feedback/Mood.js

@@ -0,0 +1,197 @@
+"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.Mood = exports.MOOD_STATES = void 0;
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const styled_components_1 = __importDefault(require("styled-components"));
+const hooks_1 = require("../../mocks/hooks");
+const Emotions_1 = require("../../components/Feedback/Emotions");
+const Feedback_1 = require("../../components/Feedback");
+const RadioCheckButtonIcon_1 = require("../../icons/RadioCheckButtonIcon");
+const components_1 = require("../../components");
+const media_css_1 = require("../../mocks/media-css");
+var MOOD_STATES;
+(function (MOOD_STATES) {
+    MOOD_STATES["SATISFIED"] = "satisfied";
+    MOOD_STATES["NEUTRAL"] = "neutral";
+    MOOD_STATES["DISSATISFIED"] = "dissatisfied";
+})(MOOD_STATES || (exports.MOOD_STATES = MOOD_STATES = {}));
+const Mood = ({ settings, onSubmit, className }) => {
+    const { label, submitText, comment: commentSettings, reasons: reasonsSettings } = settings || {};
+    const [score, setScore] = React.useState('');
+    const [isSubmitted, setIsSubmitted] = React.useState(false);
+    const [comment, setComment] = React.useState('');
+    const [reasons, setReasons] = React.useState([]);
+    const { translate } = (0, hooks_1.useTranslate)();
+    const renderCommentLabel = (score) => {
+        if (!commentSettings || (commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.hide) === true)
+            return '';
+        switch (score) {
+            case MOOD_STATES.SATISFIED:
+                return (commentSettings.satisfiedLabel ||
+                    translate('theme.feedback.settings.comment.satisfiedLabel', 'What was most helpful?'));
+            case MOOD_STATES.NEUTRAL:
+                return (commentSettings.neutralLabel ||
+                    translate('theme.feedback.settings.comment.neutralLabel', 'What can we improve?'));
+            case MOOD_STATES.DISSATISFIED:
+                return (commentSettings.dissatisfiedLabel ||
+                    translate('theme.feedback.settings.comment.dissatisfiedLabel', 'What can we improve?'));
+            default:
+                return translate('theme.feedback.settings.comment.satisfiedLabel', 'What can we improve?');
+        }
+    };
+    const displayReasons = !!score && reasonsSettings && !reasonsSettings.hide;
+    const displayComment = !!score && commentSettings && !commentSettings.hide;
+    const displaySubmitBnt = !!score && (displayReasons || displayComment);
+    const onSubmitMoodForm = () => {
+        onSubmit({
+            score: remapScore(score),
+            comment,
+            reasons,
+        });
+        setIsSubmitted(true);
+    };
+    (0, react_1.useEffect)(() => {
+        if (score && !displayComment && !displayReasons) {
+            onSubmitMoodForm();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [score, displayComment, displayReasons]);
+    if (isSubmitted) {
+        return (React.createElement(Wrapper, null,
+            React.createElement(Label, { "data-translation-key": "theme.feedback.settings.submitText" }, submitText ||
+                translate('theme.feedback.settings.submitText', 'Thank you for helping improve our documentation!')),
+            React.createElement(RadioCheckButtonIcon_1.RadioCheckButtonIcon, null)));
+    }
+    return (React.createElement(Wrapper, { "data-component-name": "Feedback/Mood", className: className },
+        React.createElement(StyledForm, null,
+            React.createElement(StyledFormMandatoryFields, null,
+                React.createElement(Label, { "data-translation-key": "theme.feedback.settings.label" }, label || translate('theme.feedback.settings.label', 'Was this helpful?')),
+                React.createElement(StyledMandatoryFieldContainer, null,
+                    React.createElement(React.Fragment, null,
+                        React.createElement(Vote, { className: `${score === MOOD_STATES.DISSATISFIED ? 'active' : ''}`, onClick: () => {
+                                setScore(MOOD_STATES.DISSATISFIED);
+                            } },
+                            React.createElement(Emotions_1.Dissatisfied, null)),
+                        React.createElement(Vote, { className: `${score === MOOD_STATES.NEUTRAL ? 'active' : ''}`, onClick: () => {
+                                setScore(MOOD_STATES.NEUTRAL);
+                            } },
+                            React.createElement(Emotions_1.Neutral, null)),
+                        React.createElement(Vote, { className: `${score === MOOD_STATES.SATISFIED ? 'active' : ''}`, onClick: () => {
+                                setScore(MOOD_STATES.SATISFIED);
+                            } },
+                            React.createElement(Emotions_1.Satisfied, null))))),
+            React.createElement(StyledFormOptionalFields, null,
+                displayReasons && (React.createElement(Feedback_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(Feedback_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: { label: renderCommentLabel(score) } }))),
+            displaySubmitBnt && (React.createElement(ButtonsContainer, null,
+                React.createElement(SubmitButton, { onClick: onSubmitMoodForm }, "Submit"))))));
+};
+exports.Mood = Mood;
+const remapScore = (score) => {
+    switch (score) {
+        case MOOD_STATES.SATISFIED:
+            return 1;
+        case MOOD_STATES.NEUTRAL:
+            return 0;
+        case MOOD_STATES.DISSATISFIED:
+            return -1;
+        default:
+            return 0;
+    }
+};
+const Wrapper = styled_components_1.default.div `
+  font-family: var(--font-family-base);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 24px;
+  width: 424px;
+  border-radius: 8px;
+  background: var(--bg-raised);
+
+  @media screen and (max-width: ${media_css_1.breakpoints.small}) {
+    width: 100%;
+  }
+`;
+const Label = styled_components_1.default.h4 `
+  font-family: var(--h4-font-family);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--h4-font-size);
+  line-height: var(--h4-line-height);
+  color: var(--h4-text-color);
+  margin-right: 15px;
+`;
+const Vote = styled_components_1.default.div `
+  cursor: pointer;
+  margin: 0 10px;
+  color: var(--text-description);
+  &.active {
+    color: var(--text-primary);
+  }
+  &:hover {
+    color: var(--text-primary);
+    svg {
+      > g {
+        fill: var(--text-primary);
+      }
+    }
+  }
+`;
+const SubmitButton = (0, styled_components_1.default)(components_1.Button).attrs(() => ({
+    color: 'primary',
+})) `
+  width: 100px;
+  margin-left: 0;
+  margin-right: 0;
+`;
+const ButtonsContainer = styled_components_1.default.div `
+  display: flex;
+  justify-content: end;
+`;
+const StyledForm = styled_components_1.default.form `
+  width: 100%;
+`;
+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;
+`;
+const StyledMandatoryFieldContainer = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+`;
+//# sourceMappingURL=Mood.js.map

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

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