{"ast":null,"code":"import _slicedToArray from \"@babel/runtime/helpers/slicedToArray\";\nimport React from 'react';\nimport { Slide, Button, Alert, VStack, Heading, Divider, Center } from \"/Users/rohitsingh/Documents/projects/new-nativebase-setup/NativeBase/src/index\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { Fragment as _Fragment } from \"react/jsx-runtime\";\nexport var Example = function Example() {\n  var _React$useState = React.useState(false),\n      _React$useState2 = _slicedToArray(_React$useState, 2),\n      isOpenBottom = _React$useState2[0],\n      setIsOpenBottom = _React$useState2[1];\n\n  var _React$useState3 = React.useState(false),\n      _React$useState4 = _slicedToArray(_React$useState3, 2),\n      isOpenTop = _React$useState4[0],\n      setIsOpenTop = _React$useState4[1];\n\n  var str1 = \"\" + (isOpenTop ? 'Hide' : 'Show');\n  var str2 = \"\" + (isOpenBottom ? 'Hide' : 'Show');\n  return _jsxs(_Fragment, {\n    children: [_jsx(Slide, {\n      in: isOpenBottom,\n      placement: \"bottom\",\n      children: _jsxs(Alert, {\n        justifyContent: \"center\",\n        mx: \"4\",\n        mt: \"auto\",\n        mb: \"4\",\n        status: \"success\",\n        children: [_jsx(Alert.Icon, {}), _jsx(Alert.Description, {\n          _text: {\n            _light: {\n              color: 'success.600'\n            },\n            _dark: {\n              color: 'success.100'\n            },\n            fontWeight: 'medium'\n          },\n          children: \"Order placed successfully!\"\n        })]\n      })\n    }), _jsx(Slide, {\n      in: isOpenTop,\n      placement: \"top\",\n      children: _jsxs(Alert, {\n        justifyContent: \"center\",\n        mx: \"4\",\n        mt: \"4\",\n        status: \"error\",\n        children: [_jsx(Alert.Icon, {}), _jsx(Alert.Description, {\n          _text: {\n            _light: {\n              color: 'error.600'\n            },\n            _dark: {\n              color: 'error.100'\n            },\n            fontWeight: 'medium'\n          },\n          children: \"No Internet Connection\"\n        })]\n      })\n    }), _jsxs(VStack, {\n      space: 2.5,\n      w: {\n        base: '50%',\n        md: '25%'\n      },\n      alignItems: \"center\",\n      children: [_jsxs(Center, {\n        w: \"100%\",\n        children: [_jsx(Heading, {\n          textAlign: \"center\",\n          size: \"md\",\n          mb: 4,\n          children: \"Top\"\n        }), _jsx(Button, {\n          w: \"100\",\n          onPress: function onPress() {\n            return setIsOpenTop(!isOpenTop);\n          },\n          mb: 5,\n          children: str1\n        }), _jsx(Divider, {})]\n      }), _jsxs(Center, {\n        w: \"100%\",\n        children: [_jsx(Heading, {\n          textAlign: \"center\",\n          size: \"md\",\n          mb: 4,\n          children: \"Bottom\"\n        }), _jsx(Button, {\n          w: \"100\",\n          onPress: function onPress() {\n            return setIsOpenBottom(!isOpenBottom);\n          },\n          children: str2\n        })]\n      })]\n    })]\n  });\n};","map":{"version":3,"sources":["/Users/rohitsingh/Documents/projects/new-nativebase-setup/NativeBase/example/storybook/stories/components/composites/Transitions/Slide.tsx"],"names":["React","Slide","Button","Alert","VStack","Heading","Divider","Center","Example","useState","isOpenBottom","setIsOpenBottom","isOpenTop","setIsOpenTop","str1","str2","_light","color","_dark","fontWeight","base","md"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n  Slide,\n  Button,\n  Alert,\n  VStack,\n  Heading,\n  Divider,\n  Center,\n} from 'native-base';\nexport const Example = () => {\n  const [isOpenBottom, setIsOpenBottom] = React.useState(false);\n  const [isOpenTop, setIsOpenTop] = React.useState(false);\n\n  const str1 = `${isOpenTop ? 'Hide' : 'Show'}`;\n  const str2 = `${isOpenBottom ? 'Hide' : 'Show'}`;\n  return (\n    <>\n      <Slide in={isOpenBottom} placement=\"bottom\">\n        <Alert justifyContent=\"center\" mx=\"4\" mt=\"auto\" mb=\"4\" status=\"success\">\n          <Alert.Icon />\n          <Alert.Description\n            _text={{\n              _light: { color: 'success.600' },\n              _dark: { color: 'success.100' },\n              fontWeight: 'medium',\n            }}\n          >\n            Order placed successfully!\n          </Alert.Description>\n        </Alert>\n      </Slide>\n      <Slide in={isOpenTop} placement=\"top\">\n        <Alert justifyContent=\"center\" mx=\"4\" mt=\"4\" status=\"error\">\n          <Alert.Icon />\n          <Alert.Description\n            _text={{\n              _light: { color: 'error.600' },\n              _dark: { color: 'error.100' },\n              fontWeight: 'medium',\n            }}\n          >\n            No Internet Connection\n          </Alert.Description>\n        </Alert>\n      </Slide>\n\n      <VStack space={2.5} w={{ base: '50%', md: '25%' }} alignItems=\"center\">\n        <Center w=\"100%\">\n          <Heading textAlign=\"center\" size=\"md\" mb={4}>\n            Top\n          </Heading>\n          <Button w=\"100\" onPress={() => setIsOpenTop(!isOpenTop)} mb={5}>\n            {str1}\n          </Button>\n          <Divider />\n        </Center>\n        <Center w=\"100%\">\n          <Heading textAlign=\"center\" size=\"md\" mb={4}>\n            Bottom\n          </Heading>\n          <Button w=\"100\" onPress={() => setIsOpenBottom(!isOpenBottom)}>\n            {str2}\n            {/* Click Me to {isOpenBottom ? \"hide\" : \"show\"} Bottom Slider */}\n          </Button>\n        </Center>\n      </VStack>\n    </>\n  );\n};\n"]},"metadata":{},"sourceType":"module"}