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

package/src/RedactoNoticeAssisted/styles.ts

@@ -1,730 +0,0 @@
-// Style constants for RedactoNoticeAssisted.
-//
-// The layout/typography tokens are copied verbatim from RedactoNoticeConsent/
-// styles.ts so the two components are pixel-identical: 700px centered white modal,
-// #4f87ff blue accent, #d0d5dd borders, 8px radius, same shadow/typography,
-// accordion purposes, language pill. The OTP-verification and brief-confirmation
-// tokens at the bottom are the only Assisted-specific additions (they reuse the
-// same palette already present in NoticeConsent).
-export const styles = {
-  overlay: {
-    position: "fixed",
-    top: 0,
-    left: 0,
-    width: "100%",
-    height: "100%",
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    zIndex: 999,
-    animation:
-      "redactoAssistedOverlayFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1)",
-    pointerEvents: "all",
-    margin: 0,
-    padding: 0,
-    boxSizing: "border-box",
-  },
-
-  modal: {
-    position: "fixed",
-    top: "50%",
-    left: "50%",
-    transform: "translate(-50%, -50%)",
-    width: "700px",
-    borderRadius: "8px",
-    backgroundColor: "#ffffff",
-    boxShadow: "4px 0px 4px 0px #00000040",
-    border: "none",
-    display: "flex",
-    flexDirection: "column",
-    maxHeight: "90vh",
-    zIndex: 1000,
-    margin: 0,
-    padding: 0,
-    boxSizing: "border-box",
-    textAlign: "left",
-    fontFamily: "inherit",
-  },
-
-  content: {
-    margin: "22px",
-    display: "flex",
-    flexDirection: "column",
-    flexGrow: 1,
-    overflow: "hidden",
-    minHeight: 0,
-    boxSizing: "border-box",
-    textAlign: "left",
-  },
-
-  topSection: {
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "flex-start",
-    gap: "10px",
-    paddingBottom: "15px",
-    borderBottom: "none",
-    backgroundColor: "#ffffff",
-    margin: 0,
-    boxSizing: "border-box",
-    textAlign: "left",
-  },
-
-  topLeft: {
-    display: "flex",
-    alignItems: "center",
-    gap: "10px",
-    flex: "1 1 0",
-    minWidth: 0,
-    margin: 0,
-    padding: 0,
-    boxSizing: "border-box",
-  },
-
-  logo: {
-    height: "32px",
-    width: "auto",
-    maxWidth: "140px",
-    objectFit: "contain",
-    flexShrink: 0,
-    margin: 0,
-    padding: 0,
-    display: "block",
-  },
-
-  title: {
-    fontSize: "18px",
-    fontWeight: 700,
-    lineHeight: "150%",
-    letterSpacing: "0.2px",
-    verticalAlign: "middle",
-    color: "#101828",
-    flex: "1 1 auto",
-    minWidth: 0,
-    wordBreak: "normal",
-    overflowWrap: "anywhere",
-    margin: 0,
-    padding: 0,
-    textAlign: "left",
-  },
-
-  // Header pill, shared by the speaker (TTS) button and the language selector.
-  topRight: {
-    borderRadius: "8px",
-    padding: "3px 9px",
-    border: "1px solid #d0d5dd",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    fontWeight: 400,
-    fontSize: "12px",
-    lineHeight: "150%",
-    letterSpacing: "0.2px",
-    verticalAlign: "middle",
-    color: "#344054",
-    gap: "5px",
-    margin: 0,
-    boxSizing: "border-box",
-    textAlign: "left",
-    cursor: "pointer",
-    backgroundColor: "#ffffff",
-  },
-
-  middleSection: {
-    margin: "0px",
-    display: "flex",
-    flexDirection: "column",
-    gap: "12px",
-    flexGrow: 1,
-    overflowY: "auto",
-    minHeight: 0,
-    paddingRight: "15px",
-    boxSizing: "border-box",
-    textAlign: "left",
-  },
-
-  privacyText: {
-    fontSize: "16px",
-    fontWeight: 400,
-    lineHeight: "150%",
-    color: "#344054",
-    margin: 0,
-    padding: 0,
-    textAlign: "left",
-  },
-
-  link: {
-    color: "#4f87ff",
-    textDecoration: "none",
-    margin: 0,
-    padding: 0,
-    boxSizing: "border-box",
-  },
-
-  subTitle: {
-    fontWeight: 600,
-    fontSize: "16px",
-    lineHeight: "150%",
-    letterSpacing: "0.2px",
-    color: "#101828",
-    margin: 0,
-    padding: 0,
-    textAlign: "left",
-  },
-
-  optionsContainer: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "10px",
-    margin: 0,
-    padding: 0,
-    boxSizing: "border-box",
-  },
-
-  optionItem: {
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
-    margin: 0,
-    padding: 0,
-    boxSizing: "border-box",
-  },
-
-  optionLeft: {
-    display: "flex",
-    gap: "12px",
-    alignItems: "center",
-    cursor: "pointer",
-    margin: 0,
-    padding: 0,
-    boxSizing: "border-box",
-  },
-
-  optionTextContainer: {
-    display: "flex",
-    flexDirection: "column",
-    margin: 0,
-    padding: 0,
-    boxSizing: "border-box",
-  },
-
-  optionTitle: {
-    fontWeight: 500,
-    fontSize: "16px",
-    lineHeight: "150%",
-    letterSpacing: "0.2px",
-    color: "#101828",
-    margin: 0,
-    padding: 0,
-    textAlign: "left",
-  },
-
-  optionDescription: {
-    fontWeight: 400,
-    fontSize: "12px",
-    lineHeight: "150%",
-    letterSpacing: "0.2px",
-    color: "#475467",
-    verticalAlign: "middle",
-    margin: 0,
-    padding: 0,
-    textAlign: "left",
-  },
-
-  dataElementsContainer: {
-    marginLeft: "27px",
-    display: "flex",
-    flexDirection: "column",
-    margin: 0,
-    padding: 0,
-    boxSizing: "border-box",
-    paddingLeft: "22px",
-  },
-
-  dataElementItem: {
-    display: "flex",
-    alignItems: "center",
-    gap: "10px",
-    justifyContent: "space-between",
-    margin: 0,
-    padding: 0,
-    boxSizing: "border-box",
-    minHeight: "24px",
-  },
-
-  dataElementText: {
-    fontWeight: 400,
-    fontSize: "14px",
-    lineHeight: "150%",
-    letterSpacing: "0.2px",
-    color: "#344054",
-    margin: 0,
-    padding: 0,
-    textAlign: "left",
-  },
-
-  languageSelectorContainer: {
-    position: "relative",
-    margin: 0,
-    padding: 0,
-    boxSizing: "border-box",
-  },
-
-  languageDropdown: {
-    position: "absolute",
-    top: "100%",
-    right: 0,
-    backgroundColor: "#ffffff",
-    border: "1px solid #d0d5dd",
-    borderRadius: "4px",
-    boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)",
-    zIndex: 10,
-    width: "max-content",
-    maxHeight: "200px",
-    overflowY: "auto",
-    marginTop: "4px",
-    padding: 0,
-    boxSizing: "border-box",
-    textAlign: "left",
-  },
-
-  languageItem: {
-    padding: "8px 12px",
-    cursor: "pointer",
-    fontSize: "12px",
-    color: "#344054",
-    backgroundColor: "#ffffff",
-    borderBottom: "1px solid #e5e7eb",
-    margin: 0,
-    boxSizing: "border-box",
-    textAlign: "left",
-  },
-
-  selectedLanguageItem: {
-    backgroundColor: "#f3f4f6",
-    fontWeight: 600,
-  },
-
-  // ── Inline verify panel ───────────────────────────────────────────────────
-  // Single-screen flow: the notice stays mounted and this section is appended
-  // below it once the user clicks Confirm. It lives on the SAME white surface as
-  // the notice and is set apart only by a top divider (mirroring the DPO footer),
-  // so the mobile/OTP step reads as a continuation of the notice — not a card.
-  verifyPanel: {
-    marginTop: "12px",
-    paddingTop: "14px",
-    borderTop: "1px solid rgba(152, 162, 179, 0.3)",
-    boxSizing: "border-box",
-  },
-
-  verifyPanelHeader: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: "10px",
-    marginBottom: "12px",
-    boxSizing: "border-box",
-  },
-
-  verifyPanelTitle: {
-    display: "inline-flex",
-    alignItems: "center",
-    gap: "8px",
-    fontWeight: 600,
-    fontSize: "14px",
-    letterSpacing: "0.2px",
-    lineHeight: "150%",
-    color: "#344054",
-    margin: 0,
-    padding: 0,
-  },
-
-  // Quiet text-button to reopen the notice selections. Colour set inline from
-  // the brand accent.
-  editLink: {
-    background: "none",
-    border: "none",
-    padding: 0,
-    margin: 0,
-    fontWeight: 500,
-    fontSize: "13px",
-    cursor: "pointer",
-    fontFamily: "inherit",
-    whiteSpace: "nowrap",
-    display: "inline-flex",
-    alignItems: "center",
-    gap: "4px",
-  },
-
-  // Dim + lock the purposes once verification has started.
-  lockedOptions: {
-    opacity: 0.55,
-    pointerEvents: "none",
-    transition: "opacity 0.2s ease",
-  },
-
-  // ── Verification-method label row (switch-link picker) ────────────────────
-  // A single justified row: the active method's icon + field label on the left,
-  // and a quiet accent text-link on the right to switch to the other method.
-  // The link is hidden once the OTP is sent (the status row takes over).
-  fieldLabelRow: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: "10px",
-    width: "100%",
-    boxSizing: "border-box",
-  },
-
-  // ── OTP verification ──────────────────────────────────────────────────────
-  // Spacious, soft, rounded verification column. The accent (focus rings, filled
-  // boxes, links, primary button) is driven by the API brand colour via the
-  // --ra-accent / --ra-accent-soft CSS variables set on the modal root.
-  phoneFieldWrap: {
-    width: "100%",
-    display: "flex",
-    flexDirection: "column",
-    gap: "10px",
-    boxSizing: "border-box",
-  },
-
-  fieldLabel: {
-    fontWeight: 500,
-    fontSize: "13px",
-    lineHeight: "150%",
-    color: "#475467",
-    margin: 0,
-    padding: 0,
-    textAlign: "left",
-  },
-
-  // Field label carrying the method icon (phone / envelope) + text.
-  fieldLabelWithIcon: {
-    display: "inline-flex",
-    alignItems: "center",
-    gap: "6px",
-    fontWeight: 500,
-    fontSize: "13px",
-    lineHeight: "150%",
-    color: "#475467",
-    margin: 0,
-    padding: 0,
-    textAlign: "left",
-  },
-
-  phoneField: {
-    display: "flex",
-    alignItems: "center",
-    width: "100%",
-    border: "1px solid #d0d5dd",
-    borderRadius: "8px",
-    backgroundColor: "#ffffff",
-    overflow: "hidden",
-    boxSizing: "border-box",
-    transition: "border-color 0.15s, box-shadow 0.15s",
-  },
-
-  phonePrefix: {
-    display: "flex",
-    alignItems: "center",
-    padding: "10px 14px",
-    fontSize: "15px",
-    fontWeight: 400,
-    color: "#344054",
-    backgroundColor: "#f9fafb",
-    borderRight: "1px solid #d0d5dd",
-    whiteSpace: "nowrap",
-    userSelect: "none",
-    flexShrink: 0,
-  },
-
-  phoneInput: {
-    flex: "1 1 auto",
-    minWidth: 0,
-    border: "none",
-    outline: "none",
-    padding: "10px 14px",
-    fontSize: "15px",
-    fontWeight: 400,
-    lineHeight: "150%",
-    color: "#344054",
-    backgroundColor: "transparent",
-    fontFamily: "inherit",
-    boxSizing: "border-box",
-  },
-
-  helperText: {
-    fontWeight: 400,
-    fontSize: "13px",
-    lineHeight: "150%",
-    color: "#475467",
-    margin: 0,
-    padding: 0,
-    textAlign: "left",
-  },
-
-  // Inline error text under the phone field / OTP boxes.
-  fieldError: {
-    fontWeight: 400,
-    fontSize: "12px",
-    lineHeight: "150%",
-    color: "#d92d20",
-    textAlign: "center",
-    margin: 0,
-    padding: 0,
-  },
-
-  // "Change Mobile Number" link — colour is set inline from the brand accent.
-  changeMobileLink: {
-    background: "none",
-    border: "none",
-    padding: 0,
-    margin: 0,
-    fontWeight: 500,
-    fontSize: "13px",
-    cursor: "pointer",
-    fontFamily: "inherit",
-    whiteSpace: "nowrap",
-  },
-
-  // Justified status row under the field once the code is sent:
-  // "✓ OTP sent to …" on the left, "Change number" on the right.
-  otpStatusRow: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: "10px",
-    width: "100%",
-    flexWrap: "wrap",
-    margin: 0,
-    padding: 0,
-  },
-
-  otpSentText: {
-    display: "inline-flex",
-    alignItems: "center",
-    gap: "6px",
-    fontWeight: 400,
-    fontSize: "13px",
-    lineHeight: "150%",
-    color: "#067647",
-    margin: 0,
-    padding: 0,
-  },
-
-  otpRow: {
-    display: "flex",
-    gap: "8px",
-    justifyContent: "center",
-    width: "100%",
-    margin: 0,
-    padding: 0,
-  },
-
-  otpBox: {
-    flex: "1 1 0",
-    minWidth: 0,
-    maxWidth: "44px",
-    height: "44px",
-    borderRadius: "8px",
-    border: "1px solid #d0d5dd",
-    textAlign: "center",
-    fontSize: "18px",
-    fontWeight: 500,
-    color: "#101828",
-    backgroundColor: "#ffffff",
-    boxSizing: "border-box",
-    padding: 0,
-    transition: "border-color 0.15s, box-shadow 0.15s, background-color 0.15s",
-  },
-
-  centerLabel: {
-    fontWeight: 500,
-    fontSize: "13px",
-    lineHeight: "150%",
-    color: "#475467",
-    textAlign: "center",
-    margin: 0,
-    padding: 0,
-  },
-
-  resendText: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: "6px",
-    fontWeight: 400,
-    fontSize: "13px",
-    lineHeight: "150%",
-    color: "#475467",
-    textAlign: "center",
-    margin: 0,
-    padding: 0,
-  },
-
-  // Resend link — colour is set inline from the brand accent.
-  resendLink: {
-    background: "none",
-    border: "none",
-    padding: 0,
-    margin: 0,
-    fontWeight: 600,
-    fontSize: "13px",
-    cursor: "pointer",
-    fontFamily: "inherit",
-  },
-
-  // ── Brief confirmation screen ─────────────────────────────────────────────
-  confirmedCenter: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    textAlign: "center",
-    gap: "8px",
-    paddingTop: "8px",
-  },
-
-  successCircle: {
-    width: "64px",
-    height: "64px",
-    borderRadius: "50%",
-    backgroundColor: "#10B981",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    animation: "redactoAssistedPop 0.4s cubic-bezier(0.16, 1, 0.3, 1)",
-  },
-
-  confirmedTitle: {
-    fontWeight: 700,
-    fontSize: "20px",
-    lineHeight: "140%",
-    color: "#101828",
-    margin: 0,
-    padding: 0,
-  },
-
-  confirmedSubtitle: {
-    fontWeight: 400,
-    fontSize: "13px",
-    lineHeight: "150%",
-    color: "#475467",
-    margin: 0,
-    padding: 0,
-  },
-
-  referenceBanner: {
-    backgroundColor: "#EFF6FF",
-    borderRadius: "8px",
-    padding: "12px 14px",
-    textAlign: "center",
-    boxSizing: "border-box",
-  },
-
-  referenceLabel: {
-    fontWeight: 600,
-    fontSize: "10px",
-    letterSpacing: "0.6px",
-    textTransform: "uppercase",
-    color: "#3b6fd4",
-    margin: 0,
-    padding: 0,
-  },
-
-  referenceValue: {
-    fontWeight: 700,
-    fontSize: "16px",
-    letterSpacing: "0.5px",
-    color: "#1E40AF",
-    margin: "4px 0 0 0",
-    padding: 0,
-    fontFamily:
-      "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
-  },
-
-  divider: {
-    border: "none",
-    borderTop: "1px solid #eaecf0",
-    margin: 0,
-  },
-
-  // ── Footer buttons (NoticeConsent tokens) ─────────────────────────────────
-  bottomSection: {
-    display: "flex",
-    justifyContent: "space-between",
-    gap: "29px",
-    paddingTop: "15px",
-    borderTop: "none",
-    backgroundColor: "#ffffff",
-    margin: 0,
-    boxSizing: "border-box",
-  },
-
-  button: {
-    width: "100%",
-    borderRadius: "8px",
-    padding: "9px 45px",
-    fontWeight: 400,
-    fontSize: "16px",
-    lineHeight: "150%",
-    letterSpacing: "0.2px",
-    cursor: "pointer",
-    margin: 0,
-    boxSizing: "border-box",
-    textAlign: "center",
-  },
-
-  acceptButton: {
-    backgroundColor: "#4f87ff",
-    border: "none",
-    color: "#ffffff",
-  },
-
-  cancelButton: {
-    border: "1px solid #d0d5dd",
-    backgroundColor: "#ffffff",
-    color: "#000000",
-  },
-
-  loadingSpinner: {
-    width: "40px",
-    height: "40px",
-    border: "4px solid #f3f3f3",
-    borderTop: "4px solid #4f87ff",
-    borderRadius: "50%",
-    animation: "redactoAssistedSpin 1s linear infinite",
-    boxSizing: "border-box",
-  },
-
-  // Loading / error states.
-  loadingWrap: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: "12px",
-    minHeight: "220px",
-    textAlign: "center",
-    boxSizing: "border-box",
-  },
-
-  errorTitle: {
-    fontWeight: 600,
-    fontSize: "16px",
-    lineHeight: "150%",
-    color: "#101828",
-    margin: 0,
-    padding: 0,
-  },
-
-  errorText: {
-    fontWeight: 400,
-    fontSize: "13px",
-    lineHeight: "150%",
-    color: "#667085",
-    margin: 0,
-    padding: 0,
-    maxWidth: "360px",
-  },
-} as const;