@radix-ui/themes/dist/esm/components/callout.js

[](https://radix-ui.com/themes)

"use client";import*as o from"react";import n from"classnames";import{Slot as h}from"@radix-ui/react-slot";import{Text as u}from"./text.js";import{calloutRootPropDefs as C}from"./callout.props.js";import{extractProps as T,mapCalloutSizeToTextSize as i,mapResponsiveProp as c}from"../helpers/index.js";import{marginPropDefs as y}from"../props/index.js";const m=o.createContext({}),P=o.forwardRef((t,r)=>{const{size:e=C.size.default,highContrast:l=C.highContrast.default}=t,{asChild:s,children:a,className:d,color:p,...R}=T(t,C,y);return o.createElement(s?h:"div",{"data-accent-color":p,...R,className:n("rt-CalloutRoot",d),ref:r},o.createElement(m.Provider,{value:o.useMemo(()=>({size:e,color:p,highContrast:l}),[e,p,l])},a))});P.displayName="Callout.Root";const f=o.forwardRef(({className:t,...r},e)=>{const{color:l,size:s,highContrast:a}=o.useContext(m);return o.createElement(u,{asChild:!0,color:l,size:c(s,i),highContrast:a},o.createElement("div",{...r,className:n("rt-CalloutIcon",t),ref:e}))});f.displayName="Callout.Icon";const x=o.forwardRef(({className:t,...r},e)=>{const{color:l,size:s,highContrast:a}=o.useContext(m);return o.createElement(u,{as:"p",size:c(s,i),color:l,highContrast:a,...r,asChild:!1,ref:e,className:n("rt-CalloutText",t)})});x.displayName="Callout.Text";export{f as Icon,P as Root,x as Text};
//# sourceMappingURL=callout.js.map