@magicfeedback/popup-sdk 1.1.8 → 1.3.0

package/dist/{renderPopup-EZKDMLVZ.mjs → renderPopup-NJK7Z46E.mjs}

@@ -6,8 +6,9 @@ import {
   buildSurveyIdentity,
   sdkError,
   sdkLog,
-  sdkWarn
-} from "./chunk-XOTM5CHX.mjs";
+  sdkWarn,
+  style_default
+} from "./chunk-XFA2Y6CK.mjs";
 
 // node_modules/@magicfeedback/native/dist/magicfeedback-sdk.browser.js
 var require_magicfeedback_sdk_browser = __commonJS({
@@ -1936,873 +1937,6 @@ var require_magicfeedback_sdk_browser = __commonJS({
 
 // src/ui/renderPopup.ts
 var import_native = __toESM(require_magicfeedback_sdk_browser());
-
-// src/assets/style.css
-var style_default = `.magicfeedback-container {
-    width: 100%;
-}
-
-
-.magicfeedback-success-message,
-.magicfeedback-info-message,
-.magicfeedback-start-message,
-.magicfeedback-container{
-    animation-duration: 0.5s;
-    animation-name: animate-fade;
-    animation-delay: 0.25s;
-    animation-fill-mode: backwards;
-
-    font-style: normal;
-    text-align: justify;
-    font-weight: 400;
-    font-size: 1.2rem;
-    color: #475569;
-    line-height: 1.5;
-}
-
-@keyframes animate-fade {
-    0% { opacity: 0; }
-    100% { opacity: 1; }
-}
-
-.magicfeedback-form {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: center;
-    width: 100%;
-}
-.magicfeedback-questions {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-    width: 100%;
-}
-
-.magicfeedback-div {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-    margin-bottom: 10px;
-    width: 100%;
-}
-
-.magicfeedback-label {
-    margin-bottom: 25px;
-    margin-top: 20px;
-    font-weight: 400;
-    font-family: inherit;
-    font-size: 1.2rem;
-    color: #212529;
-    text-align: start;
-    word-wrap: break-word;
-    white-space: normal;
-
-}
-
-.magicfeedback-checkbox {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    width: 100%;
-}
-
-.magicfeedback-checkbox-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    margin-bottom: 5px;
-    margin-top: 5px;
-}
-
-.magicfeedback-radio {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    flex-wrap: wrap;
-    width: 100%;
-    margin-right: 5px;
-    padding: 5px;
-}
-
-.magicfeedback-checkbox-container,
-.magicfeedback-radio-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    margin: 5px;
-    padding: 5px 0;
-    background-color: #fff;
-    border-radius: 5px;
-    box-shadow: 0 0 3px #ccc;
-}
-
-.deepdots-popup input::-webkit-outer-spin-button,
-.deepdots-popup input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    -moz-appearance: textfield;
-}
-
-.magicfeedback-checkbox input[type="checkbox"] {
-    margin-right: 5px;
-    margin-left: 5px;
-    width: 20px;
-    height: 20px;
-    cursor: pointer;
-}
-
-
-.magicfeedback-checkbox label,
-.magicfeedback-radio-container label {
-    margin-left: 5px;
-    font-weight: 400;
-    font-family: inherit;
-    font-size: 16px;
-    color: #212529;
-    text-align: start;
-    width: 100%;
-}
-
-.deepdots-popup p {
-    margin-bottom: 0px;
-    font-size: 12px;
-}
-
-.deepdots-popup h2 {
-    line-height: 1.66;
-    margin: 0;
-    padding: 0;
-    font-weight: 900;
-    color: #222;
-    font-family: var(--deepdots-font, 'Montserrat');
-    font-size: 18px;
-    text-transform: uppercase;
-    text-align: center;
-    margin-bottom: 40px;
-}
-
-/* Los controles de formulario no heredan font-family por defecto: cuando hay
-   fuente custom (clase deepdots-has-font), los forzamos a usar la del contenedor. */
-.deepdots-popup.deepdots-has-font button,
-.deepdots-popup.deepdots-has-font input,
-.deepdots-popup.deepdots-has-font textarea,
-.deepdots-popup.deepdots-has-font select {
-    font-family: var(--deepdots-font, inherit);
-}
-
-.deepdots-popup h6 {
-    margin-bottom: 1rem;
-}
-
-.deepdots-popup input[type="date"],
-.deepdots-popup input[type="text"],
-.deepdots-popup input[type="number"],
-.deepdots-popup input[type="email"],
-.deepdots-popup input[type="password"],
-.deepdots-popup textarea,
-.deepdots-popup select {
-    box-sizing: border-box;
-    padding: 10px;
-    margin: 10px 0;
-    width: 100%;
-    border: 2px solid #ccc; /* Default border color - you can customize this */
-    border-radius: 5px;
-    font-size: 18px;
-    outline: none;
-    transition: border-color 0.3s ease;
-    min-height: 50px;
-    font-family: inherit;
-    -webkit-appearance: none;
-}
-
-.deepdots-popup select {
-    background-image: linear-gradient(45deg, transparent 50%, gray 50%),
-    linear-gradient(135deg, gray 50%, transparent 50%),
-    linear-gradient(to right, #ccc, #ccc);
-    background-position: calc(100% - 20px) calc(1em + 2px),
-    calc(100% - 15px) calc(1em + 2px),
-    calc(100% - 2.5em) 0.5em;
-    background-size: 5px 5px,
-    5px 5px,
-    1px 1.5em;
-    background-repeat: no-repeat;
-}
-
-.magicfeedback-boolean-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    margin: 10px 0;
-    width: 100%;
-}
-
-.magicfeedback-boolean-container label {
-    margin-left: 10px;
-    font-weight: 400;
-    font-size: 16px;
-    width: 100%;
-    padding-top: 5px;
-}
-
-.magicfeedback-boolean-option {
-    margin-right: 10px;
-    margin-left: 10px;
-    width: 100%;
-    height: 38px;
-    border-radius: 8px;
-    font-size: 16px;
-    cursor: pointer;
-    border: 1px solid #ced4da !important;
-}
-
-.magicfeedback-boolean-option label {
-    font-weight: 400;
-    font-size: 16px;
-    color: #475569;
-    cursor: pointer;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: inherit;
-}
-
-.magicfeedback-boolean-option input[type=radio] + label:hover {
-    color: #007bff;
-}
-
-.magicfeedback-boolean-option input[type=radio]:checked + label {
-    color: #007bff;
-    background-color: #cadff8;
-}
-
-.deepdots-popup input[type="radio"] {
-    padding: 20px;
-    margin: 10px 0 10px 15px;
-    width: 40px;
-    background-color: #fff;
-    box-shadow: none;
-}
-
-/* Style for focused input/select */
-.deepdots-popup input:focus, .deepdots-popup select:focus {
-    border-color: #4CAF50; /* Highlight color when focused - you can customize this */
-}
-
-/* Style for invalid input (example: validation error) */
-.deepdots-popup input.error, .deepdots-popup select.error {
-    border-color: #ff3333; /* Red color for error state - you can customize this */
-}
-
-.magicfeedback-action-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    margin-top: 10px;
-    width: 100%;
-}
-
-.magicfeedback-action-container .magicfeedback-submit {
-    cursor: pointer;
-    padding: 10px;
-    margin: 10px 0;
-    width: 100px;
-    border-radius: 8px;
-    font-size: 16px;
-    outline: none;
-    transition: border-color 0.3s ease;
-    background-color: #1E293B;
-    color: white;
-}
-
-.magicfeedback-action-container .magicfeedback-back {
-    cursor: pointer;
-    padding: 10px;
-    margin: 10px 0;
-    width: 100px;
-    border: 0;
-    border-radius: 8px;
-    font-size: 16px;
-    outline: none;
-    transition: border-color 0.3s ease;
-    background-color: transparent;
-    color: #212529;
-}
-
-
-
-/* Rating styles */
-.magicfeedback-rating {
-    width: 100%;
-}
-
-.magicfeedback-rating-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-around;
-    flex-wrap: wrap;
-    align-items: center;
-
-    margin: 15px 5px;
-    padding: 0;
-
-    list-style: none;
-    font-size: 1.5rem;
-    cursor: pointer;
-    user-select: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-}
-
-.magicfeedback-rating-placeholder-value,
-.magicfeedback-rating-placeholder{
-    text-align: center;
-    align-content: center;
-    justify-content: center;
-    text-wrap: wrap;
-}
-
-.magicfeedback-rating-option {
-    margin: 0 0.5rem;
-    padding: 0;
-}
-
-@media (max-width: 1024px) {
-    .magicfeedback-rating-option {
-        margin: 10px 0;
-        padding: 0;
-        width: 20%;
-        display: flex;
-        justify-content: center;
-    }
-
-    .magicfeedback-rating-placeholder-value {
-        font-size: 0.75rem;
-        margin-bottom: 1px;
-    }
-    .magicfeedback-rating-placeholder{
-        justify-content: center;
-    }
-
-    .magicfeedback-rating-container {
-        flex-wrap: wrap;
-        justify-content: flex-start;
-    }
-}
-
-
-.magicfeedback-rating-option-label-container {
-    display: flex;
-    flex-direction: column;
-}
-
-
-.magicfeedback-rating-option-label-container label {
-    display: inline-block;
-    text-align: center;
-    margin-bottom: 0;
-    font-weight: 600;
-    font-size: 18px;
-    color: #475569;
-}
-
-.magicfeedback-rating-option-label-container input[type=radio] {
-    position: absolute;
-    opacity: 0;
-    width: 0;
-    height: 0;
-}
-
-/* IMAGE STYLES */
-.magicfeedback-rating-option-label-container input[type=radio] + img {
-    cursor: pointer;
-    height: 48px;
-    width: 48px;
-}
-
-/* LABEL STYLES */
-.magicfeedback-rating-option-label-container input[type=radio] + label {
-    cursor: pointer;
-}
-
-/* CHECKED STYLES */
-.magicfeedback-rating-option-label-container input[type=radio]:checked + img {
-    box-shadow: #007bff 0px 1px 4px, #007BFFA0 0px 0px 0px 2px;
-    border-radius: 50%;
-}
-
-.magicfeedback-rating-number {
-    width: 100%;
-}
-.magicfeedback-rating-container,
-.magicfeedback-rating-number-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-
-    margin: 15px 0;
-    padding: 0;
-
-    list-style: none;
-    font-size: 1.5rem;
-    cursor: pointer;
-    user-select: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-}
-
-/* Cuando hay placeholders (Very bad / Very good), el placeholder ocupa
-   el 100% de la primera l\xEDnea y los boxes bajan a la siguiente */
-.magicfeedback-rating-number-container--with-placeholder {
-    flex-wrap: wrap;
-    align-items: flex-start;
-}
-
-.magicfeedback-rating-number-container--with-placeholder .magicfeedback-rating-placeholder {
-    width: 100%;
-    margin-bottom: 8px;
-}
-
-.magicfeedback-rating-number-container--with-placeholder .magicfeedback-rating-number-option {
-    width: auto;
-    flex: 1;
-}
-
-.magicfeedback-rating-number-option {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    margin: 5px;
-    padding: 0;
-    list-style: none;
-    font-size: 1.5rem;
-    cursor: pointer;
-    user-select: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    width: 100%;
-}
-
-.magicfeedback-rating-number-option-row{
-    max-width: 100% !important;
-}
-
-.magicfeedback-rating-number-top-placeholder,
-.magicfeedback-rating-number-bottom-placeholder{
-    text-align: center !important;
-    align-content: center;
-    justify-content: center;
-    text-wrap: wrap;
-
-    font-size: 15px;
-    color: #475569;
-
-    width: 100%;
-    margin: auto;
-}
-
-@media (min-width: 650px) {
-    .magicfeedback-rating-number-option-row +.magicfeedback-rating-number-container-ltr:first-child,
-    .magicfeedback-rating-number-option-row + +.magicfeedback-rating-number-container-rtl:last-child {
-        margin-left: 0;
-        width: calc(100% - 10px);
-    }
-
-    .magicfeedback-rating-number-option-row +.magicfeedback-rating-number-container-rtl:first-child,
-    .magicfeedback-rating-number-option-row + +.magicfeedback-rating-number-container-ltr:last-child {
-        margin-right: 0;
-        width: calc(100% - 10px);
-    }
-}
-
-
-.magicfeedback-rating-number-option-label-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-}
-
-.magicfeedback-rating-number-option-label-container label {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    margin: 0 10px;
-    font-weight: 600;
-    font-size: 14px;
-    color: #475569;
-    cursor: pointer;
-    width: 100%;
-    height: 100%;
-    min-height: 50px;
-    text-align: center;
-    padding: 0;
-    border-radius: 4px;
-    border: 1px solid #ced4da;
-    background-color: rgba(246, 246, 246, 0.3);
-    transition: background-color 0.15s ease-in-out;
-}
-
-.magicfeedback-rating-number-option-label-container input[type=radio] {
-    position: absolute;
-    opacity: 0;
-    width: 0;
-    height: 0;
-}
-
-.magicfeedback-rating-number-option-label-container input[type=radio] + label {
-    cursor: pointer;
-}
-
-.magicfeedback-rating-number-option-label-container input[type=radio] + label:hover,
-.magicfeedback-rating-number-option-label-container input[type=radio]:checked + label {
-    color: #007bff;
-    border: 1px solid #007bff;
-    background-color: rgba(86, 168, 253, 0.29);
-}
-
-.magicfeedback-rating-number-container-column{
-    align-items: flex-start !important;
-}
-
-@media (max-width: 650px) {
-    .magicfeedback-rating-number-container-ltr {
-        justify-content: center;
-        flex-wrap: wrap;
-    }
-
-    .magicfeedback-rating-number-container-rtl {
-        justify-content: center;
-        flex-wrap: wrap-reverse;
-    }
-
-    .magicfeedback-rating-number-option {
-        max-width: 100%;
-        height: 55px;
-        margin: 5px 0;
-    }
-}
-
-.magicfeedback-rating-star {
-    width: 100%;
-}
-
-.magicfeedback-rating-star-container {
-    display: flex !important;
-    flex-direction: row !important;
-    justify-content: center !important;
-    align-items: center !important;
-    flex-wrap: wrap;
-    margin: 15px 5px;
-    padding: 0;
-    list-style: none;
-    font-size: 1.5rem;
-    cursor: pointer;
-    user-select: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-}
-
-.magicfeedback-rating-star-option:not(:checked) > .rating__star {
-    float: right;
-    width: 1em;
-    overflow: hidden;
-    white-space: nowrap;
-    cursor: pointer;
-    font-size: 30px;
-    color: #ccc;
-    margin: 0 10px;
-}
-
-.magicfeedback-rating-star-option:not(:checked) > .rating__star:hover,
-.magicfeedback-rating-star-option:not(:checked) > .rating__star:hover ~ span {
-    color: #deb217 !important;
-}
-
-.magicfeedback-rating-star-selected {
-    color: #ffc700 !important;
-}
-
-
-/* Style for multiple choice image */
-.magicfeedback-image-option-label-container:hover {
-    cursor: pointer;
-    border: 0 !important;
-}
-
-.magicfeedback-image-option-label-container input[type=radio]:checked + img,
-.magicfeedback-image-option-label-container input[type=checkbox]:checked + img {
-    border: 1px solid #007bff !important;
-    box-shadow: 0 0 3px #007bff !important;
-}
-
-.magicfeedback-image-option-label-container input[type=radio] + img,
-.magicfeedback-image-option-label-container input[type=checkbox] + img {
-    border: 1px solid transparent !important;
-}
-
-.magicfeedback-image-option-label-container{
-    margin: 10px !important;
-    height: calc(100% - 20px) !important;
-    width: calc(100% - 20px) !important;
-}
-
-.magicfeedback-multiple-choice-image-option {
-    display: flex;
-    height: auto !important;
-    box-shadow: 0 0 3px #ccc;
-}
-
-.magicfeedback-multiple-choice-image-label {
-    font-size: 1rem;
-}
-
-.magicfeedback-consent-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    margin: 10px 0;
-    width: 100%;
-}
-
-.magicfeedback-consent-container label {
-    margin-left: 10px;
-}
-
-.magicfeedback-start-message-container {
-    /* ... add your start message container styles here ... */
-}
-
-.magicfeedback-success-message,
-.magicfeedback-info-message,
-.magicfeedback-start-message {
-    margin: 35px 5px;
-}
-
-.magicfeedback-success-message p,
-.magicfeedback-info-message p,
-.magicfeedback-start-message p {
-    font-style: normal;
-    text-align: start;
-    font-weight: 400;
-    font-size: 16px;
-    color: #475569;
-    line-height: 1.5;
-}
-
-.magicfeedback-success-message img,
-.magicfeedback-info-message img,
-.magicfeedback-start-message img {
-    width: 400px;
-    max-width: 80%;
-    height: auto;
-    margin: 10px auto;
-}
-
-.magicfeedback-counter,
-.magicfeedback-point-system-total {
-    margin: 10px 0 0 0 !important;
-    display: flex !important;
-    justify-content: right !important;
-    align-items: center !important;
-    width: 100%;
-}
-
-.magicfeedback-skip-container {
-    background-color: transparent !important;
-    border: 0 !important;
-    color: #999999FF !important;
-    padding: 0 !important;
-    margin: 0 !important;
-    cursor: pointer !important;
-    font-size: 0.5em !important;
-    font-weight: 400 !important;
-    box-shadow: 0 0 0 !important;
-
-    &:hover {
-        color: #0066ff;
-    }
-}
-
-.magicfeedback-skip-container input[type=checkbox] {
-    border-color: #999999FF !important;
-    border: 0 !important;
-    cursor: pointer !important;
-
-}
-
-.magicfeedback-multi-question-matrix,
-.magicfeedback-point-system,
-.magicfeedback-priority-list {
-    width: 100% !important;
-}
-
-.magicfeedback-multi-question-matrix-container,
-.magicfeedback-point-system-container,
-.magicfeedback-priority-list-container {
-    width: 100% !important;
-    overflow-x: auto;
-}
-
-.magicfeedback-point-system-list,
-.magicfeedback-priority-list-list,
-.magicfeedback-multi-question-matrix-table {
-    width: 100% !important;
-    padding: 0 !important;
-    overflow-x: auto;
-}
-
-.magicfeedback-multi-question-matrix {
-    position: relative !important;
-}
-
-.magicfeedback-multi-question-matrix-container {
-    overflow: auto !important;
-    padding-bottom: 10px;
-}
-
-.magicfeedback-multi-question-matrix-label{
-    text-align: left !important;
-}
-.magicfeedback-priority-list-item {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    padding: 10px 0 10px 10px;
-
-    border: 1px solid #ced4da;
-    border-radius: 5px;
-    margin: 10px 0 !important;
-}
-
-.magicfeedback-point-system-item {
-    height: 45px;
-    margin: 5px 0 !important;
-}
-
-.magicfeedback-point-system-item label,
-.magicfeedback-priority-list-item-label {
-    font-family: inherit;
-    font-size: 18px !important;
-    color: #212529;
-    text-align: start;
-    word-wrap: break-word;
-    white-space: normal;
-    padding: 0 10px 0 0;
-}
-
-.magicfeedback-point-system-input-container {
-    padding: 0 10px 0 0;
-    border-radius: 5px;
-    font-size: 14px;
-    border: 1px solid #ced4da;
-    height: 42px;
-    margin: auto 0;
-}
-
-.magicfeedback-multi-question-matrix-table thead {
-    margin-bottom: 20px;
-}
-
-.magicfeedback-multi-question-matrix-table th{
-    text-align: center;
-    font-weight: 400 !important;
-    font-size: 1rem !important;
-    padding: 0  10px !important;
-}
-
-.magicfeedback-multi-question-matrix-table th,
-.magicfeedback-multi-question-matrix-table td label,
-.magicfeedback-priority-list-arrow-up,
-.magicfeedback-priority-list-arrow-down {
-    font-style: normal !important;
-    font-weight: 400 !important;
-    font-size: 1rem !important;
-    color: #475569 !important;
-    cursor: pointer !important;
-    margin: 0 !important;
-    line-height: inherit;
-}
-
-.magicfeedback-multi-question-matrix-table tr {
-    align-items: center;
-    margin: 5px 0;
-}
-
-.magicfeedback-multi-question-matrix-row-tr{
-    border-radius: 5px;
-    margin: 10px 0 !important;
-}
-
-.magicfeedback-multi-question-matrix-row-tr:nth-child(odd) {
-    background-color: #f1f6f6; /* Light gray background for odd rows */
-}
-
-.magicfeedback-multi-question-matrix-row-tr:nth-child(even) {
-    background-color: #ffffff; /* White background for even rows */
-}
-
-.magicfeedback-multi-question-matrix-row-label {
-    text-align: left !important;
-}
-
-.magicfeedback-point-system-item span {
-    color: #475569 !important;
-}
-
-.magicfeedback-point-system-item input {
-    padding: 0;
-    margin: 0 !important;
-    width: auto !important;
-    min-width: 100px !important;
-    height: auto !important;
-    min-height: 42px;
-    cursor: pointer;
-    font-size: 14px;
-    text-align: center !important;
-}
-
-.magicfeedback-multi-question-matrix-table input {
-    margin: auto !important;
-    padding: 20px !important;
-    width: 100% !important;
-    height: 15px;
-    border: 1px solid #ced4da;
-    cursor: pointer;
-}
-
-.magicfeedback-image{
-    max-height: 400px !important;
-    height: auto !important;
-    max-width: 100% !important;
-    margin: 10px auto !important;
-}
-
-.magicfeedback-error{
-    margin-top: 5px;
-}`;
-
-// src/ui/renderPopup.ts
 function ensureMagicFeedbackStyles(_popup) {
   const STYLE_ID = "magicfeedback-sdk-styles";
   if (document.getElementById(STYLE_ID)) return;
@@ -2878,6 +2012,11 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   const isDark = style?.theme === "dark";
   const theme = {
     popupBg: isDark ? "#1e1e1e" : "#fff",
+    // El popup fija su propio fondo, así que debe fijar también el esquema de color.
+    // Sin esto los controles de formulario (input/textarea/select) caen al estilo por
+    // defecto del navegador: en un host con `prefers-color-scheme: dark` se pintan
+    // oscuros con texto blanco sobre el fondo claro del popup.
+    colorScheme: isDark ? "dark" : "light",
     textPrimary: isDark ? "#f0f0f0" : "#111",
     closeBtnHoverBg: isDark ? "rgba(255,255,255,0.10)" : "rgba(0,0,0,0.06)",
     closeBtnHoverColor: isDark ? "#fff" : "#000000"
@@ -2900,6 +2039,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       flex-direction: column;
       justify-content: flex-start;
       background: ${theme.popupBg};
+      color-scheme: ${theme.colorScheme};
       border-radius: 8px;
       padding: 24px;
       box-shadow: 0 4px 6px rgba(0,0,0,0.1);
@@ -3334,4 +2474,4 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
 export {
   renderPopup
 };
-//# sourceMappingURL=renderPopup-EZKDMLVZ.mjs.map
+//# sourceMappingURL=renderPopup-NJK7Z46E.mjs.map