@webority/mobile-ui 0.0.38 → 0.1.0

package/lib/commonjs/components/Banner/Banner.js

@@ -1,401 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Banner = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _index = require("../../theme/index.js");
-var _corners = require("../../utils/corners.js");
-var _hapticUtils = require("../../utils/hapticUtils.js");
-var _index2 = require("../Skeleton/index.js");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-const Banner = exports.Banner = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  const {
-    title,
-    message,
-    variant = 'info',
-    icon,
-    actions,
-    dismissible = false,
-    onDismiss,
-    haptic,
-    visible = true,
-    animateMount = true,
-    loading = false,
-    accessibilityLabel,
-    style,
-    containerStyle,
-    iconCircleStyle,
-    tintBarStyle,
-    closeButtonStyle,
-    actionButtonStyle,
-    testID
-  } = props;
-  const theme = (0, _index.useTheme)();
-  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
-  const tint = (0, _react.useMemo)(() => tintFor(theme, variant), [theme, variant]);
-  const translateY = (0, _react.useRef)((0, _index.createAnimatedValue)(animateMount && visible ? -20 : 0)).current;
-  const opacity = (0, _react.useRef)((0, _index.createAnimatedValue)(animateMount && visible ? 0 : visible ? 1 : 0)).current;
-  const [mounted, setMounted] = (0, _react.useState)(visible);
-  const isFirstRun = (0, _react.useRef)(true);
-
-  // biome-ignore lint/correctness/useExhaustiveDependencies: runs on `visible` alone — adding `mounted` re-runs this effect after its own setMounted(false) and replays the enter animation
-  (0, _react.useEffect)(() => {
-    // Skip running an animation on first mount if animateMount is false.
-    if (isFirstRun.current) {
-      isFirstRun.current = false;
-      if (!animateMount) {
-        return;
-      }
-    }
-    let anim;
-    if (visible) {
-      setMounted(true);
-      anim = _reactNative.Animated.parallel([_reactNative.Animated.timing(translateY, {
-        toValue: 0,
-        duration: theme.motion.duration.normal,
-        useNativeDriver: true
-      }), _reactNative.Animated.timing(opacity, {
-        toValue: 1,
-        duration: theme.motion.duration.normal,
-        useNativeDriver: true
-      })]);
-      anim.start();
-    } else if (mounted) {
-      anim = _reactNative.Animated.parallel([_reactNative.Animated.timing(translateY, {
-        toValue: -20,
-        duration: theme.motion.duration.fast,
-        useNativeDriver: true
-      }), _reactNative.Animated.timing(opacity, {
-        toValue: 0,
-        duration: theme.motion.duration.fast,
-        useNativeDriver: true
-      })]);
-      anim.start(() => {
-        setMounted(false);
-      });
-    }
-    return () => anim?.stop();
-  }, [visible]);
-  if (!mounted) {
-    return null;
-  }
-  const safeTitle = title ?? ' ';
-  const safeMessageString = typeof message === 'string' ? message ?? ' ' : '';
-  const renderIcon = () => {
-    if (icon === false) {
-      return null;
-    }
-    if (icon) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.iconWrap,
-        children: icon
-      });
-    }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.iconCircle, {
-        backgroundColor: tint.bar + '22'
-      }, iconCircleStyle],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.iconGlyph, {
-          color: tint.glyphColor
-        }],
-        accessible: false,
-        children: tint.glyph
-      })
-    });
-  };
-  const messageString = typeof message === 'string' ? message : '';
-  const builtA11y = accessibilityLabel ?? (title ? `${title}. ${messageString}` : messageString || undefined);
-  const liveRegion = variant === 'error' ? 'assertive' : 'polite';
-  const rendered = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
-    ref: ref,
-    accessibilityRole: 'alert',
-    accessibilityLiveRegion: liveRegion,
-    accessibilityLabel: builtA11y,
-    testID: testID,
-    style: [styles.container, {
-      backgroundColor: theme.colors.background.secondary,
-      borderRadius: theme.radius.md,
-      ..._corners.smoothCorners,
-      padding: theme.spacing.md,
-      opacity,
-      transform: [{
-        translateY
-      }]
-    }, style, containerStyle],
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.tintBar, {
-        backgroundColor: tint.bar
-      }, tintBarStyle]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.row,
-      children: [renderIcon(), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.textBlock,
-        children: [title || loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: {
-            color: theme.colors.text.primary,
-            fontSize: theme.typography.fontSize.base,
-            fontWeight: theme.typography.fontWeight.semibold,
-            lineHeight: 20
-          },
-          numberOfLines: 2,
-          children: safeTitle
-        }) : null, typeof message === 'string' || loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: {
-            color: theme.colors.text.secondary,
-            fontSize: theme.typography.fontSize.sm,
-            lineHeight: 18,
-            marginTop: title ? 2 : 0
-          },
-          children: safeMessageString || ' '
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: {
-            marginTop: title ? 2 : 0
-          },
-          children: message
-        })]
-      }), dismissible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-        accessibilityRole: "button",
-        accessibilityLabel: "Dismiss banner",
-        onPress: () => {
-          const h = (0, _hapticUtils.resolveHaptic)(haptic, 'selection');
-          if (h) {
-            (0, _hapticUtils.triggerHaptic)(h);
-          }
-          onDismiss?.();
-        },
-        hitSlop: 8,
-        style: ({
-          pressed
-        }) => [styles.closeBtn, {
-          backgroundColor: pressed ? theme.colors.surface.pressed : 'transparent'
-        }, closeButtonStyle],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: {
-            color: theme.colors.text.secondary,
-            fontSize: theme.components.banner?.closeGlyphFontSize ?? 18,
-            fontWeight: theme.typography.fontWeight.bold,
-            lineHeight: 18
-          },
-          accessible: false,
-          children: "\xD7"
-        })
-      }) : null]
-    }), actions && actions.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.actionsRow,
-      children: actions.map((action, idx) => {
-        const isPrimary = (action.tone ?? 'primary') === 'primary';
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-          accessibilityRole: "button",
-          accessibilityLabel: action.label,
-          onPress: () => {
-            const h = (0, _hapticUtils.resolveHaptic)(haptic, 'selection');
-            if (h) {
-              (0, _hapticUtils.triggerHaptic)(h);
-            }
-            action.onPress();
-          },
-          style: ({
-            pressed
-          }) => [styles.actionBtn, {
-            backgroundColor: pressed ? theme.colors.surface.pressed : 'transparent'
-          }, actionButtonStyle],
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: {
-              color: isPrimary ? tint.glyphColor : theme.colors.text.secondary,
-              fontSize: theme.typography.fontSize.sm,
-              fontWeight: theme.typography.fontWeight.semibold
-            },
-            numberOfLines: 1,
-            children: action.label
-          })
-        }, `${action.label}-${idx}`);
-      })
-    }) : null]
-  });
-  if (loading) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(BannerSkeleton, {
-      ...props
-    });
-  }
-  return rendered;
-});
-Banner.displayName = 'Banner';
-
-/**
- * Placeholder shape for `<Banner>`. Keeps the icon circle on the left and
- * shows title + 1-2 message lines + optional action button row. Outer
- * container retains the elevated background so the banner footprint
- * doesn't shift when it loads.
- */
-const BannerSkeleton = ({
-  title,
-  actions,
-  icon,
-  containerStyle,
-  style
-}) => {
-  const theme = (0, _index.useTheme)();
-  const showIcon = icon !== false;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [{
-      flexDirection: 'row',
-      alignItems: 'flex-start',
-      backgroundColor: theme.colors.background.elevated,
-      borderRadius: theme.radius.md,
-      ..._corners.smoothCorners,
-      padding: theme.spacing.md,
-      borderWidth: 1,
-      borderColor: theme.colors.border.primary
-    }, containerStyle, style],
-    accessibilityRole: "progressbar",
-    accessibilityState: {
-      busy: true
-    },
-    children: [showIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: {
-        marginRight: theme.spacing.sm
-      },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Skeleton, {
-        shape: "circle",
-        width: 32,
-        height: 32
-      })
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: {
-        flex: 1
-      },
-      children: [title !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Skeleton, {
-        shape: "text",
-        width: "55%",
-        height: 16,
-        style: {
-          marginBottom: theme.spacing.xs
-        }
-      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.SkeletonText, {
-        lines: 2,
-        fontSize: 13,
-        lastLineWidth: "70%"
-      }), actions && actions.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: {
-          flexDirection: 'row',
-          marginTop: theme.spacing.sm
-        },
-        children: actions.map((_, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Skeleton, {
-          width: 72,
-          height: 28,
-          shape: "rounded",
-          style: {
-            marginRight: theme.spacing.sm
-          }
-        }, `sk-banner-action-${i}`))
-      }) : null]
-    })]
-  });
-};
-BannerSkeleton.displayName = 'BannerSkeleton';
-Banner.Skeleton = BannerSkeleton;
-const tintFor = (theme, variant) => {
-  switch (variant) {
-    case 'success':
-      return {
-        bar: theme.colors.success,
-        glyphColor: theme.colors.success,
-        glyph: '✓'
-      };
-    case 'warning':
-      return {
-        bar: theme.colors.warning,
-        glyphColor: theme.colors.warning,
-        glyph: '⚠'
-      };
-    case 'error':
-      return {
-        bar: theme.colors.error,
-        glyphColor: theme.colors.error,
-        glyph: '✗'
-      };
-    case 'neutral':
-      return {
-        bar: theme.colors.text.tertiary,
-        glyphColor: theme.colors.text.secondary,
-        glyph: 'i'
-      };
-    case 'info':
-    default:
-      return {
-        bar: theme.colors.primary,
-        glyphColor: theme.colors.primary,
-        glyph: 'i'
-      };
-  }
-};
-const buildStyles = theme => {
-  const iconCircleSize = theme.components.banner?.iconCircleSize ?? 28;
-  const closeButtonSize = theme.components.banner?.closeButtonSize ?? 28;
-  return _reactNative.StyleSheet.create({
-    container: {
-      overflow: 'hidden',
-      paddingLeft: theme.components.banner?.containerPaddingLeft ?? theme.spacing.md
-    },
-    tintBar: {
-      position: 'absolute',
-      left: 0,
-      top: 0,
-      bottom: 0,
-      width: theme.components.banner?.tintBarWidth ?? 4
-    },
-    row: {
-      flexDirection: 'row',
-      alignItems: 'flex-start'
-    },
-    iconWrap: {
-      marginRight: theme.components.banner?.iconGap ?? theme.spacing.sm
-    },
-    iconCircle: {
-      width: iconCircleSize,
-      height: iconCircleSize,
-      borderRadius: theme.components.banner?.iconCircleRadius ?? iconCircleSize / 2,
-      ..._corners.smoothCorners,
-      alignItems: 'center',
-      justifyContent: 'center',
-      marginRight: theme.components.banner?.iconGap ?? theme.spacing.sm
-    },
-    iconGlyph: {
-      fontSize: theme.components.banner?.iconGlyphFontSize ?? 15,
-      fontWeight: '700',
-      lineHeight: theme.components.banner?.iconGlyphLineHeight ?? 17
-    },
-    textBlock: {
-      flex: 1,
-      paddingRight: theme.components.banner?.textBlockPaddingRight ?? theme.spacing.xs
-    },
-    closeBtn: {
-      width: closeButtonSize,
-      height: closeButtonSize,
-      borderRadius: theme.components.banner?.closeButtonRadius ?? closeButtonSize / 2,
-      ..._corners.smoothCorners,
-      alignItems: 'center',
-      justifyContent: 'center',
-      marginLeft: theme.components.banner?.closeButtonMarginLeft ?? theme.spacing.xxs ?? 4
-    },
-    actionsRow: {
-      flexDirection: 'row',
-      justifyContent: 'flex-end',
-      marginTop: theme.components.banner?.actionsRowMarginTop ?? theme.spacing.xs,
-      gap: theme.components.banner?.actionsRowGap ?? 4
-    },
-    actionBtn: {
-      paddingHorizontal: theme.components.banner?.actionButtonPaddingHorizontal ?? theme.spacing.sm,
-      paddingVertical: theme.components.banner?.actionButtonPaddingVertical ?? 6,
-      borderRadius: theme.components.banner?.actionButtonRadius ?? theme.radius.sm,
-      ..._corners.smoothCorners
-    }
-  });
-};
-var _default = exports.default = Banner;
-//# sourceMappingURL=Banner.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.Banner=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_index=require("../../theme/index.js"),_corners=require("../../utils/corners.js"),_hapticUtils=require("../../utils/hapticUtils.js"),_index2=require("../Skeleton/index.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var n=new WeakMap,r=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var i,o,s={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return s;if(i=t?r:n){if(i.has(e))return i.get(e);i.set(e,s)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((o=(i=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(o.get||o.set)?i(s,t,o):s[t]=e[t]);return s})(e,t)}const Banner=exports.Banner=(0,_react.forwardRef)((e,t)=>{const{title:n,message:r,variant:i="info",icon:o,actions:s,dismissible:a=!1,onDismiss:c,haptic:l,visible:d=!0,animateMount:u=!0,loading:p=!1,accessibilityRole:m="alert",accessibilityLabel:g,style:h,containerStyle:x,iconCircleStyle:y,tintBarStyle:_,closeButtonStyle:b,actionButtonStyle:f,testID:j}=e,R=(0,_index.useTheme)(),v=(0,_react.useMemo)(()=>buildStyles(R),[R]),w=(0,_react.useMemo)(()=>tintFor(R,i),[R,i]),S=(0,_react.useRef)((0,_index.createAnimatedValue)(u&&d?-20:0)).current,B=(0,_react.useRef)((0,_index.createAnimatedValue)(u&&d?0:d?1:0)).current,[N,C]=(0,_react.useState)(d),k=(0,_react.useRef)(!0);if((0,_react.useEffect)(()=>{if(k.current&&(k.current=!1,!u))return;let e;return d?(C(!0),e=_reactNative.Animated.parallel([_reactNative.Animated.timing(S,{toValue:0,duration:R.motion.duration.normal,useNativeDriver:!0}),_reactNative.Animated.timing(B,{toValue:1,duration:R.motion.duration.normal,useNativeDriver:!0})]),e.start()):N&&(e=_reactNative.Animated.parallel([_reactNative.Animated.timing(S,{toValue:-20,duration:R.motion.duration.fast,useNativeDriver:!0}),_reactNative.Animated.timing(B,{toValue:0,duration:R.motion.duration.fast,useNativeDriver:!0})]),e.start(()=>{C(!1)})),()=>e?.stop()},[d]),!N)return null;const V=n??" ",z="string"==typeof r?r??" ":"",W="alert"===m?"error"===i?"assertive":"polite":"none",P=(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{ref:t,accessibilityRole:m,accessibilityLiveRegion:W,accessibilityLabel:g,testID:j,style:[v.container,{backgroundColor:R.colors.background.secondary,borderRadius:R.radius.md,..._corners.smoothCorners,padding:R.spacing.md,opacity:B,transform:[{translateY:S}]},h,x],children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[v.tintBar,{backgroundColor:w.bar},_]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:v.row,children:[!1===o?null:o?(0,_jsxRuntime.jsx)(_reactNative.View,{style:v.iconWrap,children:o}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:[v.iconCircle,{backgroundColor:w.bar+"22"},y],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[v.iconGlyph,{color:w.glyphColor}],accessible:!1,children:w.glyph})}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:v.textBlock,children:[n||p?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:{color:R.colors.text.primary,fontSize:R.typography.fontSize.base,...(0,_index.fontFor)(R,"semibold"),lineHeight:20},numberOfLines:2,children:V}):null,"string"==typeof r||p?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:{color:R.colors.text.secondary,fontSize:R.typography.fontSize.sm,...(0,_index.fontFor)(R,"normal"),lineHeight:18,marginTop:n?2:0},children:z||" "}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:{marginTop:n?2:0},children:r})]}),a?(0,_jsxRuntime.jsx)(_reactNative.Pressable,{accessibilityRole:"button",accessibilityLabel:"Dismiss banner",onPress:()=>{const e=(0,_hapticUtils.resolveHaptic)(l,"selection");e&&(0,_hapticUtils.triggerHaptic)(e),c?.()},hitSlop:8,style:({pressed:e})=>[v.closeBtn,{backgroundColor:e?R.colors.surface.pressed:"transparent"},b],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:{color:R.colors.text.secondary,fontSize:R.components.banner?.closeGlyphFontSize??18,fontWeight:R.typography.fontWeight.bold,lineHeight:18},accessible:!1,children:"×"})}):null]}),s&&s.length>0?(0,_jsxRuntime.jsx)(_reactNative.View,{style:v.actionsRow,children:s.map((e,t)=>{const n=e.tone??"primary",r=e.variant??"ghost",i="danger"===n?R.colors.error:"neutral"===n?R.colors.text.secondary:w.glyphColor,o="danger"===n?R.colors.onError:"neutral"===n?R.colors.text.inverse:w.on,s="solid"===r;return(0,_jsxRuntime.jsx)(_reactNative.Pressable,{accessibilityRole:"button",accessibilityLabel:e.label,onPress:()=>{const t=(0,_hapticUtils.resolveHaptic)(l,"selection");t&&(0,_hapticUtils.triggerHaptic)(t),e.onPress()},style:({pressed:t})=>[v.actionBtn,"md"===e.size&&v.actionBtnMd,"outline"===r&&{borderWidth:1,borderColor:i},{backgroundColor:s?i:t?R.colors.surface.pressed:"transparent",opacity:s&&t?.85:1},f],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:{color:s?o:i,fontSize:R.typography.fontSize.sm,...(0,_index.fontFor)(R,"semibold")},numberOfLines:1,children:e.label})},`${e.label}-${t}`)})}):null]});return p?(0,_jsxRuntime.jsx)(BannerSkeleton,{...e}):P});Banner.displayName="Banner";const BannerSkeleton=({title:e,actions:t,icon:n,containerStyle:r,style:i})=>{const o=(0,_index.useTheme)(),s=!1!==n;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[{flexDirection:"row",alignItems:"flex-start",backgroundColor:o.colors.background.elevated,borderRadius:o.radius.md,..._corners.smoothCorners,padding:o.spacing.md,borderWidth:1,borderColor:o.colors.border.primary},r,i],accessibilityRole:"progressbar",accessibilityState:{busy:!0},children:[s?(0,_jsxRuntime.jsx)(_reactNative.View,{style:{marginRight:o.spacing.sm},children:(0,_jsxRuntime.jsx)(_index2.Skeleton,{shape:"circle",width:32,height:32})}):null,(0,_jsxRuntime.jsxs)(_reactNative.View,{style:{flex:1},children:[void 0!==e?(0,_jsxRuntime.jsx)(_index2.Skeleton,{shape:"text",width:"55%",height:16,style:{marginBottom:o.spacing.xs}}):null,(0,_jsxRuntime.jsx)(_index2.SkeletonText,{lines:2,fontSize:13,lastLineWidth:"70%"}),t&&t.length>0?(0,_jsxRuntime.jsx)(_reactNative.View,{style:{flexDirection:"row",marginTop:o.spacing.sm},children:t.map((e,t)=>(0,_jsxRuntime.jsx)(_index2.Skeleton,{width:72,height:28,shape:"rounded",style:{marginRight:o.spacing.sm}},`sk-banner-action-${t}`))}):null]})]})};BannerSkeleton.displayName="BannerSkeleton",Banner.Skeleton=BannerSkeleton;const tintFor=(e,t)=>{switch(t){case"success":return{bar:e.colors.success,glyphColor:e.colors.success,on:e.colors.onSuccess,glyph:"✓"};case"warning":return{bar:e.colors.warning,glyphColor:e.colors.warning,on:e.colors.onWarning,glyph:"⚠"};case"error":return{bar:e.colors.error,glyphColor:e.colors.error,on:e.colors.onError,glyph:"✗"};case"neutral":return{bar:e.colors.text.tertiary,glyphColor:e.colors.text.secondary,on:e.colors.text.inverse,glyph:"i"};default:return{bar:e.colors.primary,glyphColor:e.colors.primary,on:e.colors.onPrimary,glyph:"i"}}},buildStyles=e=>{const t=e.components.banner?.iconCircleSize??28,n=e.components.banner?.closeButtonSize??28;return _reactNative.StyleSheet.create({container:{overflow:"hidden",paddingLeft:e.components.banner?.containerPaddingLeft??e.spacing.md},tintBar:{position:"absolute",left:0,top:0,bottom:0,width:e.components.banner?.tintBarWidth??4},row:{flexDirection:"row",alignItems:"flex-start"},iconWrap:{marginRight:e.components.banner?.iconGap??e.spacing.sm},iconCircle:{width:t,height:t,borderRadius:e.components.banner?.iconCircleRadius??t/2,..._corners.smoothCorners,alignItems:"center",justifyContent:"center",marginRight:e.components.banner?.iconGap??e.spacing.sm},iconGlyph:{fontSize:e.components.banner?.iconGlyphFontSize??15,fontWeight:"700",lineHeight:e.components.banner?.iconGlyphLineHeight??17},textBlock:{flex:1,paddingRight:e.components.banner?.textBlockPaddingRight??e.spacing.xs},closeBtn:{width:n,height:n,borderRadius:e.components.banner?.closeButtonRadius??n/2,..._corners.smoothCorners,alignItems:"center",justifyContent:"center",marginLeft:e.components.banner?.closeButtonMarginLeft??e.spacing.xxs??4},actionsRow:{flexDirection:"row",justifyContent:"flex-end",marginTop:e.components.banner?.actionsRowMarginTop??e.spacing.xs,gap:e.components.banner?.actionsRowGap??4},actionBtn:{paddingHorizontal:e.components.banner?.actionButtonPaddingHorizontal??e.spacing.sm,paddingVertical:e.components.banner?.actionButtonPaddingVertical??6,borderRadius:e.components.banner?.actionButtonRadius??e.radius.sm,..._corners.smoothCorners,alignItems:"center",justifyContent:"center"},actionBtnMd:{minHeight:44,paddingHorizontal:e.spacing.md}})};var _default=exports.default=Banner;

package/lib/commonjs/components/Banner/index.js

@@ -1,20 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Banner", {
-  enumerable: true,
-  get: function () {
-    return _Banner.Banner;
-  }
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _Banner.default;
-  }
-});
-var _Banner = _interopRequireWildcard(require("./Banner.js"));
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-//# sourceMappingURL=index.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Banner",{enumerable:!0,get:function(){return _Banner.Banner}}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return _Banner.default}});var _Banner=_interopRequireWildcard(require("./Banner.js"));function _interopRequireWildcard(e,r){if("function"==typeof WeakMap)var t=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(e,r){if(!r&&e&&e.__esModule)return e;var o,u,a={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return a;if(o=r?n:t){if(o.has(e))return o.get(e);o.set(e,a)}for(const r in e)"default"!==r&&{}.hasOwnProperty.call(e,r)&&((u=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,r))&&(u.get||u.set)?o(a,r,u):a[r]=e[r]);return a})(e,r)}