@drivy/cobalt 2.14.0 → 2.16.0

package/components/Layout/Surfaces/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Layout/Surfaces/index.tsx"],"sourcesContent":["import React, { type ReactNode } from \"react\"\nimport cx from \"classnames\"\nimport { breakpoints } from \"../../../tokens\"\n\nexport type ResponsiveProp<T> = {\n  [key in keyof typeof breakpoints]?: T\n}\n\ntype DirectionProp = \"row\" | \"column\" | \"row-reverse\" | \"column-reverse\"\ntype ResponsiveDirection = ResponsiveProp<DirectionProp>\n\nconst getDirectionClasses = (\n  direction: ResponsiveDirection | DirectionProp\n) => {\n  const directionClasses: string[] = []\n  if (typeof direction === \"string\") {\n    directionClasses.push(`c-flex-${direction}`.replace(\"column\", \"col\"))\n  } else {\n    for (const [key, value] of Object.entries(direction)) {\n      directionClasses.push(`${key}:c-flex-${value}`.replace(\"column\", \"col\"))\n    }\n  }\n  return directionClasses\n}\n\nexport const Flexible = ({\n  children,\n  direction = \"column\",\n  bottomPadding = false,\n  isFullHeight = false,\n}: {\n  children?: ReactNode\n  direction?: ResponsiveDirection | DirectionProp\n  bottomPadding?: boolean\n  isFullHeight?: boolean\n}) => {\n  return (\n    <div\n      className={cx(\"cobalt-layout-flexible\", getDirectionClasses(direction), {\n        \"cobalt-layout--bottomPadding\": bottomPadding,\n        \"cobalt-layout--fullHeight\": isFullHeight,\n      })}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport const FlexibleWithConstraint = ({\n  children,\n  size,\n  direction = \"column\",\n  bottomPadding = false,\n  isFullHeight = false,\n}: {\n  children?: ReactNode\n  size: \"small\" | \"medium\" | \"large\"\n  direction?: ResponsiveDirection | DirectionProp\n  bottomPadding?: boolean\n  isFullHeight?: boolean\n}) => {\n  return (\n    <div\n      className={cx(\n        `cobalt-layout-flexibleWithConstraint cobalt-layout-flexibleWithConstraint--${size}`,\n        getDirectionClasses(direction),\n        {\n          \"cobalt-layout--bottomPadding\": bottomPadding,\n          \"cobalt-layout--fullHeight\": isFullHeight,\n        }\n      )}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport const Fixed = ({\n  children,\n  width,\n  direction = \"column\",\n  bottomPadding = false,\n  isFullHeight = false,\n}: {\n  children?: ReactNode\n  width: 280 | 420 | 600\n  direction?: ResponsiveDirection | DirectionProp\n  bottomPadding?: boolean\n  isFullHeight?: boolean\n}) => {\n  return (\n    <div\n      className={cx(\n        `cobalt-layout-fixed cobalt-layout-fixed--${width}`,\n        getDirectionClasses(direction),\n        {\n          \"cobalt-layout--bottomPadding\": bottomPadding,\n          \"cobalt-layout--fullHeight\": isFullHeight,\n        }\n      )}\n    >\n      {children}\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;AAWA,MAAM,mBAAmB,GAAG,CAC1B,SAA8C,KAC5C;IACF,MAAM,gBAAgB,GAAa,EAAE,CAAA;AACrC,IAAA,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE;AACjC,QAAA,gBAAgB,CAAC,IAAI,CAAC,CAAA,OAAA,EAAU,SAAS,CAAE,CAAA,CAAC,OAAO,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAA;KACtE;SAAM;AACL,QAAA,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE;AACpD,YAAA,gBAAgB,CAAC,IAAI,CAAC,CAAG,EAAA,GAAG,WAAW,KAAK,CAAA,CAAE,CAAC,OAAO,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAA;SACzE;KACF;AACD,IAAA,OAAO,gBAAgB,CAAA;AACzB,CAAC,CAAA;MAEY,QAAQ,GAAG,CAAC,EACvB,QAAQ,EACR,SAAS,GAAG,QAAQ,EACpB,aAAa,GAAG,KAAK,EACrB,YAAY,GAAG,KAAK,GAMrB,KAAI;AACH,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,mBAAmB,CAAC,SAAS,CAAC,EAAE;AACtE,YAAA,8BAA8B,EAAE,aAAa;AAC7C,YAAA,2BAA2B,EAAE,YAAY;AAC1C,SAAA,CAAC,EAED,EAAA,QAAQ,CACL,EACP;AACH,EAAC;MAEY,sBAAsB,GAAG,CAAC,EACrC,QAAQ,EACR,IAAI,EACJ,SAAS,GAAG,QAAQ,EACpB,aAAa,GAAG,KAAK,EACrB,YAAY,GAAG,KAAK,GAOrB,KAAI;AACH,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CACX,CAAA,2EAAA,EAA8E,IAAI,CAAA,CAAE,EACpF,mBAAmB,CAAC,SAAS,CAAC,EAC9B;AACE,YAAA,8BAA8B,EAAE,aAAa;AAC7C,YAAA,2BAA2B,EAAE,YAAY;AAC1C,SAAA,CACF,EAEA,EAAA,QAAQ,CACL,EACP;AACH,EAAC;MAEY,KAAK,GAAG,CAAC,EACpB,QAAQ,EACR,KAAK,EACL,SAAS,GAAG,QAAQ,EACpB,aAAa,GAAG,KAAK,EACrB,YAAY,GAAG,KAAK,GAOrB,KAAI;AACH,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CACX,CAAA,yCAAA,EAA4C,KAAK,CAAA,CAAE,EACnD,mBAAmB,CAAC,SAAS,CAAC,EAC9B;AACE,YAAA,8BAA8B,EAAE,aAAa;AAC7C,YAAA,2BAA2B,EAAE,YAAY;AAC1C,SAAA,CACF,EAEA,EAAA,QAAQ,CACL,EACP;AACH;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Layout/Surfaces/index.tsx"],"sourcesContent":["import cx from \"classnames\"\nimport type { ReactNode } from \"react\"\nimport type { breakpoints } from \"../../../tokens\"\n\nexport type ResponsiveProp<T> = {\n  [key in keyof typeof breakpoints]?: T\n}\n\ntype DirectionProp = \"row\" | \"column\" | \"row-reverse\" | \"column-reverse\"\ntype ResponsiveDirection = ResponsiveProp<DirectionProp>\n\nconst getDirectionClasses = (\n  direction: ResponsiveDirection | DirectionProp,\n) => {\n  const directionClasses: string[] = []\n  if (typeof direction === \"string\") {\n    directionClasses.push(`c-flex-${direction}`.replace(\"column\", \"col\"))\n  } else {\n    for (const [key, value] of Object.entries(direction)) {\n      directionClasses.push(`${key}:c-flex-${value}`.replace(\"column\", \"col\"))\n    }\n  }\n  return directionClasses\n}\n\nexport const Flexible = ({\n  children,\n  direction = \"column\",\n  bottomPadding = false,\n  isFullHeight = false,\n}: {\n  children?: ReactNode\n  direction?: ResponsiveDirection | DirectionProp\n  bottomPadding?: boolean\n  isFullHeight?: boolean\n}) => {\n  return (\n    <div\n      className={cx(\"cobalt-layout-flexible\", getDirectionClasses(direction), {\n        \"cobalt-layout--bottomPadding\": bottomPadding,\n        \"cobalt-layout--fullHeight\": isFullHeight,\n      })}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport const FlexibleWithConstraint = ({\n  children,\n  size,\n  direction = \"column\",\n  bottomPadding = false,\n  isFullHeight = false,\n}: {\n  children?: ReactNode\n  size: \"small\" | \"medium\" | \"large\"\n  direction?: ResponsiveDirection | DirectionProp\n  bottomPadding?: boolean\n  isFullHeight?: boolean\n}) => {\n  return (\n    <div\n      className={cx(\n        `cobalt-layout-flexibleWithConstraint cobalt-layout-flexibleWithConstraint--${size}`,\n        getDirectionClasses(direction),\n        {\n          \"cobalt-layout--bottomPadding\": bottomPadding,\n          \"cobalt-layout--fullHeight\": isFullHeight,\n        },\n      )}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport const Fixed = ({\n  children,\n  width,\n  direction = \"column\",\n  bottomPadding = false,\n  isFullHeight = false,\n}: {\n  children?: ReactNode\n  width: 280 | 420 | 600\n  direction?: ResponsiveDirection | DirectionProp\n  bottomPadding?: boolean\n  isFullHeight?: boolean\n}) => {\n  return (\n    <div\n      className={cx(\n        `cobalt-layout-fixed cobalt-layout-fixed--${width}`,\n        getDirectionClasses(direction),\n        {\n          \"cobalt-layout--bottomPadding\": bottomPadding,\n          \"cobalt-layout--fullHeight\": isFullHeight,\n        },\n      )}\n    >\n      {children}\n    </div>\n  )\n}\n"],"names":["_jsx"],"mappings":";;;AAWA,MAAM,mBAAmB,GAAG,CAC1B,SAA8C,KAC5C;IACF,MAAM,gBAAgB,GAAa,EAAE,CAAA;AACrC,IAAA,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE;AACjC,QAAA,gBAAgB,CAAC,IAAI,CAAC,CAAA,OAAA,EAAU,SAAS,CAAE,CAAA,CAAC,OAAO,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAA;KACtE;SAAM;AACL,QAAA,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE;AACpD,YAAA,gBAAgB,CAAC,IAAI,CAAC,CAAG,EAAA,GAAG,WAAW,KAAK,CAAA,CAAE,CAAC,OAAO,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAA;SACzE;KACF;AACD,IAAA,OAAO,gBAAgB,CAAA;AACzB,CAAC,CAAA;MAEY,QAAQ,GAAG,CAAC,EACvB,QAAQ,EACR,SAAS,GAAG,QAAQ,EACpB,aAAa,GAAG,KAAK,EACrB,YAAY,GAAG,KAAK,GAMrB,KAAI;AACH,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,mBAAmB,CAAC,SAAS,CAAC,EAAE;AACtE,YAAA,8BAA8B,EAAE,aAAa;AAC7C,YAAA,2BAA2B,EAAE,YAAY;AAC1C,SAAA,CAAC,EAED,QAAA,EAAA,QAAQ,EACL,CAAA,EACP;AACH,EAAC;MAEY,sBAAsB,GAAG,CAAC,EACrC,QAAQ,EACR,IAAI,EACJ,SAAS,GAAG,QAAQ,EACpB,aAAa,GAAG,KAAK,EACrB,YAAY,GAAG,KAAK,GAOrB,KAAI;AACH,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CACX,CAAA,2EAAA,EAA8E,IAAI,CAAA,CAAE,EACpF,mBAAmB,CAAC,SAAS,CAAC,EAC9B;AACE,YAAA,8BAA8B,EAAE,aAAa;AAC7C,YAAA,2BAA2B,EAAE,YAAY;AAC1C,SAAA,CACF,EAEA,QAAA,EAAA,QAAQ,EACL,CAAA,EACP;AACH,EAAC;MAEY,KAAK,GAAG,CAAC,EACpB,QAAQ,EACR,KAAK,EACL,SAAS,GAAG,QAAQ,EACpB,aAAa,GAAG,KAAK,EACrB,YAAY,GAAG,KAAK,GAOrB,KAAI;AACH,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CACX,CAAA,yCAAA,EAA4C,KAAK,CAAA,CAAE,EACnD,mBAAmB,CAAC,SAAS,CAAC,EAC9B;AACE,YAAA,8BAA8B,EAAE,aAAa;AAC7C,YAAA,2BAA2B,EAAE,YAAY;AAC1C,SAAA,CACF,EAEA,QAAA,EAAA,QAAQ,EACL,CAAA,EACP;AACH;;;;"}

