-////
-//// An alert is made up of different parts:
-////
-//// - The main [`alert`](#alert) container used to control the alert's styles
-//// and layout. (**required**)
-////
-//// - An [`indicator`](#indicator) used to provide users with a visual clue about
-//// an alert's content. (_optional_)
-////
-//// - A [`title`](#title) used to summarise the alert's content or message in a
-//// few words. (_optional_)
-////
-//// - A [`content`](#content) container for any additional content or information
-//// to provide to the user. (_optional_)
-////
-//// ## Recipes
-////
-//// Below are some recipes that show common uses of the `alert` element.
-////
-//// ### A title-only success alert:
-////
-//// ```gleam
-//// import lustre/element/html
-//// import lustre/ui/alert.{alert}
-////
-//// pub fn new_todo_added() {
-//// alert([alert.success()], [
-//// alert.title([], [html.text("New todo added to your list.")])
-//// ])
-//// }
-//// ```
-////
-//// ### An error alert with indicator and content:
-////
-//// ```gleam
-//// import lustre/element/html
-//// import lustre/ui/alert.{alert}
-////
-//// pub fn delete_todo_failed() {
-//// alert([alert.danger()], [
-//// alert.indicator([], [icon.exclamation_triangle([])]),
-//// alert.title([], [html.text("Could not delete todo")]),
-//// alert.content([], [
-//// html.p([], [html.text("Check your internet connection and try again.")])
-//// ])
-//// ])
-//// }
-//// ```
-////
-//// ## Customisation
-////
-//// The colour or type of an alert can be set to the corresponding colour palette
-//// in your theme by using one of the following attributes:
-////
-//// - [`primary`](#primary)
-//// - [`secondary`](#secondary)
-//// - [`warning`](#warning)
-//// - [`danger`](#danger)
-//// - [`success`](#success)
-////
-//// The border radius of an alert can be controlled while still using your theme's
-//// configuration by using one of the following attributes:
-////
-//// - [`square`](#square)
-//// - [`round`](#round)
-//// - [`pill`](#pill)
-////
-//// It is possible to control some aspects of an alert's styling through CSS
-//// variables. You may want to do this in cases where you are integrating lustre/ui
-//// into an existing design system and you want the `alert` element to match
-//// elements outside of this package.
-////
-//// The following CSS variables can set in your own stylesheets or by using the
-//// corresponding attribute functions in this module:
-////
-//// - [`--background`](#background)
-//// - [`--border`](#border)
-//// - [`--indicator-size`](#indicator_size)
-//// - [`--padding-x`](#padding_x)
-//// - [`--padding-y`](#padding_y)
-//// - [`--radius`](#radius)
-//// - [`--text`](#text)
-//// - [`--title-margin`](#title_margin)
-//// - [`--title-weight`](#title_weight)
-////
-
-// IMPORTS ---------------------------------------------------------------------
-
-import lustre/attribute.{type Attribute}
-import lustre/element.{type Element}
-import lustre/element/html
-import lustre/ui/theme
-
-// ELEMENTS --------------------------------------------------------------------
-
-/// The `alert` element, sometimes called a "callout", is used to direct the
-/// user's attention away from the main content on the page and to some important
-/// information or context.
-///
-/// Common uses for the `alert` element include:
-///
-/// - Toasts that render unobtrusely over the main content, often in the corner
-/// of the page.
-///
-/// - Callouts in documentation to provide additional or crucial information.
-///
-/// The colour or type of the alert can be changed by using one of the following
-/// attributes: [`primary`](#primary), [`secondary`](#secondary), [`warning`](#warning),
-/// [`danger`](#danger), or [`successs`](#success).
-///
-/// This will render a `