@drivy/cobalt 0.15.0 → 0.16.2

package/components/Popover/LazyTippy.js

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

package/components/Popover/LazyTippy.js.map

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

package/components/Popover/index.js

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

package/components/Popover/index.js.map

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

package/components/PriceTable/index.js

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

package/components/PriceTable/index.js.map

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

package/components/ProgressBar/index.js

@@ -1,22 +1,19 @@
 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: "".concat(progress, "%") } }),
-            tick && React.createElement("div", { className: "cobalt-ProgressBar__Tick" }))));
-};
+const ProgressBar = ({ progress, tick = false, children, }) => (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

@@ -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":";;AAYO,IAAM,WAAW,GAAG,UAAC,EAIT,EAAA;QAHjB,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,EAAA,GAAA,EAAA,CAAA,IAAY,EAAZ,IAAI,mBAAG,KAAK,GAAA,EAAA,EACZ,QAAQ,GAAA,EAAA,CAAA,QAAA,CAAA;AACc,IAAA,QACtB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA;QACE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,kCAAkC,EAAA;AAC/C,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA;gBACE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,iCAAiC,EAAA;oBAAE,QAAQ;AAAQ,oBAAA,GAAA,CAAA;AAClE,gBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,2BAA2B,EAAE,EAAA,QAAQ,CAAO,CACvD;AACL,YAAA,QAAQ,KAAK,GAAG,KACf,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,uCAAuC,EAAA;AACpD,gBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B,EAAA;AAElC,oBAAA,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS,EAAC,MAAM,EAAC,MAAM,EAAC,WAAW,EAAC,GAAG,EAAA;AAC7D,wBAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,CAAC,EAAC,sqBAAsqB,EACxqB,IAAI,EAAC,SAAS,EAAA,CACd,CACA,CACA,CACF,CACP,CACG;QACN,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,+BAA+B,EAAA;AAC5C,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAC,gCAAgC,EAC1C,KAAK,EAAE,EAAE,KAAK,EAAE,EAAA,CAAA,MAAA,CAAG,QAAQ,EAAA,GAAA,CAAG,EAAE,EAChC,CAAA;YACD,IAAI,IAAI,6BAAK,SAAS,EAAC,0BAA0B,EAAG,CAAA,CACjD,CACF,EACP;AAjCuB;;;;"}
+{"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":";;AAYa,MAAA,WAAW,GAAG,CAAC,EAC1B,QAAQ,EACR,IAAI,GAAG,KAAK,EACZ,QAAQ,GACS,MACjB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA;IACE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,kCAAkC,EAAA;AAC/C,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA;YACE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,iCAAiC,EAAA;gBAAE,QAAQ;AAAQ,gBAAA,GAAA,CAAA;AAClE,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,2BAA2B,EAAE,EAAA,QAAQ,CAAO,CACvD;AACL,QAAA,QAAQ,KAAK,GAAG,KACf,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,uCAAuC,EAAA;AACpD,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B,EAAA;AAElC,gBAAA,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS,EAAC,MAAM,EAAC,MAAM,EAAC,WAAW,EAAC,GAAG,EAAA;AAC7D,oBAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,CAAC,EAAC,sqBAAsqB,EACxqB,IAAI,EAAC,SAAS,EAAA,CACd,CACA,CACA,CACF,CACP,CACG;IACN,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,+BAA+B,EAAA;AAC5C,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAC,gCAAgC,EAC1C,KAAK,EAAE,EAAE,KAAK,EAAE,CAAA,EAAG,QAAQ,CAAA,CAAA,CAAG,EAAE,EAChC,CAAA;QACD,IAAI,IAAI,6BAAK,SAAS,EAAC,0BAA0B,EAAG,CAAA,CACjD,CACF;;;;"}

package/components/Rating/RatingIcons.js

@@ -0,0 +1,92 @@
+import React, { useRef, useState, useCallback } from 'react';
+import { nanoid } from 'nanoid';
+import cx from 'classnames';
+import '../Icon/index.js';
+import StarIcon from '../Icon/__generated__/StarIcon.js';
+
+const defaultRatingIcon = React.createElement(StarIcon, { color: "turquoise" });
+const itemEmptyColor = "grey";
+function roundHalf(num) {
+    const temp = num * 2;
+    return temp % 1 === 0.5 ? Math.floor(temp) / 2 : Math.round(temp) / 2;
+}
+function computeItemStatus(ratingValue, itemValue, icon) {
+    let itemStatus = "empty";
+    if (!Array.isArray(icon)) {
+        // gauge
+        const isHalfItem = itemValue > ratingValue && ratingValue > itemValue - 1;
+        if (isHalfItem) {
+            itemStatus = "half";
+        }
+        else if (itemValue <= ratingValue) {
+            itemStatus = "full";
+        }
+    }
+    else if (itemValue === ratingValue) {
+        // radio
+        itemStatus = "full";
+    }
+    return itemStatus;
+}
+const RatingIcon = ({ icon, status = "full", size = 24, }) => {
+    if (status === "half") {
+        return (React.createElement(React.Fragment, null,
+            React.cloneElement(icon, {
+                color: itemEmptyColor,
+                size,
+            }),
+            React.createElement("div", { className: "cobalt-rating-icons__icon-half-container" }, React.cloneElement(icon, { size }))));
+    }
+    else {
+        const iconColor = status === "empty" ? itemEmptyColor : icon.props.color;
+        return React.cloneElement(icon, {
+            color: iconColor,
+            size,
+        });
+    }
+};
+const RatingIcons = ({ className, max = 5, value, size = 24, editable = false, onChange, icon = defaultRatingIcon, }) => {
+    const name = useRef(nanoid());
+    const items = useRef(Array.from(new Array(Array.isArray(icon) ? icon.length : max)));
+    const [ratingValue, setRatingValue] = useState(() => editable ? Math.floor(value) : roundHalf(value));
+    const [selectedIndex, setSelectedIndex] = useState(-1); // used to enforce selection effect (icon scale reset)
+    const resetSelection = useCallback(() => {
+        setSelectedIndex(-1);
+    }, []);
+    const itemSize = size === 48 ? 16 : size;
+    // input element is used for a11y purpose ( focus feedback and keyboard selection )
+    return (React.createElement("div", { className: cx("cobalt-rating-icons", className, {
+            "cobalt-rating-icons--icon-size-48": size === 48,
+        }), onPointerLeave: () => {
+            if (editable) {
+                document.activeElement.blur();
+            }
+        } }, items.current.map((_value, idx) => {
+        const itemValue = idx + 1;
+        const itemStatus = computeItemStatus(ratingValue, itemValue, icon);
+        return (React.createElement("label", { className: cx("cobalt-rating-icons__icon-wrapper", {
+                "cobalt-rating-icons__icon-wrapper--selected": selectedIndex === idx,
+            }), key: idx, onClick: () => {
+                if (editable) {
+                    setRatingValue(itemValue);
+                    setSelectedIndex(idx);
+                }
+            }, onMouseEnter: (e) => {
+                if (editable) {
+                    e.target.focus();
+                    resetSelection();
+                }
+            } },
+            React.createElement("input", { tabIndex: editable &&
+                    (ratingValue === itemValue ||
+                        (ratingValue === 0 && itemValue === 1))
+                    ? 0
+                    : -1, name: name.current, type: "radio", value: itemValue, onChange: () => {
+                    onChange && onChange(itemValue);
+                }, disabled: !editable }),
+            React.createElement(RatingIcon, { icon: Array.isArray(icon) ? icon[idx] : icon, status: itemStatus, size: itemSize })));
+    })));
+};
+
+export { RatingIcon, RatingIcons, computeItemStatus, defaultRatingIcon, roundHalf };
+//# sourceMappingURL=RatingIcons.js.map

package/components/Rating/RatingIcons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RatingIcons.js","sources":["../../../src/components/Rating/RatingIcons.tsx"],"sourcesContent":["import React, { useState, useRef, useCallback } from \"react\"\nimport { nanoid } from \"nanoid\"\nimport cx from \"classnames\"\nimport { IconProps, StarIcon } from \"../Icon\"\n\nexport type RatingIconsPropsType = {\n  className?: string\n  max?: 5 | 10\n  value: number\n  size?: IconProps[\"size\"] | 48\n  editable?: boolean\n  disabled?: boolean\n  onChange?: (newValue: number) => void\n  icon?: JSX.Element | JSX.Element[]\n}\n\nexport type RatingIconPropsType = {\n  icon: JSX.Element\n  status?: \"full\" | \"half\" | \"empty\"\n  size?: RatingIconsPropsType[\"size\"]\n}\n\nexport const defaultRatingIcon = <StarIcon color={\"turquoise\"} />\nconst itemEmptyColor: IconProps[\"color\"] = \"grey\"\n\nexport function roundHalf(num: number) {\n  const temp = num * 2\n  return temp % 1 === 0.5 ? Math.floor(temp) / 2 : Math.round(temp) / 2\n}\n\nexport function computeItemStatus(\n  ratingValue: number,\n  itemValue: number,\n  icon: RatingIconsPropsType[\"icon\"]\n): RatingIconPropsType[\"status\"] {\n  let itemStatus: RatingIconPropsType[\"status\"] = \"empty\"\n  if (!Array.isArray(icon)) {\n    // gauge\n    const isHalfItem = itemValue > ratingValue && ratingValue > itemValue - 1\n    if (isHalfItem) {\n      itemStatus = \"half\"\n    } else if (itemValue <= ratingValue) {\n      itemStatus = \"full\"\n    }\n  } else if (itemValue === ratingValue) {\n    // radio\n    itemStatus = \"full\"\n  }\n\n  return itemStatus\n}\n\nexport const RatingIcon = ({\n  icon,\n  status = \"full\",\n  size = 24,\n}: RatingIconPropsType) => {\n  if (status === \"half\") {\n    return (\n      <>\n        {React.cloneElement(icon, {\n          color: itemEmptyColor,\n          size,\n        })}\n        <div className=\"cobalt-rating-icons__icon-half-container\">\n          {React.cloneElement(icon, { size })}\n        </div>\n      </>\n    )\n  } else {\n    const iconColor: IconProps[\"color\"] =\n      status === \"empty\" ? itemEmptyColor : icon.props.color\n\n    return React.cloneElement(icon, {\n      color: iconColor,\n      size,\n    })\n  }\n}\n\nexport const RatingIcons = ({\n  className,\n  max = 5,\n  value,\n  size = 24,\n  editable = false,\n  onChange,\n  icon = defaultRatingIcon,\n}: RatingIconsPropsType) => {\n  const name = useRef(nanoid())\n\n  const items = useRef(\n    Array.from(new Array(Array.isArray(icon) ? icon.length : max))\n  )\n\n  const [ratingValue, setRatingValue] = useState(() =>\n    editable ? Math.floor(value) : roundHalf(value)\n  )\n  const [selectedIndex, setSelectedIndex] = useState(-1) // used to enforce selection effect (icon scale reset)\n\n  const resetSelection = useCallback(() => {\n    setSelectedIndex(-1)\n  }, [])\n\n  const itemSize = size === 48 ? 16 : size\n\n  // input element is used for a11y purpose ( focus feedback and keyboard selection )\n  return (\n    <div\n      className={cx(\"cobalt-rating-icons\", className, {\n        \"cobalt-rating-icons--icon-size-48\": size === 48,\n      })}\n      onPointerLeave={() => {\n        if (editable) {\n          ;(document.activeElement as HTMLInputElement).blur()\n        }\n      }}\n    >\n      {items.current.map((_value, idx) => {\n        const itemValue = idx + 1\n\n        const itemStatus = computeItemStatus(ratingValue, itemValue, icon)\n\n        return (\n          <label\n            className={cx(\"cobalt-rating-icons__icon-wrapper\", {\n              \"cobalt-rating-icons__icon-wrapper--selected\":\n                selectedIndex === idx,\n            })}\n            key={idx}\n            onClick={() => {\n              if (editable) {\n                setRatingValue(itemValue)\n                setSelectedIndex(idx)\n              }\n            }}\n            onMouseEnter={(e) => {\n              if (editable) {\n                ;(e.target as HTMLElement).focus()\n\n                resetSelection()\n              }\n            }}\n          >\n            <input\n              tabIndex={\n                editable &&\n                (ratingValue === itemValue ||\n                  (ratingValue === 0 && itemValue === 1))\n                  ? 0\n                  : -1\n              }\n              name={name.current}\n              type=\"radio\"\n              value={itemValue}\n              onChange={() => {\n                onChange && onChange(itemValue)\n              }}\n              disabled={!editable}\n            />\n            {\n              <RatingIcon\n                icon={Array.isArray(icon) ? icon[idx] : icon}\n                status={itemStatus}\n                size={itemSize}\n              />\n            }\n          </label>\n        )\n      })}\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}

package/components/Tabs/index.js

@@ -1,4 +1,3 @@
-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';
@@ -6,50 +5,47 @@ import { useSpring } from '@react-spring/web';
 import throttle from 'lodash.throttle';
 import { Icon } from '../Icon/index.js';
 
-var SCROLL_STEP = 150;
+const SCROLL_STEP = 150;
 // Only for the API, render nothing, we use InternalTab component internally
-var Tab = function () { return null; };
+const Tab = () => 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", {
+const isTabComponent = (component) => React.isValidElement(component) && component.type === Tab;
+const InternalTab = (props) => {
+    const { href, children, isSelected } = props;
+    return (React.createElement(Tab$1, { ...props, ...(href ? { href, as: "a" } : { as: "button" }), className: cx("cobalt-tabs__label", {
             "cobalt-tabs__label--selected": isSelected,
-        }) }), typeof children === "function" ? children(isSelected) : children));
+        }) }, 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({
+const Tabs = ({ children, defaultTabIndex, onChange, subLevel, }) => {
+    var _a, _b, _c;
+    const [scrollDistance, setScrollDistance] = useState(0);
+    const [scrollButtonsEnabled, setScrollButtonsEnabled] = useState({
         prev: false,
         next: true,
-    }), 2), scrollButtonsEnabled = _f[0], setScrollButtonsEnabled = _f[1];
-    var labelListRef = useRef(null);
-    var _g = __read(useSpring(function () { return ({
+    });
+    const labelListRef = useRef(null);
+    const [, scrollLeftSpringRef] = useSpring(() => ({
         config: { tension: 300, friction: 30, clamp: true },
         springScrollLeft: 0,
         onChange: {
-            springScrollLeft: function (springScrollLeft) {
+            springScrollLeft: (springScrollLeft) => {
                 if (labelListRef === null || labelListRef === void 0 ? void 0 : labelListRef.current) {
                     labelListRef.current.scrollLeft =
                         springScrollLeft;
                 }
             },
         },
-    }); }), 2), scrollLeftSpringRef = _g[1];
-    var updateScrollDistance = function () {
+    }));
+    const updateScrollDistance = () => {
         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;
+        const scrollWidth = ((_a = labelListRef === null || labelListRef === void 0 ? void 0 : labelListRef.current) === null || _a === void 0 ? void 0 : _a.scrollWidth) || 0;
+        const 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 () {
+    const updateScrollButtonsState = () => {
         if (labelListRef === null || labelListRef === void 0 ? void 0 : labelListRef.current) {
-            var newScrollButtonStates = { prev: true, next: true };
+            const newScrollButtonStates = { prev: true, next: true };
             if (labelListRef.current.scrollLeft <= 0) {
                 newScrollButtonStates.prev = false;
             }
@@ -59,26 +55,26 @@ var Tabs = function (_a) {
             setScrollButtonsEnabled(newScrollButtonStates);
         }
     };
-    var updateStates = function () {
+    const updateStates = () => {
         updateScrollDistance();
         updateScrollButtonsState();
     };
-    useLayoutEffect(function () {
-        var throttledUpdate = throttle(updateStates, 300);
+    useLayoutEffect(() => {
+        const throttledUpdate = throttle(updateStates, 300);
         window.addEventListener("resize", throttledUpdate);
-        return function () { return window.removeEventListener("resize", throttledUpdate); };
+        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 () {
+    useLayoutEffect(() => {
         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) {
+    }, [(_a = labelListRef === null || labelListRef === void 0 ? void 0 : labelListRef.current) === null || _a === void 0 ? void 0 : _a.scrollWidth]);
+    const tabsPropsArray = [];
+    const tabsChildren = [];
+    let matchedHrefIndex = undefined;
+    React.Children.forEach(children, (child, index) => {
         if (isTabComponent(child)) {
-            var _a = child.props, tabChildren = _a.children, tabProps = __rest(_a, ["children"]);
+            const { children: tabChildren, ...tabProps } = child.props;
             tabsPropsArray.push(tabProps);
             // if no children, it will be null, nothing will be rendered
             tabsChildren.push(tabChildren);
@@ -87,11 +83,11 @@ var Tabs = function (_a) {
             }
         }
     });
-    var scrollTabs = function (scrollAmount) {
+    const scrollTabs = (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;
+            const newScrollButtonStates = { prev: true, next: true };
+            const computedScrollLeft = labelListRef.current.scrollLeft + scrollAmount;
+            let newScrollLeft = computedScrollLeft;
             // not scrolled at all
             if (computedScrollLeft <= 0) {
                 newScrollButtonStates.prev = false;
@@ -109,10 +105,10 @@ var Tabs = function (_a) {
             });
         }
     };
-    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 () {
+    const onScrollPrev = useCallback(() => scrollTabs(-SCROLL_STEP), [scrollButtonsEnabled, (_b = labelListRef === null || labelListRef === void 0 ? void 0 : labelListRef.current) === null || _b === void 0 ? void 0 : _b.scrollLeft]);
+    const onScrollNext = useCallback(() => scrollTabs(SCROLL_STEP), [scrollButtonsEnabled, (_c = labelListRef === null || labelListRef === void 0 ? void 0 : labelListRef.current) === null || _c === void 0 ? void 0 : _c.scrollLeft]);
+    const isScrollable = !!scrollDistance;
+    const handleWheel = throttle(() => {
         if (labelListRef === null || labelListRef === void 0 ? void 0 : labelListRef.current) {
             updateScrollButtonsState();
             // Don't animate
@@ -125,7 +121,7 @@ var Tabs = function (_a) {
         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)); })),
+            }), onWheel: handleWheel, ref: labelListRef }, tabsPropsArray.map((props, index) => (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" },
@@ -133,7 +129,7 @@ var Tabs = function (_a) {
             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)); })))));
+        !!tabsChildren.length && (React.createElement(TabPanels, null, tabsChildren.map((tabChildren, index) => (React.createElement(TabPanel, { className: "cobalt-tabs__panel", key: index }, tabChildren)))))));
 };
 Tabs.Tab = Tab;
 Tabs.displayName = "Tabs";

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      {...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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"}
+{"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

@@ -1,13 +1,10 @@
 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));
-};
+const Tag = ({ children, variant }) => (React.createElement("div", { className: cx("cobalt-Tag", {
+        "cobalt-Tag--muted": variant === "muted",
+        "cobalt-Tag--important": variant === "important",
+    }) }, children));
 
 export { Tag };
 //# sourceMappingURL=index.js.map