@drivy/cobalt 0.16.1 → 0.16.2

package/components/ModalOpenerButton/index.js

@@ -1,21 +1,22 @@
-import { __rest, __read, __assign } from '../../_virtual/_tslib.js';
 import React, { useState } from 'react';
 import { Button } from '../Button/index.js';
 import Modal from '../Modal/index.js';
 
-var ModalOpenerButton = function (_a) {
-    var label = _a.label, children = _a.children, buttonProps = __rest(_a, ["label", "children"]);
-    var _b = __read(useState(false), 2), showModal = _b[0], setShowModal = _b[1];
-    var open = function () { return setShowModal(true); };
-    var close = function () { return setShowModal(false); };
-    var renderedModal = children({ close: close });
-    var modalProps = __assign(__assign({}, renderedModal.props), { isOpen: showModal });
+const ModalOpenerButton = ({ label, children, ...buttonProps }) => {
+    const [showModal, setShowModal] = useState(false);
+    const open = () => setShowModal(true);
+    const close = () => setShowModal(false);
+    const renderedModal = children({ close });
+    const modalProps = {
+        ...renderedModal.props,
+        isOpen: showModal,
+    };
     return (React.createElement(React.Fragment, null,
-        React.createElement(Button, __assign({}, buttonProps, { onClick: open }), label),
-        React.createElement(Modal, __assign({}, modalProps))));
+        React.createElement(Button, { ...buttonProps, onClick: open }, label),
+        React.createElement(Modal, { ...modalProps })));
 };
 /** For API only, render nothing */
-var ModalAPI = function (_props) { return null; };
+const ModalAPI = (_props) => null;
 ModalOpenerButton.Modal = ModalAPI;
 
 export { ModalOpenerButton as default };

package/components/ModalOpenerButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/ModalOpenerButton/index.tsx"],"sourcesContent":["import React, { useState } from \"react\"\n\nimport { Button, ButtonPropsType } from \"../Button\"\nimport Modal, { ModalPropsType } from \"../Modal\"\n\ntype ModalOpenerButtonType = {\n  label: React.ReactNode\n  children: ({ close }: { close: () => void }) => JSX.Element\n} & Omit<ButtonPropsType, \"children\">\n\nconst ModalOpenerButton = ({\n  label,\n  children,\n  ...buttonProps\n}: ModalOpenerButtonType) => {\n  const [showModal, setShowModal] = useState(false)\n  const open = () => setShowModal(true)\n  const close = () => setShowModal(false)\n\n  const renderedModal = children({ close })\n  const modalProps = {\n    ...renderedModal.props,\n    isOpen: showModal,\n  }\n\n  return (\n    <>\n      <Button {...buttonProps} onClick={open}>\n        {label}\n      </Button>\n      <Modal {...modalProps} />\n    </>\n  )\n}\n\n/** For API only, render nothing */\nconst ModalAPI = (_props: Omit<ModalPropsType, \"isOpen\">) => null\nModalOpenerButton.Modal = ModalAPI\n\nexport default ModalOpenerButton\n"],"names":[],"mappings":";;;;;AAUM,IAAA,iBAAiB,GAAG,UAAC,EAIH,EAAA;IAHtB,IAAA,KAAK,WAAA,EACL,QAAQ,cAAA,EACL,WAAW,GAHW,MAAA,CAAA,EAAA,EAAA,CAAA,OAAA,EAAA,UAAA,CAI1B,CADe,CAAA;AAER,IAAA,IAAA,EAAA,GAAA,MAAA,CAA4B,QAAQ,CAAC,KAAK,CAAC,EAAA,CAAA,CAAA,EAA1C,SAAS,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,YAAY,QAAmB,CAAA;IACjD,IAAM,IAAI,GAAG,YAAA,EAAM,OAAA,YAAY,CAAC,IAAI,CAAC,CAAlB,EAAkB,CAAA;IACrC,IAAM,KAAK,GAAG,YAAA,EAAM,OAAA,YAAY,CAAC,KAAK,CAAC,CAAnB,EAAmB,CAAA;IAEvC,IAAM,aAAa,GAAG,QAAQ,CAAC,EAAE,KAAK,EAAA,KAAA,EAAE,CAAC,CAAA;IACzC,IAAM,UAAU,GACX,QAAA,CAAA,QAAA,CAAA,EAAA,EAAA,aAAa,CAAC,KAAK,KACtB,MAAM,EAAE,SAAS,EAAA,CAClB,CAAA;AAED,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;QACE,KAAC,CAAA,aAAA,CAAA,MAAM,eAAK,WAAW,EAAA,EAAE,OAAO,EAAE,IAAI,EACnC,CAAA,EAAA,KAAK,CACC;AACT,QAAA,KAAA,CAAA,aAAA,CAAC,KAAK,EAAK,QAAA,CAAA,EAAA,EAAA,UAAU,CAAI,CAAA,CACxB,EACJ;AACH,EAAC;AAED;AACA,IAAM,QAAQ,GAAG,UAAC,MAAsC,IAAK,OAAA,IAAI,CAAJ,EAAI,CAAA;AACjE,iBAAiB,CAAC,KAAK,GAAG,QAAQ;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/ModalOpenerButton/index.tsx"],"sourcesContent":["import React, { useState } from \"react\"\n\nimport { Button, ButtonPropsType } from \"../Button\"\nimport Modal, { ModalPropsType } from \"../Modal\"\n\ntype ModalOpenerButtonType = {\n  label: React.ReactNode\n  children: ({ close }: { close: () => void }) => JSX.Element\n} & Omit<ButtonPropsType, \"children\">\n\nconst ModalOpenerButton = ({\n  label,\n  children,\n  ...buttonProps\n}: ModalOpenerButtonType) => {\n  const [showModal, setShowModal] = useState(false)\n  const open = () => setShowModal(true)\n  const close = () => setShowModal(false)\n\n  const renderedModal = children({ close })\n  const modalProps = {\n    ...renderedModal.props,\n    isOpen: showModal,\n  }\n\n  return (\n    <>\n      <Button {...buttonProps} onClick={open}>\n        {label}\n      </Button>\n      <Modal {...modalProps} />\n    </>\n  )\n}\n\n/** For API only, render nothing */\nconst ModalAPI = (_props: Omit<ModalPropsType, \"isOpen\">) => null\nModalOpenerButton.Modal = ModalAPI\n\nexport default ModalOpenerButton\n"],"names":[],"mappings":";;;;AAUA,MAAM,iBAAiB,GAAG,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,GAAG,WAAW,EACQ,KAAI;IAC1B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACjD,MAAM,IAAI,GAAG,MAAM,YAAY,CAAC,IAAI,CAAC,CAAA;IACrC,MAAM,KAAK,GAAG,MAAM,YAAY,CAAC,KAAK,CAAC,CAAA;IAEvC,MAAM,aAAa,GAAG,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAA;AACzC,IAAA,MAAM,UAAU,GAAG;QACjB,GAAG,aAAa,CAAC,KAAK;AACtB,QAAA,MAAM,EAAE,SAAS;KAClB,CAAA;AAED,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;QACE,KAAC,CAAA,aAAA,CAAA,MAAM,OAAK,WAAW,EAAE,OAAO,EAAE,IAAI,EACnC,EAAA,KAAK,CACC;AACT,QAAA,KAAA,CAAA,aAAA,CAAC,KAAK,EAAK,EAAA,GAAA,UAAU,EAAI,CAAA,CACxB,EACJ;AACH,EAAC;AAED;AACA,MAAM,QAAQ,GAAG,CAAC,MAAsC,KAAK,IAAI,CAAA;AACjE,iBAAiB,CAAC,KAAK,GAAG,QAAQ;;;;"}

package/components/Note/index.js

@@ -1,12 +1,9 @@
 import React from 'react';
 import cx from 'classnames';
 
-var Note = function (_a) {
-    var children = _a.children, _b = _a.fullWidth, fullWidth = _b === void 0 ? false : _b, className = _a.className;
-    return (React.createElement("div", { className: cx("cobalt-Note", className, {
-            "cobalt-Note--fullWidth": fullWidth,
-        }) }, children));
-};
+const Note = ({ children, fullWidth = false, className }) => (React.createElement("div", { className: cx("cobalt-Note", className, {
+        "cobalt-Note--fullWidth": fullWidth,
+    }) }, children));
 
 export { Note, Note as default };
 //# sourceMappingURL=index.js.map

package/components/Note/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Note/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\n\nexport interface NoteProps {\n  children: React.ReactNode\n  /**\n   * will fill available width\n   * @default false\n   */\n  fullWidth?: boolean\n  className?: string\n}\n\nexport const Note = ({ children, fullWidth = false, className }: NoteProps) => (\n  <div\n    className={cx(\"cobalt-Note\", className, {\n      \"cobalt-Note--fullWidth\": fullWidth,\n    })}\n  >\n    {children}\n  </div>\n)\n\nexport default Note\n"],"names":[],"mappings":";;;AAaO,IAAM,IAAI,GAAG,UAAC,EAAqD,EAAA;QAAnD,QAAQ,GAAA,EAAA,CAAA,QAAA,EAAE,EAAA,GAAA,EAAA,CAAA,SAAiB,EAAjB,SAAS,mBAAG,KAAK,GAAA,EAAA,EAAE,SAAS,GAAA,EAAA,CAAA,SAAA,CAAA;IAAkB,QAC7E,6BACE,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE;AACtC,YAAA,wBAAwB,EAAE,SAAS;SACpC,CAAC,EAAA,EAED,QAAQ,CACL,EACP;AAR8E;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Note/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\n\nexport interface NoteProps {\n  children: React.ReactNode\n  /**\n   * will fill available width\n   * @default false\n   */\n  fullWidth?: boolean\n  className?: string\n}\n\nexport const Note = ({ children, fullWidth = false, className }: NoteProps) => (\n  <div\n    className={cx(\"cobalt-Note\", className, {\n      \"cobalt-Note--fullWidth\": fullWidth,\n    })}\n  >\n    {children}\n  </div>\n)\n\nexport default Note\n"],"names":[],"mappings":";;;AAaa,MAAA,IAAI,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,GAAG,KAAK,EAAE,SAAS,EAAa,MACxE,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE;AACtC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CAAC,EAED,EAAA,QAAQ,CACL;;;;"}

