@retray-dev/ui-kit 6.2.0 → 9.0.0

package/dist/chunk-IRRY3CRZ.mjs

@@ -0,0 +1,82 @@
+import { RADIUS } from './chunk-QY3X2UYR.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { vs, s } from './chunk-2CE3TQVY.mjs';
+import React from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+
+function MenuGroup({ children, variant = "plain", style }) {
+  const { colors } = useTheme();
+  const processedChildren = React.Children.map(children, (child, index) => {
+    if (!React.isValidElement(child)) return child;
+    if (child.type === MenuGroupHeader || child.type === MenuGroupFooter) {
+      return child;
+    }
+    const childProps = child.props;
+    const isMenuItem = "onPress" in childProps;
+    if (!isMenuItem) return child;
+    const isLast = index === React.Children.count(children) - 1;
+    if (childProps["showSeparator"] === void 0 && !isLast) {
+      return React.cloneElement(child, {
+        showSeparator: true
+      });
+    }
+    return child;
+  });
+  const cardStyle = variant === "card" ? {
+    backgroundColor: colors.card,
+    borderRadius: RADIUS.md,
+    borderWidth: 1,
+    borderColor: colors.border,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.06,
+    shadowRadius: 6,
+    elevation: 2,
+    paddingVertical: vs(4)
+  } : {};
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.container, cardStyle, style] }, processedChildren);
+}
+function MenuGroupHeader({ children, style }) {
+  const { colors } = useTheme();
+  if (typeof children === "string") {
+    return /* @__PURE__ */ React.createElement(View, { style: [styles.header, { borderBottomColor: colors.separator }, style] }, /* @__PURE__ */ React.createElement(Text, { style: [styles.headerText, { color: colors.foregroundMuted }], allowFontScaling: true }, children));
+  }
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.header, { borderBottomColor: colors.separator }, style] }, children);
+}
+function MenuGroupFooter({ children, style }) {
+  const { colors } = useTheme();
+  if (typeof children === "string") {
+    return /* @__PURE__ */ React.createElement(View, { style: [styles.footer, style] }, /* @__PURE__ */ React.createElement(Text, { style: [styles.footerText, { color: colors.foregroundMuted }], allowFontScaling: true }, children));
+  }
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.footer, style] }, children);
+}
+MenuGroup.Header = MenuGroupHeader;
+MenuGroup.Footer = MenuGroupFooter;
+var styles = StyleSheet.create({
+  container: {
+    overflow: "hidden"
+  },
+  header: {
+    paddingHorizontal: s(16),
+    paddingTop: vs(12),
+    paddingBottom: vs(8),
+    borderBottomWidth: StyleSheet.hairlineWidth
+  },
+  headerText: {
+    fontFamily: "Sohne-SemiBold",
+    fontSize: 13,
+    letterSpacing: 0.32,
+    textTransform: "uppercase"
+  },
+  footer: {
+    paddingHorizontal: s(16),
+    paddingTop: vs(8),
+    paddingBottom: vs(12)
+  },
+  footerText: {
+    fontFamily: "Sohne-Regular",
+    fontSize: 12
+  }
+});
+
+export { MenuGroup, MenuGroupFooter, MenuGroupHeader };

package/dist/chunk-JB67UOB5.mjs

