@drivy/cobalt 2.18.0 → 2.19.1

package/components/MarketingNote/index.js

@@ -0,0 +1,7 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import cx from 'classnames';
+
+const MarketingNote = ({ children, title, icon, className, variant, }) => (jsxs("div", { className: cx(`cobalt-marketing-note cobalt-marketing-note--${variant}`, className), children: [icon && (jsx("div", { className: "cobalt-marketing-note__icon-container", children: icon })), jsxs("div", { className: "c-flex-1", children: [title && jsx("div", { className: "c-font-bold", children: title }), children] })] }));
+
+export { MarketingNote };
+//# sourceMappingURL=index.js.map

package/components/MarketingNote/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/MarketingNote/index.tsx"],"sourcesContent":["import cx from \"classnames\"\nimport type { PropsWithChildren } from \"react\"\n\nexport type MarketingNoteProps = PropsWithChildren<{\n  variant: \"success\" | \"tertiary\"\n  title?: string\n  icon?: React.JSX.Element\n  className?: string\n}>\n\nexport const MarketingNote = ({\n  children,\n  title,\n  icon,\n  className,\n  variant,\n}: MarketingNoteProps) => (\n  <div\n    className={cx(\n      `cobalt-marketing-note cobalt-marketing-note--${variant}`,\n      className,\n    )}\n  >\n    {icon && (\n      <div className=\"cobalt-marketing-note__icon-container\">{icon}</div>\n    )}\n\n    <div className=\"c-flex-1\">\n      {title && <div className=\"c-font-bold\">{title}</div>}\n      {children}\n    </div>\n  </div>\n)\n"],"names":["_jsxs","_jsx"],"mappings":";;;AAUO,MAAM,aAAa,GAAG,CAAC,EAC5B,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,SAAS,EACT,OAAO,GACY,MACnBA,IACE,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CACX,CAAA,6CAAA,EAAgD,OAAO,CAAA,CAAE,EACzD,SAAS,CACV,EAEA,QAAA,EAAA,CAAA,IAAI,KACHC,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,uCAAuC,EAAE,QAAA,EAAA,IAAI,EAAO,CAAA,CACpE,EAEDD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,UAAU,EACtB,QAAA,EAAA,CAAA,KAAK,IAAIC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,aAAa,EAAA,QAAA,EAAE,KAAK,EAAA,CAAO,EACnD,QAAQ,CACL,EAAA,CAAA,CAAA,EAAA,CACF;;;;"}

package/components/Modal/index.js

@@ -8,7 +8,7 @@ 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, fullScreen, onHidden, onShow, skipAnimation, onDismissAttempt, }, ref) => {
     useEffect(() => {
         isOpen && (onShow === null || onShow === void 0 ? void 0 : onShow());
     }, [onShow, isOpen]);
@@ -19,15 +19,16 @@ const Modal = forwardRef(({ isOpen, close, className, initialFocusRef, "aria-lab
         }, 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, 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,
+                    "cobalt-modal--skipAnimation__enter": (skipAnimation === null || skipAnimation === void 0 ? void 0 : skipAnimation.enter) || fullScreen,
+                    "cobalt-modal--skipAnimation__leave": (skipAnimation === null || skipAnimation === void 0 ? void 0 : skipAnimation.leave) || fullScreen,
                 }), children: jsx(Dialog.Positioner, { className: cx("cobalt-modal", {
                         "cobalt-modal--overflowHidden": overflowHidden,
                         "cobalt-modal--fullHeight": fullHeight,
                         "cobalt-modal--fullWidth": fullWidth,
+                        "cobalt-modal--fullScreen": fullScreen,
                     }), 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,
+                            "cobalt-modal--skipAnimation__enter": (skipAnimation === null || skipAnimation === void 0 ? void 0 : skipAnimation.enter) || fullScreen,
+                            "cobalt-modal--skipAnimation__leave": (skipAnimation === null || skipAnimation === void 0 ? void 0 : skipAnimation.leave) || fullScreen,
                         }), 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,

package/components/Modal/index.js.map

@@ -1 +1 @@
-{"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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"}
+{"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  fullScreen?: 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      fullScreen,\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\":\n                skipAnimation?.enter || fullScreen,\n              \"cobalt-modal--skipAnimation__leave\":\n                skipAnimation?.leave || fullScreen,\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                \"cobalt-modal--fullScreen\": fullScreen,\n              })}\n              ref={ref}\n            >\n              <Dialog.Content\n                className={cx(\"cobalt-modal__content\", className, {\n                  \"cobalt-modal--skipAnimation__enter\":\n                    skipAnimation?.enter || fullScreen,\n                  \"cobalt-modal--skipAnimation__leave\":\n                    skipAnimation?.leave || fullScreen,\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/ProgressBanner/index.js

@@ -3,14 +3,16 @@ import cx from 'classnames';
 import '../Icon/index.js';
 import { ProgressCircular } from '../ProgressCircular/index.js';
 import CheckIcon from '../Icon/__generated__/CheckIcon.js';
+import ChevronRightIcon from '../Icon/__generated__/ChevronRightIcon.js';
 
-function ProgressBanner({ progress, title, description, completed = false, animated = false, fullWidth = false, className, }) {
-    return (jsxs("div", { className: cx("cobalt-progressBanner", className, {
+function ProgressBanner({ progress, title, description, completed = false, animated = false, fullWidth = false, className, href, }) {
+    const Root = href != null ? "a" : "div";
+    return (jsxs(Root, { ...(href != null ? { href } : null), className: cx("cobalt-progressBanner", className, {
             "cobalt-progressBanner--completed": completed,
             "cobalt-progressBanner--fullWidth": fullWidth,
         }), 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 })] })] }));
+                }), 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 })] }), href && (jsx("div", { className: "c-flex", children: jsx(ChevronRightIcon, {}) }))] }));
 }
 
 export { ProgressBanner };

