@drivy/cobalt 0.16.0 → 0.17.0

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":";;;;;;;;;AAgCA,IAAM,YAAY,GAAG,EAAE,CAAA;AAEvB,IAAM,iBAAiB,GACrB;AACE,IAAA,SAAS,EAAE,mBAAmB;AAC9B,IAAA,WAAW,EAAE,IAAI;AACjB,IAAA,iBAAiB,EAAE,EAAE;AACrB,IAAA,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;AACb,IAAA,QAAQ,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;AACpB,IAAA,QAAQ,EAAE,GAAG;AACb,IAAA,MAAM,EAAE,IAAI;IACZ,OAAO,EAAE,CAAC,MAAM,CAAC;AACjB,IAAA,KAAK,EAAE,sBAAsB;AAC7B,IAAA,OAAO,EAAE,IAAI;CACd,CAAA;AAEH,IAAM,aAAa,GAAG,UAAC,EAerB,EAAA;QAdA,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,EAAkC,GAAA,EAAA,CAAA,SAAA,EAAlC,SAAS,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,sBAAsB,GAAA,EAAA,EAClC,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,WAAW,GAAA,EAAA,CAAA,WAAA,EACX,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,QAAQ,GAAA,EAAA,CAAA,QAAA,CAAA;AASR,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAA,YAAA,EACQ,SAAS,EACrB,MAAM,EAAE,MAAM,EACd,gBAAgB,EAAE,SAAS,EAC3B,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAAA,EAEjB,QAAQ,CACH,EACT;AACH,CAAC,CAAA;AAEK,IAAA,OAAO,GAAG,UAAC,EAgBE,EAAA;QAfjB,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,KAAK,GAAA,EAAA,CAAA,KAAA,EACS,SAAS,GAAA,EAAA,CAAA,YAAA,CAAA,EACvB,QAAQ,cAAA,EACR,EAAA,GAAA,EAAA,CAAA,WAAkB,EAAlB,WAAW,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,IAAI,GAAA,EAAA,EAClB,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,QAAQ,GAAA,EAAA,CAAA,QAAA;;IAER,EAAa,GAAA,EAAA,CAAA,KAAA;;AAAb,IAAA,KAAK,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,KAAK,GAAA,EAAA,EACb,iBAA0B,EAA1B,SAAS,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,cAAc,KAAA,EAC1B,EAAA,GAAA,EAAA,CAAA,KAAU,EAAV,KAAK,mBAAG,EAAE,GAAA,EAAA,EACV,EAAA,GAAA,EAAA,CAAA,QAAY,EAAZ,QAAQ,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,CAAC,GAAA,EAAA,EACZ,EAA0B,GAAA,EAAA,CAAA,MAAA,EAA1B,MAAM,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,QAAQ,CAAC,QAAQ,GAAA,EAAA,EAC1B,IAAI,GAAA,EAAA,CAAA,IAAA,CAAA;AAEI,IAAA,IAAA,UAAU,GAAK,aAAa,EAAE,WAApB,CAAoB;IACtC,IAAM,QAAQ,GAAG,UAAU,KAAK,IAAI,IAAI,UAAU,KAAK,IAAI,CAAA;AAE3D,IAAA,IAAM,WAAW,GAAG,WAAW,CAC7B,UAAC,KAAoB,EAAA;AACnB,QAAA,IAAI,KAAK,CAAC,OAAO,KAAK,YAAY,IAAI,MAAM;AAAE,YAAA,KAAK,EAAE,CAAA;AACvD,KAAC,EACD,CAAC,MAAM,EAAE,KAAK,CAAC,CAChB,CAAA;AAED,IAAA,SAAS,CAAC,YAAA;AACR,QAAA,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,WAAW,CAAC,CAAA;AAE/C,QAAA,OAAO,YAAM,EAAA,OAAA,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,WAAW,CAAC,CAAlD,EAAkD,CAAA;AACjE,KAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAA;AAEjB,IAAA,IAAM,YAAY,GAAG,YAAA;AACnB,QAAA,IAAI,QAAQ;AAAE,YAAA,QAAQ,EAAE,CAAA;AAC1B,KAAC,CAAA;AAED,IAAA,IAAM,WAAW,GAAG,YAAA;AAClB,QAAA,IAAI,MAAM;AAAE,YAAA,MAAM,EAAE,CAAA;AACtB,KAAC,CAAA;IAED,IAAM,SAAS,GAAG,IAAI,GAAG,SAAS,GAAG,KAAK,CAAA;IAE1C,OAAO,QAAQ,IACb,KAAC,CAAA,aAAA,CAAA,aAAa,EACZ,EAAA,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,KAAK,EAChB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAEjB,EAAA,QAAQ,CACK,KAEhB,KAAC,CAAA,aAAA,CAAA,SAAS,EACR,QAAA,CAAA,EAAA,OAAO,EACL,WAAW,IACT,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6BAA6B,EAAA,EAAE,QAAQ,CAAO,KAE7D,QAAQ,CACT,EAEC,EAAA,iBAAiB,EACrB,EAAA,OAAO,EAAE,MAAM,EACf,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,EAAG,CAAA,MAAA,CAAA,iBAAiB,CAAC,KAAK,EAAI,GAAA,CAAA,CAAA,MAAA,CAAA,KAAK,CAAE,EAC5C,MAAM,EAAE,CAAC,CAAC,EAAE,QAAQ,CAAC,EACjB,EAAA,EAAE,KAAK,EAAA,KAAA,EAAE,SAAS,EAAA,SAAA,EAAE,MAAM,EAAA,MAAA,EAAE,EAAA,EAChC,QAAQ,EAAE,YAAY,EACtB,MAAM,EAAE,WAAW,EACnB,cAAc,EAAE,KAAK,EACrB,CAAA,CAAA,CACH,CAAA;AACH;;;;"}
+{"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/RatingCompact.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import cx from 'classnames';
+import { RatingIcon, defaultRatingIcon } from './RatingIcons.js';
+import RatingLabel from './RatingLabel.js';
+
+function RatingCompact({ className, value, icon = defaultRatingIcon, }) {
+    return (React.createElement("div", { className: cx("cobalt-rating", className) },
+        React.createElement(RatingIcon, { icon: icon, size: 16, status: "full" }),
+        React.createElement(RatingLabel, null, value)));
+}
+
+export { RatingCompact };
+//# sourceMappingURL=RatingCompact.js.map

package/components/Rating/RatingCompact.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RatingCompact.js","sources":["../../../src/components/Rating/RatingCompact.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\nimport {\n  defaultRatingIcon,\n  RatingIcon,\n  RatingIconsPropsType,\n} from \"./RatingIcons\"\nimport RatingLabel from \"./RatingLabel\"\n\ntype RatingCompactPropsType = Pick<\n  RatingIconsPropsType,\n  \"className\" | \"value\" | \"size\"\n> & {\n  icon?: JSX.Element\n}\n\nexport function RatingCompact({\n  className,\n  value,\n  icon = defaultRatingIcon,\n}: RatingCompactPropsType) {\n  return (\n    <div className={cx(\"cobalt-rating\", className)}>\n      <RatingIcon icon={icon} size={16} status={\"full\"} />\n      <RatingLabel>{value}</RatingLabel>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;AAgBM,SAAU,aAAa,CAAC,EAC5B,SAAS,EACT,KAAK,EACL,IAAI,GAAG,iBAAiB,GACD,EAAA;IACvB,QACE,6BAAK,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC,EAAA;AAC5C,QAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAI,CAAA;AACpD,QAAA,KAAA,CAAA,aAAA,CAAC,WAAW,EAAE,IAAA,EAAA,KAAK,CAAe,CAC9B,EACP;AACH;;;;"}

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/Rating/RatingInput.js

