@drivy/cobalt 0.12.0 → 0.14.0

package/components/Modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Modal/index.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef } from \"react\"\nimport cx from \"classnames\"\nimport { DialogOverlay, DialogContent } from \"@reach/dialog\"\nimport { useTransition, animated } from \"@react-spring/web\"\n\nimport useBreakpoint from \"../../hooks/useBreakpoint\"\nimport ModalHeader from \"./ModalHeader\"\nimport ModalBody from \"./ModalBody\"\nimport ModalFooter, { ModalFooterPropsType } from \"./ModalFooter\"\nimport { getScrollbarWidth } from \"../utils/\"\n\nexport type ModalPropsType = {\n  /**\n   * mandatory for A11y\n   */\n  [\"aria-label\"]: string\n  /**\n   * Function called to close the modal, providing it make the modal closeable\n   */\n  close?: () => void\n  /**\n   * React.ref of the element to focus first when the modal opens\n   */\n  initialFocusRef?: React.RefObject<HTMLElement>\n  /**\n   * State to show or hide the modal/dialog\n   */\n  isOpen: boolean\n  /**\n   * Action to fire if the user try to dismiss when the modal is not closeable\n   */\n  onDismissAttempt?: () => void\n  /**\n   * Listener called when the modal has been fully hidden\n   */\n  onHidden?: () => void\n  /**\n   * Listener called when the modal begins to show\n   */\n  onShow?: () => void\n  /**\n   * Modal title\n   */\n  title?: string\n  /**\n   * Disable/Enable body paddings (enabled by default)\n   */\n  bodySpacing?: boolean\n  /**\n   * Disable/Enable hidding overflowing absolute elements (enabled by default)\n   */\n  overflowHidden?: boolean\n  /**\n   * Modal body content\n   */\n  children: React.ReactNode\n}\n\n// Only for the API, render nothing, we use ModalFooterInternal internally\nexport const ModalFooterAPI = (_props: ModalFooterPropsType) => null\n\nexport const isModalFooterAPIComponent = (\n  component: React.ReactNode\n): component is React.ReactElement<ModalFooterPropsType> =>\n  React.isValidElement(component) && component.type === ModalFooterAPI\n\nconst _Modal = forwardRef<HTMLDivElement, ModalPropsType>(\n  (\n    {\n      [\"aria-label\"]: ariaLabel,\n      children,\n      isOpen,\n      close,\n      overflowHidden = true,\n      initialFocusRef,\n      bodySpacing,\n      onDismissAttempt,\n      onHidden,\n      onShow,\n      title,\n    }: ModalPropsType,\n    ref\n  ) => {\n    const defaultBodyStyle =\n      useRef<Record<\"paddingRight\" | \"overflow\", string>>()\n\n    useEffect(() => {\n      defaultBodyStyle.current = {\n        paddingRight: document.body.style.paddingRight,\n        overflow: document.body.style.overflow,\n      }\n    }, [])\n\n    const restoreDefaultBodyStyle = () => {\n      if (defaultBodyStyle.current) {\n        const { overflow, paddingRight } = defaultBodyStyle.current\n        setTimeout(() => {\n          // setTimeout is used to ensure that the restore style job is done as a final step\n          document.body.style.overflow = overflow\n          document.body.style.paddingRight = paddingRight\n        }, 0)\n      }\n    }\n\n    useEffect(() => {\n      // disable / enable body scroll\n      // default reach ui solution to lock body scroll is broken with range inputs on mobile (no drag)\n      // https://github.com/reach/reach-ui/issues/678\n      // dangerouslyBypassScrollLock is used to disabled it\n      // + fake scrollbar width to avoid visual layout shift\n      if (isOpen) {\n        document.body.style.paddingRight = `${\n          getScrollbarWidth() +\n          parseInt(window.getComputedStyle(document.body).paddingRight, 10)\n        }px` // to avoid visual shift due to removing an existing scrollbar\n\n        document.body.style.overflow = \"hidden\"\n      }\n      return () => {\n        isOpen && restoreDefaultBodyStyle()\n      }\n    }, [isOpen])\n\n    const { isMobile } = useBreakpoint()\n\n    const transformTransitionOut = isMobile ? 500 : -20\n\n    const springConfig = { tension: 300, friction: 30, clamp: true }\n\n    const transition = useTransition(isOpen, {\n      from: {\n        overlayOpacity: 0,\n        modalTransform: transformTransitionOut,\n      },\n      enter: {\n        overlayOpacity: 1,\n        modalTransform: 0,\n        config: springConfig,\n      },\n      leave: {\n        overlayOpacity: 0,\n        modalTransform: transformTransitionOut,\n        config: springConfig,\n      },\n      onStart: () => {\n        if (onShow) onShow()\n      },\n      onDestroyed: (isTransitioned) => {\n        !isOpen && restoreDefaultBodyStyle()\n        if (onHidden && isTransitioned) onHidden()\n      },\n    })\n\n    const AnimatedDialogOverlay = animated(DialogOverlay)\n    const AnimatedDialogContent = animated(DialogContent)\n\n    const modalFooter = React.Children.toArray(children).find((c) =>\n      isModalFooterAPIComponent(c)\n    )\n\n    let header: React.ReactNode = null\n    if (title || close) {\n      header = <ModalHeader title={title} {...(close ? { close } : {})} />\n    }\n    const hasHeader = !!title || !!close\n\n    let footer: React.ReactNode = null\n    if (React.isValidElement(modalFooter)) {\n      footer = <ModalFooter {...modalFooter.props} />\n    }\n\n    const getDismissHandler = (onClose?: ModalPropsType[\"close\"]) => {\n      if (onClose) return onClose\n      if (onDismissAttempt) return onDismissAttempt\n      return\n    }\n\n    return (\n      <>\n        {transition(\n          (styles, isOpenState) =>\n            isOpenState && (\n              <AnimatedDialogOverlay\n                initialFocusRef={initialFocusRef}\n                onDismiss={getDismissHandler(close)}\n                className=\"cobalt-modal__overlay\"\n                style={{ opacity: styles.overlayOpacity }}\n                dangerouslyBypassScrollLock\n              >\n                <AnimatedDialogContent\n                  className={cx(\"cobalt-modal\", {\n                    \"cobalt-modal--desktop\": !isMobile,\n                    \"cobalt-modal--mobile\": isMobile,\n                    \"cobalt-modal--overflowHidden\": overflowHidden,\n                  })}\n                  aria-label={ariaLabel}\n                  style={{ translateY: styles.modalTransform }}\n                  ref={ref}\n                >\n                  {header}\n                  <ModalBody\n                    bodySpacing={bodySpacing}\n                    hasHeader={hasHeader}\n                    hasFooter={!!footer}\n                  >\n                    {children}\n                  </ModalBody>\n                  {footer}\n                </AnimatedDialogContent>\n              </AnimatedDialogOverlay>\n            )\n        )}\n      </>\n    )\n  }\n)\n\n_Modal.displayName = \"Modal\"\n\nconst Modal = Object.assign(_Modal, { Footer: ModalFooterAPI })\n\nexport default Modal\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Modal/index.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef } from \"react\"\nimport cx from \"classnames\"\nimport { DialogOverlay, DialogContent } from \"@reach/dialog\"\nimport { useTransition, animated } from \"@react-spring/web\"\n\nimport useBreakpoint from \"../../hooks/useBreakpoint\"\nimport ModalHeader from \"./ModalHeader\"\nimport ModalBody from \"./ModalBody\"\nimport ModalFooter, { ModalFooterPropsType } from \"./ModalFooter\"\nimport { getScrollbarWidth } from \"../utils/\"\n\nexport type ModalPropsType = {\n  /**\n   * mandatory for A11y\n   */\n  [\"aria-label\"]: string\n  /**\n   * Function called to close the modal, providing it make the modal closeable\n   */\n  close?: () => void\n  /**\n   * React.ref of the element to focus first when the modal opens\n   */\n  initialFocusRef?: React.RefObject<HTMLElement>\n  /**\n   * State to show or hide the modal/dialog\n   */\n  isOpen: boolean\n  /**\n   * Action to fire if the user try to dismiss when the modal is not closeable\n   */\n  onDismissAttempt?: () => void\n  /**\n   * Listener called when the modal has been fully hidden\n   */\n  onHidden?: () => void\n  /**\n   * Listener called when the modal begins to show\n   */\n  onShow?: () => void\n  /**\n   * Modal title\n   */\n  title?: string\n  /**\n   * Disable/Enable body paddings (enabled by default)\n   */\n  bodySpacing?: boolean\n  /**\n   * Disable/Enable hidding overflowing absolute elements (enabled by default)\n   */\n  overflowHidden?: boolean\n  /**\n   * Modal body content\n   */\n  children: React.ReactNode\n}\n\n// Only for the API, render nothing, we use ModalFooterInternal internally\nexport const ModalFooterAPI = (_props: ModalFooterPropsType) => null\n\nexport const isModalFooterAPIComponent = (\n  component: React.ReactNode\n): component is React.ReactElement<ModalFooterPropsType> =>\n  React.isValidElement(component) && component.type === ModalFooterAPI\n\nconst _Modal = forwardRef<HTMLDivElement, ModalPropsType>(\n  (\n    {\n      [\"aria-label\"]: ariaLabel,\n      children,\n      isOpen,\n      close,\n      overflowHidden = true,\n      initialFocusRef,\n      bodySpacing,\n      onDismissAttempt,\n      onHidden,\n      onShow,\n      title,\n    }: ModalPropsType,\n    ref\n  ) => {\n    const defaultBodyStyle =\n      useRef<Record<\"paddingRight\" | \"overflow\", string>>()\n\n    useEffect(() => {\n      defaultBodyStyle.current = {\n        paddingRight: document.body.style.paddingRight,\n        overflow: document.body.style.overflow,\n      }\n    }, [])\n\n    const restoreDefaultBodyStyle = () => {\n      if (defaultBodyStyle.current) {\n        const { overflow, paddingRight } = defaultBodyStyle.current\n        setTimeout(() => {\n          // setTimeout is used to ensure that the restore style job is done as a final step\n          document.body.style.overflow = overflow\n          document.body.style.paddingRight = paddingRight\n        }, 0)\n      }\n    }\n\n    useEffect(() => {\n      // disable / enable body scroll\n      // default reach ui solution to lock body scroll is broken with range inputs on mobile (no drag)\n      // https://github.com/reach/reach-ui/issues/678\n      // dangerouslyBypassScrollLock is used to disabled it\n      // + fake scrollbar width to avoid visual layout shift\n      if (isOpen) {\n        document.body.style.paddingRight = `${\n          getScrollbarWidth() +\n          parseInt(window.getComputedStyle(document.body).paddingRight, 10)\n        }px` // to avoid visual shift due to removing an existing scrollbar\n\n        document.body.style.overflow = \"hidden\"\n      }\n      return () => {\n        isOpen && restoreDefaultBodyStyle()\n      }\n    }, [isOpen])\n\n    const { isMobile } = useBreakpoint()\n\n    const transformTransitionOut = isMobile ? 500 : -20\n\n    const springConfig = { tension: 300, friction: 30, clamp: true }\n\n    const transition = useTransition(isOpen, {\n      from: {\n        overlayOpacity: 0,\n        modalTransform: transformTransitionOut,\n      },\n      enter: {\n        overlayOpacity: 1,\n        modalTransform: 0,\n        config: springConfig,\n      },\n      leave: {\n        overlayOpacity: 0,\n        modalTransform: transformTransitionOut,\n        config: springConfig,\n      },\n      onStart: () => {\n        if (onShow) onShow()\n      },\n      onDestroyed: (isTransitioned) => {\n        !isOpen && restoreDefaultBodyStyle()\n        if (onHidden && isTransitioned) onHidden()\n      },\n    })\n\n    const AnimatedDialogOverlay = animated(DialogOverlay)\n    const AnimatedDialogContent = animated(DialogContent)\n\n    const modalFooter = React.Children.toArray(children).find((c) =>\n      isModalFooterAPIComponent(c)\n    )\n\n    let header: React.ReactNode = null\n    if (title || close) {\n      header = <ModalHeader title={title} {...(close ? { close } : {})} />\n    }\n    const hasHeader = !!title || !!close\n\n    let footer: React.ReactNode = null\n    if (React.isValidElement(modalFooter)) {\n      footer = <ModalFooter {...modalFooter.props} />\n    }\n\n    const getDismissHandler = (onClose?: ModalPropsType[\"close\"]) => {\n      if (onClose) return onClose\n      if (onDismissAttempt) return onDismissAttempt\n      return\n    }\n\n    return (\n      <>\n        {transition(\n          (styles, isOpenState) =>\n            isOpenState && (\n              <AnimatedDialogOverlay\n                initialFocusRef={initialFocusRef}\n                onDismiss={getDismissHandler(close)}\n                className=\"cobalt-modal__overlay\"\n                style={{ opacity: styles.overlayOpacity }}\n                onTouchEnd={(e) => e.stopPropagation()}\n                onMouseUp={(e) => e.stopPropagation()}\n                dangerouslyBypassScrollLock\n              >\n                <AnimatedDialogContent\n                  className={cx(\"cobalt-modal\", {\n                    \"cobalt-modal--desktop\": !isMobile,\n                    \"cobalt-modal--mobile\": isMobile,\n                    \"cobalt-modal--overflowHidden\": overflowHidden,\n                  })}\n                  aria-label={ariaLabel}\n                  style={{ translateY: styles.modalTransform }}\n                  ref={ref}\n                >\n                  {header}\n                  <ModalBody\n                    bodySpacing={bodySpacing}\n                    hasHeader={hasHeader}\n                    hasFooter={!!footer}\n                  >\n                    {children}\n                  </ModalBody>\n                  {footer}\n                </AnimatedDialogContent>\n              </AnimatedDialogOverlay>\n            )\n        )}\n      </>\n    )\n  }\n)\n\n_Modal.displayName = \"Modal\"\n\nconst Modal = Object.assign(_Modal, { Footer: ModalFooterAPI })\n\nexport default Modal\n"],"names":[],"mappings":"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"}