@@ -0,0 +1,92 @@
+import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { mvs, ms, s } from './chunk-2CE3TQVY.mjs';
+import React from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+
+var weightMap = {
+  normal: "Sohne-Regular",
+  medium: "Sohne-Medium",
+  semibold: "Sohne-SemiBold",
+  bold: "Sohne-Bold"
+};
+function DetailRowBase({
+  label,
+  value,
+  separator = "dotted",
+  labelWeight = "normal",
+  valueColor,
+  leftIcon,
+  leftIconName,
+  leftIconColor,
+  rightIconName,
+  rightIconColor,
+  style,
+  labelStyle,
+  valueStyle
+}) {
+  const { colors } = useTheme();
+  const resolvedLeftIcon = leftIconName ? renderIcon(leftIconName, ms(14), leftIconColor ?? colors.foregroundMuted) : leftIcon;
+  const resolvedRightIcon = rightIconName ? renderIcon(rightIconName, ms(14), rightIconColor ?? colors.foregroundMuted) : null;
+  const separatorStyle = separator === "none" ? null : {
+    flex: 1,
+    height: 1,
+    borderBottomWidth: 1,
+    borderStyle: separator,
+    borderColor: "rgba(128,128,128,0.3)",
+    marginHorizontal: s(4)
+  };
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.row, style] }, /* @__PURE__ */ React.createElement(View, { style: styles.labelSide }, resolvedLeftIcon ? /* @__PURE__ */ React.createElement(View, { style: styles.icon }, resolvedLeftIcon) : null, typeof label === "string" ? /* @__PURE__ */ React.createElement(
+    Text,
+    {
+      style: [styles.labelText, { color: colors.foregroundMuted, fontFamily: weightMap[labelWeight] }, labelStyle],
+      allowFontScaling: true
+    },
+    label
+  ) : label), separatorStyle ? /* @__PURE__ */ React.createElement(View, { style: separatorStyle }) : /* @__PURE__ */ React.createElement(View, { style: styles.spacer }), /* @__PURE__ */ React.createElement(View, { style: styles.valueSide }, typeof value === "string" ? /* @__PURE__ */ React.createElement(
+    Text,
+    {
+      style: [styles.valueText, { color: valueColor ?? colors.foreground }, valueStyle],
+      allowFontScaling: true
+    },
+    value
+  ) : value, resolvedRightIcon ? /* @__PURE__ */ React.createElement(View, { style: styles.icon }, resolvedRightIcon) : null));
+}
+var DetailRow = React.memo(DetailRowBase);
+var styles = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: s(4)
+  },
+  labelSide: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: s(4),
+    flexShrink: 0
+  },
+  icon: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  spacer: {
+    flex: 1
+  },
+  labelText: {
+    fontSize: ms(13),
+    lineHeight: mvs(18)
+  },
+  valueSide: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: s(4),
+    flexShrink: 0
+  },
+  valueText: {
+    fontFamily: "Sohne-SemiBold",
+    fontSize: ms(13),
+    lineHeight: mvs(18)
+  }
+});
+
+export { DetailRow };

package/dist/chunk-JMOZEC77.mjs

