Create a responsive UI block named "Transfer Success Message with Action Buttons" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy. Implementation preflight: - Exact public block reference: https://preline.co/blocks/feedback-states/success-states/#transfer-success-message-with-action-buttons. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source. - Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic. - If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category. Build only this source block. Do not add unrelated page chrome, marketing sections, dashboard widgets, extra cards, extra modals, placeholder states, or footer content unless they are present in the source block. Source metadata: - Catalog family: feedback-states/success-states - Block ID: transfer-success-message-with-action-buttons - Source description: A centered confirmation stack keeps the completed transfer easy to understand while leaving room for immediate follow-up actions below. - Preview iframe: https://preline.co/blocks/feedback-states/success-states/iframes/pro/transfer-success-message-with-action-buttons.html (repo path: blocks/feedback-states/success-states/iframes/pro/transfer-success-message-with-action-buttons.html) - Source markup reference: - partials/pro/payments-dashboard/layouts-components/success-message.html Use the source HTML tab and referenced partials as the source of truth. Preserve exact visible copy, content order, hierarchy, component density, spacing relationships, borders, radii, icons, status markers, dropdown/menu rows, form states, responsive order, and interaction content. If the source imports shared partials or assets, reuse those local components/assets when the destination can import them; otherwise recreate their visible structure faithfully from the source. Block-specific fidelity rules: - Preserve source layout width, wrapper hierarchy, component geometry, responsive order, interaction contents, and exact visible copy. - Do not replace custom source details with default badges, buttons, cards, placeholders, or unrelated components. - Source content inventory (from the source markup): - Leading element is a check icon at `size-8` centered in a `size-14 md:size-16` circle with `border-2 border-primary text-primary rounded-full`. - Heading is `Your transfer is on the way` (the source joins `is` and `on` with a non-breaking space). - Body copy is `We've scheduled a transfer of 52.25 USD to your Preline balance. This transfer will be sent from your USD Debit Card.` - Exactly two actions in `flex flex-col sm:flex-row justify-center gap-3`: primary `Manage your transfers` first, then the secondary `Add another money` with a trailing chevron-right icon. - Wrapper is `py-20 max-w-lg mx-auto` and every element is centered; there is no card border, no form field, and no dismiss control. - The block itself is fully static; the confetti burst on load belongs to the iframe demo chrome (canvas-confetti), not to the block. Token and Tailwind rules: - Treat source token classes as semantic roles, not fixed class names to blindly copy. - Map every source `primary` role to the destination project's current primary token/config/CSS variable. Active links, checked states, progress lines, focus rings, primary gradients, logo primary fills/strokes, and primary buttons must share that destination primary color. - Do not hardcode Preline blue or emit `text-blue-*`, `bg-blue-*`, `border-blue-*`, `fill-blue-*`, `stroke-blue-*`, `from-blue-*`, `via-blue-*`, `to-blue-*`, or fixed blue hex/rgb values for primary roles unless the destination primary is explicitly blue. - Before using source-only token classes such as `text-foreground-inverse`, `bg-layer`, `border-layer-line`, `bg-navbar`, `border-line-2`, `bg-dropdown`, or similar Preline tokens, inspect the destination Tailwind config, global CSS/theme variables, and existing components for an equivalent utility/token. - Prefer existing destination utilities such as `text-white`, `text-primary-foreground`, `text-foreground`, `text-muted-foreground`, `bg-background`, `bg-card`, `bg-popover`, `border-border`, `bg-muted`, `bg-accent`, `ring-ring`, or app-specific tokens when they match the source role. - If no equivalent exists, add the smallest project-appropriate token or utility before using it. Do not leave undefined source classes in the generated markup. Asset and icon rules: - Use exact source images, avatars, product media, branded SVGs, payment marks, channel logos, and app icons when the source provides them. - Do not replace source assets with initials, emojis, generic icons, generated placeholders, or different stock media. - Ordinary interface icons should match the destination icon system. If the project uses Lucide-style outline icons, keep the 24 viewBox, `fill="none"`, `stroke="currentColor"`, rounded caps/joins, and source stroke widths. - Brand/source SVG shape is fixed content. Only map semantic colors such as primary fill/stroke to the destination token. Behavior and accessibility: - Preserve source interactions: links, buttons, dropdowns, tooltips, tabs, menus, drawers, modals, toggles, search, filters, form controls, validation states, loading/empty states, and open/closed defaults. - For source behavior powered by Preline JS or a third-party package, inspect installed dependencies and existing primitives first. Reuse a destination primitive only when it can preserve the source geometry, states, accessibility, and behavior. - Treat new dependencies as allowed by default unless the user, repository instructions, or package policy explicitly prohibit them. When no faithful equivalent exists, install/use the Preline UI runtime/plugin or the exact source third-party package; do not silently substitute ad hoc JavaScript or custom React state. - Only under an explicit dependency prohibition may you implement a scoped framework-native equivalent. It must preserve keyboard and focus management, placement and layering, responsive behavior, and accessibility; static or simplified approximations are not acceptable. - Use semantic HTML and accessible names. Keep `aria-current`, `aria-expanded`, `aria-haspopup`, `role`, labels, focus states, and keyboard behavior when the source exposes them or the destination primitive requires them. - Desktop and mobile states must not overlap text, clip controls, or shift layout unexpectedly. Controls with icons, counters, badges, and labels should keep stable dimensions across hover/focus/active states. Final QA: - Compare the result against the source preview and HTML tab. - Verify primary color follows the destination project, not Preline's default blue. - Verify all emitted classes exist in the destination or are added deliberately. - Verify responsive layout, focus states, dropdown/popover layering, long-text truncation, and source asset paths. - Keep the final implementation scoped to this block and avoid unrelated refactors. <!-- Success Message --> <div class="py-20 max-w-lg mx-auto"> <!-- Icon --> <div class="mb-5 sm:mb-7 text-center"> <span class="shrink-0 size-14 md:size-16 mx-auto flex justify-center items-center border-2 border-primary text-primary rounded-full"> <svg class="shrink-0 size-8" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg> </span> </div> <!-- End Icon --> <!-- Heading --> <div class="mb-5 sm:mb-8 text-center"> <h1 class="mb-1 md:mb-3 font-semibold text-xl md:text-2xl text-foreground"> Your transfer is on the way </h1> <p class="text-sm text-muted-foreground-1"> We've scheduled a transfer of 52.25 USD to your Preline balance. This transfer will be sent from your USD Debit Card. </p> </div> <!-- End Heading --> <!-- Button Group --> <div class="flex flex-col sm:flex-row justify-center gap-3"> <a class="py-3 px-4 inline-flex justify-center items-center gap-x-1.5 font-medium text-sm rounded-xl bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus" href="../../../templates/payments/payments-dashboard/index.html?page=transactions.html"> Manage your transfers </a> <a class="py-3 px-4 inline-flex justify-center items-center gap-x-1.5 font-medium text-sm rounded-xl bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" href="../../../templates/payments/payments-dashboard/index.html?page=add-money.html"> Add another money <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg> </a> </div> <!-- End Button Group --> </div> <!-- End Success Message --> <script src="../../../assets/vendor/canvas-confetti/dist/confetti.browser.js"></script> <script> window.addEventListener('load', () => { confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); }); </script> <!-- Clipboard --> <script src="../../../assets/vendor/clipboard/dist/clipboard.min.js"></script> <script src="https://preline.co/assets/js/hs-copy-clipboard-helper.js"></script>