package/components/Modal/ModalFooter.js

@@ -1,8 +1,8 @@
-import React from 'react';
+import { jsx } from 'react/jsx-runtime';
 import cx from 'classnames';
 
 const ModalFooter = ({ children, className }) => {
-    return React.createElement("div", { className: cx("cobalt-modal-footer", className) }, children);
+    return jsx("div", { className: cx("cobalt-modal-footer", className), children: children });
 };
 
 export { ModalFooter as default };

package/components/Modal/ModalFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalFooter.js","sources":["../../../src/components/Modal/ModalFooter.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\n\nexport type ModalFooterPropsType = {\n  children?: React.ReactNode\n  className?: string\n}\n\nconst ModalFooter = ({ children, className }: ModalFooterPropsType) => {\n  return <div className={cx(\"cobalt-modal-footer\", className)}>{children}</div>\n}\n\nexport default ModalFooter\n"],"names":[],"mappings":";;;AAQM,MAAA,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAwB,KAAI;AACpE,IAAA,OAAO,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,EAAA,EAAG,QAAQ,CAAO,CAAA;AAC/E;;;;"}
+{"version":3,"file":"ModalFooter.js","sources":["../../../src/components/Modal/ModalFooter.tsx"],"sourcesContent":["import cx from \"classnames\"\nimport type React from \"react\"\n\nexport type ModalFooterPropsType = {\n  children?: React.ReactNode\n  className?: string\n}\n\nconst ModalFooter = ({ children, className }: ModalFooterPropsType) => {\n  return <div className={cx(\"cobalt-modal-footer\", className)}>{children}</div>\n}\n\nexport default ModalFooter\n"],"names":["_jsx"],"mappings":";;;AAQM,MAAA,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAwB,KAAI;AACpE,IAAA,OAAOA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAO,CAAA;AAC/E;;;;"}

package/components/Modal/ModalHeader.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { Dialog } from '@ark-ui/react';
 import '../Icon/index.js';
 import CloseIcon from '../Icon/__generated__/CloseIcon.js';
@@ -6,11 +6,7 @@ import CloseIcon from '../Icon/__generated__/CloseIcon.js';
 const ModalHeader = ({ title, close, }) => {
     if (!title && !close)
         return null;
-    return (React.createElement("div", { className: "cobalt-modal-header" },
-        React.createElement(Dialog.Title, { className: "cobalt-modal-header__title" }, title),
-        close && (React.createElement("button", { type: "button", className: "cobalt-modal-header__close-button", onClick: close },
-            React.createElement("span", { "aria-hidden": true },
-                React.createElement(CloseIcon, { color: "onSurfaceVariant" }))))));
+    return (jsxs("div", { className: "cobalt-modal-header", children: [jsx(Dialog.Title, { className: "cobalt-modal-header__title", children: title }), close && (jsx("button", { type: "button", className: "cobalt-modal-header__close-button", onClick: close, children: jsx("span", { "aria-hidden": true, children: jsx(CloseIcon, { color: "onSurfaceVariant" }) }) }))] }));
 };
 
 export { ModalHeader as default };

package/components/Modal/ModalHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalHeader.js","sources":["../../../src/components/Modal/ModalHeader.tsx"],"sourcesContent":["import React from \"react\"\nimport { Dialog } from \"@ark-ui/react\"\n\nimport { CloseIcon } from \"../Icon\"\n\nconst ModalHeader = ({\n  title,\n  close,\n}: {\n  title?: React.ReactNode\n  close?: () => void\n}) => {\n  if (!title && !close) return null\n\n  return (\n    <div className=\"cobalt-modal-header\">\n      <Dialog.Title className=\"cobalt-modal-header__title\">\n        {title}\n      </Dialog.Title>\n      {close && (\n        <button\n          type=\"button\"\n          className=\"cobalt-modal-header__close-button\"\n          onClick={close}\n        >\n          <span aria-hidden>\n            <CloseIcon color=\"onSurfaceVariant\" />\n          </span>\n        </button>\n      )}\n    </div>\n  )\n}\n\nexport default ModalHeader\n"],"names":[],"mappings":";;;;;AAKM,MAAA,WAAW,GAAG,CAAC,EACnB,KAAK,EACL,KAAK,GAIN,KAAI;AACH,IAAA,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK;AAAE,QAAA,OAAO,IAAI,CAAA;AAEjC,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,qBAAqB,EAAA;QAClC,KAAC,CAAA,aAAA,CAAA,MAAM,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,4BAA4B,EACjD,EAAA,KAAK,CACO;AACd,QAAA,KAAK,KACJ,KACE,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,mCAAmC,EAC7C,OAAO,EAAE,KAAK,EAAA;AAEd,YAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA;gBACE,KAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,KAAK,EAAC,kBAAkB,EAAG,CAAA,CACjC,CACA,CACV,CACG,EACP;AACH;;;;"}
+{"version":3,"file":"ModalHeader.js","sources":["../../../src/components/Modal/ModalHeader.tsx"],"sourcesContent":["import { Dialog } from \"@ark-ui/react\"\nimport type React from \"react\"\n\nimport { CloseIcon } from \"../Icon\"\n\nconst ModalHeader = ({\n  title,\n  close,\n}: {\n  title?: React.ReactNode\n  close?: () => void\n}) => {\n  if (!title && !close) return null\n\n  return (\n    <div className=\"cobalt-modal-header\">\n      <Dialog.Title className=\"cobalt-modal-header__title\">\n        {title}\n      </Dialog.Title>\n      {close && (\n        <button\n          type=\"button\"\n          className=\"cobalt-modal-header__close-button\"\n          onClick={close}\n        >\n          <span aria-hidden>\n            <CloseIcon color=\"onSurfaceVariant\" />\n          </span>\n        </button>\n      )}\n    </div>\n  )\n}\n\nexport default ModalHeader\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;AAKM,MAAA,WAAW,GAAG,CAAC,EACnB,KAAK,EACL,KAAK,GAIN,KAAI;AACH,IAAA,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK;AAAE,QAAA,OAAO,IAAI,CAAA;IAEjC,QACEA,cAAK,SAAS,EAAC,qBAAqB,EAClC,QAAA,EAAA,CAAAC,GAAA,CAAC,MAAM,CAAC,KAAK,IAAC,SAAS,EAAC,4BAA4B,EACjD,QAAA,EAAA,KAAK,GACO,EACd,KAAK,KACJA,GACE,CAAA,QAAA,EAAA,EAAA,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,mCAAmC,EAC7C,OAAO,EAAE,KAAK,EAAA,QAAA,EAEdA,GACE,CAAA,MAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAAA,GAAA,CAAC,SAAS,EAAC,EAAA,KAAK,EAAC,kBAAkB,EAAA,CAAG,GACjC,EACA,CAAA,CACV,CACG,EAAA,CAAA,EACP;AACH;;;;"}

package/components/Modal/MultiStepModal.js

@@ -1,5 +1,6 @@
-import React, { useRef, useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import cx from 'classnames';
+import { useRef, useState } from 'react';
 import Modal from './index.js';
 
 const MultiStepModal = ({ stepData = null, close, steps, onHidden, useMidSizeHeight = true, ...modalProps }) => {
@@ -25,21 +26,15 @@ const MultiStepModal = ({ stepData = null, close, steps, onHidden, useMidSizeHei
     const minimumScale = useMidSizeHeight
         ? "c-opacity-0 c-grid-rows-[0.5fr]"
         : "c-opacity-0 c-grid-rows-[0fr]";
-    return (React.createElement(Modal, { ...modalProps, title: React.createElement(CurrentStepComponents.title, { ...stepProps }), close: close, onHidden: onModalClosed },
-        React.createElement("div", { className: "c-w-full c-overflow-hidden" },
-            React.createElement("div", { className: "c-py-sm c-transition-transform c-duration-500 c-ease-in-out", ref: bodyScrollContentRef, style: {
-                    width: `${steps.length * 100}%`,
-                    transform: `translateX(-${(100 / steps.length) * currentStep}%)`,
-                } }, steps.map((StepComponents, index) => {
-                return (React.createElement("div", { key: "modal_step_" + index, className: cx("c-inline-grid c-align-top c-transition-all c-duration-500", {
-                        "c-opacity-100 c-grid-rows-[1fr]": index === currentStep,
-                        [minimumScale]: index !== currentStep,
-                    }), style: { width: `${100 / steps.length}%` } },
-                    React.createElement("div", { className: "c-overflow-hidden" },
-                        React.createElement(StepComponents.content, { ...stepProps }))));
-            }))),
-        CurrentStepComponents.footer && (React.createElement(Modal.Footer, null,
-            React.createElement(CurrentStepComponents.footer, { ...stepProps })))));
+    return (jsxs(Modal, { ...modalProps, title: jsx(CurrentStepComponents.title, { ...stepProps }), close: close, onHidden: onModalClosed, children: [jsx("div", { className: "c-w-full c-overflow-hidden", children: jsx("div", { className: "c-py-sm c-transition-transform c-duration-500 c-ease-in-out", ref: bodyScrollContentRef, style: {
+                        width: `${steps.length * 100}%`,
+                        transform: `translateX(-${(100 / steps.length) * currentStep}%)`,
+                    }, children: steps.map((StepComponents, index) => {
+                        return (jsx("div", { className: cx("c-inline-grid c-align-top c-transition-all c-duration-500", {
+                                "c-opacity-100 c-grid-rows-[1fr]": index === currentStep,
+                                [minimumScale]: index !== currentStep,
+                            }), style: { width: `${100 / steps.length}%` }, children: jsx("div", { className: "c-overflow-hidden", children: jsx(StepComponents.content, { ...stepProps }) }) }, `step-${index}-${steps[index].title.toString()}`));
+                    }) }) }), CurrentStepComponents.footer && (jsx(Modal.Footer, { children: jsx(CurrentStepComponents.footer, { ...stepProps }) }))] }));
 };
 
 export { MultiStepModal as default };

package/components/Modal/MultiStepModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiStepModal.js","sources":["../../../src/components/Modal/MultiStepModal.tsx"],"sourcesContent":["import React, { useRef, useState } from \"react\"\nimport cx from \"classnames\"\nimport Modal, { ModalPropsType } from \".\"\n\ntype StepComponentType<T> = (props: {\n  navigation: {\n    nextStep: () => void\n    previousStep: () => void\n    closeModal: () => void\n  }\n  data: T\n}) => React.ReactNode\n\nexport type ModalStepType<T> = {\n  title: StepComponentType<T>\n  content: StepComponentType<T>\n  footer?: StepComponentType<T>\n}\n\ntype MultiStepsModalProps<T = null> = {\n  stepData?: T\n  close: () => void\n  onHidden?: (currentStepIndex: number) => void\n  steps: ModalStepType<T>[]\n  useMidSizeHeight?: boolean\n} & Omit<ModalPropsType, \"children\" | \"onHidden\" | \"close\">\n\nconst MultiStepModal = <T,>({\n  stepData = null as T,\n  close,\n  steps,\n  onHidden,\n  useMidSizeHeight = true,\n  ...modalProps\n}: MultiStepsModalProps<T>) => {\n  const bodyScrollContentRef = useRef<HTMLDivElement>(null)\n  const [currentStep, setCurrentStep] = useState(0)\n\n  const handleNextStep = () => {\n    setCurrentStep(\n      currentStep >= steps.length - 1 ? currentStep : currentStep + 1\n    )\n  }\n\n  const handlePreviousStep = () => {\n    setCurrentStep(currentStep <= 0 ? 0 : currentStep - 1)\n  }\n\n  const onModalClosed = () => {\n    onHidden?.(currentStep)\n    setCurrentStep(0)\n  }\n\n  const navigation = {\n    nextStep: handleNextStep,\n    previousStep: handlePreviousStep,\n    closeModal: close,\n  }\n\n  const CurrentStepComponents = steps[currentStep]\n  const stepProps = { data: stepData, navigation }\n\n  const minimumScale = useMidSizeHeight\n    ? \"c-opacity-0 c-grid-rows-[0.5fr]\"\n    : \"c-opacity-0 c-grid-rows-[0fr]\"\n\n  return (\n    <Modal\n      {...modalProps}\n      title={<CurrentStepComponents.title {...stepProps} />}\n      close={close}\n      onHidden={onModalClosed}\n    >\n      <div className=\"c-w-full c-overflow-hidden\">\n        <div\n          className=\"c-py-sm c-transition-transform c-duration-500 c-ease-in-out\"\n          ref={bodyScrollContentRef}\n          style={{\n            width: `${steps.length * 100}%`,\n            transform: `translateX(-${(100 / steps.length) * currentStep}%)`,\n          }}\n        >\n          {steps.map((StepComponents, index) => {\n            return (\n              <div\n                key={\"modal_step_\" + index}\n                className={cx(\n                  \"c-inline-grid c-align-top c-transition-all c-duration-500\",\n                  {\n                    \"c-opacity-100 c-grid-rows-[1fr]\": index === currentStep,\n                    [minimumScale]: index !== currentStep,\n                  }\n                )}\n                style={{ width: `${100 / steps.length}%` }}\n              >\n                <div className=\"c-overflow-hidden\">\n                  <StepComponents.content {...stepProps} />\n                </div>\n              </div>\n            )\n          })}\n        </div>\n      </div>\n      {CurrentStepComponents.footer && (\n        <Modal.Footer>\n          <CurrentStepComponents.footer {...stepProps} />\n        </Modal.Footer>\n      )}\n    </Modal>\n  )\n}\n\nexport default MultiStepModal\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"MultiStepModal.js","sources":["../../../src/components/Modal/MultiStepModal.tsx"],"sourcesContent":["import cx from \"classnames\"\nimport type React from \"react\"\nimport { useRef, useState } from \"react\"\nimport Modal, { type ModalPropsType } from \".\"\n\ntype StepComponentType<T> = (props: {\n  navigation: {\n    nextStep: () => void\n    previousStep: () => void\n    closeModal: () => void\n  }\n  data: T\n}) => React.ReactNode\n\nexport type ModalStepType<T> = {\n  title: StepComponentType<T>\n  content: StepComponentType<T>\n  footer?: StepComponentType<T>\n}\n\ntype MultiStepsModalProps<T = null> = {\n  stepData?: T\n  close: () => void\n  onHidden?: (currentStepIndex: number) => void\n  steps: ModalStepType<T>[]\n  useMidSizeHeight?: boolean\n} & Omit<ModalPropsType, \"children\" | \"onHidden\" | \"close\">\n\nconst MultiStepModal = <T,>({\n  stepData = null as T,\n  close,\n  steps,\n  onHidden,\n  useMidSizeHeight = true,\n  ...modalProps\n}: MultiStepsModalProps<T>) => {\n  const bodyScrollContentRef = useRef<HTMLDivElement>(null)\n  const [currentStep, setCurrentStep] = useState(0)\n\n  const handleNextStep = () => {\n    setCurrentStep(\n      currentStep >= steps.length - 1 ? currentStep : currentStep + 1,\n    )\n  }\n\n  const handlePreviousStep = () => {\n    setCurrentStep(currentStep <= 0 ? 0 : currentStep - 1)\n  }\n\n  const onModalClosed = () => {\n    onHidden?.(currentStep)\n    setCurrentStep(0)\n  }\n\n  const navigation = {\n    nextStep: handleNextStep,\n    previousStep: handlePreviousStep,\n    closeModal: close,\n  }\n\n  const CurrentStepComponents = steps[currentStep]\n  const stepProps = { data: stepData, navigation }\n\n  const minimumScale = useMidSizeHeight\n    ? \"c-opacity-0 c-grid-rows-[0.5fr]\"\n    : \"c-opacity-0 c-grid-rows-[0fr]\"\n\n  return (\n    <Modal\n      {...modalProps}\n      title={<CurrentStepComponents.title {...stepProps} />}\n      close={close}\n      onHidden={onModalClosed}\n    >\n      <div className=\"c-w-full c-overflow-hidden\">\n        <div\n          className=\"c-py-sm c-transition-transform c-duration-500 c-ease-in-out\"\n          ref={bodyScrollContentRef}\n          style={{\n            width: `${steps.length * 100}%`,\n            transform: `translateX(-${(100 / steps.length) * currentStep}%)`,\n          }}\n        >\n          {steps.map((StepComponents, index) => {\n            return (\n              <div\n                key={`step-${index}-${steps[index].title.toString()}`}\n                className={cx(\n                  \"c-inline-grid c-align-top c-transition-all c-duration-500\",\n                  {\n                    \"c-opacity-100 c-grid-rows-[1fr]\": index === currentStep,\n                    [minimumScale]: index !== currentStep,\n                  },\n                )}\n                style={{ width: `${100 / steps.length}%` }}\n              >\n                <div className=\"c-overflow-hidden\">\n                  <StepComponents.content {...stepProps} />\n                </div>\n              </div>\n            )\n          })}\n        </div>\n      </div>\n      {CurrentStepComponents.footer && (\n        <Modal.Footer>\n          <CurrentStepComponents.footer {...stepProps} />\n        </Modal.Footer>\n      )}\n    </Modal>\n  )\n}\n\nexport default MultiStepModal\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/components/Modal/index.js

@@ -1,44 +1,37 @@
-import React, { forwardRef, useEffect, isValidElement } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { Dialog, Portal } from '@ark-ui/react';
 import cx from 'classnames';
-import ModalHeader from './ModalHeader.js';
+import React, { forwardRef, useEffect, isValidElement } from 'react';
 import ModalFooter from './ModalFooter.js';
+import ModalHeader from './ModalHeader.js';
 
 // Only for the API, render nothing, we use ModalFooterInternal internally
 const ModalFooterAPI = (_props) => null;
 const isModalFooterAPIComponent = (component) => React.isValidElement(component) && component.type === ModalFooterAPI;
-const Modal = forwardRef(({ isOpen, close, className, initialFocusRef, ["aria-label"]: ariaLabel, title, children, overflowHidden = true, bodySpacing = true, fullWidth, fullHeight, onHidden, onShow, skipAnimation, onDismissAttempt, }, ref) => {
+const Modal = forwardRef(({ isOpen, close, className, initialFocusRef, "aria-label": ariaLabel, title, children, overflowHidden = true, bodySpacing = true, fullWidth, fullHeight, onHidden, onShow, skipAnimation, onDismissAttempt, }, ref) => {
     useEffect(() => {
         isOpen && (onShow === null || onShow === void 0 ? void 0 : onShow());
     }, [onShow, isOpen]);
     const modalFooter = React.Children.toArray(children).find((c) => isModalFooterAPIComponent(c));
     const hasFooter = isValidElement(modalFooter);
-    return (React.createElement(Dialog.Root, { "aria-label": ariaLabel, open: isOpen, onOpenChange: (e) => {
+    return (jsx(Dialog.Root, { "aria-label": ariaLabel, open: isOpen, onOpenChange: (e) => {
             e.open ? onShow === null || onShow === void 0 ? void 0 : onShow() : close === null || close === void 0 ? void 0 : close();
         }, onExitComplete: onHidden, initialFocusEl: initialFocusRef && (() => initialFocusRef.current), onPointerDownOutside: close ? undefined : onDismissAttempt, lazyMount: true, 
         // For some reason, onHidden can sometimes not be called if we use unmountOnExit
-        unmountOnExit: !onHidden },
-        React.createElement(Portal, null,
-            React.createElement(Dialog.Backdrop, { className: cx("cobalt-modal__overlay", {
+        unmountOnExit: !onHidden, children: jsx(Portal, { children: jsx(Dialog.Backdrop, { className: cx("cobalt-modal__overlay", {
                     "cobalt-modal--skipAnimation__enter": skipAnimation === null || skipAnimation === void 0 ? void 0 : skipAnimation.enter,
                     "cobalt-modal--skipAnimation__leave": skipAnimation === null || skipAnimation === void 0 ? void 0 : skipAnimation.leave,
-                }) },
-                React.createElement(Dialog.Positioner, { className: cx("cobalt-modal", {
+                }), children: jsx(Dialog.Positioner, { className: cx("cobalt-modal", {
                         "cobalt-modal--overflowHidden": overflowHidden,
                         "cobalt-modal--fullHeight": fullHeight,
                         "cobalt-modal--fullWidth": fullWidth,
-                    }), ref: ref },
-                    React.createElement(Dialog.Content, { className: cx("cobalt-modal__content", className, {
+                    }), ref: ref, children: jsxs(Dialog.Content, { className: cx("cobalt-modal__content", className, {
                             "cobalt-modal--skipAnimation__enter": skipAnimation === null || skipAnimation === void 0 ? void 0 : skipAnimation.enter,
                             "cobalt-modal--skipAnimation__leave": skipAnimation === null || skipAnimation === void 0 ? void 0 : skipAnimation.leave,
-                        }) },
-                        React.createElement(ModalHeader, { title: title, close: close }),
-                        React.createElement(Dialog.Description, { className: "cobalt-modal-body__wrapper" },
-                            React.createElement("div", { className: cx("cobalt-modal-body", {
-                                    "cobalt-modal-body--bodySpacing": bodySpacing,
-                                    "cobalt-modal-body--hasFooter": hasFooter,
-                                }) }, children),
-                            hasFooter && React.createElement(ModalFooter, { ...modalFooter.props }))))))));
+                        }), children: [jsx(ModalHeader, { title: title, close: close }), jsxs(Dialog.Description, { className: "cobalt-modal-body__wrapper", children: [jsx("div", { className: cx("cobalt-modal-body", {
+                                            "cobalt-modal-body--bodySpacing": bodySpacing,
+                                            "cobalt-modal-body--hasFooter": hasFooter,
+                                        }), children: children }), hasFooter && jsx(ModalFooter, { ...modalFooter.props })] })] }) }) }) }) }));
 });
 Modal.displayName = "Modal";
 var Modal$1 = Object.assign(Modal, { Footer: ModalFooterAPI });

package/components/Modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Modal/index.tsx"],"sourcesContent":["import React, { isValidElement, useEffect, forwardRef } from \"react\"\nimport { Dialog, Portal } from \"@ark-ui/react\"\nimport cx from \"classnames\"\n\nimport ModalHeader from \"./ModalHeader\"\nimport ModalFooter, { ModalFooterPropsType } from \"./ModalFooter\"\n\nexport type ModalPropsType = {\n  /**\n   * mandatory for A11y\n   */\n  [\"aria-label\"]: string\n  /**\n   * Function called to close the modal, providing it make the modal closeable\n   */\n  close?: () => void\n  /**\n   * React.ref of the element to focus first when the modal opens\n   */\n  initialFocusRef?: React.RefObject<HTMLElement>\n  /**\n   * State to show or hide the modal/dialog\n   */\n  isOpen: boolean\n  /**\n   * Custom css classes to add to the modal\n   */\n  className?: string\n  /**\n   * Action to fire if the user try to dismiss when the modal is not closeable\n   */\n  onDismissAttempt?: () => void\n  /**\n   * Listener called when the modal has been fully hidden\n   */\n  onHidden?: () => void\n  /**\n   * Listener called when the modal begins to show\n   */\n  onShow?: () => void\n  /**\n   * Modal title\n   */\n  title?: React.ReactNode\n  /**\n   * Disable/Enable body paddings (enabled by default)\n   */\n  bodySpacing?: boolean\n  /**\n   * Disable/Enable hidding overflowing absolute elements (enabled by default)\n   */\n  overflowHidden?: boolean\n  /**\n   * Disable enter/leave animation (animation enabled by default)\n   */\n  skipAnimation?: {\n    enter: boolean\n    leave: boolean\n  }\n  /**\n   * Disable modal max-width limit\n   */\n  fullWidth?: boolean\n  /**\n   * Always take the full height of the screen\n   */\n  fullHeight?: boolean\n  /**\n   * Remove the modal from the DOM on hidden (enabled by default)\n   */\n  unmountOnHidden?: boolean\n  /**\n   * Modal body content\n   */\n  children: React.ReactNode\n}\n\n// Only for the API, render nothing, we use ModalFooterInternal internally\nexport const ModalFooterAPI = (_props: ModalFooterPropsType) => null\n\nexport const isModalFooterAPIComponent = (\n  component: React.ReactNode\n): component is React.ReactElement<ModalFooterPropsType> =>\n  React.isValidElement(component) && component.type === ModalFooterAPI\n\nconst Modal = forwardRef<HTMLDivElement, ModalPropsType>(\n  (\n    {\n      isOpen,\n      close,\n      className,\n      initialFocusRef,\n      [\"aria-label\"]: ariaLabel,\n      title,\n      children,\n      overflowHidden = true,\n      bodySpacing = true,\n      fullWidth,\n      fullHeight,\n      onHidden,\n      onShow,\n      skipAnimation,\n      onDismissAttempt,\n    }: ModalPropsType,\n    ref\n  ) => {\n    useEffect(() => {\n      isOpen && onShow?.()\n    }, [onShow, isOpen])\n\n    const modalFooter = React.Children.toArray(children).find((c) =>\n      isModalFooterAPIComponent(c)\n    )\n    const hasFooter = isValidElement(modalFooter)\n\n    return (\n      <Dialog.Root\n        aria-label={ariaLabel}\n        open={isOpen}\n        onOpenChange={(e) => {\n          e.open ? onShow?.() : close?.()\n        }}\n        onExitComplete={onHidden}\n        initialFocusEl={initialFocusRef && (() => initialFocusRef.current)}\n        onPointerDownOutside={close ? undefined : onDismissAttempt}\n        lazyMount\n        // For some reason, onHidden can sometimes not be called if we use unmountOnExit\n        unmountOnExit={!onHidden}\n      >\n        <Portal>\n          <Dialog.Backdrop\n            className={cx(\"cobalt-modal__overlay\", {\n              \"cobalt-modal--skipAnimation__enter\": skipAnimation?.enter,\n              \"cobalt-modal--skipAnimation__leave\": skipAnimation?.leave,\n            })}\n          >\n            <Dialog.Positioner\n              className={cx(\"cobalt-modal\", {\n                \"cobalt-modal--overflowHidden\": overflowHidden,\n                \"cobalt-modal--fullHeight\": fullHeight,\n                \"cobalt-modal--fullWidth\": fullWidth,\n              })}\n              ref={ref}\n            >\n              <Dialog.Content\n                className={cx(\"cobalt-modal__content\", className, {\n                  \"cobalt-modal--skipAnimation__enter\": skipAnimation?.enter,\n                  \"cobalt-modal--skipAnimation__leave\": skipAnimation?.leave,\n                })}\n              >\n                <ModalHeader title={title} close={close} />\n                <Dialog.Description className=\"cobalt-modal-body__wrapper\">\n                  <div\n                    className={cx(\"cobalt-modal-body\", {\n                      \"cobalt-modal-body--bodySpacing\": bodySpacing,\n                      \"cobalt-modal-body--hasFooter\": hasFooter,\n                    })}\n                  >\n                    {children}\n                  </div>\n                  {hasFooter && <ModalFooter {...modalFooter.props} />}\n                </Dialog.Description>\n              </Dialog.Content>\n            </Dialog.Positioner>\n          </Dialog.Backdrop>\n        </Portal>\n      </Dialog.Root>\n    )\n  }\n)\n\nModal.displayName = \"Modal\"\n\nexport default Object.assign(Modal, { Footer: ModalFooterAPI })\n\nexport { default as MultiStepModal, type ModalStepType } from \"./MultiStepModal\"\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Modal/index.tsx"],"sourcesContent":["import { Dialog, Portal } from \"@ark-ui/react\"\nimport cx from \"classnames\"\nimport React, { forwardRef, isValidElement, useEffect } from \"react\"\nimport ModalFooter, { type ModalFooterPropsType } from \"./ModalFooter\"\nimport ModalHeader from \"./ModalHeader\"\n\nexport type ModalPropsType = {\n  /**\n   * mandatory for A11y\n   */\n  \"aria-label\": string\n  /**\n   * Function called to close the modal, providing it make the modal closeable\n   */\n  close?: () => void\n  /**\n   * React.ref of the element to focus first when the modal opens\n   */\n  initialFocusRef?: React.RefObject<HTMLElement>\n  /**\n   * State to show or hide the modal/dialog\n   */\n  isOpen: boolean\n  /**\n   * Custom css classes to add to the modal\n   */\n  className?: string\n  /**\n   * Action to fire if the user try to dismiss when the modal is not closeable\n   */\n  onDismissAttempt?: () => void\n  /**\n   * Listener called when the modal has been fully hidden\n   */\n  onHidden?: () => void\n  /**\n   * Listener called when the modal begins to show\n   */\n  onShow?: () => void\n  /**\n   * Modal title\n   */\n  title?: React.ReactNode\n  /**\n   * Disable/Enable body paddings (enabled by default)\n   */\n  bodySpacing?: boolean\n  /**\n   * Disable/Enable hidding overflowing absolute elements (enabled by default)\n   */\n  overflowHidden?: boolean\n  /**\n   * Disable enter/leave animation (animation enabled by default)\n   */\n  skipAnimation?: {\n    enter: boolean\n    leave: boolean\n  }\n  /**\n   * Disable modal max-width limit\n   */\n  fullWidth?: boolean\n  /**\n   * Always take the full height of the screen\n   */\n  fullHeight?: boolean\n  /**\n   * Remove the modal from the DOM on hidden (enabled by default)\n   */\n  unmountOnHidden?: boolean\n  /**\n   * Modal body content\n   */\n  children: React.ReactNode\n}\n\n// Only for the API, render nothing, we use ModalFooterInternal internally\nexport const ModalFooterAPI = (_props: ModalFooterPropsType) => null\n\nexport const isModalFooterAPIComponent = (\n  component: React.ReactNode,\n): component is React.ReactElement<ModalFooterPropsType> =>\n  React.isValidElement(component) && component.type === ModalFooterAPI\n\nconst Modal = forwardRef<HTMLDivElement, ModalPropsType>(\n  (\n    {\n      isOpen,\n      close,\n      className,\n      initialFocusRef,\n      \"aria-label\": ariaLabel,\n      title,\n      children,\n      overflowHidden = true,\n      bodySpacing = true,\n      fullWidth,\n      fullHeight,\n      onHidden,\n      onShow,\n      skipAnimation,\n      onDismissAttempt,\n    }: ModalPropsType,\n    ref,\n  ) => {\n    useEffect(() => {\n      isOpen && onShow?.()\n    }, [onShow, isOpen])\n\n    const modalFooter = React.Children.toArray(children).find((c) =>\n      isModalFooterAPIComponent(c),\n    )\n    const hasFooter = isValidElement(modalFooter)\n\n    return (\n      <Dialog.Root\n        aria-label={ariaLabel}\n        open={isOpen}\n        onOpenChange={(e) => {\n          e.open ? onShow?.() : close?.()\n        }}\n        onExitComplete={onHidden}\n        initialFocusEl={initialFocusRef && (() => initialFocusRef.current)}\n        onPointerDownOutside={close ? undefined : onDismissAttempt}\n        lazyMount\n        // For some reason, onHidden can sometimes not be called if we use unmountOnExit\n        unmountOnExit={!onHidden}\n      >\n        <Portal>\n          <Dialog.Backdrop\n            className={cx(\"cobalt-modal__overlay\", {\n              \"cobalt-modal--skipAnimation__enter\": skipAnimation?.enter,\n              \"cobalt-modal--skipAnimation__leave\": skipAnimation?.leave,\n            })}\n          >\n            <Dialog.Positioner\n              className={cx(\"cobalt-modal\", {\n                \"cobalt-modal--overflowHidden\": overflowHidden,\n                \"cobalt-modal--fullHeight\": fullHeight,\n                \"cobalt-modal--fullWidth\": fullWidth,\n              })}\n              ref={ref}\n            >\n              <Dialog.Content\n                className={cx(\"cobalt-modal__content\", className, {\n                  \"cobalt-modal--skipAnimation__enter\": skipAnimation?.enter,\n                  \"cobalt-modal--skipAnimation__leave\": skipAnimation?.leave,\n                })}\n              >\n                <ModalHeader title={title} close={close} />\n                <Dialog.Description className=\"cobalt-modal-body__wrapper\">\n                  <div\n                    className={cx(\"cobalt-modal-body\", {\n                      \"cobalt-modal-body--bodySpacing\": bodySpacing,\n                      \"cobalt-modal-body--hasFooter\": hasFooter,\n                    })}\n                  >\n                    {children}\n                  </div>\n                  {hasFooter && <ModalFooter {...modalFooter.props} />}\n                </Dialog.Description>\n              </Dialog.Content>\n            </Dialog.Positioner>\n          </Dialog.Backdrop>\n        </Portal>\n      </Dialog.Root>\n    )\n  },\n)\n\nModal.displayName = \"Modal\"\n\nexport default Object.assign(Modal, { Footer: ModalFooterAPI })\n\nexport { default as MultiStepModal, type ModalStepType } from \"./MultiStepModal\"\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/components/Note/index.js

@@ -1,10 +1,10 @@
-import React from 'react';
+import { jsx } from 'react/jsx-runtime';
 import cx from 'classnames';
 
-const Note = ({ children, fullWidth = false, className, isError = false, }) => (React.createElement("div", { className: cx("cobalt-Note", className, {
+const Note = ({ children, fullWidth = false, className, isError = false, }) => (jsx("div", { className: cx("cobalt-Note", className, {
         "cobalt-Note--fullWidth": fullWidth,
         "cobalt-Note--error": isError,
-    }) }, children));
+    }), children: children }));
 
 export { Note, Note as default };
 //# sourceMappingURL=index.js.map

package/components/Note/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Note/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\n\nexport interface NoteProps {\n  children: React.ReactNode\n  /**\n   * will fill available width\n   * @default false\n   */\n  fullWidth?: boolean\n  className?: string\n  isError?: boolean\n}\n\nexport const Note = ({\n  children,\n  fullWidth = false,\n  className,\n  isError = false,\n}: NoteProps) => (\n  <div\n    className={cx(\"cobalt-Note\", className, {\n      \"cobalt-Note--fullWidth\": fullWidth,\n      \"cobalt-Note--error\": isError,\n    })}\n  >\n    {children}\n  </div>\n)\n\nexport default Note\n"],"names":[],"mappings":";;;AAcO,MAAM,IAAI,GAAG,CAAC,EACnB,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,SAAS,EACT,OAAO,GAAG,KAAK,GACL,MACV,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE;AACtC,QAAA,wBAAwB,EAAE,SAAS;AACnC,QAAA,oBAAoB,EAAE,OAAO;AAC9B,KAAA,CAAC,EAED,EAAA,QAAQ,CACL;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Note/index.tsx"],"sourcesContent":["import cx from \"classnames\"\nimport type React from \"react\"\n\nexport interface NoteProps {\n  children: React.ReactNode\n  /**\n   * will fill available width\n   * @default false\n   */\n  fullWidth?: boolean\n  className?: string\n  isError?: boolean\n}\n\nexport const Note = ({\n  children,\n  fullWidth = false,\n  className,\n  isError = false,\n}: NoteProps) => (\n  <div\n    className={cx(\"cobalt-Note\", className, {\n      \"cobalt-Note--fullWidth\": fullWidth,\n      \"cobalt-Note--error\": isError,\n    })}\n  >\n    {children}\n  </div>\n)\n\nexport default Note\n"],"names":["_jsx"],"mappings":";;;AAcO,MAAM,IAAI,GAAG,CAAC,EACnB,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,SAAS,EACT,OAAO,GAAG,KAAK,GACL,MACVA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE;AACtC,QAAA,wBAAwB,EAAE,SAAS;AACnC,QAAA,oBAAoB,EAAE,OAAO;AAC9B,KAAA,CAAC,EAED,QAAA,EAAA,QAAQ,EACL,CAAA;;;;"}

package/components/Pagination/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import cx from 'classnames';
 import Button from '../Buttons/Button/index.js';
 import '../Icon/index.js';
@@ -8,7 +8,7 @@ import ChevronRightIcon from '../Icon/__generated__/ChevronRightIcon.js';
 
 const PaginationButton = ({ currentPage, pageNumber, onPageChange, }) => {
     const isActive = currentPage === pageNumber;
-    return (React.createElement(Button, { className: cx("cobalt-pagination__Button"), selected: isActive, onClick: () => !isActive && onPageChange(pageNumber) }, pageNumber));
+    return (jsx(Button, { className: cx("cobalt-pagination__Button"), selected: isActive, onClick: () => !isActive && onPageChange(pageNumber), children: pageNumber }));
 };
 const PAGE_DOTS_VALUE = -1; // Unrevelant value only used to represent dots in the pages array
 const generatePages = (currentPage, totalPages, options) => {
@@ -53,7 +53,6 @@ const generatePages = (currentPage, totalPages, options) => {
     }
     return pages;
 };
-// eslint-disable-next-line complexity
 const Pagination = ({ onPageChange, currentPage, totalPages, options = {
     maxVisibleLength: 11,
     edgeVisibleLength: 3,
@@ -61,10 +60,7 @@ const Pagination = ({ onPageChange, currentPage, totalPages, options = {
     if (totalPages <= 1)
         return null;
     const pages = generatePages(currentPage, totalPages, options);
-    return (React.createElement("div", { className: "cobalt-pagination" },
-        React.createElement(Button, { className: cx("cobalt-pagination__Button"), disabled: currentPage === 1, onClick: () => onPageChange(currentPage - 1), icon: React.createElement(ChevronLeftIcon, null) }),
-        pages.map((page, index) => page === PAGE_DOTS_VALUE ? (React.createElement(DotsHorizontalIcon, { key: `dots-${index}`, className: "cobalt-pagination__threeDots", color: "primary" })) : (React.createElement(PaginationButton, { key: page, currentPage: currentPage, pageNumber: page, onPageChange: onPageChange }))),
-        React.createElement(Button, { className: cx("cobalt-pagination__Button"), disabled: currentPage === totalPages, onClick: () => onPageChange(currentPage + 1), icon: React.createElement(ChevronRightIcon, null) })));
+    return (jsxs("div", { className: "cobalt-pagination", children: [jsx(Button, { className: cx("cobalt-pagination__Button"), disabled: currentPage === 1, onClick: () => onPageChange(currentPage - 1), icon: jsx(ChevronLeftIcon, {}) }), pages.map((page) => page === PAGE_DOTS_VALUE ? (jsx(DotsHorizontalIcon, { className: "cobalt-pagination__threeDots", color: "primary" }, `dots-${page}`)) : (jsx(PaginationButton, { currentPage: currentPage, pageNumber: page, onPageChange: onPageChange }, page))), jsx(Button, { className: cx("cobalt-pagination__Button"), disabled: currentPage === totalPages, onClick: () => onPageChange(currentPage + 1), icon: jsx(ChevronRightIcon, {}) })] }));
 };
 
 export { Pagination as default };

package/components/Pagination/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Pagination/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\nimport Button from \"../Buttons/Button\"\nimport { ChevronLeftIcon, ChevronRightIcon, DotsHorizontalIcon } from \"../Icon\"\n\nconst PaginationButton = ({\n  currentPage,\n  pageNumber,\n  onPageChange,\n}: {\n  currentPage: number\n  pageNumber: number\n  onPageChange: (page: number) => void\n}) => {\n  const isActive = currentPage === pageNumber\n  return (\n    <Button\n      className={cx(\"cobalt-pagination__Button\")}\n      selected={isActive}\n      onClick={() => !isActive && onPageChange(pageNumber)}\n    >\n      {pageNumber}\n    </Button>\n  )\n}\n\nconst PAGE_DOTS_VALUE = -1 // Unrevelant value only used to represent dots in the pages array\n\nconst generatePages = (\n  currentPage: number,\n  totalPages: number,\n  options: {\n    maxVisibleLength: number\n    edgeVisibleLength: number\n  }\n) => {\n  const pages: number[] = []\n  const maxVisiblePages = options.maxVisibleLength // Max visible pages (excluding dots)\n  const edgeButtons = options.edgeVisibleLength // Number of fixed edge buttons\n\n  if (totalPages <= maxVisiblePages) {\n    // Show all pages\n    for (let i = 1; i <= totalPages; i++) {\n      pages.push(i)\n    }\n    return pages\n  }\n\n  // Calculate dynamic range for middle pages\n  const middlePagesCount = maxVisiblePages - 2 * edgeButtons // Remaining pages for the middle\n  let startMiddlePage = Math.max(\n    currentPage - Math.floor(middlePagesCount / 2),\n    edgeButtons + 1\n  )\n  let endMiddlePage = Math.min(\n    currentPage + Math.floor(middlePagesCount / 2),\n    totalPages - edgeButtons\n  )\n\n  // Adjust start and end pages if they exceed boundaries\n  if (startMiddlePage === edgeButtons + 1) {\n    endMiddlePage = startMiddlePage + middlePagesCount - 1\n  } else if (endMiddlePage === totalPages - edgeButtons) {\n    startMiddlePage = endMiddlePage - middlePagesCount + 1\n  }\n\n  // Add leading edge buttons\n  for (let i = 1; i <= edgeButtons; i++) {\n    pages.push(i)\n  }\n  if (startMiddlePage > edgeButtons + 1) {\n    pages.push(PAGE_DOTS_VALUE)\n  }\n\n  // Add middle pages\n  for (let i = startMiddlePage; i <= endMiddlePage; i++) {\n    pages.push(i)\n  }\n\n  // Add trailing edge buttons\n  if (endMiddlePage < totalPages - edgeButtons) {\n    pages.push(PAGE_DOTS_VALUE)\n  }\n  for (let i = totalPages - edgeButtons + 1; i <= totalPages; i++) {\n    pages.push(i)\n  }\n\n  return pages\n}\n\n// eslint-disable-next-line complexity\nconst Pagination = ({\n  onPageChange,\n  currentPage,\n  totalPages,\n  options = {\n    maxVisibleLength: 11,\n    edgeVisibleLength: 3,\n  },\n}: {\n  currentPage: number\n  totalPages: number\n  onPageChange: (page: number) => void\n  options?: {\n    maxVisibleLength: number\n    edgeVisibleLength: number\n  }\n}) => {\n  if (totalPages <= 1) return null\n  const pages = generatePages(currentPage, totalPages, options)\n\n  return (\n    <div className=\"cobalt-pagination\">\n      <Button\n        className={cx(\"cobalt-pagination__Button\")}\n        disabled={currentPage === 1}\n        onClick={() => onPageChange(currentPage - 1)}\n        icon={<ChevronLeftIcon />}\n      />\n      {pages.map((page, index) =>\n        page === PAGE_DOTS_VALUE ? (\n          <DotsHorizontalIcon\n            key={`dots-${index}`}\n            className=\"cobalt-pagination__threeDots\"\n            color=\"primary\"\n          />\n        ) : (\n          <PaginationButton\n            key={page}\n            currentPage={currentPage}\n            pageNumber={page}\n            onPageChange={onPageChange}\n          />\n        )\n      )}\n      <Button\n        className={cx(\"cobalt-pagination__Button\")}\n        disabled={currentPage === totalPages}\n        onClick={() => onPageChange(currentPage + 1)}\n        icon={<ChevronRightIcon />}\n      />\n    </div>\n  )\n}\n\nexport default Pagination\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Pagination/index.tsx"],"sourcesContent":["import cx from \"classnames\"\n\nimport Button from \"../Buttons/Button\"\nimport { ChevronLeftIcon, ChevronRightIcon, DotsHorizontalIcon } from \"../Icon\"\n\nconst PaginationButton = ({\n  currentPage,\n  pageNumber,\n  onPageChange,\n}: {\n  currentPage: number\n  pageNumber: number\n  onPageChange: (page: number) => void\n}) => {\n  const isActive = currentPage === pageNumber\n  return (\n    <Button\n      className={cx(\"cobalt-pagination__Button\")}\n      selected={isActive}\n      onClick={() => !isActive && onPageChange(pageNumber)}\n    >\n      {pageNumber}\n    </Button>\n  )\n}\n\nconst PAGE_DOTS_VALUE = -1 // Unrevelant value only used to represent dots in the pages array\n\nconst generatePages = (\n  currentPage: number,\n  totalPages: number,\n  options: {\n    maxVisibleLength: number\n    edgeVisibleLength: number\n  },\n) => {\n  const pages: number[] = []\n  const maxVisiblePages = options.maxVisibleLength // Max visible pages (excluding dots)\n  const edgeButtons = options.edgeVisibleLength // Number of fixed edge buttons\n\n  if (totalPages <= maxVisiblePages) {\n    // Show all pages\n    for (let i = 1; i <= totalPages; i++) {\n      pages.push(i)\n    }\n    return pages\n  }\n\n  // Calculate dynamic range for middle pages\n  const middlePagesCount = maxVisiblePages - 2 * edgeButtons // Remaining pages for the middle\n  let startMiddlePage = Math.max(\n    currentPage - Math.floor(middlePagesCount / 2),\n    edgeButtons + 1,\n  )\n  let endMiddlePage = Math.min(\n    currentPage + Math.floor(middlePagesCount / 2),\n    totalPages - edgeButtons,\n  )\n\n  // Adjust start and end pages if they exceed boundaries\n  if (startMiddlePage === edgeButtons + 1) {\n    endMiddlePage = startMiddlePage + middlePagesCount - 1\n  } else if (endMiddlePage === totalPages - edgeButtons) {\n    startMiddlePage = endMiddlePage - middlePagesCount + 1\n  }\n\n  // Add leading edge buttons\n  for (let i = 1; i <= edgeButtons; i++) {\n    pages.push(i)\n  }\n  if (startMiddlePage > edgeButtons + 1) {\n    pages.push(PAGE_DOTS_VALUE)\n  }\n\n  // Add middle pages\n  for (let i = startMiddlePage; i <= endMiddlePage; i++) {\n    pages.push(i)\n  }\n\n  // Add trailing edge buttons\n  if (endMiddlePage < totalPages - edgeButtons) {\n    pages.push(PAGE_DOTS_VALUE)\n  }\n  for (let i = totalPages - edgeButtons + 1; i <= totalPages; i++) {\n    pages.push(i)\n  }\n\n  return pages\n}\n\nconst Pagination = ({\n  onPageChange,\n  currentPage,\n  totalPages,\n  options = {\n    maxVisibleLength: 11,\n    edgeVisibleLength: 3,\n  },\n}: {\n  currentPage: number\n  totalPages: number\n  onPageChange: (page: number) => void\n  options?: {\n    maxVisibleLength: number\n    edgeVisibleLength: number\n  }\n}) => {\n  if (totalPages <= 1) return null\n  const pages = generatePages(currentPage, totalPages, options)\n\n  return (\n    <div className=\"cobalt-pagination\">\n      <Button\n        className={cx(\"cobalt-pagination__Button\")}\n        disabled={currentPage === 1}\n        onClick={() => onPageChange(currentPage - 1)}\n        icon={<ChevronLeftIcon />}\n      />\n      {pages.map((page) =>\n        page === PAGE_DOTS_VALUE ? (\n          <DotsHorizontalIcon\n            key={`dots-${page}`}\n            className=\"cobalt-pagination__threeDots\"\n            color=\"primary\"\n          />\n        ) : (\n          <PaginationButton\n            key={page}\n            currentPage={currentPage}\n            pageNumber={page}\n            onPageChange={onPageChange}\n          />\n        ),\n      )}\n      <Button\n        className={cx(\"cobalt-pagination__Button\")}\n        disabled={currentPage === totalPages}\n        onClick={() => onPageChange(currentPage + 1)}\n        icon={<ChevronRightIcon />}\n      />\n    </div>\n  )\n}\n\nexport default Pagination\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/components/PhotoDropzone/index.js

@@ -1,22 +1,24 @@
-import React, { useRef, useState, useEffect } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import cx from 'classnames';
+import { useRef, useState, useEffect } from 'react';
+import useBreakpoint from '../../hooks/useBreakpoint.js';
 import '../Icon/index.js';
-import { validateFile } from '../utils/validateFile.js';
-import Popover from '../Popover/index.js';
 import Modal from '../Modal/index.js';
-import useBreakpoint from '../../hooks/useBreakpoint.js';
+import Popover from '../Popover/index.js';
+import { validateFile } from '../utils/validateFile.js';
 import BinIcon from '../Icon/__generated__/BinIcon.js';
-import PlusIcon from '../Icon/__generated__/PlusIcon.js';
 import ContextualWarningCircleFilledIcon from '../Icon/__generated__/ContextualWarningCircleFilledIcon.js';
 import LoadingIcon from '../Icon/__generated__/LoadingIcon.js';
+import PlusIcon from '../Icon/__generated__/PlusIcon.js';
 
 const ACCEPTED_MAX_SIZE_MB = 10;
 const ACCEPTED_PHOTOS_TYPES = ["jpg", "jpeg", "png", "gif"];
 const ERROR_DISPLAY_TIME = 6000;
 const ACCEPTED_TYPES_LOCALE_STRING = ACCEPTED_PHOTOS_TYPES.join(", ");
 const preventEventDefaults = (e) => {
-    e.preventDefault && e.preventDefault();
-    e.stopPropagation && e.stopPropagation();
+    var _a, _b;
+    (_a = e.preventDefault) === null || _a === void 0 ? void 0 : _a.call(e);
+    (_b = e.stopPropagation) === null || _b === void 0 ? void 0 : _b.call(e);
 };
 const isEnterOrSpaceKey = (event) => event.key === "Enter" || event.key === " ";
 const PhotoDropzone = ({ className, description, deleteContent, errorContent, onDropped, onPhotoDelete, deleteContentMode = "popover", initialImageUrl = "", }) => {
@@ -81,7 +83,7 @@ const PhotoDropzone = ({ className, description, deleteContent, errorContent, on
             fileInputRef.current.value = "";
         closeDeletePopover();
         setImagePreviewUrl("");
-        onPhotoDelete && onPhotoDelete();
+        onPhotoDelete === null || onPhotoDelete === void 0 ? void 0 : onPhotoDelete();
     };
     const onDragEnter = (event) => {
         preventEventDefaults(event);
@@ -138,12 +140,13 @@ const PhotoDropzone = ({ className, description, deleteContent, errorContent, on
         }
     };
     useEffect(() => {
-        setIsImageLoaded(false);
+        if (imagePreviewUrl)
+            setIsImageLoaded(false);
     }, [imagePreviewUrl]);
     const onDeleteButtonClick = showDeletePopover
         ? closeDeletePopover
         : openDeletePopover;
-    return (React.createElement("div", { tabIndex: 0, className: cx("cobalt-photo-dropzone", className, {
+    return (jsxs("label", { className: cx("cobalt-photo-dropzone", className, {
             "cobalt-photo-dropzone--filled": imagePreviewUrl,
             "cobalt-photo-dropzone--dragging": isDragging,
             "cobalt-photo-dropzone--loading": isLoading,
@@ -153,31 +156,16 @@ const PhotoDropzone = ({ className, description, deleteContent, errorContent, on
         // Not on click because we also use mouseEnter listener
         onMouseUp: onDropzoneClick, onTouchEnd: onDropzoneClick, onKeyUp: onDropzoneKey, onDrop: onDrop, 
         // Need to reset those listeners to avoid default browser behaviour
-        onDragStart: preventEventDefaults, onDragEnd: preventEventDefaults, onDragOver: preventEventDefaults },
-        isErrored && (React.createElement("div", { className: "cobalt-photo-dropzone__description" },
-            React.createElement(ContextualWarningCircleFilledIcon, { color: "error" }),
-            errorContent(ACCEPTED_TYPES_LOCALE_STRING, ACCEPTED_MAX_SIZE_MB))),
-        isLoading && (React.createElement("div", { className: "cobalt-photo-dropzone__description" },
-            React.createElement(LoadingIcon, null))),
-        !isLoading &&
-            !isErrored &&
-            (imagePreviewUrl ? (React.createElement(React.Fragment, null,
-                React.createElement("img", { className: "cobalt-photo-dropzone__preview", src: imagePreviewUrl, onLoad: () => {
-                        setIsImageLoaded(true);
-                    } }),
-                React.createElement("div", null,
-                    React.createElement("button", { className: cx("cobalt-photo-dropzone__delete-button", {
-                            "cobalt-photo-dropzone__delete-button--triggered": displayDeletion,
-                        }), ref: deleteButtonRef, 
-                        // Must follow the click listeners on the dropzone,
-                        // in order to have the correct events bubbling
-                        onTouchEnd: onDeleteButtonClick, onMouseUp: onDeleteButtonClick, onKeyUp: onDeleteKey },
-                        React.createElement(BinIcon, { color: "onSurface" })),
-                    deleteContentMode === "modal" && (React.createElement(Modal, { isOpen: showDeletePopover, "aria-label": "delete", bodySpacing: false }, deleteContent(onDelete, closeDeletePopover))),
-                    deleteContentMode === "popover" && (React.createElement(Popover, { targetRef: deleteButtonRef, isOpen: showDeletePopover, close: closeDeletePopover, placement: "left-start", distance: 12, bodySpacing: false, arrow: true }, deleteContent(onDelete, closeDeletePopover)))))) : (React.createElement("div", { className: "cobalt-photo-dropzone__description cobalt-photo-dropzone__description--strong" },
-                description && React.createElement("div", null, description),
-                React.createElement(PlusIcon, null)))),
-        React.createElement("input", { ref: fileInputRef, className: "cobalt-photo-dropzone__hidden-input", type: "file", onChange: onFileInputChanged, accept: ACCEPTED_PHOTOS_TYPES.map((ext) => `.${ext}`).join(","), multiple: false })));
+        onDragStart: preventEventDefaults, onDragEnd: preventEventDefaults, onDragOver: preventEventDefaults, children: [isErrored && (jsxs("div", { className: "cobalt-photo-dropzone__description", children: [jsx(ContextualWarningCircleFilledIcon, { color: "error" }), errorContent(ACCEPTED_TYPES_LOCALE_STRING, ACCEPTED_MAX_SIZE_MB)] })), isLoading && (jsx("div", { className: "cobalt-photo-dropzone__description", children: jsx(LoadingIcon, {}) })), !isLoading &&
+                !isErrored &&
+                (imagePreviewUrl ? (jsxs(Fragment, { children: [jsx("img", { className: "cobalt-photo-dropzone__preview", src: imagePreviewUrl, alt: "Uploaded preview", onLoad: () => {
+                                setIsImageLoaded(true);
+                            } }), jsxs("div", { children: [jsx("button", { type: "button", className: cx("cobalt-photo-dropzone__delete-button", {
+                                        "cobalt-photo-dropzone__delete-button--triggered": displayDeletion,
+                                    }), ref: deleteButtonRef, 
+                                    // Must follow the click listeners on the dropzone,
+                                    // in order to have the correct events bubbling
+                                    onTouchEnd: onDeleteButtonClick, onMouseUp: onDeleteButtonClick, onKeyUp: onDeleteKey, children: jsx(BinIcon, { color: "onSurface" }) }), deleteContentMode === "modal" && (jsx(Modal, { isOpen: showDeletePopover, "aria-label": "delete", bodySpacing: false, children: deleteContent(onDelete, closeDeletePopover) })), deleteContentMode === "popover" && (jsx(Popover, { targetRef: deleteButtonRef, isOpen: showDeletePopover, close: closeDeletePopover, placement: "left-start", distance: 12, bodySpacing: false, arrow: true, children: deleteContent(onDelete, closeDeletePopover) }))] })] })) : (jsxs("div", { className: "cobalt-photo-dropzone__description cobalt-photo-dropzone__description--strong", children: [description && jsx("div", { children: description }), jsx(PlusIcon, {})] }))), jsx("input", { ref: fileInputRef, className: "cobalt-photo-dropzone__hidden-input", type: "file", onChange: onFileInputChanged, accept: ACCEPTED_PHOTOS_TYPES.map((ext) => `.${ext}`).join(","), multiple: false })] }));
 };
 
 export { PhotoDropzone as default };

package/components/PhotoDropzone/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/PhotoDropzone/index.tsx"],"sourcesContent":["import React, {\n  useState,\n  DragEvent as ReactDragEvent,\n  useRef,\n  TouchEvent as ReactTouchEvent,\n  ChangeEvent as ReactChangeEvent,\n  MouseEvent as ReactMouseEvent,\n  KeyboardEvent as ReactKeyboardEvent,\n  ReactNode,\n  useEffect,\n} from \"react\"\nimport cx from \"classnames\"\nimport {\n  PlusIcon,\n  BinIcon,\n  LoadingIcon,\n  ContextualWarningCircleFilledIcon,\n} from \"../Icon\"\nimport { validateFile } from \"../utils/validateFile\"\nimport Popover from \"../Popover\"\nimport Modal from \"../Modal\"\nimport useBreakpoint from \"../../hooks/useBreakpoint\"\n\nconst ACCEPTED_MAX_SIZE_MB = 10\nconst ACCEPTED_PHOTOS_TYPES = [\"jpg\", \"jpeg\", \"png\", \"gif\"]\nconst ERROR_DISPLAY_TIME = 6000\nconst ACCEPTED_TYPES_LOCALE_STRING = ACCEPTED_PHOTOS_TYPES.join(\", \")\n\nexport type PhotoDropzonePropsType = {\n  className?: string\n  description?: string\n  deleteContent: (onDelete: () => void, close: () => void) => ReactNode\n  deleteContentMode?: \"popover\" | \"modal\"\n  errorContent: (acceptedTypes: string, maxFileSize: number) => ReactNode\n  onDropped: (file: File) => Promise<void> | void\n  onPhotoDelete?: () => void\n  initialImageUrl?: string\n}\n\nconst preventEventDefaults = (\n  e: ReactDragEvent | ReactMouseEvent | ReactKeyboardEvent | ReactTouchEvent\n) => {\n  e.preventDefault && e.preventDefault()\n  e.stopPropagation && e.stopPropagation()\n}\n\nconst isEnterOrSpaceKey = (event: ReactKeyboardEvent) =>\n  event.key === \"Enter\" || event.key === \" \"\n\nconst PhotoDropzone = ({\n  className,\n  description,\n  deleteContent,\n  errorContent,\n  onDropped,\n  onPhotoDelete,\n  deleteContentMode = \"popover\",\n  initialImageUrl = \"\",\n}: PhotoDropzonePropsType) => {\n  const { isMobile } = useBreakpoint()\n  const fileInputRef = useRef<HTMLInputElement>(null)\n  const deleteButtonRef = useRef<HTMLButtonElement>(null)\n  const [isDragging, setIsDragging] = useState(false)\n  const [isLoading, setIsLoading] = useState(false)\n  const [isErrored, setIsErrored] = useState(false)\n  const [imagePreviewUrl, setImagePreviewUrl] = useState(initialImageUrl)\n  const [displayDeletion, setDisplayDeletion] = useState(false)\n  const [showDeletePopover, setShowDeletePopover] = useState(false)\n  const [isImageLoaded, setIsImageLoaded] = useState(false)\n\n  const openDeletePopover = (\n    event?: ReactMouseEvent | ReactKeyboardEvent | ReactTouchEvent\n  ) => {\n    event && preventEventDefaults(event)\n    setShowDeletePopover(true)\n  }\n  const closeDeletePopover = (event?: ReactMouseEvent | ReactTouchEvent) => {\n    event && preventEventDefaults(event)\n    setShowDeletePopover(false)\n  }\n\n  const onDropzoneMouseEnter = (event?: ReactMouseEvent) => {\n    event && preventEventDefaults(event)\n    if (imagePreviewUrl) setDisplayDeletion(true)\n  }\n\n  const onDropzoneMouseLeave = (event?: ReactMouseEvent) => {\n    event && preventEventDefaults(event)\n    if (displayDeletion && !showDeletePopover) setDisplayDeletion(false)\n  }\n\n  const onDropzoneClick = (event?: ReactMouseEvent | ReactTouchEvent) => {\n    if (isMobile && showDeletePopover) return\n    event && preventEventDefaults(event)\n    if (isLoading) return\n    if (isErrored) setIsErrored(false)\n    if (imagePreviewUrl) {\n      if (showDeletePopover) closeDeletePopover()\n      return setDisplayDeletion(!displayDeletion)\n    }\n    fileInputRef.current?.click()\n  }\n\n  const onDropzoneKey = (event: ReactKeyboardEvent) => {\n    if (showDeletePopover) return\n    if (isEnterOrSpaceKey(event)) {\n      onDropzoneClick()\n    }\n  }\n\n  const onDeleteKey = (event: ReactKeyboardEvent) => {\n    if (isEnterOrSpaceKey(event)) {\n      openDeletePopover(event)\n    }\n  }\n\n  const onDelete = () => {\n    if (fileInputRef.current) fileInputRef.current.value = \"\"\n    closeDeletePopover()\n    setImagePreviewUrl(\"\")\n    onPhotoDelete && onPhotoDelete()\n  }\n\n  const onDragEnter = (event: ReactDragEvent) => {\n    preventEventDefaults(event)\n    if (isErrored) setIsErrored(false)\n    !imagePreviewUrl && setIsDragging(true)\n  }\n\n  const onDragLeave = (event: ReactDragEvent) => {\n    preventEventDefaults(event)\n    setIsDragging(false)\n  }\n\n  const processFile = async (fileToProcess: File) => {\n    setIsDragging(false)\n    setIsErrored(false)\n    setIsLoading(true)\n\n    const isValidFile = await validateFile(\n      fileToProcess,\n      (fileToValidate, extension) => {\n        const maxFileSize = ACCEPTED_MAX_SIZE_MB * 1000 * 1000\n        const acceptedFileTypes = ACCEPTED_PHOTOS_TYPES\n\n        if (fileToValidate.size > maxFileSize) {\n          return false\n        } else if (!extension || !acceptedFileTypes.includes(extension)) {\n          return false\n        } else {\n          return true\n        }\n      }\n    )\n\n    if (isValidFile) {\n      const imageSrc = URL.createObjectURL(fileToProcess)\n      setImagePreviewUrl(imageSrc)\n      await onDropped(fileToProcess)\n      setIsLoading(false)\n    } else {\n      setIsLoading(false)\n      setIsErrored(true)\n      setTimeout(() => {\n        setIsErrored(false)\n      }, ERROR_DISPLAY_TIME)\n    }\n  }\n\n  const onFileInputChanged = (event: ReactChangeEvent<HTMLInputElement>) => {\n    if (event.target.files?.length) {\n      processFile(event.target.files[0])\n    }\n  }\n\n  const onDrop = (event: ReactDragEvent<HTMLDivElement>) => {\n    preventEventDefaults(event)\n    if (event.dataTransfer?.files?.length && !imagePreviewUrl) {\n      processFile(event.dataTransfer.files[0])\n    }\n  }\n\n  useEffect(() => {\n    setIsImageLoaded(false)\n  }, [imagePreviewUrl])\n\n  const onDeleteButtonClick = showDeletePopover\n    ? closeDeletePopover\n    : openDeletePopover\n\n  return (\n    <div\n      tabIndex={0}\n      className={cx(\"cobalt-photo-dropzone\", className, {\n        \"cobalt-photo-dropzone--filled\": imagePreviewUrl,\n        \"cobalt-photo-dropzone--dragging\": isDragging,\n        \"cobalt-photo-dropzone--loading\": isLoading,\n        \"cobalt-photo-dropzone--errored\": isErrored,\n        \"cobalt-photo-dropzone--imageVisible\": isImageLoaded,\n      })}\n      onMouseEnter={onDropzoneMouseEnter}\n      onMouseLeave={onDropzoneMouseLeave}\n      onDragEnter={onDragEnter}\n      onDragLeave={onDragLeave}\n      // Not on click because we also use mouseEnter listener\n      onMouseUp={onDropzoneClick}\n      onTouchEnd={onDropzoneClick}\n      onKeyUp={onDropzoneKey}\n      onDrop={onDrop}\n      // Need to reset those listeners to avoid default browser behaviour\n      onDragStart={preventEventDefaults}\n      onDragEnd={preventEventDefaults}\n      onDragOver={preventEventDefaults}\n    >\n      {isErrored && (\n        <div className=\"cobalt-photo-dropzone__description\">\n          <ContextualWarningCircleFilledIcon color=\"error\" />\n          {errorContent(ACCEPTED_TYPES_LOCALE_STRING, ACCEPTED_MAX_SIZE_MB)}\n        </div>\n      )}\n      {isLoading && (\n        <div className=\"cobalt-photo-dropzone__description\">\n          <LoadingIcon />\n        </div>\n      )}\n      {!isLoading &&\n        !isErrored &&\n        (imagePreviewUrl ? (\n          <>\n            <img\n              className=\"cobalt-photo-dropzone__preview\"\n              src={imagePreviewUrl}\n              onLoad={() => {\n                setIsImageLoaded(true)\n              }}\n            />\n            <div>\n              <button\n                className={cx(\"cobalt-photo-dropzone__delete-button\", {\n                  \"cobalt-photo-dropzone__delete-button--triggered\":\n                    displayDeletion,\n                })}\n                ref={deleteButtonRef}\n                // Must follow the click listeners on the dropzone,\n                // in order to have the correct events bubbling\n                onTouchEnd={onDeleteButtonClick}\n                onMouseUp={onDeleteButtonClick}\n                onKeyUp={onDeleteKey}\n              >\n                <BinIcon color=\"onSurface\" />\n              </button>\n              {deleteContentMode === \"modal\" && (\n                <Modal\n                  isOpen={showDeletePopover}\n                  aria-label=\"delete\"\n                  bodySpacing={false}\n                >\n                  {deleteContent(onDelete, closeDeletePopover)}\n                </Modal>\n              )}\n\n              {deleteContentMode === \"popover\" && (\n                <Popover\n                  targetRef={deleteButtonRef}\n                  isOpen={showDeletePopover}\n                  close={closeDeletePopover}\n                  placement=\"left-start\"\n                  distance={12}\n                  bodySpacing={false}\n                  arrow\n                >\n                  {deleteContent(onDelete, closeDeletePopover)}\n                </Popover>\n              )}\n            </div>\n          </>\n        ) : (\n          <div className=\"cobalt-photo-dropzone__description cobalt-photo-dropzone__description--strong\">\n            {description && <div>{description}</div>}\n            <PlusIcon />\n          </div>\n        ))}\n      <input\n        ref={fileInputRef}\n        className=\"cobalt-photo-dropzone__hidden-input\"\n        type=\"file\"\n        onChange={onFileInputChanged}\n        accept={ACCEPTED_PHOTOS_TYPES.map((ext) => `.${ext}`).join(\",\")}\n        multiple={false}\n      />\n    </div>\n  )\n}\n\nexport default PhotoDropzone\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/PhotoDropzone/index.tsx"],"sourcesContent":["import cx from \"classnames\"\nimport {\n  type ChangeEvent as ReactChangeEvent,\n  type DragEvent as ReactDragEvent,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type MouseEvent as ReactMouseEvent,\n  type ReactNode,\n  type TouchEvent as ReactTouchEvent,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\"\nimport useBreakpoint from \"../../hooks/useBreakpoint\"\nimport {\n  BinIcon,\n  ContextualWarningCircleFilledIcon,\n  LoadingIcon,\n  PlusIcon,\n} from \"../Icon\"\nimport Modal from \"../Modal\"\nimport Popover from \"../Popover\"\nimport { validateFile } from \"../utils/validateFile\"\n\nconst ACCEPTED_MAX_SIZE_MB = 10\nconst ACCEPTED_PHOTOS_TYPES = [\"jpg\", \"jpeg\", \"png\", \"gif\"]\nconst ERROR_DISPLAY_TIME = 6000\nconst ACCEPTED_TYPES_LOCALE_STRING = ACCEPTED_PHOTOS_TYPES.join(\", \")\n\nexport type PhotoDropzonePropsType = {\n  className?: string\n  description?: string\n  deleteContent: (onDelete: () => void, close: () => void) => ReactNode\n  deleteContentMode?: \"popover\" | \"modal\"\n  errorContent: (acceptedTypes: string, maxFileSize: number) => ReactNode\n  onDropped: (file: File) => Promise<void> | void\n  onPhotoDelete?: () => void\n  initialImageUrl?: string\n}\n\nconst preventEventDefaults = (\n  e: ReactDragEvent | ReactMouseEvent | ReactKeyboardEvent | ReactTouchEvent,\n) => {\n  e.preventDefault?.()\n  e.stopPropagation?.()\n}\n\nconst isEnterOrSpaceKey = (event: ReactKeyboardEvent) =>\n  event.key === \"Enter\" || event.key === \" \"\n\nconst PhotoDropzone = ({\n  className,\n  description,\n  deleteContent,\n  errorContent,\n  onDropped,\n  onPhotoDelete,\n  deleteContentMode = \"popover\",\n  initialImageUrl = \"\",\n}: PhotoDropzonePropsType) => {\n  const { isMobile } = useBreakpoint()\n  const fileInputRef = useRef<HTMLInputElement>(null)\n  const deleteButtonRef = useRef<HTMLButtonElement>(null)\n  const [isDragging, setIsDragging] = useState(false)\n  const [isLoading, setIsLoading] = useState(false)\n  const [isErrored, setIsErrored] = useState(false)\n  const [imagePreviewUrl, setImagePreviewUrl] = useState(initialImageUrl)\n  const [displayDeletion, setDisplayDeletion] = useState(false)\n  const [showDeletePopover, setShowDeletePopover] = useState(false)\n  const [isImageLoaded, setIsImageLoaded] = useState(false)\n\n  const openDeletePopover = (\n    event?: ReactMouseEvent | ReactKeyboardEvent | ReactTouchEvent,\n  ) => {\n    event && preventEventDefaults(event)\n    setShowDeletePopover(true)\n  }\n  const closeDeletePopover = (event?: ReactMouseEvent | ReactTouchEvent) => {\n    event && preventEventDefaults(event)\n    setShowDeletePopover(false)\n  }\n\n  const onDropzoneMouseEnter = (event?: ReactMouseEvent) => {\n    event && preventEventDefaults(event)\n    if (imagePreviewUrl) setDisplayDeletion(true)\n  }\n\n  const onDropzoneMouseLeave = (event?: ReactMouseEvent) => {\n    event && preventEventDefaults(event)\n    if (displayDeletion && !showDeletePopover) setDisplayDeletion(false)\n  }\n\n  const onDropzoneClick = (event?: ReactMouseEvent | ReactTouchEvent) => {\n    if (isMobile && showDeletePopover) return\n    event && preventEventDefaults(event)\n    if (isLoading) return\n    if (isErrored) setIsErrored(false)\n    if (imagePreviewUrl) {\n      if (showDeletePopover) closeDeletePopover()\n      return setDisplayDeletion(!displayDeletion)\n    }\n    fileInputRef.current?.click()\n  }\n\n  const onDropzoneKey = (event: ReactKeyboardEvent) => {\n    if (showDeletePopover) return\n    if (isEnterOrSpaceKey(event)) {\n      onDropzoneClick()\n    }\n  }\n\n  const onDeleteKey = (event: ReactKeyboardEvent) => {\n    if (isEnterOrSpaceKey(event)) {\n      openDeletePopover(event)\n    }\n  }\n\n  const onDelete = () => {\n    if (fileInputRef.current) fileInputRef.current.value = \"\"\n    closeDeletePopover()\n    setImagePreviewUrl(\"\")\n    onPhotoDelete?.()\n  }\n\n  const onDragEnter = (event: ReactDragEvent) => {\n    preventEventDefaults(event)\n    if (isErrored) setIsErrored(false)\n    !imagePreviewUrl && setIsDragging(true)\n  }\n\n  const onDragLeave = (event: ReactDragEvent) => {\n    preventEventDefaults(event)\n    setIsDragging(false)\n  }\n\n  const processFile = async (fileToProcess: File) => {\n    setIsDragging(false)\n    setIsErrored(false)\n    setIsLoading(true)\n\n    const isValidFile = await validateFile(\n      fileToProcess,\n      (fileToValidate, extension) => {\n        const maxFileSize = ACCEPTED_MAX_SIZE_MB * 1000 * 1000\n        const acceptedFileTypes = ACCEPTED_PHOTOS_TYPES\n\n        if (fileToValidate.size > maxFileSize) {\n          return false\n        } else if (!extension || !acceptedFileTypes.includes(extension)) {\n          return false\n        } else {\n          return true\n        }\n      },\n    )\n\n    if (isValidFile) {\n      const imageSrc = URL.createObjectURL(fileToProcess)\n      setImagePreviewUrl(imageSrc)\n      await onDropped(fileToProcess)\n      setIsLoading(false)\n    } else {\n      setIsLoading(false)\n      setIsErrored(true)\n      setTimeout(() => {\n        setIsErrored(false)\n      }, ERROR_DISPLAY_TIME)\n    }\n  }\n\n  const onFileInputChanged = (event: ReactChangeEvent<HTMLInputElement>) => {\n    if (event.target.files?.length) {\n      processFile(event.target.files[0])\n    }\n  }\n\n  const onDrop = (event: ReactDragEvent<HTMLLabelElement>) => {\n    preventEventDefaults(event)\n    if (event.dataTransfer?.files?.length && !imagePreviewUrl) {\n      processFile(event.dataTransfer.files[0])\n    }\n  }\n\n  useEffect(() => {\n    if (imagePreviewUrl) setIsImageLoaded(false)\n  }, [imagePreviewUrl])\n\n  const onDeleteButtonClick = showDeletePopover\n    ? closeDeletePopover\n    : openDeletePopover\n\n  return (\n    <label\n      className={cx(\"cobalt-photo-dropzone\", className, {\n        \"cobalt-photo-dropzone--filled\": imagePreviewUrl,\n        \"cobalt-photo-dropzone--dragging\": isDragging,\n        \"cobalt-photo-dropzone--loading\": isLoading,\n        \"cobalt-photo-dropzone--errored\": isErrored,\n        \"cobalt-photo-dropzone--imageVisible\": isImageLoaded,\n      })}\n      onMouseEnter={onDropzoneMouseEnter}\n      onMouseLeave={onDropzoneMouseLeave}\n      onDragEnter={onDragEnter}\n      onDragLeave={onDragLeave}\n      // Not on click because we also use mouseEnter listener\n      onMouseUp={onDropzoneClick}\n      onTouchEnd={onDropzoneClick}\n      onKeyUp={onDropzoneKey}\n      onDrop={onDrop}\n      // Need to reset those listeners to avoid default browser behaviour\n      onDragStart={preventEventDefaults}\n      onDragEnd={preventEventDefaults}\n      onDragOver={preventEventDefaults}\n    >\n      {isErrored && (\n        <div className=\"cobalt-photo-dropzone__description\">\n          <ContextualWarningCircleFilledIcon color=\"error\" />\n          {errorContent(ACCEPTED_TYPES_LOCALE_STRING, ACCEPTED_MAX_SIZE_MB)}\n        </div>\n      )}\n      {isLoading && (\n        <div className=\"cobalt-photo-dropzone__description\">\n          <LoadingIcon />\n        </div>\n      )}\n      {!isLoading &&\n        !isErrored &&\n        (imagePreviewUrl ? (\n          <>\n            <img\n              className=\"cobalt-photo-dropzone__preview\"\n              src={imagePreviewUrl}\n              alt=\"Uploaded preview\"\n              onLoad={() => {\n                setIsImageLoaded(true)\n              }}\n            />\n            <div>\n              <button\n                type=\"button\"\n                className={cx(\"cobalt-photo-dropzone__delete-button\", {\n                  \"cobalt-photo-dropzone__delete-button--triggered\":\n                    displayDeletion,\n                })}\n                ref={deleteButtonRef}\n                // Must follow the click listeners on the dropzone,\n                // in order to have the correct events bubbling\n                onTouchEnd={onDeleteButtonClick}\n                onMouseUp={onDeleteButtonClick}\n                onKeyUp={onDeleteKey}\n              >\n                <BinIcon color=\"onSurface\" />\n              </button>\n              {deleteContentMode === \"modal\" && (\n                <Modal\n                  isOpen={showDeletePopover}\n                  aria-label=\"delete\"\n                  bodySpacing={false}\n                >\n                  {deleteContent(onDelete, closeDeletePopover)}\n                </Modal>\n              )}\n\n              {deleteContentMode === \"popover\" && (\n                <Popover\n                  targetRef={deleteButtonRef}\n                  isOpen={showDeletePopover}\n                  close={closeDeletePopover}\n                  placement=\"left-start\"\n                  distance={12}\n                  bodySpacing={false}\n                  arrow\n                >\n                  {deleteContent(onDelete, closeDeletePopover)}\n                </Popover>\n              )}\n            </div>\n          </>\n        ) : (\n          <div className=\"cobalt-photo-dropzone__description cobalt-photo-dropzone__description--strong\">\n            {description && <div>{description}</div>}\n            <PlusIcon />\n          </div>\n        ))}\n      <input\n        ref={fileInputRef}\n        className=\"cobalt-photo-dropzone__hidden-input\"\n        type=\"file\"\n        onChange={onFileInputChanged}\n        accept={ACCEPTED_PHOTOS_TYPES.map((ext) => `.${ext}`).join(\",\")}\n        multiple={false}\n      />\n    </label>\n  )\n}\n\nexport default PhotoDropzone\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}

package/components/Pill/index.js

@@ -1,22 +1,24 @@
-import React, { Children } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import cx from 'classnames';
+import { Children, isValidElement } from 'react';
 import { Icon } from '../Icon/index.js';
 
 const ICON_SIZE = 20;
 const Pill = ({ icon, color = "onSurface", children, overlayed, className, size, }) => {
-    const iconMarkup = icon ? (React.createElement("span", { className: "cobalt-Pill__Icon" },
-        React.createElement(Icon, { source: icon, size: ICON_SIZE, color: overlayed ? "surfaceFixed" : color }))) : null;
-    return (React.createElement("div", { className: cx(className, "cobalt-Pill", {
+    const iconMarkup = icon ? (jsx("span", { className: "cobalt-Pill__Icon", children: jsx(Icon, { source: icon, size: ICON_SIZE, color: overlayed ? "surfaceFixed" : color }) })) : null;
+    return (jsxs("div", { className: cx(className, "cobalt-Pill", {
             "cobalt-Pill--colorConnect": color === "connect",
             "cobalt-Pill--overlayed": overlayed,
             "cobalt-Pill--large": size === "large",
-        }) },
-        iconMarkup,
-        " ",
-        children));
+        }), children: [iconMarkup, " ", children] }));
 };
 const PillGroup = ({ children }) => {
-    return (React.createElement("div", { className: "cobalt-PillGroup" }, Children.toArray(children).map((child, index) => (React.createElement("div", { className: "cobalt-PillGroup__Item", key: index }, child)))));
+    return (jsx("div", { className: "cobalt-PillGroup", children: Children.toArray(children).map((child, index) => {
+            const childKey = isValidElement(child) && child.key != null
+                ? child.key
+                : `pill-group-item-${index}`;
+            return (jsx("div", { className: "cobalt-PillGroup__Item", children: child }, childKey));
+        }) }));
 };
 
 export { Pill, PillGroup, Pill as default };