@drivy/cobalt 2.14.0 → 2.16.0

package/components/Pill/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Pill/index.tsx"],"sourcesContent":["import React, { Children } from \"react\"\nimport cx from \"classnames\"\nimport { Icon, IconColorsType, IconSources } from \"../Icon\"\n\nconst ICON_SIZE = 20\nexport interface PillPropsType {\n  children: React.ReactNode\n  icon?: IconSources\n  color?: IconColorsType\n  size?: \"large\"\n  overlayed?: boolean\n  className?: string\n}\n\nexport const Pill = ({\n  icon,\n  color = \"onSurface\",\n  children,\n  overlayed,\n  className,\n  size,\n}: PillPropsType) => {\n  const iconMarkup = icon ? (\n    <span className=\"cobalt-Pill__Icon\">\n      <Icon\n        source={icon}\n        size={ICON_SIZE}\n        color={overlayed ? \"surfaceFixed\" : color}\n      />\n    </span>\n  ) : null\n\n  return (\n    <div\n      className={cx(className, \"cobalt-Pill\", {\n        \"cobalt-Pill--colorConnect\": color === \"connect\",\n        \"cobalt-Pill--overlayed\": overlayed,\n        \"cobalt-Pill--large\": size === \"large\",\n      })}\n    >\n      {iconMarkup} {children}\n    </div>\n  )\n}\n\nexport interface PillGroupPropsType {\n  children: React.ReactNode\n}\n\nexport const PillGroup = ({ children }: PillGroupPropsType) => {\n  return (\n    <div className=\"cobalt-PillGroup\">\n      {Children.toArray(children).map((child, index) => (\n        <div className=\"cobalt-PillGroup__Item\" key={index}>\n          {child}\n        </div>\n      ))}\n    </div>\n  )\n}\n\nexport default Pill\n"],"names":[],"mappings":";;;;AAIA,MAAM,SAAS,GAAG,EAAE,CAAA;MAUP,IAAI,GAAG,CAAC,EACnB,IAAI,EACJ,KAAK,GAAG,WAAW,EACnB,QAAQ,EACR,SAAS,EACT,SAAS,EACT,IAAI,GACU,KAAI;IAClB,MAAM,UAAU,GAAG,IAAI,IACrB,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,mBAAmB,EAAA;AACjC,QAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACH,MAAM,EAAE,IAAI,EACZ,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,SAAS,GAAG,cAAc,GAAG,KAAK,EAAA,CACzC,CACG,IACL,IAAI,CAAA;IAER,QACE,6BACE,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,aAAa,EAAE;YACtC,2BAA2B,EAAE,KAAK,KAAK,SAAS;AAChD,YAAA,wBAAwB,EAAE,SAAS;YACnC,oBAAoB,EAAE,IAAI,KAAK,OAAO;SACvC,CAAC,EAAA;QAED,UAAU;;QAAG,QAAQ,CAClB,EACP;AACH,EAAC;MAMY,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAsB,KAAI;AAC5D,IAAA,QACE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,kBAAkB,IAC9B,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,MAC3C,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wBAAwB,EAAC,GAAG,EAAE,KAAK,IAC/C,KAAK,CACF,CACP,CAAC,CACE,EACP;AACH;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Pill/index.tsx"],"sourcesContent":["import cx from \"classnames\"\nimport { Children, isValidElement } from \"react\"\nimport { Icon, type IconColorsType, type IconSources } from \"../Icon\"\n\nconst ICON_SIZE = 20\nexport interface PillPropsType {\n  children: React.ReactNode\n  icon?: IconSources\n  color?: IconColorsType\n  size?: \"large\"\n  overlayed?: boolean\n  className?: string\n}\n\nexport const Pill = ({\n  icon,\n  color = \"onSurface\",\n  children,\n  overlayed,\n  className,\n  size,\n}: PillPropsType) => {\n  const iconMarkup = icon ? (\n    <span className=\"cobalt-Pill__Icon\">\n      <Icon\n        source={icon}\n        size={ICON_SIZE}\n        color={overlayed ? \"surfaceFixed\" : color}\n      />\n    </span>\n  ) : null\n\n  return (\n    <div\n      className={cx(className, \"cobalt-Pill\", {\n        \"cobalt-Pill--colorConnect\": color === \"connect\",\n        \"cobalt-Pill--overlayed\": overlayed,\n        \"cobalt-Pill--large\": size === \"large\",\n      })}\n    >\n      {iconMarkup} {children}\n    </div>\n  )\n}\n\nexport interface PillGroupPropsType {\n  children: React.ReactNode\n}\n\nexport const PillGroup = ({ children }: PillGroupPropsType) => {\n  return (\n    <div className=\"cobalt-PillGroup\">\n      {Children.toArray(children).map((child, index) => {\n        const childKey =\n          isValidElement(child) && child.key != null\n            ? child.key\n            : `pill-group-item-${index}`\n        return (\n          <div className=\"cobalt-PillGroup__Item\" key={childKey}>\n            {child}\n          </div>\n        )\n      })}\n    </div>\n  )\n}\n\nexport default Pill\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;AAIA,MAAM,SAAS,GAAG,EAAE,CAAA;MAUP,IAAI,GAAG,CAAC,EACnB,IAAI,EACJ,KAAK,GAAG,WAAW,EACnB,QAAQ,EACR,SAAS,EACT,SAAS,EACT,IAAI,GACU,KAAI;AAClB,IAAA,MAAM,UAAU,GAAG,IAAI,IACrBA,GAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,mBAAmB,YACjCA,GAAC,CAAA,IAAI,IACH,MAAM,EAAE,IAAI,EACZ,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,SAAS,GAAG,cAAc,GAAG,KAAK,GACzC,EACG,CAAA,IACL,IAAI,CAAA;IAER,QACEC,cACE,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,aAAa,EAAE;YACtC,2BAA2B,EAAE,KAAK,KAAK,SAAS;AAChD,YAAA,wBAAwB,EAAE,SAAS;YACnC,oBAAoB,EAAE,IAAI,KAAK,OAAO;AACvC,SAAA,CAAC,aAED,UAAU,EAAA,GAAA,EAAG,QAAQ,CAAA,EAAA,CAClB,EACP;AACH,EAAC;MAMY,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAsB,KAAI;IAC5D,QACED,aAAK,SAAS,EAAC,kBAAkB,EAC9B,QAAA,EAAA,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,KAAI;YAC/C,MAAM,QAAQ,GACZ,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,GAAG,IAAI,IAAI;kBACtC,KAAK,CAAC,GAAG;AACX,kBAAE,CAAA,gBAAA,EAAmB,KAAK,CAAA,CAAE,CAAA;YAChC,QACEA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,wBAAwB,EACpC,QAAA,EAAA,KAAK,EADqC,EAAA,QAAQ,CAE/C,EACP;SACF,CAAC,EACE,CAAA,EACP;AACH;;;;"}