@@ -0,0 +1,13 @@
+import cx from 'classnames';
+import React from 'react';
+import { RatingIcons } from './RatingIcons.js';
+
+const RatingInput = ({ disabled, ...props }) => {
+    return (React.createElement("div", { className: cx("cobalt-rating-input", {
+            "cobalt-rating-input--disabled": disabled,
+        }) },
+        React.createElement(RatingIcons, { ...props, editable: !disabled })));
+};
+
+export { RatingInput };
+//# sourceMappingURL=RatingInput.js.map

package/components/Rating/RatingInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RatingInput.js","sources":["../../../src/components/Rating/RatingInput.tsx"],"sourcesContent":["import cx from \"classnames\"\nimport React from \"react\"\nimport { RatingIcons, RatingIconsPropsType } from \"./RatingIcons\"\n\ntype RatingInputPropsType = Omit<RatingIconsPropsType, \"editable\">\n\nexport const RatingInput = ({ disabled, ...props }: RatingInputPropsType) => {\n  return (\n    <div\n      className={cx(\"cobalt-rating-input\", {\n        \"cobalt-rating-input--disabled\": disabled,\n      })}\n    >\n      <RatingIcons {...props} editable={!disabled} />\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;AAMO,MAAM,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAwB,KAAI;AAC1E,IAAA,QACE,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE;AACnC,YAAA,+BAA+B,EAAE,QAAQ;SAC1C,CAAC,EAAA;QAEF,KAAC,CAAA,aAAA,CAAA,WAAW,EAAK,EAAA,GAAA,KAAK,EAAE,QAAQ,EAAE,CAAC,QAAQ,EAAA,CAAI,CAC3C,EACP;AACH;;;;"}

