{"version":3,"sources":["webpack:///./app/javascript/simple-designer/liquifire.js","webpack:///./app/javascript/simple-designer/utilities.js","webpack:///./app/javascript/simple-designer/logo-designer.js","webpack:///./app/javascript/simple-designer/font-select.js","webpack:///./app/javascript/simple-designer/text-designer.js","webpack:///./app/javascript/simple-designer/faq.js","webpack:///./app/javascript/simple-designer/simple-designer.js","webpack:///./app/javascript/simple-designer/blank-markup.js","webpack:///./app/javascript/simple-designer/fonts.js","webpack:///./app/javascript/simple-designer/index.js"],"names":["encodeText","string","replace","match","generateTextPreviewUrl","sku","text","font","mockup_or_art","generateLogoPreviewUrl","image_url","joinLines","lines","filter","Boolean","join","LogoDesigner","onChange","initialMarkup","availableLines","admin","useState","design","imageUrl","setImageUrl","useEffect","designUrl","previewUrl","markup","designer","designType","version","config","className","onSuccess","r","filesUploaded","url","actionOptions","maxSize","transformations","circle","rotate","crop","customRender","onPick","onClick","target","rel","href","fontOptions","name","value","FontSelect","a","check","initialValue","label","useSelect","items","itemToString","i","onSelectedItemChange","c","selectedItem","initialSelectedItem","find","o","isOpen","getToggleButtonProps","getLabelProps","getMenuProps","highlightedIndex","getItemProps","style","position","cx","fontFamily","title","icon","navigator","userAgent","vendor","window","opera","test","substr","bottom","right","maxHeight","hidden","map","option","index","highlighted","selected","key","item","TextDesigner","firstInputRef","useRef","Array","fill","setLines","setFont","setText","debouncedSetText","debounce","current","length","line","ref","type","e","idx","substring","setLine","FAQ","modal","modalBoolean","top","Preview","onClose","isLoading","setIsLoading","previewSize","setPreviewSize","img","Image","onload","src","MobileExit","left","MobileExpand","transform","SimpleDesigner","onSave","outsideSave","size","quickClose","mode","setMode","isSaving","setIsSaving","setDesign","handleChange","designObj","width","split","height","blankMarkup","medium","init","isAdmin","fetch","then","res","blob","uploadDesign","headers","get","webFonts","WebFont","load","classes","events","google","families","launchInModal","element","document","createElement","body","appendChild","close","confirm","ReactDOM","unmountComponentAtNode","render"],"mappings":"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","file":"js/18-50ad7a6a3dd173cb5c48.chunk.js","sourcesContent":["export const encodeText = string =>\n  string\n    .replace(/U(\\w{4})/g, match => `\\\\${match}`)\n    .replace(/\\(/g, \"U0026lp;\")\n    .replace(/\\)/g, \"U0026rp\")\n    .replace(/\\*/g, \"U002A\")\n    .replace(/\\./g, \"U002E\")\n    .replace(/\\+/g, \"U002B\")\n    .replace(/\\[/g, \"%5B\")\n    .replace(/\\]/g, \"%5D\")\n    .replace(/,/g, \"U002C\")\n    .replace(/\"/g, \"U0022\")\n    .replace(/'/g, \"U0027\")\n    .replace(/“/g, \"U201C\")\n    .replace(/”/g, \"U201D\")\n    .replace(/‘/g, \"U2018\")\n    .replace(/’/g, \"U2019\")\n    .replace(/#/g, \"%23\")\n    .replace(/&/g, \"U0026amp;\")\n    .replace(\"\\\\\", \"\")","import { encodeText } from \"./liquifire\"\n\nexport const generateTextPreviewUrl = (sku, text, font, mockup_or_art) =>\n  \"https://personalwine.liquifire.com/personalwine\" +\n  `?set=SKU[${sku}]` +\n  `&set=TYPE[text]` +\n  `&set=FONT[${encodeText(font)}]` +\n  `&set=TEXT[${encodeText(text)}]` +\n  `&call=url[${\n    mockup_or_art === \"art\"\n      ? \"file:text-only-design.chain\"\n      : \"file:simple-designer-preview.chain\"\n  }]` +\n  `&sink=format[png]`\n\nexport const generateLogoPreviewUrl = (sku, image_url, mockup_or_art) =>\n  \"https://personalwine.liquifire.com/personalwine\" +\n  `?set=SKU[${sku}]` +\n  (mockup_or_art === \"art\" ? \"\" : `&set=TYPE[engraving]`) +\n  (mockup_or_art === \"art\"\n    ? `&set=LOGO_URL[${image_url}]`\n    : `&set=DESIGN_URL[${image_url}]`) +\n  `&call=url[${\n    mockup_or_art === \"art\"\n      ? \"file:logo-art.chain\"\n      : \"file:product-preview.chain\"\n  }]` +\n  `&sink=format[png]`\n\nexport const joinLines = lines => {\n  if (lines) {\n    return lines.filter(Boolean).join(\"%5Cn\")\n  }\n}\n","import React, { useEffect, useState } from \"react\"\nimport FileUploader from \"../designer/file-uploader\"\nimport { generateLogoPreviewUrl } from \"./utilities\"\n\nconst LogoDesigner = ({\n  onChange,\n  sku,\n  initialMarkup,\n  availableLines,\n  admin\n}) => {\n  const [imageUrl, setImageUrl] = useState(\n    initialMarkup\n      ? initialMarkup.design.imageUrl\n        ? initialMarkup.design.imageUrl\n        : \"https://cdn.filestackcontent.com/djJbwqaQtmCQ932D7xB1\"\n      : \"https://cdn.filestackcontent.com/djJbwqaQtmCQ932D7xB1\"\n  )\n\n  // Generate the initial design data on mount\n  useEffect(() => {\n    onChange({\n      designUrl: generateLogoPreviewUrl(sku, imageUrl, \"art\"),\n      previewUrl: generateLogoPreviewUrl(sku, imageUrl, \"mockup\"),\n      markup: {\n        designer: \"simple-designer\",\n        designType: \"logo\",\n        version: 1,\n        config: {\n          availableLines\n        },\n        design: {\n          imageUrl\n        }\n      }\n    })\n  }, [imageUrl])\n\n  return (\n    <div className=\"flex-1\">\n      <FileUploader\n        onSuccess={r => setImageUrl(r.filesUploaded[0].url)}\n        actionOptions={{\n          maxSize: 10 * 1024 * 1024, // 10 mb\n          transformations: {\n            circle: true,\n            rotate: true,\n            crop: true\n          }\n        }}\n        customRender={({ onPick }) => (\n          <button\n            className=\"w-full py-4 mt-3 font-bold text-white uppercase bg-blue-600 rounded hover:bg-blue-700 focus:bg-blue-700\"\n            onClick={onPick}\n          >\n            Upload your logo\n          </button>\n        )}\n      />\n      {imageUrl && admin && (\n        <a target=\"_blank\" rel=\"noopener noreferrer\" href={imageUrl}>\n          <button className=\"my-3\">Download</button>\n        </a>\n      )}\n    </div>\n  )\n}\n\nexport default LogoDesigner\n","import React from \"react\"\nimport cx from \"classnames\"\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\"\nimport { useSelect } from \"downshift\"\n\nconst fontOptions = [\n  // Serif\n  { name: \"Alegreya SC\", value: \"AlegreyaSC-Medium\" },\n  { name: \"IM Fell Pica DW SC\", value: \"IMFellPicaDWSC-Medium\" },\n  { name: \"Old Standard TT\", value: \"OldStandardTT-Medium\" },\n  // Script\n  { name: \"Sacramento\", value: \"Sacramento-Regular\" },\n  { name: \"Niconne\", value: \"Niconne-Regular\" },\n  { name: \"Great Vibes\", value: \"GreatVibes-Regular\" },\n  // Sans Serif\n  { name: \"Oswald\", value: \"Oswald-SemiBold\" },\n  { name: \"Raleway\", value: \"Raleway-SemiBold\" },\n  { name: \"Nunito\", value: \"Nunito-SemiBold\" }\n]\n\n// TODO saturate initial value\nconst FontSelect = ({ initialValue, label = \"Select a font:\", onChange }) => {\n  const {\n    isOpen,\n    getToggleButtonProps,\n    getLabelProps,\n    getMenuProps,\n    highlightedIndex,\n    getItemProps,\n    selectedItem\n  } = useSelect({\n    items: fontOptions,\n    itemToString: i => i.name,\n    onSelectedItemChange: c => onChange(c.selectedItem),\n    initialSelectedItem:\n      fontOptions.find(o => o.value === initialValue) || fontOptions[0]\n  })\n\n  const mobileCheck = () => {\n    let check = false\n    ;(function(a) {\n      if (\n        /(android|bb\\d+|meego).+mobile|avantgo|bada\\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(\n          a\n        ) ||\n        /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\\-(n|u)|c55\\/|capi|ccwa|cdm\\-|cell|chtm|cldc|cmd\\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\\-s|devi|dica|dmob|do(c|p)o|ds(12|\\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\\-|_)|g1 u|g560|gene|gf\\-5|g\\-mo|go(\\.w|od)|gr(ad|un)|haie|hcit|hd\\-(m|p|t)|hei\\-|hi(pt|ta)|hp( i|ip)|hs\\-c|ht(c(\\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\\-(20|go|ma)|i230|iac( |\\-|\\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\\/)|klon|kpt |kwc\\-|kyo(c|k)|le(no|xi)|lg( g|\\/(k|l|u)|50|54|\\-[a-w])|libw|lynx|m1\\-w|m3ga|m50\\/|ma(te|ui|xo)|mc(01|21|ca)|m\\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\\-2|po(ck|rt|se)|prox|psio|pt\\-g|qa\\-a|qc(07|12|21|32|60|\\-[2-7]|i\\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\\-|oo|p\\-)|sdk\\/|se(c(\\-|0|1)|47|mc|nd|ri)|sgh\\-|shar|sie(\\-|m)|sk\\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\\-|v\\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\\-|tdg\\-|tel(i|m)|tim\\-|t\\-mo|to(pl|sh)|ts(70|m\\-|m3|m5)|tx\\-9|up(\\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\\-|your|zeto|zte\\-/i.test(\n          a.substr(0, 4)\n        )\n      )\n        check = true\n    })(navigator.userAgent || navigator.vendor || window.opera)\n    return check\n  }\n\n  return (\n    <div style={{ position: \"relative\" }}>\n      <label className=\"font-bold text-sm\" {...getLabelProps()}>\n        {label}\n      </label>\n      <button\n        {...getToggleButtonProps()}\n        className={cx(\n          \"w-full p-2 rounded text-left flex items-center justify-between surface\",\n          { \"text-blue-700 bg-blue-300\": isOpen }\n        )}\n        style={{\n          fontFamily: selectedItem.name\n        }}\n        title=\"Font\"\n      >\n        <span className=\"truncate\">{selectedItem.name}</span>\n        <FontAwesomeIcon\n          icon={[\"fas\", \"caret-down\"]}\n          className=\"text-gray-600\"\n        />\n      </button>\n      <div\n        style={mobileCheck() === true ? { bottom: \"37px\", right: \"4px\" } : {}}\n        className=\"w-full absolute z-50\"\n      >\n        <div\n          {...getMenuProps()}\n          style={{ maxHeight: \"200px\" }}\n          className={cx(\n            \"m-1 sm:w-56 w-full overflow-y-auto bg-white text-gray-700 shadow-2xl rounded\",\n            { hidden: !isOpen }\n          )}\n        >\n          {fontOptions.map((option, index) => {\n            const highlighted = highlightedIndex === index\n            const selected = selectedItem === option\n\n            return (\n              <button\n                key={`${option.name}-${index}`}\n                {...getItemProps({\n                  item: option,\n                  index\n                })}\n                className={cx(\"w-full block p-2 text-left surface\", {\n                  \"surface-focus\": !selected && highlighted,\n                  \"bg-blue-300\": selected\n                })}\n                style={{ fontFamily: option.name }}\n              >\n                {option.name}\n              </button>\n            )\n          })}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default FontSelect\n","import React, { useEffect, useRef, useState } from \"react\"\nimport debounce from \"lodash/debounce\"\nimport { generateTextPreviewUrl, joinLines } from \"./utilities\"\nimport FontSelect from \"./font-select\"\n\nconst maxChars = 20\n\nconst TextDesigner = ({ onChange, sku, availableLines, initialMarkup }) => {\n  const firstInputRef = useRef()\n  const [lines, setLines] = useState(() =>\n    initialMarkup\n      ? initialMarkup.design.lines\n        ? initialMarkup.design.lines\n        : Array(availableLines).fill(\"\")\n      : Array(availableLines).fill(\"\")\n  )\n\n  const [font, setFont] = useState(\n    initialMarkup\n      ? initialMarkup.design.font\n        ? initialMarkup.design.font\n        : \"Raleway-SemiBold\"\n      : \"Raleway-SemiBold\"\n  )\n  const [text, setText] = useState(joinLines(lines))\n  const setLine = (index, value) =>\n    setLines(\n      lines.map((line, idx) => (index === idx ? value.substring(0, 20) : line))\n    )\n  const debouncedSetText = useRef(debounce(setText, 300)).current\n\n  useEffect(() => {\n    debouncedSetText(joinLines(lines))\n  }, [debouncedSetText, lines])\n\n  useEffect(() => {\n    onChange({\n      designUrl: generateTextPreviewUrl(sku, text, font, \"art\"),\n      previewUrl: generateTextPreviewUrl(sku, text, font, \"mockup\"),\n      markup: {\n        designer: \"simple-designer\",\n        designType: \"text\",\n        version: 1,\n        config: {\n          availableLines\n        },\n        design: {\n          lines,\n          font\n        }\n      }\n    })\n  }, [text, font])\n\n  return (\n    <div className=\"flex-1\">\n      <div className=\"mb-1 text-sm font-bold\">Enter your text below:</div>\n      <div\n        className={`overflow-scroll ${lines.length > 2 &&\n          \"show_scroll max_text_box_height\"}`}\n      >\n        {lines.map((line, index) => (\n          <div key={index} className=\"sm:mb-1\">\n            <input\n              ref={index == 0 ? firstInputRef : null}\n              type=\"text\"\n              value={line}\n              onChange={e => setLine(index, e.target.value)}\n              className=\"block w-full py-1 border-b-2 focus:border-blue-600 focus:outline-none\"\n            />\n            <div className=\"px-2 mt-px text-sm text-right text-gray-700\">\n              {line.length} / {maxChars}\n            </div>\n          </div>\n        ))}\n      </div>\n      <FontSelect\n        initialValue={font}\n        onChange={({ value }) => setFont(value)}\n      />\n    </div>\n  )\n}\n\nexport default TextDesigner\n","import React, { useEffect, useState } from \"react\"\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\"\n\nconst FAQ = ({}) => {\n  const [modal, modalBoolean] = useState(false)\n\n  return (\n    <div>\n      <FontAwesomeIcon\n        icon={modal ? [\"far\", \"times-circle\"] : [\"far\", \"question-circle\"]}\n        className=\"text-gray-600 absolute z-30\"\n        style={{ top: \"5px\", right: \"5px\" }}\n        onClick={() => modalBoolean(!modal)}\n      />\n      {modal && (\n        <div className=\"sm:absolute fixed inset-0 bg-gray-200 overflow-scroll text-left z-20 pt-1 sm:px-4 px-1\">\n          <h1 className=\"text-red-700 font-bold text-center\">FAQ's</h1>\n          <div className=\"flex flex-col\">\n            <div className=\"sm:my-4 my-2\">\n              <div className=\"font-semibold\">\n                What color will my engraving be?\n              </div>\n              <div className=\"ml-2\">\n                Engravings will be painted in either gold or silver depending on\n                the bottle you choose. The virtual proof will show the actual\n                color.\n              </div>\n            </div>\n            <div className=\"sm:my-4 my-2\">\n              <div className=\"font-semibold\">\n                How many lines of text are allowed?\n              </div>\n              <div className=\"ml-2\">\n                There are anywhere from 1 to 4 lines of text allowed depending\n                on the engravable area of each bottle.\n              </div>\n            </div>\n            <div className=\"sm:my-4 my-2\">\n              <div className=\"font-semibold\">\n                Where will the engraving be on the bottle?\n              </div>\n              <div className=\"ml-2\">\n                Engravable space varies depending on the bottle. All products\n                show what side customization will be on.\n              </div>\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport default FAQ\n","import React, { useEffect, useState } from \"react\"\nimport cx from \"classnames\"\nimport { LoadingContainer } from \"../components/spinner\"\nimport { uploadDesign } from \"../designer/save-to-s3\"\nimport LogoDesigner from \"./logo-designer\"\nimport TextDesigner from \"./text-designer\"\nimport Faq from \"./faq\"\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\"\nimport { blankMarkup } from \"./blank-markup\"\n\nconst SimpleDesigner = ({\n  onSave,\n  outsideSave,\n  sku,\n  availableLines,\n  initialMarkup,\n  admin,\n  onClose,\n  size,\n  quickClose\n}) => {\n  const [mode, setMode] = useState(\n    initialMarkup ? initialMarkup.designType : \"text\"\n  )\n  const [isSaving, setIsSaving] = useState(false)\n  const [design, setDesign] = useState({\n    previewUrl: null,\n    designUrl: null,\n    markup: null\n  })\n\n  // design shoud look like { previewUrl, designUrl, markup }\n  const handleChange = design => setDesign(design)\n  const handleDone = () => {\n    setIsSaving(true)\n\n    // Use fetch to download the image data and save it to S3\n    fetch(design.designUrl)\n      .then(res =>\n        res\n          .blob()\n          .then(blob => uploadDesign(blob, res.headers.get(\"content-type\")))\n      )\n      .then(url => {\n        // I would love to rename this to designUrl to be clear between\n        // our different urls.\n        onSave({ url, markup: design.markup })\n      })\n  }\n\n  const initFull = () => {\n    const markup = blankMarkup(size)\n    let designObj = {\n      markup,\n      size,\n      medium: \"engraving\"\n    }\n    quickClose()\n    designer.init({\n      design: designObj,\n      onSave: outsideSave,\n      isAdmin: true,\n      sku\n    })\n  }\n\n  return (\n    <div className=\"font-sans bg-gray-200 simple-designer\">\n      <LoadingContainer\n        isLoading={isSaving}\n        label=\"Saving\"\n        className=\"flex flex-col h-full md:flex-row-reverse\"\n      >\n        <div className=\"flex-1 min-h-0\">\n          <Preview url={design.previewUrl} onClose={onClose} />\n        </div>\n        <div className=\"flex flex-col flex-none p-2 bg-white shadow space-y-1 md:w-64\">\n          {admin && (\n            <div className=\"flex-none\">\n              <button className=\"w-full my-2\" onClick={initFull}>\n                Switch To Full Designer\n              </button>\n            </div>\n          )}\n          <div className=\"flex-none\">\n            <div className=\"mb-1 text-sm font-bold\">\n              Create your design with text or a logo:\n            </div>\n            <div className=\"flex\">\n              <button\n                className={cx(\n                  \"flex-1 px-4 py-2 font-bold rounded-l text-white\",\n                  mode === \"text\"\n                    ? \"bg-blue-600\"\n                    : \"bg-gray-500 hover:bg-blue-600\"\n                )}\n                onClick={() => setMode(\"text\")}\n              >\n                Text\n              </button>\n              <button\n                className={cx(\n                  \"flex-1 px-4 py-2 font-bold rounded-r text-white\",\n                  mode === \"logo\"\n                    ? \"bg-blue-600\"\n                    : \"bg-gray-500 hover:bg-blue-600\"\n                )}\n                onClick={() => setMode(\"logo\")}\n              >\n                Logo\n              </button>\n            </div>\n          </div>\n          <div className=\"flex-1 pt-2\">\n            {mode === \"logo\" && (\n              <LogoDesigner\n                sku={sku}\n                onChange={handleChange}\n                initialMarkup={initialMarkup}\n                availableLines={availableLines}\n                admin={admin}\n              />\n            )}\n            {mode === \"text\" && (\n              <TextDesigner\n                sku={sku}\n                onChange={handleChange}\n                availableLines={availableLines}\n                initialMarkup={initialMarkup}\n              />\n            )}\n          </div>\n          <div className=\"flex-none\">\n            <button\n              onClick={handleDone}\n              className=\"w-full py-3 mt-3 font-bold text-white uppercase bg-blue-600 rounded hover:bg-blue-700 focus:bg-blue-700\"\n            >\n              Done\n            </button>\n          </div>\n        </div>\n      </LoadingContainer>\n    </div>\n  )\n}\n\nconst Preview = ({ url, onClose }) => {\n  const [isLoading, setIsLoading] = useState(false)\n  const [previewSize, setPreviewSize] = useState(false)\n\n  useEffect(() => {\n    setIsLoading(true)\n\n    const img = new Image()\n    img.onload = () => setIsLoading(false)\n    img.src = url\n\n    return () => {\n      img.src = \"\" // cancels the image download\n      img.onload = null\n    }\n  }, [url])\n\n  const expandMobilePreview = () => {\n    setPreviewSize(!previewSize)\n  }\n\n  return (\n    <div\n      className={`w-full h-full p-2 text-center \n        ${!previewSize && \"relative\"} \n        ${previewSize && \"absolute inset-0 bg-gray-200 z-20\"}`}\n    >\n      {!previewSize && (\n        <>\n          <Faq />\n          <MobileExit onClose={onClose} />\n        </>\n      )}\n      <img\n        onClick={expandMobilePreview}\n        src={url}\n        className={`sm:hidden inline h-full max-w-full ${previewSize &&\n          \"pb-10\"}`}\n      />\n      <img\n        src={url}\n        className={`sm:inline hidden h-full max-w-full ${previewSize &&\n          \"pb-10\"}`}\n      />\n      <MobileExpand setPreviewSize={setPreviewSize} previewSize={previewSize} />\n      {isLoading && (\n        <div className=\"absolute inset-x-0 bottom-0 flex justify-center\">\n          <div className=\"px-4 py-1 m-2 font-sans text-xs font-bold text-center text-gray-800 uppercase bg-white rounded shadow opacity-75 sm:text-md sm:py-2\">\n            Generating preview...\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n\nconst MobileExit = ({ onClose }) => {\n  return (\n    <div className=\"sm:hidden block\">\n      <FontAwesomeIcon\n        icon={[\"far\", \"arrow-left\"]}\n        className=\"text-gray-600 absolute z-10\"\n        style={{ top: \"5px\", left: \"5px\" }}\n        onClick={onClose}\n      />\n    </div>\n  )\n}\n\nconst MobileExpand = ({ setPreviewSize, previewSize }) => {\n  if (previewSize) {\n    return (\n      <div className=\"sm:hidden block\">\n        <button\n          onClick={() => setPreviewSize(!previewSize)}\n          className=\"absolute\"\n          style={{ bottom: \"5px\", left: \"50%\", transform: \"translateX(-50%)\" }}\n        >\n          Back to Designer\n        </button>\n      </div>\n    )\n  } else {\n    return (\n      <div className=\"sm:hidden block\">\n        <FontAwesomeIcon\n          icon={[\"far\", \"expand\"]}\n          className=\"text-gray-600 absolute z-20\"\n          style={{ bottom: \"5px\", right: \"5px\" }}\n          onClick={() => setPreviewSize(!previewSize)}\n        />\n      </div>\n    )\n  }\n}\n\nexport default SimpleDesigner\n","export const blankMarkup = (size) => {\n  let width = size.split(\":\")[0]\n  let height = size.split(\":\")[1]\n  return (\n    `{\"objects\":[],\"background\":\"white\",\"aspect\":\"${width}:${height}\",\"risky\":false,\"version\":\"4.0.16\",\"labelWidth\":${width},\"labelHeight\":${height}}`\n  )\n}","import WebFont from \"webfontloader\"\n\nexport const webFonts = [\n  \"Alegreya SC\",\n  \"Great Vibes\",\n  \"IM Fell DW Pica SC\",\n  \"Niconne\",\n  \"Nunito\",\n  \"Old Standard TT\",\n  \"Sacramento\",\n  \"Oswald\"\n]\n\nexport const systemFonts = [\"Arial\", \"Helvetica\", \"Times New Roman\"]\n\nexport const fonts = [...webFonts, ...systemFonts]\n\nexport const loadFonts = () =>\n  WebFont.load({\n    classes: false,\n    events: false,\n    google: { families: webFonts }\n  })\n","import ReactDOM from \"react-dom\"\nimport React from \"react\"\nimport Modal from \"../components/modal\"\nimport SimpleDesigner from \"./simple-designer\"\nimport \"../styles/styles\"\nimport \"./simple-designer.scss\"\nimport \"../designer/icons\"\nimport { loadFonts } from \"./fonts\"\n\nloadFonts()\n\nconst closePrompt =\n  \"Are you sure you want to leave the designer? Any unsaved progress will be lost.\"\n\nexport const launchInModal = ({\n  lines,\n  sku = \"LIQ-SCOT-GLENLIVET-18YR\",\n  onSave,\n  markup = null,\n  admin = false,\n  size = null\n}) => {\n  const element = document.createElement(\"div\")\n  document.body.appendChild(element)\n\n  const close = () => {\n    if (window.confirm(closePrompt)) {\n      ReactDOM.unmountComponentAtNode(element)\n    }\n  }\n\n  const wrappedOnSave = ({ markup, url }) => {\n    ReactDOM.unmountComponentAtNode(element)\n    onSave(markup, url)\n  }\n\n  const quickClose = () => {\n    ReactDOM.unmountComponentAtNode(element)\n  }\n\n  ReactDOM.render(\n    <Modal size=\"md\" onClose={close}>\n      <SimpleDesigner\n        onClose={close}\n        quickClose={quickClose}\n        onSave={wrappedOnSave}\n        outsideSave={onSave}\n        sku={sku}\n        availableLines={lines}\n        initialMarkup={markup}\n        admin={admin}\n        size={size}\n      />\n    </Modal>,\n    element\n  )\n}\n"],"sourceRoot":""}