package/components/PlateNumber/index.js

@@ -1,7 +1,7 @@
-import React from 'react';
+import { jsx } from 'react/jsx-runtime';
 import cx from 'classnames';
 
-const PlateNumber = ({ children, className }) => (React.createElement("div", { className: cx("cobalt-plate-number", className) }, children));
+const PlateNumber = ({ children, className }) => (jsx("div", { className: cx("cobalt-plate-number", className), children: children }));
 
 export { PlateNumber };
 //# sourceMappingURL=index.js.map

package/components/PlateNumber/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/PlateNumber/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\n\nexport type PlateNumberPropsType = React.PropsWithChildren<{\n  className?: string\n}>\n\nexport const PlateNumber = ({ children, className }: PlateNumberPropsType) => (\n  <div className={cx(\"cobalt-plate-number\", className)}>{children}</div>\n)\n"],"names":[],"mappings":";;;AAOa,MAAA,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAwB,MACvE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,EAAG,EAAA,QAAQ,CAAO;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/PlateNumber/index.tsx"],"sourcesContent":["import cx from \"classnames\"\nimport type React from \"react\"\n\nexport type PlateNumberPropsType = React.PropsWithChildren<{\n  className?: string\n}>\n\nexport const PlateNumber = ({ children, className }: PlateNumberPropsType) => (\n  <div className={cx(\"cobalt-plate-number\", className)}>{children}</div>\n)\n"],"names":["_jsx"],"mappings":";;;AAOa,MAAA,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAwB,MACvEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,EAAG,QAAA,EAAA,QAAQ,EAAO,CAAA;;;;"}

package/components/Popover/LazyTippy.js

@@ -1,9 +1,8 @@
-import React from 'react';
+import { jsx } from 'react/jsx-runtime';
 import Tippy from '@tippyjs/react';
 
-// Will only render the `content` or `render` elements if the tippy is mounted to the DOM.
 const LazyTippy = (props) => {
-    return props.visible ? React.createElement(Tippy, { ...props }) : null;
+    return props.visible ? jsx(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;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;;;;"}
+{"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 Tippy, { type TippyProps } from \"@tippyjs/react\"\n\nconst LazyTippy = (props: TippyProps) => {\n  return props.visible ? <Tippy {...props} /> : null\n}\n\nexport default LazyTippy\n"],"names":["_jsx"],"mappings":";;;AAKA,MAAM,SAAS,GAAG,CAAC,KAAiB,KAAI;AACtC,IAAA,OAAO,KAAK,CAAC,OAAO,GAAGA,GAAA,CAAC,KAAK,EAAA,EAAA,GAAK,KAAK,EAAI,CAAA,GAAG,IAAI,CAAA;AACpD;;;;"}

package/components/Popover/index.js

@@ -1,10 +1,11 @@
-import React, { useCallback, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
 import Tippy from '@tippyjs/react';
+import { useCallback, useEffect } from 'react';
 import { sticky } from 'tippy.js';
 import useBreakpoint from '../../hooks/useBreakpoint.js';
+import { zIndexes } from '../../tokens/index.js';
 import Modal from '../Modal/index.js';
 import LazyTippy from './LazyTippy.js';
-import { zIndexes } from '../../tokens/index.js';
 
 const ESC_KEY_CODE = 27;
 const defaultTippyProps = {
@@ -20,7 +21,7 @@ const defaultTippyProps = {
     inertia: true,
 };
 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));
+    return (jsx(Modal, { "aria-label": ariaLabel, isOpen: isOpen, onDismissAttempt: onDismiss, bodySpacing: bodySpacing, onShow: onShow, onHidden: onHidden, children: children }));
 };
 const Popover = ({ isOpen, targetRef, close, "aria-label": ariaLabel, children, bodySpacing = true, onShow, onHidden, 
 // Desktop props
@@ -44,7 +45,7 @@ arrow = false, placement = "bottom-start", flip = true, theme = "", distance = 8
             onShow();
     };
     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} ${arrow ? "cobalt-popover--withArrow" : ""} ${fitContent ? "cobalt-popover--fitContent" : ""}`, offset: [0, distance], arrow, placement, zIndex, popperOptions: { modifiers: [{ name: "flip", enabled: flip }] }, onHidden: onTippyClose, onShow: onTippyOpen, onClickOutside: close, appendTo: appendToBody ? document.body : "parent" }));
+    return isMobile ? (jsx(MobilePopover, { isOpen: isOpen, onDismiss: close, bodySpacing: bodySpacing, ariaLabel: ariaLabel, onShow: onShow, onHidden: onHidden, children: children })) : (jsx(TippyComp, { content: bodySpacing ? (jsx("div", { className: "cobalt-popover--bodySpacing", children: children })) : (children), ...defaultTippyProps, visible: isOpen, reference: targetRef, theme: `${defaultTippyProps.theme} ${theme} ${arrow ? "cobalt-popover--withArrow" : ""} ${fitContent ? "cobalt-popover--fitContent" : ""}`, offset: [0, distance], arrow, placement, zIndex, popperOptions: { modifiers: [{ name: "flip", enabled: flip }] }, onHidden: onTippyClose, onShow: onTippyOpen, onClickOutside: close, appendTo: appendToBody ? document.body : "parent" }));
 };
 
 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 } 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 = {\n  children?: React.ReactNode\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  flip?: boolean\n  theme?: string\n  distance?: number\n  zIndex?: number\n  appendToBody?: boolean\n  fitContent?: boolean\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}: {\n  children?: React.ReactNode\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  flip = true,\n  theme = \"\",\n  distance = 8,\n  zIndex = zIndexes.dropdown,\n  appendToBody = false,\n  fitContent = false,\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        arrow ? \"cobalt-popover--withArrow\" : \"\"\n      } ${fitContent ? \"cobalt-popover--fitContent\" : \"\"}`}\n      offset={[0, distance]}\n      {...{ arrow, placement, zIndex }}\n      popperOptions={{ modifiers: [{ name: \"flip\", enabled: flip }] }}\n      onHidden={onTippyClose}\n      onShow={onTippyOpen}\n      onClickOutside={close}\n      appendTo={appendToBody ? document.body : \"parent\"}\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 Tippy, { type TippyProps } from \"@tippyjs/react\"\nimport type React from \"react\"\nimport { useCallback, useEffect } from \"react\"\nimport { sticky } from \"tippy.js\"\n\nimport useBreakpoint from \"../../hooks/useBreakpoint\"\nimport { zIndexes } from \"../../tokens\"\nimport Modal, { type ModalPropsType } from \"../Modal\"\nimport LazyTippy from \"./LazyTippy\"\n\nexport type PopoverPropsType = {\n  children?: React.ReactNode\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  flip?: boolean\n  theme?: string\n  distance?: number\n  zIndex?: number\n  appendToBody?: boolean\n  fitContent?: boolean\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}: {\n  children?: React.ReactNode\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  flip = true,\n  theme = \"\",\n  distance = 8,\n  zIndex = zIndexes.dropdown,\n  appendToBody = false,\n  fitContent = false,\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        arrow ? \"cobalt-popover--withArrow\" : \"\"\n      } ${fitContent ? \"cobalt-popover--fitContent\" : \"\"}`}\n      offset={[0, distance]}\n      {...{ arrow, placement, zIndex }}\n      popperOptions={{ modifiers: [{ name: \"flip\", enabled: flip }] }}\n      onHidden={onTippyClose}\n      onShow={onTippyOpen}\n      onClickOutside={close}\n      appendTo={appendToBody ? document.body : \"parent\"}\n    />\n  )\n}\n\nexport default Popover\n"],"names":["_jsx"],"mappings":"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"}

package/components/PriceTable/index.js

@@ -1,12 +1,10 @@
-import React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import cx from 'classnames';
 
-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)));
+const PriceTable = ({ children }) => (jsx("div", { className: "cobalt-PriceTable", children: children }));
+const PriceTableRow = ({ label, value, discounted = false, }) => (jsxs("div", { className: "cobalt-PriceTable__Row", children: [jsx("div", { className: "cobalt-PriceTable__Label", children: label }), jsx("div", { className: cx("cobalt-PriceTable__Value", {
+                "cobalt-PriceTable__Value--discount": discounted,
+            }), children: value })] }));
 PriceTable.Row = PriceTableRow;
 
 export { PriceTable, PriceTableRow, PriceTable as default };

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\nexport interface 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\nPriceTable.Row = PriceTableRow\n\nexport default PriceTable\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,EACP;AAED,UAAU,CAAC,GAAG,GAAG,aAAa;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/PriceTable/index.tsx"],"sourcesContent":["import classNames from \"classnames\"\nimport type React from \"react\"\n\nexport const PriceTable = ({ children }: { children: React.ReactNode }) => (\n  <div className=\"cobalt-PriceTable\">{children}</div>\n)\n\nexport interface 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\nPriceTable.Row = PriceTableRow\n\nexport default PriceTable\n"],"names":["_jsx","_jsxs","classNames"],"mappings":";;;MAGa,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAiC,MACpEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mBAAmB,YAAE,QAAQ,EAAA,CAAO,EACpD;AAQY,MAAA,aAAa,GAAG,CAAC,EAC5B,KAAK,EACL,KAAK,EACL,UAAU,GAAG,KAAK,GACC,MACnBC,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,wBAAwB,EAAA,QAAA,EAAA,CACrCD,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,0BAA0B,EAAA,QAAA,EAAE,KAAK,EAAA,CAAO,EACvDA,GACE,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEE,EAAU,CAAC,0BAA0B,EAAE;AAChD,gBAAA,oCAAoC,EAAE,UAAU;AACjD,aAAA,CAAC,EAED,QAAA,EAAA,KAAK,EACF,CAAA,CAAA,EAAA,CACF,EACP;AAED,UAAU,CAAC,GAAG,GAAG,aAAa;;;;"}