Create a responsive UI block named "Payment Request Success Message with Share Link and Copy Actions" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy. Implementation preflight: - Exact public block reference: https://preline.co/blocks/feedback-states/success-states/#payment-request-success-message-with-share-link-and-copy-actions. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source. - Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic. - If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category. Build only this source block. Do not add unrelated page chrome, marketing sections, dashboard widgets, extra cards, extra modals, placeholder states, or footer content unless they are present in the source block. Source metadata: - Catalog family: feedback-states/success-states - Block ID: payment-request-success-message-with-share-link-and-copy-actions - Source description: The confirmation view combines request sharing tools with clear exit and repeat actions so the flow can continue without extra navigation. - Preview iframe: https://preline.co/blocks/feedback-states/success-states/iframes/pro/payment-request-success-message-with-share-link-and-copy-actions.html (repo path: blocks/feedback-states/success-states/iframes/pro/payment-request-success-message-with-share-link-and-copy-actions.html) - Source markup reference: - partials/pro/payments-dashboard/layouts-components/success-message-share-link.html Use the source HTML tab and referenced partials as the source of truth. Preserve exact visible copy, content order, hierarchy, component density, spacing relationships, borders, radii, icons, status markers, dropdown/menu rows, form states, responsive order, and interaction content. If the source imports shared partials or assets, reuse those local components/assets when the destination can import them; otherwise recreate their visible structure faithfully from the source. Block-specific fidelity rules: - Preserve source layout width, wrapper hierarchy, component geometry, responsive order, interaction contents, and exact visible copy. - Do not replace custom source details with default badges, buttons, cards, placeholders, or unrelated components. - Source content inventory (from the source markup): - Leading element is a centered check icon inside a `size-14 md:size-16` circle with `border-2 border-primary text-primary rounded-full`. - Heading is `Share your link`; the sub-copy is `Your request has been sent to Isabella Cruz. You’ll be notified once the payment is made.` (curly apostrophe). - Field label is `Request link` above a `readonly` input pre-filled with `https://preline.co/pay/r/7mY7kgn0jUeQU80`, with a small pill link reading `Open` pinned inside the field's trailing edge. - Actions in order: `Copy link` and `New request` side by side (`flex flex-col sm:flex-row justify-center gap-3 sm:gap-5`), then a full-width primary `Done` below them. - The copy button is Preline's clipboard integration: class `js-clipboard` with `data-clipboard-target="#hs-pro-pyrscib"`, `data-clipboard-action="copy"`, `data-clipboard-success-text="Request link copied"`, a hidden `js-clipboard-success` check icon, and a `js-clipboard-success-text` label span (ClipboardJS). - Wrapper is `py-20 max-w-lg mx-auto`; the confetti burst on page load comes from the iframe demo chrome (canvas-confetti), not from the block markup. Token and Tailwind rules: - Treat source token classes as semantic roles, not fixed class names to blindly copy. - Map every source `primary` role to the destination project's current primary token/config/CSS variable. Active links, checked states, progress lines, focus rings, primary gradients, logo primary fills/strokes, and primary buttons must share that destination primary color. - Do not hardcode Preline blue or emit `text-blue-*`, `bg-blue-*`, `border-blue-*`, `fill-blue-*`, `stroke-blue-*`, `from-blue-*`, `via-blue-*`, `to-blue-*`, or fixed blue hex/rgb values for primary roles unless the destination primary is explicitly blue. - Before using source-only token classes such as `text-foreground-inverse`, `bg-layer`, `border-layer-line`, `bg-navbar`, `border-line-2`, `bg-dropdown`, or similar Preline tokens, inspect the destination Tailwind config, global CSS/theme variables, and existing components for an equivalent utility/token. - Prefer existing destination utilities such as `text-white`, `text-primary-foreground`, `text-foreground`, `text-muted-foreground`, `bg-background`, `bg-card`, `bg-popover`, `border-border`, `bg-muted`, `bg-accent`, `ring-ring`, or app-specific tokens when they match the source role. - If no equivalent exists, add the smallest project-appropriate token or utility before using it. Do not leave undefined source classes in the generated markup. Asset and icon rules: - Use exact source images, avatars, product media, branded SVGs, payment marks, channel logos, and app icons when the source provides them. - Do not replace source assets with initials, emojis, generic icons, generated placeholders, or different stock media. - Ordinary interface icons should match the destination icon system. If the project uses Lucide-style outline icons, keep the 24 viewBox, `fill="none"`, `stroke="currentColor"`, rounded caps/joins, and source stroke widths. - Brand/source SVG shape is fixed content. Only map semantic colors such as primary fill/stroke to the destination token. Behavior and accessibility: - Preserve source interactions: links, buttons, dropdowns, tooltips, tabs, menus, drawers, modals, toggles, search, filters, form controls, validation states, loading/empty states, and open/closed defaults. - For source behavior powered by Preline JS or a third-party package, inspect installed dependencies and existing primitives first. Reuse a destination primitive only when it can preserve the source geometry, states, accessibility, and behavior. - Treat new dependencies as allowed by default unless the user, repository instructions, or package policy explicitly prohibit them. When no faithful equivalent exists, install/use the Preline UI runtime/plugin or the exact source third-party package; do not silently substitute ad hoc JavaScript or custom React state. - Only under an explicit dependency prohibition may you implement a scoped framework-native equivalent. It must preserve keyboard and focus management, placement and layering, responsive behavior, and accessibility; static or simplified approximations are not acceptable. - Use semantic HTML and accessible names. Keep `aria-current`, `aria-expanded`, `aria-haspopup`, `role`, labels, focus states, and keyboard behavior when the source exposes them or the destination primitive requires them. - Desktop and mobile states must not overlap text, clip controls, or shift layout unexpectedly. Controls with icons, counters, badges, and labels should keep stable dimensions across hover/focus/active states. Final QA: - Compare the result against the source preview and HTML tab. - Verify primary color follows the destination project, not Preline's default blue. - Verify all emitted classes exist in the destination or are added deliberately. - Verify responsive layout, focus states, dropdown/popover layering, long-text truncation, and source asset paths. - Keep the final implementation scoped to this block and avoid unrelated refactors. <!-- Success Message --> <div class="py-20 max-w-lg mx-auto"> <!-- Icon --> <div class="mb-5 sm:mb-7 text-center"> <span class="shrink-0 size-14 md:size-16 mx-auto flex justify-center items-center border-2 border-primary text-primary rounded-full"> <svg class="shrink-0 size-8" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"></path></svg> </span> </div> <!-- End Icon --> <!-- Heading --> <div class="mb-5 sm:mb-8 text-center"> <h1 class="mb-1 md:mb-3 font-semibold text-xl md:text-2xl text-foreground"> Share your link </h1> <p class="text-sm text-muted-foreground-1"> Your request has been sent to Isabella Cruz. You’ll be notified once the payment is made. </p> </div> <!-- End Heading --> <!-- Form --> <div class="flex flex-col gap-3 sm:gap-5"> <!-- Input --> <div> <label for="hs-pro-pyrscib" class="block mb-2 text-sm text-foreground"> Request link </label> <div class="relative"> <input id="hs-pro-pyrscib" type="text" class="py-2.5 sm:py-3 ps-4 pe-24 block w-full bg-layer border-layer-line sm:text-sm rounded-xl text-foreground placeholder:text-muted-foreground-1 ring-1 ring-transparent shadow-2xs hover:border-primary-hover hover:ring-primary-hover focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none" readonly value="https://preline.co/pay/r/7mY7kgn0jUeQU80"> <div class="absolute inset-y-0 inset-e-0 flex items-center z-20 pe-2"> <a class="py-1 px-2 inline-flex items-center gap-x-1 rounded-full font-medium text-sm bg-primary-100 text-primary-600 hover:bg-primary-200 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-200 dark:bg-primary-800/30 dark:hover:bg-primary-800/50 dark:text-primary-500 dark:focus:bg-primary-800/50" href="../../../templates/payments/payments-dashboard/payments-details.html"> Open <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6"/><path d="m21 3-9 9"/><path d="M15 3h6v6"/></svg> </a> </div> </div> </div> <!-- End Input --> <!-- Button Group --> <div class="flex flex-col sm:flex-row justify-center gap-3 sm:gap-5"> <button type="button" class="js-clipboard py-2.5 sm:py-3 px-4 w-full inline-flex justify-center items-center gap-x-2 sm:text-sm rounded-xl bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" data-clipboard-target="#hs-pro-pyrscib" data-clipboard-action="copy" data-clipboard-success-text="Request link copied"> <svg class="js-clipboard-default shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg> <svg class="js-clipboard-success hidden size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg> <span class="js-clipboard-success-text">Copy link</span> </button> <a class="py-2.5 sm:py-3 px-4 w-full inline-flex justify-center items-center gap-x-2 sm:text-sm rounded-xl bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" href="../../../templates/payments/payments-dashboard/request.html"> <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg> New request </a> </div> <!-- End Button Group --> <a class="py-2.5 sm:py-3 px-4 w-full inline-flex justify-center items-center gap-x-2 font-medium sm:text-sm rounded-xl bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus" href="../../../templates/payments/payments-dashboard/index.html"> Done </a> </div> <!-- End Form --> </div> <!-- End Success Message --> <script src="../../../assets/vendor/canvas-confetti/dist/confetti.browser.js"></script> <script> window.addEventListener('load', () => { confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); }); </script> <!-- Clipboard --> <script src="../../../assets/vendor/clipboard/dist/clipboard.min.js"></script> <script src="https://preline.co/assets/js/hs-copy-clipboard-helper.js"></script>