package/components/Rating/RatingLabel.js

@@ -0,0 +1,8 @@
+import React from 'react';
+
+function RatingLabel({ children }) {
+    return React.createElement("div", { className: "cobalt-rating__label" }, children);
+}
+
+export { RatingLabel as default };
+//# sourceMappingURL=RatingLabel.js.map

package/components/Rating/RatingLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RatingLabel.js","sources":["../../../src/components/Rating/RatingLabel.tsx"],"sourcesContent":["import React from \"react\"\n\ntype RatingLabelPropsType = React.PropsWithChildren<React.ReactNode>\n\nfunction RatingLabel({ children }: RatingLabelPropsType) {\n  return <div className=\"cobalt-rating__label\">{children}</div>\n}\n\nexport default RatingLabel\n"],"names":[],"mappings":";;AAIA,SAAS,WAAW,CAAC,EAAE,QAAQ,EAAwB,EAAA;AACrD,IAAA,OAAO,6BAAK,SAAS,EAAC,sBAAsB,EAAE,EAAA,QAAQ,CAAO,CAAA;AAC/D;;;;"}

package/components/Rating/index.js

@@ -0,0 +1,13 @@
+import cx from 'classnames';
+import React from 'react';
+import { RatingIcons } from './RatingIcons.js';
+export { RatingIcons } from './RatingIcons.js';
+
+function Rating({ className, iconsClassName, children, ...iconsProps }) {
+    return (React.createElement("div", { className: cx("cobalt-rating", className) },
+        React.createElement(RatingIcons, { className: iconsClassName, ...iconsProps }),
+        children));
+}
+
+export { Rating };
+//# sourceMappingURL=index.js.map

package/components/Rating/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/Rating/index.tsx"],"sourcesContent":["import cx from \"classnames\"\nimport React from \"react\"\nimport { RatingIcons, RatingIconsPropsType } from \"./RatingIcons\"\nimport { RatingInput } from \"./RatingInput\"\nimport { RatingCompact } from \"./RatingCompact\"\nimport RatingLabel from \"./RatingLabel\"\n\ntype RatingPropsType = React.PropsWithChildren<RatingIconsPropsType> & {\n  iconsClassName?: RatingIconsPropsType[\"className\"]\n}\n\nfunction Rating({\n  className,\n  iconsClassName,\n  children,\n  ...iconsProps\n}: RatingPropsType) {\n  return (\n    <div className={cx(\"cobalt-rating\", className)}>\n      <RatingIcons className={iconsClassName} {...iconsProps} />\n      {children}\n    </div>\n  )\n}\n\nexport { Rating, RatingLabel, RatingInput, RatingCompact, RatingIcons }\n"],"names":[],"mappings":";;;;;AAWA,SAAS,MAAM,CAAC,EACd,SAAS,EACT,cAAc,EACd,QAAQ,EACR,GAAG,UAAU,EACG,EAAA;IAChB,QACE,6BAAK,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC,EAAA;AAC5C,QAAA,KAAA,CAAA,aAAA,CAAC,WAAW,EAAC,EAAA,SAAS,EAAE,cAAc,EAAA,GAAM,UAAU,EAAI,CAAA;QACzD,QAAQ,CACL,EACP;AACH;;;;"}

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";