package/components/PhotoDropzone/index.js

@@ -1,4 +1,3 @@
-import { __read, __awaiter, __generator } from '../../_virtual/_tslib.js';
 import VisuallyHidden from '@reach/visually-hidden';
 import React, { useRef, useState } from 'react';
 import cx from 'classnames';
@@ -10,46 +9,43 @@ import BinIcon from '../Icon/__generated__/BinIcon.js';
 import PlusIcon from '../Icon/__generated__/PlusIcon.js';
 import LoadingIcon from '../Icon/__generated__/LoadingIcon.js';
 
-var ACCEPTED_MAX_SIZE_MB = 10;
-var ACCEPTED_PHOTOS_TYPES = ["jpg", "jpeg", "png", "gif"];
-var ERROR_DISPLAY_TIME = 6000;
-var ACCEPTED_TYPES_LOCALE_STRING = ACCEPTED_PHOTOS_TYPES.join(", ");
-var preventEventDefaults = function (e) {
+const ACCEPTED_MAX_SIZE_MB = 10;
+const ACCEPTED_PHOTOS_TYPES = ["jpg", "jpeg", "png", "gif"];
+const ERROR_DISPLAY_TIME = 6000;
+const ACCEPTED_TYPES_LOCALE_STRING = ACCEPTED_PHOTOS_TYPES.join(", ");
+const preventEventDefaults = (e) => {
     e.preventDefault && e.preventDefault();
     e.stopPropagation && e.stopPropagation();
 };
-var isEnterOrSpaceKey = function (event) {
-    return event.key === "Enter" || event.key === " ";
-};
-var PhotoDropzone = function (_a) {
-    var className = _a.className, description = _a.description, deletePopoverContent = _a.deletePopoverContent, errorContent = _a.errorContent, onDropped = _a.onDropped, onPhotoDelete = _a.onPhotoDelete, _b = _a.initialImageUrl, initialImageUrl = _b === void 0 ? "" : _b;
-    var fileInputRef = useRef(null);
-    var deleteButtonRef = useRef(null);
-    var _c = __read(useState(false), 2), isDragging = _c[0], setIsDragging = _c[1];
-    var _d = __read(useState(false), 2), isLoading = _d[0], setIsLoading = _d[1];
-    var _e = __read(useState(false), 2), isErrored = _e[0], setIsErrored = _e[1];
-    var _f = __read(useState(initialImageUrl), 2), imagePreviewUrl = _f[0], setImagePreviewUrl = _f[1];
-    var _g = __read(useState(false), 2), displayDeletion = _g[0], setDisplayDeletion = _g[1];
-    var _h = __read(useState(false), 2), showDeletePopover = _h[0], setShowDeletePopover = _h[1];
-    var openDeletePopover = function (event) {
+const isEnterOrSpaceKey = (event) => event.key === "Enter" || event.key === " ";
+const PhotoDropzone = ({ className, description, deletePopoverContent, errorContent, onDropped, onPhotoDelete, initialImageUrl = "", }) => {
+    const fileInputRef = useRef(null);
+    const deleteButtonRef = useRef(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isErrored, setIsErrored] = useState(false);
+    const [imagePreviewUrl, setImagePreviewUrl] = useState(initialImageUrl);
+    const [displayDeletion, setDisplayDeletion] = useState(false);
+    const [showDeletePopover, setShowDeletePopover] = useState(false);
+    const openDeletePopover = (event) => {
         event && preventEventDefaults(event);
         setShowDeletePopover(true);
     };
-    var closeDeletePopover = function (event) {
+    const closeDeletePopover = (event) => {
         event && preventEventDefaults(event);
         setShowDeletePopover(false);
     };
-    var onDropzoneMouseEnter = function (event) {
+    const onDropzoneMouseEnter = (event) => {
         event && preventEventDefaults(event);
         if (imagePreviewUrl)
             setDisplayDeletion(true);
     };
-    var onDropzoneMouseLeave = function (event) {
+    const onDropzoneMouseLeave = (event) => {
         event && preventEventDefaults(event);
         if (displayDeletion && !showDeletePopover)
             setDisplayDeletion(false);
     };
-    var onDropzoneClick = function (event) {
+    const onDropzoneClick = (event) => {
         var _a;
         event && preventEventDefaults(event);
         if (isLoading)
@@ -63,91 +59,80 @@ var PhotoDropzone = function (_a) {
         }
         (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
     };
-    var onDropzoneKey = function (event) {
+    const onDropzoneKey = (event) => {
         if (showDeletePopover)
             return;
         if (isEnterOrSpaceKey(event)) {
             onDropzoneClick();
         }
     };
-    var onDeleteKey = function (event) {
+    const onDeleteKey = (event) => {
         if (isEnterOrSpaceKey(event)) {
             openDeletePopover(event);
         }
     };
-    var onDelete = function () {
+    const onDelete = () => {
         if (fileInputRef.current)
             fileInputRef.current.value = "";
         closeDeletePopover();
         setImagePreviewUrl("");
         onPhotoDelete && onPhotoDelete();
     };
-    var onDragEnter = function (event) {
+    const onDragEnter = (event) => {
         preventEventDefaults(event);
         if (isErrored)
             setIsErrored(false);
         !imagePreviewUrl && setIsDragging(true);
     };
-    var onDragLeave = function (event) {
+    const onDragLeave = (event) => {
         preventEventDefaults(event);
         setIsDragging(false);
     };
-    var processFile = function (fileToProcess) { return __awaiter(void 0, void 0, void 0, function () {
-        var isValidFile, imageSrc;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    setIsDragging(false);
-                    setIsErrored(false);
-                    setIsLoading(true);
-                    return [4 /*yield*/, validateFile(fileToProcess, function (fileToValidate, extension) {
-                            var maxFileSize = ACCEPTED_MAX_SIZE_MB * 1000 * 1000;
-                            var acceptedFileTypes = ACCEPTED_PHOTOS_TYPES;
-                            if (fileToValidate.size > maxFileSize) {
-                                return false;
-                            }
-                            else if (!extension || !acceptedFileTypes.includes(extension)) {
-                                return false;
-                            }
-                            else {
-                                return true;
-                            }
-                        })];
-                case 1:
-                    isValidFile = _a.sent();
-                    if (!isValidFile) return [3 /*break*/, 3];
-                    imageSrc = URL.createObjectURL(fileToProcess);
-                    setImagePreviewUrl(imageSrc);
-                    return [4 /*yield*/, onDropped(fileToProcess)];
-                case 2:
-                    _a.sent();
-                    setIsLoading(false);
-                    return [3 /*break*/, 4];
-                case 3:
-                    setIsLoading(false);
-                    setIsErrored(true);
-                    setTimeout(function () {
-                        setIsErrored(false);
-                    }, ERROR_DISPLAY_TIME);
-                    _a.label = 4;
-                case 4: return [2 /*return*/];
+    const processFile = async (fileToProcess) => {
+        setIsDragging(false);
+        setIsErrored(false);
+        setIsLoading(true);
+        const isValidFile = await validateFile(fileToProcess, (fileToValidate, extension) => {
+            const maxFileSize = ACCEPTED_MAX_SIZE_MB * 1000 * 1000;
+            const acceptedFileTypes = ACCEPTED_PHOTOS_TYPES;
+            if (fileToValidate.size > maxFileSize) {
+                return false;
+            }
+            else if (!extension || !acceptedFileTypes.includes(extension)) {
+                return false;
+            }
+            else {
+                return true;
             }
         });
-    }); };
-    var onFileInputChanged = function (event) {
+        if (isValidFile) {
+            const imageSrc = URL.createObjectURL(fileToProcess);
+            setImagePreviewUrl(imageSrc);
+            await onDropped(fileToProcess);
+            setIsLoading(false);
+        }
+        else {
+            setIsLoading(false);
+            setIsErrored(true);
+            setTimeout(() => {
+                setIsErrored(false);
+            }, ERROR_DISPLAY_TIME);
+        }
+    };
+    const onFileInputChanged = (event) => {
         var _a;
         if ((_a = event.target.files) === null || _a === void 0 ? void 0 : _a.length) {
             processFile(event.target.files[0]);
         }
     };
-    var onDrop = function (event) {
+    const onDrop = (event) => {
         var _a, _b;
         preventEventDefaults(event);
         if (((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b.length) && !imagePreviewUrl) {
             processFile(event.dataTransfer.files[0]);
         }
     };
-    var onDeleteButtonClick = showDeletePopover
+    const onDeleteButtonClick = showDeletePopover
         ? closeDeletePopover
         : openDeletePopover;
     return (React.createElement("div", { tabIndex: 0, className: cx("cobalt-photo-dropzone", className, {
@@ -182,7 +167,7 @@ var PhotoDropzone = function (_a) {
                 React.createElement("p", null, description),
                 React.createElement(PlusIcon, null)))),
         React.createElement(VisuallyHidden, null,
-            React.createElement("input", { ref: fileInputRef, type: "file", onChange: onFileInputChanged, accept: ACCEPTED_PHOTOS_TYPES.map(function (ext) { return ".".concat(ext); }).join(","), multiple: false }))));
+            React.createElement("input", { ref: fileInputRef, type: "file", onChange: onFileInputChanged, accept: ACCEPTED_PHOTOS_TYPES.map((ext) => `.${ext}`).join(","), multiple: false }))));
 };
 
 export { PhotoDropzone as default };

package/components/PhotoDropzone/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/PhotoDropzone/index.tsx"],"sourcesContent":["import VisuallyHidden from \"@reach/visually-hidden\"\nimport React, {\n  useState,\n  DragEvent as ReactDragEvent,\n  useRef,\n  TouchEvent as ReactTouchEvent,\n  ChangeEvent as ReactChangeEvent,\n  MouseEvent as ReactMouseEvent,\n  KeyboardEvent as ReactKeyboardEvent,\n  ReactNode,\n} from \"react\"\nimport cx from \"classnames\"\nimport {\n  PlusIcon,\n  BinIcon,\n  LoadingIcon,\n  ContextualWarningCircleFilledIcon,\n} from \"../Icon\"\nimport { validateFile } from \"../utils/validateFile\"\nimport Popover from \"../Popover\"\n\nconst ACCEPTED_MAX_SIZE_MB = 10\nconst ACCEPTED_PHOTOS_TYPES = [\"jpg\", \"jpeg\", \"png\", \"gif\"]\nconst ERROR_DISPLAY_TIME = 6000\nconst ACCEPTED_TYPES_LOCALE_STRING = ACCEPTED_PHOTOS_TYPES.join(\", \")\n\nexport type PhotoDropzonePropsType = {\n  className?: string\n  description: string\n  deletePopoverContent: (onDelete: () => void, close: () => void) => ReactNode\n  errorContent: (acceptedTypes: string, maxFileSize: number) => ReactNode\n  onDropped: (file: File) => Promise<void> | void\n  onPhotoDelete?: () => void\n  initialImageUrl?: string\n}\n\nconst preventEventDefaults = (\n  e: ReactDragEvent | ReactMouseEvent | ReactKeyboardEvent | ReactTouchEvent\n) => {\n  e.preventDefault && e.preventDefault()\n  e.stopPropagation && e.stopPropagation()\n}\n\nconst isEnterOrSpaceKey = (event: ReactKeyboardEvent) =>\n  event.key === \"Enter\" || event.key === \" \"\n\nconst PhotoDropzone = ({\n  className,\n  description,\n  deletePopoverContent,\n  errorContent,\n  onDropped,\n  onPhotoDelete,\n  initialImageUrl = \"\",\n}: PhotoDropzonePropsType) => {\n  const fileInputRef = useRef<HTMLInputElement>(null)\n  const deleteButtonRef = useRef<HTMLButtonElement>(null)\n  const [isDragging, setIsDragging] = useState(false)\n  const [isLoading, setIsLoading] = useState(false)\n  const [isErrored, setIsErrored] = useState(false)\n  const [imagePreviewUrl, setImagePreviewUrl] = useState(initialImageUrl)\n  const [displayDeletion, setDisplayDeletion] = useState(false)\n  const [showDeletePopover, setShowDeletePopover] = useState(false)\n\n  const openDeletePopover = (\n    event?: ReactMouseEvent | ReactKeyboardEvent | ReactTouchEvent\n  ) => {\n    event && preventEventDefaults(event)\n    setShowDeletePopover(true)\n  }\n  const closeDeletePopover = (event?: ReactMouseEvent | ReactTouchEvent) => {\n    event && preventEventDefaults(event)\n    setShowDeletePopover(false)\n  }\n\n  const onDropzoneMouseEnter = (event?: ReactMouseEvent) => {\n    event && preventEventDefaults(event)\n    if (imagePreviewUrl) setDisplayDeletion(true)\n  }\n\n  const onDropzoneMouseLeave = (event?: ReactMouseEvent) => {\n    event && preventEventDefaults(event)\n    if (displayDeletion && !showDeletePopover) setDisplayDeletion(false)\n  }\n\n  const onDropzoneClick = (event?: ReactMouseEvent | ReactTouchEvent) => {\n    event && preventEventDefaults(event)\n    if (isLoading) return\n    if (isErrored) setIsErrored(false)\n    if (imagePreviewUrl) {\n      if (showDeletePopover) closeDeletePopover()\n      return setDisplayDeletion(!displayDeletion)\n    }\n    fileInputRef.current?.click()\n  }\n\n  const onDropzoneKey = (event: ReactKeyboardEvent) => {\n    if (showDeletePopover) return\n    if (isEnterOrSpaceKey(event)) {\n      onDropzoneClick()\n    }\n  }\n\n  const onDeleteKey = (event: ReactKeyboardEvent) => {\n    if (isEnterOrSpaceKey(event)) {\n      openDeletePopover(event)\n    }\n  }\n\n  const onDelete = () => {\n    if (fileInputRef.current) fileInputRef.current.value = \"\"\n    closeDeletePopover()\n    setImagePreviewUrl(\"\")\n    onPhotoDelete && onPhotoDelete()\n  }\n\n  const onDragEnter = (event: ReactDragEvent) => {\n    preventEventDefaults(event)\n    if (isErrored) setIsErrored(false)\n    !imagePreviewUrl && setIsDragging(true)\n  }\n\n  const onDragLeave = (event: ReactDragEvent) => {\n    preventEventDefaults(event)\n    setIsDragging(false)\n  }\n\n  const processFile = async (fileToProcess: File) => {\n    setIsDragging(false)\n    setIsErrored(false)\n    setIsLoading(true)\n\n    const isValidFile = await validateFile(\n      fileToProcess,\n      (fileToValidate, extension) => {\n        const maxFileSize = ACCEPTED_MAX_SIZE_MB * 1000 * 1000\n        const acceptedFileTypes = ACCEPTED_PHOTOS_TYPES\n\n        if (fileToValidate.size > maxFileSize) {\n          return false\n        } else if (!extension || !acceptedFileTypes.includes(extension)) {\n          return false\n        } else {\n          return true\n        }\n      }\n    )\n\n    if (isValidFile) {\n      const imageSrc = URL.createObjectURL(fileToProcess)\n      setImagePreviewUrl(imageSrc)\n      await onDropped(fileToProcess)\n      setIsLoading(false)\n    } else {\n      setIsLoading(false)\n      setIsErrored(true)\n      setTimeout(() => {\n        setIsErrored(false)\n      }, ERROR_DISPLAY_TIME)\n    }\n  }\n\n  const onFileInputChanged = (event: ReactChangeEvent<HTMLInputElement>) => {\n    if (event.target.files?.length) {\n      processFile(event.target.files[0])\n    }\n  }\n\n  const onDrop = (event: ReactDragEvent<HTMLDivElement>) => {\n    preventEventDefaults(event)\n    if (event.dataTransfer?.files?.length && !imagePreviewUrl) {\n      processFile(event.dataTransfer.files[0])\n    }\n  }\n\n  const onDeleteButtonClick = showDeletePopover\n    ? closeDeletePopover\n    : openDeletePopover\n\n  return (\n    <div\n      tabIndex={0}\n      className={cx(\"cobalt-photo-dropzone\", className, {\n        \"cobalt-photo-dropzone--filled\": imagePreviewUrl,\n        \"cobalt-photo-dropzone--dragging\": isDragging,\n        \"cobalt-photo-dropzone--loading\": isLoading,\n        \"cobalt-photo-dropzone--errored\": isErrored,\n      })}\n      onMouseEnter={onDropzoneMouseEnter}\n      onMouseLeave={onDropzoneMouseLeave}\n      onDragEnter={onDragEnter}\n      onDragLeave={onDragLeave}\n      // Not on click because we also use mouseEnter listener\n      onMouseUp={onDropzoneClick}\n      onTouchEnd={onDropzoneClick}\n      onKeyUp={onDropzoneKey}\n      onDrop={onDrop}\n      // Need to reset those listeners to avoid default browser behaviour\n      onDragStart={preventEventDefaults}\n      onDragEnd={preventEventDefaults}\n      onDragOver={preventEventDefaults}\n    >\n      {isErrored && (\n        <div className=\"cobalt-photo-dropzone__description\">\n          <ContextualWarningCircleFilledIcon color=\"red\" />\n          {errorContent(ACCEPTED_TYPES_LOCALE_STRING, ACCEPTED_MAX_SIZE_MB)}\n        </div>\n      )}\n      {isLoading && (\n        <div className=\"cobalt-photo-dropzone__description\">\n          <LoadingIcon />\n        </div>\n      )}\n      {!isLoading &&\n        !isErrored &&\n        (imagePreviewUrl ? (\n          <>\n            <img\n              className=\"cobalt-photo-dropzone__preview\"\n              src={imagePreviewUrl}\n            />\n            <div>\n              <button\n                className={cx(\"cobalt-photo-dropzone__delete-button\", {\n                  \"cobalt-photo-dropzone__delete-button--triggered\":\n                    displayDeletion,\n                })}\n                ref={deleteButtonRef}\n                // Must follow the click listeners on the dropzone,\n                // in order to have the correct events bubbling\n                onTouchEnd={onDeleteButtonClick}\n                onMouseUp={onDeleteButtonClick}\n                onKeyUp={onDeleteKey}\n              >\n                <VisuallyHidden>Delete</VisuallyHidden>\n                <BinIcon color=\"indigo\" />\n              </button>\n              <Popover\n                targetRef={deleteButtonRef}\n                isOpen={showDeletePopover}\n                close={closeDeletePopover}\n                placement=\"left-start\"\n                distance={12}\n                bodySpacing={false}\n                arrow\n              >\n                {deletePopoverContent(onDelete, closeDeletePopover)}\n              </Popover>\n            </div>\n          </>\n        ) : (\n          <div className=\"cobalt-photo-dropzone__description cobalt-photo-dropzone__description--strong\">\n            <p>{description}</p>\n            <PlusIcon />\n          </div>\n        ))}\n      <VisuallyHidden>\n        <input\n          ref={fileInputRef}\n          type=\"file\"\n          onChange={onFileInputChanged}\n          accept={ACCEPTED_PHOTOS_TYPES.map((ext) => `.${ext}`).join(\",\")}\n          multiple={false}\n        />\n      </VisuallyHidden>\n    </div>\n  )\n}\n\nexport default PhotoDropzone\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/PhotoDropzone/index.tsx"],"sourcesContent":["import VisuallyHidden from \"@reach/visually-hidden\"\nimport React, {\n  useState,\n  DragEvent as ReactDragEvent,\n  useRef,\n  TouchEvent as ReactTouchEvent,\n  ChangeEvent as ReactChangeEvent,\n  MouseEvent as ReactMouseEvent,\n  KeyboardEvent as ReactKeyboardEvent,\n  ReactNode,\n} from \"react\"\nimport cx from \"classnames\"\nimport {\n  PlusIcon,\n  BinIcon,\n  LoadingIcon,\n  ContextualWarningCircleFilledIcon,\n} from \"../Icon\"\nimport { validateFile } from \"../utils/validateFile\"\nimport Popover from \"../Popover\"\n\nconst ACCEPTED_MAX_SIZE_MB = 10\nconst ACCEPTED_PHOTOS_TYPES = [\"jpg\", \"jpeg\", \"png\", \"gif\"]\nconst ERROR_DISPLAY_TIME = 6000\nconst ACCEPTED_TYPES_LOCALE_STRING = ACCEPTED_PHOTOS_TYPES.join(\", \")\n\nexport type PhotoDropzonePropsType = {\n  className?: string\n  description: string\n  deletePopoverContent: (onDelete: () => void, close: () => void) => ReactNode\n  errorContent: (acceptedTypes: string, maxFileSize: number) => ReactNode\n  onDropped: (file: File) => Promise<void> | void\n  onPhotoDelete?: () => void\n  initialImageUrl?: string\n}\n\nconst preventEventDefaults = (\n  e: ReactDragEvent | ReactMouseEvent | ReactKeyboardEvent | ReactTouchEvent\n) => {\n  e.preventDefault && e.preventDefault()\n  e.stopPropagation && e.stopPropagation()\n}\n\nconst isEnterOrSpaceKey = (event: ReactKeyboardEvent) =>\n  event.key === \"Enter\" || event.key === \" \"\n\nconst PhotoDropzone = ({\n  className,\n  description,\n  deletePopoverContent,\n  errorContent,\n  onDropped,\n  onPhotoDelete,\n  initialImageUrl = \"\",\n}: PhotoDropzonePropsType) => {\n  const fileInputRef = useRef<HTMLInputElement>(null)\n  const deleteButtonRef = useRef<HTMLButtonElement>(null)\n  const [isDragging, setIsDragging] = useState(false)\n  const [isLoading, setIsLoading] = useState(false)\n  const [isErrored, setIsErrored] = useState(false)\n  const [imagePreviewUrl, setImagePreviewUrl] = useState(initialImageUrl)\n  const [displayDeletion, setDisplayDeletion] = useState(false)\n  const [showDeletePopover, setShowDeletePopover] = useState(false)\n\n  const openDeletePopover = (\n    event?: ReactMouseEvent | ReactKeyboardEvent | ReactTouchEvent\n  ) => {\n    event && preventEventDefaults(event)\n    setShowDeletePopover(true)\n  }\n  const closeDeletePopover = (event?: ReactMouseEvent | ReactTouchEvent) => {\n    event && preventEventDefaults(event)\n    setShowDeletePopover(false)\n  }\n\n  const onDropzoneMouseEnter = (event?: ReactMouseEvent) => {\n    event && preventEventDefaults(event)\n    if (imagePreviewUrl) setDisplayDeletion(true)\n  }\n\n  const onDropzoneMouseLeave = (event?: ReactMouseEvent) => {\n    event && preventEventDefaults(event)\n    if (displayDeletion && !showDeletePopover) setDisplayDeletion(false)\n  }\n\n  const onDropzoneClick = (event?: ReactMouseEvent | ReactTouchEvent) => {\n    event && preventEventDefaults(event)\n    if (isLoading) return\n    if (isErrored) setIsErrored(false)\n    if (imagePreviewUrl) {\n      if (showDeletePopover) closeDeletePopover()\n      return setDisplayDeletion(!displayDeletion)\n    }\n    fileInputRef.current?.click()\n  }\n\n  const onDropzoneKey = (event: ReactKeyboardEvent) => {\n    if (showDeletePopover) return\n    if (isEnterOrSpaceKey(event)) {\n      onDropzoneClick()\n    }\n  }\n\n  const onDeleteKey = (event: ReactKeyboardEvent) => {\n    if (isEnterOrSpaceKey(event)) {\n      openDeletePopover(event)\n    }\n  }\n\n  const onDelete = () => {\n    if (fileInputRef.current) fileInputRef.current.value = \"\"\n    closeDeletePopover()\n    setImagePreviewUrl(\"\")\n    onPhotoDelete && onPhotoDelete()\n  }\n\n  const onDragEnter = (event: ReactDragEvent) => {\n    preventEventDefaults(event)\n    if (isErrored) setIsErrored(false)\n    !imagePreviewUrl && setIsDragging(true)\n  }\n\n  const onDragLeave = (event: ReactDragEvent) => {\n    preventEventDefaults(event)\n    setIsDragging(false)\n  }\n\n  const processFile = async (fileToProcess: File) => {\n    setIsDragging(false)\n    setIsErrored(false)\n    setIsLoading(true)\n\n    const isValidFile = await validateFile(\n      fileToProcess,\n      (fileToValidate, extension) => {\n        const maxFileSize = ACCEPTED_MAX_SIZE_MB * 1000 * 1000\n        const acceptedFileTypes = ACCEPTED_PHOTOS_TYPES\n\n        if (fileToValidate.size > maxFileSize) {\n          return false\n        } else if (!extension || !acceptedFileTypes.includes(extension)) {\n          return false\n        } else {\n          return true\n        }\n      }\n    )\n\n    if (isValidFile) {\n      const imageSrc = URL.createObjectURL(fileToProcess)\n      setImagePreviewUrl(imageSrc)\n      await onDropped(fileToProcess)\n      setIsLoading(false)\n    } else {\n      setIsLoading(false)\n      setIsErrored(true)\n      setTimeout(() => {\n        setIsErrored(false)\n      }, ERROR_DISPLAY_TIME)\n    }\n  }\n\n  const onFileInputChanged = (event: ReactChangeEvent<HTMLInputElement>) => {\n    if (event.target.files?.length) {\n      processFile(event.target.files[0])\n    }\n  }\n\n  const onDrop = (event: ReactDragEvent<HTMLDivElement>) => {\n    preventEventDefaults(event)\n    if (event.dataTransfer?.files?.length && !imagePreviewUrl) {\n      processFile(event.dataTransfer.files[0])\n    }\n  }\n\n  const onDeleteButtonClick = showDeletePopover\n    ? closeDeletePopover\n    : openDeletePopover\n\n  return (\n    <div\n      tabIndex={0}\n      className={cx(\"cobalt-photo-dropzone\", className, {\n        \"cobalt-photo-dropzone--filled\": imagePreviewUrl,\n        \"cobalt-photo-dropzone--dragging\": isDragging,\n        \"cobalt-photo-dropzone--loading\": isLoading,\n        \"cobalt-photo-dropzone--errored\": isErrored,\n      })}\n      onMouseEnter={onDropzoneMouseEnter}\n      onMouseLeave={onDropzoneMouseLeave}\n      onDragEnter={onDragEnter}\n      onDragLeave={onDragLeave}\n      // Not on click because we also use mouseEnter listener\n      onMouseUp={onDropzoneClick}\n      onTouchEnd={onDropzoneClick}\n      onKeyUp={onDropzoneKey}\n      onDrop={onDrop}\n      // Need to reset those listeners to avoid default browser behaviour\n      onDragStart={preventEventDefaults}\n      onDragEnd={preventEventDefaults}\n      onDragOver={preventEventDefaults}\n    >\n      {isErrored && (\n        <div className=\"cobalt-photo-dropzone__description\">\n          <ContextualWarningCircleFilledIcon color=\"red\" />\n          {errorContent(ACCEPTED_TYPES_LOCALE_STRING, ACCEPTED_MAX_SIZE_MB)}\n        </div>\n      )}\n      {isLoading && (\n        <div className=\"cobalt-photo-dropzone__description\">\n          <LoadingIcon />\n        </div>\n      )}\n      {!isLoading &&\n        !isErrored &&\n        (imagePreviewUrl ? (\n          <>\n            <img\n              className=\"cobalt-photo-dropzone__preview\"\n              src={imagePreviewUrl}\n            />\n            <div>\n              <button\n                className={cx(\"cobalt-photo-dropzone__delete-button\", {\n                  \"cobalt-photo-dropzone__delete-button--triggered\":\n                    displayDeletion,\n                })}\n                ref={deleteButtonRef}\n                // Must follow the click listeners on the dropzone,\n                // in order to have the correct events bubbling\n                onTouchEnd={onDeleteButtonClick}\n                onMouseUp={onDeleteButtonClick}\n                onKeyUp={onDeleteKey}\n              >\n                <VisuallyHidden>Delete</VisuallyHidden>\n                <BinIcon color=\"indigo\" />\n              </button>\n              <Popover\n                targetRef={deleteButtonRef}\n                isOpen={showDeletePopover}\n                close={closeDeletePopover}\n                placement=\"left-start\"\n                distance={12}\n                bodySpacing={false}\n                arrow\n              >\n                {deletePopoverContent(onDelete, closeDeletePopover)}\n              </Popover>\n            </div>\n          </>\n        ) : (\n          <div className=\"cobalt-photo-dropzone__description cobalt-photo-dropzone__description--strong\">\n            <p>{description}</p>\n            <PlusIcon />\n          </div>\n        ))}\n      <VisuallyHidden>\n        <input\n          ref={fileInputRef}\n          type=\"file\"\n          onChange={onFileInputChanged}\n          accept={ACCEPTED_PHOTOS_TYPES.map((ext) => `.${ext}`).join(\",\")}\n          multiple={false}\n        />\n      </VisuallyHidden>\n    </div>\n  )\n}\n\nexport default PhotoDropzone\n"],"names":[],"mappings":";;;;;;;;;;;AAqBA,MAAM,oBAAoB,GAAG,EAAE,CAAA;AAC/B,MAAM,qBAAqB,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,CAAA;AAC3D,MAAM,kBAAkB,GAAG,IAAI,CAAA;AAC/B,MAAM,4BAA4B,GAAG,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;AAYrE,MAAM,oBAAoB,GAAG,CAC3B,CAA0E,KACxE;AACF,IAAA,CAAC,CAAC,cAAc,IAAI,CAAC,CAAC,cAAc,EAAE,CAAA;AACtC,IAAA,CAAC,CAAC,eAAe,IAAI,CAAC,CAAC,eAAe,EAAE,CAAA;AAC1C,CAAC,CAAA;AAED,MAAM,iBAAiB,GAAG,CAAC,KAAyB,KAClD,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,CAAA;AAEtC,MAAA,aAAa,GAAG,CAAC,EACrB,SAAS,EACT,WAAW,EACX,oBAAoB,EACpB,YAAY,EACZ,SAAS,EACT,aAAa,EACb,eAAe,GAAG,EAAE,GACG,KAAI;AAC3B,IAAA,MAAM,YAAY,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAA;AACnD,IAAA,MAAM,eAAe,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAA;IACvD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACnD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACjD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACjD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAA;IACvE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC7D,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;AAEjE,IAAA,MAAM,iBAAiB,GAAG,CACxB,KAA8D,KAC5D;AACF,QAAA,KAAK,IAAI,oBAAoB,CAAC,KAAK,CAAC,CAAA;QACpC,oBAAoB,CAAC,IAAI,CAAC,CAAA;AAC5B,KAAC,CAAA;AACD,IAAA,MAAM,kBAAkB,GAAG,CAAC,KAAyC,KAAI;AACvE,QAAA,KAAK,IAAI,oBAAoB,CAAC,KAAK,CAAC,CAAA;QACpC,oBAAoB,CAAC,KAAK,CAAC,CAAA;AAC7B,KAAC,CAAA;AAED,IAAA,MAAM,oBAAoB,GAAG,CAAC,KAAuB,KAAI;AACvD,QAAA,KAAK,IAAI,oBAAoB,CAAC,KAAK,CAAC,CAAA;AACpC,QAAA,IAAI,eAAe;YAAE,kBAAkB,CAAC,IAAI,CAAC,CAAA;AAC/C,KAAC,CAAA;AAED,IAAA,MAAM,oBAAoB,GAAG,CAAC,KAAuB,KAAI;AACvD,QAAA,KAAK,IAAI,oBAAoB,CAAC,KAAK,CAAC,CAAA;QACpC,IAAI,eAAe,IAAI,CAAC,iBAAiB;YAAE,kBAAkB,CAAC,KAAK,CAAC,CAAA;AACtE,KAAC,CAAA;AAED,IAAA,MAAM,eAAe,GAAG,CAAC,KAAyC,KAAI;;AACpE,QAAA,KAAK,IAAI,oBAAoB,CAAC,KAAK,CAAC,CAAA;AACpC,QAAA,IAAI,SAAS;YAAE,OAAM;AACrB,QAAA,IAAI,SAAS;YAAE,YAAY,CAAC,KAAK,CAAC,CAAA;AAClC,QAAA,IAAI,eAAe,EAAE;AACnB,YAAA,IAAI,iBAAiB;AAAE,gBAAA,kBAAkB,EAAE,CAAA;AAC3C,YAAA,OAAO,kBAAkB,CAAC,CAAC,eAAe,CAAC,CAAA;AAC5C,SAAA;AACD,QAAA,CAAA,EAAA,GAAA,YAAY,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAK,EAAE,CAAA;AAC/B,KAAC,CAAA;AAED,IAAA,MAAM,aAAa,GAAG,CAAC,KAAyB,KAAI;AAClD,QAAA,IAAI,iBAAiB;YAAE,OAAM;AAC7B,QAAA,IAAI,iBAAiB,CAAC,KAAK,CAAC,EAAE;AAC5B,YAAA,eAAe,EAAE,CAAA;AAClB,SAAA;AACH,KAAC,CAAA;AAED,IAAA,MAAM,WAAW,GAAG,CAAC,KAAyB,KAAI;AAChD,QAAA,IAAI,iBAAiB,CAAC,KAAK,CAAC,EAAE;YAC5B,iBAAiB,CAAC,KAAK,CAAC,CAAA;AACzB,SAAA;AACH,KAAC,CAAA;IAED,MAAM,QAAQ,GAAG,MAAK;QACpB,IAAI,YAAY,CAAC,OAAO;AAAE,YAAA,YAAY,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE,CAAA;AACzD,QAAA,kBAAkB,EAAE,CAAA;QACpB,kBAAkB,CAAC,EAAE,CAAC,CAAA;QACtB,aAAa,IAAI,aAAa,EAAE,CAAA;AAClC,KAAC,CAAA;AAED,IAAA,MAAM,WAAW,GAAG,CAAC,KAAqB,KAAI;QAC5C,oBAAoB,CAAC,KAAK,CAAC,CAAA;AAC3B,QAAA,IAAI,SAAS;YAAE,YAAY,CAAC,KAAK,CAAC,CAAA;AAClC,QAAA,CAAC,eAAe,IAAI,aAAa,CAAC,IAAI,CAAC,CAAA;AACzC,KAAC,CAAA;AAED,IAAA,MAAM,WAAW,GAAG,CAAC,KAAqB,KAAI;QAC5C,oBAAoB,CAAC,KAAK,CAAC,CAAA;QAC3B,aAAa,CAAC,KAAK,CAAC,CAAA;AACtB,KAAC,CAAA;AAED,IAAA,MAAM,WAAW,GAAG,OAAO,aAAmB,KAAI;QAChD,aAAa,CAAC,KAAK,CAAC,CAAA;QACpB,YAAY,CAAC,KAAK,CAAC,CAAA;QACnB,YAAY,CAAC,IAAI,CAAC,CAAA;AAElB,QAAA,MAAM,WAAW,GAAG,MAAM,YAAY,CACpC,aAAa,EACb,CAAC,cAAc,EAAE,SAAS,KAAI;AAC5B,YAAA,MAAM,WAAW,GAAG,oBAAoB,GAAG,IAAI,GAAG,IAAI,CAAA;YACtD,MAAM,iBAAiB,GAAG,qBAAqB,CAAA;AAE/C,YAAA,IAAI,cAAc,CAAC,IAAI,GAAG,WAAW,EAAE;AACrC,gBAAA,OAAO,KAAK,CAAA;AACb,aAAA;iBAAM,IAAI,CAAC,SAAS,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE;AAC/D,gBAAA,OAAO,KAAK,CAAA;AACb,aAAA;AAAM,iBAAA;AACL,gBAAA,OAAO,IAAI,CAAA;AACZ,aAAA;AACH,SAAC,CACF,CAAA;AAED,QAAA,IAAI,WAAW,EAAE;YACf,MAAM,QAAQ,GAAG,GAAG,CAAC,eAAe,CAAC,aAAa,CAAC,CAAA;YACnD,kBAAkB,CAAC,QAAQ,CAAC,CAAA;AAC5B,YAAA,MAAM,SAAS,CAAC,aAAa,CAAC,CAAA;YAC9B,YAAY,CAAC,KAAK,CAAC,CAAA;AACpB,SAAA;AAAM,aAAA;YACL,YAAY,CAAC,KAAK,CAAC,CAAA;YACnB,YAAY,CAAC,IAAI,CAAC,CAAA;YAClB,UAAU,CAAC,MAAK;gBACd,YAAY,CAAC,KAAK,CAAC,CAAA;aACpB,EAAE,kBAAkB,CAAC,CAAA;AACvB,SAAA;AACH,KAAC,CAAA;AAED,IAAA,MAAM,kBAAkB,GAAG,CAAC,KAAyC,KAAI;;QACvE,IAAI,CAAA,EAAA,GAAA,KAAK,CAAC,MAAM,CAAC,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,MAAM,EAAE;YAC9B,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;AACnC,SAAA;AACH,KAAC,CAAA;AAED,IAAA,MAAM,MAAM,GAAG,CAAC,KAAqC,KAAI;;QACvD,oBAAoB,CAAC,KAAK,CAAC,CAAA;AAC3B,QAAA,IAAI,CAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,KAAK,CAAC,YAAY,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAK,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,MAAM,KAAI,CAAC,eAAe,EAAE;YACzD,WAAW,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;AACzC,SAAA;AACH,KAAC,CAAA;IAED,MAAM,mBAAmB,GAAG,iBAAiB;AAC3C,UAAE,kBAAkB;UAClB,iBAAiB,CAAA;AAErB,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,EAAE;AAChD,YAAA,+BAA+B,EAAE,eAAe;AAChD,YAAA,iCAAiC,EAAE,UAAU;AAC7C,YAAA,gCAAgC,EAAE,SAAS;AAC3C,YAAA,gCAAgC,EAAE,SAAS;AAC5C,SAAA,CAAC,EACF,YAAY,EAAE,oBAAoB,EAClC,YAAY,EAAE,oBAAoB,EAClC,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW;;AAExB,QAAA,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,eAAe,EAC3B,OAAO,EAAE,aAAa,EACtB,MAAM,EAAE,MAAM;;QAEd,WAAW,EAAE,oBAAoB,EACjC,SAAS,EAAE,oBAAoB,EAC/B,UAAU,EAAE,oBAAoB,EAAA;AAE/B,QAAA,SAAS,KACR,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,oCAAoC,EAAA;AACjD,YAAA,KAAA,CAAA,aAAA,CAAC,iCAAiC,EAAA,EAAC,KAAK,EAAC,KAAK,EAAG,CAAA;AAChD,YAAA,YAAY,CAAC,4BAA4B,EAAE,oBAAoB,CAAC,CAC7D,CACP;AACA,QAAA,SAAS,KACR,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,oCAAoC,EAAA;YACjD,KAAC,CAAA,aAAA,CAAA,WAAW,EAAG,IAAA,CAAA,CACX,CACP;AACA,QAAA,CAAC,SAAS;AACT,YAAA,CAAC,SAAS;AACV,aAAC,eAAe,IACd,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;AACE,gBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAC,gCAAgC,EAC1C,GAAG,EAAE,eAAe,EACpB,CAAA;AACF,gBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA;AACE,oBAAA,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,SAAS,EAAE,EAAE,CAAC,sCAAsC,EAAE;AACpD,4BAAA,iDAAiD,EAC/C,eAAe;yBAClB,CAAC,EACF,GAAG,EAAE,eAAe;;;wBAGpB,UAAU,EAAE,mBAAmB,EAC/B,SAAS,EAAE,mBAAmB,EAC9B,OAAO,EAAE,WAAW,EAAA;AAEpB,wBAAA,KAAA,CAAA,aAAA,CAAC,cAAc,EAAwB,IAAA,EAAA,QAAA,CAAA;AACvC,wBAAA,KAAA,CAAA,aAAA,CAAC,OAAO,EAAC,EAAA,KAAK,EAAC,QAAQ,GAAG,CACnB;oBACT,KAAC,CAAA,aAAA,CAAA,OAAO,IACN,SAAS,EAAE,eAAe,EAC1B,MAAM,EAAE,iBAAiB,EACzB,KAAK,EAAE,kBAAkB,EACzB,SAAS,EAAC,YAAY,EACtB,QAAQ,EAAE,EAAE,EACZ,WAAW,EAAE,KAAK,EAClB,KAAK,EAAA,IAAA,EAAA,EAEJ,oBAAoB,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAC3C,CACN,CACL,KAEH,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,+EAA+E,EAAA;AAC5F,gBAAA,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,IAAA,EAAI,WAAW,CAAK;AACpB,gBAAA,KAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,IAAA,CAAG,CACR,CACP,CAAC;AACJ,QAAA,KAAA,CAAA,aAAA,CAAC,cAAc,EAAA,IAAA;AACb,YAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,GAAG,EAAE,YAAY,EACjB,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,kBAAkB,EAC5B,MAAM,EAAE,qBAAqB,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,CAAI,CAAA,EAAA,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAC/D,QAAQ,EAAE,KAAK,GACf,CACa,CACb,EACP;AACH;;;;"}

package/components/Pill/index.js

@@ -2,10 +2,9 @@ import React, { Children } from 'react';
 import cx from 'classnames';
 import { Icon } from '../Icon/index.js';
 
-var ICON_SIZE = 20;
-var Pill = function (_a) {
-    var icon = _a.icon, _b = _a.color, color = _b === void 0 ? "indigo" : _b, children = _a.children, overlayed = _a.overlayed, className = _a.className, size = _a.size;
-    var iconMarkup = icon ? (React.createElement("span", { className: "cobalt-Pill__Icon" },
+const ICON_SIZE = 20;
+const Pill = ({ icon, color = "indigo", children, overlayed, className, size, }) => {
+    const iconMarkup = icon ? (React.createElement("span", { className: "cobalt-Pill__Icon" },
         React.createElement(Icon, { source: icon, size: ICON_SIZE, color: overlayed ? "white" : color }))) : null;
     return (React.createElement("div", { className: cx(className, "cobalt-Pill", {
             "cobalt-Pill--colorAller": color === "aller",
@@ -16,9 +15,8 @@ var Pill = function (_a) {
         " ",
         children));
 };
-var PillGroup = function (_a) {
-    var children = _a.children;
-    return (React.createElement("div", { className: "cobalt-PillGroup" }, Children.toArray(children).map(function (child, index) { return (React.createElement("div", { className: "cobalt-PillGroup__Item", key: index }, child)); })));
+const PillGroup = ({ children }) => {
+    return (React.createElement("div", { className: "cobalt-PillGroup" }, Children.toArray(children).map((child, index) => (React.createElement("div", { className: "cobalt-PillGroup__Item", key: index }, child)))));
 };
 
 export { Pill, PillGroup, Pill as default };

package/components/Pill/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Pill/index.tsx"],"sourcesContent":["import React, { Children } from \"react\"\nimport cx from \"classnames\"\nimport { Icon, IconColors, IconSources } from \"../Icon\"\n\nconst ICON_SIZE = 20\nexport interface PillPropsType {\n  children: React.ReactNode\n  icon?: IconSources\n  color?: IconColors\n  size?: \"large\"\n  overlayed?: boolean\n  className?: string\n}\n\nexport const Pill = ({\n  icon,\n  color = \"indigo\",\n  children,\n  overlayed,\n  className,\n  size,\n}: PillPropsType) => {\n  const iconMarkup = icon ? (\n    <span className=\"cobalt-Pill__Icon\">\n      <Icon\n        source={icon}\n        size={ICON_SIZE}\n        color={overlayed ? \"white\" : color}\n      />\n    </span>\n  ) : null\n\n  return (\n    <div\n      className={cx(className, \"cobalt-Pill\", {\n        \"cobalt-Pill--colorAller\": color === \"aller\",\n        \"cobalt-Pill--overlayed\": overlayed,\n        \"cobalt-Pill--large\": size === \"large\",\n      })}\n    >\n      {iconMarkup} {children}\n    </div>\n  )\n}\n\nexport interface PillGroupPropsType {\n  children: React.ReactNode\n}\n\nexport const PillGroup = ({ children }: PillGroupPropsType) => {\n  return (\n    <div className=\"cobalt-PillGroup\">\n      {Children.toArray(children).map((child, index) => (\n        <div className=\"cobalt-PillGroup__Item\" key={index}>\n          {child}\n        </div>\n      ))}\n    </div>\n  )\n}\n\nexport default Pill\n"],"names":[],"mappings":";;;;AAIA,IAAM,SAAS,GAAG,EAAE,CAAA;AAUb,IAAM,IAAI,GAAG,UAAC,EAOL,EAAA;AANd,IAAA,IAAA,IAAI,UAAA,EACJ,EAAA,GAAA,EAAA,CAAA,KAAgB,EAAhB,KAAK,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,QAAQ,GAAA,EAAA,EAChB,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,IAAI,GAAA,EAAA,CAAA,IAAA,CAAA;IAEJ,IAAM,UAAU,GAAG,IAAI,IACrB,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,mBAAmB,EAAA;AACjC,QAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACH,MAAM,EAAE,IAAI,EACZ,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,SAAS,GAAG,OAAO,GAAG,KAAK,EAAA,CAClC,CACG,IACL,IAAI,CAAA;IAER,QACE,6BACE,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,aAAa,EAAE;YACtC,yBAAyB,EAAE,KAAK,KAAK,OAAO;AAC5C,YAAA,wBAAwB,EAAE,SAAS;YACnC,oBAAoB,EAAE,IAAI,KAAK,OAAO;SACvC,CAAC,EAAA;QAED,UAAU;;QAAG,QAAQ,CAClB,EACP;AACH,EAAC;AAMM,IAAM,SAAS,GAAG,UAAC,EAAgC,EAAA;AAA9B,IAAA,IAAA,QAAQ,GAAA,EAAA,CAAA,QAAA,CAAA;AAClC,IAAA,QACE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,kBAAkB,IAC9B,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,UAAC,KAAK,EAAE,KAAK,EAAK,EAAA,QAChD,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,wBAAwB,EAAC,GAAG,EAAE,KAAK,EAC/C,EAAA,KAAK,CACF,EACP,EAAA,CAAC,CACE,EACP;AACH;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Pill/index.tsx"],"sourcesContent":["import React, { Children } from \"react\"\nimport cx from \"classnames\"\nimport { Icon, IconColors, IconSources } from \"../Icon\"\n\nconst ICON_SIZE = 20\nexport interface PillPropsType {\n  children: React.ReactNode\n  icon?: IconSources\n  color?: IconColors\n  size?: \"large\"\n  overlayed?: boolean\n  className?: string\n}\n\nexport const Pill = ({\n  icon,\n  color = \"indigo\",\n  children,\n  overlayed,\n  className,\n  size,\n}: PillPropsType) => {\n  const iconMarkup = icon ? (\n    <span className=\"cobalt-Pill__Icon\">\n      <Icon\n        source={icon}\n        size={ICON_SIZE}\n        color={overlayed ? \"white\" : color}\n      />\n    </span>\n  ) : null\n\n  return (\n    <div\n      className={cx(className, \"cobalt-Pill\", {\n        \"cobalt-Pill--colorAller\": color === \"aller\",\n        \"cobalt-Pill--overlayed\": overlayed,\n        \"cobalt-Pill--large\": size === \"large\",\n      })}\n    >\n      {iconMarkup} {children}\n    </div>\n  )\n}\n\nexport interface PillGroupPropsType {\n  children: React.ReactNode\n}\n\nexport const PillGroup = ({ children }: PillGroupPropsType) => {\n  return (\n    <div className=\"cobalt-PillGroup\">\n      {Children.toArray(children).map((child, index) => (\n        <div className=\"cobalt-PillGroup__Item\" key={index}>\n          {child}\n        </div>\n      ))}\n    </div>\n  )\n}\n\nexport default Pill\n"],"names":[],"mappings":";;;;AAIA,MAAM,SAAS,GAAG,EAAE,CAAA;MAUP,IAAI,GAAG,CAAC,EACnB,IAAI,EACJ,KAAK,GAAG,QAAQ,EAChB,QAAQ,EACR,SAAS,EACT,SAAS,EACT,IAAI,GACU,KAAI;IAClB,MAAM,UAAU,GAAG,IAAI,IACrB,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,mBAAmB,EAAA;AACjC,QAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACH,MAAM,EAAE,IAAI,EACZ,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,SAAS,GAAG,OAAO,GAAG,KAAK,EAAA,CAClC,CACG,IACL,IAAI,CAAA;IAER,QACE,6BACE,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,aAAa,EAAE;YACtC,yBAAyB,EAAE,KAAK,KAAK,OAAO;AAC5C,YAAA,wBAAwB,EAAE,SAAS;YACnC,oBAAoB,EAAE,IAAI,KAAK,OAAO;SACvC,CAAC,EAAA;QAED,UAAU;;QAAG,QAAQ,CAClB,EACP;AACH,EAAC;MAMY,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAsB,KAAI;AAC5D,IAAA,QACE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,kBAAkB,IAC9B,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,MAC3C,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wBAAwB,EAAC,GAAG,EAAE,KAAK,IAC/C,KAAK,CACF,CACP,CAAC,CACE,EACP;AACH;;;;"}

package/components/Popover/LazyTippy.js

@@ -1,10 +1,9 @@
-import { __assign } from '../../_virtual/_tslib.js';
 import React from 'react';
 import Tippy from '@tippyjs/react';
 
 // Will only render the `content` or `render` elements if the tippy is mounted to the DOM.
-var LazyTippy = function (props) {
-    return props.visible ? React.createElement(Tippy, __assign({}, props)) : null;
+const LazyTippy = (props) => {
+    return props.visible ? React.createElement(Tippy, { ...props }) : null;
 };
 
 export { LazyTippy as default };

package/components/Popover/LazyTippy.js.map

@@ -1 +1 @@
-{"version":3,"file":"LazyTippy.js","sources":["../../../src/components/Popover/LazyTippy.tsx"],"sourcesContent":["// Will only render the `content` or `render` elements if the tippy is mounted to the DOM.\n// Replace <Tippy /> with <LazyTippy /> component and it should work the same.\n\nimport React from \"react\"\n\nimport Tippy, { TippyProps } from \"@tippyjs/react\"\n\nconst LazyTippy = (props: TippyProps) => {\n  return props.visible ? <Tippy {...props} /> : null\n}\n\nexport default LazyTippy\n"],"names":[],"mappings":";;;;AAAA;AAOM,IAAA,SAAS,GAAG,UAAC,KAAiB,EAAA;AAClC,IAAA,OAAO,KAAK,CAAC,OAAO,GAAG,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,QAAA,CAAA,EAAA,EAAK,KAAK,CAAI,CAAA,GAAG,IAAI,CAAA;AACpD;;;;"}
+{"version":3,"file":"LazyTippy.js","sources":["../../../src/components/Popover/LazyTippy.tsx"],"sourcesContent":["// Will only render the `content` or `render` elements if the tippy is mounted to the DOM.\n// Replace <Tippy /> with <LazyTippy /> component and it should work the same.\n\nimport React from \"react\"\n\nimport Tippy, { TippyProps } from \"@tippyjs/react\"\n\nconst LazyTippy = (props: TippyProps) => {\n  return props.visible ? <Tippy {...props} /> : null\n}\n\nexport default LazyTippy\n"],"names":[],"mappings":";;;AAAA;AAOA,MAAM,SAAS,GAAG,CAAC,KAAiB,KAAI;AACtC,IAAA,OAAO,KAAK,CAAC,OAAO,GAAG,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAA,GAAK,KAAK,EAAI,CAAA,GAAG,IAAI,CAAA;AACpD;;;;"}

package/components/Popover/index.js

@@ -1,4 +1,3 @@
-import { __assign } from '../../_virtual/_tslib.js';
 import React, { useCallback, useEffect } from 'react';
 import Tippy from '@tippyjs/react';
 import { sticky } from 'tippy.js';
@@ -7,8 +6,8 @@ import Modal from '../Modal/index.js';
 import LazyTippy from './LazyTippy.js';
 import { zIndexes } from '../../tokens/index.js';
 
-var ESC_KEY_CODE = 27;
-var defaultTippyProps = {
+const ESC_KEY_CODE = 27;
+const defaultTippyProps = {
     animation: "shift-away-subtle",
     interactive: true,
     interactiveBorder: 10,
@@ -20,36 +19,32 @@ var defaultTippyProps = {
     theme: "light cobalt-popover",
     inertia: true,
 };
-var MobilePopover = function (_a) {
-    var isOpen = _a.isOpen, children = _a.children, _b = _a.ariaLabel, ariaLabel = _b === void 0 ? "Popover mobile modal" : _b, onDismiss = _a.onDismiss, bodySpacing = _a.bodySpacing, onShow = _a.onShow, onHidden = _a.onHidden;
+const MobilePopover = ({ isOpen, children, ariaLabel = "Popover mobile modal", onDismiss, bodySpacing, onShow, onHidden, }) => {
     return (React.createElement(Modal, { "aria-label": ariaLabel, isOpen: isOpen, onDismissAttempt: onDismiss, bodySpacing: bodySpacing, onShow: onShow, onHidden: onHidden }, children));
 };
-var Popover = function (_a) {
-    var isOpen = _a.isOpen, targetRef = _a.targetRef, close = _a.close, ariaLabel = _a["aria-label"], children = _a.children, _b = _a.bodySpacing, bodySpacing = _b === void 0 ? true : _b, onShow = _a.onShow, onHidden = _a.onHidden, 
-    // Desktop props
-    _c = _a.arrow, 
-    // Desktop props
-    arrow = _c === void 0 ? false : _c, _d = _a.placement, placement = _d === void 0 ? "bottom-start" : _d, _e = _a.theme, theme = _e === void 0 ? "" : _e, _f = _a.distance, distance = _f === void 0 ? 8 : _f, _g = _a.zIndex, zIndex = _g === void 0 ? zIndexes.dropdown : _g, lazy = _a.lazy;
-    var breakpoint = useBreakpoint().breakpoint;
-    var isMobile = breakpoint === "sm" || breakpoint === "xs";
-    var escListener = useCallback(function (event) {
+const Popover = ({ isOpen, targetRef, close, "aria-label": ariaLabel, children, bodySpacing = true, onShow, onHidden, 
+// Desktop props
+arrow = false, placement = "bottom-start", theme = "", distance = 8, zIndex = zIndexes.dropdown, lazy, }) => {
+    const { breakpoint } = useBreakpoint();
+    const isMobile = breakpoint === "sm" || breakpoint === "xs";
+    const escListener = useCallback((event) => {
         if (event.keyCode === ESC_KEY_CODE && isOpen)
             close();
     }, [isOpen, close]);
-    useEffect(function () {
+    useEffect(() => {
         window.addEventListener("keydown", escListener);
-        return function () { return window.removeEventListener("keydown", escListener); };
+        return () => window.removeEventListener("keydown", escListener);
     }, [escListener]);
-    var onTippyClose = function () {
+    const onTippyClose = () => {
         if (onHidden)
             onHidden();
     };
-    var onTippyOpen = function () {
+    const onTippyOpen = () => {
         if (onShow)
             onShow();
     };
-    var TippyComp = lazy ? LazyTippy : Tippy;
-    return isMobile ? (React.createElement(MobilePopover, { isOpen: isOpen, onDismiss: close, bodySpacing: bodySpacing, ariaLabel: ariaLabel, onShow: onShow, onHidden: onHidden }, children)) : (React.createElement(TippyComp, __assign({ content: bodySpacing ? (React.createElement("div", { className: "cobalt-popover--bodySpacing" }, children)) : (children) }, defaultTippyProps, { visible: isOpen, reference: targetRef, theme: "".concat(defaultTippyProps.theme, " ").concat(theme), offset: [0, distance] }, { arrow: arrow, placement: placement, zIndex: zIndex }, { onHidden: onTippyClose, onShow: onTippyOpen, onClickOutside: close })));
+    const TippyComp = lazy ? LazyTippy : Tippy;
+    return isMobile ? (React.createElement(MobilePopover, { isOpen: isOpen, onDismiss: close, bodySpacing: bodySpacing, ariaLabel: ariaLabel, onShow: onShow, onHidden: onHidden }, children)) : (React.createElement(TippyComp, { content: bodySpacing ? (React.createElement("div", { className: "cobalt-popover--bodySpacing" }, children)) : (children), ...defaultTippyProps, visible: isOpen, reference: targetRef, theme: `${defaultTippyProps.theme} ${theme}`, offset: [0, distance], ...{ arrow, placement, zIndex }, onHidden: onTippyClose, onShow: onTippyOpen, onClickOutside: close }));
 };
 
 export { Popover as default };

package/components/Popover/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Popover/index.tsx"],"sourcesContent":["import React, { useEffect, useCallback, PropsWithChildren } from \"react\"\nimport Tippy, { TippyProps } from \"@tippyjs/react\"\nimport { sticky } from \"tippy.js\"\n\nimport useBreakpoint from \"../../hooks/useBreakpoint\"\nimport Modal, { ModalPropsType } from \"../Modal\"\nimport LazyTippy from \"./LazyTippy\"\nimport { zIndexes } from \"../../tokens\"\n\nexport type PopoverPropsType = PropsWithChildren<{\n  isOpen: boolean\n  close: () => void\n  \"aria-label\"?: string\n  bodySpacing?: boolean\n  onShow?: () => void\n  onHidden?: () => void\n  // Desktop props\n  targetRef: TippyProps[\"reference\"]\n  arrow?: boolean\n  placement?: TippyProps[\"placement\"]\n  theme?: string\n  distance?: number\n  zIndex?: number\n  /**\n   * __Only for desktop popover__\n   *\n   * Allow to render the content only when the popover is mounted in the DOM\n   * Useful to render async content in the popover\n   */\n  lazy?: boolean\n}>\n\nconst ESC_KEY_CODE = 27\n\nconst defaultTippyProps: Omit<TippyProps, \"content\" | \"children\" | \"visible\"> =\n  {\n    animation: \"shift-away-subtle\",\n    interactive: true,\n    interactiveBorder: 10,\n    delay: [0, 0],\n    duration: [200, 150],\n    maxWidth: 500,\n    sticky: true,\n    plugins: [sticky],\n    theme: \"light cobalt-popover\",\n    inertia: true,\n  }\n\nconst MobilePopover = ({\n  isOpen,\n  children,\n  ariaLabel = \"Popover mobile modal\",\n  onDismiss,\n  bodySpacing,\n  onShow,\n  onHidden,\n}: PropsWithChildren<{\n  ariaLabel?: ModalPropsType[\"aria-label\"]\n  isOpen: ModalPropsType[\"isOpen\"]\n  onDismiss?: () => void\n  bodySpacing: ModalPropsType[\"bodySpacing\"]\n  onShow: ModalPropsType[\"onShow\"]\n  onHidden: ModalPropsType[\"onHidden\"]\n}>) => {\n  return (\n    <Modal\n      aria-label={ariaLabel}\n      isOpen={isOpen}\n      onDismissAttempt={onDismiss}\n      bodySpacing={bodySpacing}\n      onShow={onShow}\n      onHidden={onHidden}\n    >\n      {children}\n    </Modal>\n  )\n}\n\nconst Popover = ({\n  isOpen,\n  targetRef,\n  close,\n  \"aria-label\": ariaLabel,\n  children,\n  bodySpacing = true,\n  onShow,\n  onHidden,\n  // Desktop props\n  arrow = false,\n  placement = \"bottom-start\",\n  theme = \"\",\n  distance = 8,\n  zIndex = zIndexes.dropdown,\n  lazy,\n}: PopoverPropsType) => {\n  const { breakpoint } = useBreakpoint()\n  const isMobile = breakpoint === \"sm\" || breakpoint === \"xs\"\n\n  const escListener = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.keyCode === ESC_KEY_CODE && isOpen) close()\n    },\n    [isOpen, close]\n  )\n\n  useEffect(() => {\n    window.addEventListener(\"keydown\", escListener)\n\n    return () => window.removeEventListener(\"keydown\", escListener)\n  }, [escListener])\n\n  const onTippyClose = () => {\n    if (onHidden) onHidden()\n  }\n\n  const onTippyOpen = () => {\n    if (onShow) onShow()\n  }\n\n  const TippyComp = lazy ? LazyTippy : Tippy\n\n  return isMobile ? (\n    <MobilePopover\n      isOpen={isOpen}\n      onDismiss={close}\n      bodySpacing={bodySpacing}\n      ariaLabel={ariaLabel}\n      onShow={onShow}\n      onHidden={onHidden}\n    >\n      {children}\n    </MobilePopover>\n  ) : (\n    <TippyComp\n      content={\n        bodySpacing ? (\n          <div className=\"cobalt-popover--bodySpacing\">{children}</div>\n        ) : (\n          children\n        )\n      }\n      {...defaultTippyProps}\n      visible={isOpen}\n      reference={targetRef}\n      theme={`${defaultTippyProps.theme} ${theme}`}\n      offset={[0, distance]}\n      {...{ arrow, placement, zIndex }}\n      onHidden={onTippyClose}\n      onShow={onTippyOpen}\n      onClickOutside={close}\n    />\n  )\n}\n\nexport default Popover\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Popover/index.tsx"],"sourcesContent":["import React, { useEffect, useCallback, PropsWithChildren } from \"react\"\nimport Tippy, { TippyProps } from \"@tippyjs/react\"\nimport { sticky } from \"tippy.js\"\n\nimport useBreakpoint from \"../../hooks/useBreakpoint\"\nimport Modal, { ModalPropsType } from \"../Modal\"\nimport LazyTippy from \"./LazyTippy\"\nimport { zIndexes } from \"../../tokens\"\n\nexport type PopoverPropsType = PropsWithChildren<{\n  isOpen: boolean\n  close: () => void\n  \"aria-label\"?: string\n  bodySpacing?: boolean\n  onShow?: () => void\n  onHidden?: () => void\n  // Desktop props\n  targetRef: TippyProps[\"reference\"]\n  arrow?: boolean\n  placement?: TippyProps[\"placement\"]\n  theme?: string\n  distance?: number\n  zIndex?: number\n  /**\n   * __Only for desktop popover__\n   *\n   * Allow to render the content only when the popover is mounted in the DOM\n   * Useful to render async content in the popover\n   */\n  lazy?: boolean\n}>\n\nconst ESC_KEY_CODE = 27\n\nconst defaultTippyProps: Omit<TippyProps, \"content\" | \"children\" | \"visible\"> =\n  {\n    animation: \"shift-away-subtle\",\n    interactive: true,\n    interactiveBorder: 10,\n    delay: [0, 0],\n    duration: [200, 150],\n    maxWidth: 500,\n    sticky: true,\n    plugins: [sticky],\n    theme: \"light cobalt-popover\",\n    inertia: true,\n  }\n\nconst MobilePopover = ({\n  isOpen,\n  children,\n  ariaLabel = \"Popover mobile modal\",\n  onDismiss,\n  bodySpacing,\n  onShow,\n  onHidden,\n}: PropsWithChildren<{\n  ariaLabel?: ModalPropsType[\"aria-label\"]\n  isOpen: ModalPropsType[\"isOpen\"]\n  onDismiss?: () => void\n  bodySpacing: ModalPropsType[\"bodySpacing\"]\n  onShow: ModalPropsType[\"onShow\"]\n  onHidden: ModalPropsType[\"onHidden\"]\n}>) => {\n  return (\n    <Modal\n      aria-label={ariaLabel}\n      isOpen={isOpen}\n      onDismissAttempt={onDismiss}\n      bodySpacing={bodySpacing}\n      onShow={onShow}\n      onHidden={onHidden}\n    >\n      {children}\n    </Modal>\n  )\n}\n\nconst Popover = ({\n  isOpen,\n  targetRef,\n  close,\n  \"aria-label\": ariaLabel,\n  children,\n  bodySpacing = true,\n  onShow,\n  onHidden,\n  // Desktop props\n  arrow = false,\n  placement = \"bottom-start\",\n  theme = \"\",\n  distance = 8,\n  zIndex = zIndexes.dropdown,\n  lazy,\n}: PopoverPropsType) => {\n  const { breakpoint } = useBreakpoint()\n  const isMobile = breakpoint === \"sm\" || breakpoint === \"xs\"\n\n  const escListener = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.keyCode === ESC_KEY_CODE && isOpen) close()\n    },\n    [isOpen, close]\n  )\n\n  useEffect(() => {\n    window.addEventListener(\"keydown\", escListener)\n\n    return () => window.removeEventListener(\"keydown\", escListener)\n  }, [escListener])\n\n  const onTippyClose = () => {\n    if (onHidden) onHidden()\n  }\n\n  const onTippyOpen = () => {\n    if (onShow) onShow()\n  }\n\n  const TippyComp = lazy ? LazyTippy : Tippy\n\n  return isMobile ? (\n    <MobilePopover\n      isOpen={isOpen}\n      onDismiss={close}\n      bodySpacing={bodySpacing}\n      ariaLabel={ariaLabel}\n      onShow={onShow}\n      onHidden={onHidden}\n    >\n      {children}\n    </MobilePopover>\n  ) : (\n    <TippyComp\n      content={\n        bodySpacing ? (\n          <div className=\"cobalt-popover--bodySpacing\">{children}</div>\n        ) : (\n          children\n        )\n      }\n      {...defaultTippyProps}\n      visible={isOpen}\n      reference={targetRef}\n      theme={`${defaultTippyProps.theme} ${theme}`}\n      offset={[0, distance]}\n      {...{ arrow, placement, zIndex }}\n      onHidden={onTippyClose}\n      onShow={onTippyOpen}\n      onClickOutside={close}\n    />\n  )\n}\n\nexport default Popover\n"],"names":[],"mappings":"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"}

package/components/PriceTable/index.js

@@ -1,18 +1,12 @@
 import React from 'react';
 import cx from 'classnames';
 
-var PriceTable = function (_a) {
-    var children = _a.children;
-    return (React.createElement("div", { className: "cobalt-PriceTable" }, children));
-};
-var PriceTableRow = function (_a) {
-    var label = _a.label, value = _a.value, _b = _a.discounted, discounted = _b === void 0 ? false : _b;
-    return (React.createElement("div", { className: "cobalt-PriceTable__Row" },
-        React.createElement("div", { className: "cobalt-PriceTable__Label" }, label),
-        React.createElement("div", { className: cx("cobalt-PriceTable__Value", {
-                "cobalt-PriceTable__Value--discount": discounted,
-            }) }, value)));
-};
+const PriceTable = ({ children }) => (React.createElement("div", { className: "cobalt-PriceTable" }, children));
+const PriceTableRow = ({ label, value, discounted = false, }) => (React.createElement("div", { className: "cobalt-PriceTable__Row" },
+    React.createElement("div", { className: "cobalt-PriceTable__Label" }, label),
+    React.createElement("div", { className: cx("cobalt-PriceTable__Value", {
+            "cobalt-PriceTable__Value--discount": discounted,
+        }) }, value)));
 
 export { PriceTable, PriceTableRow };
 //# sourceMappingURL=index.js.map

package/components/PriceTable/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/PriceTable/index.tsx"],"sourcesContent":["import React from \"react\"\nimport classNames from \"classnames\"\n\nexport const PriceTable = ({ children }: { children: React.ReactNode }) => (\n  <div className=\"cobalt-PriceTable\">{children}</div>\n)\n\ninterface PriceTableRowProps {\n  label: string\n  value: string\n  discounted?: boolean\n}\n\nexport const PriceTableRow = ({\n  label,\n  value,\n  discounted = false,\n}: PriceTableRowProps) => (\n  <div className=\"cobalt-PriceTable__Row\">\n    <div className=\"cobalt-PriceTable__Label\">{label}</div>\n    <div\n      className={classNames(\"cobalt-PriceTable__Value\", {\n        \"cobalt-PriceTable__Value--discount\": discounted,\n      })}\n    >\n      {value}\n    </div>\n  </div>\n)\n"],"names":["classNames"],"mappings":";;;AAGO,IAAM,UAAU,GAAG,UAAC,EAA2C,EAAA;AAAzC,IAAA,IAAA,QAAQ,GAAA,EAAA,CAAA,QAAA,CAAA;IAAsC,QACzE,6BAAK,SAAS,EAAC,mBAAmB,EAAE,EAAA,QAAQ,CAAO,EACpD;AAF0E,EAE1E;AAQM,IAAM,aAAa,GAAG,UAAC,EAIT,EAAA;QAHnB,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,kBAAkB,EAAlB,UAAU,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,KAAK,GAAA,EAAA,CAAA;AACM,IAAA,QACxB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wBAAwB,EAAA;AACrC,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0BAA0B,EAAA,EAAE,KAAK,CAAO;AACvD,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEA,EAAU,CAAC,0BAA0B,EAAE;AAChD,gBAAA,oCAAoC,EAAE,UAAU;AACjD,aAAA,CAAC,EAED,EAAA,KAAK,CACF,CACF,EACP;AAXyB;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/PriceTable/index.tsx"],"sourcesContent":["import React from \"react\"\nimport classNames from \"classnames\"\n\nexport const PriceTable = ({ children }: { children: React.ReactNode }) => (\n  <div className=\"cobalt-PriceTable\">{children}</div>\n)\n\ninterface PriceTableRowProps {\n  label: string\n  value: string\n  discounted?: boolean\n}\n\nexport const PriceTableRow = ({\n  label,\n  value,\n  discounted = false,\n}: PriceTableRowProps) => (\n  <div className=\"cobalt-PriceTable__Row\">\n    <div className=\"cobalt-PriceTable__Label\">{label}</div>\n    <div\n      className={classNames(\"cobalt-PriceTable__Value\", {\n        \"cobalt-PriceTable__Value--discount\": discounted,\n      })}\n    >\n      {value}\n    </div>\n  </div>\n)\n"],"names":["classNames"],"mappings":";;;MAGa,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAiC,MACpE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mBAAmB,IAAE,QAAQ,CAAO,EACpD;MAQY,aAAa,GAAG,CAAC,EAC5B,KAAK,EACL,KAAK,EACL,UAAU,GAAG,KAAK,GACC,MACnB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wBAAwB,EAAA;AACrC,IAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0BAA0B,EAAA,EAAE,KAAK,CAAO;AACvD,IAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEA,EAAU,CAAC,0BAA0B,EAAE;AAChD,YAAA,oCAAoC,EAAE,UAAU;AACjD,SAAA,CAAC,EAED,EAAA,KAAK,CACF,CACF;;;;"}