{"ast":null,"code":"import _slicedToArray from \"@babel/runtime/helpers/slicedToArray\";\n\nvar _this = this,\n    _jsxFileName = \"/Users/rohitsingh/Documents/projects/new-nativebase-setup/NativeBase/example/storybook/stories/components/composites/Transitions/SlideWrapped.tsx\";\n\nimport React from 'react';\nimport { Slide, Button, Box, Input, Heading, VStack, HStack, Text, CheckIcon } from \"/Users/rohitsingh/Documents/projects/new-nativebase-setup/NativeBase/src/index\";\nexport var Example = function Example() {\n  var _React$useState = React.useState(false),\n      _React$useState2 = _slicedToArray(_React$useState, 2),\n      isOpen = _React$useState2[0],\n      setIsOpen = _React$useState2[1];\n\n  return React.createElement(Box, {\n    width: {\n      base: '75%',\n      md: '50%'\n    },\n    h: \"100%\",\n    justifyContent: \"center\"\n  }, React.createElement(VStack, {\n    space: 3,\n    w: \"100%\"\n  }, React.createElement(HStack, {\n    alignItems: \"flex-end\"\n  }, React.createElement(Heading, null, \"Order\")), React.createElement(HStack, {\n    alignItems: \"center\",\n    justifyContent: \"space-between\"\n  }, React.createElement(Text, {\n    fontWeight: \"medium\"\n  }, \"Sub Total\"), React.createElement(Text, {\n    color: \"blueGray.400\"\n  }, \"$298.77\")), React.createElement(HStack, {\n    alignItems: \"center\",\n    justifyContent: \"space-between\"\n  }, React.createElement(Text, {\n    fontWeight: \"medium\"\n  }, \"Tax\"), React.createElement(Text, {\n    color: \"blueGray.400\"\n  }, \"$38.84\")), React.createElement(HStack, {\n    alignItems: \"center\",\n    justifyContent: \"space-between\"\n  }, React.createElement(Text, {\n    fontWeight: \"medium\"\n  }, \"Total Amount\"), React.createElement(Text, {\n    color: \"emerald.600\"\n  }, \"$337.61\")), React.createElement(VStack, {\n    space: 2,\n    mt: \"2\"\n  }, React.createElement(Text, {\n    bold: true\n  }, \"Promo Code\"), React.createElement(HStack, {\n    space: 3\n  }, React.createElement(Input, {\n    flex: \"1\"\n  }), React.createElement(Button, {\n    variant: \"outline\"\n  }, \"Apply\"))), React.createElement(Button, {\n    my: \"2\",\n    onPress: function onPress() {\n      return setIsOpen(!isOpen);\n    }\n  }, \"Place Order\")), React.createElement(Slide, {\n    in: isOpen,\n    placement: \"bottom\"\n  }, React.createElement(Box, {\n    w: \"100%\",\n    position: \"absolute\",\n    bottom: \"2\",\n    p: \"2\",\n    mx: -3,\n    borderRadius: \"xs\",\n    bg: \"emerald.100\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    _dark: {\n      bg: 'emerald.200'\n    }\n  }, React.createElement(HStack, {\n    space: 2\n  }, React.createElement(CheckIcon, {\n    size: \"4\",\n    color: \"emerald.600\",\n    mt: \"1\",\n    _dark: {\n      color: 'emerald.700'\n    }\n  }), React.createElement(Text, {\n    color: \"emerald.600\",\n    textAlign: \"center\",\n    _dark: {\n      color: 'emerald.700'\n    },\n    fontWeight: \"medium\"\n  }, \"Order Placed Successfully.\")))));\n};","map":{"version":3,"sources":["/Users/rohitsingh/Documents/projects/new-nativebase-setup/NativeBase/example/storybook/stories/components/composites/Transitions/SlideWrapped.tsx"],"names":["React","Slide","Button","Box","Input","Heading","VStack","HStack","Text","CheckIcon","Example","useState","isOpen","setIsOpen","base","md","bg","color"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n  Slide,\n  Button,\n  Box,\n  Input,\n  Heading,\n  VStack,\n  HStack,\n  Text,\n  CheckIcon,\n} from 'native-base';\n\nexport const Example = () => {\n  const [isOpen, setIsOpen] = React.useState(false);\n  return (\n    <Box\n      width={{ base: '75%', md: '50%' }}\n      h=\"100%\"\n      // alignItems=\"flex-start\"\n      justifyContent=\"center\"\n    >\n      <VStack space={3} w=\"100%\">\n        <HStack alignItems=\"flex-end\">\n          <Heading>Order</Heading>\n        </HStack>\n        <HStack alignItems=\"center\" justifyContent=\"space-between\">\n          <Text fontWeight=\"medium\">Sub Total</Text>\n          <Text color=\"blueGray.400\">$298.77</Text>\n        </HStack>\n        <HStack alignItems=\"center\" justifyContent=\"space-between\">\n          <Text fontWeight=\"medium\">Tax</Text>\n          <Text color=\"blueGray.400\">$38.84</Text>\n        </HStack>\n        <HStack alignItems=\"center\" justifyContent=\"space-between\">\n          <Text fontWeight=\"medium\">Total Amount</Text>\n          <Text color=\"emerald.600\">$337.61</Text>\n        </HStack>\n        <VStack space={2} mt=\"2\">\n          <Text bold>Promo Code</Text>\n          <HStack space={3}>\n            <Input flex=\"1\" />\n            <Button variant=\"outline\">Apply</Button>\n          </HStack>\n        </VStack>\n        <Button my=\"2\" onPress={() => setIsOpen(!isOpen)}>\n          Place Order\n        </Button>\n      </VStack>\n      <Slide in={isOpen} placement=\"bottom\">\n        <Box\n          w=\"100%\"\n          position=\"absolute\"\n          bottom=\"2\"\n          p=\"2\"\n          mx={-3}\n          borderRadius=\"xs\"\n          bg=\"emerald.100\"\n          alignItems=\"center\"\n          justifyContent=\"center\"\n          _dark={{ bg: 'emerald.200' }}\n        >\n          <HStack space={2}>\n            <CheckIcon\n              size=\"4\"\n              color=\"emerald.600\"\n              mt=\"1\"\n              _dark={{ color: 'emerald.700' }}\n            />\n            <Text\n              color=\"emerald.600\"\n              textAlign=\"center\"\n              _dark={{ color: 'emerald.700' }}\n              fontWeight=\"medium\"\n            >\n              Order Placed Successfully.\n            </Text>\n          </HStack>\n        </Box>\n      </Slide>\n    </Box>\n  );\n};\n"]},"metadata":{},"sourceType":"module"}