@drivy/cobalt 0.13.0

package/components/Modal/index.js

@@ -0,0 +1,117 @@
+import { __assign } from '../../_virtual/_tslib.js';
+import React, { forwardRef, useRef, useEffect } from 'react';
+import cx from 'classnames';
+import { DialogOverlay, DialogContent } from '@reach/dialog';
+import { useTransition, animated } from '@react-spring/web';
+import useBreakpoint from '../../hooks/useBreakpoint.js';
+import ModalHeader from './ModalHeader.js';
+import ModalBody from './ModalBody.js';
+import ModalFooter from './ModalFooter.js';
+import 'lodash.throttle';
+import { getScrollbarWidth } from '../utils/dom.js';
+
+// Only for the API, render nothing, we use ModalFooterInternal internally
+var ModalFooterAPI = function (_props) { return null; };
+var isModalFooterAPIComponent = function (component) {
+    return React.isValidElement(component) && component.type === ModalFooterAPI;
+};
+var _Modal = forwardRef(function (_a, ref) {
+    var ariaLabel = _a["aria-label"], children = _a.children, isOpen = _a.isOpen, close = _a.close, _b = _a.overflowHidden, overflowHidden = _b === void 0 ? true : _b, initialFocusRef = _a.initialFocusRef, bodySpacing = _a.bodySpacing, onDismissAttempt = _a.onDismissAttempt, onHidden = _a.onHidden, onShow = _a.onShow, title = _a.title;
+    var defaultBodyStyle = useRef();
+    useEffect(function () {
+        defaultBodyStyle.current = {
+            paddingRight: document.body.style.paddingRight,
+            overflow: document.body.style.overflow,
+        };
+    }, []);
+    var restoreDefaultBodyStyle = function () {
+        if (defaultBodyStyle.current) {
+            var _a = defaultBodyStyle.current, overflow_1 = _a.overflow, paddingRight_1 = _a.paddingRight;
+            setTimeout(function () {
+                // setTimeout is used to ensure that the restore style job is done as a final step
+                document.body.style.overflow = overflow_1;
+                document.body.style.paddingRight = paddingRight_1;
+            }, 0);
+        }
+    };
+    useEffect(function () {
+        // disable / enable body scroll
+        // default reach ui solution to lock body scroll is broken with range inputs on mobile (no drag)
+        // https://github.com/reach/reach-ui/issues/678
+        // dangerouslyBypassScrollLock is used to disabled it
+        // + fake scrollbar width to avoid visual layout shift
+        if (isOpen) {
+            document.body.style.paddingRight = getScrollbarWidth() +
+                parseInt(window.getComputedStyle(document.body).paddingRight, 10) + "px"; // to avoid visual shift due to removing an existing scrollbar
+            document.body.style.overflow = "hidden";
+        }
+        return function () {
+            isOpen && restoreDefaultBodyStyle();
+        };
+    }, [isOpen]);
+    var isMobile = useBreakpoint().isMobile;
+    var transformTransitionOut = isMobile ? 500 : -20;
+    var springConfig = { tension: 300, friction: 30, clamp: true };
+    var transition = useTransition(isOpen, {
+        from: {
+            overlayOpacity: 0,
+            modalTransform: transformTransitionOut,
+        },
+        enter: {
+            overlayOpacity: 1,
+            modalTransform: 0,
+            config: springConfig,
+        },
+        leave: {
+            overlayOpacity: 0,
+            modalTransform: transformTransitionOut,
+            config: springConfig,
+        },
+        onStart: function () {
+            if (onShow)
+                onShow();
+        },
+        onDestroyed: function (isTransitioned) {
+            !isOpen && restoreDefaultBodyStyle();
+            if (onHidden && isTransitioned)
+                onHidden();
+        },
+    });
+    var AnimatedDialogOverlay = animated(DialogOverlay);
+    var AnimatedDialogContent = animated(DialogContent);
+    var modalFooter = React.Children.toArray(children).find(function (c) {
+        return isModalFooterAPIComponent(c);
+    });
+    var header = null;
+    if (title || close) {
+        header = React.createElement(ModalHeader, __assign({ title: title }, (close ? { close: close } : {})));
+    }
+    var hasHeader = !!title || !!close;
+    var footer = null;
+    if (React.isValidElement(modalFooter)) {
+        footer = React.createElement(ModalFooter, __assign({}, modalFooter.props));
+    }
+    var getDismissHandler = function (onClose) {
+        if (onClose)
+            return onClose;
+        if (onDismissAttempt)
+            return onDismissAttempt;
+        return;
+    };
+    return (React.createElement(React.Fragment, null, transition(function (styles, isOpenState) {
+        return isOpenState && (React.createElement(AnimatedDialogOverlay, { initialFocusRef: initialFocusRef, onDismiss: getDismissHandler(close), className: "cobalt-modal__overlay", style: { opacity: styles.overlayOpacity }, dangerouslyBypassScrollLock: true },
+            React.createElement(AnimatedDialogContent, { className: cx("cobalt-modal", {
+                    "cobalt-modal--desktop": !isMobile,
+                    "cobalt-modal--mobile": isMobile,
+                    "cobalt-modal--overflowHidden": overflowHidden,
+                }), "aria-label": ariaLabel, style: { translateY: styles.modalTransform }, ref: ref },
+                header,
+                React.createElement(ModalBody, { bodySpacing: bodySpacing, hasHeader: hasHeader, hasFooter: !!footer }, children),
+                footer)));
+    })));
+});
+_Modal.displayName = "Modal";
+var Modal = Object.assign(_Modal, { Footer: ModalFooterAPI });
+
+export { ModalFooterAPI, Modal as default, isModalFooterAPIComponent };
+//# sourceMappingURL=index.js.map