package/components/ProgressBanner/index.js

@@ -1,26 +1,16 @@
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import cx from 'classnames';
-import { ProgressCircular } from '../ProgressCircular/index.js';
 import '../Icon/index.js';
+import { ProgressCircular } from '../ProgressCircular/index.js';
 import CheckIcon from '../Icon/__generated__/CheckIcon.js';
 
 function ProgressBanner({ progress, title, description, completed = false, animated = false, fullWidth = false, className, }) {
-    return (React.createElement("div", { className: cx("cobalt-progressBanner", className, {
+    return (jsxs("div", { className: cx("cobalt-progressBanner", className, {
             "cobalt-progressBanner--completed": completed,
             "cobalt-progressBanner--fullWidth": fullWidth,
-        }) },
-        progress && !completed && (React.createElement(ProgressCircular, { size: 48, progress: (progress.done * 100) / progress.total, animated: animated },
-            React.createElement("div", { className: "cobalt-progressBanner__progress-container" },
-                progress.done,
-                "/",
-                progress.total))),
-        completed && (React.createElement("div", { className: cx("cobalt-progressBanner__completed-icon-container", {
-                "cobalt-progressBanner__completed-icon-container--animated": animated,
-            }) },
-            React.createElement(CheckIcon, { color: "success", size: 32 }))),
-        React.createElement("div", { className: "cobalt-progressBanner__text-container" },
-            React.createElement("div", { className: "cobalt-progressBanner__title" }, title),
-            React.createElement("div", { className: "cobalt-progressBanner__description" }, description))));
+        }), children: [progress && !completed && (jsx(ProgressCircular, { size: 48, progress: (progress.done * 100) / progress.total, animated: animated, children: jsxs("div", { className: "cobalt-progressBanner__progress-container", children: [progress.done, "/", progress.total] }) })), completed && (jsx("div", { className: cx("cobalt-progressBanner__completed-icon-container", {
+                    "cobalt-progressBanner__completed-icon-container--animated": animated,
+                }), children: jsx(CheckIcon, { color: "success", size: 32 }) })), jsxs("div", { className: "cobalt-progressBanner__text-container", children: [jsx("div", { className: "cobalt-progressBanner__title", children: title }), jsx("div", { className: "cobalt-progressBanner__description", children: description })] })] }));
 }
 
 export { ProgressBanner };

