@coinbase/cds-mobile 8.58.0 → 8.60.0

package/esm/buttons/__stories__/IconButton.stories.js

@@ -2,7 +2,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React from 'react';
 import { names } from '@coinbase/cds-icons/names';
 import { Example, ExampleScreen } from '../../examples/ExampleScreen';
-import { HStack } from '../../layout';
+import { HStack, VStack } from '../../layout';
 import { Box } from '../../layout/Box';
 import { Text } from '../../typography/Text';
 import { IconButton } from '../IconButton';
@@ -123,6 +123,20 @@ const IconButtonScreen = () => {
           font: "body",
           children: "Disabled secondary"
         })]
+      }), /*#__PURE__*/_jsxs(Box, {
+        alignItems: "center",
+        flexDirection: "row",
+        justifyContent: "space-between",
+        width: 350,
+        children: [/*#__PURE__*/_jsx(IconButton, {
+          loading: true,
+          accessibilityLabel: accessibilityLabel,
+          name: iconName,
+          variant: "primary"
+        }), /*#__PURE__*/_jsx(Text, {
+          font: "body",
+          children: "Loading primary"
+        })]
       })]
     }), /*#__PURE__*/_jsx(Example, {
       inline: true,
@@ -168,6 +182,107 @@ const IconButtonScreen = () => {
           })]
         })
       })
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "Loading",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        gap: 3,
+        children: [/*#__PURE__*/_jsxs(Box, {
+          children: [/*#__PURE__*/_jsx(Text, {
+            font: "label2",
+            style: {
+              marginBottom: 8
+            },
+            children: "Loading by variant"
+          }), /*#__PURE__*/_jsxs(HStack, {
+            flexWrap: "wrap",
+            gap: 2,
+            children: [/*#__PURE__*/_jsx(IconButton, {
+              loading: true,
+              accessibilityLabel: "Loading",
+              name: iconName,
+              variant: "primary"
+            }), /*#__PURE__*/_jsx(IconButton, {
+              loading: true,
+              accessibilityLabel: "Loading",
+              name: iconName,
+              variant: "secondary"
+            }), /*#__PURE__*/_jsx(IconButton, {
+              loading: true,
+              accessibilityLabel: "Loading",
+              name: iconName,
+              variant: "foregroundMuted"
+            }), /*#__PURE__*/_jsx(IconButton, {
+              loading: true,
+              transparent: true,
+              accessibilityLabel: "Loading",
+              name: iconName,
+              variant: "primary"
+            }), /*#__PURE__*/_jsx(IconButton, {
+              loading: true,
+              transparent: true,
+              accessibilityLabel: "Loading",
+              name: iconName,
+              variant: "secondary"
+            })]
+          })]
+        }), /*#__PURE__*/_jsxs(Box, {
+          children: [/*#__PURE__*/_jsx(Text, {
+            font: "label2",
+            style: {
+              marginBottom: 8
+            },
+            children: "Loading by icon size"
+          }), /*#__PURE__*/_jsxs(HStack, {
+            alignItems: "center",
+            gap: 2,
+            children: [/*#__PURE__*/_jsx(IconButton, {
+              loading: true,
+              accessibilityLabel: "Loading",
+              iconSize: "xs",
+              name: iconName
+            }), /*#__PURE__*/_jsx(IconButton, {
+              loading: true,
+              accessibilityLabel: "Loading",
+              iconSize: "s",
+              name: iconName
+            }), /*#__PURE__*/_jsx(IconButton, {
+              loading: true,
+              accessibilityLabel: "Loading",
+              iconSize: "m",
+              name: iconName
+            }), /*#__PURE__*/_jsx(IconButton, {
+              loading: true,
+              accessibilityLabel: "Loading",
+              compact: false,
+              iconSize: "l",
+              name: iconName
+            })]
+          })]
+        }), /*#__PURE__*/_jsxs(Box, {
+          children: [/*#__PURE__*/_jsx(Text, {
+            font: "label2",
+            style: {
+              marginBottom: 8
+            },
+            children: "Loading compact vs regular"
+          }), /*#__PURE__*/_jsxs(HStack, {
+            alignItems: "center",
+            gap: 2,
+            children: [/*#__PURE__*/_jsx(IconButton, {
+              compact: true,
+              loading: true,
+              accessibilityLabel: "Loading",
+              name: iconName
+            }), /*#__PURE__*/_jsx(IconButton, {
+              loading: true,
+              accessibilityLabel: "Loading",
+              compact: false,
+              name: iconName
+            })]
+          })]
+        })]
+      })
     }), /*#__PURE__*/_jsx(Example, {
       title: "All",
       children: names.map(name => {

package/esm/controls/Checkbox.js

@@ -22,11 +22,12 @@ const CheckboxIcon = /*#__PURE__*/memo(_ref => {
     elevation,
     animatedScaleValue,
     animatedOpacityValue,
-    testID
+    testID,
+    controlSize
   } = _ref;
   const filled = checked || indeterminate;
   const theme = useTheme();
-  const checkboxSize = theme.controlSize.checkboxSize;
+  const checkboxSize = controlSize != null ? controlSize : theme.controlSize.checkboxSize;
   const iconPadding = checkboxSize / 5;
   const iconSize = checkboxSize - iconPadding;
   const animatedStyle = useMemo(() => ({

package/esm/controls/CheckboxCell.js

@@ -1,4 +1,4 @@
-const _excluded = ["title", "description", "checked", "onChange", "disabled", "columnGap", "rowGap", "padding", "borderWidth", "borderRadius", "background", "borderColor", "controlColor", "accessibilityLabel", "accessibilityHint", "testID", "value", "width", "style", "contentStyle", "wrapperStyles", "onPressIn", "onPressOut", "pressedBorderColor", "pressedBorderWidth", "indeterminate", "readOnly", "styles"];
+const _excluded = ["title", "description", "checked", "onChange", "disabled", "columnGap", "rowGap", "padding", "borderWidth", "borderRadius", "background", "borderColor", "controlColor", "controlSize", "accessibilityLabel", "accessibilityHint", "testID", "value", "width", "style", "contentStyle", "wrapperStyles", "onPressIn", "onPressOut", "pressedBorderColor", "pressedBorderWidth", "indeterminate", "readOnly", "styles"];
 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, useState } from 'react';
@@ -26,6 +26,7 @@ const CheckboxCellWithRef = /*#__PURE__*/forwardRef(function CheckboxCell(_ref,
       background = 'bg',
       borderColor = 'bgLine',
       controlColor,
+      controlSize,
       accessibilityLabel,
       accessibilityHint,
       testID,
@@ -157,6 +158,7 @@ const CheckboxCellWithRef = /*#__PURE__*/forwardRef(function CheckboxCell(_ref,
           accessible: false,
           checked: !!checked,
           controlColor: controlColor,
+          controlSize: controlSize,
           disabled: disabled,
           indeterminate: indeterminate,
           pointerEvents: "none",

package/esm/controls/Control.js

@@ -1,4 +1,4 @@
-const _excluded = ["testID", "label", "checked", "indeterminate", "disabled", "readOnly", "onChange", "hitSlop", "value", "controlColor", "elevation", "accessibilityRole", "accessibilityLabel", "accessibilityHint", "children", "shouldUseSwitchTransition", "accessible", "style", "color", "background", "borderColor", "borderRadius", "borderWidth"];
+const _excluded = ["testID", "label", "checked", "indeterminate", "disabled", "readOnly", "onChange", "hitSlop", "value", "controlColor", "elevation", "accessibilityRole", "accessibilityLabel", "accessibilityHint", "children", "shouldUseSwitchTransition", "accessible", "style", "color", "background", "borderColor", "borderRadius", "borderWidth", "controlSize", "dotSize"];
 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, useEffect, useMemo, useRef } from 'react';
@@ -34,7 +34,9 @@ const ControlWithRef = /*#__PURE__*/forwardRef(function ControlWithRef(_ref, ref
       background,
       borderColor,
       borderRadius,
-      borderWidth
+      borderWidth,
+      controlSize,
+      dotSize
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
@@ -115,7 +117,9 @@ const ControlWithRef = /*#__PURE__*/forwardRef(function ControlWithRef(_ref, ref
       borderWidth: borderWidth,
       checked: checked,
       controlColor: controlColor,
+      controlSize: controlSize,
       disabled: pressDisabled,
+      dotSize: dotSize,
       elevation: elevation,
       indeterminate: indeterminate,
       pressed: pressed,
@@ -137,7 +141,7 @@ const ControlWithRef = /*#__PURE__*/forwardRef(function ControlWithRef(_ref, ref
         children: label
       })]
     });
-  }, [ControlIcon, animatedOpacityValue, animatedScaleValue, background, borderColor, borderRadius, borderWidth, checked, controlColor, disabled, elevation, getLabelStyle, iconWrapperStyles, indeterminate, label, pressDisabled, readOnly, testID]);
+  }, [ControlIcon, animatedOpacityValue, animatedScaleValue, background, borderColor, borderRadius, borderWidth, checked, controlColor, controlSize, disabled, dotSize, elevation, getLabelStyle, iconWrapperStyles, indeterminate, label, pressDisabled, readOnly, testID]);
   return /*#__PURE__*/_jsx(Pressable, _extends({
     ref: ref,
     accessible: accessible

package/esm/controls/Radio.js

@@ -18,7 +18,8 @@ const styles = StyleSheet.create({
 const DotSvg = _ref => {
   let {
     color = 'black',
-    width = 20
+    width = 20,
+    dotSize = 2 * width / 3
   } = _ref;
   return /*#__PURE__*/_jsx(Svg, {
     fill: "none",
@@ -29,7 +30,7 @@ const DotSvg = _ref => {
       cx: "50%",
       cy: "50%",
       fill: color,
-      r: width / 3
+      r: dotSize / 2
     })
   });
 };
@@ -45,11 +46,13 @@ const RadioIcon = _ref2 => {
     animatedScaleValue,
     animatedOpacityValue,
     controlColor = 'bgPrimary',
+    controlSize,
+    dotSize,
     borderColor = checked ? controlColor : 'bgLineHeavy',
     testID
   } = _ref2;
   const theme = useTheme();
-  const radioSize = theme.controlSize.radioSize;
+  const radioSize = controlSize != null ? controlSize : theme.controlSize.radioSize;
   return /*#__PURE__*/_jsx(Interactable, {
     background: background,
     borderColor: borderColor,
@@ -74,6 +77,7 @@ const RadioIcon = _ref2 => {
         testID: "radio-icon",
         children: /*#__PURE__*/_jsx(DotSvg, {
           color: theme.color[controlColor],
+          dotSize: dotSize,
           width: radioSize
         })
       })

package/esm/loaders/Spinner.js

@@ -4,6 +4,11 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { memo } from 'react';
 import { ActivityIndicator } from 'react-native';
 import { useTheme } from '../hooks/useTheme';
+
+/**
+ * @deprecated Use indeterminate ProgressCircle or ActivityIndicator component instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Spinner = /*#__PURE__*/memo(function Spinner(_ref) {
   let {

package/esm/overlays/__stories__/AlertBasic.stories.js

@@ -4,14 +4,14 @@ import { Example, ExampleScreen } from '../../examples/ExampleScreen';
 import { Alert } from '../Alert';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const BasicAlert = () => {
-  const [visible, setVisible] = useState(true);
+  const [visible, setVisible] = useState(false);
   const handleShow = useCallback(() => setVisible(true), []);
   const handleClose = useCallback(() => setVisible(false), []);
   const handleAction = useCallback(() => console.log('pressed'), []);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Button, {
       onPress: handleShow,
-      children: "Show Alert"
+      children: "Open"
     }), /*#__PURE__*/_jsx(Alert, {
       body: "Alert body type that can run over multiple lines, but should be kept short.",
       dismissActionLabel: "Cancel",

package/esm/overlays/__stories__/AlertLongTitle.stories.js

@@ -4,14 +4,14 @@ import { Example, ExampleScreen } from '../../examples/ExampleScreen';
 import { Alert } from '../Alert';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const LongTitleAlert = () => {
-  const [visible, setVisible] = useState(true);
+  const [visible, setVisible] = useState(false);
   const handleShow = useCallback(() => setVisible(true), []);
   const handleClose = useCallback(() => setVisible(false), []);
   const handleAction = useCallback(() => console.log('pressed'), []);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Button, {
       onPress: handleShow,
-      children: "Show Alert"
+      children: "Open"
     }), /*#__PURE__*/_jsx(Alert, {
       body: "Alert body type that can run over multiple lines, but should be kept short.",
       dismissActionLabel: "Cancel",

package/esm/overlays/__stories__/AlertOverModal.stories.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback } from 'react';
 import { useAlert } from '@coinbase/cds-common/overlays/useAlert';
 import { useModal } from '@coinbase/cds-common/overlays/useModal';
 import { Button } from '../../buttons/Button';
@@ -48,17 +48,9 @@ const AlertOnModal = () => {
       })]
     }));
   }, [closeModal, openModal, showAlert]);
-  useEffect(() => {
-    handlePress();
-    showAlert();
-    return () => {
-      close();
-      closeModal();
-    };
-  }, [close, closeModal, handlePress, showAlert]);
   return /*#__PURE__*/_jsx(Button, {
     onPress: handlePress,
-    children: "Open Modal"
+    children: "Open"
   });
 };
 const AlertOverModalScreen = () => {

package/esm/overlays/__stories__/AlertPortal.stories.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback } from 'react';
 import { useAlert } from '@coinbase/cds-common/overlays/useAlert';
 import { Button } from '../../buttons/Button';
 import { Example, ExampleScreen } from '../../examples/ExampleScreen';
@@ -27,13 +27,9 @@ const AlertExample = () => {
     preferredActionVariant: "negative",
     title: "Alert title"
   })), [open, close, handleAction]);
-  useEffect(() => {
-    showAlert();
-    return () => close();
-  }, [close, showAlert]);
   return /*#__PURE__*/_jsx(Button, {
     onPress: showAlert,
-    children: "Show Alert"
+    children: "Open"
   });
 };
 const AlertPortalScreen = () => {

package/esm/overlays/__stories__/AlertSingleAction.stories.js

@@ -4,14 +4,14 @@ import { Example, ExampleScreen } from '../../examples/ExampleScreen';
 import { Alert } from '../Alert';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const SingleActionAlert = () => {
-  const [visible, setVisible] = useState(true);
+  const [visible, setVisible] = useState(false);
   const handleShow = useCallback(() => setVisible(true), []);
   const handleClose = useCallback(() => setVisible(false), []);
   const handleAction = useCallback(() => console.log('pressed'), []);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Button, {
       onPress: handleShow,
-      children: "Show Alert"
+      children: "Open"
     }), /*#__PURE__*/_jsx(Alert, {
       body: "Alert body type that can run over multiple lines, but should be kept short.",
       onPreferredActionPress: handleAction,

package/esm/overlays/__stories__/AlertVerticalActions.stories.js

@@ -4,14 +4,14 @@ import { Example, ExampleScreen } from '../../examples/ExampleScreen';
 import { Alert } from '../Alert';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const BasicAlert = () => {
-  const [visible, setVisible] = useState(true);
+  const [visible, setVisible] = useState(false);
   const handleShow = useCallback(() => setVisible(true), []);
   const handleClose = useCallback(() => setVisible(false), []);
   const handleAction = useCallback(() => console.log('pressed'), []);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Button, {
       onPress: handleShow,
-      children: "Show Alert"
+      children: "Open"
     }), /*#__PURE__*/_jsx(Alert, {
       actionLayout: "vertical",
       body: "Alert body type that can run over multiple lines, but should be kept short.",

package/esm/overlays/__stories__/DrawerFallback.stories.js

@@ -5,7 +5,10 @@ import { Fallback, Spacer, VStack } from '../../layout';
 import { Drawer } from '../drawer/Drawer';
 import { navOptions, SideDrawerContent } from './Drawers';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const SidebarDrawerContentFallback = () => {
+const SidebarDrawerContentFallback = _ref => {
+  let {
+    handleClose
+  } = _ref;
   return /*#__PURE__*/_jsxs(VStack, {
     height: "100%",
     justifyContent: "space-between",
@@ -30,28 +33,30 @@ const SidebarDrawerContentFallback = () => {
         height: 50,
         shape: "squircle",
         width: "100%"
-      }), /*#__PURE__*/_jsx(Spacer, {}), navOptions.map(_ref => {
+      }), /*#__PURE__*/_jsx(Spacer, {}), navOptions.map(_ref2 => {
         let {
           label
-        } = _ref;
+        } = _ref2;
         return /*#__PURE__*/_jsx(Fallback, {
           height: 30,
           shape: "square",
           width: "100%"
         }, label);
       })]
-    }), /*#__PURE__*/_jsx(Fallback, {
-      height: 50,
-      shape: "squircle",
-      width: "100%"
+    }), /*#__PURE__*/_jsx(Button, {
+      block: true,
+      compact: true,
+      onPress: handleClose,
+      variant: "secondary",
+      children: "Cancel"
     })]
   });
 };
-const SideDrawerWithFallback = _ref2 => {
+const SideDrawerWithFallback = _ref3 => {
   let {
     pin = 'left'
-  } = _ref2;
-  const [isVisible, setIsVisible] = useState(true);
+  } = _ref3;
+  const [isVisible, setIsVisible] = useState(false);
   const setIsVisibleToOn = useCallback(() => setIsVisible(true), []);
   const setIsVisibleToOff = useCallback(() => setIsVisible(false), []);
   const [isLoading, setIsLoading] = useState(true);
@@ -68,11 +73,13 @@ const SideDrawerWithFallback = _ref2 => {
     }), isVisible && /*#__PURE__*/_jsx(Drawer, {
       onCloseComplete: setIsVisibleToOff,
       pin: pin,
-      children: _ref3 => {
+      children: _ref4 => {
         let {
           handleClose
-        } = _ref3;
-        return isLoading ? /*#__PURE__*/_jsx(SidebarDrawerContentFallback, {}) : /*#__PURE__*/_jsx(SideDrawerContent, {
+        } = _ref4;
+        return isLoading ? /*#__PURE__*/_jsx(SidebarDrawerContentFallback, {
+          handleClose: handleClose
+        }) : /*#__PURE__*/_jsx(SideDrawerContent, {
           handleClose: handleClose
         });
       }

package/esm/overlays/__stories__/DrawerScrollable.stories.js

@@ -14,7 +14,7 @@ const SideDrawerScrollableContent = _ref => {
   let {
     pin = 'left'
   } = _ref;
-  const [isVisible, setIsVisible] = useState(true);
+  const [isVisible, setIsVisible] = useState(false);
   const setIsVisibleToOn = useCallback(() => setIsVisible(true), []);
   const setIsVisibleToOff = useCallback(() => setIsVisible(false), []);
   const drawerRef = useRef(null);
@@ -65,6 +65,13 @@ const SideDrawerScrollableContent = _ref => {
           data: lotsOfOptions,
           renderItem: renderItem
         })
+      }), /*#__PURE__*/_jsx(VStack, {
+        padding: 2,
+        children: /*#__PURE__*/_jsx(Button, {
+          onPress: handleOptionPress,
+          variant: "secondary",
+          children: "Cancel"
+        })
       })]
     })]
   });

package/esm/overlays/__stories__/Drawers.js

@@ -13,7 +13,7 @@ export const DefaultDrawer = _ref => {
     pin = 'left',
     reduceMotion
   } = _ref;
-  const [isVisible, setIsVisible] = useState(true);
+  const [isVisible, setIsVisible] = useState(false);
   const setIsVisibleOff = useCallback(() => setIsVisible(false), [setIsVisible]);
   const setIsVisibleOn = useCallback(() => setIsVisible(true), [setIsVisible]);
   return /*#__PURE__*/_jsxs(_Fragment, {
@@ -33,7 +33,7 @@ export const DefaultDrawer = _ref => {
           children: [/*#__PURE__*/_jsx(LoremIpsum, {}), /*#__PURE__*/_jsx(Button, {
             onPress: handleClose,
             variant: "secondary",
-            children: "Close Drawer"
+            children: "Cancel"
           })]
         });
       }
@@ -109,7 +109,7 @@ export const SideDrawerContent = _ref3 => {
       compact: true,
       onPress: handleClose,
       variant: "secondary",
-      children: "Sign out"
+      children: "Cancel"
     })]
   });
 };
