@coinbase/cds-mobile 0.0.0 → 8.13.2

package/esm/system/Pressable.js

@@ -0,0 +1,255 @@
+const _excluded = ["children", "disabled", "background", "block", "borderColor", "borderRadius", "borderWidth", "elevation", "contentStyle", "wrapperStyles", "blendStyles", "transparentWhileInactive", "transparentWhilePressed", "pin", "bordered", "borderedTop", "borderedBottom", "borderedStart", "borderedEnd", "borderedHorizontal", "borderedVertical", "dangerouslySetBackground", "display", "position", "overflow", "zIndex", "gap", "columnGap", "rowGap", "justifyContent", "alignContent", "alignItems", "alignSelf", "flexDirection", "flexWrap", "color", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "borderTopWidth", "borderEndWidth", "borderBottomWidth", "borderStartWidth", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight", "textAlign", "textDecorationStyle", "textDecorationLine", "textTransform", "padding", "paddingX", "paddingY", "paddingTop", "paddingBottom", "paddingStart", "paddingEnd", "margin", "marginX", "marginY", "marginTop", "marginBottom", "marginStart", "marginEnd", "userSelect", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "aspectRatio", "top", "bottom", "left", "right", "transform", "flexBasis", "flexShrink", "flexGrow", "opacity", "disableDebounce", "feedback", "loading", "onPress", "onPressIn", "onPressOut", "noScaleOnPress", "style", "eventConfig", "analyticsId", "debounceTime", "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, { forwardRef, memo, useCallback, useMemo, useRef, useState } from 'react';
+import { Pressable as NativePressable } from 'react-native';
+import { useEventHandler } from '@coinbase/cds-common/hooks/useEventHandler';
+import { usePressAnimation } from '../hooks/usePressAnimation';
+import { Haptics } from '../utils/haptics';
+import { Interactable } from './Interactable';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Pressable = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Pressable(_ref, forwardedRef) {
+  let {
+      // Interactable
+      children,
+      disabled,
+      background,
+      block,
+      borderColor,
+      borderRadius,
+      borderWidth,
+      elevation,
+      contentStyle,
+      wrapperStyles,
+      blendStyles,
+      transparentWhileInactive,
+      transparentWhilePressed,
+      pin,
+      bordered,
+      borderedTop,
+      borderedBottom,
+      borderedStart,
+      borderedEnd,
+      borderedHorizontal,
+      borderedVertical,
+      dangerouslySetBackground,
+      display,
+      position,
+      overflow,
+      zIndex,
+      gap,
+      columnGap,
+      rowGap,
+      justifyContent,
+      alignContent,
+      alignItems,
+      alignSelf,
+      flexDirection,
+      flexWrap,
+      color,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      borderTopWidth,
+      borderEndWidth,
+      borderBottomWidth,
+      borderStartWidth,
+      font,
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight,
+      textAlign,
+      textDecorationStyle,
+      textDecorationLine,
+      textTransform,
+      padding,
+      paddingX,
+      paddingY,
+      paddingTop,
+      paddingBottom,
+      paddingStart,
+      paddingEnd,
+      margin,
+      marginX,
+      marginY,
+      marginTop,
+      marginBottom,
+      marginStart,
+      marginEnd,
+      userSelect,
+      width,
+      height,
+      minWidth,
+      minHeight,
+      maxWidth,
+      maxHeight,
+      aspectRatio,
+      top,
+      bottom,
+      left,
+      right,
+      transform,
+      flexBasis,
+      flexShrink,
+      flexGrow,
+      opacity,
+      // Pressable
+      disableDebounce,
+      feedback = 'none',
+      loading,
+      onPress,
+      onPressIn,
+      onPressOut,
+      noScaleOnPress,
+      style,
+      eventConfig,
+      analyticsId,
+      debounceTime,
+      testID
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const [pressIn, pressOut, pressScale] = usePressAnimation();
+  const [pressed, setPressed] = useState(false);
+  const lastPressedTimeStampRef = useRef(null);
+  const onEventHandler = useEventHandler('Button', 'onPress', eventConfig, analyticsId);
+  const onPressHandler = useCallback(event => {
+    if (feedback === 'light') void Haptics.lightImpact();else if (feedback === 'normal') void Haptics.normalImpact();else if (feedback === 'heavy') void Haptics.heavyImpact();
+    onPress == null || onPress(event);
+    onEventHandler();
+  }, [feedback, onEventHandler, onPress]);
+  const handlePress = useCallback(event => {
+    const now = Date.now();
+    if (disableDebounce || debounceTime === undefined) {
+      onPressHandler(event);
+      lastPressedTimeStampRef.current = now;
+      return;
+    }
+    if (lastPressedTimeStampRef.current === null || now - lastPressedTimeStampRef.current >= debounceTime) {
+      onPressHandler(event);
+    }
+    lastPressedTimeStampRef.current = now;
+  }, [debounceTime, disableDebounce, onPressHandler]);
+  const handlePressIn = useCallback(event => {
+    setPressed(true);
+    pressIn(event);
+    onPressIn == null || onPressIn(event);
+  }, [pressIn, onPressIn]);
+  const handlePressOut = useCallback(event => {
+    setPressed(false);
+    pressOut(event);
+    onPressOut == null || onPressOut(event);
+  }, [pressOut, onPressOut]);
+  const accessibilityState = useMemo(() => ({
+    busy: loading,
+    disabled: !!disabled
+  }), [loading, disabled]);
+  const scaleOnPressStyle = useMemo(() => [{
+    transform: [{
+      scale: pressScale
+    }]
+  }], [pressScale]);
+  return /*#__PURE__*/_jsx(NativePressable, _extends({
+    ref: forwardedRef,
+    accessibilityRole: "button",
+    accessibilityState: accessibilityState,
+    disabled: disabled || loading,
+    onPress: handlePress,
+    onPressIn: handlePressIn,
+    onPressOut: handlePressOut,
+    style: style,
+    testID: testID
+    // Spread all props except the InteractableBaseProps, which must be destructured
+  }, props, {
+    children: /*#__PURE__*/_jsx(Interactable, {
+      alignContent: alignContent,
+      alignItems: alignItems,
+      alignSelf: alignSelf,
+      aspectRatio: aspectRatio,
+      background: background,
+      blendStyles: blendStyles,
+      block: block,
+      borderBottomLeftRadius: borderBottomLeftRadius,
+      borderBottomRightRadius: borderBottomRightRadius,
+      borderBottomWidth: borderBottomWidth,
+      borderColor: borderColor,
+      borderEndWidth: borderEndWidth,
+      borderRadius: borderRadius,
+      borderStartWidth: borderStartWidth,
+      borderTopLeftRadius: borderTopLeftRadius,
+      borderTopRightRadius: borderTopRightRadius,
+      borderTopWidth: borderTopWidth,
+      borderWidth: borderWidth,
+      bordered: bordered,
+      borderedBottom: borderedBottom,
+      borderedEnd: borderedEnd,
+      borderedHorizontal: borderedHorizontal,
+      borderedStart: borderedStart,
+      borderedTop: borderedTop,
+      borderedVertical: borderedVertical,
+      bottom: bottom,
+      color: color,
+      columnGap: columnGap,
+      contentStyle: contentStyle,
+      dangerouslySetBackground: dangerouslySetBackground,
+      disabled: disabled,
+      display: display,
+      elevation: elevation,
+      flexBasis: flexBasis,
+      flexDirection: flexDirection,
+      flexGrow: flexGrow,
+      flexShrink: flexShrink,
+      flexWrap: flexWrap,
+      font: font,
+      fontFamily: fontFamily,
+      fontSize: fontSize,
+      fontWeight: fontWeight,
+      gap: gap,
+      height: height,
+      justifyContent: justifyContent,
+      left: left,
+      lineHeight: lineHeight,
+      margin: margin,
+      marginBottom: marginBottom,
+      marginEnd: marginEnd,
+      marginStart: marginStart,
+      marginTop: marginTop,
+      marginX: marginX,
+      marginY: marginY,
+      maxHeight: maxHeight,
+      maxWidth: maxWidth,
+      minHeight: minHeight,
+      minWidth: minWidth,
+      opacity: opacity,
+      overflow: overflow,
+      padding: padding,
+      paddingBottom: paddingBottom,
+      paddingEnd: paddingEnd,
+      paddingStart: paddingStart,
+      paddingTop: paddingTop,
+      paddingX: paddingX,
+      paddingY: paddingY,
+      pin: pin,
+      position: position,
+      pressed: pressed || loading // loading shares the same styles as pressed
+      ,
+      right: right,
+      rowGap: rowGap,
+      style: !noScaleOnPress ? scaleOnPressStyle : undefined,
+      textAlign: textAlign,
+      textDecorationLine: textDecorationLine,
+      textDecorationStyle: textDecorationStyle,
+      textTransform: textTransform,
+      top: top,
+      transform: transform,
+      transparentWhileInactive: transparentWhileInactive,
+      transparentWhilePressed: transparentWhilePressed,
+      userSelect: userSelect,
+      width: width,
+      wrapperStyles: wrapperStyles,
+      zIndex: zIndex,
+      children: children
+    })
+  }));
+}));

