@pocketprep/ui-kit 3.4.56 → 3.4.58

package/lib/components/Buttons/Button.vue

@@ -45,7 +45,7 @@ import { dark } from '../../directives'
 
 type TButtonType = 'primary' | 'primary-yellow' | 'primary-red' | 'secondary' 
 | 'secondary-yellow-dark' | 'tertiary' | 'tertiary-red' | 'tertiary-small' | 'tertiary-red-small' | 'icon' 
-| 'icon-yellow'
+| 'icon-yellow' | 'outline'
 
 @Component({
     components: {
@@ -115,6 +115,7 @@ export default class Button extends Vue {
     &--primary,
     &--primary-yellow,
     &--primary-red,
+    &--outline,
     &--secondary,
     &--secondary-yellow-dark {
         font-size: 15px;
@@ -142,7 +143,7 @@ export default class Button extends Vue {
         }
 
         &--dark:enabled:focus::before {
-            border-color: $butterscotch;
+            border-color: $banana-bread;
         }
     }
 
@@ -233,6 +234,48 @@ export default class Button extends Vue {
         }
     }
 
+    &--outline {
+        background-color: $white;
+        color: $brand-blue;
+        font-size: 15px;
+        font-weight: 600;
+        border: 1px solid $brand-blue;
+
+        &:enabled {
+            &:hover,
+            &:active {
+                background-color: $pearl;
+            }
+
+            &:focus::before {
+                content: '';
+                position: absolute;
+                top: -3px;
+                bottom: -3px;
+                left: -3px;
+                right: -3px;
+                border-radius: 6px;
+            }
+        }
+
+        &:disabled {
+            opacity: 0.4;
+        }
+
+        &--dark {
+            background-color: $charcoal;
+            color: $banana-bread;
+            border-color: $banana-bread;
+
+            &:enabled {
+                &:hover,
+                &:active {
+                    background-color: $mariner;
+                }
+            }
+        }
+    }
+
     &--secondary {
         background-color: transparent;
         color: $brand-blue;

package/lib/components/Forms/Radio.vue

@@ -43,6 +43,7 @@
             >
                 <slot name="radioItem" :item="item">
                     <RadioButton
+                        class="uikit-radio__item-btn"
                         :selected="!!(modelValue && item.value === modelValue.value)"
                         :disabled="!!(disabled || item.disabled)"
                         :isDarkMode="isDarkMode"
@@ -248,66 +249,8 @@ export default class Radio extends Vue {
     }
 
     &__item-btn {
-        width: 18px;
-        height: 18px;
+        min-width: 18px;
         margin-right: 12px;
-        border: 1px solid $steel;
-        background: $white;
-        border-radius: 18px;
-        position: relative;
-        box-sizing: border-box;
-
-        &::before {
-            content: '';
-            position: absolute;
-            left: 50%;
-            top: 50%;
-            transform: translate(-50%, -50%);
-            width: 12px;
-            height: 12px;
-            border-radius: 12px;
-            background: $brand-blue;
-            display: none;
-        }
-
-        &--dark {
-            background-color: transparent;
-            border-color: $pewter;
-
-            &::before {
-                background: $banana-bread;
-            }
-        }
-
-        &--disabled {
-            background-color: $fog;
-            opacity: 0.6;
-            border-color: rgba($steel, 0.6);
-
-            &--dark {
-                background-color: $moonlit-ocean;
-                border-color: $slate;
-                opacity: 1;
-            }
-        }
-
-        &--selected {
-            border-color: $brand-blue;
-            background: transparent;
-
-            &--dark {
-                border-color: $banana-bread;
-            }
-
-            &--disabled {
-                opacity: 0.4;
-                
-            }
-
-            &::before {
-                display: block;
-            }
-        }
     }
 }
 </style>

package/lib/components/Quiz/Question/ChoicesContainer.vue

@@ -171,7 +171,10 @@
                     @click="handleClick"
                 >
                     <template #explanationTopExperiment>
-                        <slot name="explanationTopExperiment"></slot>
+                        <slot name="explanationTopExperiment" />
+                    </template>
+                    <template #explanationBottomExperiment>
+                        <slot name="explanationBottomExperiment" />
                     </template>
                 </DropdownExplanation>
             </div>

package/lib/components/Quiz/Question/DropdownExplanation.vue

@@ -65,6 +65,7 @@
             <span class="uikit-question-dropdown-explanation__dropdown-reference-label">Reference: </span>
             <div v-html="reference" />
         </div>
+        <slot name="explanationBottomExperiment" />
     </div>
 </template>
 

package/lib/components/Quiz/Question/Explanation.vue

@@ -13,7 +13,7 @@
         >
             Explanation Details
         </div>
-        <slot name="explanationTopExperiment"></slot>
+        <slot name="explanationTopExperiment" />
         <div
             v-dark="isDarkMode"
             v-breakpoint:questionEl="breakpoints"
@@ -70,6 +70,7 @@
             <span class="uikit-question-explanation__reference-label">Reference: </span>
             <div v-html="reference" />
         </div>
+        <slot name="explanationBottomExperiment" />
         <div
             v-if="!reviewMode"
             v-dark="isDarkMode"

package/lib/components/Quiz/Question/MatrixChoicesContainer.vue

@@ -49,7 +49,7 @@
                 class="uikit-question-matrix-choices-container__choices"
                 :class="{
                     'uikit-question-matrix-choices-container__choices--two-columns': 
-                        numberOfMatrixColumnLabels === 2 
+                        numberOfMatrixColumnLabels === 2
                 }"
                 v-dark="isDarkMode"
                 v-breakpoint:questionEl="breakpoints"
@@ -60,7 +60,7 @@
                     class="uikit-question-matrix-choices-container__choice-text"
                     :class="{
                         'uikit-question-matrix-choices-container__choice-text--two-columns': 
-                            numberOfMatrixColumnLabels === 2 
+                            numberOfMatrixColumnLabels === 2
                     }"
                     v-dark="isDarkMode"
                     v-breakpoint:questionEl="breakpoints"
@@ -90,20 +90,33 @@
                             :is-dark-mode="isDarkMode"
                             :disabled="showMatrixAnswers || reviewMode"
                             :checkbox-check-styles="checkboxCheckStyling(rowIndex, columnIndex)"
-                        />
-                        <Checkbox
-                            v-else
-                            v-model="matrixCheckboxGrid[rowIndex][columnIndex]"
-                            :is-dark-mode="isDarkMode"
-                            :disabled="showMatrixAnswers || reviewMode"
                             :checkbox-styles="checkboxContainerStyling(rowIndex, columnIndex)"
                         />
+                        <div 
+                            v-else 
+                            class="uikit-question-matrix-choices-container__clickable-checkbox"
+                            :class="{
+                                'uikit-question-matrix-choices-container__clickable-checkbox--review': 
+                                    showMatrixAnswers || reviewMode 
+                            }"
+                            @click="!(showMatrixAnswers || reviewMode) && checkboxClicked(rowIndex, columnIndex)"
+                            @keypress.enter="!(showMatrixAnswers || reviewMode) && 
+                                checkboxClicked(rowIndex, columnIndex)"
+                        >
+                            <Checkbox
+                                :model-value="matrixCheckboxGrid[rowIndex][columnIndex]"
+                                :is-dark-mode="isDarkMode"
+                                :disabled="showMatrixAnswers || reviewMode"
+                                :checkbox-styles="checkboxContainerStyling(rowIndex, columnIndex)"
+                            />
+                        </div>
                         <Icon
                             v-if="
                                 (showMatrixAnswers || reviewMode) && 
                                     (incorrectlySelectedChoice(rowIndex, columnIndex) ||
                                         correctAnswerButNotSelected(rowIndex, columnIndex))"
                             class="uikit-question-matrix-choices-container__incorrect-answer-icon"
