@coinbase/cds-mobile 0.0.0 → 8.13.2

package/esm/media/RemoteImage.js

@@ -0,0 +1,178 @@
+const _excluded = ["image"],
+  _excluded2 = ["width", "height", "aspectRatio", "shape", "shouldApplyDarkModeEnhacements", "darkModeEnhancementsApplied", "source", "size", "style", "borderColor", "borderRadius", "onError", "onLoad", "fallbackAccessibilityLabel", "fallbackAccessibilityHint"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { memo, useMemo } from 'react';
+import { Image } from 'react-native';
+import { ClipPath, Defs, Image as SvgImage, Path, Svg, SvgXml } from 'react-native-svg';
+import { SvgCssUri } from 'react-native-svg/css';
+import { useTheme } from '../hooks/useTheme';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function getSource(source, cachePolicy) {
+  if (typeof source === 'string') {
+    if (source.endsWith('.svg')) {
+      return {
+        uri: source,
+        headers: {
+          format: 'svg'
+        },
+        cache: cachePolicy
+      };
+    }
+    return {
+      uri: source,
+      cache: cachePolicy
+    };
+  }
+  return source;
+}
+function isSvg(source) {
+  var _source$headers;
+  return typeof source === 'object' && 'headers' in source && ((_source$headers = source.headers) == null ? void 0 : _source$headers.format) === 'svg';
+}
+function isImageURISource(source) {
+  return typeof source === 'object' && 'uri' in source;
+}
+const HexagonClipPath = _ref => {
+  let {
+      image
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/_jsxs(Svg, _extends({}, props, {
+    viewBox: "0 0 66 62",
+    children: [/*#__PURE__*/_jsx(Defs, {
+      children: /*#__PURE__*/_jsx(ClipPath, {
+        id: "hex-hw-shapeclip-clipconfig",
+        children: /*#__PURE__*/_jsx(Path, {
+          d: "M63.4372 22.8624C66.2475 27.781 66.2475 33.819 63.4372 38.7376L54.981 53.5376C52.1324 58.5231 46.8307 61.6 41.0887 61.6H24.4562C18.7142 61.6 13.4125 58.5231 10.564 53.5376L2.10774 38.7376C-0.702577 33.819 -0.702582 27.781 2.10774 22.8624L10.564 8.06243C13.4125 3.07687 18.7142 0 24.4562 0H41.0887C46.8307 0 52.1324 3.07686 54.981 8.06242L63.4372 22.8624Z"
+        })
+      })
+    }), image]
+  }));
+};
+const shapeBorderRadius = {
+  circle: 1e5,
+  squircle: 8,
+  square: 4,
+  rectangle: 0,
+  hexagon: 0
+};
+export const RemoteImage = /*#__PURE__*/memo(function RemoteImage(_ref2) {
+  var _props$accessible;
+  let {
+      width,
+      height,
+      aspectRatio,
+      shape = 'square',
+      shouldApplyDarkModeEnhacements,
+      darkModeEnhancementsApplied,
+      source,
+      size = 'm',
+      style,
+      borderColor,
+      borderRadius,
+      onError,
+      onLoad,
+      fallbackAccessibilityLabel,
+      fallbackAccessibilityHint
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  const shapeRadius = shapeBorderRadius[shape];
+  const {
+    activeColorScheme,
+    avatarSize
+  } = useTheme();
+
+  // If height and width are not provided, we default to avatarSize
+  const computedHeight = useMemo(() => width || height ? height : avatarSize[size], [width, height, avatarSize, size]);
+  const computedWidth = useMemo(() => width || height ? width : avatarSize[size], [width, height, avatarSize, size]);
+  const useFallback = source === undefined;
+  const transformedSource = useMemo(() => typeof source === 'string' ? getSource(source) : source, [source]);
+  const theme = useTheme();
+  const applyDarkModeEnhancement = activeColorScheme === 'dark' && (shouldApplyDarkModeEnhacements || darkModeEnhancementsApplied);
+  const darkModeStyles = useMemo(() => {
+    if (applyDarkModeEnhancement) {
+      return {
+        backgroundColor: theme.color.bgInverse,
+        borderWidth: 1,
+        borderColor: theme.color.bgLineHeavy
+      };
+    }
+    return undefined;
+  }, [applyDarkModeEnhancement, theme.color]);
+  const borderStyles = useMemo(() => {
+    // shouldApplyDarkModeEnhancement border decoration takes precedence
+    if (!applyDarkModeEnhancement && borderColor) {
+      return {
+        borderColor: theme.color[borderColor],
+        borderWidth: 2
+      };
+    }
+    return undefined;
+  }, [applyDarkModeEnhancement, borderColor, theme.color]);
+  const styles = useMemo(() => [{
+    aspectRatio: aspectRatio ? aspectRatio[0] / aspectRatio[1] : undefined,
+    borderRadius: borderRadius != null ? borderRadius : shapeRadius
+  }, darkModeStyles, borderStyles, style].filter(Boolean), [aspectRatio, shapeRadius, borderRadius, borderStyles, style, darkModeStyles]);
+  const stylesWithDimensions = useMemo(() => [{
+    width: computedWidth,
+    height: computedHeight
+  }, ...styles], [computedHeight, computedWidth, styles]);
+  const isAccessible = (_props$accessible = props.accessible) != null ? _props$accessible : !!props.accessibilityLabel;
+  if (isSvg(transformedSource)) {
+    var _transformedSource$ur;
+    return /*#__PURE__*/_jsx(SvgCssUri, _extends({
+      accessibilityRole: "image",
+      accessible: !!props.accessibilityLabel,
+      style: styles,
+      uri: isImageURISource(transformedSource) ? (_transformedSource$ur = transformedSource == null ? void 0 : transformedSource.uri) != null ? _transformedSource$ur : null : null
+    }, props, {
+      height: computedHeight,
+      width: computedWidth
+    }));
+  }
+  if (useFallback) {
+    var _props$accessibilityR;
+    const darkFallback = require('./RemoteImageFallbackXmls/dark');
+    const lightFallback = require('./RemoteImageFallbackXmls/light');
+    return /*#__PURE__*/_jsx(SvgXml, {
+      accessibilityHint: fallbackAccessibilityHint,
+      accessibilityLabel: fallbackAccessibilityLabel,
+      accessibilityRole: (_props$accessibilityR = props.accessibilityRole) != null ? _props$accessibilityR : 'image',
+      accessible: !!fallbackAccessibilityLabel,
+      height: computedHeight,
+      style: styles,
+      width: computedWidth,
+      xml: activeColorScheme === 'dark' ? darkFallback.content : lightFallback.content
+    });
+  }
+  if (shape === 'hexagon') {
+    var _props$accessibilityR2;
+    return /*#__PURE__*/_jsx(HexagonClipPath, {
+      accessibilityHint: props.accessibilityHint,
+      accessibilityLabel: props.accessibilityLabel,
+      accessibilityRole: (_props$accessibilityR2 = props.accessibilityRole) != null ? _props$accessibilityR2 : 'image',
+      accessible: isAccessible,
+      image: /*#__PURE__*/_jsx(SvgImage, {
+        clipPath: "url(#hex-hw-shapeclip-clipconfig)",
+        height: "100%",
+        href: source,
+        width: "100%",
+        x: 0,
+        y: 0
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(Image, _extends({
+    accessibilityIgnoresInvertColors: true,
+    accessibilityElementsHidden: !props.accessibilityLabel,
+    accessibilityRole: "image",
+    importantForAccessibility: props.accessibilityLabel ? 'auto' : 'no',
+    onError: onError,
+    onLoad: onLoad,
+    source: transformedSource
+  }, props, {
+    style: stylesWithDimensions
+  }));
+});
+export { getSource, HexagonClipPath };

package/esm/media/RemoteImageFallbackXmls/dark.js

@@ -0,0 +1,3 @@
+module.exports = {
+  content: "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <rect width=\"24\" height=\"24\" fill=\"white\"/>\n  <rect width=\"24\" height=\"24\" fill=\"#8A919E\"/>\n  <circle cx=\"16\" cy=\"15\" r=\"3\" fill=\"#0A0B0D\"/>\n  <rect x=\"11\" y=\"6\" width=\"5\" height=\"5\" fill=\"#0A0B0D\"/>\n  <path d=\"M5 15L8.5 9L12 15H5Z\" fill=\"#0A0B0D\"/>\n  </svg>"
+};

package/esm/media/RemoteImageFallbackXmls/light.js

@@ -0,0 +1,3 @@
+module.exports = {
+  content: "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <rect width=\"24\" height=\"24\" fill=\"white\"/>\n  <rect width=\"24\" height=\"24\" fill=\"#5B616E\"/>\n  <circle cx=\"16\" cy=\"15\" r=\"3\" fill=\"white\"/>\n  <rect x=\"11\" y=\"6\" width=\"5\" height=\"5\" fill=\"white\"/>\n  <path d=\"M5 15L8.5 9L12 15H5Z\" fill=\"white\"/>\n  </svg>"
+};

package/esm/media/RemoteImageGroup.js

@@ -0,0 +1,111 @@
+const _excluded = ["children", "size", "max", "shape", "testID"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { Children, isValidElement, useMemo } from 'react';
+import { StyleSheet, Text } from 'react-native';
+import { shapeBorderRadius } from '@coinbase/cds-common/tokens/borderRadius';
+import { useTheme } from '../hooks/useTheme';
+import { Box } from '../layout/Box';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const RemoteImageGroup = _ref => {
+  let {
+      children,
+      size = 'm',
+      max = 4,
+      shape = 'circle',
+      testID
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const {
+    avatarSize,
+    fontFamily,
+    color
+  } = useTheme();
+  const shapeStyle = shapeStyles[shape];
+  const sizeAsNumber = typeof size === 'number' ? size : avatarSize[size];
+  const overlapSpacing = sizeAsNumber <= 40 ? 8 : 16;
+  const excess = Children.count(children) - max;
+  const groupChildren = useMemo(() => {
+    const arrayChildren = Children.toArray(children);
+    if (excess > 0) {
+      return arrayChildren.slice(0, -excess);
+    }
+    return arrayChildren;
+  }, [children, excess]);
+  const typographyStyles = useMemo(() => {
+    return {
+      fontFamily: fontFamily.legal,
+      color: color.fg,
+      fontSize: sizeAsNumber * 0.4
+    };
+  }, [sizeAsNumber, fontFamily, color]);
+  return /*#__PURE__*/_jsxs(Box, _extends({
+    alignItems: "center",
+    display: "flex",
+    flexDirection: "row",
+    position: "relative",
+    testID: testID
+  }, props, {
+    children: [groupChildren.map((child, index) => {
+      if (! /*#__PURE__*/isValidElement(child)) {
+        return null;
+      }
+
+      // dynamically apply uniform sizing and shape to all RemoteImage children elements
+      const clonedChild = /*#__PURE__*/React.cloneElement(child, _extends({
+        testID: (testID ? testID + "-" : '') + "image-" + index,
+        width: sizeAsNumber,
+        height: sizeAsNumber
+      }, child.props.shape ? undefined : {
+        shape
+      }));
+
+      // zIndex is progressively lower so that each child is stacked below the previous one
+      const zIndex = -index;
+      return /*#__PURE__*/_jsx(Box, {
+        left: index === 0 ? 'initial' : overlapSpacing * zIndex,
+        position: "relative",
+        testID: (testID ? testID + "-" : '') + "inner-box-" + index,
+        zIndex: zIndex,
+        children: clonedChild
+      }, index);
+    }), excess > 0 && /*#__PURE__*/_jsx(Box, {
+      alignItems: "center",
+      background: "bgOverlay",
+      height: sizeAsNumber,
+      justifyContent: "center",
+      left: groupChildren.length * overlapSpacing * -1,
+      position: "relative",
+      style: shapeStyle,
+      width: sizeAsNumber,
+      zIndex: groupChildren.length * -1,
+      children: /*#__PURE__*/_jsxs(Text, {
+        style: [typographyStyles, styles.centerText],
+        testID: (testID ? testID + "-" : '') + "excess-text",
+        children: ["+", excess]
+      })
+    })]
+  }));
+};
+const styles = StyleSheet.create({
+  centerText: {
+    textAlign: 'center'
+  }
+});
+export const shapeStyles = StyleSheet.create({
+  circle: {
+    borderRadius: shapeBorderRadius.circle
+  },
+  squircle: {
+    borderRadius: shapeBorderRadius.squircle
+  },
+  square: {
+    borderRadius: shapeBorderRadius.square
+  },
+  rectangle: {
+    borderRadius: shapeBorderRadius.rectangle
+  },
+  hexagon: {
+    borderRadius: shapeBorderRadius.hexagon
+  }
+});

package/esm/media/__figma__/Avatar.figma.js

@@ -0,0 +1,56 @@
+const _excluded = ["variant", "shape"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React from 'react';
+import { figma } from '@figma/code-connect';
+import { Avatar } from '../Avatar';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(Avatar, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=60-643&m=dev', {
+  imports: ["import {Avatar} from '@coinbase/cds-mobile/media/Avatar'"],
+  props: {
+    shape: figma.enum('shape', {
+      circle: 'circle',
+      square: 'square',
+      polygon: 'polygon'
+    }),
+    size: figma.enum('size', {
+      'm (24)': 'm',
+      'l (32)': 'l',
+      'xl (40)': 'xl',
+      'xxl (48)': 'xxl',
+      'xxxl (56)': 'xxxl'
+    }),
+    colorScheme: figma.enum('color scheme', {
+      teal: 'teal',
+      purple: 'purple',
+      pink: 'pink',
+      green: 'green',
+      gray: 'gray',
+      NA: 'blue',
+      blue: 'blue'
+    }),
+    variant: figma.enum('variant', {
+      image: 'image',
+      initial: 'initial',
+      NFT: 'nft'
+    }),
+    name: figma.enum('variant', {
+      initial: figma.string('initial')
+    }),
+    src: figma.enum('variant', {
+      image: 'url'
+    })
+  },
+  // @ts-expect-error shape mapping issue
+  example: _ref => {
+    let {
+        variant,
+        shape
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    return /*#__PURE__*/_jsx(Avatar, _extends({}, props, {
+      alt: variant,
+      shape: shape
+    }));
+  }
+});

package/esm/media/__stories__/Avatar.stories.js

@@ -0,0 +1,134 @@
+import React from 'react';
+import { getAvatarFallbackColor } from '@coinbase/cds-common/media/getAvatarFallbackColor';
+import { colorSchemeMap } from '@coinbase/cds-common/tokens/avatar';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { HStack } from '../../layout/HStack';
+import { VStack } from '../../layout/VStack';
+import { Avatar } from '../Avatar';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const image = 'https://avatars.slack-edge.com/2019-12-09/865473396980_e8c83b072b452e4d03f7_192.jpg';
+const names = ['Sneezy', 'Happy', 'Sleepy', 'Doc', 'Bashful', 'Grumpy', 'Dopey', 'Lilo', 'Stitch'];
+const FallbackColored = () => {
+  return /*#__PURE__*/_jsx(HStack, {
+    alignItems: "center",
+    flexWrap: "wrap",
+    gap: 2,
+    children: names.map((name, idx) => {
+      const avatarFallbackColor = getAvatarFallbackColor(name);
+      return /*#__PURE__*/_jsx(Avatar, {
+        accessibilityLabel: "",
+        colorScheme: idx === 0 ? 'blue' : avatarFallbackColor,
+        name: name
+      }, name);
+    })
+  });
+};
+const colorSchemes = Object.keys(colorSchemeMap);
+const AvatarScreen = () => {
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      title: "Normal",
+      children: /*#__PURE__*/_jsxs(HStack, {
+        alignItems: "center",
+        flexWrap: "wrap",
+        gap: 2,
+        children: [/*#__PURE__*/_jsx(Avatar, {
+          accessibilityLabel: "",
+          src: image
+        }), /*#__PURE__*/_jsx(Avatar, {
+          accessibilityLabel: "",
+          name: "Happy",
+          shape: "square",
+          src: image
+        }), /*#__PURE__*/_jsx(Avatar, {
+          accessibilityLabel: "",
+          name: "Grumpy",
+          shape: "hexagon",
+          src: image
+        }), /*#__PURE__*/_jsx(Avatar, {
+          accessibilityLabel: "",
+          borderColor: "bgPositive",
+          name: "Sleepy",
+          src: image
+        }), /*#__PURE__*/_jsx(Avatar, {
+          accessibilityLabel: "",
+          name: "Bashful",
+          size: "m",
+          src: image
+        }), /*#__PURE__*/_jsx(Avatar, {
+          accessibilityLabel: "",
+          name: "Grumpy",
+          size: "l",
+          src: image
+        }), /*#__PURE__*/_jsx(Avatar, {
+          accessibilityLabel: "",
+          name: "Grumpy",
+          size: "xl",
+          src: image
+        }), /*#__PURE__*/_jsx(Avatar, {
+          accessibilityLabel: "",
+          name: "Grumpy",
+          size: "xxl",
+          src: image
+        }), /*#__PURE__*/_jsx(Avatar, {
+          accessibilityLabel: "",
+          name: "Grumpy",
+          size: "xxxl",
+          src: image
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Fallback Image",
+      children: /*#__PURE__*/_jsxs(HStack, {
+        alignItems: "center",
+        flexWrap: "wrap",
+        gap: 2,
+        children: [/*#__PURE__*/_jsx(Avatar, {
+          accessibilityLabel: ""
+        }), /*#__PURE__*/_jsx(Avatar, {
+          accessibilityLabel: "",
+          shape: "square"
+        }), /*#__PURE__*/_jsx(Avatar, {
+          accessibilityLabel: "",
+          shape: "hexagon"
+        }), /*#__PURE__*/_jsx(Avatar, {
+          accessibilityLabel: "",
+          borderColor: "bgPositive"
+        }), /*#__PURE__*/_jsx(Avatar, {
+          accessibilityLabel: "",
+          size: "m"
+        }), /*#__PURE__*/_jsx(Avatar, {
+          accessibilityLabel: "",
+          size: "l"
+        }), /*#__PURE__*/_jsx(Avatar, {
+          accessibilityLabel: "",
+          size: "xl"
+        }), /*#__PURE__*/_jsx(Avatar, {
+          accessibilityLabel: "",
+          size: "xxl"
+        }), /*#__PURE__*/_jsx(Avatar, {
+          accessibilityLabel: "",
+          size: "xxxl"
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Color Schemes",
+      children: /*#__PURE__*/_jsx(HStack, {
+        gap: 2,
+        children: colorSchemes.map(colorScheme => /*#__PURE__*/_jsx(Avatar, {
+          accessibilityLabel: "",
+          colorScheme: colorScheme,
+          name: colorScheme,
+          size: "l"
+        }, colorScheme))
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Fallback Colored",
+      children: /*#__PURE__*/_jsx(VStack, {
+        gap: 2,
+        children: /*#__PURE__*/_jsx(FallbackColored, {})
+      })
+    })]
+  });
+};
+export default AvatarScreen;

package/esm/media/__stories__/CarouselAlphaExample.js

@@ -0,0 +1,93 @@
+const _excluded = ["pictogram", "spotSquare"],
+  _excluded2 = ["image"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { useCallback, useEffect, useState } from 'react';
+import { feedImages } from '@coinbase/cds-common/internal/data/feedImages';
+import { Carousel } from '../../alpha/carousel/Carousel';
+import { useCarousel } from '../../alpha/carousel/useCarousel';
+import { AnnouncementCard } from '../../cards/AnnouncementCard';
+import { Divider } from '../../layout/Divider';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export function CarouselItem(_ref) {
+  let {
+      pictogram,
+      spotSquare
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const handleOnPress = useCallback(() => {
+    console.log('pressed card');
+  }, []);
+  return /*#__PURE__*/_jsx(AnnouncementCard, _extends({
+    description: "You can fit up to fifty two chararcters on 2 lines",
+    onPress: handleOnPress,
+    pictogram: pictogram,
+    spotSquare: spotSquare,
+    title: "Title/Headline"
+  }, props));
+}
+export function CarouselItemImage(_ref2) {
+  let {
+      image
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  const handleOnPress = useCallback(() => {
+    console.log('pressed card');
+  }, []);
+  return /*#__PURE__*/_jsx(AnnouncementCard, _extends({
+    description: "You can fit up to fifty two chararcters on 2 lines",
+    image: image,
+    onPress: handleOnPress,
+    title: "Title/Headline"
+  }, props));
+}
+export function ProgressBarsExample() {
+  const carouselRef = useCarousel();
+  const [currentCarouselRef, setCurrentCarouselRef] = useState(carouselRef.current);
+  const onDismissItem = useCallback(id => {
+    setCurrentCarouselRef(carouselRef.current);
+    console.log('onDismissItem', id);
+  }, [carouselRef]);
+  const onDismissLastItem = useCallback(() => {
+    console.log('onDismissLastItem');
+  }, []);
+  useEffect(() => {
+    setCurrentCarouselRef(carouselRef.current);
+  }, [carouselRef]);
+  const handleOnMomentumScrollEnd = useCallback(() => {
+    setCurrentCarouselRef(carouselRef.current);
+  }, [carouselRef]);
+  const accessibilityLabel = currentCarouselRef.currentIndex + 1 + " of " + currentCarouselRef.length + ", Title/Headline";
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Carousel, {
+      showDismiss: true,
+      showProgress: true,
+      carouselRef: carouselRef,
+      dismissButtonAccessibilityLabel: "Close",
+      items: [/*#__PURE__*/_jsx(CarouselItem, {
+        accessibilityLabel: accessibilityLabel,
+        spotSquare: "sparkleToken"
+      }, "item1"), /*#__PURE__*/_jsx(CarouselItem, {
+        accessibilityLabel: accessibilityLabel,
+        pictogram: "addressBook"
+      }, "item2"), /*#__PURE__*/_jsx(CarouselItem, {
+        accessibilityLabel: accessibilityLabel,
+        spotSquare: "announcementAdvancedTrading"
+      }, "item3"), /*#__PURE__*/_jsx(CarouselItem, {
+        accessibilityLabel: accessibilityLabel,
+        pictogram: "worldwide"
+      }, "item4")],
+      onDismissItem: onDismissItem,
+      onDismissLastItem: onDismissLastItem,
+      onMomentumScrollEnd: handleOnMomentumScrollEnd
+    }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(Carousel, {
+      showProgress: true,
+      items: feedImages.map((item, index) => /*#__PURE__*/_jsx(CarouselItemImage, {
+        accessibilityLabel: index + 1 + " of " + feedImages.length + ", Title/Headline",
+        image: item
+      }, item)),
+      onDismissItem: onDismissItem,
+      onDismissLastItem: onDismissLastItem
+    }), /*#__PURE__*/_jsx(Divider, {})]
+  });
+}