package/components/ModalOpenerButton/index.js

@@ -18,5 +18,5 @@ var ModalOpenerButton = function (_a) {
 var ModalAPI = function (_props) { return null; };
 ModalOpenerButton.Modal = ModalAPI;
 
-export default ModalOpenerButton;
+export { ModalOpenerButton as default };
 //# sourceMappingURL=index.js.map

package/components/Note/index.js

@@ -8,6 +8,5 @@ var Note = function (_a) {
         }) }, children));
 };
 
-export default Note;
-export { Note };
+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":";;;IAaa,IAAI,GAAG,UAAC,EAAqD;QAAnD,QAAQ,cAAA,EAAE,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EAAE,SAAS,eAAA;IAAkB,QAC7E,6BACE,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE;YACtC,wBAAwB,EAAE,SAAS;SACpC,CAAC,IAED,QAAQ,CACL;AAPuE;;;;;"}
+{"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":";;;IAaa,IAAI,GAAG,UAAC,EAAqD;QAAnD,QAAQ,cAAA,EAAE,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EAAE,SAAS,eAAA;IAAkB,QAC7E,6BACE,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE;YACtC,wBAAwB,EAAE,SAAS;SACpC,CAAC,IAED,QAAQ,CACL;AAPuE;;;;"}

package/components/PhotoDropzone/index.js

