@constructor-io/constructorio-ui-quizzes 1.5.2 → 1.7.0

package/lib/cjs/components/CioQuiz/index.js

@@ -11,6 +11,7 @@ const Spinner_1 = tslib_1.__importDefault(require("../Spinner/Spinner"));
 const useQuiz_1 = tslib_1.__importDefault(require("../../hooks/useQuiz"));
 const SessionPromptModal_1 = tslib_1.__importDefault(require("../SessionPromptModal/SessionPromptModal"));
 const utils_1 = require("../../utils");
+const ProgressBar_1 = tslib_1.__importDefault(require("../ProgressBar/ProgressBar"));
 function CioQuiz(props) {
     var _a;
     const { cioClient, state, events: { hydrateQuiz, hasSessionStorageState, resetSessionStorageState }, getAddToCartButtonProps, getAddToFavoritesButtonProps, getCoverQuestionProps, getHydrateQuizButtonProps, getNextQuestionButtonProps, getOpenTextInputProps, getPreviousQuestionButtonProps, getQuizImageProps, getQuizResultButtonProps, getQuizResultLinkProps, getResetQuizButtonProps, getSelectInputProps, primaryColorStyles, } = (0, useQuiz_1.default)(props);
@@ -65,6 +66,7 @@ function CioQuiz(props) {
                 (0, utils_1.convertPrimaryColorsToString)(primaryColorStyles)),
             react_1.default.createElement(SessionPromptModal_1.default, { resetStoredState: resetSessionStorageState, continueSession: hydrateQuiz, showSessionPrompt: showSessionPrompt, setShowSessionPrompt: setShowSessionPrompt }),
             react_1.default.createElement(context_1.default.Provider, { value: contextValue }, state.quiz.results || state.quiz.skipToResults ? (react_1.default.createElement(ResultContainer_1.default, { options: resultsPageOptions })) : (state.quiz.currentQuestion && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(ProgressBar_1.default, null),
                 react_1.default.createElement(QuizQuestions_1.default, null),
                 react_1.default.createElement(ControlBar_1.default, { ctaButtonText: (questionData === null || questionData === void 0 ? void 0 : questionData.cta_text) || undefined })))))));
     }

package/lib/cjs/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
+function ProgressBar() {
+    const { state } = (0, react_1.useContext)(context_1.default);
+    const currentQuestion = state === null || state === void 0 ? void 0 : state.quiz.currentQuestion;
+    if (!currentQuestion)
+        return null;
+    return (react_1.default.createElement("div", { className: 'cio-question-progress-affixed-container' },
+        react_1.default.createElement("div", { className: 'cio-question-progress-progress-container' },
+            react_1.default.createElement("div", { className: 'cio-question-progress-progress-bar', style: {
+                    width: `${((currentQuestion.next_question.id - 1) / currentQuestion.total_questions) * 100}%`,
+                } }))));
+}
+exports.default = ProgressBar;

package/lib/cjs/components/ResultContainer/ResultContainer.js