package/components/ProgressBanner/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/ProgressBanner/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\nimport { ProgressCircular } from \"../ProgressCircular\"\nimport { CheckIcon } from \"../Icon\"\n\ntype ProgressBannerPropsType = {\n  progress?: {\n    done: number\n    total: number\n  }\n  title: string\n  description: string\n  completed?: boolean\n  animated?: boolean\n  fullWidth?: boolean\n  className?: string\n}\n\nexport function ProgressBanner({\n  progress,\n  title,\n  description,\n  completed = false,\n  animated = false,\n  fullWidth = false,\n  className,\n}: ProgressBannerPropsType) {\n  return (\n    <div\n      className={cx(\"cobalt-progressBanner\", className, {\n        \"cobalt-progressBanner--completed\": completed,\n        \"cobalt-progressBanner--fullWidth\": fullWidth,\n      })}\n    >\n      {progress && !completed && (\n        <ProgressCircular\n          size={48}\n          progress={(progress.done * 100) / progress.total}\n          animated={animated}\n        >\n          <div className=\"cobalt-progressBanner__progress-container\">\n            {progress.done}/{progress.total}\n          </div>\n        </ProgressCircular>\n      )}\n\n      {completed && (\n        <div\n          className={cx(\"cobalt-progressBanner__completed-icon-container\", {\n            \"cobalt-progressBanner__completed-icon-container--animated\":\n              animated,\n          })}\n        >\n          <CheckIcon color=\"success\" size={32} />\n        </div>\n      )}\n\n      <div className=\"cobalt-progressBanner__text-container\">\n        <div className=\"cobalt-progressBanner__title\">{title}</div>\n        <div className=\"cobalt-progressBanner__description\">{description}</div>\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;AAkBM,SAAU,cAAc,CAAC,EAC7B,QAAQ,EACR,KAAK,EACL,WAAW,EACX,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,KAAK,EACjB,SAAS,GACe,EAAA;IACxB,QACE,6BACE,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,EAAE;AAChD,YAAA,kCAAkC,EAAE,SAAS;AAC7C,YAAA,kCAAkC,EAAE,SAAS;SAC9C,CAAC,EAAA;AAED,QAAA,QAAQ,IAAI,CAAC,SAAS,KACrB,KAAA,CAAA,aAAA,CAAC,gBAAgB,EAAA,EACf,IAAI,EAAE,EAAE,EACR,QAAQ,EAAE,CAAC,QAAQ,CAAC,IAAI,GAAG,GAAG,IAAI,QAAQ,CAAC,KAAK,EAChD,QAAQ,EAAE,QAAQ,EAAA;YAElB,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,2CAA2C,EAAA;AACvD,gBAAA,QAAQ,CAAC,IAAI;;AAAG,gBAAA,QAAQ,CAAC,KAAK,CAC3B,CACW,CACpB;QAEA,SAAS,KACR,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,iDAAiD,EAAE;AAC/D,gBAAA,2DAA2D,EACzD,QAAQ;aACX,CAAC,EAAA;YAEF,KAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,KAAK,EAAC,SAAS,EAAC,IAAI,EAAE,EAAE,EAAI,CAAA,CACnC,CACP;QAED,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,uCAAuC,EAAA;AACpD,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,8BAA8B,EAAA,EAAE,KAAK,CAAO;YAC3D,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,oCAAoC,EAAA,EAAE,WAAW,CAAO,CACnE,CACF,EACP;AACH;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/ProgressBanner/index.tsx"],"sourcesContent":["import cx from \"classnames\"\nimport { CheckIcon } from \"../Icon\"\nimport { ProgressCircular } from \"../ProgressCircular\"\n\ntype ProgressBannerPropsType = {\n  progress?: {\n    done: number\n    total: number\n  }\n  title: string\n  description: string\n  completed?: boolean\n  animated?: boolean\n  fullWidth?: boolean\n  className?: string\n}\n\nexport function ProgressBanner({\n  progress,\n  title,\n  description,\n  completed = false,\n  animated = false,\n  fullWidth = false,\n  className,\n}: ProgressBannerPropsType) {\n  return (\n    <div\n      className={cx(\"cobalt-progressBanner\", className, {\n        \"cobalt-progressBanner--completed\": completed,\n        \"cobalt-progressBanner--fullWidth\": fullWidth,\n      })}\n    >\n      {progress && !completed && (\n        <ProgressCircular\n          size={48}\n          progress={(progress.done * 100) / progress.total}\n          animated={animated}\n        >\n          <div className=\"cobalt-progressBanner__progress-container\">\n            {progress.done}/{progress.total}\n          </div>\n        </ProgressCircular>\n      )}\n\n      {completed && (\n        <div\n          className={cx(\"cobalt-progressBanner__completed-icon-container\", {\n            \"cobalt-progressBanner__completed-icon-container--animated\":\n              animated,\n          })}\n        >\n          <CheckIcon color=\"success\" size={32} />\n        </div>\n      )}\n\n      <div className=\"cobalt-progressBanner__text-container\">\n        <div className=\"cobalt-progressBanner__title\">{title}</div>\n        <div className=\"cobalt-progressBanner__description\">{description}</div>\n      </div>\n    </div>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAiBM,SAAU,cAAc,CAAC,EAC7B,QAAQ,EACR,KAAK,EACL,WAAW,EACX,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,KAAK,EACjB,SAAS,GACe,EAAA;IACxB,QACEA,cACE,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,EAAE;AAChD,YAAA,kCAAkC,EAAE,SAAS;AAC7C,YAAA,kCAAkC,EAAE,SAAS;SAC9C,CAAC,EAAA,QAAA,EAAA,CAED,QAAQ,IAAI,CAAC,SAAS,KACrBC,GAAC,CAAA,gBAAgB,EACf,EAAA,IAAI,EAAE,EAAE,EACR,QAAQ,EAAE,CAAC,QAAQ,CAAC,IAAI,GAAG,GAAG,IAAI,QAAQ,CAAC,KAAK,EAChD,QAAQ,EAAE,QAAQ,EAElB,QAAA,EAAAD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,2CAA2C,EAAA,QAAA,EAAA,CACvD,QAAQ,CAAC,IAAI,EAAA,GAAA,EAAG,QAAQ,CAAC,KAAK,CAAA,EAAA,CAC3B,EACW,CAAA,CACpB,EAEA,SAAS,KACRC,GACE,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,iDAAiD,EAAE;AAC/D,oBAAA,2DAA2D,EACzD,QAAQ;AACX,iBAAA,CAAC,YAEFA,GAAC,CAAA,SAAS,EAAC,EAAA,KAAK,EAAC,SAAS,EAAC,IAAI,EAAE,EAAE,EAAI,CAAA,EAAA,CACnC,CACP,EAEDD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,uCAAuC,EACpD,QAAA,EAAA,CAAAC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,8BAA8B,EAAE,QAAA,EAAA,KAAK,GAAO,EAC3DA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,oCAAoC,EAAE,QAAA,EAAA,WAAW,GAAO,CACnE,EAAA,CAAA,CAAA,EAAA,CACF,EACP;AACH;;;;"}