@@ -0,0 +1,189 @@
+import { __read, __awaiter, __generator } from '../../_virtual/_tslib.js';
+import VisuallyHidden from '@reach/visually-hidden';
+import React, { useRef, useState } from 'react';
+import cx from 'classnames';
+import '../Icon/index.js';
+import { validateFile } from '../utils/validateFile.js';
+import Popover from '../Popover/index.js';
+import ContextualWarningCircleFilledIcon from '../Icon/__generated__/ContextualWarningCircleFilledIcon.js';
+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) {
+    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) {
+        event && preventEventDefaults(event);
+        setShowDeletePopover(true);
+    };
+    var closeDeletePopover = function (event) {
+        event && preventEventDefaults(event);
+        setShowDeletePopover(false);
+    };
+    var onDropzoneMouseEnter = function (event) {
+        event && preventEventDefaults(event);
+        if (imagePreviewUrl)
+            setDisplayDeletion(true);
+    };
+    var onDropzoneMouseLeave = function (event) {
+        event && preventEventDefaults(event);
+        if (displayDeletion && !showDeletePopover)
+            setDisplayDeletion(false);
+    };
+    var onDropzoneClick = function (event) {
+        var _a;
+        event && preventEventDefaults(event);
+        if (isLoading)
+            return;
+        if (isErrored)
+            setIsErrored(false);
+        if (imagePreviewUrl) {
+            if (showDeletePopover)
+                closeDeletePopover();
+            return setDisplayDeletion(!displayDeletion);
+        }
+        (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    };
+    var onDropzoneKey = function (event) {
+        if (showDeletePopover)
+            return;
+        if (isEnterOrSpaceKey(event)) {
+            onDropzoneClick();
+        }
+    };
+    var onDeleteKey = function (event) {
+        if (isEnterOrSpaceKey(event)) {
+            openDeletePopover(event);
+        }
+    };
+    var onDelete = function () {
+        if (fileInputRef.current)
+            fileInputRef.current.value = "";
+        closeDeletePopover();
+        setImagePreviewUrl("");
+        onPhotoDelete && onPhotoDelete();
+    };
+    var onDragEnter = function (event) {
+        preventEventDefaults(event);
+        if (isErrored)
+            setIsErrored(false);
+        !imagePreviewUrl && setIsDragging(true);
+    };
+    var onDragLeave = function (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*/];
+            }
+        });
+    }); };
+    var onFileInputChanged = function (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) {
+        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
+        ? closeDeletePopover
+        : openDeletePopover;
+    return (React.createElement("div", { tabIndex: 0, className: cx("cobalt-photo-dropzone", className, {
+            "cobalt-photo-dropzone--filled": imagePreviewUrl,
+            "cobalt-photo-dropzone--dragging": isDragging,
+            "cobalt-photo-dropzone--loading": isLoading,
+            "cobalt-photo-dropzone--errored": isErrored,
+        }), onMouseEnter: onDropzoneMouseEnter, onMouseLeave: onDropzoneMouseLeave, onDragEnter: onDragEnter, onDragLeave: onDragLeave, 
+        // Not on click because we also use mouseEnter listener
+        onMouseUp: onDropzoneClick, onTouchEnd: onDropzoneClick, onKeyUp: onDropzoneKey, onDrop: onDrop, 
+        // Need to reset those listeners to avoid default browser behaviour
+        onDragStart: preventEventDefaults, onDragEnd: preventEventDefaults, onDragOver: preventEventDefaults },
+        isErrored && (React.createElement("div", { className: "cobalt-photo-dropzone__description" },
+            React.createElement(ContextualWarningCircleFilledIcon, { color: "red" }),
+            errorContent(ACCEPTED_TYPES_LOCALE_STRING, ACCEPTED_MAX_SIZE_MB))),
+        isLoading && (React.createElement("div", { className: "cobalt-photo-dropzone__description" },
+            React.createElement(LoadingIcon, null))),
+        !isLoading &&
+            !isErrored &&
+            (imagePreviewUrl ? (React.createElement(React.Fragment, null,
+                React.createElement("img", { className: "cobalt-photo-dropzone__preview", src: imagePreviewUrl }),
+                React.createElement("div", null,
+                    React.createElement("button", { className: cx("cobalt-photo-dropzone__delete-button", {
+                            "cobalt-photo-dropzone__delete-button--triggered": displayDeletion,
+                        }), ref: deleteButtonRef, 
+                        // Must follow the click listeners on the dropzone,
+                        // in order to have the correct events bubbling
+                        onTouchEnd: onDeleteButtonClick, onMouseUp: onDeleteButtonClick, onKeyUp: onDeleteKey },
+                        React.createElement(VisuallyHidden, null, "Delete"),
+                        React.createElement(BinIcon, { color: "indigo" })),
+                    React.createElement(Popover, { targetRef: deleteButtonRef, isOpen: showDeletePopover, close: closeDeletePopover, placement: "left-start", distance: 12, bodySpacing: false, arrow: true }, deletePopoverContent(onDelete, closeDeletePopover))))) : (React.createElement("div", { className: "cobalt-photo-dropzone__description cobalt-photo-dropzone__description--strong" },
+                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 }))));
+};
+
+export { PhotoDropzone as default };
+//# sourceMappingURL=index.js.map

package/components/PhotoDropzone/index.js.map

@@ -0,0 +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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"}

package/components/Pill/index.js

@@ -21,6 +21,5 @@ var PillGroup = function (_a) {
     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)); })));
 };
 
