@redacto.io/consent-sdk-react 10.0.0-beta.1 → 10.0.0-beta.12

package/src/RedactoNoticeAssisted/index.ts

@@ -1 +0,0 @@
-export { RedactoNoticeAssisted as default } from "./RedactoNoticeAssisted";

package/src/RedactoNoticeAssisted/injectStyles.ts

@@ -1,251 +0,0 @@
-// CSS injection utility for the RedactoNoticeAssisted SDK.
-//
-// Mirrors RedactoNoticeConsent's injectStyles approach (large + small checkbox
-// normalization with a CSS checkmark, focus rings, spinner/fade keyframes) but
-// with an assisted-specific STYLE_ID and `redacto-assisted-*` class prefix so it
-// can coexist with NoticeConsent on the same page. Adds focus styling for the OTP
-// entry boxes.
-let stylesInjected = false;
-
-export const injectAssistedStyles = () => {
-  if (stylesInjected || typeof document === "undefined") {
-    return;
-  }
-
-  const STYLE_ID = "redacto-assisted-styles";
-
-  // Check if styles are already injected
-  if (document.getElementById(STYLE_ID)) {
-    stylesInjected = true;
-    return;
-  }
-
-  const style = document.createElement("style");
-  style.id = STYLE_ID;
-  style.textContent = `
-    /* Redacto Notice Assisted — checkbox styles (purpose = large, element = small) */
-    .redacto-assisted-checkbox-large {
-      appearance: none !important;
-      -webkit-appearance: none !important;
-      -moz-appearance: none !important;
-      height: 20px !important;
-      width: 20px !important;
-      border: 2px solid #d0d5dd !important;
-      border-radius: 5px !important;
-      background-color: transparent !important;
-      cursor: pointer !important;
-      position: relative !important;
-      box-sizing: border-box !important;
-      margin: 0 !important;
-      padding: 4px !important;
-      flex-shrink: 0 !important;
-    }
-
-    .redacto-assisted-checkbox-small {
-      appearance: none !important;
-      -webkit-appearance: none !important;
-      -moz-appearance: none !important;
-      height: 16px !important;
-      width: 16px !important;
-      border: 2px solid #d0d5dd !important;
-      border-radius: 5px !important;
-      background-color: transparent !important;
-      cursor: pointer !important;
-      position: relative !important;
-      box-sizing: border-box !important;
-      margin: 0 !important;
-      padding: 4px !important;
-      flex-shrink: 0 !important;
-    }
-
-    .redacto-assisted-checkbox-large:checked,
-    .redacto-assisted-checkbox-small:checked {
-      background-color: #4f87ff !important;
-      border-color: #4f87ff !important;
-    }
-
-    .redacto-assisted-checkbox-large:checked::after {
-      content: '' !important;
-      position: absolute !important;
-      left: 50% !important;
-      top: 50% !important;
-      transform: translate(-50%, -50%) rotate(45deg) !important;
-      width: 4px !important;
-      height: 8px !important;
-      border: solid white !important;
-      border-width: 0 2px 2px 0 !important;
-      box-sizing: border-box !important;
-    }
-
-    .redacto-assisted-checkbox-small:checked::after {
-      content: '' !important;
-      position: absolute !important;
-      left: 50% !important;
-      top: 50% !important;
-      transform: translate(-50%, -50%) rotate(45deg) !important;
-      width: 3px !important;
-      height: 6px !important;
-      border: solid white !important;
-      border-width: 0 1.5px 1.5px 0 !important;
-      box-sizing: border-box !important;
-    }
-
-    .redacto-assisted-checkbox-large:focus-visible,
-    .redacto-assisted-checkbox-small:focus-visible {
-      outline: 2px solid #4f87ff !important;
-      outline-offset: 2px !important;
-    }
-
-    /* TTS Highlight Styles - Visible highlighting without layout shift */
-    .redacto-tts-highlight {
-      position: relative !important;
-      transition: background-color 0.3s ease, outline 0.3s ease !important;
-    }
-
-    /* Block-level elements - headings */
-    h2.redacto-tts-highlight,
-    h3.redacto-tts-highlight {
-      background-color: #FFF9C4 !important;
-      border-radius: 3px !important;
-      padding: 2px 4px !important;
-      margin: -2px -4px !important;
-    }
-
-    /* Inline elements - spans, links */
-    span.redacto-tts-highlight,
-    a.redacto-tts-highlight {
-      background-color: #FFF9C4 !important;
-      border-radius: 3px !important;
-      padding: 2px 4px !important;
-      margin: -2px -4px !important;
-    }
-
-    /* Paragraphs - handle carefully to avoid layout shift */
-    p.redacto-tts-highlight {
-      background-color: #FFF9C4 !important;
-      border-radius: 3px !important;
-      padding: 2px 4px !important;
-      margin: -2px -4px !important;
-    }
-
-    /* Buttons - use outline to keep button styles intact */
-    button.redacto-tts-highlight {
-      outline: 3px solid #FFF9C4 !important;
-      outline-offset: 2px !important;
-    }
-
-    /* OTP entry boxes */
-    .redacto-assisted-otp-input {
-      appearance: none !important;
-      -webkit-appearance: none !important;
-      -moz-appearance: none !important;
-    }
-
-    .redacto-assisted-otp-input::-webkit-outer-spin-button,
-    .redacto-assisted-otp-input::-webkit-inner-spin-button {
-      -webkit-appearance: none !important;
-      margin: 0 !important;
-    }
-
-    .redacto-assisted-otp-input:focus {
-      outline: none !important;
-      border-color: var(--ra-accent, #4f87ff) !important;
-      box-shadow: 0 0 0 3px var(--ra-accent-soft, rgba(79, 135, 255, 0.18)) !important;
-    }
-
-    /* OTP entry — error state: red border + a quick shake to make it felt */
-    .redacto-assisted-otp-input.redacto-assisted-otp-error {
-      border-color: #d92d20 !important;
-      box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.14) !important;
-      animation: redactoAssistedShake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
-    }
-
-    /* Mobile-number phone field — focus ring on the whole group */
-    .redacto-assisted-phone-field:focus-within {
-      border-color: var(--ra-accent, #4f87ff) !important;
-      box-shadow: 0 0 0 3px var(--ra-accent-soft, rgba(79, 135, 255, 0.18)) !important;
-    }
-    .redacto-assisted-phone-input:focus {
-      outline: none !important;
-    }
-
-    /* Verification-method switch link ("Use email / mobile instead") */
-    .redacto-assisted-switch-link {
-      -webkit-appearance: none !important;
-      appearance: none !important;
-    }
-    .redacto-assisted-switch-link:hover:not(:disabled) {
-      text-decoration: underline !important;
-    }
-    .redacto-assisted-switch-link:focus-visible {
-      outline: 2px solid var(--ra-accent, #4f87ff) !important;
-      outline-offset: 2px !important;
-      border-radius: 4px !important;
-    }
-    .redacto-assisted-switch-link:disabled {
-      cursor: not-allowed !important;
-      opacity: 0.6 !important;
-    }
-
-    /* Primary button hover — darken whatever the themed background is */
-    .redacto-assisted-primary-btn:hover:not(:disabled) {
-      filter: brightness(0.92) !important;
-    }
-    .redacto-assisted-primary-btn:disabled {
-      background-color: #eaecf0 !important;
-      color: #98a2b3 !important;
-      box-shadow: none !important;
-      cursor: not-allowed !important;
-    }
-    .redacto-assisted-secondary-btn:hover {
-      background-color: #f9fafb !important;
-    }
-
-    /* Animations */
-    @keyframes redactoAssistedOverlayFadeIn {
-      from { opacity: 0; }
-      to { opacity: 1; }
-    }
-
-    @keyframes redactoAssistedSpin {
-      from { transform: rotate(0deg); }
-      to { transform: rotate(360deg); }
-    }
-
-    @keyframes redactoAssistedPop {
-      0% { transform: scale(0.6); opacity: 0; }
-      60% { transform: scale(1.08); opacity: 1; }
-      100% { transform: scale(1); opacity: 1; }
-    }
-
-    @keyframes redactoAssistedShake {
-      0%, 100% { transform: translateX(0); }
-      20% { transform: translateX(-5px); }
-      40% { transform: translateX(5px); }
-      60% { transform: translateX(-3px); }
-      80% { transform: translateX(3px); }
-    }
-
-    /* Inline verify panel reveal — a soft slide-down + fade as it mounts. */
-    @keyframes redactoAssistedReveal {
-      from { opacity: 0; transform: translateY(-8px); }
-      to { opacity: 1; transform: translateY(0); }
-    }
-    .redacto-assisted-reveal {
-      animation: redactoAssistedReveal 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
-    }
-
-    /* Respect users who prefer reduced motion — drop the error shake + reveal. */
-    @media (prefers-reduced-motion: reduce) {
-      .redacto-assisted-otp-input.redacto-assisted-otp-error {
-        animation: none !important;
-      }
-      .redacto-assisted-reveal {
-        animation: none !important;
-      }
-    }
-  `;
-
-  document.head.appendChild(style);
-  stylesInjected = true;
-};