package/components/ProgressBanner/index.js.map

@@ -1 +1 @@
-{"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;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/ProgressBanner/index.tsx"],"sourcesContent":["import cx from \"classnames\"\nimport type React from \"react\"\nimport { CheckIcon, ChevronRightIcon } 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  href?: string\n}\n\nexport function ProgressBanner({\n  progress,\n  title,\n  description,\n  completed = false,\n  animated = false,\n  fullWidth = false,\n  className,\n  href,\n}: ProgressBannerPropsType) {\n  const Root: React.ElementType = href != null ? \"a\" : \"div\"\n  return (\n    <Root\n      {...(href != null ? { href } : null)}\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\n      {href && (\n        <div className=\"c-flex\">\n          <ChevronRightIcon />\n        </div>\n      )}\n    </Root>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAmBM,SAAU,cAAc,CAAC,EAC7B,QAAQ,EACR,KAAK,EACL,WAAW,EACX,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,KAAK,EACjB,SAAS,EACT,IAAI,GACoB,EAAA;AACxB,IAAA,MAAM,IAAI,GAAsB,IAAI,IAAI,IAAI,GAAG,GAAG,GAAG,KAAK,CAAA;IAC1D,QACEA,IAAC,CAAA,IAAI,EACC,EAAA,IAAC,IAAI,IAAI,IAAI,GAAG,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,EACpC,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;iBACX,CAAC,EAAA,QAAA,EAEFA,GAAC,CAAA,SAAS,EAAC,EAAA,KAAK,EAAC,SAAS,EAAC,IAAI,EAAE,EAAE,EAAA,CAAI,GACnC,CACP,EAEDD,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,uCAAuC,aACpDC,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,8BAA8B,EAAE,QAAA,EAAA,KAAK,GAAO,EAC3DA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,oCAAoC,EAAA,QAAA,EAAE,WAAW,EAAO,CAAA,CAAA,EAAA,CACnE,EAEL,IAAI,KACHA,aAAK,SAAS,EAAC,QAAQ,EAAA,QAAA,EACrBA,GAAC,CAAA,gBAAgB,KAAG,EAChB,CAAA,CACP,CACI,EAAA,CAAA,EACR;AACH;;;;"}

package/components/Sidepanel/index.js