@@ -0,0 +1,90 @@
+import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { vs, ms } from './chunk-2CE3TQVY.mjs';
+import React, { useRef } from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+import RNSlider from '@react-native-community/slider';
+
+function Slider({
+  value = 0,
+  minimumValue = 0,
+  maximumValue = 1,
+  step = 0,
+  onValueChange,
+  onSlidingComplete,
+  label,
+  showValue = false,
+  formatValue = (v) => v.toFixed(2),
+  accessibilityLabel,
+  disabled,
+  style
+}) {
+  const { colors } = useTheme();
+  const lastSteppedValue = useRef(value);
+  const handleValueChange = (v) => {
+    if (step && v !== lastSteppedValue.current) {
+      lastSteppedValue.current = v;
+      selectionAsync();
+    }
+    onValueChange?.(v);
+  };
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: [styles.wrapper, style],
+      accessibilityRole: "adjustable",
+      accessibilityLabel: accessibilityLabel ?? label,
+      accessibilityValue: {
+        min: minimumValue,
+        max: maximumValue,
+        now: value,
+        text: formatValue(value)
+      }
+    },
+    label || showValue ? /* @__PURE__ */ React.createElement(View, { style: styles.header }, label ? /* @__PURE__ */ React.createElement(Text, { style: [styles.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, showValue ? /* @__PURE__ */ React.createElement(Text, { style: [styles.valueText, { color: colors.foregroundMuted }], allowFontScaling: true }, formatValue(value)) : null) : null,
+    /* @__PURE__ */ React.createElement(View, { style: disabled ? styles.disabled : void 0 }, /* @__PURE__ */ React.createElement(
+      RNSlider,
+      {
+        value,
+        minimumValue,
+        maximumValue,
+        step: step || 0,
+        disabled,
+        onValueChange: handleValueChange,
+        onSlidingComplete,
+        minimumTrackTintColor: colors.primary,
+        maximumTrackTintColor: colors.surface,
+        thumbTintColor: colors.primary,
+        style: styles.slider,
+        accessibilityLabel
+      }
+    ))
+  );
+}
+var styles = StyleSheet.create({
+  wrapper: {
+    gap: vs(8)
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center"
+  },
+  label: {
+    fontFamily: "Sohne-Medium",
+    fontSize: ms(15)
+  },
+  valueText: {
+    fontFamily: "Sohne-Medium",
+    fontSize: ms(14)
+  },
+  slider: {
+    width: "100%",
+    height: vs(60)
+  },
+  disabled: {
+    opacity: 0.45
+  }
+});
+
+export { Slider };

package/dist/chunk-JT7HKXRB.mjs

@@ -0,0 +1,114 @@
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { s, ms } from './chunk-2CE3TQVY.mjs';
+import React, { useState } from 'react';
+import { StyleSheet, View, Image, Text } from 'react-native';
+
+var sizeMap = {
+  sm: s(28),
+  md: s(40),
+  lg: s(56),
+  xl: s(72)
+};
+var fontSizeMap = {
+  sm: ms(12),
+  md: ms(16),
+  lg: ms(22),
+  xl: ms(28)
+};
+var statusSizeMap = {
+  sm: 8,
+  md: 10,
+  lg: 13,
+  xl: 16
+};
+function getInitials(fallback, fallbackText) {
+  if (fallback) return fallback.slice(0, 2).toUpperCase();
+  if (fallbackText) {
+    const words = fallbackText.trim().split(/\s+/);
+    if (words.length === 1) return words[0].slice(0, 2).toUpperCase();
+    return (words[0][0] + words[words.length - 1][0]).toUpperCase();
+  }
+  return "?";
+}
+function AvatarBase({ src, fallback, fallbackText, size = "md", status, style }) {
+  const { colors } = useTheme();
+  const [imageError, setImageError] = useState(false);
+  const dimension = typeof size === "number" ? size : sizeMap[size];
+  const fontSize = typeof size === "number" ? size * 0.38 : fontSizeMap[size];
+  const showFallback = !src || imageError;
+  const statusSize = typeof size === "number" ? size * 0.25 : statusSizeMap[size];
+  const statusColor = {
+    online: colors.success,
+    offline: "transparent",
+    busy: colors.destructive,
+    away: colors.warning
+  };
+  const containerStyle = {
+    width: dimension,
+    height: dimension,
+    borderRadius: dimension / 2,
+    backgroundColor: colors.surface,
+    overflow: "hidden"
+  };
+  const a11yLabel = fallbackText || fallback || "Avatar";
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: [styles.wrapper, style],
+      accessibilityRole: "image",
+      accessibilityLabel: a11yLabel
+    },
+    /* @__PURE__ */ React.createElement(View, { style: [styles.base, containerStyle] }, !showFallback ? /* @__PURE__ */ React.createElement(
+      Image,
+      {
+        source: { uri: src },
+        style: { width: dimension, height: dimension },
+        onError: () => setImageError(true)
+      }
+    ) : /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        style: [styles.fallback, { color: colors.foregroundMuted, fontSize }],
+        allowFontScaling: true
+      },
+      getInitials(fallback, fallbackText)
+    )),
+    status && /* @__PURE__ */ React.createElement(
+      View,
+      {
+        style: [
+          styles.statusDot,
+          {
+            width: statusSize,
+            height: statusSize,
+            borderRadius: statusSize / 2,
+            backgroundColor: statusColor[status],
+            borderWidth: status === "offline" ? 2 : 1.5,
+            borderColor: status === "offline" ? colors.border : colors.background
+          }
+        ]
+      }
+    )
+  );
+}
+var Avatar = React.memo(AvatarBase);
+var styles = StyleSheet.create({
+  wrapper: {
+    alignSelf: "flex-start",
+    position: "relative"
+  },
+  base: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  fallback: {
+    fontFamily: "Sohne-Medium"
+  },
+  statusDot: {
+    position: "absolute",
+    bottom: 0,
+    right: 0
+  }
+});
+
+export { Avatar };