@@ -13,7 +13,8 @@ function ResultContainer(props) {
     const { options } = props;
     const { resultCardSalePriceKey, resultCardRegularPriceKey, resultCardRatingCountKey, resultCardRatingScoreKey, renderResultCardPriceDetails, } = options;
     const { state } = (0, react_1.useContext)(context_1.default);
-    const zeroResults = !((_c = (_b = (_a = state === null || state === void 0 ? void 0 : state.quiz.results) === null || _a === void 0 ? void 0 : _a.response) === null || _b === void 0 ? void 0 : _b.results) === null || _c === void 0 ? void 0 : _c.length);
+    const numberOfResults = (_c = (_b = (_a = state === null || state === void 0 ? void 0 : state.quiz.results) === null || _a === void 0 ? void 0 : _a.response) === null || _b === void 0 ? void 0 : _b.results) === null || _c === void 0 ? void 0 : _c.length;
+    const zeroResults = !numberOfResults;
     const resultsTitle = zeroResults ? '' : 'Here are your results';
     if (state === null || state === void 0 ? void 0 : state.quiz.results) {
         return (react_1.default.createElement("div", { className: 'cio-results-container' },
@@ -21,7 +22,12 @@ function ResultContainer(props) {
             react_1.default.createElement("div", { className: 'cio-results-filter-and-redo-container' },
                 react_1.default.createElement(ResultFilters_1.default, { hasNoResults: zeroResults }),
                 react_1.default.createElement(RedoButton_1.default, null)),
-            !zeroResults && (react_1.default.createElement(Results_1.default, { resultCardSalePriceKey: resultCardSalePriceKey, resultCardRegularPriceKey: resultCardRegularPriceKey, resultCardRatingCountKey: resultCardRatingCountKey, resultCardRatingScoreKey: resultCardRatingScoreKey, renderResultCardPriceDetails: renderResultCardPriceDetails })),
+            !zeroResults && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("div", { className: 'cio-results-num-results' },
+                    numberOfResults,
+                    " ",
+                    numberOfResults === 1 ? 'result' : 'results'),
+                react_1.default.createElement(Results_1.default, { resultCardSalePriceKey: resultCardSalePriceKey, resultCardRegularPriceKey: resultCardRegularPriceKey, resultCardRatingCountKey: resultCardRatingCountKey, resultCardRatingScoreKey: resultCardRatingScoreKey, renderResultCardPriceDetails: renderResultCardPriceDetails }))),
             zeroResults && react_1.default.createElement(ZeroResults_1.default, null)));
     }
     return (react_1.default.createElement("div", { className: 'cio-results-container' },

package/lib/cjs/constants.js

@@ -22,6 +22,7 @@ exports.componentDescription = `- import \`CioQuiz\` to render in your JSX.
   - \`resultCardRatingCountKey\` is an optional parameter that specifies the metadata field name for the ratings count 
   - \`resultCardRatingScoreKey\` is an optional parameter that specifies the metadata field name for the ratings score 
   - \`renderResultCardPriceDetails\` is an optional render function to render custom prices section in result card 
+  - \`numResultsToDisplay\` is an optional parameter that determines how many results should be displayed on results page
 - \`sessionStateOptions\` lets you configure the session modal behavior
   - \`showSessionModal\` is a boolean used to decide whether to show the session modal. The default behavior is to show the session modal
   - \`showSessionModalOnResults\` is a boolean to decide whether to show the session modal after reaching the results page. The default behavior is to not show the session modal

package/lib/cjs/services/index.js

@@ -20,7 +20,16 @@ const getQuizResults = (cioClient, quizId, parameters) => tslib_1.__awaiter(void
 exports.getQuizResults = getQuizResults;
 // Tracking requests
 const trackQuizResultsLoaded = (cioClient, quizResults) => {
+    var _a;
     const { quiz_id, quiz_session_id, quiz_version_id, result_id, request, response } = quizResults;
+    const items = (_a = response === null || response === void 0 ? void 0 : response.results) === null || _a === void 0 ? void 0 : _a.map((result) => {
+        var _a, _b;
+        return ({
+            itemId: (_a = result === null || result === void 0 ? void 0 : result.data) === null || _a === void 0 ? void 0 : _a.id,
+            variationId: (_b = result === null || result === void 0 ? void 0 : result.data) === null || _b === void 0 ? void 0 : _b.variation_id,
+            itemName: result === null || result === void 0 ? void 0 : result.value,
+        });
+    });
     cioClient === null || cioClient === void 0 ? void 0 : cioClient.tracker.trackQuizResultsLoaded({
         quizId: quiz_id,
         quizVersionId: quiz_version_id,
@@ -30,6 +39,7 @@ const trackQuizResultsLoaded = (cioClient, quizResults) => {
         resultCount: response === null || response === void 0 ? void 0 : response.total_num_results,
         resultPage: request === null || request === void 0 ? void 0 : request.page,
         resultId: result_id,
+        items,
     });
 };
 exports.trackQuizResultsLoaded = trackQuizResultsLoaded;

package/lib/cjs/stories/Quiz/tests/mocks.js

@@ -64,6 +64,7 @@ const getMockState = (question) => ({
             isSingleQuestion: (question === null || question === void 0 ? void 0 : question.type) === 'single',
             isMultipleQuestion: (question === null || question === void 0 ? void 0 : question.type) === 'multiple',
             isSelectQuestion: (question === null || question === void 0 ? void 0 : question.type) === 'single',
+            total_questions: 1,
         },
         results: {
             response: {

package/lib/mjs/components/CioQuiz/index.js

@@ -8,6 +8,7 @@ import Spinner from '../Spinner/Spinner';
 import useQuiz from '../../hooks/useQuiz';
 import SessionPromptModal from '../SessionPromptModal/SessionPromptModal';
 import { convertPrimaryColorsToString, renderImages } from '../../utils';
+import ProgressBar from '../ProgressBar/ProgressBar';
 export default function CioQuiz(props) {
     const { cioClient, state, events: { hydrateQuiz, hasSessionStorageState, resetSessionStorageState }, getAddToCartButtonProps, getAddToFavoritesButtonProps, getCoverQuestionProps, getHydrateQuizButtonProps, getNextQuestionButtonProps, getOpenTextInputProps, getPreviousQuestionButtonProps, getQuizImageProps, getQuizResultButtonProps, getQuizResultLinkProps, getResetQuizButtonProps, getSelectInputProps, primaryColorStyles, } = useQuiz(props);
     const [showSessionPrompt, setShowSessionPrompt] = useState(false);
@@ -61,6 +62,7 @@ export default function CioQuiz(props) {
                 convertPrimaryColorsToString(primaryColorStyles)),
             React.createElement(SessionPromptModal, { resetStoredState: resetSessionStorageState, continueSession: hydrateQuiz, showSessionPrompt: showSessionPrompt, setShowSessionPrompt: setShowSessionPrompt }),
             React.createElement(QuizContext.Provider, { value: contextValue }, state.quiz.results || state.quiz.skipToResults ? (React.createElement(ResultContainer, { options: resultsPageOptions })) : (state.quiz.currentQuestion && (React.createElement(React.Fragment, null,
+                React.createElement(ProgressBar, null),
                 React.createElement(QuizQuestions, null),
                 React.createElement(ControlBar, { ctaButtonText: questionData?.cta_text || undefined })))))));
     }

package/lib/mjs/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,13 @@
+import React, { useContext } from 'react';
+import QuizContext from '../CioQuiz/context';
+export default function ProgressBar() {
+    const { state } = useContext(QuizContext);
+    const currentQuestion = state?.quiz.currentQuestion;
+    if (!currentQuestion)
+        return null;
+    return (React.createElement("div", { className: 'cio-question-progress-affixed-container' },
+        React.createElement("div", { className: 'cio-question-progress-progress-container' },
+            React.createElement("div", { className: 'cio-question-progress-progress-bar', style: {
+                    width: `${((currentQuestion.next_question.id - 1) / currentQuestion.total_questions) * 100}%`,
+                } }))));
+}

package/lib/mjs/components/ResultContainer/ResultContainer.js

@@ -9,7 +9,8 @@ export default function ResultContainer(props) {
     const { options } = props;
     const { resultCardSalePriceKey, resultCardRegularPriceKey, resultCardRatingCountKey, resultCardRatingScoreKey, renderResultCardPriceDetails, } = options;
     const { state } = useContext(QuizContext);
-    const zeroResults = !state?.quiz.results?.response?.results?.length;
+    const numberOfResults = state?.quiz.results?.response?.results?.length;
+    const zeroResults = !numberOfResults;
     const resultsTitle = zeroResults ? '' : 'Here are your results';
     if (state?.quiz.results) {
         return (React.createElement("div", { className: 'cio-results-container' },
@@ -17,7 +18,12 @@ export default function ResultContainer(props) {
             React.createElement("div", { className: 'cio-results-filter-and-redo-container' },
                 React.createElement(ResultFilters, { hasNoResults: zeroResults }),
                 React.createElement(RedoButton, null)),
-            !zeroResults && (React.createElement(Results, { resultCardSalePriceKey: resultCardSalePriceKey, resultCardRegularPriceKey: resultCardRegularPriceKey, resultCardRatingCountKey: resultCardRatingCountKey, resultCardRatingScoreKey: resultCardRatingScoreKey, renderResultCardPriceDetails: renderResultCardPriceDetails })),
+            !zeroResults && (React.createElement(React.Fragment, null,
+                React.createElement("div", { className: 'cio-results-num-results' },
+                    numberOfResults,
+                    " ",
+                    numberOfResults === 1 ? 'result' : 'results'),
+                React.createElement(Results, { resultCardSalePriceKey: resultCardSalePriceKey, resultCardRegularPriceKey: resultCardRegularPriceKey, resultCardRatingCountKey: resultCardRatingCountKey, resultCardRatingScoreKey: resultCardRatingScoreKey, renderResultCardPriceDetails: renderResultCardPriceDetails }))),
             zeroResults && React.createElement(ZeroResults, null)));
     }
     return (React.createElement("div", { className: 'cio-results-container' },

package/lib/mjs/constants.js

@@ -19,6 +19,7 @@ export const componentDescription = `- import \`CioQuiz\` to render in your JSX.
   - \`resultCardRatingCountKey\` is an optional parameter that specifies the metadata field name for the ratings count 
   - \`resultCardRatingScoreKey\` is an optional parameter that specifies the metadata field name for the ratings score 
   - \`renderResultCardPriceDetails\` is an optional render function to render custom prices section in result card 
+  - \`numResultsToDisplay\` is an optional parameter that determines how many results should be displayed on results page
 - \`sessionStateOptions\` lets you configure the session modal behavior
   - \`showSessionModal\` is a boolean used to decide whether to show the session modal. The default behavior is to show the session modal
   - \`showSessionModalOnResults\` is a boolean to decide whether to show the session modal after reaching the results page. The default behavior is to not show the session modal

package/lib/mjs/services/index.js

@@ -14,6 +14,11 @@ export const getQuizResults = async (cioClient, quizId, parameters) => cioClient
 // Tracking requests
 export const trackQuizResultsLoaded = (cioClient, quizResults) => {
     const { quiz_id, quiz_session_id, quiz_version_id, result_id, request, response } = quizResults;
+    const items = response?.results?.map((result) => ({
+        itemId: result?.data?.id,
+        variationId: result?.data?.variation_id,
+        itemName: result?.value,
+    }));
     cioClient?.tracker.trackQuizResultsLoaded({
         quizId: quiz_id,
         quizVersionId: quiz_version_id,
@@ -23,6 +28,7 @@ export const trackQuizResultsLoaded = (cioClient, quizResults) => {
         resultCount: response?.total_num_results,
         resultPage: request?.page,
         resultId: result_id,
+        items,
     });
 };
 export const trackQuizResultClick = (cioClient, quizResults, result, position) => {

package/lib/mjs/stories/Quiz/tests/mocks.js

@@ -76,6 +76,7 @@ export const getMockState = (question) => ({
             isSingleQuestion: question?.type === 'single',
             isMultipleQuestion: question?.type === 'multiple',
             isSelectQuestion: question?.type === 'single',
+            total_questions: 1,
         },
         results: {
             response: {

package/lib/styles.css

@@ -395,6 +395,35 @@
   margin-bottom: -1rem;
 }
 
+/* Affixed progress bar */
+.cio-quiz .cio-question-progress-affixed-container {
+  position: fixed;
+  top: 8px;
+  right: 16px;
+  z-index: 100;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 7px;
+  font-size: 0.75rem;
+  padding: 8px;
+  color: white;
+  mix-blend-mode: difference;
+}
+.cio-quiz .cio-question-progress-progress-container {
+  width: 100px;
+  border-color: white;
+  height: 6px;
+  border-width: 1px;
+  border-style: solid;
+  background: transparent;
+  border-radius: 4px;
+}
+.cio-quiz .cio-question-progress-progress-bar {
+  background: white;
+  height: 100%;
+}
+
 /* Results component */
 .cio-quiz .cio-results-container {
   width: 100%;
@@ -434,6 +463,13 @@
   align-items: center;
   font-size: 0.75rem;
 }
+.cio-quiz .cio-results-num-results {
+  margin-top: 2.75rem;
+  font-family: 'Inter', sans-serif;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: var(--gray-dust-500);
+}
 .cio-quiz .cio-results {
   display: flex;
   flex-direction: row;
@@ -738,7 +774,6 @@
     flex-wrap: wrap;
     justify-content: center;
     margin-bottom: 2rem;
-    margin-top: 0;
   }
   .cio-quiz .cio-question-option-container-text-only {
     margin: 0;

package/lib/types/components/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function ProgressBar(): JSX.Element | null;

package/lib/types/constants.d.ts

@@ -1,7 +1,7 @@
 export declare const apiKey = "key_wJSdZSiesX5hiVLt";
 export declare const quizId = "coffee-quiz";
 export declare const quizSessionStateKey = "constructorIOQuizState";
-export declare const componentDescription = "- import `CioQuiz` to render in your JSX.\n- This component handles state management, data fetching, and rendering logic.\n- To use this component, `quizId`, `resultsPageOptions`, and one of `apiKey` or `cioJsClient` are required.\n- `resultsPageOptions` lets you configure the results page\n  - `onAddToCartClick` is a callback function that will be called when the \"Add to cart\" button is clicked\n  - `onAddToFavoritesClick` is an optional callback function that will be called when the \"Add To Favorites\" heart icon is clicked\n  - `onQuizResultClick` is an optional callback function that will be called when the result card is clicked. The default behavior is redirecting the user to the item's URL\n  - `onQuizResultsLoaded` is an optional callback function that will be called when the quiz results are loaded\n  - `resultCardRegularPriceKey` is a parameter that specifies the metadata field name for the regular price\n  - `resultCardSalePriceKey` is an optional parameter that specifies the metadata field name for the sale price \n  - `resultCardRatingCountKey` is an optional parameter that specifies the metadata field name for the ratings count \n  - `resultCardRatingScoreKey` is an optional parameter that specifies the metadata field name for the ratings score \n  - `renderResultCardPriceDetails` is an optional render function to render custom prices section in result card \n- `sessionStateOptions` lets you configure the session modal behavior\n  - `showSessionModal` is a boolean used to decide whether to show the session modal. The default behavior is to show the session modal\n  - `showSessionModalOnResults` is a boolean to decide whether to show the session modal after reaching the results page. The default behavior is to not show the session modal\n  - `sessionStateKey` is a custom string that will be used as a session storage key\n- Use different props to configure the behavior of this component.\n- The following stories show how different props affect the component's behavior\n\n> Note: `cioJsClient` refers to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)\n";
+export declare const componentDescription = "- import `CioQuiz` to render in your JSX.\n- This component handles state management, data fetching, and rendering logic.\n- To use this component, `quizId`, `resultsPageOptions`, and one of `apiKey` or `cioJsClient` are required.\n- `resultsPageOptions` lets you configure the results page\n  - `onAddToCartClick` is a callback function that will be called when the \"Add to cart\" button is clicked\n  - `onAddToFavoritesClick` is an optional callback function that will be called when the \"Add To Favorites\" heart icon is clicked\n  - `onQuizResultClick` is an optional callback function that will be called when the result card is clicked. The default behavior is redirecting the user to the item's URL\n  - `onQuizResultsLoaded` is an optional callback function that will be called when the quiz results are loaded\n  - `resultCardRegularPriceKey` is a parameter that specifies the metadata field name for the regular price\n  - `resultCardSalePriceKey` is an optional parameter that specifies the metadata field name for the sale price \n  - `resultCardRatingCountKey` is an optional parameter that specifies the metadata field name for the ratings count \n  - `resultCardRatingScoreKey` is an optional parameter that specifies the metadata field name for the ratings score \n  - `renderResultCardPriceDetails` is an optional render function to render custom prices section in result card \n  - `numResultsToDisplay` is an optional parameter that determines how many results should be displayed on results page\n- `sessionStateOptions` lets you configure the session modal behavior\n  - `showSessionModal` is a boolean used to decide whether to show the session modal. The default behavior is to show the session modal\n  - `showSessionModalOnResults` is a boolean to decide whether to show the session modal after reaching the results page. The default behavior is to not show the session modal\n  - `sessionStateKey` is a custom string that will be used as a session storage key\n- Use different props to configure the behavior of this component.\n- The following stories show how different props affect the component's behavior\n\n> Note: `cioJsClient` refers to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)\n";
 export declare const hookDescription = "- import `useCioQuiz` and call this custom hook in a functional component.\n- This hook leaves rendering logic up to you, while handling:\n  - state management\n  - data fetching\n  - keyboard navigation\n  - mouse interactions\n  - focus and submit event handling\n- Since the markup is controlled by you, the default styles might not be applied if you have a different DOM structure\n- To use this hook, an `apiKey` and `quizId` are required, and `resultsPageOptions` must be passed to the `useCioQuiz` hook to configure behavior. All other values are optional.\n- use the <a href=\"https://kentcdodds.com/blog/how-to-give-rendering-control-to-users-with-prop-getters\" target=\"__blank\">prop getters</a> and other variables returned by this hook (below) to leverage the functionality described above with jsx elements in your react component definitions\n\nCalling the `useCioQuiz` hook returns an object with the following keys:\n\n```jsx\nconst {\n  // must be used for a hooks integrations\n  state: QuizReturnState, // Quiz state\n  events: [{...}], // array of quiz events\n  getAddToCartButtonProps: () => ({...})), // prop getter for jsx add to cart button for quiz result,\n  getAddToFavoritesButtonProps: () => ({...})), // prop getter for jsx add to favorites button for quiz result,\n  getCoverQuestionProps: () => ({...})), // prop getter for jsx quiz cover question,\n  getHydrateQuizButtonProps: () => ({...})), // prop getter for jsx hydrate quiz button,\n  getNextQuestionButtonProps: () => ({...})), // prop getter for jsx next button to traverse the quiz,\n  getPreviousQuestionButtonProps: () => ({...})), // prop getter for jsx back button to traverse the quiz, \n  getOpenTextInputProps: () => ({...})), // prop getter for jsx open text input,\n  getSelectInputProps: () => ({...})), // prop getter for jsx select input for select type questions,\n  getQuizImageProps: () => ({...})), // prop getter for jsx quiz image,\n  getQuizResultButtonProps: () => ({...})), // prop getter for jsx result card click as a button,\n  getQuizResultLinkProps: () => ({...})), // prop getter for jsx result card click as a link. Should be spread into <a> tags,\n  getResetQuizButtonProps: () => ({...})), // prop getter for jsx reset quiz button,\n  cioClient, // instance of constructorio-client-javascript\n } = useCioQuiz(args);\n```\n\n> Note: when we say `cioClient`, we are referring to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)\n";
 export declare const basicDescription = "Pass an `apiKey` and a `quizId` to request questions and quiz results from Constructor's servers";
 export declare const cioJsClientDescription = "If you are already using an instance of the `ConstructorIOClient`, you can pass a `cioJsClient` instead of an `apiKey` to request results from Constructor's servers\n\n> Note: `cioJsClient` refers to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-quizzes",
-  "version": "1.5.2",
+  "version": "1.7.0",
   "description": "Constructor.io Quizzes UI library for web applications",
   "author": "constructor.io",
   "license": "MIT",
@@ -58,7 +58,7 @@
     "check-license": "license-checker --production --onlyAllow 'Apache-2.0;BSD-3-Clause;MIT;0BSD;BSD-2-Clause' --excludePackages 'picocolors@1.0.0'"
   },
   "peerDependencies": {
-    "@constructor-io/constructorio-client-javascript": "^2.35.14",
+    "@constructor-io/constructorio-client-javascript": "^2.35.17",
     "react": ">=16.12.0",
     "react-dom": ">=16.12.0",
     "tslib": "^2.4.0"