-export default Pill;
-export { Pill, PillGroup };
+export { Pill, PillGroup, Pill as default };
 //# sourceMappingURL=index.js.map

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;IAUP,IAAI,GAAG,UAAC,EAOL;QANd,IAAI,UAAA,EACJ,aAAgB,EAAhB,KAAK,mBAAG,QAAQ,KAAA,EAChB,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,SAAS,eAAA,EACT,IAAI,UAAA;IAEJ,IAAM,UAAU,GAAG,IAAI,IACrB,8BAAM,SAAS,EAAC,mBAAmB;QACjC,oBAAC,IAAI,IACH,MAAM,EAAE,IAAI,EACZ,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,SAAS,GAAG,OAAO,GAAG,KAAK,GAClC,CACG,IACL,IAAI,CAAA;IAER,QACE,6BACE,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,aAAa,EAAE;YACtC,yBAAyB,EAAE,KAAK,KAAK,OAAO;YAC5C,wBAAwB,EAAE,SAAS;YACnC,oBAAoB,EAAE,IAAI,KAAK,OAAO;SACvC,CAAC;QAED,UAAU;;QAAG,QAAQ,CAClB,EACP;AACH,EAAC;IAMY,SAAS,GAAG,UAAC,EAAgC;QAA9B,QAAQ,cAAA;IAClC,QACE,6BAAK,SAAS,EAAC,kBAAkB,IAC9B,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,UAAC,KAAK,EAAE,KAAK,IAAK,QAChD,6BAAK,SAAS,EAAC,wBAAwB,EAAC,GAAG,EAAE,KAAK,IAC/C,KAAK,CACF,IACP,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,IAAM,SAAS,GAAG,EAAE,CAAA;IAUP,IAAI,GAAG,UAAC,EAOL;QANd,IAAI,UAAA,EACJ,aAAgB,EAAhB,KAAK,mBAAG,QAAQ,KAAA,EAChB,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,SAAS,eAAA,EACT,IAAI,UAAA;IAEJ,IAAM,UAAU,GAAG,IAAI,IACrB,8BAAM,SAAS,EAAC,mBAAmB;QACjC,oBAAC,IAAI,IACH,MAAM,EAAE,IAAI,EACZ,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,SAAS,GAAG,OAAO,GAAG,KAAK,GAClC,CACG,IACL,IAAI,CAAA;IAER,QACE,6BACE,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,aAAa,EAAE;YACtC,yBAAyB,EAAE,KAAK,KAAK,OAAO;YAC5C,wBAAwB,EAAE,SAAS;YACnC,oBAAoB,EAAE,IAAI,KAAK,OAAO;SACvC,CAAC;QAED,UAAU;;QAAG,QAAQ,CAClB,EACP;AACH,EAAC;IAMY,SAAS,GAAG,UAAC,EAAgC;QAA9B,QAAQ,cAAA;IAClC,QACE,6BAAK,SAAS,EAAC,kBAAkB,IAC9B,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,UAAC,KAAK,EAAE,KAAK,IAAK,QAChD,6BAAK,SAAS,EAAC,wBAAwB,EAAC,GAAG,EAAE,KAAK,IAC/C,KAAK,CACF,IACP,CAAC,CACE,EACP;AACH;;;;"}

package/components/Popover/LazyTippy.js

@@ -7,5 +7,5 @@ var LazyTippy = function (props) {
     return props.visible ? React.createElement(Tippy, __assign({}, props)) : null;
 };
 
-export default LazyTippy;
+export { LazyTippy as default };
 //# sourceMappingURL=LazyTippy.js.map

package/components/Popover/index.js

@@ -49,8 +49,8 @@ var Popover = function (_a) {
             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: defaultTippyProps.theme + " " + theme, offset: [0, distance] }, { arrow: arrow, placement: placement, zIndex: zIndex }, { onHidden: onTippyClose, onShow: onTippyOpen, onClickOutside: close })));
+    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 })));
 };
 
-export default Popover;
+export { Popover as default };
 //# sourceMappingURL=index.js.map

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/ProgressBar/index.js

@@ -14,7 +14,7 @@ var ProgressBar = function (_a) {
                     React.createElement("g", { fill: "none", fillRule: "evenodd", stroke: "none", strokeWidth: "1" },
                         React.createElement("path", { d: "M12,22 C17.5228475,22 22,17.5228475 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 Z M10.039794,16.4579825 L10.3868138,16.8048824 C10.7382605,17.1562077 11.3079394,17.1562077 11.6593861,16.8048824 L12.0064058,16.4579825 L18.3862862,10.0803058 C18.7379046,9.72880879 18.7379046,9.15879074 18.3862862,8.80729375 L17.6922467,8.11349398 C17.3408,7.76216867 16.771121,7.76216867 16.4196743,8.11349398 L11.0398301,13.5249288 L8.08032565,10.5664466 C7.72887895,10.2151213 7.15920001,10.2151213 6.80775331,10.5664466 L6.11371383,11.2602463 C5.76209539,11.6117433 5.76209539,12.1817614 6.11371383,12.5332584 L10.039794,16.4579825 Z", fill: "#b4bbc6" })))))),
         React.createElement("div", { className: "cobalt-ProgressBar__Container" },
-            React.createElement("div", { className: "cobalt-ProgressBar__Foreground", style: { width: progress + "%" } }),
+            React.createElement("div", { className: "cobalt-ProgressBar__Foreground", style: { width: "".concat(progress, "%") } }),
             tick && React.createElement("div", { className: "cobalt-ProgressBar__Tick" }))));
 };
 