package/components/ProgressBar/index.js

@@ -1,19 +1,6 @@
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
-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" }))));
+const ProgressBar = ({ progress, tick = false, children, }) => (jsxs("div", { children: [jsxs("div", { className: "cobalt-ProgressBar__TitleSection", children: [jsxs("div", { children: [jsxs("div", { className: "cobalt-ProgressBar__Progression", children: [progress, "%"] }), jsx("div", { className: "cobalt-ProgressBar__Title", children: children })] }), progress === 100 && (jsx("div", { className: "cobalt-ProgressBar__CompletedCheckbox", children: jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: [jsx("title", { children: children }), jsx("g", { fill: "none", fillRule: "evenodd", stroke: "none", strokeWidth: "1", children: jsx("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" }) })] }) }))] }), jsxs("div", { className: "cobalt-ProgressBar__Container", children: [jsx("div", { className: "cobalt-ProgressBar__Foreground", style: { width: `${progress}%` } }), tick && jsx("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":";;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;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/ProgressBar/index.tsx"],"sourcesContent":["import type 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            <title>{children}</title>\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":["_jsxs","_jsx"],"mappings":";;AAYO,MAAM,WAAW,GAAG,CAAC,EAC1B,QAAQ,EACR,IAAI,GAAG,KAAK,EACZ,QAAQ,GACS,MACjBA,IAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EAAA,CACEA,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,kCAAkC,EAAA,QAAA,EAAA,CAC/CA,IACE,CAAA,KAAA,EAAA,EAAA,QAAA,EAAA,CAAAA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,iCAAiC,EAAA,QAAA,EAAA,CAAE,QAAQ,EAAQ,GAAA,CAAA,EAAA,CAAA,EAClEC,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,2BAA2B,EAAE,QAAA,EAAA,QAAQ,EAAO,CAAA,CAAA,EAAA,CACvD,EACL,QAAQ,KAAK,GAAG,KACfA,aAAK,SAAS,EAAC,uCAAuC,EAAA,QAAA,EACpDD,IACE,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B,EAElC,QAAA,EAAA,CAAAC,GAAA,CAAA,OAAA,EAAA,EAAA,QAAA,EAAQ,QAAQ,EAAA,CAAS,EACzBA,GAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS,EAAC,MAAM,EAAC,MAAM,EAAC,WAAW,EAAC,GAAG,EAC7D,QAAA,EAAAA,GAAA,CAAA,MAAA,EAAA,EACE,CAAC,EAAC,sqBAAsqB,EACxqB,IAAI,EAAC,SAAS,EACd,CAAA,EAAA,CACA,IACA,EACF,CAAA,CACP,CACG,EAAA,CAAA,EACND,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,+BAA+B,EAC5C,QAAA,EAAA,CAAAC,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAC,gCAAgC,EAC1C,KAAK,EAAE,EAAE,KAAK,EAAE,CAAG,EAAA,QAAQ,CAAG,CAAA,CAAA,EAAE,EAChC,CAAA,EACD,IAAI,IAAIA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0BAA0B,EAAA,CAAG,CACjD,EAAA,CAAA,CAAA,EAAA,CACF;;;;"}

package/components/ProgressCircular/index.js

@@ -1,5 +1,6 @@
-import React, { useRef, useLayoutEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import cx from 'classnames';
+import { useRef, useLayoutEffect } from 'react';
 
 const ProgressCircular = ({ progress, size, status = "info", animated = false, className, children, }) => {
     const pathRef = useRef(null);
@@ -11,15 +12,12 @@ const ProgressCircular = ({ progress, size, status = "info", animated = false, c
         const to = length * ((100 - value) / 100);
         // Trigger Layout in Safari hack https://jakearchibald.com/2013/animated-line-drawing-svg/
         pathRef.current.getBoundingClientRect();
-        pathRef.current.style.strokeDashoffset = "" + Math.max(0, to);
-    }, []);
-    return (React.createElement("div", { className: cx(`cobalt-circularProgressBar cobalt-circularProgressBar--size${size}`, className, {
+        pathRef.current.style.strokeDashoffset = `${Math.max(0, to)}`;
+    }, [progress]);
+    return (jsxs("div", { className: cx(`cobalt-circularProgressBar cobalt-circularProgressBar--size${size}`, className, {
             "cobalt-circularProgressBar--animated": animated,
             [`cobalt-circularProgressBar--${status}`]: status,
-        }) },
-        React.createElement("div", { className: "cobalt-circularProgressBar__content" }, children),
-        React.createElement("svg", { viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "none" },
-            React.createElement("path", { ref: pathRef, className: "cobalt-circularProgressBar__bar", d: "M5,50a45,45 0 1,0 90,0a45,45 0 1,0 -90,0", strokeLinecap: "round", strokeLinejoin: "round", strokeDashoffset: "282.78302001953125", strokeDasharray: "282.78302001953125" }))));
+        }), children: [jsx("div", { className: "cobalt-circularProgressBar__content", children: children }), jsxs("svg", { viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "none", children: [jsx("title", { children: children }), jsx("path", { ref: pathRef, className: "cobalt-circularProgressBar__bar", d: "M5,50a45,45 0 1,0 90,0a45,45 0 1,0 -90,0", strokeLinecap: "round", strokeLinejoin: "round", strokeDashoffset: "282.78302001953125", strokeDasharray: "282.78302001953125" })] })] }));
 };
 
 export { ProgressCircular };

package/components/ProgressCircular/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/ProgressCircular/index.tsx"],"sourcesContent":["import React, { useLayoutEffect, useRef } from \"react\"\nimport cx from \"classnames\"\n\nexport interface ProgressBarProps {\n  children: React.ReactNode\n  progress: number\n  status?: \"info\" | \"success\" | \"error\"\n  size: 32 | 48 | 64 | 96\n  animated?: boolean\n  className?: string\n}\n\nexport const ProgressCircular = ({\n  progress,\n  size,\n  status = \"info\",\n  animated = false,\n  className,\n  children,\n}: ProgressBarProps) => {\n  const pathRef = useRef<SVGGeometryElement>(null)\n\n  useLayoutEffect(() => {\n    if (!pathRef.current) return\n    const length = pathRef.current.getTotalLength()\n\n    const value = progress\n\n    const to = length * ((100 - value) / 100)\n    // Trigger Layout in Safari hack https://jakearchibald.com/2013/animated-line-drawing-svg/\n    pathRef.current.getBoundingClientRect()\n\n    pathRef.current.style.strokeDashoffset = \"\" + Math.max(0, to)\n  }, [])\n\n  return (\n    <div\n      className={cx(\n        `cobalt-circularProgressBar cobalt-circularProgressBar--size${size}`,\n        className,\n        {\n          \"cobalt-circularProgressBar--animated\": animated,\n          [`cobalt-circularProgressBar--${status}`]: status,\n        }\n      )}\n    >\n      <div className=\"cobalt-circularProgressBar__content\">{children}</div>\n      <svg\n        viewBox=\"0 0 100 100\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        preserveAspectRatio=\"none\"\n      >\n        <path\n          ref={pathRef}\n          className=\"cobalt-circularProgressBar__bar\"\n          d=\"M5,50a45,45 0 1,0 90,0a45,45 0 1,0 -90,0\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeDashoffset=\"282.78302001953125\"\n          strokeDasharray=\"282.78302001953125\"\n        />\n      </svg>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;MAYa,gBAAgB,GAAG,CAAC,EAC/B,QAAQ,EACR,IAAI,EACJ,MAAM,GAAG,MAAM,EACf,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,QAAQ,GACS,KAAI;AACrB,IAAA,MAAM,OAAO,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAA;IAEhD,eAAe,CAAC,MAAK;QACnB,IAAI,CAAC,OAAO,CAAC,OAAO;YAAE,OAAM;QAC5B,MAAM,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,cAAc,EAAE,CAAA;QAE/C,MAAM,KAAK,GAAG,QAAQ,CAAA;AAEtB,QAAA,MAAM,EAAE,GAAG,MAAM,IAAI,CAAC,GAAG,GAAG,KAAK,IAAI,GAAG,CAAC,CAAA;;AAEzC,QAAA,OAAO,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAA;AAEvC,QAAA,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,gBAAgB,GAAG,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,CAAA;KAC9D,EAAE,EAAE,CAAC,CAAA;IAEN,QACE,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CACX,CAAA,2DAAA,EAA8D,IAAI,CAAA,CAAE,EACpE,SAAS,EACT;AACE,YAAA,sCAAsC,EAAE,QAAQ;AAChD,YAAA,CAAC,CAA+B,4BAAA,EAAA,MAAM,CAAE,CAAA,GAAG,MAAM;SAClD,CACF,EAAA;AAED,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,qCAAqC,EAAA,EAAE,QAAQ,CAAO;QACrE,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,aAAa,EACrB,KAAK,EAAC,4BAA4B,EAClC,mBAAmB,EAAC,MAAM,EAAA;AAE1B,YAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,GAAG,EAAE,OAAO,EACZ,SAAS,EAAC,iCAAiC,EAC3C,CAAC,EAAC,0CAA0C,EAC5C,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,gBAAgB,EAAC,oBAAoB,EACrC,eAAe,EAAC,oBAAoB,EAAA,CACpC,CACE,CACF,EACP;AACH;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/ProgressCircular/index.tsx"],"sourcesContent":["import cx from \"classnames\"\nimport type React from \"react\"\nimport { useLayoutEffect, useRef } from \"react\"\n\nexport interface ProgressBarProps {\n  children: React.ReactNode\n  progress: number\n  status?: \"info\" | \"success\" | \"error\"\n  size: 32 | 48 | 64 | 96\n  animated?: boolean\n  className?: string\n}\n\nexport const ProgressCircular = ({\n  progress,\n  size,\n  status = \"info\",\n  animated = false,\n  className,\n  children,\n}: ProgressBarProps) => {\n  const pathRef = useRef<SVGGeometryElement>(null)\n\n  useLayoutEffect(() => {\n    if (!pathRef.current) return\n    const length = pathRef.current.getTotalLength()\n\n    const value = progress\n\n    const to = length * ((100 - value) / 100)\n    // Trigger Layout in Safari hack https://jakearchibald.com/2013/animated-line-drawing-svg/\n    pathRef.current.getBoundingClientRect()\n\n    pathRef.current.style.strokeDashoffset = `${Math.max(0, to)}`\n  }, [progress])\n\n  return (\n    <div\n      className={cx(\n        `cobalt-circularProgressBar cobalt-circularProgressBar--size${size}`,\n        className,\n        {\n          \"cobalt-circularProgressBar--animated\": animated,\n          [`cobalt-circularProgressBar--${status}`]: status,\n        },\n      )}\n    >\n      <div className=\"cobalt-circularProgressBar__content\">{children}</div>\n      <svg\n        viewBox=\"0 0 100 100\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        preserveAspectRatio=\"none\"\n      >\n        <title>{children}</title>\n        <path\n          ref={pathRef}\n          className=\"cobalt-circularProgressBar__bar\"\n          d=\"M5,50a45,45 0 1,0 90,0a45,45 0 1,0 -90,0\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeDashoffset=\"282.78302001953125\"\n          strokeDasharray=\"282.78302001953125\"\n        />\n      </svg>\n    </div>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;MAaa,gBAAgB,GAAG,CAAC,EAC/B,QAAQ,EACR,IAAI,EACJ,MAAM,GAAG,MAAM,EACf,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,QAAQ,GACS,KAAI;AACrB,IAAA,MAAM,OAAO,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAA;IAEhD,eAAe,CAAC,MAAK;QACnB,IAAI,CAAC,OAAO,CAAC,OAAO;YAAE,OAAM;QAC5B,MAAM,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,cAAc,EAAE,CAAA;QAE/C,MAAM,KAAK,GAAG,QAAQ,CAAA;AAEtB,QAAA,MAAM,EAAE,GAAG,MAAM,IAAI,CAAC,GAAG,GAAG,KAAK,IAAI,GAAG,CAAC,CAAA;;AAEzC,QAAA,OAAO,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAA;AAEvC,QAAA,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,gBAAgB,GAAG,CAAA,EAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,CAAA;AAC/D,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,QACEA,IACE,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CACX,CAAA,2DAAA,EAA8D,IAAI,CAAA,CAAE,EACpE,SAAS,EACT;AACE,YAAA,sCAAsC,EAAE,QAAQ;AAChD,YAAA,CAAC,CAA+B,4BAAA,EAAA,MAAM,CAAE,CAAA,GAAG,MAAM;SAClD,CACF,EAAA,QAAA,EAAA,CAEDC,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,qCAAqC,EAAE,QAAA,EAAA,QAAQ,EAAO,CAAA,EACrED,IACE,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,aAAa,EACrB,KAAK,EAAC,4BAA4B,EAClC,mBAAmB,EAAC,MAAM,EAE1B,QAAA,EAAA,CAAAC,GAAA,CAAA,OAAA,EAAA,EAAA,QAAA,EAAQ,QAAQ,EAAA,CAAS,EACzBA,GAAA,CAAA,MAAA,EAAA,EACE,GAAG,EAAE,OAAO,EACZ,SAAS,EAAC,iCAAiC,EAC3C,CAAC,EAAC,0CAA0C,EAC5C,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,gBAAgB,EAAC,oBAAoB,EACrC,eAAe,EAAC,oBAAoB,EACpC,CAAA,CAAA,EAAA,CACE,CACF,EAAA,CAAA,EACP;AACH;;;;"}

package/components/Rating/RatingCompact.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import cx from 'classnames';
 import { RatingIcon, defaultRatingIcon } from './RatingIcons.js';
 import RatingLabel from './RatingLabel.js';
@@ -7,12 +7,7 @@ function formatRatingValue(value) {
     return `${value}`.includes(".") ? value : value.toFixed(1);
 }
 function RatingCompact({ className, value, count, size = 16, icon = defaultRatingIcon, }) {
-    return (React.createElement("div", { className: cx("cobalt-rating", className) },
-        React.createElement(RatingIcon, { icon: icon, size: size, status: "full" }),
-        React.createElement(RatingLabel, null,
-            formatRatingValue(value),
-            " ",
-            count && `(${count})`)));
+    return (jsxs("div", { className: cx("cobalt-rating", className), children: [jsx(RatingIcon, { icon: icon, size: size, status: "full" }), jsxs(RatingLabel, { children: [formatRatingValue(value), " ", count && `(${count})`] })] }));
 }
 
 export { RatingCompact, formatRatingValue };

package/components/Rating/RatingCompact.js.map

@@ -1 +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  count?: number\n}\n\nexport function formatRatingValue(value: number) {\n  return `${value}`.includes(\".\") ? value : value.toFixed(1)\n}\n\nexport function RatingCompact({\n  className,\n  value,\n  count,\n  size = 16,\n  icon = defaultRatingIcon,\n}: RatingCompactPropsType) {\n  return (\n    <div className={cx(\"cobalt-rating\", className)}>\n      <RatingIcon icon={icon} size={size} status={\"full\"} />\n      <RatingLabel>\n        {formatRatingValue(value)} {count && `(${count})`}\n      </RatingLabel>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;AAiBM,SAAU,iBAAiB,CAAC,KAAa,EAAA;IAC7C,OAAO,CAAA,EAAG,KAAK,CAAE,CAAA,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;AAC5D,CAAC;SAEe,aAAa,CAAC,EAC5B,SAAS,EACT,KAAK,EACL,KAAK,EACL,IAAI,GAAG,EAAE,EACT,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,IAAI,EAAE,MAAM,EAAE,MAAM,EAAI,CAAA;AACtD,QAAA,KAAA,CAAA,aAAA,CAAC,WAAW,EAAA,IAAA;YACT,iBAAiB,CAAC,KAAK,CAAC;;AAAG,YAAA,KAAK,IAAI,CAAI,CAAA,EAAA,KAAK,GAAG,CACrC,CACV,EACP;AACH;;;;"}
+{"version":3,"file":"RatingCompact.js","sources":["../../../src/components/Rating/RatingCompact.tsx"],"sourcesContent":["import cx from \"classnames\"\nimport {\n  defaultRatingIcon,\n  RatingIcon,\n  type RatingIconsPropsType,\n} from \"./RatingIcons\"\nimport RatingLabel from \"./RatingLabel\"\n\ntype RatingCompactPropsType = Pick<\n  RatingIconsPropsType,\n  \"className\" | \"value\" | \"size\"\n> & {\n  icon?: JSX.Element\n  count?: number\n}\n\nexport function formatRatingValue(value: number) {\n  return `${value}`.includes(\".\") ? value : value.toFixed(1)\n}\n\nexport function RatingCompact({\n  className,\n  value,\n  count,\n  size = 16,\n  icon = defaultRatingIcon,\n}: RatingCompactPropsType) {\n  return (\n    <div className={cx(\"cobalt-rating\", className)}>\n      <RatingIcon icon={icon} size={size} status={\"full\"} />\n      <RatingLabel>\n        {formatRatingValue(value)} {count && `(${count})`}\n      </RatingLabel>\n    </div>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;AAgBM,SAAU,iBAAiB,CAAC,KAAa,EAAA;IAC7C,OAAO,CAAA,EAAG,KAAK,CAAE,CAAA,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;AAC5D,CAAC;SAEe,aAAa,CAAC,EAC5B,SAAS,EACT,KAAK,EACL,KAAK,EACL,IAAI,GAAG,EAAE,EACT,IAAI,GAAG,iBAAiB,GACD,EAAA;AACvB,IAAA,QACEA,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC,EAC5C,QAAA,EAAA,CAAAC,GAAA,CAAC,UAAU,EAAC,EAAA,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAI,CAAA,EACtDD,KAAC,WAAW,EAAA,EAAA,QAAA,EAAA,CACT,iBAAiB,CAAC,KAAK,CAAC,EAAG,GAAA,EAAA,KAAK,IAAI,CAAI,CAAA,EAAA,KAAK,GAAG,CACrC,EAAA,CAAA,CAAA,EAAA,CACV,EACP;AACH;;;;"}

package/components/Rating/RatingIcons.js

@@ -1,10 +1,12 @@
-import React, { useRef, useState, useCallback } from 'react';
-import { nanoid } from 'nanoid';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import cx from 'classnames';
+import { nanoid } from 'nanoid';
+import React, { useRef, useState, useCallback } from 'react';
+import { getA11yOnClick } from '../../helpers/index.js';
 import '../Icon/index.js';
 import StarIcon from '../Icon/__generated__/StarIcon.js';
 
-const defaultRatingIcon = React.createElement(StarIcon, { color: "primary" });
+const defaultRatingIcon = jsx(StarIcon, { color: "primary" });
 const itemEmptyColor = "surfaceContainerVariant";
 function roundHalf(num) {
     return Math.floor(num * 2) / 2;
@@ -29,12 +31,10 @@ function computeItemStatus(ratingValue, itemValue, icon) {
 }
 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 }))));
