@lobehub/ui/es/mdx/Callout/index.mjs.map

Lobe UI is an open-source UI component library for building AIGC web apps

{"version":3,"file":"index.mjs","names":["Callout: FC<CalloutProps>","Flexbox","Icon"],"sources":["../../../src/mdx/Callout/index.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar, cx, useTheme } from 'antd-style';\nimport { AlertOctagon, AlertTriangle, Info, Lightbulb, MessageSquareWarning } from 'lucide-react';\nimport { FC, useMemo } from 'react';\n\nimport { Flexbox, FlexboxProps } from '@/Flex';\nimport Icon from '@/Icon';\n\nimport { styles } from './style';\n\nexport interface CalloutProps extends FlexboxProps {\n  type?: 'tip' | 'error' | 'important' | 'info' | 'warning';\n}\n\nconst Callout: FC<CalloutProps> = ({ children, type = 'info', className, style, ...rest }) => {\n  const theme = useTheme();\n  const typeConfig = useMemo(\n    () => ({\n      error: {\n        background: theme.colorErrorFillTertiary,\n        color: cssVar.colorError,\n        icon: AlertOctagon,\n      },\n      important: {\n        background: theme.purpleFillTertiary,\n        color: cssVar.purple,\n        icon: MessageSquareWarning,\n      },\n      info: {\n        background: theme.colorInfoFillTertiary,\n        color: cssVar.colorInfo,\n        icon: Info,\n      },\n      tip: {\n        background: theme.colorSuccessFillTertiary,\n        color: cssVar.colorSuccess,\n        icon: Lightbulb,\n      },\n      warning: {\n        background: theme.colorWarningFillTertiary,\n        color: cssVar.colorWarning,\n        icon: AlertTriangle,\n      },\n    }),\n    [theme],\n  );\n\n  const selectedType = typeConfig?.[type] || typeConfig.info;\n\n  const { icon, color, background } = selectedType;\n\n  return (\n    <Flexbox\n      align={'flex-start'}\n      className={cx(styles.container, className)}\n      horizontal\n      style={{\n        background: background,\n        boxShadow: `0 0 0 1px ${background} inset`,\n        color,\n        ...style,\n      }}\n      {...rest}\n    >\n      <Icon icon={icon} size={{ size: '1.2em' }} style={{ marginBlock: '0.25em' }} />\n      <div className={cx(styles.content, type === 'info' && styles.underlineAnchor)}>\n        <div>{children}</div>\n      </div>\n    </Flexbox>\n  );\n};\n\nCallout.displayName = 'MdxCallout';\n\nexport default Callout;\n"],"mappings":";;;;;;;;;;;AAeA,MAAMA,WAA6B,EAAE,UAAU,OAAO,QAAQ,WAAW,OAAO,GAAG,WAAW;CAC5F,MAAM,QAAQ,UAAU;CACxB,MAAM,aAAa,eACV;EACL,OAAO;GACL,YAAY,MAAM;GAClB,OAAO,OAAO;GACd,MAAM;GACP;EACD,WAAW;GACT,YAAY,MAAM;GAClB,OAAO,OAAO;GACd,MAAM;GACP;EACD,MAAM;GACJ,YAAY,MAAM;GAClB,OAAO,OAAO;GACd,MAAM;GACP;EACD,KAAK;GACH,YAAY,MAAM;GAClB,OAAO,OAAO;GACd,MAAM;GACP;EACD,SAAS;GACP,YAAY,MAAM;GAClB,OAAO,OAAO;GACd,MAAM;GACP;EACF,GACD,CAAC,MAAM,CACR;CAID,MAAM,EAAE,MAAM,OAAO,eAFA,aAAa,SAAS,WAAW;AAItD,QACE,qBAACC;EACC,OAAO;EACP,WAAW,GAAG,OAAO,WAAW,UAAU;EAC1C;EACA,OAAO;GACO;GACZ,WAAW,aAAa,WAAW;GACnC;GACA,GAAG;GACJ;EACD,GAAI;aAEJ,oBAACC;GAAW;GAAM,MAAM,EAAE,MAAM,SAAS;GAAE,OAAO,EAAE,aAAa,UAAU;IAAI,EAC/E,oBAAC;GAAI,WAAW,GAAG,OAAO,SAAS,SAAS,UAAU,OAAO,gBAAgB;aAC3E,oBAAC,SAAK,WAAe;IACjB;GACE;;AAId,QAAQ,cAAc;AAEtB,sBAAe"}