package/components/ProgressBar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/ProgressBar/index.tsx"],"sourcesContent":["import React from \"react\"\n\nexport interface ProgressBarProps {\n  children: React.ReactNode\n  progress: number\n  /**\n   * Visual tick at the end of the progress bar\n   * @default false\n   */\n  tick?: boolean\n}\n\nexport const ProgressBar = ({\n  progress,\n  tick = false,\n  children,\n}: ProgressBarProps) => (\n  <div>\n    <div className=\"cobalt-ProgressBar__TitleSection\">\n      <div>\n        <div className=\"cobalt-ProgressBar__Progression\">{progress}%</div>\n        <div className=\"cobalt-ProgressBar__Title\">{children}</div>\n      </div>\n      {progress === 100 && (\n        <div className=\"cobalt-ProgressBar__CompletedCheckbox\">\n          <svg\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <g fill=\"none\" fillRule=\"evenodd\" stroke=\"none\" strokeWidth=\"1\">\n              <path\n                d=\"M12,22 C17.5228475,22 22,17.5228475 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 Z M10.039794,16.4579825 L10.3868138,16.8048824 C10.7382605,17.1562077 11.3079394,17.1562077 11.6593861,16.8048824 L12.0064058,16.4579825 L18.3862862,10.0803058 C18.7379046,9.72880879 18.7379046,9.15879074 18.3862862,8.80729375 L17.6922467,8.11349398 C17.3408,7.76216867 16.771121,7.76216867 16.4196743,8.11349398 L11.0398301,13.5249288 L8.08032565,10.5664466 C7.72887895,10.2151213 7.15920001,10.2151213 6.80775331,10.5664466 L6.11371383,11.2602463 C5.76209539,11.6117433 5.76209539,12.1817614 6.11371383,12.5332584 L10.039794,16.4579825 Z\"\n                fill=\"#b4bbc6\"\n              />\n            </g>\n          </svg>\n        </div>\n      )}\n    </div>\n    <div className=\"cobalt-ProgressBar__Container\">\n      <div\n        className=\"cobalt-ProgressBar__Foreground\"\n        style={{ width: `${progress}%` }}\n      />\n      {tick && <div className=\"cobalt-ProgressBar__Tick\" />}\n    </div>\n  </div>\n)\n"],"names":[],"mappings":";;IAYa,WAAW,GAAG,UAAC,EAIT;QAHjB,QAAQ,cAAA,EACR,YAAY,EAAZ,IAAI,mBAAG,KAAK,KAAA,EACZ,QAAQ,cAAA;IACc,QACtB;QACE,6BAAK,SAAS,EAAC,kCAAkC;YAC/C;gBACE,6BAAK,SAAS,EAAC,iCAAiC;oBAAE,QAAQ;wBAAQ;gBAClE,6BAAK,SAAS,EAAC,2BAA2B,IAAE,QAAQ,CAAO,CACvD;YACL,QAAQ,KAAK,GAAG,KACf,6BAAK,SAAS,EAAC,uCAAuC;gBACpD,6BACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B;oBAElC,2BAAG,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS,EAAC,MAAM,EAAC,MAAM,EAAC,WAAW,EAAC,GAAG;wBAC7D,8BACE,CAAC,EAAC,sqBAAsqB,EACxqB,IAAI,EAAC,SAAS,GACd,CACA,CACA,CACF,CACP,CACG;QACN,6BAAK,SAAS,EAAC,+BAA+B;YAC5C,6BACE,SAAS,EAAC,gCAAgC,EAC1C,KAAK,EAAE,EAAE,KAAK,EAAK,QAAQ,MAAG,EAAE,GAChC;YACD,IAAI,IAAI,6BAAK,SAAS,EAAC,0BAA0B,GAAG,CACjD,CACF;AAhCgB;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/ProgressBar/index.tsx"],"sourcesContent":["import React from \"react\"\n\nexport interface ProgressBarProps {\n  children: React.ReactNode\n  progress: number\n  /**\n   * Visual tick at the end of the progress bar\n   * @default false\n   */\n  tick?: boolean\n}\n\nexport const ProgressBar = ({\n  progress,\n  tick = false,\n  children,\n}: ProgressBarProps) => (\n  <div>\n    <div className=\"cobalt-ProgressBar__TitleSection\">\n      <div>\n        <div className=\"cobalt-ProgressBar__Progression\">{progress}%</div>\n        <div className=\"cobalt-ProgressBar__Title\">{children}</div>\n      </div>\n      {progress === 100 && (\n        <div className=\"cobalt-ProgressBar__CompletedCheckbox\">\n          <svg\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <g fill=\"none\" fillRule=\"evenodd\" stroke=\"none\" strokeWidth=\"1\">\n              <path\n                d=\"M12,22 C17.5228475,22 22,17.5228475 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 Z M10.039794,16.4579825 L10.3868138,16.8048824 C10.7382605,17.1562077 11.3079394,17.1562077 11.6593861,16.8048824 L12.0064058,16.4579825 L18.3862862,10.0803058 C18.7379046,9.72880879 18.7379046,9.15879074 18.3862862,8.80729375 L17.6922467,8.11349398 C17.3408,7.76216867 16.771121,7.76216867 16.4196743,8.11349398 L11.0398301,13.5249288 L8.08032565,10.5664466 C7.72887895,10.2151213 7.15920001,10.2151213 6.80775331,10.5664466 L6.11371383,11.2602463 C5.76209539,11.6117433 5.76209539,12.1817614 6.11371383,12.5332584 L10.039794,16.4579825 Z\"\n                fill=\"#b4bbc6\"\n              />\n            </g>\n          </svg>\n        </div>\n      )}\n    </div>\n    <div className=\"cobalt-ProgressBar__Container\">\n      <div\n        className=\"cobalt-ProgressBar__Foreground\"\n        style={{ width: `${progress}%` }}\n      />\n      {tick && <div className=\"cobalt-ProgressBar__Tick\" />}\n    </div>\n  </div>\n)\n"],"names":[],"mappings":";;IAYa,WAAW,GAAG,UAAC,EAIT;QAHjB,QAAQ,cAAA,EACR,YAAY,EAAZ,IAAI,mBAAG,KAAK,KAAA,EACZ,QAAQ,cAAA;IACc,QACtB;QACE,6BAAK,SAAS,EAAC,kCAAkC;YAC/C;gBACE,6BAAK,SAAS,EAAC,iCAAiC;oBAAE,QAAQ;wBAAQ;gBAClE,6BAAK,SAAS,EAAC,2BAA2B,IAAE,QAAQ,CAAO,CACvD;YACL,QAAQ,KAAK,GAAG,KACf,6BAAK,SAAS,EAAC,uCAAuC;gBACpD,6BACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B;oBAElC,2BAAG,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS,EAAC,MAAM,EAAC,MAAM,EAAC,WAAW,EAAC,GAAG;wBAC7D,8BACE,CAAC,EAAC,sqBAAsqB,EACxqB,IAAI,EAAC,SAAS,GACd,CACA,CACA,CACF,CACP,CACG;QACN,6BAAK,SAAS,EAAC,+BAA+B;YAC5C,6BACE,SAAS,EAAC,gCAAgC,EAC1C,KAAK,EAAE,EAAE,KAAK,EAAE,UAAG,QAAQ,MAAG,EAAE,GAChC;YACD,IAAI,IAAI,6BAAK,SAAS,EAAC,0BAA0B,GAAG,CACjD,CACF;AAhCgB;;;;"}

package/components/Tabs/index.js