+        return (jsxs(Fragment, { children: [React.cloneElement(icon, {
+                    color: itemEmptyColor,
+                    size,
+                }), jsx("div", { className: "cobalt-rating-icons__icon-half-container", children: React.cloneElement(icon, { size }) })] }));
     }
     else {
         const iconColor = status === "empty" ? itemEmptyColor : icon.props.color;
@@ -54,37 +54,35 @@ const RatingIcons = ({ className, max = 5, value, size = 24, editable = false, o
     }, []);
     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, {
+    return (jsx("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 })));
-    })));
+        }, children: items.current.map((_value, idx) => {
+            const itemValue = idx + 1;
+            const itemStatus = computeItemStatus(ratingValue, itemValue, icon);
+            return (jsxs("label", { className: cx("cobalt-rating-icons__icon-wrapper", {
+                    "cobalt-rating-icons__icon-wrapper--selected": selectedIndex === idx,
+                }), ...getA11yOnClick(() => {
+                    if (editable) {
+                        setRatingValue(itemValue);
+                        setSelectedIndex(idx);
+                    }
+                }), onMouseEnter: (e) => {
+                    if (editable) {
+                        e.target.focus();
+                        resetSelection();
+                    }
+                }, children: [jsx("input", { tabIndex: editable &&
+                            (ratingValue === itemValue ||
+                                (ratingValue === 0 && itemValue === 1))
+                            ? 0
+                            : -1, name: name.current, type: "radio", value: itemValue, onChange: () => {
+                            onChange === null || onChange === void 0 ? void 0 : onChange(itemValue);
+                        }, disabled: !editable }), jsx(RatingIcon, { icon: Array.isArray(icon) ? icon[idx] : icon, status: itemStatus, size: itemSize })] }, itemValue));
+        }) }));
 };
 
 export { RatingIcon, RatingIcons, computeItemStatus, defaultRatingIcon, roundHalf };

