@pathscale/ui 1.2.6 → 1.2.8

package/dist/components/accordion/Accordion.js

@@ -1,9 +1,9 @@
-import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import { createComponent, insert, mergeProps, spread, template, use } from "solid-js/web";
 import "./Accordion.css";
-import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
-import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
-import * as __WEBPACK_EXTERNAL_MODULE__Accordion_classes_js_d6ff7f0b__ from "./Accordion.classes.js";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div><div>"), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>"), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<svg fill=none role=presentation viewBox="0 0 24 24"width=100% height=100%><path d="M6 9L12 15L18 9"stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round>');
+import { Show, createContext, createMemo, createSignal, createUniqueId, splitProps, useContext } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { CLASSES } from "./Accordion.classes.js";
+var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<button>"), _tmpl$3 = /*#__PURE__*/ template("<div><div><div>"), _tmpl$4 = /*#__PURE__*/ template("<span>"), _tmpl$5 = /*#__PURE__*/ template('<svg fill=none role=presentation viewBox="0 0 24 24"width=100% height=100%><path d="M6 9L12 15L18 9"stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round>');
 const normalizeAccordionValue = (value, selectionMode)=>{
     if (void 0 === value) return [];
     const raw = Array.isArray(value) ? value : [
@@ -16,10 +16,10 @@ const invokeEventHandler = (handler, event)=>{
     if ("function" == typeof handler) return void handler(event);
     if (Array.isArray(handler) && "function" == typeof handler[0]) handler[0](handler[1], event);
 };
-const AccordionContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
-const AccordionItemContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
+const AccordionContext = createContext();
+const AccordionItemContext = createContext();
 const AccordionRoot = (props)=>{
-    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+    const [local, others] = splitProps(props, [
         "children",
         "class",
         "className",
@@ -39,8 +39,8 @@ const AccordionRoot = (props)=>{
     const variant = ()=>local.variant ?? "default";
     const hideSeparator = ()=>Boolean(local.hideSeparator);
     const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled);
-    const [internalValue, setInternalValue] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(normalizeAccordionValue(local.defaultValue, selectionMode()));
-    const selectedValues = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>void 0 !== local.value ? normalizeAccordionValue(local.value, selectionMode()) : normalizeAccordionValue(internalValue(), selectionMode()));
+    const [internalValue, setInternalValue] = createSignal(normalizeAccordionValue(local.defaultValue, selectionMode()));
+    const selectedValues = createMemo(()=>void 0 !== local.value ? normalizeAccordionValue(local.value, selectionMode()) : normalizeAccordionValue(internalValue(), selectionMode()));
     const isItemExpanded = (value)=>selectedValues().includes(value);
     const setSelectedValues = (nextValues)=>{
         const normalizedNextValues = normalizeAccordionValue(nextValues, selectionMode());
@@ -83,16 +83,16 @@ const AccordionRoot = (props)=>{
         toggleItem,
         handleTriggerKeyDown
     };
-    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(AccordionContext.Provider, {
+    return createComponent(AccordionContext.Provider, {
         value: contextValue,
         get children () {
             var _el$ = _tmpl$();
-            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)((node)=>{
+            use((node)=>{
                 rootRef = node;
                 if ("function" == typeof local.ref) local.ref(node);
             }, _el$);
-            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
-                    class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Accordion_classes_js_d6ff7f0b__.CLASSES.Root.base, __WEBPACK_EXTERNAL_MODULE__Accordion_classes_js_d6ff7f0b__.CLASSES.Root.variant[variant()], local.class, local.className)
+            spread(_el$, mergeProps(others, ()=>({
+                    class: twMerge(CLASSES.Root.base, CLASSES.Root.variant[variant()], local.class, local.className)
                 }), {
                 "data-slot": "accordion",
                 get ["data-selection-mode"] () {
@@ -117,14 +117,14 @@ const AccordionRoot = (props)=>{
                     return isDisabled() ? "true" : void 0;
                 }
             }), false, true);
-            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+            insert(_el$, ()=>local.children);
             return _el$;
         }
     });
 };
 const AccordionItem = (props)=>{
-    const accordion = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(AccordionContext);
-    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+    const accordion = useContext(AccordionContext);
+    const [local, others] = splitProps(props, [
         "value",
         "children",
         "class",
@@ -134,7 +134,7 @@ const AccordionItem = (props)=>{
         "isDisabled",
         "disabled"
     ]);
-    const uniqueId = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createUniqueId)();
+    const uniqueId = createUniqueId();
     const itemValue = ()=>local.value ?? uniqueId;
     const triggerId = ()=>`accordion-trigger-${uniqueId}`;
     const contentId = ()=>`accordion-content-${uniqueId}`;
@@ -152,12 +152,12 @@ const AccordionItem = (props)=>{
         isDisabled,
         toggle
     };
-    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(AccordionItemContext.Provider, {
+    return createComponent(AccordionItemContext.Provider, {
         value: itemContextValue,
         get children () {
             var _el$2 = _tmpl$();
-            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
-                    class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Accordion_classes_js_d6ff7f0b__.CLASSES.Item.base, isExpanded() && __WEBPACK_EXTERNAL_MODULE__Accordion_classes_js_d6ff7f0b__.CLASSES.Item.flag.expanded, isDisabled() && __WEBPACK_EXTERNAL_MODULE__Accordion_classes_js_d6ff7f0b__.CLASSES.Item.flag.disabled, accordion?.hideSeparator() && __WEBPACK_EXTERNAL_MODULE__Accordion_classes_js_d6ff7f0b__.CLASSES.Item.flag.hideSeparator, local.class, local.className)
+            spread(_el$2, mergeProps(others, ()=>({
+                    class: twMerge(CLASSES.Item.base, isExpanded() && CLASSES.Item.flag.expanded, isDisabled() && CLASSES.Item.flag.disabled, accordion?.hideSeparator() && CLASSES.Item.flag.hideSeparator, local.class, local.className)
                 }), {
                 "data-slot": "accordion-item",
                 get ["data-expanded"] () {
@@ -173,15 +173,15 @@ const AccordionItem = (props)=>{
                     return local.style;
                 }
             }), false, true);
-            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.children);
+            insert(_el$2, ()=>local.children);
             return _el$2;
         }
     });
 };
 const AccordionTrigger = (props)=>{
-    const accordion = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(AccordionContext);
-    const item = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(AccordionItemContext);
-    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+    const accordion = useContext(AccordionContext);
+    const item = useContext(AccordionItemContext);
+    const [local, others] = splitProps(props, [
         "children",
         "class",
         "className",
@@ -211,7 +211,7 @@ const AccordionTrigger = (props)=>{
     };
     return (()=>{
         var _el$3 = _tmpl$2();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+        spread(_el$3, mergeProps(others, {
             get id () {
                 return item?.triggerId();
             },
@@ -219,7 +219,7 @@ const AccordionTrigger = (props)=>{
                 return local.type ?? "button";
             }
         }, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Accordion_classes_js_d6ff7f0b__.CLASSES.Trigger.base, local.class, local.className)
+                class: twMerge(CLASSES.Trigger.base, local.class, local.className)
             }), {
             "data-slot": "accordion-trigger",
             get ["data-expanded"] () {
@@ -246,13 +246,13 @@ const AccordionTrigger = (props)=>{
             onClick: handleClick,
             onKeyDown: handleKeyDown
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.children, null);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+        insert(_el$3, ()=>local.children, null);
+        insert(_el$3, createComponent(Show, {
             get when () {
                 return false !== local.showIndicator;
             },
             get children () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(AccordionIndicator, {
+                return createComponent(AccordionIndicator, {
                     get children () {
                         return local.indicator;
                     }
@@ -263,8 +263,8 @@ const AccordionTrigger = (props)=>{
     })();
 };
 const AccordionContent = (props)=>{
-    const item = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(AccordionItemContext);
-    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+    const item = useContext(AccordionItemContext);
+    const [local, others] = splitProps(props, [
         "children",
         "class",
         "className",
@@ -277,13 +277,13 @@ const AccordionContent = (props)=>{
     if (!keepMounted() && !expanded()) return null;
     return (()=>{
         var _el$4 = _tmpl$3(), _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild;
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+        spread(_el$4, mergeProps(others, {
             get id () {
                 return item?.contentId();
             },
             role: "region"
         }, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Accordion_classes_js_d6ff7f0b__.CLASSES.Content.base, expanded() && __WEBPACK_EXTERNAL_MODULE__Accordion_classes_js_d6ff7f0b__.CLASSES.Content.flag.expanded, local.class, local.className)
+                class: twMerge(CLASSES.Content.base, expanded() && CLASSES.Content.flag.expanded, local.class, local.className)
             }), {
             "data-slot": "accordion-content",
             get ["data-expanded"] () {
@@ -302,23 +302,23 @@ const AccordionContent = (props)=>{
                 return item?.triggerId();
             }
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                class: __WEBPACK_EXTERNAL_MODULE__Accordion_classes_js_d6ff7f0b__.CLASSES.Body.base
+        spread(_el$5, mergeProps(()=>({
+                class: CLASSES.Body.base
             }), {
             "data-slot": "accordion-body"
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                class: __WEBPACK_EXTERNAL_MODULE__Accordion_classes_js_d6ff7f0b__.CLASSES.BodyInner.base
+        spread(_el$6, mergeProps(()=>({
+                class: CLASSES.BodyInner.base
             }), {
             "data-slot": "accordion-body-inner"
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, ()=>local.children);
+        insert(_el$6, ()=>local.children);
         return _el$4;
     })();
 };
 const AccordionIndicator = (props)=>{
-    const item = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(AccordionItemContext);
-    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+    const item = useContext(AccordionItemContext);
+    const [local, others] = splitProps(props, [
         "children",
         "class",
         "className",
@@ -328,10 +328,10 @@ const AccordionIndicator = (props)=>{
     const expanded = ()=>Boolean(item?.isExpanded());
     return (()=>{
         var _el$7 = _tmpl$4();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+        spread(_el$7, mergeProps(others, {
             "aria-hidden": "true"
         }, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Accordion_classes_js_d6ff7f0b__.CLASSES.Indicator.base, expanded() && __WEBPACK_EXTERNAL_MODULE__Accordion_classes_js_d6ff7f0b__.CLASSES.Indicator.flag.expanded, local.class, local.className)
+                class: twMerge(CLASSES.Indicator.base, expanded() && CLASSES.Indicator.flag.expanded, local.class, local.className)
             }), {
             "data-slot": "accordion-indicator",
             get ["data-expanded"] () {
@@ -344,7 +344,7 @@ const AccordionIndicator = (props)=>{
                 return local.style;
             }
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, ()=>local.children ?? _tmpl$5());
+        insert(_el$7, ()=>local.children ?? _tmpl$5());
         return _el$7;
     })();
 };
@@ -356,4 +356,5 @@ const Accordion = Object.assign(AccordionRoot, {
     Indicator: AccordionIndicator
 });
 const accordion_Accordion = Accordion;
-export { Accordion, AccordionContent, AccordionIndicator, AccordionItem, AccordionRoot, AccordionTrigger, accordion_Accordion as default };
+export default accordion_Accordion;
+export { Accordion, AccordionContent, AccordionIndicator, AccordionItem, AccordionRoot, AccordionTrigger };

package/dist/components/accordion/index.js

@@ -1,9 +1,3 @@
-import * as __WEBPACK_EXTERNAL_MODULE__Accordion_js_b8a015c9__ from "./Accordion.js";
-var __webpack_exports__Accordion = __WEBPACK_EXTERNAL_MODULE__Accordion_js_b8a015c9__.Accordion;
-var __webpack_exports__AccordionContent = __WEBPACK_EXTERNAL_MODULE__Accordion_js_b8a015c9__.AccordionContent;
-var __webpack_exports__AccordionIndicator = __WEBPACK_EXTERNAL_MODULE__Accordion_js_b8a015c9__.AccordionIndicator;
-var __webpack_exports__AccordionItem = __WEBPACK_EXTERNAL_MODULE__Accordion_js_b8a015c9__.AccordionItem;
-var __webpack_exports__AccordionRoot = __WEBPACK_EXTERNAL_MODULE__Accordion_js_b8a015c9__.AccordionRoot;
-var __webpack_exports__AccordionTrigger = __WEBPACK_EXTERNAL_MODULE__Accordion_js_b8a015c9__.AccordionTrigger;
-var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Accordion_js_b8a015c9__["default"];
-export { __webpack_exports__Accordion as Accordion, __webpack_exports__AccordionContent as AccordionContent, __webpack_exports__AccordionIndicator as AccordionIndicator, __webpack_exports__AccordionItem as AccordionItem, __webpack_exports__AccordionRoot as AccordionRoot, __webpack_exports__AccordionTrigger as AccordionTrigger, __webpack_exports__default as default };
+import { Accordion as external_Accordion_js_Accordion, AccordionContent, AccordionIndicator, AccordionItem, AccordionRoot, AccordionTrigger } from "./Accordion.js";
+export default external_Accordion_js_Accordion;
+export { AccordionContent, AccordionIndicator, AccordionItem, AccordionRoot, AccordionTrigger, external_Accordion_js_Accordion as Accordion };

package/dist/components/alert/Alert.css

@@ -1,116 +1,116 @@
-@layer components {
-  /* -------------------------------------------------------------------------------------------------
-   * Root
-   * -----------------------------------------------------------------------------------------------*/
-  .alert {
-    display: flex;
-    width: 100%;
-    flex-direction: row;
-    align-items: flex-start;
-    justify-content: flex-start;
-    gap: 1rem;
-    border-radius: var(--radius-box, 1.5rem);
-    padding: 0.75rem 1rem;
-    background-color: var(--color-base-200);
-    color: var(--color-base-content);
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    box-shadow:
-      0 1px 2px oklch(0% 0 0 / 0.05),
-      0 1px 3px oklch(0% 0 0 / 0.1);
-  }
-
-  /* -------------------------------------------------------------------------------------------------
-   * Indicator
-   * -----------------------------------------------------------------------------------------------*/
-  .alert__indicator {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0.25rem;
-    flex-shrink: 0;
-    user-select: none;
-  }
-
-  .alert__indicator [data-slot="alert-default-icon"] {
-    width: 1rem;
-    height: 1rem;
-  }
-
-  /* -------------------------------------------------------------------------------------------------
-   * Content
-   * -----------------------------------------------------------------------------------------------*/
-  .alert__content {
-    display: flex;
-    flex: 1 1 0%;
-    min-width: 0;
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  /* -------------------------------------------------------------------------------------------------
-   * Title
-   * -----------------------------------------------------------------------------------------------*/
-  .alert__title {
-    font-size: 0.875rem;
-    font-weight: 500;
-    line-height: 1.5rem;
-  }
-
-  /* -------------------------------------------------------------------------------------------------
-   * Description
-   * -----------------------------------------------------------------------------------------------*/
-  .alert__description {
-    font-size: 0.875rem;
-    color: color-mix(in oklab, var(--color-base-content) 62%, transparent);
-  }
-
-  /* -------------------------------------------------------------------------------------------------
-   * Status variants
-   * -----------------------------------------------------------------------------------------------*/
-
-  /* Default */
-  .alert--default .alert__indicator {
-    color: var(--color-base-content);
-  }
-
-  .alert--default .alert__title {
-    color: var(--color-base-content);
-  }
-
-  /* Accent */
-  .alert--accent .alert__indicator {
-    color: var(--color-accent);
-  }
-
-  .alert--accent .alert__title {
-    color: var(--color-accent);
-  }
-
-  /* Success */
-  .alert--success .alert__indicator {
-    color: var(--color-success);
-  }
-
-  .alert--success .alert__title {
-    color: var(--color-success);
-  }
-
-  /* Warning */
-  .alert--warning .alert__indicator {
-    color: var(--color-warning);
-  }
-
-  .alert--warning .alert__title {
-    color: var(--color-warning);
-  }
-
-  /* Danger */
-  .alert--danger .alert__indicator {
-    color: var(--color-error);
-  }
-
-  .alert--danger .alert__title {
-    color: var(--color-error);
-  }
-}
+@layer components {
+  /* -------------------------------------------------------------------------------------------------
+   * Root
+   * -----------------------------------------------------------------------------------------------*/
+  .alert {
+    display: flex;
+    width: 100%;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: 1rem;
+    border-radius: var(--radius-box, 1.5rem);
+    padding: 0.75rem 1rem;
+    background-color: var(--color-base-200);
+    color: var(--color-base-content);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    box-shadow:
+      0 1px 2px oklch(0% 0 0 / 0.05),
+      0 1px 3px oklch(0% 0 0 / 0.1);
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Indicator
+   * -----------------------------------------------------------------------------------------------*/
+  .alert__indicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.25rem;
+    flex-shrink: 0;
+    user-select: none;
+  }
+
+  .alert__indicator [data-slot="alert-default-icon"] {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Content
+   * -----------------------------------------------------------------------------------------------*/
+  .alert__content {
+    display: flex;
+    flex: 1 1 0%;
+    min-width: 0;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Title
+   * -----------------------------------------------------------------------------------------------*/
+  .alert__title {
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.5rem;
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Description
+   * -----------------------------------------------------------------------------------------------*/
+  .alert__description {
+    font-size: 0.875rem;
+    color: color-mix(in oklab, var(--color-base-content) 62%, transparent);
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Status variants
+   * -----------------------------------------------------------------------------------------------*/
+
+  /* Default */
+  .alert--default .alert__indicator {
+    color: var(--color-base-content);
+  }
+
+  .alert--default .alert__title {
+    color: var(--color-base-content);
+  }
+
+  /* Accent */
+  .alert--accent .alert__indicator {
+    color: var(--color-accent);
+  }
+
+  .alert--accent .alert__title {
+    color: var(--color-accent);
+  }
+
+  /* Success */
+  .alert--success .alert__indicator {
+    color: var(--color-success);
+  }
+
+  .alert--success .alert__title {
+    color: var(--color-success);
+  }
+
+  /* Warning */
+  .alert--warning .alert__indicator {
+    color: var(--color-warning);
+  }
+
+  .alert--warning .alert__title {
+    color: var(--color-warning);
+  }
+
+  /* Danger */
+  .alert--danger .alert__indicator {
+    color: var(--color-error);
+  }
+
+  .alert--danger .alert__title {
+    color: var(--color-error);
+  }
+}