{"version":3,"file":"Message.cjs","names":[],"sources":["../../../src/components/Form/Message.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, { forwardRef, type PropsWithChildren } from \"react\";\nimport { Message } from \"@radix-ui/react-form\";\nimport CheckCircleSolidIcon from \"@vector-im/compound-design-tokens/assets/web/icons/check-circle-solid\";\nimport ErrorIcon from \"@vector-im/compound-design-tokens/assets/web/icons/error-solid\";\n\nimport styles from \"./form.module.css\";\nimport classNames from \"classnames\";\nimport { InlineSpinner } from \"../InlineSpinner\";\n\ntype MessageProps = {\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n} & React.ComponentProps<typeof Message>;\n\n/**\n * An error message to display below a form control.\n */\nexport const ErrorMessage = forwardRef<\n  HTMLSpanElement,\n  PropsWithChildren<MessageProps>\n>(function ErrorMessage({ children, className, ...props }, ref) {\n  const classes = classNames(\n    styles.message,\n    styles[\"error-message\"],\n    className,\n  );\n  return (\n    <Message ref={ref} {...props} className={classes}>\n      <ErrorIcon />\n      {children}\n    </Message>\n  );\n});\n\n/**\n * A success message to display below a form control.\n */\nexport const SuccessMessage = forwardRef<\n  HTMLSpanElement,\n  PropsWithChildren<MessageProps>\n>(function SuccessMessage({ children, className, ...props }, ref) {\n  const classes = classNames(\n    styles.message,\n    styles[\"success-message\"],\n    className,\n  );\n  return (\n    <Message ref={ref} {...props} className={classes}>\n      <CheckCircleSolidIcon />\n      {children}\n    </Message>\n  );\n});\n\n/**\n * A message showing a loading state\n */\nexport const LoadingMessage = forwardRef<\n  HTMLSpanElement,\n  PropsWithChildren<MessageProps>\n>(function LoadingMessage({ children, className, ...props }, ref) {\n  const classes = classNames(styles.message, className);\n  return (\n    <Message ref={ref} {...props} className={classes}>\n      <InlineSpinner />\n      {children}\n    </Message>\n  );\n});\n\n/**\n * A help message to display below a form control.\n */\nexport const HelpMessage = forwardRef<\n  HTMLSpanElement,\n  PropsWithChildren<MessageProps>\n>(function HelpMessage({ children, className, ...props }, ref) {\n  const classes = classNames(styles.message, styles[\"help-message\"], className);\n  return (\n    <Message ref={ref} {...props} className={classes}>\n      {children}\n    </Message>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;AA0BA,IAAa,gBAAA,GAAA,MAAA,YAGX,SAAS,aAAa,EAAE,UAAU,WAAW,GAAG,SAAS,KAAK;CAC9D,MAAM,WAAA,GAAA,WAAA,SACJ,oBAAA,QAAO,SACP,oBAAA,QAAO,kBACP,UACD;AACD,QACE,iBAAA,GAAA,kBAAA,MAAC,qBAAA,SAAD;EAAc;EAAK,GAAI;EAAO,WAAW;YAAzC,CACE,iBAAA,GAAA,kBAAA,KAAC,+DAAA,SAAD,EAAa,CAAA,EACZ,SACO;;EAEZ;;;;AAKF,IAAa,kBAAA,GAAA,MAAA,YAGX,SAAS,eAAe,EAAE,UAAU,WAAW,GAAG,SAAS,KAAK;CAChE,MAAM,WAAA,GAAA,WAAA,SACJ,oBAAA,QAAO,SACP,oBAAA,QAAO,oBACP,UACD;AACD,QACE,iBAAA,GAAA,kBAAA,MAAC,qBAAA,SAAD;EAAc;EAAK,GAAI;EAAO,WAAW;YAAzC,CACE,iBAAA,GAAA,kBAAA,KAAC,sEAAA,SAAD,EAAwB,CAAA,EACvB,SACO;;EAEZ;;;;AAKF,IAAa,kBAAA,GAAA,MAAA,YAGX,SAAS,eAAe,EAAE,UAAU,WAAW,GAAG,SAAS,KAAK;CAChE,MAAM,WAAA,GAAA,WAAA,SAAqB,oBAAA,QAAO,SAAS,UAAU;AACrD,QACE,iBAAA,GAAA,kBAAA,MAAC,qBAAA,SAAD;EAAc;EAAK,GAAI;EAAO,WAAW;YAAzC,CACE,iBAAA,GAAA,kBAAA,KAAC,sBAAA,eAAD,EAAiB,CAAA,EAChB,SACO;;EAEZ;;;;AAKF,IAAa,eAAA,GAAA,MAAA,YAGX,SAAS,YAAY,EAAE,UAAU,WAAW,GAAG,SAAS,KAAK;CAC7D,MAAM,WAAA,GAAA,WAAA,SAAqB,oBAAA,QAAO,SAAS,oBAAA,QAAO,iBAAiB,UAAU;AAC7E,QACE,iBAAA,GAAA,kBAAA,KAAC,qBAAA,SAAD;EAAc;EAAK,GAAI;EAAO,WAAW;EACtC;EACO,CAAA;EAEZ"}