@@ -15,7 +15,7 @@ var isTabComponent = function (component) {
 };
 var InternalTab = function (props) {
     var href = props.href, children = props.children, isSelected = props.isSelected;
-    return (React.createElement(Tab$1, __assign({ as: "button" }, props, (href ? { href: href, as: "a" } : {}), { className: cx("cobalt-tabs__label", {
+    return (React.createElement(Tab$1, __assign({}, props, (href ? { href: href, as: "a" } : { as: "button" }), { className: cx("cobalt-tabs__label", {
             "cobalt-tabs__label--selected": isSelected,
         }) }), typeof children === "function" ? children(isSelected) : children));
 };
@@ -138,6 +138,5 @@ var Tabs = function (_a) {
 Tabs.Tab = Tab;
 Tabs.displayName = "Tabs";
 
-export default Tabs;
-export { Tab, Tabs };
+export { Tab, Tabs, Tabs as default };
 //# sourceMappingURL=index.js.map

package/components/Tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Tabs/index.tsx"],"sourcesContent":["import React, {\n  FC,\n  useRef,\n  useLayoutEffect,\n  useState,\n  useCallback,\n} from \"react\"\nimport {\n  Tabs as ReachTabs,\n  TabList as ReachTabList,\n  Tab as ReachTab,\n  TabPanels as ReachTabPanels,\n  TabPanel as ReachTabPanel,\n} from \"@reach/tabs\"\nimport cx from \"classnames\"\nimport { useSpring } from \"@react-spring/web\"\n\nimport { throttle } from \"../utils\"\nimport { Icon } from \"../Icon\"\n\nconst SCROLL_STEP = 150\n\nexport type TabsPropsType = {\n  /**\n   * Index of the initial actived tab (first tab by default)\n   */\n  defaultTabIndex?: number\n  /**\n   * Method to be run on tab change\n   */\n  onChange?: (index: number) => void\n  /**\n   * Left aligned tabs with no uppercased labels\n   */\n  subLevel?: boolean\n}\n\ntype TabPropsType = {\n  /**\n   * Label/title of the tab\n   */\n  label: string | React.ReactNode | ((isSelected?: boolean) => React.ReactNode)\n  /**\n   * Hypertext link. If provided, the tab will be an anchor\n   */\n  href?: string\n}\n\ntype InternalTabPropsType = {\n  isSelected?: boolean // Provided by Reach TabList component\n  href?: string\n  children: TabPropsType[\"label\"]\n}\n\n// Only for the API, render nothing, we use InternalTab component internally\nexport const Tab: FC<TabPropsType> = () => null\nTab.displayName = \"Tab\"\n\nconst isTabComponent = (\n  component: React.ReactNode\n): component is React.ReactElement<React.PropsWithChildren<TabPropsType>> =>\n  React.isValidElement(component) && component.type === Tab\n\nconst InternalTab = (props: InternalTabPropsType) => {\n  const { href, children, isSelected } = props\n  return (\n    <ReachTab\n      as=\"button\"\n      {...props}\n      // Not checked by TS, because of props spread usage\n      {...(href ? { href, as: \"a\" } : {})}\n      className={cx(\"cobalt-tabs__label\", {\n        \"cobalt-tabs__label--selected\": isSelected,\n      })}\n    >\n      {typeof children === \"function\" ? children(isSelected) : children}\n    </ReachTab>\n  )\n}\nInternalTab.displayName = \"InternalTab\"\n\nexport const Tabs: FC<TabsPropsType> & { Tab: FC<TabPropsType> } = ({\n  children,\n  defaultTabIndex,\n  onChange,\n  subLevel,\n}) => {\n  const [scrollDistance, setScrollDistance] = useState(0)\n  const [scrollButtonsEnabled, setScrollButtonsEnabled] = useState({\n    prev: false,\n    next: true,\n  })\n\n  const labelListRef = useRef<HTMLDivElement>(null)\n\n  const [, scrollLeftSpringRef] = useSpring(() => ({\n    config: { tension: 300, friction: 30, clamp: true },\n    springScrollLeft: 0,\n    onChange: {\n      springScrollLeft: (springScrollLeft) => {\n        if (labelListRef?.current) {\n          labelListRef.current.scrollLeft =\n            springScrollLeft as unknown as number\n        }\n      },\n    },\n  }))\n\n  const updateScrollDistance = () => {\n    const scrollWidth = labelListRef?.current?.scrollWidth || 0\n    const clientWidth = labelListRef?.current?.clientWidth || 0\n    setScrollDistance(scrollWidth && clientWidth && scrollWidth - clientWidth)\n  }\n\n  const updateScrollButtonsState = () => {\n    if (labelListRef?.current) {\n      const newScrollButtonStates = { prev: true, next: true }\n      if (labelListRef.current.scrollLeft <= 0) {\n        newScrollButtonStates.prev = false\n      }\n      if (scrollDistance && labelListRef.current.scrollLeft >= scrollDistance) {\n        newScrollButtonStates.next = false\n      }\n      setScrollButtonsEnabled(newScrollButtonStates)\n    }\n  }\n\n  const updateStates = () => {\n    updateScrollDistance()\n    updateScrollButtonsState()\n  }\n\n  useLayoutEffect(() => {\n    const throttledUpdate = throttle(updateStates, 300)\n    window.addEventListener(\"resize\", throttledUpdate)\n    return () => window.removeEventListener(\"resize\", throttledUpdate)\n  }, [scrollDistance])\n\n  // When the bar became scrollable/not scrollable, the scrollWidth will change\n  // so we update states according to its change\n  useLayoutEffect(() => {\n    updateStates()\n  }, [labelListRef?.current?.scrollWidth])\n\n  const tabsPropsArray: TabPropsType[] = []\n  const tabsChildren: typeof children[] = []\n  let matchedHrefIndex: number | undefined = undefined\n  React.Children.forEach(children, (child, index) => {\n    if (isTabComponent(child)) {\n      const { children: tabChildren, ...tabProps } = child.props\n      tabsPropsArray.push(tabProps)\n      // if no children, it will be null, nothing will be rendered\n      tabsChildren.push(tabChildren)\n      if (tabProps.href === window.location.pathname) {\n        matchedHrefIndex = index\n      }\n    }\n  })\n\n  const scrollTabs = (scrollAmount: number) => {\n    if (labelListRef?.current) {\n      const newScrollButtonStates = { prev: true, next: true }\n      const computedScrollLeft = labelListRef.current.scrollLeft + scrollAmount\n      let newScrollLeft = computedScrollLeft\n\n      // not scrolled at all\n      if (computedScrollLeft <= 0) {\n        newScrollButtonStates.prev = false\n        newScrollLeft = 0\n      }\n      // scrolled at maximum\n      if (scrollDistance && computedScrollLeft >= scrollDistance) {\n        newScrollButtonStates.next = false\n        newScrollLeft = scrollDistance\n      }\n\n      setScrollButtonsEnabled(newScrollButtonStates)\n      scrollLeftSpringRef.start({\n        springScrollLeft: newScrollLeft,\n        immediate: false,\n      })\n    }\n  }\n  const onScrollPrev = useCallback(\n    () => scrollTabs(-SCROLL_STEP),\n    [scrollButtonsEnabled, labelListRef?.current?.scrollLeft]\n  )\n  const onScrollNext = useCallback(\n    () => scrollTabs(SCROLL_STEP),\n    [scrollButtonsEnabled, labelListRef?.current?.scrollLeft]\n  )\n\n  const isScrollable = !!scrollDistance\n\n  const handleWheel = throttle(() => {\n    if (labelListRef?.current) {\n      updateScrollButtonsState()\n      // Don't animate\n      scrollLeftSpringRef.set({\n        springScrollLeft: labelListRef.current.scrollLeft,\n      })\n    }\n  }, 300)\n\n  return (\n    <ReachTabs\n      className=\"cobalt-tabs\"\n      defaultIndex={matchedHrefIndex || defaultTabIndex}\n      onChange={onChange}\n    >\n      <ReachTabList\n        className={cx(\"cobalt-tabs__labels\", {\n          \"cobalt-tabs__labels--scrollable\": isScrollable,\n          \"cobalt-tabs__labels--subLevel\": subLevel,\n        })}\n        onWheel={handleWheel}\n        ref={labelListRef}\n      >\n        {tabsPropsArray.map((props, index) => (\n          <InternalTab key={index} href={props.href}>\n            {props.label}\n          </InternalTab>\n        ))}\n      </ReachTabList>\n      {isScrollable && (\n        <>\n          <button\n            className=\"cobalt-tabs__nav-prev\"\n            onClick={onScrollPrev}\n            disabled={!scrollButtonsEnabled.prev}\n          >\n            <span className=\"cobalt-tabs__nav-icon\">\n              <Icon source=\"chevronLeft\" color=\"indigo\" />\n            </span>\n          </button>\n          <button\n            className=\"cobalt-tabs__nav-next\"\n            onClick={onScrollNext}\n            disabled={!scrollButtonsEnabled.next}\n          >\n            <span className=\"cobalt-tabs__nav-icon\">\n              <Icon source=\"chevronRight\" color=\"indigo\" />\n            </span>\n          </button>\n        </>\n      )}\n      {!!tabsChildren.length && (\n        <ReachTabPanels>\n          {tabsChildren.map((tabChildren, index) => (\n            <ReachTabPanel className=\"cobalt-tabs__panel\" key={index}>\n              {tabChildren}\n            </ReachTabPanel>\n          ))}\n        </ReachTabPanels>\n      )}\n    </ReachTabs>\n  )\n}\nTabs.Tab = Tab\nTabs.displayName = \"Tabs\"\n\nexport default Tabs\n"],"names":["ReachTab","ReachTabs","ReachTabList","ReachTabPanels","ReachTabPanel"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Tabs/index.tsx"],"sourcesContent":["import React, {\n  FC,\n  useRef,\n  useLayoutEffect,\n  useState,\n  useCallback,\n} from \"react\"\nimport {\n  Tabs as ReachTabs,\n  TabList as ReachTabList,\n  Tab as ReachTab,\n  TabPanels as ReachTabPanels,\n  TabPanel as ReachTabPanel,\n} from \"@reach/tabs\"\nimport cx from \"classnames\"\nimport { useSpring } from \"@react-spring/web\"\n\nimport { throttle } from \"../utils\"\nimport { Icon } from \"../Icon\"\n\nconst SCROLL_STEP = 150\n\nexport type TabsPropsType = {\n  /**\n   * Index of the initial actived tab (first tab by default)\n   */\n  defaultTabIndex?: number\n  /**\n   * Method to be run on tab change\n   */\n  onChange?: (index: number) => void\n  /**\n   * Left aligned tabs with no uppercased labels\n   */\n  subLevel?: boolean\n}\n\ntype TabPropsType = {\n  /**\n   * Label/title of the tab\n   */\n  label: string | React.ReactNode | ((isSelected?: boolean) => React.ReactNode)\n  /**\n   * Hypertext link. If provided, the tab will be an anchor\n   */\n  href?: string\n}\n\ntype InternalTabPropsType = {\n  isSelected?: boolean // Provided by Reach TabList component\n  href?: string\n  children: TabPropsType[\"label\"]\n}\n\n// Only for the API, render nothing, we use InternalTab component internally\nexport const Tab: FC<TabPropsType> = () => null\nTab.displayName = \"Tab\"\n\nconst isTabComponent = (\n  component: React.ReactNode\n): component is React.ReactElement<React.PropsWithChildren<TabPropsType>> =>\n  React.isValidElement(component) && component.type === Tab\n\nconst InternalTab = (props: InternalTabPropsType) => {\n  const { href, children, isSelected } = props\n  return (\n    <ReachTab\n      {...props}\n      {...(href ? { href, as: \"a\" } : { as: \"button\" })}\n      className={cx(\"cobalt-tabs__label\", {\n        \"cobalt-tabs__label--selected\": isSelected,\n      })}\n    >\n      {typeof children === \"function\" ? children(isSelected) : children}\n    </ReachTab>\n  )\n}\nInternalTab.displayName = \"InternalTab\"\n\nexport const Tabs: FC<TabsPropsType> & { Tab: FC<TabPropsType> } = ({\n  children,\n  defaultTabIndex,\n  onChange,\n  subLevel,\n}) => {\n  const [scrollDistance, setScrollDistance] = useState(0)\n  const [scrollButtonsEnabled, setScrollButtonsEnabled] = useState({\n    prev: false,\n    next: true,\n  })\n\n  const labelListRef = useRef<HTMLDivElement>(null)\n\n  const [, scrollLeftSpringRef] = useSpring(() => ({\n    config: { tension: 300, friction: 30, clamp: true },\n    springScrollLeft: 0,\n    onChange: {\n      springScrollLeft: (springScrollLeft) => {\n        if (labelListRef?.current) {\n          labelListRef.current.scrollLeft =\n            springScrollLeft as unknown as number\n        }\n      },\n    },\n  }))\n\n  const updateScrollDistance = () => {\n    const scrollWidth = labelListRef?.current?.scrollWidth || 0\n    const clientWidth = labelListRef?.current?.clientWidth || 0\n    setScrollDistance(scrollWidth && clientWidth && scrollWidth - clientWidth)\n  }\n\n  const updateScrollButtonsState = () => {\n    if (labelListRef?.current) {\n      const newScrollButtonStates = { prev: true, next: true }\n      if (labelListRef.current.scrollLeft <= 0) {\n        newScrollButtonStates.prev = false\n      }\n      if (scrollDistance && labelListRef.current.scrollLeft >= scrollDistance) {\n        newScrollButtonStates.next = false\n      }\n      setScrollButtonsEnabled(newScrollButtonStates)\n    }\n  }\n\n  const updateStates = () => {\n    updateScrollDistance()\n    updateScrollButtonsState()\n  }\n\n  useLayoutEffect(() => {\n    const throttledUpdate = throttle(updateStates, 300)\n    window.addEventListener(\"resize\", throttledUpdate)\n    return () => window.removeEventListener(\"resize\", throttledUpdate)\n  }, [scrollDistance])\n\n  // When the bar became scrollable/not scrollable, the scrollWidth will change\n  // so we update states according to its change\n  useLayoutEffect(() => {\n    updateStates()\n  }, [labelListRef?.current?.scrollWidth])\n\n  const tabsPropsArray: TabPropsType[] = []\n  const tabsChildren: typeof children[] = []\n  let matchedHrefIndex: number | undefined = undefined\n  React.Children.forEach(children, (child, index) => {\n    if (isTabComponent(child)) {\n      const { children: tabChildren, ...tabProps } = child.props\n      tabsPropsArray.push(tabProps)\n      // if no children, it will be null, nothing will be rendered\n      tabsChildren.push(tabChildren)\n      if (tabProps.href === window.location.pathname) {\n        matchedHrefIndex = index\n      }\n    }\n  })\n\n  const scrollTabs = (scrollAmount: number) => {\n    if (labelListRef?.current) {\n      const newScrollButtonStates = { prev: true, next: true }\n      const computedScrollLeft = labelListRef.current.scrollLeft + scrollAmount\n      let newScrollLeft = computedScrollLeft\n\n      // not scrolled at all\n      if (computedScrollLeft <= 0) {\n        newScrollButtonStates.prev = false\n        newScrollLeft = 0\n      }\n      // scrolled at maximum\n      if (scrollDistance && computedScrollLeft >= scrollDistance) {\n        newScrollButtonStates.next = false\n        newScrollLeft = scrollDistance\n      }\n\n      setScrollButtonsEnabled(newScrollButtonStates)\n      scrollLeftSpringRef.start({\n        springScrollLeft: newScrollLeft,\n        immediate: false,\n      })\n    }\n  }\n  const onScrollPrev = useCallback(\n    () => scrollTabs(-SCROLL_STEP),\n    [scrollButtonsEnabled, labelListRef?.current?.scrollLeft]\n  )\n  const onScrollNext = useCallback(\n    () => scrollTabs(SCROLL_STEP),\n    [scrollButtonsEnabled, labelListRef?.current?.scrollLeft]\n  )\n\n  const isScrollable = !!scrollDistance\n\n  const handleWheel = throttle(() => {\n    if (labelListRef?.current) {\n      updateScrollButtonsState()\n      // Don't animate\n      scrollLeftSpringRef.set({\n        springScrollLeft: labelListRef.current.scrollLeft,\n      })\n    }\n  }, 300)\n\n  return (\n    <ReachTabs\n      className=\"cobalt-tabs\"\n      defaultIndex={matchedHrefIndex || defaultTabIndex}\n      onChange={onChange}\n    >\n      <ReachTabList\n        className={cx(\"cobalt-tabs__labels\", {\n          \"cobalt-tabs__labels--scrollable\": isScrollable,\n          \"cobalt-tabs__labels--subLevel\": subLevel,\n        })}\n        onWheel={handleWheel}\n        ref={labelListRef}\n      >\n        {tabsPropsArray.map((props, index) => (\n          <InternalTab key={index} href={props.href}>\n            {props.label}\n          </InternalTab>\n        ))}\n      </ReachTabList>\n      {isScrollable && (\n        <>\n          <button\n            className=\"cobalt-tabs__nav-prev\"\n            onClick={onScrollPrev}\n            disabled={!scrollButtonsEnabled.prev}\n          >\n            <span className=\"cobalt-tabs__nav-icon\">\n              <Icon source=\"chevronLeft\" color=\"indigo\" />\n            </span>\n          </button>\n          <button\n            className=\"cobalt-tabs__nav-next\"\n            onClick={onScrollNext}\n            disabled={!scrollButtonsEnabled.next}\n          >\n            <span className=\"cobalt-tabs__nav-icon\">\n              <Icon source=\"chevronRight\" color=\"indigo\" />\n            </span>\n          </button>\n        </>\n      )}\n      {!!tabsChildren.length && (\n        <ReachTabPanels>\n          {tabsChildren.map((tabChildren, index) => (\n            <ReachTabPanel className=\"cobalt-tabs__panel\" key={index}>\n              {tabChildren}\n            </ReachTabPanel>\n          ))}\n        </ReachTabPanels>\n      )}\n    </ReachTabs>\n  )\n}\nTabs.Tab = Tab\nTabs.displayName = \"Tabs\"\n\nexport default Tabs\n"],"names":["ReachTab","ReachTabs","ReachTabList","ReachTabPanels","ReachTabPanel"],"mappings":"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"}

package/components/utils/Timer.js

@@ -22,5 +22,5 @@ var Timer = /** @class */ (function () {
     return Timer;
 }());
 
-export default Timer;
+export { Timer as default };
 //# sourceMappingURL=Timer.js.map

package/components/utils/capitalize.js

@@ -4,5 +4,5 @@ function capitalize(s) {
     return s.charAt(0).toUpperCase() + s.slice(1);
 }
 
-export default capitalize;
+export { capitalize as default };
 //# sourceMappingURL=capitalize.js.map

package/components/utils/eqSet.js

@@ -21,5 +21,5 @@ function eqSet(a, b) {
     return true;
 }
 
-export default eqSet;
+export { eqSet as default };
 //# sourceMappingURL=eqSet.js.map

package/components/utils/validateFile.js

@@ -0,0 +1,99 @@
+import { __awaiter, __generator } from '../../_virtual/_tslib.js';
+import typer from 'media-typer';
+
+var MIME_SUBTYPE_TO_EXTENSION = {
+    gif: "gif",
+    jpeg: "jpg",
+    pdf: "pdf",
+    png: "png",
+    zip: "zip",
+    csv: "csv",
+};
+var getFileSignature = function (blob) {
+    return new Promise(function (resolve, reject) {
+        try {
+            var fileReader_1 = new FileReader();
+            fileReader_1.onloadend = function (_e) {
+                var header = "";
+                var result = fileReader_1.result;
+                var arr = new Uint8Array(result);
+                for (var i = 0; i < arr.length; i++) {
+                    header += arr[i].toString(16);
+                }
+                resolve(header);
+            };
+            fileReader_1.readAsArrayBuffer(blob.slice(0, 4));
+        }
+        catch (e) {
+            reject(e);
+        }
+    });
+};
+var getMimetypeFromSignature = function (signature) {
+    switch (signature.toUpperCase()) {
+        case "89504E47":
+            return "image/png";
+        case "47494638":
+            return "image/gif";
+        case "25504446":
+            return "application/pdf";
+        case "FFD8FFDB":
+        case "FFD8FFEE":
+        case "FFD8FFE0":
+        case "FFD8FFE1":
+        case "FFD8FFE2":
+        case "FFD8FFE3":
+        case "FFD8FFE8":
+            return "image/jpeg";
+        case "504B0304":
+            return "application/zip";
+        default:
+            return null;
+    }
+};
+var getMimeType = function (file) {
+    return new Promise(function (resolve, reject) {
+        getFileSignature(file).then(function (signature) {
+            resolve(getMimetypeFromSignature(signature));
+        }, function (error) {
+            reject(error);
+        });
+    });
+};
+var getFileExtensionFromFileName = function (fileName) {
+    var fileTypeFromFileNameRegExp = new RegExp("(\\.)(.+)$", "i");
+    var fromName = fileTypeFromFileNameRegExp.exec(fileName);
+    if (fromName && fromName.length > 1 && fromName[2]) {
+        return fromName[2];
+    }
+    return null;
+};
+var getFileExtensionFromMimeType = function (mimeType) {
+    try {
+        var type = typer.parse(mimeType).subtype;
+        return MIME_SUBTYPE_TO_EXTENSION[type] || null;
+    }
+    catch (_e) {
+        return null;
+    }
+};
+// If this function
+// - return falsy => the file is correct, file process will abort
+// - return true => the file is valid to continue the file process
+var validateFile = function (file, fileTypeValidator) { return __awaiter(void 0, void 0, void 0, function () {
+    var mimeType, extension;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0: return [4 /*yield*/, getMimeType(file)];
+            case 1:
+                mimeType = _a.sent();
+                extension = (mimeType && getFileExtensionFromMimeType(mimeType)) ||
+                    getFileExtensionFromMimeType(file.type) ||
+                    getFileExtensionFromFileName(file.name);
+                return [2 /*return*/, fileTypeValidator(file, extension)];
+        }
+    });
+}); };
+
+export { validateFile };
+//# sourceMappingURL=validateFile.js.map