@khanacademy/perseus 0.0.1 → 0.2.1

package/src/hint-renderer.jsx

@@ -0,0 +1,159 @@
+// @flow
+import * as i18n from "@khanacademy/wonder-blocks-i18n";
+import {StyleSheet, css} from "aphrodite";
+import classnames from "classnames";
+import * as React from "react";
+
+import Gorgon from "./gorgon/gorgon.js";
+import {linterContextDefault} from "./gorgon/proptypes.js";
+import Renderer from "./renderer.jsx";
+import {
+    baseUnitPx,
+    hintBorderWidth,
+    kaGreen,
+    gray97,
+} from "./styles/constants.js";
+import mediaQueries from "./styles/media-queries.js";
+
+import type {APIOptions, LinterContextProps} from "./types.js";
+
+type Props = {|
+    apiOptions: APIOptions,
+    className?: string,
+    hint: $FlowFixMe,
+    lastHint?: boolean,
+    lastRendered?: boolean,
+    pos: number,
+    totalHints?: number,
+    findExternalWidgets?: $FlowFixMe,
+    linterContext: LinterContextProps,
+|};
+
+type DefaultProps = {|
+    linterContext: Props["linterContext"],
+|};
+
+/* Renders just a hint preview */
+class HintRenderer extends React.Component<Props> {
+    static defaultProps: DefaultProps = {
+        linterContext: linterContextDefault,
+    };
+
+    getSerializedState: () => void = () => {
+        // eslint-disable-next-line react/no-string-refs
+        return this.refs.renderer.getSerializedState();
+    };
+
+    restoreSerializedState: (
+        $FlowFixMe,
+        (...args: $ReadOnlyArray<$FlowFixMe>) => mixed,
+    ) => void = (state, callback) => {
+        // eslint-disable-next-line react/no-string-refs
+        this.refs.renderer.restoreSerializedState(state, callback);
+    };
+
+    render(): React.Node {
+        const {
+            apiOptions,
+            className,
+            hint,
+            lastHint,
+            lastRendered,
+            pos,
+            totalHints,
+        } = this.props;
+
+        const {isMobile} = apiOptions;
+
+        const classNames = classnames(
+            !isMobile && "perseus-hint-renderer",
+            isMobile && css(styles.newHint),
+            isMobile && lastRendered && css(styles.lastRenderedNewHint),
+            lastHint && "last-hint",
+            lastRendered && "last-rendered",
+            className,
+        );
+
+        // TODO(charlie): Allowing `staticRender` here would require that we
+        // extend `HintsRenderer` and `HintRenderer` to implement the full
+        // "input' API, so that clients could access the static inputs. Allowing
+        // `customKeypad` would require that we extend `ItemRenderer` to support
+        // nested inputs in the `HintsRenderer`. For now, we disable these
+        // options. Instead, clients will get standard <input/> elements, which
+        // aren't nice to use on mobile, but are at least usable.
+        const rendererApiOptions = {
+            ...apiOptions,
+            customKeypad: false,
+            staticRender: false,
+        };
+
+        return (
+            <div className={classNames} tabIndex="-1">
+                {!apiOptions.isMobile && (
+                    <span className="perseus-sr-only">
+                        {i18n._("Hint #%(pos)s", {pos: pos + 1})}
+                    </span>
+                )}
+                {!apiOptions.isMobile &&
+                    !apiOptions.satStyling &&
+                    totalHints &&
+                    pos != null && (
+                        <span
+                            className="perseus-hint-label"
+                            style={{
+                                display: "block",
+                                color: apiOptions.hintProgressColor,
+                            }}
+                        >
+                            {`${pos + 1} / ${totalHints}`}
+                        </span>
+                    )}
+                <Renderer
+                    // eslint-disable-next-line react/no-string-refs
+                    ref="renderer"
+                    widgets={hint.widgets}
+                    content={hint.content || ""}
+                    images={hint.images}
+                    apiOptions={rendererApiOptions}
+                    findExternalWidgets={this.props.findExternalWidgets}
+                    linterContext={Gorgon.pushContextStack(
+                        this.props.linterContext,
+                        "hint",
+                    )}
+                />
+            </div>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    newHint: {
+        marginBottom: 1.5 * baseUnitPx,
+
+        borderLeftColor: gray97,
+        borderLeftStyle: "solid",
+        borderLeftWidth: hintBorderWidth,
+
+        // Only apply left-padding on tablets, to avoid being flush with the
+        // border. On phones, padding is applied internally by the child
+        // renderers. Some content on phones that is rendered at full-bleed may
+        // end up flush with the border, but that's acceptable for now.
+        [mediaQueries.lgOrSmaller]: {
+            paddingLeft: baseUnitPx,
+        },
+        [mediaQueries.smOrSmaller]: {
+            paddingLeft: 0,
+        },
+
+        ":focus": {
+            outline: "none",
+        },
+    },
+
+    lastRenderedNewHint: {
+        marginBottom: 0,
+        borderLeftColor: kaGreen,
+    },
+});
+
+export default HintRenderer;

package/src/hints-renderer.jsx

@@ -0,0 +1,359 @@
+// @flow
+import * as i18n from "@khanacademy/wonder-blocks-i18n";
+import {StyleSheet, css} from "aphrodite";
+import classnames from "classnames";
+import * as React from "react";
+import ReactDOM from "react-dom";
+import _ from "underscore";
+
+import Gorgon from "./gorgon/gorgon.js";
+import {linterContextDefault} from "./gorgon/proptypes.js";
+import HintRenderer from "./hint-renderer.jsx";
+import {ApiOptions} from "./perseus-api.jsx";
+import typeof Renderer from "./renderer.jsx";
+import {
+    baseUnitPx,
+    hintBorderWidth,
+    kaGreen,
+    gray85,
+    gray17,
+} from "./styles/constants.js";
+import mediaQueries from "./styles/media-queries.js";
+import sharedStyles from "./styles/shared.js";
+import Util from "./util.js";
+
+import type {APIOptionsWithDefaults} from "./types.js";
+
+type Props = {|
+    ...React.ElementConfig<Renderer>,
+    className?: string,
+    hints: $ReadOnlyArray<$FlowFixMe>,
+    hintsVisible?: number,
+|};
+
+type DefaultProps = {|
+    linterContext: Props["linterContext"],
+|};
+
+type State = {|
+    isFinalHelpPage: boolean,
+|};
+
+// Use of UNSAFE_componentWillReceiveProps:
+// eslint-disable-next-line react/no-unsafe
+class HintsRenderer extends React.Component<Props, State> {
+    static defaultProps: DefaultProps = {
+        linterContext: linterContextDefault,
+    };
+
+    // The isFinalHelpPage property determines if the user has requested help
+    // after answering an exercise question incorrectly, which differs from
+    // the case when the user is requesting successive hints. In the case
+    // where isFinalHelpPage property is true, we want to display all hints.
+    // We know the user is on the final help page when the hintsVisible
+    // property jumps from 0 to the total number of hints.
+    state: $FlowFixMe = {isFinalHelpPage: false};
+
+    componentDidMount() {
+        this._cacheHintImages();
+    }
+
+    UNSAFE_componentWillReceiveProps(nextProps: Props) {
+        // $FlowFixMe[unsafe-addition]
+        if (nextProps.hintsVisible - this.props.hintsVisible > 1) {
+            this.setState({isFinalHelpPage: true});
+        }
+    }
+
+    componentDidUpdate(prevProps: Props, prevState: State) {
+        if (
+            !_.isEqual(prevProps.hints, this.props.hints) ||
+            prevProps.hintsVisible !== this.props.hintsVisible
+        ) {
+            this._cacheHintImages();
+        }
+
+        // When a new hint is displayed we immediately focus it
+        // $FlowFixMe[invalid-compare]
+        if (prevProps.hintsVisible < this.props.hintsVisible) {
+            // $FlowFixMe[unsafe-addition]
+            const pos = this.props.hintsVisible - 1;
+            // $FlowFixMe[prop-missing]
+            // $FlowFixMe[incompatible-use]
+            ReactDOM.findDOMNode(this.refs["hintRenderer" + pos]).focus(); // eslint-disable-line react/no-string-refs
+        }
+    }
+
+    _hintsVisible: () => number = () => {
+        if (this.props.hintsVisible == null || this.props.hintsVisible === -1) {
+            return this.props.hints.length;
+        }
+        return this.props.hintsVisible;
+    };
+
+    _cacheImagesInHint: ($FlowFixMe) => void = (hint) => {
+        _.each(hint.images, (data, src) => {
+            const image = new Image();
+            image.src = Util.getRealImageUrl(src);
+        });
+    };
+
+    _cacheHintImages: () => $FlowFixMe = () => {
+        // Only cache images in the first hint at the start. When hints are
+        // taken, cache images in the rest of the hints
+        if (this._hintsVisible() > 0) {
+            _.each(this.props.hints, this._cacheImagesInHint);
+        } else if (this.props.hints.length > 0) {
+            this._cacheImagesInHint(this.props.hints[0]);
+        }
+    };
+
+    getApiOptions: () => APIOptionsWithDefaults = () => {
+        // When an item is answered correctly, the entire exercise is set to
+        // `readOnly = true` so that the user cannot switch answers. However, this
+        // makes hyperlinks in hints unclickable. Thus, we always set readOnly to be
+        // false in hints.
+        return {
+            ...ApiOptions.defaults,
+            ...this.props.apiOptions,
+            readOnly: false,
+        };
+    };
+
+    getSerializedState: () => $FlowFixMe = () => {
+        return _.times(this._hintsVisible(), (i) => {
+            // eslint-disable-next-line react/no-string-refs
+            return this.refs["hintRenderer" + i].getSerializedState();
+        });
+    };
+
+    restoreSerializedState: (
+        $FlowFixMe,
+        (...args: $ReadOnlyArray<$FlowFixMe>) => mixed,
+    ) => void = (state, callback) => {
+        // We need to wait until all the renderers are finished restoring their
+        // state before we fire our callback.
+        let numCallbacks = 1;
+        const fireCallback = () => {
+            --numCallbacks;
+            if (callback && numCallbacks === 0) {
+                callback();
+            }
+        };
+
+        _.each(state, (hintState, i) => {
+            // eslint-disable-next-line react/no-string-refs
+            const hintRenderer = this.refs["hintRenderer" + i];
+            // This is not ideal in that it doesn't restore state
+            // if the hint isn't visible, but we can't exactly restore
+            // the state to an unmounted renderer, so...
+            // If you want to restore state to hints, make sure to
+            // have the appropriate number of hints visible already.
+            if (hintRenderer) {
+                ++numCallbacks;
+                hintRenderer.restoreSerializedState(hintState, fireCallback);
+            }
+        });
+
+        // This makes sure that the callback is fired if there aren't any
+        // mounted renderers.
+        fireCallback();
+    };
+
+    render(): React.Node {
+        const apiOptions = this.getApiOptions();
+        const hintsVisible = this._hintsVisible();
+        const hints = [];
+        const isFinalHelpPage = this.state.isFinalHelpPage;
+        this.props.hints.slice(0, hintsVisible).forEach((hint, i) => {
+            const lastHint =
+                i === this.props.hints.length - 1 && !/\*\*/.test(hint.content);
+            const lastRendered = i === hintsVisible - 1;
+
+            const renderer = (
+                <HintRenderer
+                    lastHint={lastHint}
+                    lastRendered={lastRendered}
+                    hint={hint}
+                    pos={i}
+                    totalHints={this.props.hints.length}
+                    ref={"hintRenderer" + i}
+                    key={"hintRenderer" + i}
+                    apiOptions={apiOptions}
+                    findExternalWidgets={this.props.findExternalWidgets}
+                    linterContext={Gorgon.pushContextStack(
+                        this.props.linterContext,
+                        "hints[" + i + "]",
+                    )}
+                />
+            );
+
+            if (isFinalHelpPage) {
+                hints.push(renderer);
+            } else {
+                if (hint.replace && hints.length > 0) {
+                    hints[hints.length - 1] = renderer;
+                } else {
+                    hints.push(renderer);
+                }
+            }
+        });
+
+        const {getAnotherHint} = apiOptions;
+
+        const showGetAnotherHint =
+            getAnotherHint &&
+            hintsVisible > 0 &&
+            hintsVisible < this.props.hints.length;
+        const hintRatioCopy = `(${hintsVisible}/${this.props.hints.length})`;
+
+        const classNames = classnames(
+            this.props.className,
+            apiOptions.isMobile &&
+                hintsVisible > 0 &&
+                css(styles.mobileHintStylesHintsRenderer),
+        );
+
+        return (
+            <div className={classNames}>
+                {apiOptions.isMobile && hintsVisible > 0 && (
+                    <div
+                        className={css(
+                            styles.mobileHintStylesHintTitle,
+                            sharedStyles.responsiveLabel,
+                        )}
+                    >
+                        {i18n._("Hints")}
+                    </div>
+                )}
+                {hints}
+                {showGetAnotherHint && (
+                    <button
+                        rel="button"
+                        className={css(
+                            styles.linkButton,
+                            styles.getAnotherHintButton,
+                            apiOptions.isMobile &&
+                                styles.mobileHintStylesGetAnotherHintButton,
+                        )}
+                        onClick={(evt) => {
+                            evt.preventDefault();
+                            evt.stopPropagation();
+                            if (getAnotherHint) {
+                                getAnotherHint();
+                            }
+                        }}
+                    >
+                        <span
+                            className={css(
+                                styles.plusText,
+                                apiOptions.isMobile &&
+                                    styles.mobileHintStylesPlusText,
+                            )}
+                        >
+                            +
+                        </span>
+                        <span className={css(styles.getAnotherHintText)}>
+                            {i18n._("Get another hint")} {hintRatioCopy}
+                        </span>
+                    </button>
+                )}
+            </div>
+        );
+    }
+}
+
+const hintIndentation = baseUnitPx + hintBorderWidth;
+
+const styles = StyleSheet.create({
+    // eslint-disable-next-line react-native/no-unused-styles
+    rendererMargins: {
+        marginTop: baseUnitPx,
+    },
+
+    linkButton: {
+        cursor: "pointer",
+        border: "none",
+        backgroundColor: "transparent",
+        fontSize: "100%",
+        fontFamily: "inherit",
+        fontWeight: "bold",
+        color: kaGreen,
+        padding: 0,
+        position: "relative",
+    },
+
+    plusText: {
+        fontSize: 20,
+        position: "absolute",
+        top: -3,
+        left: 0,
+    },
+    getAnotherHintText: {
+        marginLeft: 16,
+    },
+
+    mobileHintStylesHintsRenderer: {
+        marginTop: 4 * baseUnitPx,
+        border: `solid ${gray85}`,
+        borderWidth: "1px 0 0 0",
+
+        position: "relative",
+        ":before": {
+            content: '""',
+            display: "table",
+            clear: "both",
+        },
+        ":after": {
+            content: '""',
+            display: "table",
+            clear: "both",
+        },
+    },
+
+    mobileHintStylesHintTitle: {
+        fontFamily: "inherit",
+        fontStyle: "normal",
+        fontWeight: "bold",
+        color: gray17,
+
+        paddingTop: baseUnitPx,
+        paddingBottom: 1.5 * baseUnitPx,
+
+        [mediaQueries.lgOrSmaller]: {
+            paddingLeft: 0,
+        },
+        [mediaQueries.smOrSmaller]: {
+            // On phones, ensure that the button is aligned with the hint body
+            // content, which is inset at the standard `baseUnitPx`, plus an
+            // additional `hintBorderWidth`.
+            paddingLeft: hintIndentation,
+        },
+    },
+
+    getAnotherHintButton: {
+        marginTop: 1.5 * baseUnitPx,
+    },
+
+    mobileHintStylesGetAnotherHintButton: {
+        [mediaQueries.lgOrSmaller]: {
+            paddingLeft: 0,
+        },
+        [mediaQueries.smOrSmaller]: {
+            // As with the title, on phones, ensure that the button is aligned
+            // with the hint body content.
+            paddingLeft: hintIndentation,
+        },
+    },
+
+    mobileHintStylesPlusText: {
+        [mediaQueries.lgOrSmaller]: {
+            left: 0,
+        },
+        [mediaQueries.smOrSmaller]: {
+            left: hintIndentation,
+        },
+    },
+});
+
+export default HintsRenderer;

package/src/icon-paths.js

@@ -0,0 +1,120 @@
+// @flow
+/**
+ * Icon paths to be used with `inline-icon.jsx`.
+ *
+ * These paths are taken directly from webapp's `icon-paths.js`. Unlike the
+ * webapp equivalent, these can be directly required within Perseus files since
+ * this is all bundled together anyway.
+ */
+
+export const iconCheck = {
+    path: `M8.70710678,12.2928932 C8.31658249,11.9023689 7.68341751,11.9023689 7.29289322,12.2928932 C6.90236893,12.6834175 6.90236893,13.3165825 7.29289322,13.7071068 L9.82842712,16.2426407 C10.2207367,16.6349502 10.8574274,16.6328935 11.2471942,16.2380576 L16.7116603,10.7025237 C17.0996535,10.3094846 17.0955629,9.67633279 16.7025237,9.28833966 C16.3094846,8.90034653 15.6763328,8.90443714 15.2883397,9.29747629 L10.5309507,14.1167372 L8.70710678,12.2928932 Z`,
+    width: 24,
+    height: 24,
+};
+export const iconCheckMedium = {
+    path: "M6.072 10.4l6.175-7.058a1 1 0 1 1 1.506 1.317L6.769 12.64a1 1 0 0 1-1.55-.054L2.203 8.604a1 1 0 1 1 1.594-1.208L6.072 10.4z",
+    width: 16,
+    height: 16,
+};
+export const iconChevronDown = {
+    path: "M99.669 13.048q0 3.36-2.352 5.712l-41.664 41.664q-2.408 2.408-5.88 2.408t-5.712-2.408l-41.664-41.664q-2.408-2.24-2.408-5.712t2.408-5.88l4.76-4.816q2.52-2.352 5.88-2.352t5.656 2.352l31.136 31.136 31.08-31.136q2.352-2.352 5.712-2.352t5.88 2.352l4.816 4.816q2.352 2.52 2.352 5.88z",
+    width: 100,
+    height: 63.034,
+};
+export const iconChevronRight = {
+    path: "M62.808 49.728q0 3.36-2.352 5.88l-41.72 41.664q-2.352 2.408-5.768 2.408t-5.768-2.408l-4.872-4.76q-2.352-2.52-2.352-5.88t2.352-5.712l31.08-31.136-31.08-31.024q-2.352-2.52-2.352-5.88t2.352-5.712l4.872-4.76q2.296-2.408 5.768-2.408t5.768 2.408l41.72 41.664q2.352 2.296 2.352 5.656z",
+    width: 63.034,
+    height: 100,
+};
+export const iconCircle = {
+    path: "M100.035 50.046q.057 13.623-6.669 25.137t-18.24 18.183-25.08 6.669-25.137-6.726q-11.514-6.726-18.183-18.183-6.726-11.571-6.726-25.137t6.726-25.08 18.24-18.24 25.08-6.669q13.566 0 25.08 6.726 11.514 6.669 18.24 18.183t6.669 25.137z",
+    width: 100,
+    height: 100,
+};
+export const iconCircleArrowDown = {
+    path: "M50.046 83.676q1.767 0 2.907-1.14l29.526-29.526q1.197-1.197 1.197-2.907t-1.197-2.964l-5.928-5.928q-1.197-1.14-2.964-1.14t-2.907 1.14l-12.312 12.312l0-32.661q0-1.71-1.254-2.964t-2.907-1.254l-8.322 0q-1.71 0-2.964 1.254t-1.254 2.964l0 32.661l-12.312-12.312q-1.197-1.254-2.907-1.254t-2.907 1.254l-5.928 5.928q-1.197 1.197-1.197 2.964t1.197 2.907l29.469 29.526q1.197 1.14 2.964 1.14zm49.989-33.63q.057 13.623-6.669 25.137t-18.24 18.183-25.08 6.669-25.137-6.726q-11.514-6.726-18.183-18.183-6.726-11.571-6.726-25.137t6.726-25.08 18.24-18.24 25.08-6.669q13.566 0 25.08 6.726 11.514 6.669 18.24 18.183t6.669 25.137z",
+    width: 100,
+    height: 100,
+};
+export const iconCircleArrowUp = {
+    path: "M54.207 83.391q1.653 0 2.907-1.254t1.254-2.907l0-32.718l12.312 12.312q1.254 1.254 2.964 1.254t2.907-1.254l5.928-5.928q1.197-1.197 1.14-2.964 0-1.767-1.14-2.907l-29.526-29.526q-1.197-1.14-2.907-1.14t-2.964 1.14l-29.469 29.526q-1.197 1.254-1.197 2.964t1.197 2.907l5.928 5.928q1.197 1.197 2.907 1.197t2.907-1.197l12.312-12.312l0 32.718q0 1.653 1.254 2.907t2.964 1.254l8.322 0zm45.828-33.345q.057 13.623-6.669 25.137t-18.24 18.183-25.08 6.669-25.137-6.726q-11.514-6.726-18.183-18.183-6.726-11.571-6.726-25.137t6.726-25.08 18.24-18.24 25.08-6.669q13.566 0 25.08 6.726 11.514 6.669 18.24 18.183t6.669 25.137z",
+    width: 100,
+    height: 100,
+};
+export const iconCircleThin = {
+    path: "M50.046 8.322q-8.493 0-16.188 3.306-15.561 6.669-22.173 22.23-3.363 7.695-3.363 16.188t3.306 16.188 8.949 13.281q5.586 5.586 13.281 8.892t16.188 3.306 16.188-3.306 13.281-8.892 8.892-13.281 3.306-16.188-3.306-16.188-8.892-13.281-13.281-8.949q-7.695-3.306-16.188-3.306zm0 91.713q-13.623 0-25.137-6.726t-18.183-18.183q-6.726-11.571-6.726-25.137t6.726-25.08 18.24-18.24 25.08-6.669q13.566 0 25.08 6.726 11.514 6.669 18.24 18.183t6.726 25.137-6.726 25.137-18.24 18.126q-11.514 6.726-25.08 6.726z",
+    width: 100,
+    height: 99.944,
+};
+export const iconDesktop = {
+    path: "M94.208 52.119l0-43.746q0-.69-.506-1.15t-1.196-.506l-84.088 0q-.69 0-1.196.506t-.506 1.15l0 43.746q0 .69.506 1.196t1.196.506l84.088 0q.69 0 1.196-.506t.506-1.196zm6.716-43.746l0 57.224q0 3.45-2.484 5.934t-5.934 2.484l-28.566 0q0 3.128 2.53 7.774.828 1.61.828 2.622t-1.012 2.07q-1.012 1.012-2.346.966l-26.91 0q-1.38 0-2.392-1.012t-1.012-2.024q0-1.058 1.656-4.14t1.748-6.256l-28.612 0q-3.45 0-5.934-2.484t-2.484-5.934l0-57.224q0-3.45 2.484-5.934t5.934-2.438l84.088 0q3.45 0 5.98 2.438 2.438 2.484 2.438 5.934z",
+    width: 100,
+    height: 86.648,
+};
+export const iconDropdownArrow = {
+    path: "M9 9.8c0 .5.7 1.7 1.5 2.8 1.5 1.9 1.5 1.9 3 0C15.7 9.7 15.4 9 12 9c-1.6 0-3 .4-3 .8z",
+    width: 24,
+    height: 24,
+};
+export const iconExclamationSign = {
+    path: "M58.368 81.225l0-12.369q0-.912-.57-1.539t-1.425-.627l-12.54 0q-.855-.057-1.482.627t-.684 1.539l0 12.369q-.057.855.627 1.482t1.539.684l12.54 0q.855 0 1.425-.627t.57-1.539zm1.026-62.871q0-1.596-2.223-1.71l-14.307 0q-2.109 0-2.223 1.71l1.14 40.47q0 .627.627 1.14t1.539.456l12.084 0q.912-.057 1.539-.513t.684-1.083zm-9.348-18.354q13.566 0 25.08 6.726 11.514 6.669 18.24 18.183t6.726 25.137-6.726 25.137-18.24 18.183-25.08 6.669-25.137-6.726q-11.514-6.726-18.183-18.183-6.726-11.571-6.726-25.137t6.726-25.08 18.24-18.24 25.08-6.669z",
+    width: 100,
+    height: 99.944,
+};
+// Grabbed from https://github.com/encharm/Font-Awesome-SVG-PNG
+export const iconGear = {
+    path: "M1152 896q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm512-109v222q0 12-8 23t-20 13l-185 28q-19 54-39 91 35 50 107 138 10 12 10 25t-9 23q-27 37-99 108t-94 71q-12 0-26-9l-138-108q-44 23-91 38-16 136-29 186-7 28-36 28h-222q-14 0-24.5-8.5t-11.5-21.5l-28-184q-49-16-90-37l-141 107q-10 9-25 9-14 0-25-11-126-114-165-168-7-10-7-23 0-12 8-23 15-21 51-66.5t54-70.5q-27-50-41-99l-183-27q-13-2-21-12.5t-8-23.5v-222q0-12 8-23t19-13l186-28q14-46 39-92-40-57-107-138-10-12-10-24 0-10 9-23 26-36 98.5-107.5t94.5-71.5q13 0 26 10l138 107q44-23 91-38 16-136 29-186 7-28 36-28h222q14 0 24.5 8.5t11.5 21.5l28 184q49 16 90 37l142-107q9-9 24-9 13 0 25 10 129 119 165 170 7 8 7 22 0 12-8 23-15 21-51 66.5t-54 70.5q26 50 41 98l183 28q13 2 21 12.5t8 23.5z",
+    width: 1792,
+    height: 1792,
+};
+export const iconMobilePhone = {
+    path: "M36.04 89.557q0-2.584-1.836-4.42t-4.42-1.836-4.352 1.836q-1.836 1.836-1.836 4.42t1.836 4.352 4.42 1.836q2.652-.068 4.42-1.836t1.768-4.352zm16.184-12.444l0-54.74q0-1.088-.748-1.768t-1.768-.68l-39.78 0q-1.088 0-1.768.748t-.68 1.7l0 54.74q0 1.02.748 1.768t1.7.68l39.78 0q1.02-.068 1.768-.748t.748-1.7zm-14.892-65.892q0-1.224-1.292-1.292l-12.444 0q-1.224.068-1.224 1.292t1.224 1.224l12.444 0q1.292 0 1.292-1.224zm22.372-1.292l0 79.628q0 3.944-2.992 6.936t-7.004 2.992l-39.78 0q-4.012 0-7.004-2.924-2.924-2.924-2.924-7.004l0-79.628q0-4.012 2.924-6.936t7.004-2.992l39.78 0q4.012-.068 7.004 2.924t2.992 7.004z",
+    width: 60.013,
+    height: 100,
+};
+export const iconOk = {
+    path: "M37.964 76.048q-2.576 0-4.368-1.792l-31.864-31.864q-1.792-1.792-1.792-4.368t1.792-4.368l8.736-8.68q1.792-1.792 4.368-1.792t4.312 1.792l18.816 18.872 42-42.056q1.792-1.792 4.368-1.792t4.312 1.792l8.736 8.736q1.792 1.792 1.792 4.368t-1.792 4.312l-55.048 55.048q-1.792 1.792-4.368 1.792z",
+    width: 100,
+    height: 76.637,
+};
+export const iconPlus = {
+    path: "M99.758 43.09l0 13.578q0 2.852-1.984 4.836t-4.836 1.984l-29.45 0l0 29.45q0 2.852-1.984 4.836t-4.836 1.984l-13.578 0q-2.852 0-4.836-1.984t-1.984-4.836l0-29.45l-29.45 0q-2.852 0-4.836-1.984t-1.984-4.836l0-13.578q0-2.852 1.984-4.836t4.836-1.984l29.45 0l0-29.45q0-2.852 1.984-4.836t4.836-1.984l13.578 0q2.852 0 4.836 1.984t1.984 4.836l0 29.45l29.45 0q2.852 0 4.836 1.984t1.984 4.836z",
+    width: 100,
+    height: 100,
+};
+export const iconRemove = {
+    path: "M100.464 80.808q0 3.404-2.368 5.772l-11.47 11.544q-2.368 2.368-5.772 2.368t-5.698-2.368l-24.864-24.864-24.864 24.864q-2.368 2.368-5.772 2.368t-5.772-2.368l-11.47-11.544q-2.368-2.368-2.368-5.772t2.368-5.698l24.864-24.864-24.864-24.864q-2.368-2.368-2.368-5.772t2.368-5.772l11.47-11.47q2.368-2.368 5.772-2.368t5.772 2.368l24.864 24.864 24.864-24.864q2.294-2.368 5.698-2.368t5.772 2.368l11.47 11.47q2.368 2.368 2.368 5.772t-2.368 5.772l-24.864 24.864 24.864 24.864q2.368 2.294 2.368 5.698z",
+    width: 100,
+    height: 100,
+};
+export const iconStar = {
+    path: "M15.1052249,9.55978547 L22.0028147,9.55978545 C23.6568673,9.55978545 23.9349557,10.3753626 22.6181351,11.3858845 L16.9943688,15.7015366 L19.2518801,22.8294455 C19.7526645,24.4106317 19.0984455,24.8825885 17.769353,23.8673293 L12.0490577,19.4977438 L6.5116497,23.8422153 C5.20921411,24.8640642 4.53299569,24.4067544 5.00266927,22.8160582 L7.10332364,15.7015366 L1.42794544,11.3634306 C0.110226041,10.3562014 0.383967283,9.54239221 2.0409646,9.54574013 L8.9924676,9.55978547 L11.1485117,2.72669438 C11.6458693,1.15043244 12.4548928,1.15900049 12.9494787,2.72669438 L15.1052249,9.55978547 Z",
+    width: 24,
+    height: 24,
+};
+export const iconTryAgain = {
+    path: "M3.74890556,17.9799506 C2.19251241,16.1970909 1.10103636,13.4971457 1.13090903,11.1491783 C1.17160478,7.95052637 4.01704076,0.865059407 11.7028044,0.865059407 C19.388568,0.865059407 22.3026521,7.35203035 22.3026521,11.5879453 C22.3026521,15.8238603 19.386629,20.5574509 13.6832464,21.7131548 L13.6757539,17.3722171 C17.0812986,16.2190517 18.331158,14.1944123 18.3311578,11.5879451 C18.3311574,8.16554692 15.6664205,5.03476549 11.7028048,5.20494205 C7.73918903,5.37511861 5.59244567,8.66930079 5.59244567,11.1491783 C5.59244567,12.9090077 6.11128139,14.1753512 6.93640437,15.3053215 L8.14052356,14.2949456 C8.98559348,13.5858477 9.6994861,13.9070448 9.73489556,15.0076413 L9.91284941,20.5388014 C9.94832683,21.6415103 9.09967118,22.3514475 8.02194403,22.1254594 L2.60571602,20.9897332 C1.5259204,20.7633114 1.34338662,19.9984207 2.18070755,19.295825 L3.74890556,17.9799506 Z",
+    width: 23,
+    height: 23,
+};
+export const iconTablet = {
+    path: "M45.322 90.706q0-1.86-1.302-3.224-1.364-1.364-3.224-1.364t-3.224 1.364-1.302 3.224q0 1.86 1.364 3.224 1.302 1.364 3.162 1.302 1.86.062 3.224-1.302t1.302-3.224zm27.218-11.346l0-68.014q0-.93-.682-1.612t-1.55-.682l-58.962 0q-.93 0-1.612.682t-.682 1.612l0 68.014q0 .93.682 1.612t1.612.62l58.962 0q.992-.062 1.612-.682t.62-1.55zm9.114-68.014l0 77.066q0 4.65-3.348 7.998t-7.998 3.348l-58.962 0q-4.65 0-7.998-3.348t-3.348-7.998l0-77.066q0-4.65 3.348-7.998t7.998-3.348l58.962 0q4.65 0 7.998 3.348t3.348 7.998z",
+    width: 81.852,
+    height: 100,
+};
+export const iconTrash = {
+    path: "M31.293 37.506q2.052 0 2.052 2.109l0 37.506q0 1.995-2.052 2.109l-4.218 0q-.912-.057-1.482-.627t-.57-1.482l0-37.506q0-2.109 2.052-2.109l4.218 0zm18.753 2.109l0 37.506q0 .912-.57 1.482t-1.539.627l-4.161 0q-1.995 0-2.109-2.109l0-37.506q.057-.912.627-1.482t1.482-.627l4.161 0q.969.057 1.539.627t.57 1.482zm14.592-2.109q2.052 0 2.052 2.109l0 37.506q0 1.995-2.052 2.109l-4.161 0q-.969-.057-1.539-.627t-.57-1.482l0-37.506q0-2.109 2.109-2.109l4.161 0zm10.431 49.248l0-61.731l-58.368 0l0 61.731q.057 2.679.969 3.819t1.083 1.14l54.207 0q.171 0 1.14-1.083t.969-3.876zm-43.776-70.11l29.184 0l-3.135-7.581q-.456-.57-1.14-.741l-20.634 0q-.627.114-1.083.741zm-31.293 2.109q0-1.995 2.109-2.109l20.121 0l4.56-10.83q.969-2.394 3.477-4.104 2.565-1.71 5.187-1.71l20.805 0q2.622 0 5.187 1.71t3.477 4.104l4.56 10.83l20.178 0q.912.057 1.482.627t.57 1.482l0 4.161q0 1.995-2.052 2.109l-6.27 0l0 61.731q0 5.415-3.078 9.348t-7.353 3.933l-54.207 0q-4.275 0-7.353-3.819t-3.078-9.177l0-62.016l-6.213 0q-.969 0-1.539-.57t-.57-1.539l0-4.161z",
+    width: 91.681,
+    height: 100,
+};
+export const iconUndo = {
+    path: "M10,6.6C10,7.2,9.8,8,9.3,9.1c0,0,0,0.1-0.1,0.1S9.2,9.3,9.2,9.4c0,0,0,0.1-0.1,0.1C9,9.6,9,9.6,8.9,9.6 c-0.1,0-0.1,0-0.1-0.1c0,0,0-0.1,0-0.1c0,0,0-0.1,0-0.1s0-0.1,0-0.1c0-0.3,0-0.5,0-0.7c0-0.4,0-0.7-0.1-1C8.6,7.1,8.5,6.9,8.4,6.7S8.2,6.3,8,6.1C7.8,5.9,7.6,5.8,7.4,5.7S6.9,5.5,6.7,5.5S6.1,5.4,5.8,5.4c-0.3,0-0.6,0-1,0H3.6v1.4c0,0.1,0,0.2-0.1,0.3C3.4,7.1,3.3,7.1,3.2,7.1C3.1,7.1,3,7.1,3,7L0.1,4.1C0,4.1,0,4,0,3.9s0-0.2,0.1-0.3L3,0.8C3,0.7,3.1,0.7,3.2,0.7c0.1,0,0.2,0,0.3,0.1C3.5,0.9,3.6,0.9,3.6,1v1.4h1.2c2.6,0,4.3,0.7,4.9,2.2C9.9,5.2,10,5.8,10,6.6z",
+    width: 10,
+    height: 10,
+};
+export const iconMinus = {
+    path: `M8,13 L16,13 C16.5522847,13 17,12.5522847 17,12 C17,11.4477153 16.5522847,11 16,11 L8,11 C7.44771525,11 7,11.4477153 7,12 C7,12.5522847 7.44771525,13 8,13 Z`,
+    width: 24,
+    height: 24,
+};