{"version":3,"sources":["components/Tabs.tsx","utils/labelMap.tsx","components/Input.tsx","components/ColorOptions.tsx","components/ButtonStyler.tsx","utils/defaultStyles.js","components/Sidebar.tsx","components/PreviewTabs.tsx","components/Preview.tsx","components/JSONpreview.tsx","assets/logo.svg","components/Nav.tsx","utils/presetThemes.jsx","components/ThemeDropdown.tsx","components/RandomColorsButton.tsx","scenes/DesignPlayground.tsx","components/ConfigTabs.tsx","components/SchemaBuilderNav.tsx","stiches.config.js","components/SchemaPreview.tsx","utils/validatorLibrary.tsx","utils/buildSchema.tsx","scenes/TableBuilder.tsx","utils/titleCase.tsx","App.tsx","reportWebVitals.js","index.js"],"names":["getClassName","tab","activeTab","className","Tabs","setActiveTab","aria-label","onClick","labelMap","backgroundColor","primaryTextColor","secondaryTextColor","textColor","successColor","warningColor","Input","name","theme","setTheme","htmlFor","type","value","global","onChange","e","color","newTheme","handleChange","target","options","ColorOptions","map","o","i","ColorInput","attribute","buttonType","buttons","buttonOptions","primary","secondary","columnMatchConfirm","ButtonStyler","propType","updatedButtonType","updatedTheme","Object","entries","key","option","Button","border","borderRadius","boxShadow","ColumnMatchConfirmButton","defaultTheme","Sidebar","activePreview","PreviewTabs","setActivePreview","Preview","stage","iframeRef","useRef","resolver","child","useState","showError","setShowError","useEffect","appendTo","current","Promise","resolve","Penpal","connectToChild","url","promise","then","catch","querySelectorAll","forEach","remove","c","DEMO__setConfig","ref","JSONPreview","newObj","src","displayDataTypes","Nav","children","logo","alt","presetThemes","clean","darkMode","padding","fontSize","randy","chic","pizza","bold","ThemeDropdown","menuOpen","setMenuOpen","id","aria-haspopup","aria-expanded","aria-labelledby","xmlns","viewBox","fill","aria-hidden","fillRule","d","clipRule","role","aria-activedescendant","keys","RandomColorsButton","newPalette","randomColor","count","generateColors","DesignPlayground","ConfigTabs","SchemaBuilderNav","onDelete","onTogglePanel","isModalOpen","modal","document","querySelector","classList","toggle","body","createStyled","prefix","tokens","breakpoints","utils","styled","StyledSidebar","css","width","height","maxHeight","overflow","SchemaPreview","onClosePanel","schema","stroke","strokeLinecap","strokeLinejoin","strokeWidth","enableClipboard","copy","navigator","clipboard","writeText","JSON","stringify","regexMatches","number","regex","error","email","zipcode","letters","regexOptions","label","buildSchema","cellData","row","cells","hasLabelAndKey","rowObj","cell","idx","validators","alternate","validator","validate","booleanValue","push","filter","length","fieldTypeOptions","boolRenderer","props","COLUMNS","required","renderer","editor","disableClipboardEvents","singleSelectionOnly","column","disableEditor","initialRows","Array","from","index","TableBuilder","showJSONPreview","setShowJSONPreview","formattedSchema","setFormattedSchema","globalConfigs","setGlobalConfigs","data","setData","fields","handleCellsChange","a","changes","updatedData","rowChange","rowIndex","patch","autoSetVal","currCell","source","col","split","join","style","display","columnConfig","rowHeight","onCellsChange","setSchema","globalBools","Managed","GlobalConfigColumns","formattedGlobalArray","GlobalConfigs","schemaCopy","updatedGlobalArray","matchedVal","values","globalData","setGlobalData","handleCellChange","colValue","boolValue","globalDataCopy","console","log","globalDataFormatted","keyToUpdate","App","path","component","reportWebVitals","onPerfEntry","Function","getCLS","getFID","getFCP","getLCP","getTTFB","ReactDOM","render","StrictMode","getElementById"],"mappings":"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","file":"static/js/main.b78e8f99.chunk.js","sourcesContent":["const getClassName = (tab, activeTab) => {\n  const className =\n    \"text-purple-500 hover:text-purple-700 px-3 py-2 font-medium text-sm rounded-md cursor-pointer\";\n  return tab === activeTab ? `${className} bg-purple-100` : className;\n};\n\nexport const Tabs = ({ activeTab, setActiveTab }) => {\n  return (\n    <div>\n      <div className=\"hidden sm:block\">\n        <nav className=\"flex space-x-4 justify-center\" aria-label=\"Tabs\">\n          <div\n            onClick={() => setActiveTab(\"Colors\")}\n            className={getClassName(\"Colors\", activeTab)}\n          >\n            Colors\n          </div>\n          <div\n            onClick={() => setActiveTab(\"Buttons\")}\n            className={getClassName(\"Buttons\", activeTab)}\n          >\n            Buttons\n          </div>\n        </nav>\n      </div>\n    </div>\n  );\n};\n","export const labelMap = {\n  backgroundColor: \"Background\",\n  primaryTextColor: \"Primary text\",\n  secondaryTextColor: \"Secondary text\",\n  textColor: \"Text\",\n  successColor: \"Success\",\n  warningColor: \"Warning\",\n};\n","import { labelMap } from \"../utils/labelMap\";\n\nexport const Input = ({ name, theme, setTheme }) => {\n  const handleChange = (color) => {\n    const newTheme = { ...theme, global: { ...theme.global, [name]: color } };\n    setTheme(newTheme);\n  };\n  return (\n    <>\n      <label htmlFor={name} className=\"text-xs\">\n        {labelMap[name]}\n      </label>\n      <div className=\"flex mt-1 relative shadow-md p-4 focus:ring-purple-500 focus:border-purple-500 block sm:text-sm border-gray-500 rounded-md\">\n        <input\n          className=\"focus:outline-none\"\n          type=\"color\"\n          value={theme.global[name]}\n          onChange={(e) => handleChange(e.target.value)}\n        />\n        <div className=\"pl-4 font-bold\">{theme.global[name]}</div>\n      </div>\n    </>\n  );\n};\n","import { Input } from \"./Input\";\n\nconst options = [\n  \"backgroundColor\",\n  \"secondaryTextColor\",\n  \"primaryTextColor\",\n  \"textColor\",\n  \"successColor\",\n  \"warningColor\",\n];\n\nexport const ColorOptions = ({ theme, setTheme }) => {\n  return (\n    <div className=\"flex flex-col pb-4\">\n      {options.map((o, i) => (\n        <div className={i === 0 ? \"\" : \"mt-4\"} key={o}>\n          <Input name={o} theme={theme} setTheme={setTheme} />\n        </div>\n      ))}\n    </div>\n  );\n};\n","const ColorInput = ({ theme, name, attribute, buttonType, onChange }) => {\n  return (\n    <div className=\"mb-4\">\n      <label htmlFor=\"primary-button\" className=\"text-xs\">\n        {name}\n      </label>\n      <div className=\"flex mt-1 relative shadow-md p-4 focus:ring-purple-500 focus:border-purple-500 block sm:text-sm border-gray-500 rounded-md\">\n        <input\n          className=\"focus:outline-none\"\n          type=\"color\"\n          value={theme.buttons[buttonType][attribute]}\n          onChange={(e) => onChange(e.target.value, attribute, buttonType)}\n        />\n        <div className=\"pl-4 font-bold\">\n          {theme.buttons[buttonType][attribute]}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nconst buttonOptions = {\n  primary: [\"backgroundColor\", \"color\"],\n  secondary: [\"backgroundColor\", \"color\"],\n  columnMatchConfirm: [\"backgroundColor\", \"color\"],\n};\n\nexport const ButtonStyler = ({ theme, setTheme }) => {\n  const handleChange = (color, propType, buttonType) => {\n    const updatedButtonType = {\n      [buttonType]: {\n        ...theme.buttons[buttonType],\n        [propType]: color,\n      },\n    };\n    const updatedTheme = {\n      ...theme,\n      buttons: {\n        ...theme.buttons,\n        ...updatedButtonType,\n      },\n    };\n    setTheme(updatedTheme);\n  };\n\n  return (\n    <>\n      {Object.entries(buttonOptions).map(([key, options]) =>\n        options.map((option) => (\n          <ColorInput\n            key={`${key}__${option}`}\n            theme={theme}\n            name={`${key} ${option}`}\n            attribute={option}\n            buttonType={key}\n            onChange={handleChange}\n          />\n        ))\n      )}\n    </>\n  );\n};\n","export const Button = {\n  backgroundColor: \"#06c6ff\",\n  color: \"#02394b\",\n  border: \"none\",\n  borderRadius: \"4px\",\n  boxShadow:\n    \"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)\",\n  \":hover\": {\n    backgroundColor: \"#118CB0\",\n    color: \"#02394b\",\n  },\n};\n\nexport const ColumnMatchConfirmButton = {\n  ...Button,\n  backgroundColor: \"#06c6ff\",\n};\n\nexport const SecondaryButton = {\n  ...Button,\n  backgroundColor: \"#FFFFFF\",\n};\n\nexport const defaultTheme = {\n  global: {\n    backgroundColor: \"#EAEFF5\",\n    textColor: \"#1D2830\",\n    primaryTextColor: \"#1D2830\",\n    secondaryTextColor: \"#667D8D\",\n    successColor: \"#60b700\",\n    warningColor: \"#f6A623\",\n  },\n  buttons: {\n    primary: Button,\n    secondary: SecondaryButton,\n    columnMatchConfirm: ColumnMatchConfirmButton,\n  },\n};\n","import { Tabs } from \"./Tabs\";\nimport { ColorOptions } from \"./ColorOptions\";\nimport { ButtonStyler } from \"./ButtonStyler\";\nimport { defaultTheme } from \"../utils/defaultStyles\";\n\nexport const Sidebar = ({ activeTab, setActiveTab, theme, setTheme }) => {\n  return (\n    <div className=\"flex flex-col max-w-xs w-full max-h-full overflow-y-hidden\">\n      <div className=\"text-center py-4\">\n        <Tabs activeTab={activeTab} setActiveTab={setActiveTab} />\n      </div>\n      <div className=\"sidebar-content\">\n        {activeTab === \"Colors\" && (\n          <ColorOptions setTheme={setTheme} theme={theme} />\n        )}\n        {activeTab === \"Buttons\" && (\n          <ButtonStyler setTheme={setTheme} theme={theme} />\n        )}\n      </div>\n      <div className=\"p-4 text-center\">\n        <button\n          type=\"button\"\n          className=\"inline-flex items-center px-4 py-2 border border-transparent text-center font-medium rounded-md text-purple-700 bg-purple-100 hover:bg-purple-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500\"\n          onClick={() => setTheme(defaultTheme)}\n        >\n          Reset to default\n        </button>\n      </div>\n    </div>\n  );\n};\n","const getClassName = (tab, activePreview) => {\n  const className =\n    \"text-purple-500 hover:text-purple-700 px-3 py-2 font-medium text-sm rounded-md cursor-pointer\";\n  return tab === activePreview ? `${className} bg-purple-100` : className;\n};\n\nexport const PreviewTabs = ({ activePreview, setActivePreview }) => {\n  return (\n    <div>\n      <div className=\"hidden sm:block\">\n        <nav className=\"flex space-x-4\" aria-label=\"Tabs\">\n          <div\n            onClick={() => setActivePreview(\"INITIAL\")}\n            className={getClassName(\"INITIAL\", activePreview)}\n          >\n            Initial\n          </div>\n          <div\n            onClick={() => setActivePreview(\"MATCH\")}\n            className={getClassName(\"MATCH\", activePreview)}\n          >\n            Match\n          </div>\n          <div\n            onClick={() => setActivePreview(\"REVIEW\")}\n            className={getClassName(\"REVIEW\", activePreview)}\n          >\n            Review\n          </div>\n        </nav>\n      </div>\n    </div>\n  );\n};\n","// @ts-nocheck\nimport { useEffect, useRef, useState } from \"react\";\n\nimport Penpal from \"penpal\";\n\nexport function Preview({ theme, stage }) {\n  const iframeRef = useRef();\n  const resolver = useRef();\n  const child = useRef();\n  const [showError, setShowError] = useState(false);\n\n  useEffect(() => {\n    const appendTo = iframeRef.current;\n\n    child.current = new Promise((resolve) => {\n      resolver.current = resolve;\n    });\n    const connection = Penpal.connectToChild({\n      url: `${\n        process.env.NODE_ENV === \"production\"\n          ? \"https://portal-2.flatfile.io\"\n          : \"http://localhost:2000\"\n      }/?demo=1`,\n      appendTo,\n    });\n\n    connection.promise.then(resolver.current).catch(() => {\n      setShowError(true);\n    });\n\n    // cleanup\n    return () => {\n      if (appendTo) {\n        appendTo.querySelectorAll(\"iframe\").forEach((i) => i.remove());\n      }\n    };\n  }, []);\n\n  useEffect(() => {\n    child?.current.then((c) => {\n      c.DEMO__setConfig({\n        theme: {\n          global: {\n            backgroundColor: theme.global.backgroundColor,\n            primaryTextColor: theme.global.primaryTextColor,\n            secondaryTextColor: theme.global.secondaryTextColor,\n            textColor: theme.global.textColor,\n            successColor: theme.global.successColor,\n            warningColor: theme.global.warningColor,\n          },\n          buttons: {\n            primary: theme.buttons.primary,\n            secondary: theme.buttons.secondary,\n            columnMatchConfirm: theme.buttons.columnMatchConfirm,\n          },\n        },\n        stage,\n      });\n    });\n  }, [theme, stage]);\n\n  if (showError) {\n    return (\n      <div className=\"w-full h-full flex justify-center items-center\">\n        <div className=\"px-4 py-2 rounded-md text-red-500 bg-red-100\">\n          Something went wrong\n        </div>\n      </div>\n    );\n  }\n\n  return <div className=\"portal-preview\" ref={iframeRef} />;\n}\n","import ReactJson from \"react-json-view\";\n// https://www.npmjs.com/package/react-json-view\nexport const JSONPreview = ({ theme }) => {\n  const newObj = { ...theme };\n  return (\n    <div className=\"max-w-xs w-full max-h-full overflow-y-auto py-4 px-2 preview\">\n      <ReactJson\n        src={newObj}\n        name={false}\n        theme=\"shapeshifter:inverted\"\n        displayDataTypes={false}\n      />\n    </div>\n  );\n};\n","export default __webpack_public_path__ + \"static/media/logo.01aea844.svg\";","import logo from \"../assets/logo.svg\";\n\nexport const Nav = ({ children }: { children: any }) => {\n  return (\n    <nav className=\"bg-white border-b-2 border-grey-600 pb-4\">\n      <div className=\"px-2 sm:px-6 lg:px-12 mt-4\">\n        <div className=\"relative flex justify-between\">\n          <div className=\"flex-1 flex items-center justify-center sm:items-stretch sm:justify-start\">\n            <div className=\"flex-shrink-0 flex items-center\">\n              <img\n                className=\"hidden lg:block h-8 w-auto mr-40\"\n                src={logo}\n                alt=\"flatfile\"\n              />\n            </div>\n            {children}\n          </div>\n        </div>\n      </div>\n    </nav>\n  );\n};\n","import { Button } from \"./defaultStyles\";\n\nexport const presetThemes = {\n  clean: {\n    global: {\n      backgroundColor: \"#fff\",\n      primaryTextColor: \"#1a535c\",\n      secondaryTextColor: \"#4ecdc4\",\n      textColor: \"#1a535c\",\n      successColor: \"#8ce18d\",\n      warningColor: \"#ffe66d\",\n    },\n    buttons: {\n      primary: {\n        ...Button,\n        backgroundColor: \"#4ecdc4\",\n        color: \"#1a535c\",\n      },\n      secondary: {\n        ...Button,\n        backgroundColor: \"#05b2dc\",\n        color: \"#FFF\",\n      },\n      columnMatchConfirm: {\n        ...Button,\n        backgroundColor: \"#4ecdc4\",\n        color: \"#1a535c\",\n      },\n    },\n  },\n  darkMode: {\n    global: {\n      backgroundColor: \"#212327\",\n      textColor: \"#c2c3c3\",\n      primaryTextColor: \"#c2c3c3\",\n      secondaryTextColor: \"#c2c3c3\",\n      successColor: \"#c2c3c3\",\n      warningColor: \"#c2c3c3\",\n    },\n    buttons: {\n      primary: {\n        backgroundColor: \"#00D1AF\",\n        color: \"#002d3d\",\n        border: \"1px solid transparent\",\n        padding: \"10px 16px\",\n        fontSize: \"16px\",\n        borderRadius: \"1px\",\n        \":hover\": {\n          backgroundColor: \"#00D1AF\",\n          border: \"1px solid transparent\",\n          color: \"#002d3d\",\n        },\n      },\n      secondary: {\n        backgroundColor: \"#d9ccff\",\n        border: \"1px solid #ece6ff\",\n        color: \"#002d3d\",\n        padding: \"10px 16px\",\n        fontSize: \"16px\",\n        borderRadius: \"1px\",\n        \":hover\": {\n          backgroundColor: \"#794cff\",\n          border: \"1px solid #794cff\",\n          color: \"#c2c3c3\",\n        },\n      },\n      columnMatchConfirm: {\n        backgroundColor: \"#d9ccff\",\n        border: \"1px solid #ece6ff\",\n        color: \"#002d3d\",\n        padding: \"10px 16px\",\n        fontSize: \"16px\",\n        borderRadius: \"1px\",\n        \":hover\": {\n          backgroundColor: \"#794cff\",\n          border: \"1px solid #794cff\",\n          color: \"#c2c3c3\",\n        },\n      },\n    },\n  },\n  randy: {\n    global: {\n      backgroundColor: \"#fe5783\",\n      primaryTextColor: \"#FFFFFF\",\n      secondaryTextColor: \"#081b23\",\n      textColor: \"#FFFFFF\",\n      successColor: \"#58cd67\",\n      warningColor: \"#ffd766\",\n    },\n    buttons: {\n      primary: {\n        ...Button,\n        backgroundColor: \"#081b23\",\n        color: \"#FFFFFF\",\n      },\n      secondary: {\n        ...Button,\n        backgroundColor: \"#FFFFFF\",\n        color: \"#081b23\",\n      },\n      columnMatchConfirm: {\n        ...Button,\n        backgroundColor: \"#ee2757\",\n        color: \"#FFFFFF\",\n      },\n    },\n  },\n  chic: {\n    global: {\n      backgroundColor: \"#2b2d42\",\n      primaryTextColor: \"#edf2f4\",\n      secondaryTextColor: \"#ef233c\",\n      textColor: \"#edf2f4\",\n      successColor: \"#74c69d\",\n      warningColor: \"#ffd766\",\n    },\n    buttons: {\n      primary: {\n        ...Button,\n        backgroundColor: \"#ffd766\",\n        color: \"#2b2d42\",\n      },\n      secondary: {\n        ...Button,\n        backgroundColor: \"#FFFFFF\",\n        color: \"#081b23\",\n      },\n      columnMatchConfirm: {\n        ...Button,\n        backgroundColor: \"#ee2757\",\n        color: \"#FFFFFF\",\n      },\n    },\n  },\n  pizza: {\n    global: {\n      backgroundColor: \"#E12301\",\n      primaryTextColor: \"#edf2f4\",\n      secondaryTextColor: \"#DBA24A\",\n      textColor: \"#edf2f4\",\n      successColor: \"#0F720F\",\n      warningColor: \"#E1D800\",\n    },\n    buttons: {\n      primary: {\n        ...Button,\n        backgroundColor: \"#FFFA8A\",\n        color: \"#2b2d42\",\n      },\n      secondary: {\n        ...Button,\n        backgroundColor: \"#FFFFFF\",\n        color: \"#081b23\",\n      },\n      columnMatchConfirm: {\n        ...Button,\n        backgroundColor: \"#836436\",\n        color: \"#FFFFFF\",\n      },\n    },\n  },\n  bold: {\n    global: {\n      backgroundColor: \"#f5f5f4\",\n      primaryTextColor: \"#1D2830\",\n      secondaryTextColor: \"#ef476f\",\n      textColor: \"#1D2830\",\n      successColor: \"#06d6a0\",\n      warningColor: \"#ffc43d\",\n    },\n    buttons: {\n      primary: {\n        ...Button,\n        backgroundColor: \"#1D2830\",\n        color: \"#f5f5f4\",\n      },\n      secondary: {\n        ...Button,\n        backgroundColor: \"#FFFFFF\",\n        color: \"#081b23\",\n      },\n      columnMatchConfirm: {\n        ...Button,\n        backgroundColor: \"#ee2757\",\n        color: \"#FFFFFF\",\n      },\n    },\n  },\n};\n","import { useState } from \"react\";\nimport { presetThemes } from \"../utils/presetThemes\";\nexport const ThemeDropdown = ({ theme, setTheme }) => {\n  const [menuOpen, setMenuOpen] = useState(false);\n  const handleChange = (theme) => {\n    setTheme(presetThemes[theme]);\n    setMenuOpen(false);\n  };\n  return (\n    <div className=\"w-full z-30 pr-8\">\n      <label\n        id=\"listbox-label\"\n        className=\"block text-sm font-medium text-gray-700\"\n      >\n        Preset Themes\n      </label>\n      <div className=\"mt-1 relative\">\n        <button\n          onClick={() => setMenuOpen(!menuOpen)}\n          type=\"button\"\n          aria-haspopup=\"listbox\"\n          aria-expanded=\"true\"\n          aria-labelledby=\"listbox-label\"\n          className=\"bg-white relative w-full border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm\"\n        >\n          <span className=\"block truncate\">themes</span>\n          <span className=\"absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none\">\n            <svg\n              className=\"h-5 w-5 text-gray-400\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 20 20\"\n              fill=\"currentColor\"\n              aria-hidden=\"true\"\n            >\n              <path\n                fillRule=\"evenodd\"\n                d=\"M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z\"\n                clipRule=\"evenodd\"\n              />\n            </svg>\n          </span>\n        </button>\n        {menuOpen && (\n          <div className=\"absolute mt-1 w-full rounded-md bg-white shadow-lg\">\n            <ul\n              role=\"listbox\"\n              aria-labelledby=\"listbox-label\"\n              aria-activedescendant=\"listbox-item-3\"\n              className=\"max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm\"\n            >\n              {Object.keys(presetThemes).map((theme) => {\n                return (\n                  <li\n                    key={theme}\n                    id=\"listbox-option-0\"\n                    role=\"option\"\n                    className=\"text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9\"\n                    onClick={() => handleChange(theme)}\n                  >\n                    <span className=\"font-normal block truncate\">{theme}</span>\n                  </li>\n                );\n              })}\n            </ul>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n","import randomColor from \"randomcolor\";\n\n// https://github.com/davidmerfield/randomColor\n\nexport const RandomColorsButton = ({ theme, setTheme }) => {\n  const generateColors = () => {\n    const newPalette = randomColor({ count: 10 });\n    const updatedTheme = {\n      ...theme,\n      global: {\n        ...theme.global,\n        backgroundColor: newPalette[0],\n        textColor: newPalette[1],\n        secondaryTextColor: newPalette[2],\n      },\n      buttons: {\n        ...theme.buttons,\n        primary: {\n          ...theme.buttons.primary,\n          backgroundColor: newPalette[3],\n          color: newPalette[4],\n        },\n        secondary: {\n          ...theme.buttons.primary,\n          backgroundColor: newPalette[5],\n          color: newPalette[6],\n        },\n        columnMatchConfirm: {\n          ...theme.buttons.columnMatchConfirm,\n          backgroundColor: newPalette[6],\n          color: newPalette[7],\n        },\n      },\n    };\n    setTheme(updatedTheme);\n  };\n  return (\n    <button\n      onClick={() => generateColors()}\n      type=\"button\"\n      className=\"inline-flex items-center px-3 py-2 border border-transparent text-base font-medium rounded-md text-purple-700 bg-purple-100 hover:bg-purple-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 h-1/2\"\n    >\n      Random\n    </button>\n  );\n};\n","import { useState } from \"react\";\nimport \"../App.css\";\nimport { Sidebar } from \"../components/Sidebar\";\nimport { PreviewTabs } from \"../components/PreviewTabs\";\nimport { defaultTheme } from \"../utils/defaultStyles\";\nimport { Preview } from \"../components/Preview\";\nimport { JSONPreview } from \"../components/JSONpreview\";\nimport { Nav } from \"../components/Nav\";\nimport { ThemeDropdown } from \"../components/ThemeDropdown\";\nimport { RandomColorsButton } from \"../components/RandomColorsButton\";\n\nexport const DesignPlayground = () => {\n  const [activeTab, setActiveTab] = useState(\"Colors\");\n  const [activePreview, setActivePreview] = useState(\"INITIAL\");\n  const [theme, setTheme] = useState(defaultTheme);\n\n  return (\n    <div>\n      <Nav>\n        <div className=\"flex justify-between items-center w-full mr-72 ml-10\">\n          <PreviewTabs\n            activePreview={activePreview}\n            setActivePreview={setActivePreview}\n          />\n          <div className=\"flex w-1/4 items-end\">\n            <ThemeDropdown theme={theme} setTheme={setTheme} />\n            <RandomColorsButton theme={theme} setTheme={setTheme} />\n          </div>\n        </div>\n      </Nav>\n      <div className=\"flex wrapper\">\n        <Sidebar\n          activeTab={activeTab}\n          setActiveTab={setActiveTab}\n          theme={theme}\n          setTheme={setTheme}\n        />\n        <>\n          <Preview theme={theme} stage={activePreview} />\n          <JSONPreview theme={theme} />\n        </>\n      </div>\n    </div>\n  );\n};\n","const getClassName = (tab, activeTab) => {\n  const className =\n    \"text-purple-500 hover:text-purple-700 px-3 py-2 font-medium text-sm rounded-md cursor-pointer\";\n  return tab === activeTab ? `${className} bg-purple-100` : className;\n};\n\nexport const ConfigTabs = ({ activeTab, setActiveTab }) => {\n  return (\n    <div className=\"flex justify-center items-center\">\n      <div className=\"hidden sm:block \">\n        <nav\n          className=\"flex space-x-4 justify-center items-center\"\n          aria-label=\"Tabs\"\n        >\n          <div\n            onClick={() => setActiveTab(\"Fields\")}\n            className={getClassName(\"Fields\", activeTab)}\n          >\n            Fields\n          </div>\n          <div\n            onClick={() => setActiveTab(\"Global Configs\")}\n            className={getClassName(\"Global Configs\", activeTab)}\n          >\n            Global Configs\n          </div>\n        </nav>\n      </div>\n    </div>\n  );\n};\n","import { useEffect, useState } from \"react\";\nimport { ConfigTabs } from \"../components/ConfigTabs\";\n\nimport logo from \"../assets/logo.svg\";\n\nexport const SchemaBuilderNav = ({\n  onDelete,\n  onTogglePanel,\n  activeTab,\n  setActiveTab,\n}) => {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n  useEffect(() => {\n    if (isModalOpen) {\n      const modal = document.querySelector(\".modal\");\n      modal.classList.toggle(\"opacity-0\");\n      modal.classList.toggle(\"pointer-events-none\");\n      document.body.classList.toggle(\"modal-active\");\n    }\n  }, [isModalOpen]);\n  return (\n    <nav className=\"bg-white\">\n      <div className=\"mx-auto px-4 sm:px-6 lg:px-8\">\n        <div className=\"flex justify-between h-16\">\n          <div className=\"flex\">\n            <div className=\"flex-shrink-0 flex items-center\">\n              <img\n                className=\"hidden lg:block h-8 w-auto mr-40\"\n                src={logo}\n                alt=\"flatfile\"\n              />\n            </div>\n          </div>\n          <ConfigTabs activeTab={activeTab} setActiveTab={setActiveTab} />\n\n          <div className=\"flex items-center\">\n            <div className=\"flex-shrink-0 mr-20 flex items-center justify-center\">\n              {/* <button\n                type=\"button\"\n                className=\"mr-4 inline-flex items-center p-1.5 border border-transparent rounded-full shadow-sm text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500\"\n                onClick={() => onDelete()}\n              >\n                <svg\n                  className=\"h-5 w-5\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke=\"currentColor\"\n                >\n                  <path\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    strokeWidth=\"2\"\n                    d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"\n                  />\n                </svg>\n              </button> */}\n              {/* <button\n                type=\"button\"\n                onClick={() => setIsModalOpen(true)}\n                className=\"relative inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-purple-700 bg-purple-100 hover:bg-purple-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 mr-6\"\n              >\n                <span>How to Ninja around here</span>\n              </button> */}\n              <button\n                onClick={onTogglePanel}\n                type=\"button\"\n                className=\"relative inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-purple-600 shadow-sm hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500\"\n              >\n                <span>Preview JSON</span>\n              </button>\n            </div>\n          </div>\n          {/* {true && <InfoModal setIsModalOpen={setIsModalOpen} />} */}\n        </div>\n      </div>\n    </nav>\n  );\n};\n","// stitches.config.js\nimport { createStyled } from \"@stitches/styled\";\n\nexport const { styled, css } = createStyled({\n  prefix: \"\",\n  tokens: {},\n  breakpoints: {},\n  utils: {},\n});\n","import { styled } from \"../stiches.config\";\nimport { CopyToClipboard } from \"react-copy-to-clipboard\";\n\nimport ReactJson from \"react-json-view\";\n\nconst StyledSidebar = styled(\"div\", {\n  padding: \"32px\",\n  width: \"400px\",\n  height: \"100vh\",\n  maxHeight: \"100vh\",\n  overflow: \"scroll\",\n});\n\nexport const SchemaPreview = ({ onClosePanel, schema }) => {\n  return (\n    <StyledSidebar className=\"shadow-xl h-full\">\n      <div className=\"ml-3 h-7\">\n        <button\n          onClick={onClosePanel}\n          className=\"bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500\"\n        >\n          <svg\n            className=\"h-6 w-6\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth=\"2\"\n              d=\"M6 18L18 6M6 6l12 12\"\n            />\n          </svg>\n        </button>\n      </div>\n      <ReactJson\n        src={schema}\n        name={false}\n        theme=\"shapeshifter:inverted\"\n        displayDataTypes={false}\n        enableClipboard={(copy) =>\n          navigator.clipboard.writeText(JSON.stringify(copy.src))\n        }\n      />\n    </StyledSidebar>\n  );\n};\n","export const regexMatches = {\n  number: {\n    regex: \"^[0-9]+$\",\n    error: \"must be a number\",\n  },\n  \"MM/DD/YYYY\": {\n    regex: \"^[0-1]{1}[0-9]{1}\\\\/[0-3]{1}[0-9]{1}\\\\/[0-9]{4}$\",\n    error: \"must be formatted in MM/DD/YYYY\",\n  },\n  email: {\n    regex:\n      \"(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|\\\"(?:[\\\\x01-\\\\x08\\\\x0b\\\\x0c\\\\x0e-\\\\x1f\\\\x21\\\\x23-\\\\x5b\\\\x5d-\\\\x7f]|\\\\\\\\[\\\\x01-\\\\x09\\\\x0b\\\\x0c\\\\x0e-\\\\x7f])*\\\")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\\\\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\\\\x01-\\\\x08\\\\x0b\\\\x0c\\\\x0e-\\\\x1f\\\\x21-\\\\x5a\\\\x53-\\\\x7f]|\\\\\\\\[\\\\x01-\\\\x09\\\\x0b\\\\x0c\\\\x0e-\\\\x7f])+)\\\\])\",\n    error: \"must be email\",\n  },\n  zipcode: {\n    regex: \"^([0-9]{5})|([0-9]{5}-[0-9]{4})$\",\n    error: \"must be zipcode\",\n  },\n  letters: { regex: \"^[a-zA-Z]+$\", error: \"must be letters only\" },\n  \"3 char currency\": { regex: \"^[A-Z]{3}$\", error: \"3 character currency\" },\n  \"alpha chars || spaces\": {\n    regex: \"^[\\\\w ]+$\",\n    error: \"must be alphachar or spaces only\",\n  },\n  \"<= 40 chars\": {\n    regex: \"/^.{0,40}$/\",\n    error: \"must be less than 40 characters\",\n  },\n};\n\nexport const regexOptions = Object.keys(regexMatches).map((key) => {\n  return { label: key };\n});\n","import { regexMatches } from \"../utils/validatorLibrary\";\n/* EXAMPLE CONFIG FIELDS\nfields: [\n            {\n              label: 'Robot Name',\n              key: 'name',\n              sizeHint: 2,\n              description: '<img src=\"/Example.gif\" alt=\"Example test image\" width=\"240\" />',\n              shortDescription: 'Short description',\n              validators: [\n                {\n                  validate: 'required_without_all',\n                  fields: ['id', 'shield-color'],\n                  error: 'must be present if no id and shield color'\n                },\n                {\n                  validate: 'unique'\n                }\n              ]\n            }\n        }\n*/\n\nconst buildValidatorObject = (validators) => {\n  const verboseValidatorObject = validators.map((validator) => {\n    return { validate: \"regex_matches\", ...regexMatches[validator] };\n  });\n  return verboseValidatorObject;\n};\n\nexport const buildSchema = (cellData) => {\n  const formattedSchema = cellData.map((row) => {\n    const cells = row.cells;\n    // check if label and key are set before adding to schema\n    const hasLabelAndKey = row.cells[0].value && row.cells[1].value;\n    let rowObj = {};\n\n    if (hasLabelAndKey) {\n      // create each field object\n      cells.forEach((cell, idx) => {\n        if (cell.value) {\n          switch (idx) {\n            case 0:\n              rowObj[\"label\"] = cell.value;\n              return;\n            case 1:\n              rowObj[\"key\"] = cell.value;\n              return;\n            case 2:\n              rowObj[\"alternates\"] = cell.value.map(\n                (alternate) => alternate.label\n              );\n              return;\n            case 3:\n              // no need to add type: string to field, since string is default\n              if (cell.value[0]?.label !== \"string\") {\n                rowObj[\"type\"] = cell.value[0]?.label;\n              }\n              return;\n            case 4:\n              rowObj[\"validators\"] = buildValidatorObject(\n                cell.value.map((validator) => validator.label)\n              );\n              return;\n            case 5:\n              if (cell.value.booleanValue) {\n                rowObj[\"validators\"].push({ validate: \"required\" });\n              } else {\n                rowObj[\"validators\"] = rowObj[\"validators\"].filter(\n                  (validator) => validator.validate !== \"required\"\n                );\n              }\n              return;\n            case 6:\n              if (cell.value.booleanValue) {\n                rowObj[\"validators\"].push({ validate: \"unique\" });\n              } else {\n                rowObj[\"validators\"] = rowObj[\"validators\"].filter(\n                  (validator) => validator.validate !== \"unique\"\n                );\n              }\n              return;\n            default:\n              return;\n          }\n        }\n      });\n    }\n\n    return rowObj;\n  });\n  const filteredSchema = formattedSchema.filter((row) => {\n    // check if label has been set\n    return row && Object.keys(row).length;\n  });\n  // console.log(filteredSchema);\n  return filteredSchema;\n};\n","import { useEffect, useState } from \"react\";\nimport { SchemaBuilderNav } from \"../components/SchemaBuilderNav\";\nimport { SchemaPreview } from \"../components/SchemaPreview\";\nimport { regexOptions } from \"../utils/validatorLibrary\";\nimport { buildSchema } from \"../utils/buildSchema\";\nimport { infoHelpers } from \"../utils/infoHelpers\";\n\nimport Table, {\n  BooleanRenderer,\n  BooleanRendererProps,\n  DefaultEditorProps,\n  DefaultRendererProps,\n  LookupEditorProps,\n  LookupOption,\n  LookupEditor,\n  LookupRenderer,\n  MultiValueEditorProps,\n  MultiValueRendererProps,\n  MultiValueEditor,\n  MultiValueRenderer,\n} from \"@turntable/core\";\n// import { SelectOptionsPanel } from \"../components/SelectOptionsPanel\";\nimport { reverseTitleCase } from \"../utils/titleCase\";\n\nconst multiValueRenderer = (props: MultiValueRendererProps) => (\n  <MultiValueRenderer {...props} />\n);\nconst multiValueEditor = (props: MultiValueEditorProps) => (\n  <MultiValueEditor {...props} />\n);\n\nconst lookupEditor = (\n  props: DefaultEditorProps<LookupOption[]> & LookupEditorProps\n) => {\n  return <LookupEditor options={regexOptions} {...props} />;\n};\n\nconst lookupRenderer = (\n  props: DefaultRendererProps<{ value: LookupOption[] }>\n) => {\n  return <LookupRenderer options={regexOptions} {...props} />;\n};\n\nconst fieldTypeOptions = [\n  { label: \"string\" },\n  { label: \"select\" },\n  { label: \"checkbox\" },\n];\n\nconst fieldTypeEditor = (\n  props: DefaultEditorProps<LookupOption[]> & LookupEditorProps\n) => {\n  return (\n    <LookupEditor\n      options={fieldTypeOptions}\n      singleSelectionOnly={true}\n      {...props}\n    />\n  );\n};\n\nconst fieldTypeRenderer = (\n  props: DefaultRendererProps<{ value: LookupOption[] }>\n) => {\n  return (\n    <LookupRenderer\n      options={fieldTypeOptions}\n      singleSelectionOnly={true}\n      {...props}\n    />\n  );\n};\n\nconst boolRenderer = (props: DefaultRendererProps<BooleanRendererProps>) => (\n  <BooleanRenderer {...props} />\n);\n\nconst getInfoIcon = (helperText?: string) => {\n  return (\n    <div className=\"has-tooltip relative\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        className=\"h-5 w-5 info-icon\"\n        viewBox=\"0 0 20 20\"\n        fill=\"currentColor\"\n      >\n        <path\n          fillRule=\"evenodd\"\n          d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z\"\n          clipRule=\"evenodd\"\n        />\n      </svg>\n      <div className=\"tooltip shadow-xl\">{helperText}</div>\n    </div>\n  );\n};\n\nconst boolColumns = [\"Required\", \"Unique\"];\n\nconst COLUMNS = [\n  {\n    // icon: getInfoIcon(infoHelpers[\"Label\"]),\n    value: \"Label\",\n    required: true,\n  },\n  {\n    // icon: getInfoIcon(infoHelpers[\"Key\"]),\n    value: \"Key\",\n    required: true,\n  },\n  {\n    // icon: getInfoIcon(infoHelpers[\"Alternates\"]),\n    value: \"Alternates\",\n    renderer: multiValueRenderer,\n    editor: multiValueEditor,\n    disableClipboardEvents: true,\n  },\n  {\n    // icon: getInfoIcon(infoHelpers[\"Field Type\"]),\n    value: \"Field Type\",\n    renderer: fieldTypeRenderer,\n    editor: fieldTypeEditor,\n    disableClipboardEvents: true,\n    singleSelectionOnly: true,\n  },\n  {\n    value: \"RegEx\",\n    renderer: lookupRenderer,\n    editor: lookupEditor,\n    disableClipboardEvents: true,\n  },\n  ...boolColumns.map((column) => {\n    return {\n      // icon: getInfoIcon(infoHelpers[column]),\n      value: column,\n      disableEditor: true,\n      disableClipboardEvents: true,\n      renderer: boolRenderer,\n    };\n  }),\n];\n\nconst defaultArray = new Array(15).fill(\n  Array.from({ length: COLUMNS.length }, () => {\n    return { value: \"\" };\n  })\n);\nconst initialRows = defaultArray.map((row, index) => {\n  const updateWithMultiSelect = row.map((cell, idx) => {\n    // something is broken with field type here (column w/ index 3)\n    if (idx === 3 || idx === 2 || idx === 4) {\n      return { value: [] };\n    } else return cell;\n  });\n  return { cells: updateWithMultiSelect, row: index };\n});\n\nexport const TableBuilder = () => {\n  const [showJSONPreview, setShowJSONPreview] = useState(false);\n  const [formattedSchema, setFormattedSchema] = useState({});\n  const [globalConfigs, setGlobalConfigs] = useState({});\n  const [data, setData] = useState(initialRows);\n  const [activeTab, setActiveTab] = useState<\"Fields\" | \"Global Configs\">(\n    \"Fields\"\n  );\n  useEffect(() => {\n    if (data) {\n      const schema = buildSchema(data);\n      setFormattedSchema({ fields: schema, ...globalConfigs });\n    }\n  }, [data, globalConfigs]);\n  const handleCellsChange = async ({ changes }) => {\n    // [\n    //     {\n    //         \"row\": 0,\n    //         \"patch\": [\n    //             {\n    //                 \"col\": 0,\n    //                 \"value\": \"hhello\"\n    //             }\n    //         ]\n    //     }\n    // ]\n\n    const updatedData = changes.map((rowChange) => {\n      const rowIndex = rowChange.row;\n      const update = data.map((row) => {\n        if (row.row === rowIndex) {\n          // loop through patches + update state for each row patch\n          const updateCell = rowChange.patch.map((patch, index) => {\n            let autoSetVal = \"\";\n            const newState = row.cells.map((currCell, idx) => {\n              if (patch.col === 0) {\n                // automatically set key value\n                autoSetVal = reverseTitleCase(patch.value);\n              }\n              if (idx === 1 && currCell.value === \"\") {\n                return { value: autoSetVal };\n              }\n              if (patch.col === idx) {\n                return { value: patch.value };\n              }\n              return currCell;\n            });\n            return newState;\n          });\n          // find a way to not have to access idx 0\n          return { cells: updateCell[0], row: row.row };\n        }\n        return row;\n      });\n      return update;\n    });\n    // find a way to not have to access idx 0\n    await setData(updatedData[0]);\n  };\n  return (\n    <div>\n      <SchemaBuilderNav\n        onDelete={() => {}}\n        onTogglePanel={() => setShowJSONPreview(!showJSONPreview)}\n        activeTab={activeTab}\n        setActiveTab={setActiveTab}\n      />\n      <div style={{ height: \"100vh\", display: \"flex\" }}>\n        {activeTab === \"Fields\" && (\n          <>\n            <Table\n              count={15}\n              columnConfig={COLUMNS}\n              data={data}\n              rowHeight={40}\n              onCellsChange={async (e) => await handleCellsChange(e)}\n            />\n            {/* <SelectOptionsPanel\n              cellData={[]}\n              setCellData={() => {}}\n              selectedRow={1}\n            /> */}\n          </>\n        )}\n        {activeTab === \"Global Configs\" && (\n          <GlobalConfigs schema={globalConfigs} setSchema={setGlobalConfigs} />\n        )}\n        {showJSONPreview && (\n          <SchemaPreview\n            schema={formattedSchema}\n            onClosePanel={() => setShowJSONPreview(false)}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n\nconst globalBools = {\n  \"Allow Custom\": \"allowCustom\",\n  \"Allow Invalid Submit\": \"allowInvalidSubmit\",\n  \"Dev Mode\": \"devMode\",\n  \"Display Encoding\": \"displayEncoding\",\n  Managed: \"managed\",\n};\n\nconst GlobalConfigColumns = [\n  {\n    // icon: getInfoIcon(infoHelpers[\"type\"]),\n    value: \"type\",\n  },\n  ...Object.keys(globalBools).map((column) => {\n    return {\n      // icon: getInfoIcon(infoHelpers[column]),\n      value: column,\n      disableEditor: true,\n      disableClipboardEvents: true,\n      renderer: boolRenderer,\n    };\n  }),\n];\n\nconst defaultGlobalArray = new Array(1).fill(\n  Array.from({ length: GlobalConfigColumns.length }, () => {\n    return { value: \"\" };\n  })\n);\n\nconst formattedGlobalArray = defaultGlobalArray.map((row, index) => {\n  return { cells: row, row: index };\n});\n\nconst GlobalConfigs = ({ schema, setSchema }) => {\n  const schemaCopy = schema;\n  delete schemaCopy.fields;\n  // loop through default global array\n  // update the first row with a new array with schema values\n  const updatedGlobalArray = formattedGlobalArray.map((row, idx) => {\n    const updatedRow = row.cells.map((cell, idx) => {\n      const matchedVal = Object.values(schemaCopy)[idx];\n      if (idx !== 0) {\n        return { value: { label: \"\", booleanValue: false } };\n      }\n      return { value: matchedVal };\n    });\n    return updatedRow;\n  });\n  const [globalData, setGlobalData] = useState([\n    { cells: [...updatedGlobalArray[0]], row: 0 },\n  ]);\n  const handleCellChange = async (e) => {\n    const colValue = e.changes[0].patch[0].col;\n    const boolValue = e.changes[0].patch[0].value.booleanValue;\n    const globalDataCopy = globalData[0].cells.map((cell, idx) => {\n      if (colValue === 0 && colValue === idx) {\n        return { value: e.changes[0].patch[0].value };\n      }\n      if (colValue === idx) {\n        return { value: { booleanValue: boolValue } };\n      }\n      return cell;\n    });\n    console.log(\"hello testing\", globalDataCopy);\n    setGlobalData([{ cells: globalDataCopy, row: 0 }]);\n  };\n  useEffect(() => {\n    console.log(\"globalData\", globalData);\n    const globalDataFormatted = {};\n    globalData[0].cells.forEach((cell, idx) => {\n      if (idx === 0) {\n        globalDataFormatted[\"type\"] = cell.value;\n      } else if (idx !== 0) {\n        const keyToUpdate = Object.values(globalBools)[idx - 1];\n        const boolValue = cell.value.booleanValue;\n        globalDataFormatted[keyToUpdate] = boolValue;\n      }\n    });\n    setSchema(globalDataFormatted);\n  }, [globalData]);\n  return (\n    <Table\n      count={1}\n      columnConfig={GlobalConfigColumns}\n      data={globalData}\n      rowHeight={40}\n      onCellsChange={async (e) => await handleCellChange(e)}\n    />\n  );\n};\n","export const titleCase = (source: string) => {\n  return source\n    .replace(/[a-z][A-Z]/g, (value) => `${value[0]} ${value[1]}`)\n    .replace(/[\\W_]+/g, \" \")\n    .replace(/\\w\\S*/g, (value) => {\n      return value.charAt(0).toUpperCase() + value.substr(1);\n    });\n};\n\nexport const reverseTitleCase = (source: string) => {\n  return source.split(\" \").join(\"_\");\n};\n","import { BrowserRouter as Router, Switch, Route } from \"react-router-dom\";\nimport { DesignPlayground } from \"./scenes/DesignPlayground\";\nimport { TableBuilder } from \"./scenes/TableBuilder\";\n\nconst App = () => {\n  return (\n    <Router>\n      <Switch>\n        <Route path=\"/toppings\" component={TableBuilder} />\n        <Route path=\"/\" component={DesignPlayground} />\n      </Switch>\n    </Router>\n  );\n};\n\nexport default App;\n","const reportWebVitals = (onPerfEntry) => {\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 React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport \"./index.css\";\nimport App from \"./App\";\nimport reportWebVitals from \"./reportWebVitals\";\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\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":""}