package/dist/chunk-KIHCWCWL.mjs

@@ -0,0 +1,124 @@
+import { PressableButton } from './chunk-3DKJ2GIC.mjs';
+import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
+import { COLOR_TRANSITION } from './chunk-DVK4G2GT.mjs';
+import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { vs, s, ms } from './chunk-2CE3TQVY.mjs';
+import React from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+import { EaseView } from 'react-native-ease';
+import { FontAwesome5 } from '@expo/vector-icons';
+
+function ToggleIcon({ pressed, iconName, activeIconName, icon, activeIcon, iconColor, activeIconColor, iconSize, primaryColor, mutedColor }) {
+  const renderProp = (prop) => {
+    if (!prop) return null;
+    if (typeof prop === "function") return prop(pressed);
+    return prop;
+  };
+  if (pressed) {
+    if (activeIconName) return /* @__PURE__ */ React.createElement(React.Fragment, null, renderIcon(activeIconName, iconSize, activeIconColor ?? primaryColor));
+    const active = renderProp(activeIcon);
+    if (active) return /* @__PURE__ */ React.createElement(React.Fragment, null, active);
+    return /* @__PURE__ */ React.createElement(FontAwesome5, { name: "check-circle", size: iconSize, color: primaryColor });
+  }
+  if (iconName) return /* @__PURE__ */ React.createElement(React.Fragment, null, renderIcon(iconName, iconSize, iconColor ?? mutedColor));
+  const custom = renderProp(icon);
+  if (custom) return /* @__PURE__ */ React.createElement(React.Fragment, null, custom);
+  return /* @__PURE__ */ React.createElement(FontAwesome5, { name: "circle", size: iconSize, color: mutedColor });
+}
+var sizeStyles = {
+  sm: { paddingHorizontal: s(12), paddingVertical: vs(8), minWidth: s(40), minHeight: vs(40) },
+  md: { paddingHorizontal: s(16), paddingVertical: vs(12), minWidth: s(44), minHeight: vs(44) },
+  lg: { paddingHorizontal: s(20), paddingVertical: vs(14), minWidth: s(48), minHeight: vs(48) }
+};
+var iconSizeMap = { sm: 16, md: 18, lg: 20 };
+function Toggle({
+  pressed = false,
+  onPressedChange,
+  variant = "default",
+  size = "md",
+  label,
+  icon,
+  activeIcon,
+  iconName,
+  activeIconName,
+  iconColor,
+  activeIconColor,
+  disabled,
+  style,
+  accessibilityLabel
+}) {
+  const { colors } = useTheme();
+  const inactiveBorder = variant === "outline" ? colors.border : "transparent";
+  const iconSize = iconSizeMap[size];
+  const handlePress = () => {
+    selectionAsync();
+    onPressedChange?.(!pressed);
+  };
+  return /* @__PURE__ */ React.createElement(View, { style: [disabled && styles.disabled, style] }, /* @__PURE__ */ React.createElement(
+    PressableButton,
+    {
+      onPress: handlePress,
+      enabled: !disabled,
+      rippleColor: "transparent",
+      touchSoundDisabled: true,
+      activateOnHover: true,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel ?? label,
+      accessibilityState: { selected: pressed, disabled: !!disabled }
+    },
+    /* @__PURE__ */ React.createElement(
+      EaseView,
+      {
+        style: [styles.base, sizeStyles[size], { borderWidth: 2 }],
+        animate: {
+          borderColor: pressed ? colors.primary : inactiveBorder,
+          backgroundColor: pressed ? colors.surfaceStrong : "transparent"
+        },
+        transition: COLOR_TRANSITION
+      },
+      /* @__PURE__ */ React.createElement(View, { style: styles.inner }, /* @__PURE__ */ React.createElement(
+        ToggleIcon,
+        {
+          pressed,
+          iconName,
+          activeIconName,
+          icon,
+          activeIcon,
+          iconColor,
+          activeIconColor,
+          iconSize,
+          primaryColor: colors.primary,
+          mutedColor: colors.foregroundMuted
+        }
+      ), label ? /* @__PURE__ */ React.createElement(
+        Text,
+        {
+          style: [styles.label, { color: pressed ? colors.primary : colors.foreground }],
+          allowFontScaling: true
+        },
+        label
+      ) : null)
+    )
+  ));
+}
+var styles = StyleSheet.create({
+  base: {
+    borderRadius: ms(8)
+  },
+  inner: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: s(8)
+  },
+  disabled: {
+    opacity: 0.45
+  },
+  label: {
+    fontFamily: "Sohne-Medium",
+    fontSize: ms(14)
+  }
+});
+
+export { Toggle };