+                            v-dark="isDarkMode"
                             type="incorrect"
                         />
                     </div>
@@ -130,11 +143,13 @@
                             <template v-if="optionIcon.isVisible">
                                 <Icon
                                     v-if="optionIcon.isCorrect"
+                                    v-dark="isDarkMode"
                                     type="correct"
                                     class="uikit-question-matrix-choices-container__correct-answer-icon"
                                 />
                                 <Icon
                                     v-else
+                                    v-dark="isDarkMode"
                                     type="incorrect"
                                     class="uikit-question-matrix-choices-container__incorrect-answer-icon"
                                 />
@@ -333,6 +348,13 @@ export default class MatrixChoicesContainer extends Vue {
                 border: `1px solid ${this.brandColors.steel} !important`,
             }
         }
+
+        if (isReviewMode && this.correctAnswerButNotSelected(rowIndex, columnIndex)) {
+            return {
+                background: 'transparent !important',
+                border: `1px solid ${this.brandColors.slate} !important`,
+            }
+        }
     }
 
     checkboxCheckStyling (rowIndex: number, columnIndex: number) {
@@ -345,6 +367,12 @@ export default class MatrixChoicesContainer extends Vue {
         }
     }
 
+    checkboxClicked (rowIndex: number, columnIndex: number) {
+        if (this.matrixCheckboxGrid && this.matrixCheckboxGrid[rowIndex]) {
+            this.matrixCheckboxGrid[rowIndex][columnIndex] = !this.matrixCheckboxGrid[rowIndex][columnIndex]
+        }
+    }
+
     @Emit('emitSelectedMatrixChoice')
     emitSelectedMatrixChoice (matrixChoiceKeys: TMatrixChoiceKey[]) {
         return matrixChoiceKeys
@@ -426,7 +454,7 @@ export default class MatrixChoicesContainer extends Vue {
     &__columns {
         display: flex;
         padding: 0px 1px 0px 14px;
-        align-items: center;
+        align-items: flex-end;
         width: 100%;
         height: 32px;
         margin-bottom: 16px;
@@ -464,7 +492,7 @@ export default class MatrixChoicesContainer extends Vue {
         hyphens: auto;
 
         &:not(:last-child) {
-            margin-right: 8px;
+            margin-right: 11px;
         }
 
         &--tablet-landscape {
@@ -473,6 +501,12 @@ export default class MatrixChoicesContainer extends Vue {
             }
         }
 
+        &--tablet-portrait {
+            &:not(:last-child) {
+                margin-right: 14px;
+            }
+        }
+
         &--two-columns {
             &:not(:last-child) {
                 margin-right: 24px;
@@ -533,7 +567,7 @@ export default class MatrixChoicesContainer extends Vue {
         padding: 12px 10px 12px 14px;
         position: relative;
         transition: 0.1s padding ease;
-        align-items: center;
+        align-items: flex-start;
         gap: 16px;
         margin-bottom: 9px;
 
@@ -586,7 +620,6 @@ export default class MatrixChoicesContainer extends Vue {
     &__checkbox {
         width: 56px;
         display: flex;
-        align-items: center;
 
         &--two-columns {
             width: 80px;
@@ -597,18 +630,46 @@ export default class MatrixChoicesContainer extends Vue {
         }
     }
 
+    &__clickable-checkbox {
+        width: 36px;
+        height: 36px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: -8px;
+        margin-left: -8px;
+
+        &--review {
+            cursor: default;
+            display: block;
+            margin-top: 0;
+            margin-left: 0;
+            width: 20px;
+        }
+    }
+
     &__correct-answer-icon {
         margin-left: 6px;
         width: 21px;
         height: 22px;
         color: $cadaverous;
+
+        &--dark {
+            color: $jungle-green;
+        }
     }
 
     &__incorrect-answer-icon {
         margin-left: 6px;
+        margin-top: -2px;
         width: 21px;
         height: 22px;
         color: $pepper;
+
+        &--dark {
+            color: $rosa;
+        }
     }
 }
 </style>

package/lib/components/Quiz/Question/MobileMatrixChoicesContainer.vue

@@ -34,11 +34,13 @@
                 >
                     <Icon
                         v-if="(showMatrixAnswers || reviewMode) && correctRow(rowIndex)"
+                        v-dark="isDarkMode"
                         class="uikit-question-mobile-matrix-choices-container__row-label-correct-icon"   
                         type="check"
                     />
                     <Icon
                         v-if="(showMatrixAnswers || reviewMode) && !correctRow(rowIndex)"
+                        v-dark="isDarkMode"
                         class="uikit-question-mobile-matrix-choices-container__row-label-incorrect-icon"   
                         type="incorrect"
                     />
@@ -80,7 +82,6 @@
                                             stripText(selectedColumnHeaders[rowIndex][colHeaderIndex]) : 
                                             `${stripText(selectedColumnHeaders[rowIndex][colHeaderIndex])},`
                                     }}
-
                                 </div>
                             </template>
                         </div>
@@ -98,6 +99,8 @@
                         v-dark="isDarkMode"
                         v-for="(column, columnIndex) in matrixColumnLabels"
                         :key="columnIndex"
+                        @click="checkboxRowClicked(rowIndex, columnIndex)"
+                        @keypress.enter="checkboxRowClicked(rowIndex, columnIndex)"
                     >
                         <Checkbox
                             v-if="(showMatrixAnswers || reviewMode) &&
@@ -106,10 +109,11 @@
                             :is-dark-mode="isDarkMode"
                             :disabled="showMatrixAnswers || reviewMode"
                             :checkbox-check-styles="checkboxCheckStyling(rowIndex, columnIndex)"
+                            :checkbox-styles="checkboxContainerStyling(rowIndex, columnIndex)"
                         />
                         <Checkbox
                             v-else
-                            v-model="matrixCheckboxGrid[rowIndex][columnIndex]"
+                            :model-value="matrixCheckboxGrid[rowIndex][columnIndex]"
                             :is-dark-mode="isDarkMode"
                             :disabled="showMatrixAnswers || reviewMode"
                             :checkbox-styles="checkboxContainerStyling(rowIndex, columnIndex)"
@@ -251,9 +255,9 @@ export default class MobileMatrixChoicesContainer extends Vue {
         }
     }
 
-    selectedChoiceKey (rowIndex: number, colIndex: number) {
+    selectedChoiceKey (rowIndex: number, columnIndex: number) {
         const row = rowIndex += 1
-        const column = colIndex += 1
+        const column = columnIndex += 1
         if (this.selectedMatrixChoices.length && this.matrixAnswerKeys.length) {
             const matrixSelectedChoiceKey = this.selectedMatrixChoices.find((choice) => {
                 const substring = choice.substring(1)
@@ -289,9 +293,9 @@ export default class MobileMatrixChoicesContainer extends Vue {
         }
     }
 
-    correctlySelectedChoice (rowIndex: number, colIndex: number) {
+    correctlySelectedChoice (rowIndex: number, columnIndex: number) {
         if (this.selectedMatrixChoices && this.matrixAnswerKeys) {
-            const selectedChoice = this.selectedChoiceKey(rowIndex, colIndex)
+            const selectedChoice = this.selectedChoiceKey(rowIndex, columnIndex)
             if (selectedChoice && selectedChoice.startsWith('a') && this.matrixAnswerKeys.includes(selectedChoice)) {
                 return true
             }
@@ -299,9 +303,9 @@ export default class MobileMatrixChoicesContainer extends Vue {
         return false
     }
 
-    incorrectlySelectedChoice (rowIndex: number, colIndex: number) {
+    incorrectlySelectedChoice (rowIndex: number, columnIndex: number) {
         if (this.selectedMatrixChoices && this.matrixAnswerKeys) {
-            const selectedChoice = this.selectedChoiceKey(rowIndex, colIndex)
+            const selectedChoice = this.selectedChoiceKey(rowIndex, columnIndex)
             if (selectedChoice && selectedChoice.startsWith('d')) {
                 return true
             }
@@ -309,9 +313,9 @@ export default class MobileMatrixChoicesContainer extends Vue {
         return false
     }
                         
-    correctAnswerButNotSelected (rowIndex: number, colIndex: number) {
-        const selectedChoice = this.selectedChoiceKey(rowIndex, colIndex)
-        const answerKey = this.matrixAnswerKeys.find(choice => choice === `a${rowIndex + 1}_${colIndex + 1}`)
+    correctAnswerButNotSelected (rowIndex: number, columnIndex: number) {
+        const selectedChoice = this.selectedChoiceKey(rowIndex, columnIndex)
+        const answerKey = this.matrixAnswerKeys.find(choice => choice === `a${rowIndex + 1}_${columnIndex + 1}`)
         return answerKey && !selectedChoice
     }
 
@@ -334,6 +338,13 @@ export default class MobileMatrixChoicesContainer extends Vue {
                 border: `1px solid ${this.brandColors.steel} !important`,
             }
         }
+
+        if (isReviewMode && this.correctAnswerButNotSelected(rowIndex, columnIndex)) {
+            return {
+                background: 'transparent !important',
+                border: `1px solid ${this.brandColors.slate} !important`,
+            }
+        }
     }
 
     checkboxCheckStyling (rowIndex: number, columnIndex: number) {
@@ -386,11 +397,11 @@ export default class MobileMatrixChoicesContainer extends Vue {
         const checkboxGrid = this.defaultCheckboxGrid
         this.selectedMatrixChoices.forEach(choice => {
             const rowIndex = Number(choice.substring(1, choice.indexOf('_'))) - 1
-            const colIndex = Number(choice.split('_').pop()) - 1
+            const columnIndex = Number(choice.split('_').pop()) - 1
             if (checkboxGrid && checkboxGrid[rowIndex]) {
-                checkboxGrid[rowIndex][colIndex] = true
-                if (this.selectedColumnHeaders[rowIndex] && this.question.matrixLabels?.columns[colIndex]) {
-                    const columnHeader = this.question.matrixLabels?.columns[colIndex]
+                checkboxGrid[rowIndex][columnIndex] = true
+                if (this.selectedColumnHeaders[rowIndex] && this.question.matrixLabels?.columns[columnIndex]) {
+                    const columnHeader = this.question.matrixLabels?.columns[columnIndex]
                     this.selectedColumnHeaders[rowIndex].push(columnHeader)
                 }
             }
@@ -402,9 +413,9 @@ export default class MobileMatrixChoicesContainer extends Vue {
         const radioBtnGrid = this.matrixRadioGrid
         this.selectedMatrixChoices.forEach(choice => {
             const rowIndex = Number(choice.substring(1, choice.indexOf('_'))) - 1
-            const colIndex = Number(choice.split('_').pop()) - 1
-            if (this.selectedColumnHeaders[rowIndex] && this.question.matrixLabels?.columns[colIndex]) {
-                const columnHeader = this.question.matrixLabels?.columns[colIndex]
+            const columnIndex = Number(choice.split('_').pop()) - 1
+            if (this.selectedColumnHeaders[rowIndex] && this.question.matrixLabels?.columns[columnIndex]) {
+                const columnHeader = this.question.matrixLabels?.columns[columnIndex]
                 this.selectedColumnHeaders[rowIndex].push(columnHeader)
             }
             if (radioBtnGrid && radioBtnGrid[rowIndex]) {
@@ -414,6 +425,12 @@ export default class MobileMatrixChoicesContainer extends Vue {
         return radioBtnGrid
     }
 
+    checkboxRowClicked (rowIndex: number, columnIndex: number) {
+        if (this.matrixCheckboxGrid && this.matrixCheckboxGrid[rowIndex]) {
+            this.matrixCheckboxGrid[rowIndex][columnIndex] = !this.matrixCheckboxGrid[rowIndex][columnIndex]
+        }
+    }
+
     @Emit('emitSelectedMatrixChoice')
     emitSelectedMatrixChoice (matrixChoiceKeys: TMatrixChoiceKey[]) {
         return matrixChoiceKeys
@@ -529,7 +546,7 @@ export default class MobileMatrixChoicesContainer extends Vue {
     }
 
     &__choices-container {
-        cursor: default;
+        cursor: pointer;
         position: relative;
         outline: none;
         transition: 0.1s width ease;
@@ -604,6 +621,8 @@ export default class MobileMatrixChoicesContainer extends Vue {
 
     &__row-label-correct-icon,
     &__row-label-incorrect-icon {
+        width: 21px;
+        height: 22px;
         position: absolute;
         right: 0;
         margin-right: 12px;

package/lib/components/Quiz/Question/Summary.vue

@@ -4,6 +4,9 @@
         v-breakpoint:questionEl="breakpoints"
         ref="uikit-question-summary"
         class="uikit-question-summary"
+        :class="{
+            'uikit-question-summary--matrix-question-review-mode': isMatrixQuestion && reviewMode,
+        }"
     >
         <div class="uikit-question-summary__summary-title">
             {{ isQuestionCorrect ? 'Correct': isUnanswered ? 'Unanswered' : 'Incorrect' }}
@@ -37,6 +40,10 @@
             v-breakpoint:questionEl="breakpoints"
             ref="uikit-question-summary__summary-dropdown-explanation"
             class="uikit-question-summary__summary-dropdown-explanation"
+            :class="{
+                'uikit-question-summary__summary-dropdown-explanation--matrix-question-review-mode': 
+                    isMatrixQuestion && reviewMode,
+            }"
         >
             <slot name="explanationTopExperiment"></slot>
             <div
@@ -96,6 +103,7 @@
                 <span class="uikit-question-summary__summary-dropdown-reference-label">Reference: </span>
                 <div v-html="reference" />
             </div>
+            <slot name="explanationBottomExperiment" />
         </div>
         <Icon
             v-if="isQuestionCorrect"
@@ -200,6 +208,10 @@ export default class Summary extends Vue {
         box-shadow: 0 1px 4px 0 rgba($jet, 0.3);
     }
 
+    &--matrix-question-review-mode#{&}--tablet-landscape {
+        display: inline-block;
+    }
+
     &--tablet-portrait {
         display: inline-block;
     }
@@ -289,6 +301,10 @@ export default class Summary extends Vue {
     &__summary-dropdown-explanation {
         display: none;
 
+        &--matrix-question-review-mode#{&}--tablet-landscape {
+            display: inline-block;
+        }
+
         &--tablet-portrait {
             display: block;
         }

package/lib/components/Quiz/Question.vue

@@ -31,6 +31,7 @@
                 'uikit-question__main--show-side': (showExplanation && !showPaywall) || showPassageAndImage,
                 'uikit-question__main--unanswered': showAnswers && !isMCR && isUnanswered && !isCorrect,
                 'uikit-question__main--mcr': isMCR,
+                'uikit-question__main--matrix-question-review-mode': isMatrixQuestion && reviewMode,
             }"
         >
             <slot name="context">
@@ -230,6 +231,9 @@
                             :choiceKey="choiceKey"
                         />
                     </template>
+                    <template #explanationBottomExperiment>
+                        <slot name="explanationBottomExperiment" />
+                    </template>
                 </ChoicesContainer>
                 <MatrixChoicesContainer
                     v-if="question.type === 'Matrix Checkbox' || question.type === 'Matrix Radio Button'"
@@ -339,6 +343,9 @@
                 <template #explanationTopExperiment>
                     <slot name="explanationTopExperiment"></slot>
                 </template>
+                <template #explanationBottomExperiment>
+                    <slot name="explanationBottomExperiment" />
+                </template>
             </Summary>
             <slot name="metricsTiles">
                 <StatsSummary
@@ -388,8 +395,8 @@
                         Check Answer
                     </PocketButton>
                     <PocketButton
-                        v-if="!showMatrixAnswers && !hideAnswer && isMatrixQuestion && allMatrixRowsAreAnswered"
-                        :disabled="!selectedMatrixChoices.length"
+                        v-else-if="isMatrixQuestion && !showMatrixAnswers && !hideAnswer"
+                        :disabled="!allMatrixRowsAreAnswered"
                         :is-dark-mode="isDarkMode"
                         @click="clickCheckMatrixAnswer"
                     >
@@ -426,6 +433,7 @@
             class="uikit-question__right-side"
             :class="{
                 'uikit-question__right-side--explanation': showExplanation && !showPaywall,
+                'uikit-question__right-side--matrix-question-review-mode': isMatrixQuestion && reviewMode,
             }"
         >
             <PassageAndImage
@@ -469,6 +477,9 @@
                 <template #explanationTopExperiment>
                     <slot name="explanationTopExperiment"></slot>
                 </template>
+                <template #explanationBottomExperiment>
+                    <slot name="explanationBottomExperiment" />
+                </template>
             </Explanation>
         </div> 
     </div>
@@ -1552,6 +1563,11 @@ export default class Question extends Vue {
             overflow-y: visible;
             padding: 0 17px;
         }
+
+        &--matrix-question-review-mode#{&}--tablet-landscape:not(&--tablet-portrait) {
+            width: 100%;
+            padding-right: 0;
+        }
     }
 
     &__right-side {
@@ -1567,6 +1583,10 @@ export default class Question extends Vue {
             display: none;
         }
 
+        &--matrix-question-review-mode#{&}--tablet-landscape {
+            display: none;
+        }
+
         &--explanation {
             padding-top: 58px;
             padding-right: 11px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pocketprep/ui-kit",
-  "version": "3.4.56",
+  "version": "3.4.58",
   "description": "Pocket Prep UI Kit",
   "author": "pocketprep",
   "scripts": {