@@ -117,7 +117,7 @@ export const SideDrawer = _ref5 => {
   let {
     pin = 'left'
   } = _ref5;
-  const [isVisible, setIsVisible] = useState(true);
+  const [isVisible, setIsVisible] = useState(false);
   const setIsVisibleOff = useCallback(() => setIsVisible(false), [setIsVisible]);
   const setIsVisibleOn = useCallback(() => setIsVisible(true), [setIsVisible]);
   return /*#__PURE__*/_jsxs(_Fragment, {

package/esm/overlays/__stories__/ModalBackButton.stories.js

@@ -8,7 +8,7 @@ import { ModalFooter } from '../modal/ModalFooter';
 import { ModalHeader } from '../modal/ModalHeader';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ModalBackButtonScreen = () => {
-  const [visible, setVisible] = useState(true);
+  const [visible, setVisible] = useState(false);
   const handleClose = useCallback(() => setVisible(false), []);
   const handleOpen = useCallback(() => setVisible(true), []);
   return /*#__PURE__*/_jsx(ExampleScreen, {
@@ -16,7 +16,7 @@ const ModalBackButtonScreen = () => {
       title: "Back Button Modal",
       children: [/*#__PURE__*/_jsx(Button, {
         onPress: handleOpen,
-        children: "Open Modal"
+        children: "Open"
       }), /*#__PURE__*/_jsxs(Modal, {
         onRequestClose: handleClose,
         visible: visible,

package/esm/overlays/__stories__/ModalBasic.stories.js

@@ -8,7 +8,7 @@ import { ModalFooter } from '../modal/ModalFooter';
 import { ModalHeader } from '../modal/ModalHeader';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ModalBasicScreen = () => {
-  const [visible, setVisible] = useState(true);
+  const [visible, setVisible] = useState(false);
   const handleClose = useCallback(() => setVisible(false), []);
   const handleOpen = useCallback(() => setVisible(true), []);
   return /*#__PURE__*/_jsx(ExampleScreen, {
@@ -16,7 +16,7 @@ const ModalBasicScreen = () => {
       title: "Basic Modal",
       children: [/*#__PURE__*/_jsx(Button, {
         onPress: handleOpen,
-        children: "Open Modal"
+        children: "Open"
       }), /*#__PURE__*/_jsxs(Modal, {
         onRequestClose: handleClose,
         visible: visible,

package/esm/overlays/__stories__/ModalCustomPadding.stories.js

@@ -8,7 +8,7 @@ import { ModalFooter } from '../modal/ModalFooter';
 import { ModalHeader } from '../modal/ModalHeader';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function ModalCustomPaddingScreen() {
-  const [visible, setVisible] = useState(true);
+  const [visible, setVisible] = useState(false);
   const handleClose = useCallback(() => setVisible(false), []);
   const handleOpen = useCallback(() => setVisible(true), []);
   return /*#__PURE__*/_jsx(ExampleScreen, {
@@ -16,7 +16,7 @@ export default function ModalCustomPaddingScreen() {
       title: "Modal with custom padding",
       children: [/*#__PURE__*/_jsx(Button, {
         onPress: handleOpen,
-        children: "Open Modal"
+        children: "Open"
       }), /*#__PURE__*/_jsxs(Modal, {
         onRequestClose: handleClose,
         visible: visible,

package/esm/overlays/__stories__/ModalLong.stories.js

@@ -9,7 +9,7 @@ import { ModalFooter } from '../modal/ModalFooter';
 import { ModalHeader } from '../modal/ModalHeader';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ModalLongScreen = () => {
-  const [visible, setVisible] = useState(true);
+  const [visible, setVisible] = useState(false);
   const handleClose = useCallback(() => setVisible(false), []);
   const handleOpen = useCallback(() => setVisible(true), []);
   return /*#__PURE__*/_jsx(ExampleScreen, {
@@ -17,7 +17,7 @@ const ModalLongScreen = () => {
       title: "Long Modal",
       children: [/*#__PURE__*/_jsx(Button, {
         onPress: handleOpen,
-        children: "Open Modal"
+        children: "Open"
       }), /*#__PURE__*/_jsxs(Modal, {
         onRequestClose: handleClose,
         visible: visible,

package/esm/overlays/__stories__/ModalPortal.stories.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback } from 'react';
 import { useModal } from '@coinbase/cds-common/overlays/useModal';
 import { Button } from '../../buttons/Button';
 import { Example, ExampleScreen } from '../../examples/ExampleScreen';
@@ -33,16 +33,12 @@ const ModalPortalScreen = () => {
       })
     })]
   })), [openModal, closeModal]);
-  useEffect(() => {
-    handlePress();
-    return () => closeModal();
-  }, [closeModal, handlePress]);
   return /*#__PURE__*/_jsx(ExampleScreen, {
     children: /*#__PURE__*/_jsx(Example, {
       title: "Portal Modal",
       children: /*#__PURE__*/_jsx(Button, {
         onPress: handlePress,
-        children: "Open Modal"
+        children: "Open"
       })
     })
   });

package/esm/overlays/__stories__/Overlay.stories.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { Modal } from 'react-native';
 import { Button } from '../../buttons/Button';
 import { Example, ExampleScreen } from '../../examples/ExampleScreen';
@@ -22,15 +22,11 @@ const OverlayScreen = () => {
       if (finished) setVisibleToOff();
     });
   }, [animateOverlayOut, setVisibleToOff]);
-  useEffect(() => {
-    openModal();
-    return () => closeModal();
-  }, [closeModal, openModal]);
   return /*#__PURE__*/_jsx(ExampleScreen, {
     children: /*#__PURE__*/_jsxs(Example, {
       children: [/*#__PURE__*/_jsx(Button, {
         onPress: openModal,
-        children: "Open Overlay"
+        children: "Open"
       }), /*#__PURE__*/_jsx(Modal, {
         hardwareAccelerated: true,
         statusBarTranslucent: true,