@while-and-for/tremor-react/dist/components/text-elements/Callout/Callout.cjs

The React library to build dashboards faster.

"use strict";var e=require("tslib"),r=require("react"),t=require("../../../lib/shape.cjs"),a=require("../../../lib/sizing.cjs"),l=require("../../../lib/spacing.cjs"),o=require("../../../lib/theme.cjs"),s=require("../../../lib/utils.cjs"),i=require("../../../lib/tremorTwMerge.cjs");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=d(r);const m=s.makeClassName("Callout"),c=n.default.forwardRef(((r,d)=>{const{title:c,icon:g,color:u,className:f,children:b}=r,p=e.__rest(r,["title","icon","color","className","children"]),h=g;return n.default.createElement("div",Object.assign({ref:d,className:i.tremorTwMerge(m("root"),"flex flex-col overflow-hidden rounded-tremor-default text-tremor-default",u?i.tremorTwMerge(s.getColorClassNames(u,o.colorPalette.canvasBackground).bgColor,s.getColorClassNames(u,o.colorPalette.darkBorder).borderColor,s.getColorClassNames(u,o.colorPalette.darkText).textColor):i.tremorTwMerge("bg-tremor-brand-faint border-tremor-brand-emphasis text-tremor-brand-emphasis","dark:bg-dark-tremor-brand-faint dark:border-dark-tremor-brand-emphasis dark:text-dark-tremor-brand-emphasis"),l.spacing.lg.paddingY,l.spacing.lg.paddingRight,l.spacing.twoXl.paddingLeft,t.border.lg.left,f)},p),n.default.createElement("div",{className:i.tremorTwMerge(m("header"),"flex items-start")},h?n.default.createElement(h,{className:i.tremorTwMerge(m("icon"),"flex-none",a.sizing.lg.height,a.sizing.lg.width,l.spacing.xs.marginRight)}):null,n.default.createElement("h4",{className:i.tremorTwMerge(m("title"),"font-semibold")},c)),n.default.createElement("p",{className:i.tremorTwMerge(m("body"),"overflow-y-auto",b?l.spacing.sm.marginTop:"")},b))}));c.displayName="Callout",module.exports=c;