@@ -4,6 +4,7 @@ import React, { useState, useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import { getA11yOnClick } from '../../helpers/index.js';
 import useBreakpoint from '../../hooks/useBreakpoint.js';
+import Button from '../Buttons/Button/index.js';
 import '../Icon/index.js';
 import { Fixed } from '../Layout/Surfaces/index.js';
 import Modal from '../Modal/index.js';
@@ -14,7 +15,7 @@ const SidepanelFooter = ({ children, className }) => {
 };
 // Memoized component to not render content when the panel is collapsing
 function _SidepanelContent({ title, close, children }) {
-    return (jsxs(Fragment, { children: [title && (jsxs("div", { className: "c-flex c-gap-sm c-items-center c-px-sm c-py-md c-border-b c-border-outline", children: [jsx("div", { className: "c-text-title-md c-flex-1", children: title }), close && (jsx("div", { className: "c-w-md c-cursor-pointer", ...getA11yOnClick(close), children: jsx(CloseIcon, { size: 24 }) }))] })), children] }));
+    return (jsxs(Fragment, { children: [title && (jsxs("div", { className: "c-flex c-gap-sm c-items-start c-px-sm c-py-md c-border-b c-border-outline", children: [jsx("div", { className: "c-text-title-md c-flex-1", children: title }), close && (jsx(Button, { className: "cobalt-sidepanel__close", icon: jsx(CloseIcon, {}), text: true, ...getA11yOnClick(close) }))] })), children] }));
 }
 function areSidepanelContentEqual(_prevProps, nextProps) {
     return !nextProps.isOpen;
@@ -24,7 +25,7 @@ SidepanelContent.displayName = "SidepanelContent";
 // Only for the API, render nothing
 const SidepanelFooterAPI = (_props) => null;
 const isSidepanelFooterAPIComponent = (component) => React.isValidElement(component) && component.type === SidepanelFooterAPI;
-const _Sidepanel = ({ isOpen, title, close, withDesktopOverlay, width = 420, children, }) => {
+const _Sidepanel = ({ isOpen, title, close, withDesktopOverlay, onPointerDownOutside, width = 420, children, }) => {
     const { isMobile } = useBreakpoint();
     // To display box-shadow when visible. We can't rely on isOpen because it triggers the collapse animation and so the box shadow would not be set during the transition
     const [isPanelVisible, setIsPanelVisible] = useState(false);
@@ -36,12 +37,14 @@ const _Sidepanel = ({ isOpen, title, close, withDesktopOverlay, width = 420, chi
     if (React.isValidElement(sidepanelFooter)) {
         footer = isMobile ? (jsx(Modal.Footer, { ...sidepanelFooter.props })) : (jsx(SidepanelFooter, { ...sidepanelFooter.props }));
     }
-    return isMobile ? (jsxs(Modal, { "aria-label": "Sidepanel", isOpen: isOpen, bodySpacing: false, close: close, title: title, children: [children, footer] })) : (ReactDOM.createPortal(jsxs(Fragment, { children: [jsx("div", { className: cx("cobalt-sidepanel", {
+    return isMobile ? (jsxs(Modal, { "aria-label": "Sidepanel", isOpen: isOpen, bodySpacing: false, close: close, title: title, fullScreen: true, children: [children, footer] })) : (ReactDOM.createPortal(jsxs(Fragment, { children: [jsx("div", { className: cx("cobalt-sidepanel", {
                     "cobalt-sidepanel--show": isOpen,
                     "cobalt-sidepanel--visible": isPanelVisible,
                 }), onTransitionEnd: () => {
                     !isOpen && setIsPanelVisible(false);
-                }, children: jsx(Fixed, { width: width, isFullHeight: true, children: jsxs(SidepanelContent, { isOpen: isOpen, title: title, close: close, children: [children, footer] }) }) }), withDesktopOverlay && jsx("div", { className: "cobalt-sidepanel-overlay" })] }), document.body));
+                }, children: jsx(Fixed, { width: width, isFullHeight: true, children: jsxs(SidepanelContent, { isOpen: isOpen, title: title, close: close, children: [children, footer] }) }) }), withDesktopOverlay && (jsx("div", { className: "cobalt-sidepanel-overlay", ...(onPointerDownOutside
+                    ? getA11yOnClick(onPointerDownOutside)
+                    : {}) }))] }), document.body));
 };
 _Sidepanel.displayName = "Sidepanel";
 const Sidepanel = Object.assign(_Sidepanel, {

package/components/Sidepanel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Sidepanel/index.tsx"],"sourcesContent":["import cx from \"classnames\"\nimport React, { type ComponentProps, useEffect, useState } from \"react\"\nimport ReactDOM from \"react-dom\"\nimport { getA11yOnClick } from \"../../helpers\"\nimport useBreakpoint from \"../../hooks/useBreakpoint\"\nimport { CloseIcon } from \"../Icon\"\nimport { Fixed } from \"../Layout/Surfaces\"\nimport Modal from \"../Modal\"\n\ntype SidepanelFooterPropsType = React.PropsWithChildren<{\n  className?: string\n}>\n\nconst SidepanelFooter = ({ children, className }: SidepanelFooterPropsType) => {\n  return (\n    <div className={cx(\"c-p-sm c-border-t c-border-outline\", className)}>\n      {children}\n    </div>\n  )\n}\n\ntype SidepanelPropsType = React.PropsWithChildren<{\n  isOpen: boolean\n  title?: string\n  close?: () => void\n  width?: ComponentProps<typeof Fixed>[\"width\"]\n  withDesktopOverlay?: boolean\n}>\n\n// Memoized component to not render content when the panel is collapsing\nfunction _SidepanelContent({ title, close, children }: SidepanelPropsType) {\n  return (\n    <>\n      {title && (\n        <div className=\"c-flex c-gap-sm c-items-center c-px-sm c-py-md c-border-b c-border-outline\">\n          <div className=\"c-text-title-md c-flex-1\">{title}</div>\n          {close && (\n            <div className=\"c-w-md c-cursor-pointer\" {...getA11yOnClick(close)}>\n              <CloseIcon size={24} />\n            </div>\n          )}\n        </div>\n      )}\n      {children}\n    </>\n  )\n}\n\nfunction areSidepanelContentEqual(\n  _prevProps: SidepanelPropsType,\n  nextProps: SidepanelPropsType,\n) {\n  return !nextProps.isOpen\n}\n\nconst SidepanelContent = React.memo(_SidepanelContent, areSidepanelContentEqual)\nSidepanelContent.displayName = \"SidepanelContent\"\n\n// Only for the API, render nothing\nconst SidepanelFooterAPI = (_props: SidepanelFooterPropsType) => null\n\nconst isSidepanelFooterAPIComponent = (\n  component: React.ReactNode,\n): component is React.ReactElement<SidepanelFooterPropsType> =>\n  React.isValidElement(component) && component.type === SidepanelFooterAPI\n\nconst _Sidepanel = ({\n  isOpen,\n  title,\n  close,\n  withDesktopOverlay,\n  width = 420,\n  children,\n}: SidepanelPropsType) => {\n  const { isMobile } = useBreakpoint()\n\n  // To display box-shadow when visible. We can't rely on isOpen because it triggers the collapse animation and so the box shadow would not be set during the transition\n  const [isPanelVisible, setIsPanelVisible] = useState(false)\n\n  useEffect(() => {\n    isOpen && setIsPanelVisible(true)\n  }, [isOpen])\n\n  const sidepanelFooter = React.Children.toArray(children).find((c) =>\n    isSidepanelFooterAPIComponent(c),\n  )\n\n  let footer: React.ReactNode = null\n  if (React.isValidElement(sidepanelFooter)) {\n    footer = isMobile ? (\n      <Modal.Footer {...sidepanelFooter.props}></Modal.Footer>\n    ) : (\n      <SidepanelFooter {...sidepanelFooter.props} />\n    )\n  }\n\n  return isMobile ? (\n    <Modal\n      aria-label={\"Sidepanel\"}\n      isOpen={isOpen}\n      bodySpacing={false}\n      close={close}\n      title={title}\n    >\n      {children}\n      {footer}\n    </Modal>\n  ) : (\n    ReactDOM.createPortal(\n      <>\n        <div\n          className={cx(\"cobalt-sidepanel\", {\n            \"cobalt-sidepanel--show\": isOpen,\n            \"cobalt-sidepanel--visible\": isPanelVisible,\n          })}\n          onTransitionEnd={() => {\n            !isOpen && setIsPanelVisible(false)\n          }}\n        >\n          <Fixed width={width} isFullHeight>\n            <SidepanelContent isOpen={isOpen} title={title} close={close}>\n              {children}\n              {footer}\n            </SidepanelContent>\n          </Fixed>\n        </div>\n        {withDesktopOverlay && <div className=\"cobalt-sidepanel-overlay\"></div>}\n      </>,\n      document.body,\n    )\n  )\n}\n\n_Sidepanel.displayName = \"Sidepanel\"\n\nexport const Sidepanel = Object.assign(_Sidepanel, {\n  Footer: SidepanelFooterAPI,\n})\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Sidepanel/index.tsx"],"sourcesContent":["import cx from \"classnames\"\nimport React, { type ComponentProps, useEffect, useState } from \"react\"\nimport ReactDOM from \"react-dom\"\nimport { getA11yOnClick } from \"../../helpers\"\nimport useBreakpoint from \"../../hooks/useBreakpoint\"\nimport Button from \"../Buttons/Button\"\nimport { CloseIcon } from \"../Icon\"\nimport { Fixed } from \"../Layout/Surfaces\"\nimport Modal from \"../Modal\"\n\ntype SidepanelFooterPropsType = React.PropsWithChildren<{\n  className?: string\n}>\n\nconst SidepanelFooter = ({ children, className }: SidepanelFooterPropsType) => {\n  return (\n    <div className={cx(\"c-p-sm c-border-t c-border-outline\", className)}>\n      {children}\n    </div>\n  )\n}\n\ntype SidepanelPropsType = React.PropsWithChildren<{\n  isOpen: boolean\n  title?: string\n  close?: () => void\n  width?: ComponentProps<typeof Fixed>[\"width\"]\n  withDesktopOverlay?: boolean\n  onPointerDownOutside?: () => void\n}>\n\n// Memoized component to not render content when the panel is collapsing\nfunction _SidepanelContent({ title, close, children }: SidepanelPropsType) {\n  return (\n    <>\n      {title && (\n        <div className=\"c-flex c-gap-sm c-items-start c-px-sm c-py-md c-border-b c-border-outline\">\n          <div className=\"c-text-title-md c-flex-1\">{title}</div>\n          {close && (\n            <Button\n              className=\"cobalt-sidepanel__close\"\n              icon={<CloseIcon />}\n              text\n              {...getA11yOnClick(close)}\n            />\n          )}\n        </div>\n      )}\n      {children}\n    </>\n  )\n}\n\nfunction areSidepanelContentEqual(\n  _prevProps: SidepanelPropsType,\n  nextProps: SidepanelPropsType,\n) {\n  return !nextProps.isOpen\n}\n\nconst SidepanelContent = React.memo(_SidepanelContent, areSidepanelContentEqual)\nSidepanelContent.displayName = \"SidepanelContent\"\n\n// Only for the API, render nothing\nconst SidepanelFooterAPI = (_props: SidepanelFooterPropsType) => null\n\nconst isSidepanelFooterAPIComponent = (\n  component: React.ReactNode,\n): component is React.ReactElement<SidepanelFooterPropsType> =>\n  React.isValidElement(component) && component.type === SidepanelFooterAPI\n\nconst _Sidepanel = ({\n  isOpen,\n  title,\n  close,\n  withDesktopOverlay,\n  onPointerDownOutside,\n  width = 420,\n  children,\n}: SidepanelPropsType) => {\n  const { isMobile } = useBreakpoint()\n\n  // To display box-shadow when visible. We can't rely on isOpen because it triggers the collapse animation and so the box shadow would not be set during the transition\n  const [isPanelVisible, setIsPanelVisible] = useState(false)\n\n  useEffect(() => {\n    isOpen && setIsPanelVisible(true)\n  }, [isOpen])\n\n  const sidepanelFooter = React.Children.toArray(children).find((c) =>\n    isSidepanelFooterAPIComponent(c),\n  )\n\n  let footer: React.ReactNode = null\n  if (React.isValidElement(sidepanelFooter)) {\n    footer = isMobile ? (\n      <Modal.Footer {...sidepanelFooter.props}></Modal.Footer>\n    ) : (\n      <SidepanelFooter {...sidepanelFooter.props} />\n    )\n  }\n\n  return isMobile ? (\n    <Modal\n      aria-label={\"Sidepanel\"}\n      isOpen={isOpen}\n      bodySpacing={false}\n      close={close}\n      title={title}\n      fullScreen\n    >\n      {children}\n      {footer}\n    </Modal>\n  ) : (\n    ReactDOM.createPortal(\n      <>\n        <div\n          className={cx(\"cobalt-sidepanel\", {\n            \"cobalt-sidepanel--show\": isOpen,\n            \"cobalt-sidepanel--visible\": isPanelVisible,\n          })}\n          onTransitionEnd={() => {\n            !isOpen && setIsPanelVisible(false)\n          }}\n        >\n          <Fixed width={width} isFullHeight>\n            <SidepanelContent isOpen={isOpen} title={title} close={close}>\n              {children}\n              {footer}\n            </SidepanelContent>\n          </Fixed>\n        </div>\n        {withDesktopOverlay && (\n          <div\n            className=\"cobalt-sidepanel-overlay\"\n            {...(onPointerDownOutside\n              ? getA11yOnClick(onPointerDownOutside)\n              : {})}\n          ></div>\n        )}\n      </>,\n      document.body,\n    )\n  )\n}\n\n_Sidepanel.displayName = \"Sidepanel\"\n\nexport const Sidepanel = Object.assign(_Sidepanel, {\n  Footer: SidepanelFooterAPI,\n})\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/components/Steps/index.js

@@ -0,0 +1,15 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Steps as Steps$1 } from '@ark-ui/react/steps';
+import cx from 'classnames';
+
+const Steps = ({ items }) => {
+    return (jsx(Steps$1.Root, { className: "cobalt-steps", count: items.length, orientation: "vertical", children: items.map((item, index) => {
+            const itemKey = index;
+            return (jsxs(Steps$1.Item, { index: index, className: cx("cobalt-steps__item", {
+                    "cobalt-steps__item--important": item.important,
+                }), children: [jsxs("div", { className: "cobalt-steps__item__wrapper", children: [jsx(Steps$1.Indicator, { className: "cobalt-steps__item__indicator" }), jsxs("div", { className: "cobalt-steps__item__content", children: [jsx("div", { className: "cobalt-steps__item__label", children: item.label }), jsx("div", { className: "cobalt-steps__item__description", children: item.description })] })] }), jsx(Steps$1.Separator, { className: "cobalt-steps__item__separator" })] }, itemKey));
+        }) }));
+};
+
+export { Steps };
+//# sourceMappingURL=index.js.map

package/components/Steps/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/Steps/index.tsx"],"sourcesContent":["import { Steps as ArkSteps } from \"@ark-ui/react/steps\"\nimport cx from \"classnames\"\n\nexport interface StepItem {\n  label: string\n  description?: string\n  important?: boolean\n}\n\nexport type StepsPropsType = { items: StepItem[] }\n\nexport const Steps = ({ items }: StepsPropsType) => {\n  return (\n    <ArkSteps.Root\n      className=\"cobalt-steps\"\n      count={items.length}\n      orientation=\"vertical\"\n    >\n      {items.map((item, index) => {\n        const itemKey = index\n        return (\n          <ArkSteps.Item\n            key={itemKey}\n            index={index}\n            className={cx(\"cobalt-steps__item\", {\n              \"cobalt-steps__item--important\": item.important,\n            })}\n          >\n            <div className=\"cobalt-steps__item__wrapper\">\n              <ArkSteps.Indicator className=\"cobalt-steps__item__indicator\" />\n              <div className=\"cobalt-steps__item__content\">\n                <div className=\"cobalt-steps__item__label\">{item.label}</div>\n                <div className=\"cobalt-steps__item__description\">\n                  {item.description}\n                </div>\n              </div>\n            </div>\n            <ArkSteps.Separator className=\"cobalt-steps__item__separator\" />\n          </ArkSteps.Item>\n        )\n      })}\n    </ArkSteps.Root>\n  )\n}\n"],"names":["_jsx","ArkSteps","_jsxs"],"mappings":";;;;MAWa,KAAK,GAAG,CAAC,EAAE,KAAK,EAAkB,KAAI;AACjD,IAAA,QACEA,GAAA,CAACC,OAAQ,CAAC,IAAI,EAAA,EACZ,SAAS,EAAC,cAAc,EACxB,KAAK,EAAE,KAAK,CAAC,MAAM,EACnB,WAAW,EAAC,UAAU,EAAA,QAAA,EAErB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;YACzB,MAAM,OAAO,GAAG,KAAK,CAAA;AACrB,YAAA,QACEC,IAAA,CAACD,OAAQ,CAAC,IAAI,EAEZ,EAAA,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CAAC,oBAAoB,EAAE;oBAClC,+BAA+B,EAAE,IAAI,CAAC,SAAS;iBAChD,CAAC,EAAA,QAAA,EAAA,CAEFC,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,6BAA6B,EAC1C,QAAA,EAAA,CAAAF,GAAA,CAACC,OAAQ,CAAC,SAAS,EAAA,EAAC,SAAS,EAAC,+BAA+B,EAAG,CAAA,EAChEC,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,6BAA6B,EAC1C,QAAA,EAAA,CAAAF,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,2BAA2B,EAAA,QAAA,EAAE,IAAI,CAAC,KAAK,EAAO,CAAA,EAC7DA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,iCAAiC,EAC7C,QAAA,EAAA,IAAI,CAAC,WAAW,EACb,CAAA,CAAA,EAAA,CACF,CACF,EAAA,CAAA,EACNA,IAACC,OAAQ,CAAC,SAAS,EAAA,EAAC,SAAS,EAAC,+BAA+B,EAAA,CAAG,CAf3D,EAAA,EAAA,OAAO,CAgBE,EACjB;SACF,CAAC,EACY,CAAA,EACjB;AACH;;;;"}

package/index.js

@@ -42,6 +42,7 @@ export { default as LayoutSection } from './components/Layout/Components/LayoutS
 export { default as LayoutSectionTitle } from './components/Layout/Components/LayoutSectionTitle.js';
 export { default as LayoutStack } from './components/Layout/Components/LayoutStack.js';
 export { Fixed, Flexible, FlexibleWithConstraint } from './components/Layout/Surfaces/index.js';
+export { MarketingNote } from './components/MarketingNote/index.js';
 export { default as Modal } from './components/Modal/index.js';
 export { Note } from './components/Note/index.js';
 export { default as Pagination } from './components/Pagination/index.js';
@@ -55,6 +56,7 @@ export { ProgressBar } from './components/ProgressBar/index.js';
 export { ProgressCircular } from './components/ProgressCircular/index.js';
 export { Rating } from './components/Rating/index.js';
 export { Sidepanel } from './components/Sidepanel/index.js';
+export { Steps } from './components/Steps/index.js';
 export { Tab, default as Tabs } from './components/Tabs/index.js';
 export { Tag } from './components/Tag/index.js';
 export { getA11yOnClick, getCSSVariableThemeColor, getComputedThemeColor } from './helpers/index.js';

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "2.18.0",
+  "version": "2.19.1",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/src/index.d.ts",

package/styles/components/MarketingNote/index.scss

@@ -0,0 +1,39 @@
+.cobalt-marketing-note {
+  @apply c-rounded-xl c-p-sm c-gap-xs c-text-body-sm;
+
+  display: flex;
+  align-items: flex-start;
+}
+
+.cobalt-marketing-note.cobalt-marketing-note--success {
+  @apply c-bg-successContainer c-text-onSuccessContainer;
+
+  .cobalt-Icon {
+    @apply c-fill-onSuccessContainer;
+  }
+}
+
+.cobalt-marketing-note.cobalt-marketing-note--tertiary {
+  @apply c-bg-tertiaryContainer c-text-onTertiaryContainer;
+
+  .cobalt-Icon {
+    @apply c-fill-onTertiaryContainer;
+  }
+}
+
+.cobalt-marketing-note__icon-container {
+  --icon-container-size: 28px;
+
+  display: flex;
+
+  justify-content: center;
+  align-items: center;
+
+  width: var(--icon-container-size);
+  height: var(--icon-container-size);
+}
+
+.cobalt-marketing-note__icon-container .cobalt-Icon {
+  width: 100%;
+  height: 100%;
+}

package/styles/components/Modal/index.scss

@@ -89,6 +89,18 @@
     }
   }
 
+  &--fullScreen {
+    height: 100%;
+
+    .cobalt-modal__content:not([hidden]) {
+      height: 100%;
+      max-width: unset;
+      max-height: unset;
+
+      border-radius: 0;
+    }
+  }
+
   &--overflowHidden {
     .cobalt-modal__content:not([hidden]) {
       overflow: hidden;
@@ -104,13 +116,13 @@
   }
 
   &-header {
-    @apply c-border-b c-border-b-outline c-p-md;
+    @apply c-border-b c-border-b-outline c-p-md c-gap-sm;
     display: flex;
     justify-content: space-between;
     align-items: center;
 
     &__title {
-      @apply c-text-title-md c-text-onSurface c-m-none;
+      @apply c-text-title-md c-text-onSurface c-m-none c-flex-1;
     }
 
     &__close-button {

package/styles/components/ProgressBanner/index.scss

@@ -48,6 +48,13 @@
   }
 }
 
+a.cobalt-progressBanner {
+  @apply c-state-interactive;
+
+  color: inherit;
+  text-decoration: none;
+}
+
 @keyframes progressBanner__animation--zoom-in {
   0% {
     transform: scale(0, 0);

package/styles/components/Sidepanel/index.scss

@@ -1,5 +1,5 @@
 .cobalt-sidepanel {
-  @apply c-bg-surface;
+  @apply c-bg-surface c-rounded-tl-xl c-rounded-bl-xl;
 
   position: fixed;
 
@@ -16,8 +16,8 @@
   transform: translateX(100%);
 
   transition-duration: 250ms;
-  transition-timing-function: ease-out;
-  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-property: transform, box-shadow;
 
   will-change: transform;
 
@@ -58,3 +58,9 @@
 .cobalt-sidepanel--show + .cobalt-sidepanel-overlay {
   opacity: 1;
 }
+
+.cobalt-sidepanel__close {
+  @apply c--mr-xs;
+  min-height: 32px;
+  min-width: 32px;
+}

package/styles/components/Steps/index.scss

@@ -0,0 +1,91 @@
+.cobalt-steps {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+  width: 100%;
+  max-width: 32rem;
+
+  --steps-indicator-size: 12px;
+  --steps-separator-thickness: 1px;
+
+  @apply c-px-2xs c-py-xs;
+}
+
+.cobalt-steps__item {
+  @apply c-pb-sm c-text-body-sm;
+  position: relative;
+
+  display: flex;
+  flex: 1 0 0;
+  align-items: flex-start;
+  gap: 0.75rem;
+
+  &:last-of-type {
+    @apply c-pb-none;
+
+    flex: initial;
+
+    & [data-part="separator"] {
+      display: none;
+    }
+  }
+}
+
+.cobalt-steps__item__wrapper {
+  display: flex;
+
+  align-items: flex-start;
+
+  gap: 0.75rem;
+}
+
+.cobalt-steps__item__content {
+  @apply c-gap-2xs;
+
+  display: flex;
+  flex-direction: column;
+}
+
+.cobalt-steps__item__indicator {
+  @apply c-border c-border-outline c-rounded-full c-bg-surfaceBright;
+
+  display: flex;
+
+  width: var(--steps-indicator-size);
+  height: var(--steps-indicator-size);
+
+  align-items: center;
+  justify-content: center;
+
+  flex-shrink: 0;
+}
+
+.cobalt-steps__item__separator {
+  @apply c-bg-outline;
+
+  position: absolute;
+  top: calc(var(--steps-indicator-size));
+  left: calc(var(--steps-indicator-size) / 2 - 0.5px);
+
+  flex: 1;
+
+  width: var(--steps-separator-thickness);
+  height: 100%;
+
+  max-height: calc(100% - var(--steps-indicator-size));
+
+  margin-inline: 0;
+}
+
+.cobalt-steps__item__label {
+  @apply c--mt-2xs;
+}
+
+.cobalt-steps__item.cobalt-steps__item--important .cobalt-steps__item__label {
+  @apply c-font-bold;
+}
+
+.cobalt-steps__item__description {
+  @apply c-text-onSurfaceVariant;
+}

package/styles/components.scss

@@ -16,6 +16,7 @@
 @import "./components/Icon/index";
 @import "./components/Layout/Components/index";
 @import "./components/Layout/Surfaces/index";
+@import "./components/MarketingNote/index";
 @import "./components/Note/index";
 @import "./components/Pagination/index";
 @import "./components/PhotoDropzone/index";
@@ -38,3 +39,4 @@
 @import "./components/PlateNumber/index";
 @import "./components/Sidepanel/index";
 @import "./components/Notice/index";
+@import "./components/Steps/index";

package/types/src/components/MarketingNote/index.d.ts

@@ -0,0 +1,8 @@
+import type { PropsWithChildren } from "react";
+export type MarketingNoteProps = PropsWithChildren<{
+    variant: "success" | "tertiary";
+    title?: string;
+    icon?: React.JSX.Element;
+    className?: string;
+}>;
+export declare const MarketingNote: ({ children, title, icon, className, variant, }: MarketingNoteProps) => import("react/jsx-runtime").JSX.Element;

package/types/src/components/Modal/index.d.ts

@@ -60,6 +60,7 @@ export type ModalPropsType = {
      * Always take the full height of the screen
      */
     fullHeight?: boolean;
+    fullScreen?: boolean;
     /**
      * Remove the modal from the DOM on hidden (enabled by default)
      */

package/types/src/components/ProgressBanner/index.d.ts

@@ -9,6 +9,7 @@ type ProgressBannerPropsType = {
     animated?: boolean;
     fullWidth?: boolean;
     className?: string;
+    href?: string;
 };
-export declare function ProgressBanner({ progress, title, description, completed, animated, fullWidth, className, }: ProgressBannerPropsType): import("react/jsx-runtime").JSX.Element;
+export declare function ProgressBanner({ progress, title, description, completed, animated, fullWidth, className, href, }: ProgressBannerPropsType): import("react/jsx-runtime").JSX.Element;
 export {};

package/types/src/components/Sidepanel/index.d.ts

@@ -9,9 +9,10 @@ type SidepanelPropsType = React.PropsWithChildren<{
     close?: () => void;
     width?: ComponentProps<typeof Fixed>["width"];
     withDesktopOverlay?: boolean;
+    onPointerDownOutside?: () => void;
 }>;
 export declare const Sidepanel: {
-    ({ isOpen, title, close, withDesktopOverlay, width, children, }: SidepanelPropsType): import("react/jsx-runtime").JSX.Element;
+    ({ isOpen, title, close, withDesktopOverlay, onPointerDownOutside, width, children, }: SidepanelPropsType): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 } & {
     Footer: (_props: SidepanelFooterPropsType) => null;

package/types/src/components/Steps/index.d.ts

@@ -0,0 +1,9 @@
+export interface StepItem {
+    label: string;
+    description?: string;
+    important?: boolean;
+}
+export type StepsPropsType = {
+    items: StepItem[];
+};
+export declare const Steps: ({ items }: StepsPropsType) => import("react/jsx-runtime").JSX.Element;

package/types/src/index.d.ts

@@ -42,6 +42,7 @@ export * from "./components/Icon";
 /** Layouts */
 export * from "./components/Layout/Components";
 export * from "./components/Layout/Surfaces";
+export { MarketingNote } from "./components/MarketingNote";
 export { default as Modal, type ModalStepType, MultiStepModal, } from "./components/Modal";
 export { Note } from "./components/Note";
 export { default as Pagination } from "./components/Pagination";
@@ -55,6 +56,7 @@ export { ProgressBar } from "./components/ProgressBar";
 export { ProgressCircular } from "./components/ProgressCircular";
 export * from "./components/Rating/";
 export { Sidepanel } from "./components/Sidepanel";
+export { Steps } from "./components/Steps";
 export { default as Tabs, Tab } from "./components/Tabs";
 export { Tag } from "./components/Tag";
 export * from "./helpers";