@constructor-io/constructorio-ui-quizzes 1.3.0 → 1.3.1

package/README.md

@@ -74,6 +74,8 @@ import '@constructor-io/constructorio-ui-quizzes/styles.css';
  - These starter styles are intended to be extended by layering in your own css rules
  - If you import the starter styles, `CioQuiz` component will take up the full width and height of its parent container
 
+> Please note the starter styles utilize @container queries and enable responsive styles for our quizzes based on the size of their container element. Since this feature is supported by modern browsers, polyfills have not been included in this library. However, if you want to support older browsers, you can add fallback styles or use a [polyfill](https://github.com/GoogleChromeLabs/container-query-polyfill).
+
 ## Troubleshooting
 
 ### Known Issues

package/dist/constructorio-ui-quizzes-bundled.js

@@ -1,4 +1,4 @@
-(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.id="cio-quizzes-styles",e.appendChild(document.createTextNode(".cio-quiz{--blue-denim-100: #7590ee;--blue-denim-1000: #061d6e;--blue-denim-200: #5d7ce8;--blue-denim-300: #395ddb;--blue-denim-400: #2348ca;--blue-denim-500: #163ab5;--blue-denim-600: #0e2fa0;--blue-denim-700: #0b2a93;--blue-denim-800: #092587;--blue-denim-900: #07217b;--gray-dust-100: #92959c;--gray-dust-1000: #272729;--gray-dust-200: #74757b;--gray-dust-300: #606166;--gray-dust-400: #515356;--gray-dust-500: #46474a;--gray-dust-600: #3c3d3f;--gray-dust-700: #37373a;--gray-dust-800: #313134;--gray-dust-900: #2c2c2f;--white-ice-100: #f9fbfe;--white-ice-200: #ecf4fd;--white-ice-300: #e1eefd;--white-ice-400: #d3e5fb;--white-ice-500: #c8daee;--white-ice-600: #bdcde0;--white-ice-700: #b1bfd0;--white-ice-800: #97a2b0;--bottom-bar-height: 80px;--primary-color: var(--blue-denim-400);--container-image-small-height: 250px}.cio-quiz,.cio-quiz *{box-sizing:border-box;font-family:Inter,sans-serif}.cio-quiz{min-width:100%;min-height:100%;display:flex;justify-content:center;background-color:#fff;color:var(--gray-dust-500);font-size:16px}.cio-quiz button{cursor:pointer}.cio-container{display:flex;align-items:center;justify-content:center;margin-top:2rem;padding-bottom:var(--bottom-bar-height)}.cio-container--with-image{display:flex;flex-direction:column;width:100%;max-height:100vh;padding-bottom:var(--bottom-bar-height)}.cio-question-content{display:flex;flex-direction:column;height:100%;padding:1rem}.cio-question-title{font-size:2.125em;margin:0}.cio-question-description{font-size:1em;line-height:1.5;margin-top:1.5rem}.cio-question-image{width:100%;height:100%;object-fit:cover}.cio-question-image-container{box-sizing:border-box;width:100%;object-fit:cover;max-height:var(--container-image-small-height);display:flex}.cio-question-input-text{width:100%;padding:.5rem;border:0;border-bottom:1px solid var(--blue-denim-100);color:var(--blue-denim-500);padding:.8rem;outline:none;font-size:1rem}.cio-question-input-text:focus{border-bottom:1px solid var(--blue-denim-500)}.cio-question-input-text::placeholder{color:var(--blue-denim-100)}.cio-question-buttons-container{width:100%;height:var(--bottom-bar-height);padding:8px 16px;display:flex;position:fixed;bottom:0px;left:0px;background:white;background-color:#ffffffde;align-items:center}.cio-question-cta-button{background:var(--primary-color);color:var(--white-ice-100);border:1px solid var(--primary-color);border-radius:4px;height:3rem;font-size:1rem;flex-grow:1;margin-left:auto;width:100%}.cio-button-container{max-width:10rem;flex-grow:1;margin-left:auto;padding-left:1rem}.cio-question-cta-button:hover{background:var(--blue-denim-500);border:2px solid var(--blue-denim-600)}.cio-question-cta-button:active{background:var(--blue-denim-700);border:2px solid var(--blue-denim-800)}.cio-question-cta-button:disabled,.cio-question-cta-button.disabled{background:var(--blue-denim-200);border:2px solid var(--blue-denim-100)}.cio-question-back-button{color:var(--primary-color);background:#ffffff;border:1px solid var(--primary-color);border-radius:4px;height:3rem;width:3rem;font-size:1rem;margin-right:4rem}.cio-question-back-button:hover{border:2px solid var(--blue-denim-600)}.cio-question-back-button:active{border:2px solid var(--blue-denim-700)}.cio-question-back-button svg{display:inline}.cio-cover-question-container--with-image{flex-direction:column-reverse;padding:0;padding-bottom:var(--bottom-bar-height)}.cio-question-option-container{padding:1.5rem;border-radius:8px;border:1px solid var(--white-ice-700);box-shadow:0 4px 10px #5d7ce826;width:calc(50% - 10px);display:flex;flex-direction:column;cursor:pointer}.cio-question-option-container.selected,.cio-question-option-container-text-only.selected{outline:3px solid var(--blue-denim-600);box-shadow:0 4px 10px #5d7ce859}.cio-question-option-container:hover:not(.selected){outline:1px solid var(--blue-denim-600);box-shadow:0 4px 10px #5d7ce840}.cio-question-option-container-text-only:hover:not(.selected){outline:1px solid var(--blue-denim-600);box-shadow:0 4px 10px #5d7ce840}.cio-select-question-container{display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:1200px;margin-bottom:var(--bottom-bar-height);padding:1rem;margin-top:2rem;width:100%}.cio-question-options-container{display:flex;justify-content:center;flex-wrap:wrap;gap:1rem;width:100%;margin-bottom:auto;margin-top:2rem}.cio-question-options-container-text-only{display:flex;flex-direction:column;gap:1rem;width:100%;padding:10px;margin-bottom:auto;margin-top:2rem}.cio-question-option-container-text-only{padding:1.5rem;border-radius:8px;border:1px solid var(--white-ice-700);box-shadow:0 4px 10px #5d7ce826;display:flex;flex-direction:column;width:100%;margin:auto;cursor:pointer}.cio-question-option-image{width:100%;height:auto;border-radius:4px;object-fit:cover;margin-bottom:16px;aspect-ratio:1/1}.cio-question-option-value{text-align:center;margin:auto 0}.cio-select-question-text{width:100%;display:flex;flex-direction:column;justify-content:space-between}.cio-select-question-text .cio-question-description{margin-bottom:0}.cio-results-container{width:100%;max-width:1200px;padding:2rem 1rem;display:flex;flex-direction:column}.cio-results-title{margin-top:0;margin-bottom:1rem;color:var(--gray-dust-500)}.cio-results-filter-container{margin-bottom:1.5rem}.cio-results-filter-container p{color:var(--gray-dust-300);margin-bottom:1.5rem}.cio-results-filter-options{display:flex;flex-wrap:wrap;gap:.5rem;cursor:default}.cio-results-filter-option{background-color:var(--white-ice-200);border:1px solid var(--primary-color);color:var(--blue-denim-500);border-radius:10000px;padding:.4rem 1.25rem;display:flex;justify-content:center;align-items:center;font-size:.75rem}.cio-results{display:flex;flex-direction:row;flex-wrap:wrap}.cio-zero-results{margin-top:2rem;text-align:center;display:flex;flex-direction:column;justify-content:center;max-width:420px;margin-left:auto;margin-right:auto}.cio-zero-results-subtitle{font-weight:500;font-size:1.25rem;line-height:1.5rem;color:var(--gray-dust-500);margin-top:0}.cio-zero-results-description{color:var(--gray-dust-100);line-height:1.25rem;margin-top:0}.cio-zero-results .cio-button-container{width:14rem;margin-right:auto;margin-left:auto;padding-left:0}.cio-result-card{background-color:transparent;height:auto;box-sizing:border-box;text-decoration:none;margin:0;margin-bottom:1.5rem;flex-basis:100%;display:flex;flex-direction:column}.cio-result-card-anchor{text-decoration:none;background-color:transparent;color:inherit;height:100%;display:flex;flex-direction:column;justify-content:space-between}.cio-result-card-image{width:auto;height:240px;margin-left:auto;margin-right:auto}.cio-result-card-image img{height:100%;width:100%;object-fit:contain}.cio-result-card-text{flex-grow:1;display:flex;flex-direction:column;justify-content:space-between}.cio-result-card-title{color:var(--gray-dust-500);margin:0;margin-bottom:1rem;font-weight:700}.cio-result-card-prices{margin-bottom:1rem;font-weight:700}.cio-result-card-sale-price{color:#bf1728;margin-right:.75rem}.cio-result-card-regular-price{color:var(--gray-dust-900)}.cio-result-card-regular-price--strike-through{text-decoration:line-through}.cio-result-card-cta-button{padding:.75rem 2.5rem;height:3rem;background:var(--primary-color);border:1px solid var(--primary-color);border-radius:4px;color:var(--white-ice-100);font-size:1rem;width:100%}.cio-result-card-cta-button:hover{background:var(--blue-denim-500);border:2px solid var(--blue-denim-600)}.cio-result-card-cta-button:active{background:var(--blue-denim-700);border:2px solid var(--blue-denim-800)}.cio-result-card-cta-button:disabled,.cio-result-card-cta-button.disabled{background:var(--blue-denim-200);border:2px solid var(--blue-denim-100)}.cio-question-redo-button{background:none;border:none;display:flex;gap:.5rem;align-items:center}.cio-question-redo-button:hover{text-decoration:underline}.cio-question-redo-button span{margin-top:1px}@media screen and (min-width: 640px){.cio-container--with-image{display:flex;justify-content:center;align-items:center;margin-bottom:0}.cio-question-image-container{height:100%;flex-basis:50%;flex-shrink:0;border-radius:4px}.cio-cover-question-container--with-image{justify-content:center;margin-bottom:0}.cio-select-question-text{margin-top:2rem}.cio-select-question-buttons{padding:1rem 3rem}.cio-results-container{padding:3rem 4rem}.cio-results-filter-and-redo-container{display:flex;justify-content:space-between;align-items:end;margin-bottom:1.5rem}.cio-results-filter-container{margin-bottom:0}.cio-results{column-gap:5%}.cio-result-card{flex-basis:30%}}@media screen and (min-width: 768px){.cio-quiz{font-size:18px}.cio-container{align-items:center;margin-top:0}.cio-container--with-image{padding:6rem 2rem;align-items:center;flex-direction:row}.cio-question-input-text{margin-bottom:1rem}.cio-question-image-container{max-height:1000px}.cio-cover-question-container--with-image .cio-question-image-container{max-height:unset}.cio-question-content{justify-content:center;height:fit-content;flex-basis:70%;flex-shrink:1;margin:0 auto;padding:3rem}.cio-question-description{margin-bottom:2rem}.cio-question-buttons-container{position:sticky;padding:0;margin:0;align-items:center}.cio-cover-question-container--with-image{padding:0}.cio-select-question-text{padding:0;padding-bottom:2rem;margin:0}.cio-select-question-buttons{padding:1rem 5rem}.cio-select-question-container{margin:0;padding:2rem;padding-bottom:0}.cio-question-option-container{width:calc(25% - 13px)}.cio-question-options-container{padding:0;margin-bottom:2rem}.cio-question-options-container-text-only{flex-direction:row;flex-wrap:wrap;justify-content:center;margin-bottom:2rem;margin-top:0}.cio-question-option-container-text-only{margin:0;width:30%}}@media screen and (min-width: 1280px){.cio-container--with-image{padding:6rem 2rem}.cio-cover-question-container--with-image{padding:0}.cio-question-option-container-text-only{width:30%}.cio-select-question-container{margin-bottom:0}.cio-select-question-text{padding:2.5rem 0rem}.cio-results-container{margin-top:3rem}.cio-zero-results{margin-top:7rem}.cio-question-content{padding:5rem}}.cio-spinner{display:inline-block;position:relative;width:80px;margin:auto}.cio-spinner div{box-sizing:border-box;display:block;position:absolute;top:-35px;width:64px;height:64px;margin:4px;border:4px solid var(--blue-denim-200);border-radius:50%;animation:cio-spinner 1.2s cubic-bezier(.5,0,.5,1) infinite;border-color:var(--blue-denim-200) transparent transparent transparent}.cio-spinner div:nth-child(1){animation-delay:-.45s}.cio-spinner div:nth-child(2){animation-delay:-.3s}.cio-spinner div:nth-child(3){animation-delay:-.15s}@keyframes cio-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}")),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.id="cio-quizzes-styles",e.appendChild(document.createTextNode(".cio-quiz{--blue-denim-100: #7590ee;--blue-denim-1000: #061d6e;--blue-denim-200: #5d7ce8;--blue-denim-300: #395ddb;--blue-denim-400: #2348ca;--blue-denim-500: #163ab5;--blue-denim-600: #0e2fa0;--blue-denim-700: #0b2a93;--blue-denim-800: #092587;--blue-denim-900: #07217b;--gray-dust-100: #92959c;--gray-dust-1000: #272729;--gray-dust-200: #74757b;--gray-dust-300: #606166;--gray-dust-400: #515356;--gray-dust-500: #46474a;--gray-dust-600: #3c3d3f;--gray-dust-700: #37373a;--gray-dust-800: #313134;--gray-dust-900: #2c2c2f;--white-ice-100: #f9fbfe;--white-ice-200: #ecf4fd;--white-ice-300: #e1eefd;--white-ice-400: #d3e5fb;--white-ice-500: #c8daee;--white-ice-600: #bdcde0;--white-ice-700: #b1bfd0;--white-ice-800: #97a2b0;--bottom-bar-height: 80px;--primary-color: var(--blue-denim-400);--container-image-small-height: 250px;container:quiz / inline-size}.cio-quiz,.cio-quiz *{box-sizing:border-box;font-family:Inter,sans-serif}.cio-quiz{position:relative;min-width:100%;min-height:100%;height:100%;overflow:auto;display:flex;justify-content:center;background-color:#fff;color:var(--gray-dust-500);font-size:16px}.cio-quiz button{cursor:pointer}.cio-container{display:flex;align-items:center;justify-content:center;margin-top:2rem;padding-bottom:var(--bottom-bar-height)}.cio-container--with-image{display:flex;flex-direction:column;width:100%;max-height:100vh;padding-bottom:var(--bottom-bar-height)}.cio-question-content{display:flex;flex-direction:column;height:100%;padding:1rem}.cio-question-title{font-size:2.125em;margin:0}.cio-question-description{font-size:1em;line-height:1.5;margin-top:1.5rem}.cio-question-image{width:100%;height:100%;object-fit:cover}.cio-question-image-container{box-sizing:border-box;width:100%;object-fit:cover;max-height:var(--container-image-small-height);display:flex}.cio-question-input-text{width:100%;padding:.5rem;border:0;border-bottom:1px solid var(--blue-denim-100);color:var(--blue-denim-500);padding:.8rem;outline:none;font-size:1rem}.cio-question-input-text:focus{border-bottom:1px solid var(--blue-denim-500)}.cio-question-input-text::placeholder{color:var(--blue-denim-100)}.cio-question-buttons-container{width:100%;height:var(--bottom-bar-height);padding:8px 16px;display:flex;position:absolute;bottom:0px;left:0px;background:white;background-color:#ffffffde;align-items:center}.cio-question-cta-button{background:var(--primary-color);color:var(--white-ice-100);border:1px solid var(--primary-color);border-radius:4px;height:3rem;font-size:1rem;flex-grow:1;margin-left:auto;width:100%}.cio-button-container{max-width:10rem;flex-grow:1;margin-left:auto;padding-left:1rem}.cio-question-cta-button:hover{background:var(--blue-denim-500);border:2px solid var(--blue-denim-600)}.cio-question-cta-button:active{background:var(--blue-denim-700);border:2px solid var(--blue-denim-800)}.cio-question-cta-button:disabled,.cio-question-cta-button.disabled{background:var(--blue-denim-200);border:2px solid var(--blue-denim-100)}.cio-question-back-button{color:var(--primary-color);background:#ffffff;border:1px solid var(--primary-color);border-radius:4px;height:3rem;width:3rem;font-size:1rem;margin-right:4rem}.cio-question-back-button:hover{border:2px solid var(--blue-denim-600)}.cio-question-back-button:active{border:2px solid var(--blue-denim-700)}.cio-question-back-button svg{display:inline}.cio-cover-question-container--with-image{flex-direction:column-reverse;padding:0;padding-bottom:var(--bottom-bar-height)}.cio-question-option-container{padding:1.5rem;border-radius:8px;border:1px solid var(--white-ice-700);box-shadow:0 4px 10px #5d7ce826;width:calc(50% - 10px);display:flex;flex-direction:column;cursor:pointer}.cio-question-option-container.selected,.cio-question-option-container-text-only.selected{outline:3px solid var(--blue-denim-600);box-shadow:0 4px 10px #5d7ce859}.cio-question-option-container:hover:not(.selected){outline:1px solid var(--blue-denim-600);box-shadow:0 4px 10px #5d7ce840}.cio-question-option-container-text-only:hover:not(.selected){outline:1px solid var(--blue-denim-600);box-shadow:0 4px 10px #5d7ce840}.cio-select-question-container{position:relative;display:flex;flex-direction:column;align-items:center;align-self:start;max-width:1200px;padding:1rem;margin-top:2rem;min-height:calc(100% - 3rem);width:100%}.cio-question-options-container{display:flex;justify-content:center;flex-wrap:wrap;gap:1rem;width:100%;margin-bottom:var(--bottom-bar-height);margin-top:2rem}.cio-question-options-container-text-only{display:flex;flex-direction:column;gap:1rem;width:100%;padding:10px;margin-bottom:auto;margin-top:2rem}.cio-question-option-container-text-only{padding:1.5rem;border-radius:8px;border:1px solid var(--white-ice-700);box-shadow:0 4px 10px #5d7ce826;display:flex;flex-direction:column;width:100%;margin:auto;cursor:pointer}.cio-question-option-image{width:100%;height:auto;border-radius:4px;object-fit:cover;margin-bottom:16px;aspect-ratio:1/1}.cio-question-option-value{text-align:center;margin:auto 0}.cio-select-question-text{width:100%;display:flex;flex-direction:column;justify-content:space-between}.cio-select-question-text .cio-question-description{margin-bottom:0}.cio-results-container{width:100%;max-width:1200px;padding:2rem 1rem;display:flex;flex-direction:column}.cio-results-title{margin-top:0;margin-bottom:1rem;color:var(--gray-dust-500)}.cio-results-filter-container{margin-bottom:1.5rem}.cio-results-filter-container p{color:var(--gray-dust-300);margin-bottom:1.5rem}.cio-results-filter-options{display:flex;flex-wrap:wrap;gap:.5rem;cursor:default}.cio-results-filter-option{background-color:var(--white-ice-200);border:1px solid var(--primary-color);color:var(--blue-denim-500);border-radius:10000px;padding:.4rem 1.25rem;display:flex;justify-content:center;align-items:center;font-size:.75rem}.cio-results{display:flex;flex-direction:row;flex-wrap:wrap}.cio-zero-results{margin-top:2rem;text-align:center;display:flex;flex-direction:column;justify-content:center;max-width:420px;margin-left:auto;margin-right:auto}.cio-zero-results-subtitle{font-weight:500;font-size:1.25rem;line-height:1.5rem;color:var(--gray-dust-500);margin-top:0}.cio-zero-results-description{color:var(--gray-dust-100);line-height:1.25rem;margin-top:0}.cio-zero-results .cio-button-container{width:14rem;margin-right:auto;margin-left:auto;padding-left:0}.cio-result-card{background-color:transparent;height:auto;box-sizing:border-box;text-decoration:none;margin:0;margin-bottom:1.5rem;flex-basis:100%;display:flex;flex-direction:column}.cio-result-card-anchor{text-decoration:none;background-color:transparent;color:inherit;height:100%;display:flex;flex-direction:column;justify-content:space-between}.cio-result-card-image{width:auto;height:240px;margin-left:auto;margin-right:auto}.cio-result-card-image img{height:100%;width:100%;object-fit:contain}.cio-result-card-text{flex-grow:1;display:flex;flex-direction:column;justify-content:space-between}.cio-result-card-title{color:var(--gray-dust-500);margin:0;margin-bottom:1rem;font-weight:700}.cio-result-card-prices{margin-bottom:1rem;font-weight:700}.cio-result-card-sale-price{color:#bf1728;margin-right:.75rem}.cio-result-card-regular-price{color:var(--gray-dust-900)}.cio-result-card-regular-price--strike-through{text-decoration:line-through}.cio-result-card-cta-button{padding:.75rem 2.5rem;height:3rem;background:var(--primary-color);border:1px solid var(--primary-color);border-radius:4px;color:var(--white-ice-100);font-size:1rem;width:100%}.cio-result-card-cta-button:hover{background:var(--blue-denim-500);border:2px solid var(--blue-denim-600)}.cio-result-card-cta-button:active{background:var(--blue-denim-700);border:2px solid var(--blue-denim-800)}.cio-result-card-cta-button:disabled,.cio-result-card-cta-button.disabled{background:var(--blue-denim-200);border:2px solid var(--blue-denim-100)}.cio-question-redo-button{background:none;border:none;display:flex;gap:.5rem;align-items:center}.cio-question-redo-button:hover{text-decoration:underline}.cio-question-redo-button span{margin-top:1px}@container quiz (min-width: 640px){.cio-container{padding-bottom:0}.cio-container--with-image{display:flex;justify-content:center;align-items:center;margin-bottom:0;padding-bottom:0}.cio-question-image-container{height:100%;flex-basis:50%;flex-shrink:0;border-radius:4px}.cio-cover-question-container--with-image{justify-content:center;margin-bottom:0;padding-bottom:0}.cio-select-question-text{margin-top:2rem}.cio-select-question-buttons{padding:1rem 3rem}.cio-results-container{padding:3rem 4rem}.cio-results-filter-and-redo-container{display:flex;justify-content:space-between;align-items:end;margin-bottom:1.5rem}.cio-results-filter-container{margin-bottom:0}.cio-results{column-gap:5%}.cio-result-card{flex-basis:30%}}@container quiz (min-width: 768px){.cio-container{align-items:center;margin-top:0}.cio-container--with-image{padding:6% 2%;align-items:center;flex-direction:row}.cio-question-input-text{margin-bottom:1rem}.cio-question-image-container{max-height:100%}.cio-cover-question-container--with-image .cio-question-image-container{max-height:unset}.cio-question-content{justify-content:center;height:fit-content;flex-basis:70%;flex-shrink:1;margin:0 auto;padding:3rem}.cio-question-description{margin-bottom:2rem}.cio-question-buttons-container{position:sticky;padding:0;margin:0;align-items:center}.cio-cover-question-container--with-image{padding:0}.cio-select-question-text{padding:0;padding-bottom:2rem;margin:0}.cio-select-question-buttons{padding:1rem 5rem}.cio-select-question-container{justify-content:center;margin:0;padding:2rem;padding-bottom:0}.cio-question-option-container{width:calc(25% - 13px)}.cio-question-options-container{padding:0;margin-bottom:2rem}.cio-question-options-container-text-only{flex-direction:row;flex-wrap:wrap;justify-content:center;margin-bottom:2rem;margin-top:0}.cio-question-option-container-text-only{margin:0;width:30%}}@container quiz (min-width: 1280px){.cio-cover-question-container--with-image{padding:0}.cio-question-option-container-text-only{width:30%}.cio-select-question-container{margin-bottom:0}.cio-select-question-text{padding:2.5rem 0rem}.cio-results-container{margin-top:3rem}.cio-zero-results{margin-top:7rem}.cio-question-content{padding:5rem}}.cio-spinner{display:inline-block;position:relative;width:80px;margin:auto}.cio-spinner div{box-sizing:border-box;display:block;position:absolute;top:-35px;width:64px;height:64px;margin:4px;border:4px solid var(--blue-denim-200);border-radius:50%;animation:cio-spinner 1.2s cubic-bezier(.5,0,.5,1) infinite;border-color:var(--blue-denim-200) transparent transparent transparent}.cio-spinner div:nth-child(1){animation-delay:-.45s}.cio-spinner div:nth-child(2){animation-delay:-.3s}.cio-spinner div:nth-child(3){animation-delay:-.15s}@keyframes cio-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}")),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();
 var kt=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{};function Af(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var $={},Df={get exports(){return $},set exports(e){$=e}},Q={};/**
  * @license React
  * react.production.min.js

package/lib/cjs/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RequestStates = exports.cioJsClientDescription = exports.basicDescription = exports.componentDescription = exports.quizId = exports.apiKey = void 0;
+exports.RequestStates = exports.smallContainerDescription = exports.cioJsClientDescription = exports.basicDescription = exports.componentDescription = exports.quizId = exports.apiKey = void 0;
 // Autocomplete key index
 exports.apiKey = 'key_wJSdZSiesX5hiVLt';
 exports.quizId = 'coffee-quiz';
@@ -28,6 +28,7 @@ exports.basicDescription = `Pass an \`apiKey\` and a \`quizId\` to request quest
 exports.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
 
 > Note: \`cioJsClient\` refers to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)`;
+exports.smallContainerDescription = `If you are using the provided styles, CioQuiz component will respect the height and width of its parent container and use responsive styles based on the parent container's dimensions`;
 var RequestStates;
 (function (RequestStates) {
     RequestStates[RequestStates["Stale"] = 0] = "Stale";

package/lib/mjs/constants.js

@@ -25,6 +25,7 @@ export const basicDescription = `Pass an \`apiKey\` and a \`quizId\` to request
 export 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
 
 > Note: \`cioJsClient\` refers to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)`;
+export const smallContainerDescription = `If you are using the provided styles, CioQuiz component will respect the height and width of its parent container and use responsive styles based on the parent container's dimensions`;
 export var RequestStates;
 (function (RequestStates) {
     RequestStates[RequestStates["Stale"] = 0] = "Stale";

package/lib/styles.css

@@ -31,6 +31,7 @@
   --bottom-bar-height: 80px;
   --primary-color: var(--blue-denim-400);
   --container-image-small-height: 250px;
+  container: quiz / inline-size;
 }
 
 /* Mobile + global styles */
@@ -40,8 +41,11 @@
   font-family: 'Inter', sans-serif;
 }
 .cio-quiz {
+  position: relative;
   min-width: 100%;
   min-height: 100%;
+  height: 100%;
+  overflow: auto;
   display: flex;
   justify-content: center;
   background-color: #ffffff;
@@ -128,7 +132,7 @@
   height: var(--bottom-bar-height);
   padding: 8px 16px;
   display: flex;
-  position: fixed;
+  position: absolute;
   bottom: 0px;
   left: 0px;
   background: white;
@@ -223,14 +227,15 @@
   box-shadow: 0px 4px 10px rgba(93, 124, 232, 0.25);
 }
 .cio-select-question-container {
+  position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  align-self: start;
   max-width: 1200px;
-  margin-bottom: var(--bottom-bar-height);
   padding: 1rem;
   margin-top: 2rem;
+  min-height: calc(100% - 3rem); /* Full height - padding - margin */
   width: 100%;
 }
 .cio-question-options-container {
@@ -239,7 +244,7 @@
   flex-wrap: wrap;
   gap: 1rem;
   width: 100%;
-  margin-bottom: auto;
+  margin-bottom: var(--bottom-bar-height);
   margin-top: 2rem;
 }
 .cio-question-options-container-text-only {
@@ -464,13 +469,18 @@
 /* Media Queries */
 
 /* Small Tablet */
-@media screen and (min-width: 640px) {
-   /* Container */
+@container quiz (min-width: 640px) {
+  .cio-container {
+    padding-bottom: 0;
+  }
+
+  /* Container */
   .cio-container--with-image {
     display: flex;
     justify-content: center;
     align-items: center;
     margin-bottom: 0;
+    padding-bottom: 0;
   }
 
   /* Image */
@@ -485,6 +495,7 @@
   .cio-cover-question-container--with-image {
     justify-content: center;
     margin-bottom: 0;
+    padding-bottom: 0;
   }
 
   /* Select Component */
@@ -519,23 +530,18 @@
 }
 
 /* Big Tablet */
-@media screen and (min-width: 768px) {
-  /* Quiz */
-  .cio-quiz {
-    font-size: 18px;
-  }
-
+@container quiz (min-width: 768px) {
   /* Container */
   .cio-container {
     align-items: center;
     margin-top: 0;
   }
   .cio-container--with-image {
-    padding: 6rem 2rem;
+    padding: 6% 2%;
     align-items: center;
     flex-direction: row;
   }
-  
+
   /* Input */
   .cio-question-input-text {
     margin-bottom: 1rem;
@@ -543,7 +549,7 @@
 
   /* Image */
   .cio-question-image-container {
-    max-height: 1000px;
+    max-height: 100%;
   }
   .cio-cover-question-container--with-image .cio-question-image-container {
     max-height: unset;
@@ -587,6 +593,7 @@
     padding: 1rem 5rem;
   }
   .cio-select-question-container {
+    justify-content: center;
     margin: 0;
     padding: 2rem;
     padding-bottom: 0;
@@ -612,11 +619,8 @@
 }
 
 /* Desktop */
-@media screen and (min-width: 1280px) {
+@container quiz (min-width: 1280px) {
   /* Container */
-  .cio-container--with-image {
-    padding: 6rem 2rem;
-  }
   .cio-cover-question-container--with-image {
     padding: 0;
   }
@@ -632,7 +636,6 @@
     padding: 2.5rem 0rem;
   }
 
-
   /* Results component */
   .cio-results-container {
     margin-top: 3rem;

package/lib/types/constants.d.ts

@@ -3,6 +3,7 @@ export declare const quizId = "coffee-quiz";
 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  - `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- 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 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)";
+export declare const smallContainerDescription = "If you are using the provided styles, CioQuiz component will respect the height and width of its parent container and use responsive styles based on the parent container's dimensions";
 export declare enum RequestStates {
     Stale = 0,
     Loading = 1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-quizzes",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Constructor.io Quizzes UI library for web applications",
   "author": "constructor.io",
   "license": "MIT",
@@ -61,15 +61,15 @@
   },
   "devDependencies": {
     "@cspell/eslint-plugin": "^6.18.1",
-    "@storybook/addon-a11y": "^7.0.0-beta.40",
-    "@storybook/addon-actions": "7.0.0-beta.40",
-    "@storybook/addon-essentials": "7.0.0-beta.40",
-    "@storybook/addon-interactions": "^7.0.0-beta.40",
-    "@storybook/addon-links": "7.0.0-beta.40",
-    "@storybook/jest": "^0.0.11-next.0",
-    "@storybook/react-webpack5": "7.0.0-beta.40",
-    "@storybook/test-runner": "0.10.0-next.8",
-    "@storybook/testing-library": "^0.0.14-next.1",
+    "@storybook/addon-a11y": "^7.0.11",
+    "@storybook/addon-actions": "7.0.11",
+    "@storybook/addon-essentials": "7.0.11",
+    "@storybook/addon-interactions": "^7.0.11",
+    "@storybook/addon-links": "7.0.11",
+    "@storybook/jest": "^0.1.0",
+    "@storybook/react-webpack5": "7.0.11",
+    "@storybook/test-runner": "0.10.0",
+    "@storybook/testing-library": "^0.1.0",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "@typescript-eslint/eslint-plugin": "^5.47.0",
@@ -83,13 +83,13 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.8",
+    "eslint-plugin-storybook": "^0.6.12",
     "husky": "^8.0.1",
     "license-checker": "^25.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "start-server-and-test": "^2.0.0",
-    "storybook": "7.0.0-beta.40",
+    "storybook": "7.0.11",
     "typescript": "^4.9.4",
     "webpack": "^5.75.0",
     "vite": "^4.2.1",