package/components/Rating/RatingIcons.js.map

@@ -1 +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=\"primary\" />\nconst itemEmptyColor: IconProps[\"color\"] = \"surfaceContainerVariant\"\n\nexport function roundHalf(num: number) {\n  return Math.floor(num * 2) / 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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"}
+{"version":3,"file":"RatingIcons.js","sources":["../../../src/components/Rating/RatingIcons.tsx"],"sourcesContent":["import cx from \"classnames\"\nimport { nanoid } from \"nanoid\"\nimport React, { useCallback, useRef, useState } from \"react\"\nimport { getA11yOnClick } from \"../../helpers\"\nimport { type 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=\"primary\" />\nconst itemEmptyColor: IconProps[\"color\"] = \"surfaceContainerVariant\"\n\nexport function roundHalf(num: number) {\n  return Math.floor(num * 2) / 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={itemValue}\n            {...getA11yOnClick(() => {\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?.(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":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/components/Rating/RatingInput.js

@@ -1,12 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
 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", {
+    return (jsx("div", { className: cx("cobalt-rating-input", {
             "cobalt-rating-input--disabled": disabled,
-        }) },
-        React.createElement(RatingIcons, { ...props, editable: !disabled })));
+        }), children: jsx(RatingIcons, { ...props, editable: !disabled }) }));
 };
 
 export { RatingInput };

