{"ast":null,"code":"import _slicedToArray from \"@babel/runtime/helpers/slicedToArray\";\nimport React from 'react';\nimport { FormControl, Checkbox, Text, Container, WarningOutlineIcon } 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\";\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 _jsx(Container, {\n    children: _jsxs(FormControl, {\n      isInvalid: true,\n      children: [_jsx(FormControl.Label, {\n        _text: {\n          fontSize: 'lg',\n          bold: true\n        },\n        children: \"Preferred contact method\"\n      }), _jsx(Text, {\n        fontSize: \"md\",\n        children: \"Selected Values: \"\n      }), _jsxs(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        children: [_jsx(Checkbox, {\n          value: \"Phone\",\n          my: \"1\",\n          children: \"Phone\"\n        }), _jsx(Checkbox, {\n          value: \"Email\",\n          my: \"1\",\n          children: \"Email\"\n        }), _jsx(Checkbox, {\n          value: \"Message\",\n          my: \"1\",\n          children: \"Message\"\n        }), _jsx(Checkbox, {\n          value: \"Fax\",\n          my: \"1\",\n          children: \"Fax\"\n        })]\n      }), _jsx(FormControl.ErrorMessage, {\n        leftIcon: _jsx(WarningOutlineIcon, {\n          size: \"xs\"\n        }),\n        children: \"You must select at least three methods\"\n      })]\n    })\n  });\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","Example","useState","groupValue","setGroupValue","fontSize","bold","values"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SACEC,WADF,EAEEC,QAFF,EAGEC,IAHF,EAIEC,SAJF,EAKEC,kBALF;;;AAQA,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAAA,wBACSN,KAAK,CAACO,QAAN,CAAe,CAAC,OAAD,EAAU,OAAV,CAAf,CADT;AAAA;AAAA,MACpBC,UADoB;AAAA,MACRC,aADQ;;AAG3B,SACE,KAAC,SAAD;AAAA,cACE,MAAC,WAAD;AAAa,MAAA,SAAS,MAAtB;AAAA,iBACE,KAAC,WAAD,CAAa,KAAb;AAAmB,QAAA,KAAK,EAAE;AAAEC,UAAAA,QAAQ,EAAE,IAAZ;AAAkBC,UAAAA,IAAI,EAAE;AAAxB,SAA1B;AAAA;AAAA,QADF,EAIE,KAAC,IAAD;AAAM,QAAA,QAAQ,EAAC,IAAf;AAAA;AAAA,QAJF,EAKE,MAAC,QAAD,CAAU,KAAV;AACE,QAAA,EAAE,EAAC,GADL;AAEE,QAAA,WAAW,EAAC,OAFd;AAGE,QAAA,YAAY,EAAEH,UAHhB;AAIE,QAAA,kBAAkB,EAAC,uBAJrB;AAKE,QAAA,QAAQ,EAAE,kBAACI,MAAD,EAAY;AACpBH,UAAAA,aAAa,CAACG,MAAM,IAAI,EAAX,CAAb;AACD,SAPH;AAQE,QAAA,UAAU,EAAC,YARb;AAAA,mBAUE,KAAC,QAAD;AAAU,UAAA,KAAK,EAAC,OAAhB;AAAwB,UAAA,EAAE,EAAC,GAA3B;AAAA;AAAA,UAVF,EAaE,KAAC,QAAD;AAAU,UAAA,KAAK,EAAC,OAAhB;AAAwB,UAAA,EAAE,EAAC,GAA3B;AAAA;AAAA,UAbF,EAgBE,KAAC,QAAD;AAAU,UAAA,KAAK,EAAC,SAAhB;AAA0B,UAAA,EAAE,EAAC,GAA7B;AAAA;AAAA,UAhBF,EAmBE,KAAC,QAAD;AAAU,UAAA,KAAK,EAAC,KAAhB;AAAsB,UAAA,EAAE,EAAC,GAAzB;AAAA;AAAA,UAnBF;AAAA,QALF,EA4BE,KAAC,WAAD,CAAa,YAAb;AAA0B,QAAA,QAAQ,EAAE,KAAC,kBAAD;AAAoB,UAAA,IAAI,EAAC;AAAzB,UAApC;AAAA;AAAA,QA5BF;AAAA;AADF,IADF;AAoCD,CAvCM","sourcesContent":["import React from 'react';\nimport {\n  FormControl,\n  Checkbox,\n  Text,\n  Container,\n  WarningOutlineIcon,\n} from 'native-base';\n\nexport const Example = () => {\n  const [groupValue, setGroupValue] = React.useState(['Phone', 'Email']);\n\n  return (\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  );\n};\n"]},"metadata":{},"sourceType":"module"}