package/esm/system/PressableOpacity.js

@@ -0,0 +1,20 @@
+const _excluded = ["children"];
+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 { Pressable } from './Pressable';
+
+/** @deprecated This component will be removed in a future version. Use `<Pressable background="transparent">` instead. */
+import { jsx as _jsx } from "react/jsx-runtime";
+/** @deprecated This component will be removed in a future version. Use `<Pressable background="transparent">` instead. */
+export const PressableOpacity = _ref => {
+  let {
+      children
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/_jsx(Pressable, _extends({}, props, {
+    background: "transparent",
+    borderColor: "transparent",
+    children: children
+  }));
+};

package/esm/system/StatusBar.js

@@ -0,0 +1,66 @@
+import React, { memo, useCallback, useMemo } from 'react';
+import { Platform, StatusBar as RNStatusBar } from 'react-native';
+import { isLightOrDarkColor } from '@coinbase/cds-common/color/isLightOrDarkColor';
+import { useTheme } from '../hooks/useTheme';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * If bar-style is 'dark-content' that means app has a light background with dark text and icons.
+ * If bar-style is 'light-content' that means app has a dark background with light text and icons.
+ */
+export const useStatusBarStyle = function (_temp) {
+  var _theme$color;
+  let {
+    theme
+  } = _temp === void 0 ? {} : _temp;
+  const contextTheme = useTheme();
+  const {
+    bg
+  } = (_theme$color = theme == null ? void 0 : theme.color) != null ? _theme$color : contextTheme.color;
+  return useMemo(() => {
+    const luminosity = isLightOrDarkColor(bg);
+    return luminosity === 'light' ? 'dark-content' : 'light-content';
+  }, [bg]);
+};
+
+// Imperative way to update StatusBar styles
+export const useStatusBarUpdater = function (_temp2) {
+  let {
+    theme
+  } = _temp2 === void 0 ? {} : _temp2;
+  const barStyle = useStatusBarStyle({
+    theme
+  });
+  return useCallback(() => {
+    // Second argument is to ensure StatusBar style animates in
+    RNStatusBar.setBarStyle(barStyle, true);
+    if (Platform.OS === 'android') {
+      RNStatusBar.setBackgroundColor('transparent');
+      RNStatusBar.setTranslucent(true);
+    }
+  }, [barStyle]);
+};
+export const StatusBar = /*#__PURE__*/memo(_ref => {
+  let {
+    animated,
+    backgroundColor,
+    barStyle,
+    hidden,
+    networkActivityIndicatorVisible,
+    theme,
+    showHideTransition,
+    translucent
+  } = _ref;
+  const defaultBarStyle = useStatusBarStyle({
+    theme
+  });
+  return /*#__PURE__*/_jsx(RNStatusBar, {
+    animated: animated != null ? animated : true,
+    backgroundColor: backgroundColor != null ? backgroundColor : 'transparent',
+    barStyle: barStyle != null ? barStyle : defaultBarStyle,
+    hidden: hidden,
+    networkActivityIndicatorVisible: networkActivityIndicatorVisible,
+    showHideTransition: showHideTransition,
+    translucent: translucent != null ? translucent : true
+  });
+});
+StatusBar.displayName = 'StatusBar';

package/esm/system/ThemeProvider.js

@@ -0,0 +1,51 @@
+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); }
+import React, { createContext, useContext, useMemo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ThemeContext = /*#__PURE__*/createContext(undefined);
+
+// export type ThemeProviderProps = SystemProviderProps &
+//   ThemeManagerProps &
+//   FramerMotionProviderProps;
+
+export const ThemeProvider = _ref => {
+  let {
+    theme,
+    activeColorScheme,
+    children
+  } = _ref;
+  const themeApi = useMemo(() => {
+    const activeSpectrumKey = activeColorScheme === 'dark' ? 'darkSpectrum' : 'lightSpectrum';
+    const activeColorKey = activeColorScheme === 'dark' ? 'darkColor' : 'lightColor';
+    const inverseSpectrumKey = activeColorScheme === 'dark' ? 'lightSpectrum' : 'darkSpectrum';
+    const inverseColorKey = activeColorScheme === 'dark' ? 'lightColor' : 'darkColor';
+    if (!theme[activeColorKey]) throw Error("ThemeProvider activeColorScheme is " + activeColorScheme + " but no " + activeColorScheme + " colors are defined for the theme. See the docs at https://cds.coinbase.com/getting-started/theming/#creating-a-theme");
+    if (!theme[activeSpectrumKey]) throw Error("ThemeProvider activeColorScheme is " + activeColorScheme + " but no " + activeSpectrumKey + " values are defined for the theme. See the docs at https://cds.coinbase.com/getting-started/theming/#creating-a-theme");
+    if (theme[inverseSpectrumKey] && !theme[inverseColorKey]) throw Error("ThemeProvider theme has " + inverseSpectrumKey + " values defined but no " + inverseColorKey + " colors are defined for the theme. See the docs at https://cds.coinbase.com/getting-started/theming/#creating-a-theme");
+    if (theme[inverseColorKey] && !theme[inverseSpectrumKey]) throw Error("ThemeProvider theme has " + inverseColorKey + " colors defined but no " + inverseSpectrumKey + " values are defined for the theme. See the docs at https://cds.coinbase.com/getting-started/theming/#creating-a-theme");
+    return _extends({}, theme, {
+      activeColorScheme: activeColorScheme,
+      spectrum: theme[activeSpectrumKey],
+      color: theme[activeColorKey]
+    });
+  }, [theme, activeColorScheme]);
+  return /*#__PURE__*/_jsx(ThemeContext.Provider, {
+    value: themeApi,
+    children: children
+  });
+};
+/** Falls back to the currently active colorScheme if the inverse colors are not defined in the theme.  */
+export const InvertedThemeProvider = _ref2 => {
+  let {
+    children
+  } = _ref2;
+  const context = useContext(ThemeContext);
+  if (!context) throw Error('InvertedThemeProvider must be used within a ThemeProvider');
+  const inverseColorScheme = context.activeColorScheme === 'dark' ? 'light' : 'dark';
+  const inverseColorKey = context.activeColorScheme === 'dark' ? 'lightColor' : 'darkColor';
+  const newColorScheme = context[inverseColorKey] ? inverseColorScheme : context.activeColorScheme;
+  return /*#__PURE__*/_jsx(ThemeProvider, {
+    activeColorScheme: newColorScheme,
+    theme: context,
+    children: children
+  });
+};

package/esm/system/__figma__/AndroidNavigationBar.figma.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { figma } from '@figma/code-connect';
+import { AndroidNavigationBar } from '../AndroidNavigationBar';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(AndroidNavigationBar, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=10414%3A896', {
+  props: {
+    showsearch27799: figma.boolean('show search'),
+    showhelpcenter176314: figma.boolean('show help center'),
+    showsecondarycta24034: figma.boolean('show secondary cta'),
+    shownotification24028: figma.boolean('show notification'),
+    type156900: figma.instance('type'),
+    showpagetitle80: figma.boolean('show page title'),
+    showtabs24024: figma.boolean('show tabs'),
+    showprimarycta24032: figma.boolean('show primary cta'),
+    showbackarrow24022: figma.boolean('show back arrow'),
+    device: figma.enum('device', {
+      desktop: 'desktop',
+      tablet: 'tablet',
+      'responsive mobile': 'responsive-mobile'
+    })
+  },
+  example: () => /*#__PURE__*/_jsx(AndroidNavigationBar, {})
+});

