{"version":3,"sources":["components/OrgSelection.tsx","components/ProfileDropdown.tsx","App.tsx","reportWebVitals.ts","theme.ts","index.tsx"],"names":["OrgSelection","useState","org","setOrg","TextField","fullWidth","select","variant","label","size","value","onChange","e","target","MenuItem","ProfileDropdown","anchorEl","setAnchorEl","open","Boolean","handleClose","ListItemButton","dense","sx","px","onClick","console","log","currentTarget","offsetWidth","ListItemAvatar","mr","xs","sm","style","minWidth","Avatar","src","ListItemText","primary","secondary","my","display","md","fontSize","color","theme","palette","text","onClose","PaperProps","elevation","width","maxWidth","transformOrigin","horizontal","vertical","anchorOrigin","ListItemIcon","drawerWidth","useStyles","makeStyles","drawer","boxSizing","main","backgroundColor","grey","flexDirection","breakpoints","up","marginLeft","toolbar","App","classes","matches","useMediaQuery","setOpen","Drawer","anchor","className","AppBar","position","borderBottom","divider","Toolbar","Link","href","height","alt","Box","flexGrow","pt","List","component","ListItem","button","top","right","margin","Tooltip","title","IconButton","edge","InputBase","placeholder","startAdornment","InputAdornment","py","Container","Stack","direction","spacing","mb","Button","startIcon","Typography","gutterBottom","Paper","p","reportWebVitals","onPerfEntry","Function","then","getCLS","getFID","getFCP","getLCP","getTTFB","defaultTheme","createTheme","typography","fontFamily","join","h1","fontWeight","h2","h3","h4","components","MuiCssBaseline","styleOverrides","root","MuiListItemIcon","MuiListItemText","pxToRem","MuiAppBar","colorDefault","background","paper","MuiButton","textTransform","MuiTooltip","defaultProps","placement","arrow","MuiContainer","maxWidthLg","ReactDOM","render","StrictMode","ThemeProvider","CssBaseline","document","getElementById"],"mappings":"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","file":"static/js/main.051cf2c7.chunk.js","sourcesContent":["import React, { useState } from 'react';\nimport { MenuItem, TextField } from '@mui/material';\n\nexport default function OrgSelection() {\n  const [org, setOrg] = useState('acme');\n\n  const handleChangeOrg = (e: React.ChangeEvent<HTMLInputElement>) => {\n    setOrg(e.target.value);\n  };\n\n  return (\n    <TextField\n      fullWidth\n      select\n      variant=\"outlined\"\n      label=\"Switch Organization\"\n      size=\"small\"\n      value={org}\n      onChange={handleChangeOrg}\n    >\n      <MenuItem value={`acme`}>Acme, Inc</MenuItem>\n      <MenuItem value={`bob`}>Bob's Burgers</MenuItem>\n      <MenuItem value={`ads`}>EasyWire Marketing Solutions</MenuItem>\n    </TextField>\n  )\n}\n","import React, { useState } from 'react';\nimport { Avatar, ListItemAvatar, ListItemButton, ListItemIcon, ListItemText, Menu, MenuItem } from '@mui/material';\nimport ExpandIcon from '@mui/icons-material/ExpandMore';\nimport SettingsIcon from '@mui/icons-material/Settings';\nimport LogoutIcon from '@mui/icons-material/Logout';\n\nexport default function ProfileDropdown() {\n  const [anchorEl, setAnchorEl] = useState<null|HTMLElement>(null);\n  const open = Boolean(anchorEl);\n\n  const handleClickProfile = (e: React.MouseEvent<HTMLElement>) => {\n    console.log(e.currentTarget.offsetWidth);\n    setAnchorEl(e.currentTarget);\n  };\n  const handleClose = () => {\n    setAnchorEl(null);\n  };\n\n  return (\n    <>\n      <ListItemButton dense sx={{ px: 1 }} onClick={handleClickProfile}>\n        <ListItemAvatar sx={{ mr: { xs: 0, sm: 1.5 } }} style={{ minWidth: 0 }}>\n          <Avatar src=\"https://next.material-ui.com/static/images/avatar/2.jpg\" />\n        </ListItemAvatar>\n        <ListItemText primary=\"Daniel Ramirez\" secondary=\"Acme, Inc.\" sx={{ my: 0, mr: 1, display: { xs: 'none', md: 'block' } }} />\n        <ExpandIcon fontSize=\"small\" sx={{ color: (theme) => theme.palette.text.secondary }} />\n      </ListItemButton>\n      <Menu\n        open={open}\n        anchorEl={anchorEl}\n        onClose={handleClose}\n        onClick={handleClose}\n        PaperProps={{\n          elevation: 2,\n          style: { width: 200, maxWidth: '100%' }\n        }}\n        transformOrigin={{ horizontal: 'right', vertical: 'top' }}\n        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}\n      >\n        <MenuItem>\n          <ListItemIcon>\n            <SettingsIcon fontSize=\"small\" />\n          </ListItemIcon>\n          Settings\n        </MenuItem>\n        <MenuItem>\n          <ListItemIcon>\n            <LogoutIcon fontSize=\"small\" />\n          </ListItemIcon>\n          Logout\n        </MenuItem>\n      </Menu>\n    </>\n  )\n}\n","import React, { useState } from 'react';\nimport { makeStyles } from '@mui/styles';\nimport { Theme } from '@mui/material/styles';\nimport {\n  Drawer, List, ListItem, ListItemIcon, ListItemText, Box, Toolbar, AppBar, IconButton, Tooltip, InputBase,\n  InputAdornment, Typography, Stack, Button, Container, useMediaQuery, Paper, Link\n} from '@mui/material';\n\nimport SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';\nimport HelpOutlineOutlinedIcon from '@mui/icons-material/HelpOutlineOutlined';\nimport AccountCircleOutlinedIcon from '@mui/icons-material/AccountCircleOutlined';\nimport LocalOfferOutlinedIcon from '@mui/icons-material/LocalOfferOutlined';\nimport StorefrontOutlinedIcon from '@mui/icons-material/StorefrontOutlined';\nimport DesktopWindowsOutlinedIcon from '@mui/icons-material/DesktopWindowsOutlined';\nimport WifiTetheringOutlinedIcon from '@mui/icons-material/WifiTetheringOutlined';\nimport VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';\nimport SearchIcon from '@mui/icons-material/Search';\nimport CreateIcon from '@mui/icons-material/Create';\nimport VisibilityIcon from '@mui/icons-material/Visibility';\nimport ColorLensIcon from '@mui/icons-material/ColorLens';\nimport MenuIcon from '@mui/icons-material/Menu';\nimport ChevronLeftIcon from '@mui/icons-material/ChevronLeft';\nimport OrgSelection from './components/OrgSelection';\nimport ProfileDropdown from './components/ProfileDropdown';\n\nconst drawerWidth = 240;\n\nconst useStyles = makeStyles((theme: Theme) => ({\n  drawer: {\n    width: drawerWidth,\n    '& .MuiDrawer-paper': {\n      width: drawerWidth,\n      boxSizing: 'border-box'\n    }\n  },\n  main: {\n    backgroundColor: theme.palette.grey[100],\n    display: 'flex',\n    flexDirection: 'column',\n    [theme.breakpoints.up('sm')]: {\n      marginLeft: drawerWidth,\n    }\n  },\n  toolbar: {\n    [theme.breakpoints.up('sm')]: {\n      marginLeft: drawerWidth,\n    }\n  }\n}));\n\nfunction App() {\n  const classes = useStyles();\n  const matches = useMediaQuery('(min-width: 600px)');\n  const [open, setOpen] = useState(false);\n\n  return (\n    <div>\n      <Drawer\n        open={open}\n        variant={matches ? 'permanent' : 'temporary'}\n        anchor=\"left\"\n        onClose={() => setOpen(false)}\n        className={classes.drawer}\n      >\n        <AppBar position=\"relative\" color=\"transparent\" elevation={0} sx={{ borderBottom: (theme) => `1px solid ${theme.palette.divider}` }}>\n          <Toolbar sx={{ px: { sm: 2 } }}>\n            <Link href=\"/\" style={{ width: 151, height: 30, display: 'block' }}>\n              <img src={`/logo.svg`} width={151} height={30} alt=\"Logo\" />\n            </Link>\n          </Toolbar>\n        </AppBar>\n        <Box sx={{ flexGrow: 1 }}>\n          <Box sx={{ px: 2, pt: 2 }}>\n            <OrgSelection />\n          </Box>\n          <List component=\"nav\">\n            <Box sx={{ position: 'relative' }}>\n              <ListItem button>\n                <ListItemIcon>\n                  <DesktopWindowsOutlinedIcon />\n                </ListItemIcon>\n                <ListItemText primary=\"Website\" />\n              </ListItem>\n              <Box sx={{ position: 'absolute', top: 0, right: 0, margin: 1 }}>\n                <Tooltip title=\"Preview\">\n                  <IconButton size=\"small\">\n                    <VisibilityOutlinedIcon fontSize=\"small\" />\n                  </IconButton>\n                </Tooltip>\n              </Box>\n            </Box>\n            <ListItem button>\n              <ListItemIcon>\n                <StorefrontOutlinedIcon />\n              </ListItemIcon>\n              <ListItemText primary=\"Products\" />\n            </ListItem>\n            <ListItem button>\n              <ListItemIcon>\n                <LocalOfferOutlinedIcon />\n              </ListItemIcon>\n              <ListItemText primary=\"Sales\" />\n            </ListItem>\n            <ListItem button>\n              <ListItemIcon>\n                <WifiTetheringOutlinedIcon />\n              </ListItemIcon>\n              <ListItemText primary=\"Marketing\" />\n            </ListItem>\n            <ListItem button>\n              <ListItemIcon>\n                <AccountCircleOutlinedIcon />\n              </ListItemIcon>\n              <ListItemText primary=\"People\" />\n            </ListItem>\n          </List>\n        </Box>\n        <Box>\n          <List component=\"nav\">\n            <ListItem button>\n              <ListItemIcon>\n                <SettingsOutlinedIcon />\n              </ListItemIcon>\n              <ListItemText primary=\"Settings\" />\n            </ListItem>\n            <ListItem button>\n              <ListItemIcon>\n                <HelpOutlineOutlinedIcon />\n              </ListItemIcon>\n              <ListItemText primary=\"Help\" />\n            </ListItem>\n          </List>\n        </Box>\n      </Drawer>\n      <AppBar color=\"default\" elevation={0} sx={{ borderBottom: (theme) => `1px solid ${theme.palette.divider}` }}>\n        <Toolbar className={classes.toolbar}>\n          <Box sx={{ mr: 1, display: { xs: 'block', sm: 'none' } }}>\n            <IconButton size=\"large\" edge=\"start\" color=\"inherit\" onClick={() => setOpen(!open)}>\n              <MenuIcon />\n            </IconButton>\n          </Box>\n          <Box sx={{ display: { xs: 'block', sm: 'none' } }}>\n            <Link href=\"/\" style={{ width: 151, height: 30, display: 'block' }}>\n              <img src={`/logo.svg`} width={151} height={30} alt=\"Logo\" />\n            </Link>\n          </Box>\n          <Box sx={{ display: { xs: 'none', sm: 'block' } }}>\n            <InputBase\n              placeholder=\"Search for anything...\"\n              startAdornment={\n                <InputAdornment position=\"start\">\n                  <SearchIcon />\n                </InputAdornment>\n              }\n            />\n          </Box>\n          <Box sx={{ flexGrow: 1 }} />\n          <Box sx={{ mr: -1 }}>\n            <ProfileDropdown />\n          </Box>\n        </Toolbar>\n      </AppBar>\n      <main className={classes.main}>\n        <Toolbar />\n        <Box sx={{ flexGrow: 1, py: 3 }}>\n          <Container maxWidth=\"lg\">\n            <Stack direction=\"row\" spacing={1} sx={{ mb: 2 }}>\n              <Button color=\"inherit\" startIcon={<ChevronLeftIcon />} sx={{ color: 'text.secondary' }}>\n                Back to Products\n              </Button>\n            </Stack>\n            <Typography variant=\"h4\" gutterBottom>My Product</Typography>\n            <Stack direction=\"row\" spacing={1} sx={{ mb: 2 }}>\n              <Button color=\"inherit\" startIcon={<CreateIcon />} sx={{ color: 'text.secondary' }}>\n                Edit Details\n              </Button>\n              <Button color=\"inherit\" startIcon={<VisibilityIcon />} sx={{ color: 'text.secondary' }}>\n                Preview\n              </Button>\n              <Button color=\"inherit\" startIcon={<ColorLensIcon />} sx={{ color: 'text.secondary' }}>\n                Customize\n              </Button>\n            </Stack>\n            <Paper sx={{ p: 4 }}>\n              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur dicta eius error incidunt ipsam, maxime natus nihil, odit porro possimus provident quaerat quam quasi quod tempora tempore tenetur ut vero.\n            </Paper>\n            <br />\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto assumenda enim facilis impedit iste neque tenetur. Ab accusamus animi aut blanditiis consequuntur facilis id optio porro tempore? Ab, illum sit.\n            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio dolore iusto sed totam voluptatum! Accusamus consequatur dolorum ea esse natus obcaecati quod repellendus similique, sunt. Atque cum dolores veritatis voluptates?</p>\n            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio dolore iusto sed totam voluptatum! Accusamus consequatur dolorum ea esse natus obcaecati quod repellendus similique, sunt. Atque cum dolores veritatis voluptates?</p>\n            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio dolore iusto sed totam voluptatum! Accusamus consequatur dolorum ea esse natus obcaecati quod repellendus similique, sunt. Atque cum dolores veritatis voluptates?</p>\n            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio dolore iusto sed totam voluptatum! Accusamus consequatur dolorum ea esse natus obcaecati quod repellendus similique, sunt. Atque cum dolores veritatis voluptates?</p>\n            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio dolore iusto sed totam voluptatum! Accusamus consequatur dolorum ea esse natus obcaecati quod repellendus similique, sunt. Atque cum dolores veritatis voluptates?</p>\n            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio dolore iusto sed totam voluptatum! Accusamus consequatur dolorum ea esse natus obcaecati quod repellendus similique, sunt. Atque cum dolores veritatis voluptates?</p>\n            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio dolore iusto sed totam voluptatum! Accusamus consequatur dolorum ea esse natus obcaecati quod repellendus similique, sunt. Atque cum dolores veritatis voluptates?</p>\n            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio dolore iusto sed totam voluptatum! Accusamus consequatur dolorum ea esse natus obcaecati quod repellendus similique, sunt. Atque cum dolores veritatis voluptates?</p>\n            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio dolore iusto sed totam voluptatum! Accusamus consequatur dolorum ea esse natus obcaecati quod repellendus similique, sunt. Atque cum dolores veritatis voluptates?</p>\n            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio dolore iusto sed totam voluptatum! Accusamus consequatur dolorum ea esse natus obcaecati quod repellendus similique, sunt. Atque cum dolores veritatis voluptates?</p>\n            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio dolore iusto sed totam voluptatum! Accusamus consequatur dolorum ea esse natus obcaecati quod repellendus similique, sunt. Atque cum dolores veritatis voluptates?</p>\n            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio dolore iusto sed totam voluptatum! Accusamus consequatur dolorum ea esse natus obcaecati quod repellendus similique, sunt. Atque cum dolores veritatis voluptates?</p>\n            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio dolore iusto sed totam voluptatum! Accusamus consequatur dolorum ea esse natus obcaecati quod repellendus similique, sunt. Atque cum dolores veritatis voluptates?</p>\n            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio dolore iusto sed totam voluptatum! Accusamus consequatur dolorum ea esse natus obcaecati quod repellendus similique, sunt. Atque cum dolores veritatis voluptates?</p>\n            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio dolore iusto sed totam voluptatum! Accusamus consequatur dolorum ea esse natus obcaecati quod repellendus similique, sunt. Atque cum dolores veritatis voluptates?</p>\n            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio dolore iusto sed totam voluptatum! Accusamus consequatur dolorum ea esse natus obcaecati quod repellendus similique, sunt. Atque cum dolores veritatis voluptates?</p>\n            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio dolore iusto sed totam voluptatum! Accusamus consequatur dolorum ea esse natus obcaecati quod repellendus similique, sunt. Atque cum dolores veritatis voluptates?</p>\n            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio dolore iusto sed totam voluptatum! Accusamus consequatur dolorum ea esse natus obcaecati quod repellendus similique, sunt. Atque cum dolores veritatis voluptates?</p>\n            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio dolore iusto sed totam voluptatum! Accusamus consequatur dolorum ea esse natus obcaecati quod repellendus similique, sunt. Atque cum dolores veritatis voluptates?</p>\n            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio dolore iusto sed totam voluptatum! Accusamus consequatur dolorum ea esse natus obcaecati quod repellendus similique, sunt. Atque cum dolores veritatis voluptates?</p>\n            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio dolore iusto sed totam voluptatum! Accusamus consequatur dolorum ea esse natus obcaecati quod repellendus similique, sunt. Atque cum dolores veritatis voluptates?</p>\n            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio dolore iusto sed totam voluptatum! Accusamus consequatur dolorum ea esse natus obcaecati quod repellendus similique, sunt. Atque cum dolores veritatis voluptates?</p>\n            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio dolore iusto sed totam voluptatum! Accusamus consequatur dolorum ea esse natus obcaecati quod repellendus similique, sunt. Atque cum dolores veritatis voluptates?</p>\n            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio dolore iusto sed totam voluptatum! Accusamus consequatur dolorum ea esse natus obcaecati quod repellendus similique, sunt. Atque cum dolores veritatis voluptates?</p>\n            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio dolore iusto sed totam voluptatum! Accusamus consequatur dolorum ea esse natus obcaecati quod repellendus similique, sunt. Atque cum dolores veritatis voluptates?</p>\n            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio dolore iusto sed totam voluptatum! Accusamus consequatur dolorum ea esse natus obcaecati quod repellendus similique, sunt. Atque cum dolores veritatis voluptates?</p>\n          </Container>\n        </Box>\n      </main>\n    </div>\n  );\n}\n\nexport default App;\n","import { ReportHandler } from 'web-vitals';\n\nconst reportWebVitals = (onPerfEntry?: ReportHandler) => {\n  if (onPerfEntry && onPerfEntry instanceof Function) {\n    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n      getCLS(onPerfEntry);\n      getFID(onPerfEntry);\n      getFCP(onPerfEntry);\n      getLCP(onPerfEntry);\n      getTTFB(onPerfEntry);\n    });\n  }\n};\n\nexport default reportWebVitals;\n","import { createTheme } from '@mui/material/styles';\n\nconst defaultTheme = createTheme();\n\nexport const theme = createTheme({\n  typography: {\n    fontFamily: [\n      'Inter',\n      '-apple-system',\n      'BlinkMacSystemFont',\n      '\"Segoe UI\"',\n      'Roboto',\n      '\"Helvetica Neue\"',\n      'Arial',\n      'sans-serif',\n      '\"Apple Color Emoji\"',\n      '\"Segoe UI Emoji\"',\n      '\"Segoe UI Symbol\"',\n    ].join(','),\n    h1: { fontWeight: 600 },\n    h2: { fontWeight: 600 },\n    h3: { fontWeight: 600 },\n    h4: { fontWeight: 600 },\n  },\n  components: {\n    MuiCssBaseline: {\n      styleOverrides: {\n        root: {\n          backgroundColor: 'red'\n        }\n      }\n    },\n    MuiListItemIcon: {\n      styleOverrides: {\n        root: {\n          minWidth: 40\n        }\n      }\n    },\n    MuiListItemText: {\n      styleOverrides: {\n        primary: {\n          fontSize: defaultTheme.typography.pxToRem(15),\n          fontWeight: 500\n        }\n      }\n    },\n    MuiAppBar: {\n      styleOverrides: {\n        colorDefault: {\n          backgroundColor: defaultTheme.palette.background.paper,\n        }\n      }\n    },\n    MuiButton: {\n      styleOverrides: {\n        root: {\n          textTransform: 'none',\n        }\n      }\n    },\n    MuiTooltip: {\n      defaultProps: {\n        placement: 'top',\n        arrow: true\n      }\n    },\n    MuiContainer: {\n      styleOverrides: {\n        maxWidthLg: {\n          [defaultTheme.breakpoints.up('lg')]: {\n            maxWidth: 1000\n          }\n        }\n      }\n    }\n  }\n});\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\nimport reportWebVitals from './reportWebVitals';\nimport { ThemeProvider } from '@mui/material/styles'\nimport CssBaseline from '@mui/material/CssBaseline';\n\nimport { theme } from './theme';\n\nReactDOM.render(\n  <React.StrictMode>\n    <ThemeProvider theme={theme}>\n      <CssBaseline />\n      <App />\n    </ThemeProvider>\n  </React.StrictMode>,\n  document.getElementById('root')\n);\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals();\n"],"sourceRoot":""}