package/dist/chunk-LXJIIOYQ.mjs

@@ -0,0 +1,104 @@
+import { impactLight } from './chunk-EJ7ZPXOH.mjs';
+import { RADIUS } from './chunk-QY3X2UYR.mjs';
+import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { ms, vs, s, mvs } from './chunk-2CE3TQVY.mjs';
+import React from 'react';
+import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
+
+function DefaultErrorFallback({
+  error,
+  reset,
+  title = "Something went wrong",
+  message
+}) {
+  const { colors } = useTheme();
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.container, { backgroundColor: colors.background }], accessibilityRole: "alert" }, /* @__PURE__ */ React.createElement(View, { style: [styles.iconCircle, { backgroundColor: colors.destructiveTint }] }, renderIcon("alert-triangle", ms(28), colors.destructive)), /* @__PURE__ */ React.createElement(Text, { style: [styles.title, { color: colors.foreground }], allowFontScaling: true }, title), /* @__PURE__ */ React.createElement(Text, { style: [styles.message, { color: colors.foregroundMuted }], allowFontScaling: true }, message ?? error.message ?? "An unexpected error occurred."), /* @__PURE__ */ React.createElement(
+    TouchableOpacity,
+    {
+      style: [styles.button, { backgroundColor: colors.primary }],
+      onPress: () => {
+        impactLight();
+        reset();
+      },
+      activeOpacity: 0.85,
+      touchSoundDisabled: true,
+      accessibilityRole: "button",
+      accessibilityLabel: "Try again"
+    },
+    /* @__PURE__ */ React.createElement(Text, { style: [styles.buttonLabel, { color: colors.primaryForeground }], allowFontScaling: true }, "Try again")
+  ));
+}
+var ErrorBoundary = class extends React.Component {
+  constructor() {
+    super(...arguments);
+    this.state = { error: null };
+    this.reset = () => {
+      this.setState({ error: null });
+    };
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error, info) {
+    this.props.onError?.(error, info);
+  }
+  render() {
+    const { error } = this.state;
+    if (error) {
+      const { fallback, title, message } = this.props;
+      if (typeof fallback === "function") {
+        return fallback({ error, reset: this.reset });
+      }
+      if (fallback !== void 0) {
+        return fallback;
+      }
+      return /* @__PURE__ */ React.createElement(DefaultErrorFallback, { error, reset: this.reset, title, message });
+    }
+    return this.props.children;
+  }
+};
+var styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: s(32),
+    gap: vs(12)
+  },
+  iconCircle: {
+    width: s(64),
+    height: s(64),
+    borderRadius: RADIUS.full,
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: vs(4)
+  },
+  title: {
+    fontFamily: "Sohne-SemiBold",
+    fontSize: ms(18),
+    lineHeight: mvs(24),
+    textAlign: "center"
+  },
+  message: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(14),
+    lineHeight: mvs(20),
+    textAlign: "center"
+  },
+  button: {
+    marginTop: vs(8),
+    paddingHorizontal: s(20),
+    paddingVertical: vs(10),
+    borderRadius: RADIUS.md,
+    minHeight: vs(44),
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  buttonLabel: {
+    fontFamily: "Sohne-Medium",
+    fontSize: ms(15)
+  }
+});
+
+export { ErrorBoundary };