package/esm/system/__stories__/Frontier.stories.js

@@ -0,0 +1,100 @@
+import React from 'react';
+import { Button, IconButton } from '../../buttons';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { VStack } from '../../layout';
+import { Text } from '../../typography/Text';
+
+// this includes everything except SparklineInteractive has a filled area in Frontier, however that component has been decomped to its own package
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const FrontierExampleScreen = () => /*#__PURE__*/_jsx(ExampleScreen, {
+  children: /*#__PURE__*/_jsx(Example, {
+    title: "Frontier Changes",
+    children: /*#__PURE__*/_jsxs(VStack, {
+      gap: 3,
+      paddingX: 2,
+      paddingY: 3,
+      children: [/*#__PURE__*/_jsx(Text, {
+        font: "headline",
+        paddingBottom: 3,
+        children: "The following components are intended to be used purely for visual regression testing when Frontier is enabled as the default treatment for CDS libraries."
+      }), /*#__PURE__*/_jsxs(VStack, {
+        background: "bg",
+        borderRadius: 400,
+        elevation: 1,
+        gap: 2,
+        padding: 2,
+        children: [/*#__PURE__*/_jsx(Text, {
+          paddingBottom: 3,
+          children: "Secondary palette is unchanged when the parent has an elevation of 1"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "secondary",
+          children: "Secondary button"
+        })]
+      }), /*#__PURE__*/_jsxs(VStack, {
+        background: "bg",
+        borderRadius: 400,
+        elevation: 2,
+        gap: 2,
+        padding: 2,
+        children: [/*#__PURE__*/_jsx(Text, {
+          paddingBottom: 3,
+          children: "Secondary palette is unchanged when the parent has an elevation of 2"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "secondary",
+          children: "Secondary button"
+        })]
+      }), /*#__PURE__*/_jsxs(VStack, {
+        bordered: true,
+        background: "bg",
+        borderRadius: 400,
+        gap: 2,
+        padding: 2,
+        children: [/*#__PURE__*/_jsx(Text, {
+          paddingBottom: 3,
+          children: "Secondary buttons have a filled grey background and no border."
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "secondary",
+          children: "Secondary button"
+        }), /*#__PURE__*/_jsx(Button, {
+          transparent: true,
+          variant: "secondary",
+          children: "Secondary button transparent"
+        }), /*#__PURE__*/_jsx(IconButton, {
+          active: true,
+          name: "add",
+          variant: "secondary"
+        }), /*#__PURE__*/_jsx(IconButton, {
+          active: true,
+          transparent: true,
+          name: "add",
+          variant: "secondary"
+        })]
+      }), /*#__PURE__*/_jsxs(VStack, {
+        bordered: true,
+        borderRadius: 400,
+        padding: 2,
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "body",
+          paddingBottom: 3,
+          children: "Display 2 font size and line height are larger."
+        }), /*#__PURE__*/_jsx(Text, {
+          font: "display2",
+          children: "Display 2"
+        })]
+      }), /*#__PURE__*/_jsxs(VStack, {
+        bordered: true,
+        borderRadius: 400,
+        padding: 2,
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "body",
+          paddingBottom: 3,
+          children: "Primary blue is lighter in dark mode"
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "primary",
+          children: "Primary"
+        })]
+      })]
+    })
+  })
+});
+export default FrontierExampleScreen;