package/components/Rating/RatingInput.js.map

@@ -1 +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;;;;"}
+{"version":3,"file":"RatingInput.js","sources":["../../../src/components/Rating/RatingInput.tsx"],"sourcesContent":["import cx from \"classnames\"\nimport { RatingIcons, type 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":["_jsx"],"mappings":";;;;AAKO,MAAM,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAwB,KAAI;AAC1E,IAAA,QACEA,GACE,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE;AACnC,YAAA,+BAA+B,EAAE,QAAQ;AAC1C,SAAA,CAAC,EAEF,QAAA,EAAAA,GAAA,CAAC,WAAW,EAAA,EAAA,GAAK,KAAK,EAAE,QAAQ,EAAE,CAAC,QAAQ,EAAI,CAAA,EAAA,CAC3C,EACP;AACH;;;;"}

package/components/Rating/RatingLabel.js

@@ -1,7 +1,7 @@
-import React from 'react';
+import { jsx } from 'react/jsx-runtime';
 
 function RatingLabel({ children }) {
-    return React.createElement("div", { className: "cobalt-rating__label" }, children);
+    return jsx("div", { className: "cobalt-rating__label", children: children });
 }
 
 export { RatingLabel as default };

package/components/Rating/RatingLabel.js.map

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

package/components/Rating/index.js

@@ -1,12 +1,10 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
 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));
+    return (jsxs("div", { className: cx("cobalt-rating", className), children: [jsx(RatingIcons, { className: iconsClassName, ...iconsProps }), children] }));
 }
 
 export { Rating };

package/components/Rating/index.js.map

@@ -1 +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, formatRatingValue } from \"./RatingCompact\"\nimport RatingLabel from \"./RatingLabel\"\n\ntype RatingPropsType = RatingIconsPropsType & {\n  children?: React.ReactNode\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 {\n  Rating,\n  RatingLabel,\n  RatingInput,\n  RatingCompact,\n  RatingIcons,\n  formatRatingValue,\n}\n"],"names":[],"mappings":";;;;;AAYA,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;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Rating/index.tsx"],"sourcesContent":["import cx from \"classnames\"\nimport type React from \"react\"\nimport { formatRatingValue, RatingCompact } from \"./RatingCompact\"\nimport { RatingIcons, type RatingIconsPropsType } from \"./RatingIcons\"\nimport { RatingInput } from \"./RatingInput\"\nimport RatingLabel from \"./RatingLabel\"\n\ntype RatingPropsType = RatingIconsPropsType & {\n  children?: React.ReactNode\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 {\n  Rating,\n  RatingLabel,\n  RatingInput,\n  RatingCompact,\n  RatingIcons,\n  formatRatingValue,\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;AAYA,SAAS,MAAM,CAAC,EACd,SAAS,EACT,cAAc,EACd,QAAQ,EACR,GAAG,UAAU,EACG,EAAA;IAChB,QACEA,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC,EAC5C,QAAA,EAAA,CAAAC,GAAA,CAAC,WAAW,EAAC,EAAA,SAAS,EAAE,cAAc,EAAM,GAAA,UAAU,GAAI,EACzD,QAAQ,CACL,EAAA,CAAA,EACP;AACH;;;;"}