package/components/Modal/index.js.map

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

package/components/ModalOpenerButton/index.js

@@ -0,0 +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 });
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, __assign({}, buttonProps, { onClick: open }), label),
+        React.createElement(Modal, __assign({}, modalProps))));
+};
+/** For API only, render nothing */
+var ModalAPI = function (_props) { return null; };
+ModalOpenerButton.Modal = ModalAPI;
+
+export { ModalOpenerButton as default };
+//# sourceMappingURL=index.js.map

package/components/ModalOpenerButton/index.js.map

@@ -0,0 +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":";;;;;IAUM,iBAAiB,GAAG,UAAC,EAIH;IAHtB,IAAA,KAAK,WAAA,EACL,QAAQ,cAAA,EACL,WAAW,cAHW,qBAI1B,CADe;IAER,IAAA,KAAA,OAA4B,QAAQ,CAAC,KAAK,CAAC,IAAA,EAA1C,SAAS,QAAA,EAAE,YAAY,QAAmB,CAAA;IACjD,IAAM,IAAI,GAAG,cAAM,OAAA,YAAY,CAAC,IAAI,CAAC,GAAA,CAAA;IACrC,IAAM,KAAK,GAAG,cAAM,OAAA,YAAY,CAAC,KAAK,CAAC,GAAA,CAAA;IAEvC,IAAM,aAAa,GAAG,QAAQ,CAAC,EAAE,KAAK,OAAA,EAAE,CAAC,CAAA;IACzC,IAAM,UAAU,yBACX,aAAa,CAAC,KAAK,KACtB,MAAM,EAAE,SAAS,GAClB,CAAA;IAED,QACE;QACE,oBAAC,MAAM,eAAK,WAAW,IAAE,OAAO,EAAE,IAAI,KACnC,KAAK,CACC;QACT,oBAAC,KAAK,eAAK,UAAU,EAAI,CACxB,EACJ;AACH,EAAC;AAED;AACA,IAAM,QAAQ,GAAG,UAAC,MAAsC,IAAK,OAAA,IAAI,GAAA,CAAA;AACjE,iBAAiB,CAAC,KAAK,GAAG,QAAQ;;;;"}

package/components/Note/index.js

@@ -0,0 +1,12 @@
+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));
+};
+
+export { Note, Note as default };
+//# sourceMappingURL=index.js.map

package/components/Note/index.js.map

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

package/components/Pill/index.js

@@ -0,0 +1,25 @@
+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" },
+        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",
+            "cobalt-Pill--overlayed": overlayed,
+            "cobalt-Pill--large": size === "large",
+        }) },
+        iconMarkup,
+        " ",
+        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)); })));
+};
+
+export { Pill, PillGroup, Pill as default };
+//# sourceMappingURL=index.js.map

package/components/Pill/index.js.map

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

package/components/Popover/LazyTippy.js

@@ -0,0 +1,11 @@
+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;
+};
+
+export { LazyTippy as default };
+//# sourceMappingURL=LazyTippy.js.map

