4c:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d:I[544296,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"ItemStyles"] 4e:I[34002,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"CodeEditor"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 50:T1d2a,"use client"; import * as React from "react"; import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/lib/utils"; import { useMorph } from "@/lib/cojeev-motion/use-morph"; import { Button } from "@/components/ui/button"; const AlertVariants = cva( "v-alert [display:grid] [gap:0_16px] [align-items:start] [padding:16px_20px_17px_16px] [border-radius:20px] [background:var(--v-beige)] [grid-template-columns:40px_minmax(0,1fr)] [position:relative] [overflow:hidden] [isolation:isolate]", { variants: { variant: { default: "", info: "-info [background:var(--status-info-bg)] [--muted-foreground:var(--muted-foreground-tinted)] [color:var(--v-on-accent)] [--hue-ink:var(--status-info-ink)]", ok: "-ok [background:var(--status-ok-bg)] [--muted-foreground:var(--muted-foreground-tinted)] [color:var(--v-on-accent)] [--hue-ink:var(--status-ok-ink)]", warn: "-warn [background:var(--status-warn-bg)] [--muted-foreground:var(--muted-foreground-tinted)] [color:var(--v-on-accent)] [--hue-ink:var(--status-warn-ink)]", danger: "-danger [background:var(--status-danger-bg)] [--muted-foreground:var(--muted-foreground-tinted)] [--hue-ink:var(--status-danger-ink)]", pink: "-pink [background:var(--v-pink)] [--muted-foreground:var(--muted-foreground-ink)] [color:var(--v-on-accent)] [--hue:var(--v-paper)] [--hue-deep:var(--v-pink-deep)]", }, size: { default: "" }, }, defaultVariants: { variant: "default", size: "default" }, }, ); export type AlertPresentation = "note" | "banner" | "dispatch"; export type AlertProps = React.ComponentProps<"div"> & VariantProps & { as?: React.ElementType; presentation?: AlertPresentation; }; export function Alert({ as: Tag = "div", className, variant, size, ref, presentation, ...props }: AlertProps) { const ownedRef = useMorph("cards", ref); return ( ); } const AlertBodyVariants = cva( "v-alert__body [display:grid] [gap:3px] [flex:1] [padding-top:9px] [min-width:0] [position:relative] [z-index:1]", { variants: { variant: { default: "" }, size: { default: "" } }, defaultVariants: { variant: "default", size: "default" }, }, ); export type AlertBodyProps = React.ComponentProps<"div"> & VariantProps & { as?: React.ElementType }; export function AlertBody({ as: Tag = "div", className, variant, size, ...props }: AlertBodyProps) { return ( ); } const AlertTitleVariants = cva( "v-alert__title [font-weight:600] [font-size:15.5px] [line-height:1.3] [letter-spacing:-.005em]", { variants: { variant: { default: "" }, size: { default: "" } }, defaultVariants: { variant: "default", size: "default" }, }, ); export type AlertTitleProps = React.ComponentProps<"div"> & VariantProps & { as?: React.ElementType }; export function AlertTitle({ as: Tag = "div", className, variant, size, ...props }: AlertTitleProps) { return ( ); } const AlertDescriptionVariants = cva( "v-alert__text [font-size:13.5px] [color:var(--muted-foreground)] [line-height:1.45]", { variants: { variant: { default: "" }, size: { default: "" } }, defaultVariants: { variant: "default", size: "default" }, }, ); export type AlertDescriptionProps = React.ComponentProps<"div"> & VariantProps & { as?: React.ElementType }; export function AlertDescription({ as: Tag = "div", className, variant, size, ...props }: AlertDescriptionProps) { return ( ); } const AlertKickerVariants = cva( "v-alert__kicker [font-size:10.5px] [font-weight:600] [letter-spacing:.08em] [text-transform:uppercase] [color:var(--hue-ink,var(--alert-ink))] [margin-bottom:2px]", { variants: { variant: { default: "" }, size: { default: "" } }, defaultVariants: { variant: "default", size: "default" }, }, ); export type AlertKickerProps = React.ComponentProps<"div"> & VariantProps & { as?: React.ElementType }; export function AlertKicker({ as: Tag = "div", className, variant, size, ...props }: AlertKickerProps) { return ( ); } const AlertIconVariants = cva("v-alert__blob ", { variants: { variant: { default: "" }, size: { default: "" } }, defaultVariants: { variant: "default", size: "default" }, }); export type AlertIconProps = React.ComponentProps<"span"> & VariantProps & { as?: React.ElementType }; export function AlertIcon({ as: Tag = "span", className, variant, size, ref, ...props }: AlertIconProps) { const ownedRef = useMorph("icons", ref); return ( ); } const AlertActionsVariants = cva( "v-alert__actions [display:flex] [gap:8px] [margin-top:10px] [flex-wrap:wrap]", { variants: { variant: { default: "" }, size: { default: "" } }, defaultVariants: { variant: "default", size: "default" }, }, ); export type AlertActionsProps = React.ComponentProps<"div"> & VariantProps & { as?: React.ElementType }; export function AlertActions({ as: Tag = "div", className, variant, size, ...props }: AlertActionsProps) { return ( ); } const AlertCloseVariants = cva("v-alert__close ", { variants: { variant: { default: "" }, size: { default: "" } }, defaultVariants: { variant: "default", size: "default" }, }); export type AlertCloseProps = React.ComponentProps<"button"> & VariantProps & { as?: React.ElementType }; export function AlertClose({ as: Tag = "button", className, variant, size, ...props }: AlertCloseProps) { return ( ); } 51:T3d60,@layer cojeev-states { /* Orthogonal authored class modifiers remain composable with CVA axes. */ .v-alert[data-slot].-info { background: var(--status-info-bg); --muted-foreground: var(--muted-foreground-tinted); color: var(--v-on-accent); --hue-ink: var(--status-info-ink); } .v-alert[data-slot].-ok { background: var(--status-ok-bg); --muted-foreground: var(--muted-foreground-tinted); color: var(--v-on-accent); --hue-ink: var(--status-ok-ink); } .v-alert[data-slot].-warn { background: var(--status-warn-bg); --muted-foreground: var(--muted-foreground-tinted); color: var(--v-on-accent); --hue-ink: var(--status-warn-ink); } .v-alert[data-slot].-danger { background: var(--status-danger-bg); --muted-foreground: var(--muted-foreground-tinted); --hue-ink: var(--status-danger-ink); } .v-alert[data-slot].-pink { background: var(--v-pink); --muted-foreground: var(--muted-foreground-ink); color: var(--v-on-accent); --hue: var(--v-paper); --hue-deep: var(--v-pink-deep); } /* Authored contextual and pseudo-element rules, scoped to component-owned roots. */ .v-alert[data-slot][data-morph] { --mfill: var(--v-beige); } .v-alert[data-slot].-info[data-morph] { --mfill: var(--v-blue-soft); } .v-alert[data-slot].-ok[data-morph] { --mfill: var(--v-olive-soft); } .v-alert[data-slot].-warn[data-morph] { --mfill: var(--v-yellow-soft); } .v-alert[data-slot].-danger[data-morph] { --mfill: var(--v-danger-soft); } .v-alert[data-slot].-pink[data-morph] { --mfill: var(--v-pink); } .v-alert[data-slot].-danger .v-alert__title { color: var(--v-danger-ink); } .v-alert[data-slot].-ok .v-alert__title { color: var(--status-ok-ink); } .v-alert[data-slot].-warn .v-alert__title { color: var(--status-warn-ink); } .v-alert[data-slot].-danger .v-alert__title { color: var(--status-danger-ink); } .v-alert[data-slot].-info .v-alert__title { color: var(--status-info-ink); } .v-alert[data-slot].-ok .v-alert__text { color: rgba(17, 17, 17, 0.68); } .v-alert[data-slot].-warn .v-alert__text { color: rgba(17, 17, 17, 0.68); } .v-alert[data-slot].-danger .v-alert__text { color: rgba(17, 17, 17, 0.68); } .v-alert[data-slot].-info .v-alert__text { color: rgba(17, 17, 17, 0.68); } .v-alert[data-slot] > .v-icon:first-child { width: 32px; height: 32px; padding: 7px; border-radius: 50%; background: var(--v-canvas); color: var(--v-on-accent); stroke-width: 1.8; } .v-alert__text[data-slot] a { color: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; } .v-alert[data-slot].-info > .v-icon:first-child { background: var(--v-blue); } .v-alert[data-slot].-ok > .v-icon:first-child { background: var(--v-olive); } .v-alert[data-slot].-warn > .v-icon:first-child { background: var(--v-yellow); } .v-alert[data-slot].-danger > .v-icon:first-child { background: var(--v-danger-fill); color: var(--destructive-foreground); } .v-alert[data-slot].-pink > .v-icon:first-child { background: var(--v-canvas); } .v-alert[data-slot].-ok .v-alert__text { color: var(--alert-ink); } .v-alert[data-slot].-warn .v-alert__text { color: var(--alert-ink); } .v-alert[data-slot].-danger .v-alert__text { color: var(--alert-ink); } .v-alert[data-slot].-info .v-alert__text { color: var(--alert-ink); } .v-alert[data-slot] .v-alert__text { color: var(--alert-ink); } :root[data-mode="dark"] .v-alert[data-slot] .v-alert__text { color: var(--v-text-2); } :root[data-mode="dark"] .v-alert[data-slot].-info { color: var(--v-text); } :root[data-mode="dark"] .v-alert[data-slot].-ok { color: var(--v-text); } :root[data-mode="dark"] .v-alert[data-slot].-warn { color: var(--v-text); } .v-alert[data-slot] > .v-icon:first-child { position: relative; z-index: 1; width: 40px; height: 40px; padding: 10px; border-radius: 46% 54% 50% 50%/50% 46% 54% 50%; color: var(--v-on-accent); background: var(--hue, var(--v-beige)); stroke-width: 1.9; display: grid; place-items: center; } .v-alert[data-slot] > .v-alert__blob { position: relative; z-index: 1; width: 40px; height: 40px; padding: 10px; border-radius: 46% 54% 50% 50%/50% 46% 54% 50%; color: var(--v-on-accent); background: var(--hue, var(--v-beige)); stroke-width: 1.9; display: grid; place-items: center; } .v-alert[data-slot] > .v-alert__blob > .v-icon { width: 20px; height: 20px; } .v-alert[data-slot] > .v-alert__blob:has(> svg.v-morph) { background: transparent; } .v-alert[data-slot] > .v-alert__blob > svg.v-morph { z-index: 0; } .v-alert[data-slot]::after { content: ""; position: absolute; right: -6%; top: -40%; width: 34%; aspect-ratio: 1; background: var(--hue-deep, var(--v-beige-2)); -webkit-mask: var(--wm-m) center/contain no-repeat; mask: var(--wm-m) center/contain no-repeat; opacity: 0.55; pointer-events: none; z-index: 0; } .v-alert[data-slot].-info { --hue: var(--v-blue); --hue-deep: var(--v-blue-deep); background: color-mix(in oklab, var(--v-blue) 30%, var(--v-canvas)); --wm-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='24' r='20'/%3E%3Ccircle cx='76' cy='50' r='20'/%3E%3Ccircle cx='50' cy='76' r='20'/%3E%3Ccircle cx='24' cy='50' r='20'/%3E%3Ccircle cx='50' cy='50' r='22'/%3E%3C/svg%3E"); } .v-alert[data-slot].-ok { --hue: var(--v-olive); --hue-deep: var(--v-olive-deep); background: color-mix(in oklab, var(--v-olive) 26%, var(--v-canvas)); --wm-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 90C22 68 6 52 6 33A20 20 0 0 1 50 21A20 20 0 0 1 94 33C94 52 78 68 50 90Z'/%3E%3C/svg%3E"); } .v-alert[data-slot].-warn { --hue: var(--v-yellow); --hue-deep: var(--v-yellow-deep); background: color-mix(in oklab, var(--v-yellow) 34%, var(--v-canvas)); --wm-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 2l12 30 30 12-30 12-12 30-12-30-30-12 30-12z'/%3E%3C/svg%3E"); } .v-alert[data-slot].-danger { --hue: var(--v-danger-fill); --hue-deep: var(--danger-deep); background: color-mix(in oklab, var(--v-danger) 13%, var(--v-canvas)); --wm-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M60 5A45 45 0 1 0 60 95A50 50 0 0 1 60 5Z'/%3E%3C/svg%3E"); } .v-alert[data-slot].-danger > .v-icon:first-child { color: var(--destructive-foreground); } .v-alert[data-slot].-danger > .v-alert__blob { color: var(--destructive-foreground); } .v-alert[data-slot]:not([class*=" -"]) { background: var(--v-beige); } .v-alert[data-slot]:not([class*=" -"]) > .v-icon:first-child { background: var(--v-beige-2); } .v-alert[data-slot]:not([class*=" -"]) > .v-alert__blob { background: var(--v-beige-2); } .v-alert[data-slot]:not([class*=" -"])::after { background: var(--v-beige-2); } .v-alert[data-slot].-ok .v-alert__title { color: var(--v-on-accent); } .v-alert[data-slot].-warn .v-alert__title { color: var(--v-on-accent); } .v-alert[data-slot].-info .v-alert__title { color: var(--v-on-accent); } .v-alert__actions[data-slot] .v-btn { height: 32px; padding: 0 14px; font-size: 13px; } .v-alert[data-slot] > .v-alert__close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; min-width: 44px; padding: 0; z-index: 2; background: rgba(251, 244, 230, 0.6); box-shadow: none; } .v-alert[data-slot] > .v-alert__close:hover { background: var(--v-canvas); } .v-alert[data-slot]::after { width: 26%; top: -24%; right: -3%; opacity: 0.55; } .v-alert[data-slot]:has(.v-alert__close) .v-alert__body { padding-right: 34px; } .v-alert[data-slot] > .v-alert__close { cursor: pointer; transition: background var(--t-micro), transform var(--t-micro) var(--enter); } .v-alert[data-slot] > .v-alert__close:hover { transform: none; } :root[data-mode="dark"] .v-alert[data-slot].-info { color: var(--v-text); } :root[data-mode="dark"] .v-alert[data-slot].-ok { color: var(--v-text); } :root[data-mode="dark"] .v-alert[data-slot].-warn { color: var(--v-text); } :root[data-mode="dark"] .v-alert[data-slot].-danger { color: var(--v-text); } :root[data-mode="dark"] .v-alert[data-slot].-info .v-alert__title { color: var(--v-text); } :root[data-mode="dark"] .v-alert[data-slot].-ok .v-alert__title { color: var(--v-text); } :root[data-mode="dark"] .v-alert[data-slot].-warn .v-alert__title { color: var(--v-text); } :root[data-mode="dark"] .v-alert[data-slot].-danger .v-alert__title { color: var(--v-text); } :root[data-mode="dark"] .v-alert[data-slot] .v-alert__text { color: var(--v-text-2); } :root[data-mode="dark"] .v-alert[data-slot].-info { background: color-mix(in oklab, var(--v-blue) 18%, var(--v-canvas)); } :root[data-mode="dark"] .v-alert[data-slot].-ok { background: color-mix(in oklab, var(--v-olive) 18%, var(--v-canvas)); } :root[data-mode="dark"] .v-alert[data-slot].-warn { background: color-mix(in oklab, var(--v-yellow) 16%, var(--v-canvas)); } :root[data-mode="dark"] .v-alert[data-slot].-danger { background: color-mix(in oklab, var(--v-danger) 16%, var(--v-canvas)); } :root[data-mode="dark"] .v-alert[data-slot]::after { opacity: 0.25; } :root[data-mode="dark"] .v-alert[data-slot] > .v-alert__close { background: rgba(246, 239, 226, 0.1); color: var(--v-text); } /* The authored icon body is transparent; keep the glyph legible on the alert surface. */ .v-alert[data-slot] > .v-alert__blob > .v-icon { color: var(--v-text); } .v-alert[data-slot].-danger > .v-alert__blob > .v-icon { color: var(--v-danger-ink); } .v-alert[data-slot].-pink > .v-alert__blob > .v-icon { color: var(--v-on-accent); } /* Pink stays light in either theme, including secondary copy and ghost actions. */ :root[data-mode="dark"] .v-alert[data-slot].-pink .v-alert__text { color: var(--alert-ink); } .v-alert[data-slot].-pink .v-btn.-ghost:not(:disabled):not([aria-disabled="true"]) { color: var(--v-on-accent); } .v-alert[data-slot].-pink .v-btn.-ghost:not(:disabled):not([aria-disabled="true"]):hover { background: color-mix(in oklab, var(--v-pink) 88%, var(--ink-fixed)); } .v-alert__body[data-slot] { grid-template-columns: minmax(0, 1fr); } .v-alert[data-slot] :is(.v-alert__title, .v-alert__text) { min-width: 0; overflow-wrap: anywhere; } /* New compositions retain semantic colours, with one stamp and one quiet face. */ .v-alert[data-slot][data-presentation] { container-type: inline-size; --alert-accent: var(--hue, var(--v-pink)); padding: 24px; gap: 16px; background: var(--v-canvas); color: var(--v-text); border: 1px solid var(--v-border); border-radius: min(var(--v-control-radius, 20px), 28px); } .v-alert[data-slot][data-presentation]::after { display: none; } .v-alert[data-slot][data-presentation] .v-alert__title { color: var(--v-text); font-size: 19px; line-height: 1.3; font-family: var(--font-display); } .v-alert[data-slot][data-presentation] .v-alert__text { color: var(--v-text-2); font-size: 13px; line-height: 1.6; } .v-alert[data-slot][data-presentation] .v-alert__body { padding-top: 0; gap: 8px; } .v-alert[data-slot][data-presentation] .v-alert__kicker { color: var(--v-text-2); font-size: 10px; letter-spacing: 0.04em; } .v-alert[data-slot][data-presentation] .v-alert__actions { margin-top: 8px; gap: 8px; } .v-alert[data-slot] .v-alert__actions .v-btn { min-height: 44px; height: auto; padding: 8px 16px; } .v-alert[data-slot][data-presentation] > .v-alert__blob { --mfill: var(--alert-accent); background: var(--alert-accent); color: var(--v-on-accent); } .v-alert[data-slot][data-presentation] > .v-alert__blob > .v-icon { color: var(--v-on-accent); } .v-alert[data-slot][data-presentation] > .v-alert__blob:has(> svg.v-morph) { background: transparent; } .v-alert[data-slot][data-presentation] > .v-alert__close { background: transparent; color: var(--v-text-2); } .v-alert[data-slot][data-presentation]:has(.v-alert__close) .v-alert__body { padding-inline-end: 30px; } .v-alert[data-slot][data-presentation="note"] { border-inline-start: 4px solid var(--alert-accent); border-radius: 4px min(var(--v-control-radius, 20px), 28px) min(var(--v-control-radius, 20px), 28px) 4px; } .v-alert[data-slot][data-presentation="banner"] { border-radius: 12px; background: color-mix(in srgb, var(--alert-accent) 10%, var(--v-canvas)); grid-template-columns: 40px minmax(0, 1fr); align-items: center; padding: 16px 20px; } .v-alert[data-slot][data-presentation="banner"] .v-alert__body { grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; } .v-alert[data-slot][data-presentation="banner"] .v-alert__title { font-size: 16px; } .v-alert[data-slot][data-presentation="banner"] .v-alert__kicker { display: none; } .v-alert[data-slot][data-presentation="banner"] .v-alert__title, .v-alert[data-slot][data-presentation="banner"] .v-alert__text { grid-column: 1; } .v-alert[data-slot][data-presentation="banner"] .v-alert__actions { grid-column: 2; grid-row: 1/3; margin: 0; } .v-alert[data-slot][data-presentation="dispatch"] { grid-template-columns: minmax(0, 1fr); padding: 24px 28px; border-radius: 4px 24px 24px 24px; background: linear-gradient( 135deg, color-mix(in srgb, var(--alert-accent) 10%, var(--v-canvas)), var(--v-canvas) 70% ); } .v-alert[data-slot][data-presentation="dispatch"] > .v-alert__blob { width: 48px; height: 48px; } .v-alert[data-slot][data-presentation="dispatch"] .v-alert__title { font-size: 24px; max-width: 26ch; } .v-alert[data-slot][data-presentation="dispatch"] .v-alert__actions { border-top: 1px dashed var(--v-border); padding-top: 14px; margin-top: 12px; } .v-alert[data-slot][data-presentation="dispatch"] .v-alert__body { padding-inline-end: 0; } .v-alert[data-slot][data-presentation="dispatch"]::before { content: ""; position: absolute; inset: auto 0 0 auto; width: 24px; height: 24px; pointer-events: none; background: linear-gradient( 135deg, transparent 48%, var(--v-border) 50%, color-mix(in srgb, var(--alert-accent) 25%, var(--v-canvas)) 54% ); } @container (max-width:460px) { .v-alert[data-slot][data-presentation="banner"] > .v-alert__blob { align-self: start; } .v-alert[data-slot][data-presentation="banner"] .v-alert__body { grid-template-columns: minmax(0, 1fr); } .v-alert[data-slot][data-presentation="banner"] .v-alert__actions { grid-column: 1; grid-row: auto; margin-top: 8px; } } .v-message-example { width: 100%; min-width: 0; display: grid; gap: 16px; } .v-message-example__hint { margin: 0; color: var(--v-text-2); font-size: 11px; line-height: 1.6; } .v-message-example__restored { display: flex; align-items: center; gap: 16px; justify-content: space-between; flex-wrap: wrap; min-height: 100px; padding: 20px; border: 1px dashed var(--v-border); border-radius: 16px; } .v-message-example__restored p { margin: 0; font-size: 13px; color: var(--v-text-2); } .v-message-example__notes { border-inline-start: 2px solid var(--v-blue); padding: 4px 0 4px 18px; } .v-message-example__notes h4 { font-size: 15px; font-weight: var(--fw-title); margin: 0 0 8px; } .v-message-example__notes ul { padding: 0; margin: 0; list-style: none; display: grid; gap: 8px; } .v-message-example__notes li { display: flex; gap: 12px; align-items: baseline; font-size: 13px; color: var(--v-text-2); } .v-message-example__notes li span { font-family: var(--font-mono); font-size: 10px; } } 4b:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"class-variance-authority"}]]}]}]]}],["$","$L4c",null,{"namespace":"@000h-cojeev","registryDependencies":["https://000h.cojeev.com/r/cojeev.json","https://000h.cojeev.com/r/button.json"]}]]}],["$","$L4d",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L4e",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"@/styles/cojeev/alert.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L4f",null,{"files":[{"path":"registry/cojeev/ui/alert.tsx","content":"$50","type":"registry:ui"},{"path":"registry/cojeev/styles/alert.css","content":"$51","type":"registry:file","target":"styles/cojeev/alert.css"}],"className":"h-[70svh] min-h-80"}]]}]