package/dist/chunk-M6ZXVBTK.mjs

@@ -0,0 +1,64 @@
+import { RADIUS } from './chunk-QY3X2UYR.mjs';
+import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { ms, vs, s } from './chunk-2CE3TQVY.mjs';
+import React from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+import { FontAwesome5, MaterialIcons, Entypo } from '@expo/vector-icons';
+
+function AlertBanner({ title, description, variant = "default", icon, iconName, iconColor, style }) {
+  const { colors, colorScheme } = useTheme();
+  const isDark = colorScheme === "dark";
+  const accentColor = variant === "destructive" ? colors.destructive : variant === "success" ? colors.success : variant === "warning" ? colors.warning : colors.foreground;
+  const bgColor = variant === "destructive" ? isDark ? "rgba(239, 83, 80, 0.15)" : "rgba(199, 40, 40, 0.10)" : variant === "success" ? isDark ? "rgba(46, 125, 82, 0.15)" : "rgba(26, 122, 69, 0.10)" : variant === "warning" ? isDark ? "rgba(245, 166, 35, 0.15)" : "rgba(154, 82, 0, 0.10)" : colors.surface;
+  const borderColor = variant === "destructive" ? isDark ? "rgba(239, 83, 80, 0.30)" : "rgba(199, 40, 40, 0.25)" : variant === "success" ? isDark ? "rgba(46, 125, 82, 0.30)" : "rgba(26, 122, 69, 0.25)" : variant === "warning" ? isDark ? "rgba(245, 166, 35, 0.30)" : "rgba(154, 82, 0, 0.25)" : colors.border;
+  const defaultIcon = variant === "success" ? /* @__PURE__ */ React.createElement(FontAwesome5, { name: "check-circle", size: ms(16), color: accentColor }) : variant === "destructive" ? /* @__PURE__ */ React.createElement(MaterialIcons, { name: "error-outline", size: ms(17), color: accentColor }) : variant === "warning" ? /* @__PURE__ */ React.createElement(MaterialIcons, { name: "warning-amber", size: ms(17), color: accentColor }) : (
+    // AUDIT FIX: default variant previously used colors.primary (near-black)
+    // as the info icon tint — ambiguous and heavy. accentResolved gives it
+    // a meaningful chromatic signal when an accent is defined.
+    /* @__PURE__ */ React.createElement(Entypo, { name: "info-with-circle", size: ms(16), color: accentColor })
+  );
+  const effectiveIcon = iconName ? renderIcon(iconName, ms(16), iconColor ?? accentColor) : icon ?? defaultIcon;
+  const a11yLabel = description ? `${title}. ${description}` : title;
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: [
+        styles.container,
+        { backgroundColor: bgColor, borderWidth: 1, borderColor },
+        style
+      ],
+      accessibilityRole: "alert",
+      accessibilityLabel: a11yLabel
+    },
+    /* @__PURE__ */ React.createElement(View, { style: styles.iconSlot }, effectiveIcon),
+    /* @__PURE__ */ React.createElement(View, { style: styles.content }, /* @__PURE__ */ React.createElement(Text, { style: [styles.title, { color: colors.foreground }], allowFontScaling: true }, title), description ? /* @__PURE__ */ React.createElement(Text, { style: [styles.description, { color: colors.foreground, opacity: 0.85 }], allowFontScaling: true }, description) : null)
+  );
+}
+var styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    borderRadius: RADIUS.lg,
+    gap: s(8),
+    paddingVertical: vs(10),
+    paddingHorizontal: s(12)
+  },
+  iconSlot: {
+    marginTop: vs(1)
+  },
+  content: {
+    flex: 1,
+    gap: vs(2)
+  },
+  title: {
+    fontFamily: "Sohne-Medium",
+    fontSize: ms(13)
+  },
+  description: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(12)
+  }
+});
+
+export { AlertBanner };