package/components/Popover/LazyTippy.js.map

@@ -0,0 +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;IAOM,SAAS,GAAG,UAAC,KAAiB;IAClC,OAAO,KAAK,CAAC,OAAO,GAAG,oBAAC,KAAK,eAAK,KAAK,EAAI,GAAG,IAAI,CAAA;AACpD;;;;"}

package/components/Popover/index.js

@@ -0,0 +1,56 @@
+import { __assign } from '../../_virtual/_tslib.js';
+import React, { useCallback, useEffect } from 'react';
+import Tippy from '@tippyjs/react';
+import { sticky } from 'tippy.js';
+import useBreakpoint from '../../hooks/useBreakpoint.js';
+import Modal from '../Modal/index.js';
+import LazyTippy from './LazyTippy.js';
+import { zIndexes } from '../../tokens/index.js';
+
+var ESC_KEY_CODE = 27;
+var defaultTippyProps = {
+    animation: "shift-away-subtle",
+    interactive: true,
+    interactiveBorder: 10,
+    delay: [0, 0],
+    duration: [200, 150],
+    maxWidth: 500,
+    sticky: true,
+    plugins: [sticky],
+    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;
+    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) {
+        if (event.keyCode === ESC_KEY_CODE && isOpen)
+            close();
+    }, [isOpen, close]);
+    useEffect(function () {
+        window.addEventListener("keydown", escListener);
+        return function () { return window.removeEventListener("keydown", escListener); };
+    }, [escListener]);
+    var onTippyClose = function () {
+        if (onHidden)
+            onHidden();
+    };
+    var onTippyOpen = function () {
+        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: defaultTippyProps.theme + " " + theme, offset: [0, distance] }, { arrow: arrow, placement: placement, zIndex: zIndex }, { onHidden: onTippyClose, onShow: onTippyOpen, onClickOutside: close })));
+};
+
+export { Popover as default };
+//# sourceMappingURL=index.js.map

package/components/Popover/index.js.map

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

package/components/PriceTable/index.js

@@ -0,0 +1,18 @@
+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)));
+};
+
+export { PriceTable, PriceTableRow };
+//# sourceMappingURL=index.js.map

package/components/PriceTable/index.js.map

@@ -0,0 +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":";;;IAGa,UAAU,GAAG,UAAC,EAA2C;QAAzC,QAAQ,cAAA;IAAsC,QACzE,6BAAK,SAAS,EAAC,mBAAmB,IAAE,QAAQ,CAAO;AADsB,EAE1E;IAQY,aAAa,GAAG,UAAC,EAIT;QAHnB,KAAK,WAAA,EACL,KAAK,WAAA,EACL,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAA;IACM,QACxB,6BAAK,SAAS,EAAC,wBAAwB;QACrC,6BAAK,SAAS,EAAC,0BAA0B,IAAE,KAAK,CAAO;QACvD,6BACE,SAAS,EAAEA,EAAU,CAAC,0BAA0B,EAAE;gBAChD,oCAAoC,EAAE,UAAU;aACjD,CAAC,IAED,KAAK,CACF,CACF;AAVkB;;;;"}

package/components/ProgressBar/index.js

@@ -0,0 +1,22 @@
+import React from 'react';
+
+var ProgressBar = function (_a) {
+    var progress = _a.progress, _b = _a.tick, tick = _b === void 0 ? false : _b, children = _a.children;
+    return (React.createElement("div", null,
+        React.createElement("div", { className: "cobalt-ProgressBar__TitleSection" },
+            React.createElement("div", null,
+                React.createElement("div", { className: "cobalt-ProgressBar__Progression" },
+                    progress,
+                    "%"),
+                React.createElement("div", { className: "cobalt-ProgressBar__Title" }, children)),
+            progress === 100 && (React.createElement("div", { className: "cobalt-ProgressBar__CompletedCheckbox" },
+                React.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
+                    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 + "%" } }),
+            tick && React.createElement("div", { className: "cobalt-ProgressBar__Tick" }))));
+};
+
+export { ProgressBar };
+//# sourceMappingURL=index.js.map

package/components/ProgressBar/index.js.map

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

package/components/Tabs/index.js