package/esm/system/__stories__/Palette.stories.js

@@ -0,0 +1,100 @@
+import React from 'react';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { useTheme } from '../../hooks/useTheme';
+import { Box, HStack, VStack } from '../../layout';
+import { defaultTheme } from '../../themes/defaultTheme';
+import { Text } from '../../typography/Text';
+import { ThemeProvider } from '../ThemeProvider';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Palette = _ref => {
+  let {
+    elevation
+  } = _ref;
+  const theme = useTheme();
+  return /*#__PURE__*/_jsx(HStack, {
+    background: "bg",
+    flexWrap: "wrap",
+    children: Object.entries(theme.color).map(_ref2 => {
+      let [name, value] = _ref2;
+      return /*#__PURE__*/_jsx(Box, {
+        alignItems: "center",
+        dangerouslySetBackground: theme.color[name],
+        height: 100,
+        justifyContent: "center",
+        width: "50%",
+        children: /*#__PURE__*/_jsxs(VStack, {
+          background: "bg",
+          children: [/*#__PURE__*/_jsx(Text, {
+            align: "center",
+            font: "caption",
+            children: name
+          }), /*#__PURE__*/_jsx(Text, {
+            align: "center",
+            font: "caption",
+            children: value
+          }), !!elevation && /*#__PURE__*/_jsxs(Text, {
+            align: "center",
+            font: "caption",
+            children: ["Elevation: ", elevation]
+          })]
+        })
+      }, name);
+    })
+  });
+};
+const PaletteScreen = () => {
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      title: "Light Palette",
+      children: /*#__PURE__*/_jsx(Palette, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Dark Palette",
+      children: /*#__PURE__*/_jsx(ThemeProvider, {
+        activeColorScheme: "dark",
+        theme: defaultTheme,
+        children: /*#__PURE__*/_jsx(Palette, {})
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Light Palette Elevation 1",
+      children: /*#__PURE__*/_jsx(Box, {
+        elevation: 1,
+        children: /*#__PURE__*/_jsx(Palette, {
+          elevation: 1
+        })
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Dark Palette Elevation 1",
+      children: /*#__PURE__*/_jsx(ThemeProvider, {
+        activeColorScheme: "dark",
+        theme: defaultTheme,
+        children: /*#__PURE__*/_jsx(Box, {
+          elevation: 1,
+          children: /*#__PURE__*/_jsx(Palette, {
+            elevation: 1
+          })
+        })
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Light Palette Elevation 2",
+      children: /*#__PURE__*/_jsx(Box, {
+        elevation: 2,
+        children: /*#__PURE__*/_jsx(Palette, {
+          elevation: 2
+        })
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Dark Palette Elevation 2",
+      children: /*#__PURE__*/_jsx(ThemeProvider, {
+        activeColorScheme: "dark",
+        theme: defaultTheme,
+        children: /*#__PURE__*/_jsx(Box, {
+          elevation: 2,
+          children: /*#__PURE__*/_jsx(Palette, {
+            elevation: 2
+          })
+        })
+      })
+    })]
+  });
+};
+export default PaletteScreen;