{"ast":null,"code":"import _slicedToArray from \"@babel/runtime/helpers/slicedToArray\";\nimport React from 'react';\nimport { FormControl, Checkbox, Text, Container, WarningOutlineIcon, Box } from \"/Users/rohitsingh/Documents/projects/new-nativebase-setup/NativeBase/src/index\";\nexport var Example = function Example() {\n  var _React$useState = React.useState(['Phone', 'Email']),\n      _React$useState2 = _slicedToArray(_React$useState, 2),\n      groupValue = _React$useState2[0],\n      setGroupValue = _React$useState2[1];\n\n  return React.createElement(Box, {\n    alignItems: \"center\"\n  }, React.createElement(Container, null, React.createElement(FormControl, {\n    isInvalid: true\n  }, React.createElement(FormControl.Label, {\n    _text: {\n      fontSize: 'lg',\n      bold: true\n    }\n  }, \"Preferred contact method\"), React.createElement(Text, {\n    fontSize: \"md\"\n  }, \"Selected Values: \"), React.createElement(Checkbox.Group, {\n    mt: \"2\",\n    colorScheme: \"green\",\n    defaultValue: groupValue,\n    accessibilityLabel: \"choose multiple items\",\n    onChange: function onChange(values) {\n      setGroupValue(values || []);\n    },\n    alignItems: \"flex-start\"\n  }, React.createElement(Checkbox, {\n    value: \"Phone\",\n    my: \"1\"\n  }, \"Phone\"), React.createElement(Checkbox, {\n    value: \"Email\",\n    my: \"1\"\n  }, \"Email\"), React.createElement(Checkbox, {\n    value: \"Message\",\n    my: \"1\"\n  }, \"Message\"), React.createElement(Checkbox, {\n    value: \"Fax\",\n    my: \"1\"\n  }, \"Fax\")), React.createElement(FormControl.ErrorMessage, {\n    leftIcon: React.createElement(WarningOutlineIcon, {\n      size: \"xs\"\n    })\n  }, \"You must select at least three methods\"))));\n};","map":{"version":3,"sources":["/Users/rohitsingh/Documents/projects/new-nativebase-setup/NativeBase/example/storybook/stories/components/primitives/Checkbox/FormControlled.tsx"],"names":["React","FormControl","Checkbox","Text","Container","WarningOutlineIcon","Box","Example","useState","groupValue","setGroupValue","fontSize","bold","values"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SACEC,WADF,EAEEC,QAFF,EAGEC,IAHF,EAIEC,SAJF,EAKEC,kBALF,EAMEC,GANF;AASA,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAAA,wBACSP,KAAK,CAACQ,QAAN,CAAe,CAAC,OAAD,EAAU,OAAV,CAAf,CADT;AAAA;AAAA,MACpBC,UADoB;AAAA,MACRC,aADQ;;AAG3B,SACE,oBAAC,GAAD;AAAK,IAAA,UAAU,EAAC;AAAhB,KACE,oBAAC,SAAD,QACE,oBAAC,WAAD;AAAa,IAAA,SAAS;AAAtB,KACE,oBAAC,WAAD,CAAa,KAAb;AAAmB,IAAA,KAAK,EAAE;AAAEC,MAAAA,QAAQ,EAAE,IAAZ;AAAkBC,MAAAA,IAAI,EAAE;AAAxB;AAA1B,gCADF,EAIE,oBAAC,IAAD;AAAM,IAAA,QAAQ,EAAC;AAAf,yBAJF,EAKE,oBAAC,QAAD,CAAU,KAAV;AACE,IAAA,EAAE,EAAC,GADL;AAEE,IAAA,WAAW,EAAC,OAFd;AAGE,IAAA,YAAY,EAAEH,UAHhB;AAIE,IAAA,kBAAkB,EAAC,uBAJrB;AAKE,IAAA,QAAQ,EAAE,kBAACI,MAAD,EAAY;AACpBH,MAAAA,aAAa,CAACG,MAAM,IAAI,EAAX,CAAb;AACD,KAPH;AAQE,IAAA,UAAU,EAAC;AARb,KAUE,oBAAC,QAAD;AAAU,IAAA,KAAK,EAAC,OAAhB;AAAwB,IAAA,EAAE,EAAC;AAA3B,aAVF,EAaE,oBAAC,QAAD;AAAU,IAAA,KAAK,EAAC,OAAhB;AAAwB,IAAA,EAAE,EAAC;AAA3B,aAbF,EAgBE,oBAAC,QAAD;AAAU,IAAA,KAAK,EAAC,SAAhB;AAA0B,IAAA,EAAE,EAAC;AAA7B,eAhBF,EAmBE,oBAAC,QAAD;AAAU,IAAA,KAAK,EAAC,KAAhB;AAAsB,IAAA,EAAE,EAAC;AAAzB,WAnBF,CALF,EA4BE,oBAAC,WAAD,CAAa,YAAb;AAA0B,IAAA,QAAQ,EAAE,oBAAC,kBAAD;AAAoB,MAAA,IAAI,EAAC;AAAzB;AAApC,8CA5BF,CADF,CADF,CADF;AAsCD,CAzCM","sourcesContent":["import React from 'react';\nimport {\n  FormControl,\n  Checkbox,\n  Text,\n  Container,\n  WarningOutlineIcon,\n  Box,\n} from 'native-base';\n\nexport const Example = () => {\n  const [groupValue, setGroupValue] = React.useState(['Phone', 'Email']);\n\n  return (\n    <Box alignItems=\"center\">\n      <Container>\n        <FormControl isInvalid>\n          <FormControl.Label _text={{ fontSize: 'lg', bold: true }}>\n            Preferred contact method\n          </FormControl.Label>\n          <Text fontSize=\"md\">Selected Values: </Text>\n          <Checkbox.Group\n            mt=\"2\"\n            colorScheme=\"green\"\n            defaultValue={groupValue}\n            accessibilityLabel=\"choose multiple items\"\n            onChange={(values) => {\n              setGroupValue(values || []);\n            }}\n            alignItems=\"flex-start\"\n          >\n            <Checkbox value=\"Phone\" my=\"1\">\n              Phone\n            </Checkbox>\n            <Checkbox value=\"Email\" my=\"1\">\n              Email\n            </Checkbox>\n            <Checkbox value=\"Message\" my=\"1\">\n              Message\n            </Checkbox>\n            <Checkbox value=\"Fax\" my=\"1\">\n              Fax\n            </Checkbox>\n          </Checkbox.Group>\n          <FormControl.ErrorMessage leftIcon={<WarningOutlineIcon size=\"xs\" />}>\n            You must select at least three methods\n          </FormControl.ErrorMessage>\n        </FormControl>\n      </Container>\n    </Box>\n  );\n};\n"]},"metadata":{},"sourceType":"module"}