@@ -0,0 +1,142 @@
+import { __read, __rest, __assign } from '../../_virtual/_tslib.js';
+import React, { useState, useRef, useLayoutEffect, useCallback } from 'react';
+import { Tabs as Tabs$1, TabList, TabPanels, TabPanel, Tab as Tab$1 } from '@reach/tabs';
+import cx from 'classnames';
+import { useSpring } from '@react-spring/web';
+import throttle from 'lodash.throttle';
+import { Icon } from '../Icon/index.js';
+
+var SCROLL_STEP = 150;
+// Only for the API, render nothing, we use InternalTab component internally
+var Tab = function () { return null; };
+Tab.displayName = "Tab";
+var isTabComponent = function (component) {
+    return React.isValidElement(component) && component.type === Tab;
+};
+var InternalTab = function (props) {
+    var href = props.href, children = props.children, isSelected = props.isSelected;
+    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));
+};
+InternalTab.displayName = "InternalTab";
+var Tabs = function (_a) {
+    var _b, _c, _d;
+    var children = _a.children, defaultTabIndex = _a.defaultTabIndex, onChange = _a.onChange, subLevel = _a.subLevel;
+    var _e = __read(useState(0), 2), scrollDistance = _e[0], setScrollDistance = _e[1];
+    var _f = __read(useState({
+        prev: false,
+        next: true,
+    }), 2), scrollButtonsEnabled = _f[0], setScrollButtonsEnabled = _f[1];
+    var labelListRef = useRef(null);
+    var _g = __read(useSpring(function () { return ({
+        config: { tension: 300, friction: 30, clamp: true },
+        springScrollLeft: 0,
+        onChange: {
+            springScrollLeft: function (springScrollLeft) {
+                if (labelListRef === null || labelListRef === void 0 ? void 0 : labelListRef.current) {
+                    labelListRef.current.scrollLeft =
+                        springScrollLeft;
+                }
+            },
+        },
+    }); }), 2), scrollLeftSpringRef = _g[1];
+    var updateScrollDistance = function () {
+        var _a, _b;
+        var scrollWidth = ((_a = labelListRef === null || labelListRef === void 0 ? void 0 : labelListRef.current) === null || _a === void 0 ? void 0 : _a.scrollWidth) || 0;
+        var clientWidth = ((_b = labelListRef === null || labelListRef === void 0 ? void 0 : labelListRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) || 0;
+        setScrollDistance(scrollWidth && clientWidth && scrollWidth - clientWidth);
+    };
+    var updateScrollButtonsState = function () {
+        if (labelListRef === null || labelListRef === void 0 ? void 0 : labelListRef.current) {
+            var newScrollButtonStates = { prev: true, next: true };
+            if (labelListRef.current.scrollLeft <= 0) {
+                newScrollButtonStates.prev = false;
+            }
+            if (scrollDistance && labelListRef.current.scrollLeft >= scrollDistance) {
+                newScrollButtonStates.next = false;
+            }
+            setScrollButtonsEnabled(newScrollButtonStates);
+        }
+    };
+    var updateStates = function () {
+        updateScrollDistance();
+        updateScrollButtonsState();
+    };
+    useLayoutEffect(function () {
+        var throttledUpdate = throttle(updateStates, 300);
+        window.addEventListener("resize", throttledUpdate);
+        return function () { return window.removeEventListener("resize", throttledUpdate); };
+    }, [scrollDistance]);
+    // When the bar became scrollable/not scrollable, the scrollWidth will change
+    // so we update states according to its change
+    useLayoutEffect(function () {
+        updateStates();
+    }, [(_b = labelListRef === null || labelListRef === void 0 ? void 0 : labelListRef.current) === null || _b === void 0 ? void 0 : _b.scrollWidth]);
+    var tabsPropsArray = [];
+    var tabsChildren = [];
+    var matchedHrefIndex = undefined;
+    React.Children.forEach(children, function (child, index) {
+        if (isTabComponent(child)) {
+            var _a = child.props, tabChildren = _a.children, tabProps = __rest(_a, ["children"]);
+            tabsPropsArray.push(tabProps);
+            // if no children, it will be null, nothing will be rendered
+            tabsChildren.push(tabChildren);
+            if (tabProps.href === window.location.pathname) {
+                matchedHrefIndex = index;
+            }
+        }
+    });
+    var scrollTabs = function (scrollAmount) {
+        if (labelListRef === null || labelListRef === void 0 ? void 0 : labelListRef.current) {
+            var newScrollButtonStates = { prev: true, next: true };
+            var computedScrollLeft = labelListRef.current.scrollLeft + scrollAmount;
+            var newScrollLeft = computedScrollLeft;
+            // not scrolled at all
+            if (computedScrollLeft <= 0) {
+                newScrollButtonStates.prev = false;
+                newScrollLeft = 0;
+            }
+            // scrolled at maximum
+            if (scrollDistance && computedScrollLeft >= scrollDistance) {
+                newScrollButtonStates.next = false;
+                newScrollLeft = scrollDistance;
+            }
+            setScrollButtonsEnabled(newScrollButtonStates);
+            scrollLeftSpringRef.start({
+                springScrollLeft: newScrollLeft,
+                immediate: false,
+            });
+        }
+    };
+    var onScrollPrev = useCallback(function () { return scrollTabs(-SCROLL_STEP); }, [scrollButtonsEnabled, (_c = labelListRef === null || labelListRef === void 0 ? void 0 : labelListRef.current) === null || _c === void 0 ? void 0 : _c.scrollLeft]);
+    var onScrollNext = useCallback(function () { return scrollTabs(SCROLL_STEP); }, [scrollButtonsEnabled, (_d = labelListRef === null || labelListRef === void 0 ? void 0 : labelListRef.current) === null || _d === void 0 ? void 0 : _d.scrollLeft]);
+    var isScrollable = !!scrollDistance;
+    var handleWheel = throttle(function () {
+        if (labelListRef === null || labelListRef === void 0 ? void 0 : labelListRef.current) {
+            updateScrollButtonsState();
+            // Don't animate
+            scrollLeftSpringRef.set({
+                springScrollLeft: labelListRef.current.scrollLeft,
+            });
+        }
+    }, 300);
+    return (React.createElement(Tabs$1, { className: "cobalt-tabs", defaultIndex: matchedHrefIndex || defaultTabIndex, onChange: onChange },
+        React.createElement(TabList, { className: cx("cobalt-tabs__labels", {
+                "cobalt-tabs__labels--scrollable": isScrollable,
+                "cobalt-tabs__labels--subLevel": subLevel,
+            }), onWheel: handleWheel, ref: labelListRef }, tabsPropsArray.map(function (props, index) { return (React.createElement(InternalTab, { key: index, href: props.href }, props.label)); })),
+        isScrollable && (React.createElement(React.Fragment, null,
+            React.createElement("button", { className: "cobalt-tabs__nav-prev", onClick: onScrollPrev, disabled: !scrollButtonsEnabled.prev },
+                React.createElement("span", { className: "cobalt-tabs__nav-icon" },
+                    React.createElement(Icon, { source: "chevronLeft", color: "indigo" }))),
+            React.createElement("button", { className: "cobalt-tabs__nav-next", onClick: onScrollNext, disabled: !scrollButtonsEnabled.next },
+                React.createElement("span", { className: "cobalt-tabs__nav-icon" },
+                    React.createElement(Icon, { source: "chevronRight", color: "indigo" }))))),
+        !!tabsChildren.length && (React.createElement(TabPanels, null, tabsChildren.map(function (tabChildren, index) { return (React.createElement(TabPanel, { className: "cobalt-tabs__panel", key: index }, tabChildren)); })))));
+};
+Tabs.Tab = Tab;
+Tabs.displayName = "Tabs";
+
+export { Tab, Tabs, Tabs as default };
+//# sourceMappingURL=index.js.map

package/components/Tabs/index.js.map

@@ -0,0 +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      {...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/Tag/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import cx from 'classnames';
+
+var Tag = function (_a) {
+    var children = _a.children, variant = _a.variant;
+    return (React.createElement("div", { className: cx("cobalt-Tag", {
+            "cobalt-Tag--muted": variant === "muted",
+            "cobalt-Tag--important": variant === "important",
+        }) }, children));
+};
+
+export { Tag };
+//# sourceMappingURL=index.js.map

package/components/Tag/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/Tag/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\n\nexport interface TagProps {\n  children: React.ReactNode\n  variant?: \"muted\" | \"important\"\n}\n\nexport const Tag = ({ children, variant }: TagProps) => (\n  <div\n    className={cx(\"cobalt-Tag\", {\n      \"cobalt-Tag--muted\": variant === \"muted\",\n      \"cobalt-Tag--important\": variant === \"important\",\n    })}\n  >\n    {children}\n  </div>\n)\n"],"names":[],"mappings":";;;IAQa,GAAG,GAAG,UAAC,EAA+B;QAA7B,QAAQ,cAAA,EAAE,OAAO,aAAA;IAAiB,QACtD,6BACE,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE;YAC1B,mBAAmB,EAAE,OAAO,KAAK,OAAO;YACxC,uBAAuB,EAAE,OAAO,KAAK,WAAW;SACjD,CAAC,IAED,QAAQ,CACL;AARgD;;;;"}

package/components/TextContainer/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+var TextContainer = function (_a) {
+    var children = _a.children;
+    return (React.createElement("div", { className: "cobalt-TextContainer" }, children));
+};
+
+export { TextContainer };
+//# sourceMappingURL=index.js.map

package/components/TextContainer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/TextContainer/index.tsx"],"sourcesContent":["import React from \"react\"\n\nexport interface TextContainer {\n  children: React.ReactNode\n}\n\nexport const TextContainer = ({ children }: TextContainer) => (\n  <div className=\"cobalt-TextContainer\">{children}</div>\n)\n"],"names":[],"mappings":";;IAMa,aAAa,GAAG,UAAC,EAA2B;QAAzB,QAAQ,cAAA;IAAsB,QAC5D,6BAAK,SAAS,EAAC,sBAAsB,IAAE,QAAQ,CAAO;AADM;;;;"}

package/components/utils/Timer.js

@@ -0,0 +1,26 @@
+/**
+ * Timer object enhancing setTimeout with start, pause, resume features *
+ */
+var Timer = /** @class */ (function () {
+    function Timer(callback, delay) {
+        var _this = this;
+        this.pause = function () {
+            if (_this.start) {
+                window.clearTimeout(_this.timerID);
+                _this.remaining -= Number(new Date()) - _this.start;
+            }
+        };
+        this.run = function () {
+            _this.start = Number(new Date());
+            if (_this.timerID)
+                window.clearTimeout(_this.timerID);
+            _this.timerID = window.setTimeout(_this.callback, _this.remaining);
+        };
+        this.remaining = delay;
+        this.callback = callback;
+    }
+    return Timer;
+}());
+
+export { Timer as default };
+//# sourceMappingURL=Timer.js.map

package/components/utils/Timer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timer.js","sources":["../../../src/components/utils/Timer.ts"],"sourcesContent":["/**\n * Timer object enhancing setTimeout with start, pause, resume features *\n */\nclass Timer {\n  private timerID?: number\n  private start?: number\n  private remaining: number\n  private callback: (...args: any) => any\n\n  constructor(callback: (...args: any) => any, delay: number) {\n    this.remaining = delay\n    this.callback = callback\n  }\n\n  pause = () => {\n    if (this.start) {\n      window.clearTimeout(this.timerID)\n      this.remaining -= Number(new Date()) - this.start\n    }\n  }\n\n  run = () => {\n    this.start = Number(new Date())\n    if (this.timerID) window.clearTimeout(this.timerID)\n    this.timerID = window.setTimeout(this.callback, this.remaining)\n  }\n}\n\nexport default Timer\n"],"names":[],"mappings":"AAAA;;;;IASE,eAAY,QAA+B,EAAE,KAAa;QAA1D,iBAGC;QAED,UAAK,GAAG;YACN,IAAI,KAAI,CAAC,KAAK,EAAE;gBACd,MAAM,CAAC,YAAY,CAAC,KAAI,CAAC,OAAO,CAAC,CAAA;gBACjC,KAAI,CAAC,SAAS,IAAI,MAAM,CAAC,IAAI,IAAI,EAAE,CAAC,GAAG,KAAI,CAAC,KAAK,CAAA;aAClD;SACF,CAAA;QAED,QAAG,GAAG;YACJ,KAAI,CAAC,KAAK,GAAG,MAAM,CAAC,IAAI,IAAI,EAAE,CAAC,CAAA;YAC/B,IAAI,KAAI,CAAC,OAAO;gBAAE,MAAM,CAAC,YAAY,CAAC,KAAI,CAAC,OAAO,CAAC,CAAA;YACnD,KAAI,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,KAAI,CAAC,QAAQ,EAAE,KAAI,CAAC,SAAS,CAAC,CAAA;SAChE,CAAA;QAfC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAA;QACtB,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAA;KACzB;IAcH,YAAC;AAAD,CAAC;;;;"}