@rio-cloud/rio-uikit 2.0.0-beta.1 → 2.0.0-beta.2

package/components/dialog/DialogHeader.js

@@ -1,19 +1,40 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { noop } from 'es-toolkit/function';
-import classNames from 'classnames';
-import { useDialogContext } from "./dialogContext.js";
-const DialogHeader = (props) => {
-    const { title, subtitle, headerButtons, onCloseButtonClick = noop, ...remainingProps } = props;
-    const { onClose, isSmallestDialog, showXsDialogBorders, showCloseButton } = useDialogContext();
-    const doShowXsDialogBorders = isSmallestDialog ? showXsDialogBorders : true;
-    const doShowCloseButton = isSmallestDialog ? false : showCloseButton;
-    const headerClasses = classNames('modal-header', !doShowXsDialogBorders && 'border-bottom-none');
-    const headerTextClasses = classNames('modal-header-text', !doShowXsDialogBorders && 'padding-bottom-0 width-100pct');
-    const handleClose = (event) => {
-        onCloseButtonClick();
-        onClose(event);
-    };
-    return (_jsxs("div", { ...remainingProps, className: headerClasses, "aria-label": 'dialog header', children: [_jsxs("div", { className: headerTextClasses, children: [subtitle && _jsx("div", { className: 'modal-header-subtitle', children: subtitle }), _jsx("div", { className: 'modal-header-title', children: title })] }), _jsxs("div", { className: 'modal-header-buttons', children: [headerButtons && !isSmallestDialog && (_jsxs(React.Fragment, { children: [headerButtons, _jsx("div", { className: 'modal-header-buttons-spacer' })] })), doShowCloseButton && (_jsx("button", { type: 'button', className: 'btn btn-icon-only btn-muted modal-header-close close', onClick: handleClose, "data-testid": 'close', "aria-label": 'dialog close button', children: _jsx("span", { className: 'rioglyph rioglyph-remove', "aria-hidden": 'true' }) }))] })] }));
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import f from "react";
+import { noop as v } from "es-toolkit/function";
+import r from "classnames";
+import { useDialogContext as x } from "./dialogContext.js";
+const j = (d) => {
+  const { title: i, subtitle: t, headerButtons: s, onCloseButtonClick: n = v, ...c } = d, { onClose: m, isSmallestDialog: a, showXsDialogBorders: h, showCloseButton: u } = x(), l = a ? h : !0, b = a ? !1 : u, p = r("modal-header", !l && "border-bottom-none"), g = r(
+    "modal-header-text",
+    !l && "padding-bottom-0 width-100pct"
+  ), C = (N) => {
+    n(), m(N);
+  };
+  return /* @__PURE__ */ o("div", { ...c, className: p, "aria-label": "dialog header", children: [
+    /* @__PURE__ */ o("div", { className: g, children: [
+      t && /* @__PURE__ */ e("div", { className: "modal-header-subtitle", children: t }),
+      /* @__PURE__ */ e("div", { className: "modal-header-title", children: i })
+    ] }),
+    /* @__PURE__ */ o("div", { className: "modal-header-buttons", children: [
+      s && !a && /* @__PURE__ */ o(f.Fragment, { children: [
+        s,
+        /* @__PURE__ */ e("div", { className: "modal-header-buttons-spacer" })
+      ] }),
+      b && /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          className: "btn btn-icon-only btn-muted modal-header-close close",
+          onClick: C,
+          "data-testid": "close",
+          "aria-label": "dialog close button",
+          children: /* @__PURE__ */ e("span", { className: "rioglyph rioglyph-remove", "aria-hidden": "true" })
+        }
+      )
+    ] })
+  ] });
 };
-export default DialogHeader;
+export {
+  j as default
+};
+//# sourceMappingURL=DialogHeader.js.map

package/components/dialog/DialogHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogHeader.js","sources":["../../../src/components/dialog/DialogHeader.tsx"],"sourcesContent":["import React, { type ComponentProps } from 'react';\nimport { noop } from 'es-toolkit/function';\nimport classNames from 'classnames';\n\nimport { useDialogContext } from './dialogContext';\n\nexport type DialogHeaderProps = Omit<ComponentProps<'div'>, 'title'> & {\n    /**\n     * The dialog title (can also be a FormattedMessage component).\n     */\n    title: string | React.ReactNode;\n\n    /**\n     * The dialog header subtitle content.\n     */\n    subtitle?: string | React.ReactNode;\n\n    /**\n     * Allows to add additional buttons to the dialog header.\n     */\n    headerButtons?: React.ReactNode;\n\n    onCloseButtonClick?: () => void;\n};\n\nconst DialogHeader = (props: DialogHeaderProps) => {\n    const { title, subtitle, headerButtons, onCloseButtonClick = noop, ...remainingProps } = props;\n\n    const { onClose, isSmallestDialog, showXsDialogBorders, showCloseButton } = useDialogContext();\n\n    const doShowXsDialogBorders = isSmallestDialog ? showXsDialogBorders : true;\n\n    const doShowCloseButton = isSmallestDialog ? false : showCloseButton;\n\n    const headerClasses = classNames('modal-header', !doShowXsDialogBorders && 'border-bottom-none');\n    const headerTextClasses = classNames(\n        'modal-header-text',\n        !doShowXsDialogBorders && 'padding-bottom-0 width-100pct'\n    );\n\n    const handleClose = (event: React.MouseEvent<HTMLButtonElement>) => {\n        onCloseButtonClick();\n        onClose(event);\n    };\n\n    return (\n        <div {...remainingProps} className={headerClasses} aria-label='dialog header'>\n            <div className={headerTextClasses}>\n                {subtitle && <div className='modal-header-subtitle'>{subtitle}</div>}\n                <div className='modal-header-title'>{title}</div>\n            </div>\n            <div className='modal-header-buttons'>\n                {headerButtons && !isSmallestDialog && (\n                    <React.Fragment>\n                        {headerButtons}\n                        <div className='modal-header-buttons-spacer' />\n                    </React.Fragment>\n                )}\n                {doShowCloseButton && (\n                    <button\n                        type='button'\n                        className='btn btn-icon-only btn-muted modal-header-close close'\n                        onClick={handleClose}\n                        data-testid='close'\n                        aria-label='dialog close button'\n                    >\n                        <span className='rioglyph rioglyph-remove' aria-hidden='true' />\n                    </button>\n                )}\n            </div>\n        </div>\n    );\n};\n\nexport default DialogHeader;\n"],"names":["DialogHeader","props","title","subtitle","headerButtons","onCloseButtonClick","noop","remainingProps","onClose","isSmallestDialog","showXsDialogBorders","showCloseButton","useDialogContext","doShowXsDialogBorders","doShowCloseButton","headerClasses","classNames","headerTextClasses","handleClose","event","jsxs","jsx","React"],"mappings":";;;;;AAyBA,MAAMA,IAAe,CAACC,MAA6B;AAC/C,QAAM,EAAE,OAAAC,GAAO,UAAAC,GAAU,eAAAC,GAAe,oBAAAC,IAAqBC,GAAM,GAAGC,MAAmBN,GAEnF,EAAE,SAAAO,GAAS,kBAAAC,GAAkB,qBAAAC,GAAqB,iBAAAC,EAAA,IAAoBC,EAAA,GAEtEC,IAAwBJ,IAAmBC,IAAsB,IAEjEI,IAAoBL,IAAmB,KAAQE,GAE/CI,IAAgBC,EAAW,gBAAgB,CAACH,KAAyB,oBAAoB,GACzFI,IAAoBD;AAAA,IACtB;AAAA,IACA,CAACH,KAAyB;AAAA,EAAA,GAGxBK,IAAc,CAACC,MAA+C;AAChE,IAAAd,EAAA,GACAG,EAAQW,CAAK;AAAA,EACjB;AAEA,2BACK,OAAA,EAAK,GAAGZ,GAAgB,WAAWQ,GAAe,cAAW,iBAC1D,UAAA;AAAA,IAAA,gBAAAK,EAAC,OAAA,EAAI,WAAWH,GACX,UAAA;AAAA,MAAAd,KAAY,gBAAAkB,EAAC,OAAA,EAAI,WAAU,yBAAyB,UAAAlB,GAAS;AAAA,MAC9D,gBAAAkB,EAAC,OAAA,EAAI,WAAU,sBAAsB,UAAAnB,EAAA,CAAM;AAAA,IAAA,GAC/C;AAAA,IACA,gBAAAkB,EAAC,OAAA,EAAI,WAAU,wBACV,UAAA;AAAA,MAAAhB,KAAiB,CAACK,KACf,gBAAAW,EAACE,EAAM,UAAN,EACI,UAAA;AAAA,QAAAlB;AAAA,QACD,gBAAAiB,EAAC,OAAA,EAAI,WAAU,8BAAA,CAA8B;AAAA,MAAA,GACjD;AAAA,MAEHP,KACG,gBAAAO;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,MAAK;AAAA,UACL,WAAU;AAAA,UACV,SAASH;AAAA,UACT,eAAY;AAAA,UACZ,cAAW;AAAA,UAEX,UAAA,gBAAAG,EAAC,QAAA,EAAK,WAAU,4BAA2B,eAAY,OAAA,CAAO;AAAA,QAAA;AAAA,MAAA;AAAA,IAClE,EAAA,CAER;AAAA,EAAA,GACJ;AAER;"}

package/components/dialog/FrameDialog.d.ts

@@ -1,4 +1,4 @@
-import { type DialogSize } from './Dialog';
+import { DialogSize } from './Dialog';
 export declare const DEFAULT_PREFIX = "EVENT_FRAME_DIALOG";
 export declare const OPEN_DIALOG_EVENT = "_OPEN_DIALOG";
 export declare const CLOSE_DIALOG_EVENT = "_CLOSE_DIALOG";

package/components/dialog/FrameDialog.js

@@ -1,41 +1,41 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import IframeResizer from 'iframe-resizer-react';
-import Dialog from "./Dialog.js";
-import usePostMessage from "../../hooks/usePostMessage.js";
-export const DEFAULT_PREFIX = 'EVENT_FRAME_DIALOG';
-export const OPEN_DIALOG_EVENT = '_OPEN_DIALOG';
-export const CLOSE_DIALOG_EVENT = '_CLOSE_DIALOG';
-const FrameDialog = (props) => {
-    const { eventPrefix = DEFAULT_PREFIX, className = '', getSourceFrame = () => undefined } = props;
-    const openDialogEvent = `${eventPrefix}${OPEN_DIALOG_EVENT}`;
-    const closeDialogEvent = `${eventPrefix}${CLOSE_DIALOG_EVENT}`;
-    const [showDialog, setShowDialog] = useState(false);
-    const [remoteDialogUrl, setRemoteDialogUrl] = useState('');
-    const [dialogProps, setDialogProps] = useState({});
-    const { sendMessageToWidget } = usePostMessage(eventPrefix, (remoteAction) => {
-        console.log(remoteAction);
-        if (remoteAction.type === openDialogEvent) {
-            setShowDialog(true);
-            setRemoteDialogUrl(remoteAction.payload.src);
-            setDialogProps(remoteAction.payload.dialogProps);
-        }
-        else if (remoteAction.type === closeDialogEvent) {
-            setShowDialog(false);
-            // Forward messages from dialog back to widget
-            const widgetFrame = getSourceFrame();
-            if (widgetFrame) {
-                sendMessageToWidget({
-                    type: closeDialogEvent,
-                    payload: remoteAction.payload,
-                }, [widgetFrame]);
-            }
-        }
-    });
-    const dialogClassName = `frame-dialog ${className}`;
-    return (_jsx(Dialog, { ...dialogProps, show: showDialog, bodyClassName: 'padding-2 rounded min-height-200', body: _jsx(IframeResizer, { src: remoteDialogUrl, className: 'unstyled width-100pct' }), 
-        // Note: closing the dialog with escape is disabled by default.
-        // The widget would need to handle the 'esc' event and send a message to close it
-        disableEsc: true, className: dialogClassName }));
+import { jsx as r } from "react/jsx-runtime";
+import { useState as a } from "react";
+import y from "iframe-resizer-react";
+import N from "./Dialog.js";
+import u from "../../hooks/usePostMessage.js";
+const O = "EVENT_FRAME_DIALOG", L = "_OPEN_DIALOG", P = "_CLOSE_DIALOG", S = (i) => {
+  const { eventPrefix: o = O, className: d = "", getSourceFrame: g = () => {
+  } } = i, n = `${o}${L}`, e = `${o}${P}`, [p, t] = a(!1), [c, m] = a(""), [E, D] = a({}), { sendMessageToWidget: f } = u(o, (s) => {
+    if (console.log(s), s.type === n)
+      t(!0), m(s.payload.src), D(s.payload.dialogProps);
+    else if (s.type === e) {
+      t(!1);
+      const l = g();
+      l && f(
+        {
+          type: e,
+          payload: s.payload
+        },
+        [l]
+      );
+    }
+  }), _ = `frame-dialog ${d}`;
+  return /* @__PURE__ */ r(
+    N,
+    {
+      ...E,
+      show: p,
+      bodyClassName: "padding-2 rounded min-height-200",
+      body: /* @__PURE__ */ r(y, { src: c, className: "unstyled width-100pct" }),
+      disableEsc: !0,
+      className: _
+    }
+  );
 };
-export default FrameDialog;
+export {
+  P as CLOSE_DIALOG_EVENT,
+  O as DEFAULT_PREFIX,
+  L as OPEN_DIALOG_EVENT,
+  S as default
+};
+//# sourceMappingURL=FrameDialog.js.map

package/components/dialog/FrameDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FrameDialog.js","sources":["../../../src/components/dialog/FrameDialog.tsx"],"sourcesContent":["import { type ComponentProps, useState } from 'react';\nimport IframeResizer from 'iframe-resizer-react';\n\nimport Dialog, { type DialogSize } from './Dialog';\nimport usePostMessage, { type RemoteAction } from '../../hooks/usePostMessage';\n\nexport const DEFAULT_PREFIX = 'EVENT_FRAME_DIALOG';\n\nexport const OPEN_DIALOG_EVENT = '_OPEN_DIALOG';\nexport const CLOSE_DIALOG_EVENT = '_CLOSE_DIALOG';\n\nexport type DialogOptions = {\n    bsSize?: DialogSize;\n    showXsDialogBorders?: boolean;\n};\n\nexport type OPEN_DIALOG_EVENT_TYPE = {\n    src: string;\n    dialogProps?: DialogOptions;\n};\n\nexport type FrameDialogProps = {\n    /**\n     * A prefix for all event types.\n     *\n     * @default 'EVENT_FRAME_DIALOG'\n     */\n    eventPrefix?: string;\n\n    /**\n     * A function to retrieve the iframe DOM element so a message can be sent to it. This is required\n     * when sending messages back to the origin widget iframe that triggered the dialog in the first place.\n     */\n    getSourceFrame?: () => HTMLIFrameElement | null;\n\n    /**\n     * Additional classes for the modal element.\n     */\n    className?: string;\n};\n\nconst FrameDialog = (props: FrameDialogProps) => {\n    const { eventPrefix = DEFAULT_PREFIX, className = '', getSourceFrame = () => undefined } = props;\n\n    const openDialogEvent = `${eventPrefix}${OPEN_DIALOG_EVENT}`;\n    const closeDialogEvent = `${eventPrefix}${CLOSE_DIALOG_EVENT}`;\n\n    const [showDialog, setShowDialog] = useState(false);\n    const [remoteDialogUrl, setRemoteDialogUrl] = useState('');\n    const [dialogProps, setDialogProps] = useState<Partial<ComponentProps<typeof Dialog>>>({});\n\n    const { sendMessageToWidget } = usePostMessage(eventPrefix, (remoteAction: RemoteAction) => {\n        console.log(remoteAction);\n\n        if (remoteAction.type === openDialogEvent) {\n            setShowDialog(true);\n            setRemoteDialogUrl(remoteAction.payload.src);\n            setDialogProps(remoteAction.payload.dialogProps);\n        } else if (remoteAction.type === closeDialogEvent) {\n            setShowDialog(false);\n\n            // Forward messages from dialog back to widget\n            const widgetFrame = getSourceFrame();\n            if (widgetFrame) {\n                sendMessageToWidget(\n                    {\n                        type: closeDialogEvent,\n                        payload: remoteAction.payload,\n                    },\n                    [widgetFrame]\n                );\n            }\n        }\n    });\n\n    const dialogClassName = `frame-dialog ${className}`;\n\n    return (\n        <Dialog\n            {...dialogProps}\n            show={showDialog}\n            bodyClassName='padding-2 rounded min-height-200'\n            body={<IframeResizer src={remoteDialogUrl} className='unstyled width-100pct' />}\n            // Note: closing the dialog with escape is disabled by default.\n            // The widget would need to handle the 'esc' event and send a message to close it\n            disableEsc\n            className={dialogClassName}\n        />\n    );\n};\n\nexport default FrameDialog;\n"],"names":["DEFAULT_PREFIX","OPEN_DIALOG_EVENT","CLOSE_DIALOG_EVENT","FrameDialog","props","eventPrefix","className","getSourceFrame","openDialogEvent","closeDialogEvent","showDialog","setShowDialog","useState","remoteDialogUrl","setRemoteDialogUrl","dialogProps","setDialogProps","sendMessageToWidget","usePostMessage","remoteAction","widgetFrame","dialogClassName","jsx","Dialog","IframeResizer"],"mappings":";;;;;AAMO,MAAMA,IAAiB,sBAEjBC,IAAoB,gBACpBC,IAAqB,iBAgC5BC,IAAc,CAACC,MAA4B;AAC7C,QAAM,EAAE,aAAAC,IAAcL,GAAgB,WAAAM,IAAY,IAAI,gBAAAC,IAAiB,MAAA;AAAA,QAAoBH,GAErFI,IAAkB,GAAGH,CAAW,GAAGJ,CAAiB,IACpDQ,IAAmB,GAAGJ,CAAW,GAAGH,CAAkB,IAEtD,CAACQ,GAAYC,CAAa,IAAIC,EAAS,EAAK,GAC5C,CAACC,GAAiBC,CAAkB,IAAIF,EAAS,EAAE,GACnD,CAACG,GAAaC,CAAc,IAAIJ,EAAiD,CAAA,CAAE,GAEnF,EAAE,qBAAAK,EAAA,IAAwBC,EAAeb,GAAa,CAACc,MAA+B;AAGxF,QAFA,QAAQ,IAAIA,CAAY,GAEpBA,EAAa,SAASX;AACtB,MAAAG,EAAc,EAAI,GAClBG,EAAmBK,EAAa,QAAQ,GAAG,GAC3CH,EAAeG,EAAa,QAAQ,WAAW;AAAA,aACxCA,EAAa,SAASV,GAAkB;AAC/C,MAAAE,EAAc,EAAK;AAGnB,YAAMS,IAAcb,EAAA;AACpB,MAAIa,KACAH;AAAA,QACI;AAAA,UACI,MAAMR;AAAA,UACN,SAASU,EAAa;AAAA,QAAA;AAAA,QAE1B,CAACC,CAAW;AAAA,MAAA;AAAA,IAGxB;AAAA,EACJ,CAAC,GAEKC,IAAkB,gBAAgBf,CAAS;AAEjD,SACI,gBAAAgB;AAAA,IAACC;AAAA,IAAA;AAAA,MACI,GAAGR;AAAA,MACJ,MAAML;AAAA,MACN,eAAc;AAAA,MACd,MAAM,gBAAAY,EAACE,GAAA,EAAc,KAAKX,GAAiB,WAAU,yBAAwB;AAAA,MAG7E,YAAU;AAAA,MACV,WAAWQ;AAAA,IAAA;AAAA,EAAA;AAGvB;"}

package/components/dialog/InfoDialog.d.ts

@@ -1,5 +1,5 @@
-import type React from 'react';
-import Dialog from './Dialog';
+import { default as React } from 'react';
+import { default as Dialog } from './Dialog';
 export type InfoDialogProps = React.ComponentPropsWithoutRef<typeof Dialog> & {
     /**
      * The content of the dialog body itself.

package/components/dialog/InfoDialog.js

@@ -1,8 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import Dialog from "./Dialog.js";
-const InfoDialog = (props) => {
-    const { content, className, ...remainingProps } = props;
-    const dialogClassName = `${className ? className : ''} info-dialog`;
-    return _jsx(Dialog, { ...remainingProps, body: content, className: dialogClassName });
+import { jsx as i } from "react/jsx-runtime";
+import r from "./Dialog.js";
+const m = (a) => {
+  const { content: s, className: o, ...n } = a, t = `${o || ""} info-dialog`;
+  return /* @__PURE__ */ i(r, { ...n, body: s, className: t });
 };
-export default InfoDialog;
+export {
+  m as default
+};
+//# sourceMappingURL=InfoDialog.js.map

package/components/dialog/InfoDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoDialog.js","sources":["../../../src/components/dialog/InfoDialog.tsx"],"sourcesContent":["import type React from 'react';\n\nimport Dialog from './Dialog';\n\nexport type InfoDialogProps = React.ComponentPropsWithoutRef<typeof Dialog> & {\n    /**\n     * The content of the dialog body itself.\n     */\n    content: string | React.ReactNode;\n};\n\nconst InfoDialog = (props: InfoDialogProps) => {\n    const { content, className, ...remainingProps } = props;\n\n    const dialogClassName = `${className ? className : ''} info-dialog`;\n\n    return <Dialog {...remainingProps} body={content} className={dialogClassName} />;\n};\n\nexport default InfoDialog;\n"],"names":["InfoDialog","props","content","className","remainingProps","dialogClassName","Dialog"],"mappings":";;AAWA,MAAMA,IAAa,CAACC,MAA2B;AAC3C,QAAM,EAAE,SAAAC,GAAS,WAAAC,GAAW,GAAGC,MAAmBH,GAE5CI,IAAkB,GAAGF,KAAwB,EAAE;AAErD,2BAAQG,GAAA,EAAQ,GAAGF,GAAgB,MAAMF,GAAS,WAAWG,GAAiB;AAClF;"}

package/components/dialog/MediaDialog.d.ts

@@ -1,5 +1,5 @@
-import type React from 'react';
-import { type BaseDialogProps } from './Dialog';
+import { default as React } from 'react';
+import { BaseDialogProps } from './Dialog';
 export type MediaDialogMedia = {
     /**
      * Defines the media type that is going to be displayed.

package/components/dialog/MediaDialog.js

@@ -1,62 +1,79 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
-import classNames from 'classnames';
-import { noop } from 'es-toolkit/function';
-import Dialog from "./Dialog.js";
-import ResponsiveVideo from "../video/ResponsiveVideo.js";
-import ImagePreloader from "../preloader/ImagePreloader.js";
-import Spinner from "../spinner/Spinner.js";
-const MediaDialog = (props) => {
-    const { show = false, onClose = noop, disableEsc = false, useOverflow = false, bsSize = 'lg', media = [], previousButtonText = 'Prev', previousButtonCallback = noop, nextButtonText = 'Next', nextButtonCallback = noop, className, ...remainingProps } = props;
-    const [currentMediaIndex, setCurrentMediaIndex] = useState(0);
-    const handlePrevious = () => {
-        const oldIndex = currentMediaIndex;
-        const newIndex = oldIndex === 0 ? props.media.length - 1 : oldIndex - 1;
-        setCurrentMediaIndex(newIndex);
-        previousButtonCallback(newIndex);
-    };
-    const handleNext = () => {
-        const oldIndex = currentMediaIndex;
-        const newIndex = oldIndex === props.media.length - 1 ? 0 : oldIndex + 1;
-        setCurrentMediaIndex(newIndex);
-        nextButtonCallback(newIndex);
-    };
-    const renderFallback = () => {
-        return (_jsx("div", { className: 'text-center text-size-h3', children: _jsx("span", { className: 'rioglyph rioglyph-missing text-size-200pct text-color-gray' }) }));
-    };
-    const renderImage = (mediaData) => {
-        const imageClassNames = classNames('img-responsive', mediaData.className && mediaData.className);
-        return (
-        // @ts-ignore
-        _jsx(ImagePreloader, { src: mediaData.src, className: imageClassNames, children: ({ status, image }) => {
-                if (status === ImagePreloader.STATUS_LOADED) {
-                    // When image has been loaded, render the image tag
-                    return _jsx("img", { className: 'ani-fade-in', src: image.src }, image.src);
-                }
-                if (status === ImagePreloader.STATUS_FAILED) {
-                    return renderFallback();
-                }
-                return _jsx(Spinner, { isInverse: false });
-            } }));
-    };
-    const renderVideo = (mediaData) => {
-        const videoClassNames = classNames(mediaData.className && mediaData.className);
-        return (_jsx("div", { className: 'flex-1-0', children: _jsx(ResponsiveVideo, { src: mediaData.src, aspectRatio: mediaData.aspectRatio ?? '16by9', className: videoClassNames }) }));
-    };
-    const renderMediaContent = (mediaData = {}) => {
-        if (mediaData.type === MediaDialog.MEDIA_TYPE_VIDEO) {
-            return renderVideo(mediaData);
-        }
-        // image media is default
-        return mediaData.src && renderImage(mediaData);
-    };
-    const dialogClassName = classNames('media-dialog', className && className);
-    const bodyClassNames = classNames('padding-0');
-    const mediaContentClassNames = classNames('media-content', 'content-center');
-    const mediaTitle = media[currentMediaIndex].title;
-    const mediaSubtitle = media[currentMediaIndex].subtitle || null;
-    return (_jsx(Dialog, { ...remainingProps, show: show, title: mediaTitle, subtitle: mediaSubtitle, body: _jsx("div", { className: mediaContentClassNames, children: renderMediaContent(media[currentMediaIndex]) }), footer: media?.length > 1 && (_jsxs(_Fragment, { children: [_jsxs("button", { type: 'button', className: 'btn btn-primary btn-link pull-left', onClick: handlePrevious, children: [_jsx("span", { className: 'rioglyph rioglyph-chevron-left' }), previousButtonText] }), _jsx("div", { children: `${currentMediaIndex + 1} / ${props.media.length}` }), _jsxs("button", { type: 'button', className: 'btn btn-primary btn-link btn-icon-right', onClick: handleNext, children: [_jsx("span", { className: 'rioglyph rioglyph-chevron-right' }), nextButtonText] })] })), onClose: onClose, className: dialogClassName, bodyClassName: bodyClassNames, disableEsc: disableEsc, useOverflow: useOverflow, bsSize: bsSize }));
+import { jsx as s, jsxs as i, Fragment as z } from "react/jsx-runtime";
+import { useState as F } from "react";
+import r from "classnames";
+import { noop as a } from "es-toolkit/function";
+import R from "./Dialog.js";
+import Y from "../video/ResponsiveVideo.js";
+import c from "../preloader/ImagePreloader.js";
+import j from "../spinner/Spinner.js";
+const m = (o) => {
+  const {
+    show: h = !1,
+    onClose: N = a,
+    disableEsc: b = !1,
+    useOverflow: f = !1,
+    bsSize: x = "lg",
+    media: l = [],
+    previousButtonText: v = "Prev",
+    previousButtonCallback: y = a,
+    nextButtonText: I = "Next",
+    nextButtonCallback: C = a,
+    className: d,
+    ...E
+  } = o, [n, p] = F(0), T = () => {
+    const e = n, t = e === 0 ? o.media.length - 1 : e - 1;
+    p(t), y(t);
+  }, A = () => {
+    const e = n, t = e === o.media.length - 1 ? 0 : e + 1;
+    p(t), C(t);
+  }, M = () => /* @__PURE__ */ s("div", { className: "text-center text-size-h3", children: /* @__PURE__ */ s("span", { className: "rioglyph rioglyph-missing text-size-200pct text-color-gray" }) }), S = (e) => {
+    const t = r("img-responsive", e.className && e.className);
+    return (
+      // @ts-ignore
+      /* @__PURE__ */ s(c, { src: e.src, className: t, children: ({ status: u, image: g }) => u === c.STATUS_LOADED ? /* @__PURE__ */ s("img", { className: "ani-fade-in", src: g.src }, g.src) : u === c.STATUS_FAILED ? M() : /* @__PURE__ */ s(j, { isInverse: !1 }) })
+    );
+  }, _ = (e) => {
+    const t = r(e.className && e.className);
+    return /* @__PURE__ */ s("div", { className: "flex-1-0", children: /* @__PURE__ */ s(
+      Y,
+      {
+        src: e.src,
+        aspectRatio: e.aspectRatio ?? "16by9",
+        className: t
+      }
+    ) });
+  }, k = (e = {}) => e.type === m.MEDIA_TYPE_VIDEO ? _(e) : e.src && S(e), P = r("media-dialog", d && d), w = r("padding-0"), B = r("media-content", "content-center"), O = l[n].title, V = l[n].subtitle || null;
+  return /* @__PURE__ */ s(
+    R,
+    {
+      ...E,
+      show: h,
+      title: O,
+      subtitle: V,
+      body: /* @__PURE__ */ s("div", { className: B, children: k(l[n]) }),
+      footer: l?.length > 1 && /* @__PURE__ */ i(z, { children: [
+        /* @__PURE__ */ i("button", { type: "button", className: "btn btn-primary btn-link pull-left", onClick: T, children: [
+          /* @__PURE__ */ s("span", { className: "rioglyph rioglyph-chevron-left" }),
+          v
+        ] }),
+        /* @__PURE__ */ s("div", { children: `${n + 1} / ${o.media.length}` }),
+        /* @__PURE__ */ i("button", { type: "button", className: "btn btn-primary btn-link btn-icon-right", onClick: A, children: [
+          /* @__PURE__ */ s("span", { className: "rioglyph rioglyph-chevron-right" }),
+          I
+        ] })
+      ] }),
+      onClose: N,
+      className: P,
+      bodyClassName: w,
+      disableEsc: b,
+      useOverflow: f,
+      bsSize: x
+    }
+  );
 };
-MediaDialog.MEDIA_TYPE_IMAGE = 'image';
-MediaDialog.MEDIA_TYPE_VIDEO = 'video';
-export default MediaDialog;
+m.MEDIA_TYPE_IMAGE = "image";
+m.MEDIA_TYPE_VIDEO = "video";
+export {
+  m as default
+};
+//# sourceMappingURL=MediaDialog.js.map

package/components/dialog/MediaDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaDialog.js","sources":["../../../src/components/dialog/MediaDialog.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState } from 'react';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/function';\n\nimport Dialog, { type BaseDialogProps } from './Dialog';\nimport ResponsiveVideo from '../video/ResponsiveVideo';\nimport ImagePreloader from '../preloader/ImagePreloader';\nimport Spinner from '../spinner/Spinner';\n\n// TODO: add keyboard support left/right\n\nexport type MediaDialogMedia = {\n    /**\n     * Defines the media type that is going to be displayed.\n     *\n     * Possible values are: `image` and `video`.\n     */\n    type: 'image' | 'video';\n\n    /**\n     * The source location for the media data.\n     */\n    src: string;\n\n    /**\n     * The name or title of the media used for the dialogs title.\n     */\n    title: string | React.ReactNode;\n\n    /**\n     * Additional media information used for the dialogs subtitle.\n     */\n    subtitle?: string | React.ReactNode;\n\n    /**\n     * Only relevant for videos where the aspect of the video is defined.\n     *\n     * Possible values are: `4by3` and `16by9`.\n     * @default '16by9'\n     */\n    aspectRatio?: '4by3' | '16by9';\n\n    /**\n     * Additional classes for the image element.\n     */\n    className?: string;\n};\n\nexport type MediaDialogProps = BaseDialogProps & {\n    /**\n     * List of media objects.\n     */\n    media: MediaDialogMedia[];\n\n    /**\n     * The button text for switching to the previous media if there are multiple.\n     */\n    previousButtonText: string | React.ReactNode;\n\n    /**\n     * Callback function for when the previous button is clicked.\n     * @param newIndex\n     * @returns\n     */\n    previousButtonCallback?: (newIndex: number) => void;\n\n    /**\n     * The button text for switching to the next media if there are multiple.\n     */\n    nextButtonText: string | React.ReactNode;\n\n    /**\n     * Callback function for when the next button is clicked.\n     * @param newIndex\n     * @returns\n     */\n    nextButtonCallback?: (newIndex: number) => void;\n};\n\nconst MediaDialog = (props: MediaDialogProps) => {\n    const {\n        show = false,\n        onClose = noop,\n        disableEsc = false,\n        useOverflow = false,\n        bsSize = 'lg',\n        media = [],\n        previousButtonText = 'Prev',\n        previousButtonCallback = noop,\n        nextButtonText = 'Next',\n        nextButtonCallback = noop,\n        className,\n        ...remainingProps\n    } = props;\n\n    const [currentMediaIndex, setCurrentMediaIndex] = useState(0);\n\n    const handlePrevious = () => {\n        const oldIndex = currentMediaIndex;\n        const newIndex = oldIndex === 0 ? props.media.length - 1 : oldIndex - 1;\n        setCurrentMediaIndex(newIndex);\n        previousButtonCallback(newIndex);\n    };\n\n    const handleNext = () => {\n        const oldIndex = currentMediaIndex;\n        const newIndex = oldIndex === props.media.length - 1 ? 0 : oldIndex + 1;\n        setCurrentMediaIndex(newIndex);\n        nextButtonCallback(newIndex);\n    };\n\n    const renderFallback = () => {\n        return (\n            <div className='text-center text-size-h3'>\n                <span className='rioglyph rioglyph-missing text-size-200pct text-color-gray' />\n            </div>\n        );\n    };\n\n    const renderImage = (mediaData: MediaDialogMedia) => {\n        const imageClassNames = classNames('img-responsive', mediaData.className && mediaData.className);\n\n        return (\n            // @ts-ignore\n            <ImagePreloader src={mediaData.src} className={imageClassNames}>\n                {({ status, image }: { status: 'PENDING' | 'LOADED' | 'FAILED'; image: { src: string } }) => {\n                    if (status === ImagePreloader.STATUS_LOADED) {\n                        // When image has been loaded, render the image tag\n                        return <img className='ani-fade-in' key={image.src} src={image.src} />;\n                    }\n\n                    if (status === ImagePreloader.STATUS_FAILED) {\n                        return renderFallback();\n                    }\n\n                    return <Spinner isInverse={false} />;\n                }}\n            </ImagePreloader>\n        );\n    };\n\n    const renderVideo = (mediaData: MediaDialogMedia) => {\n        const videoClassNames = classNames(mediaData.className && mediaData.className);\n        return (\n            <div className='flex-1-0'>\n                <ResponsiveVideo\n                    src={mediaData.src}\n                    aspectRatio={mediaData.aspectRatio ?? '16by9'}\n                    className={videoClassNames}\n                />\n            </div>\n        );\n    };\n\n    const renderMediaContent = (mediaData = {} as MediaDialogMedia) => {\n        if (mediaData.type === MediaDialog.MEDIA_TYPE_VIDEO) {\n            return renderVideo(mediaData);\n        }\n\n        // image media is default\n        return mediaData.src && renderImage(mediaData);\n    };\n\n    const dialogClassName = classNames('media-dialog', className && className);\n    const bodyClassNames = classNames('padding-0');\n    const mediaContentClassNames = classNames('media-content', 'content-center');\n\n    const mediaTitle = media[currentMediaIndex].title;\n    const mediaSubtitle = media[currentMediaIndex].subtitle || null;\n\n    return (\n        <Dialog\n            {...remainingProps}\n            show={show}\n            title={mediaTitle}\n            subtitle={mediaSubtitle}\n            body={<div className={mediaContentClassNames}>{renderMediaContent(media[currentMediaIndex])}</div>}\n            footer={\n                media?.length > 1 && (\n                    <>\n                        <button type='button' className='btn btn-primary btn-link pull-left' onClick={handlePrevious}>\n                            <span className='rioglyph rioglyph-chevron-left' />\n                            {previousButtonText}\n                        </button>\n                        <div>{`${currentMediaIndex + 1} / ${props.media.length}`}</div>\n                        <button type='button' className='btn btn-primary btn-link btn-icon-right' onClick={handleNext}>\n                            <span className='rioglyph rioglyph-chevron-right' />\n                            {nextButtonText}\n                        </button>\n                    </>\n                )\n            }\n            onClose={onClose}\n            className={dialogClassName}\n            bodyClassName={bodyClassNames}\n            disableEsc={disableEsc}\n            useOverflow={useOverflow}\n            bsSize={bsSize}\n        />\n    );\n};\n\nMediaDialog.MEDIA_TYPE_IMAGE = 'image' as const;\nMediaDialog.MEDIA_TYPE_VIDEO = 'video' as const;\n\nexport default MediaDialog;\n"],"names":["MediaDialog","props","show","onClose","noop","disableEsc","useOverflow","bsSize","media","previousButtonText","previousButtonCallback","nextButtonText","nextButtonCallback","className","remainingProps","currentMediaIndex","setCurrentMediaIndex","useState","handlePrevious","oldIndex","newIndex","handleNext","renderFallback","jsx","renderImage","mediaData","imageClassNames","classNames","ImagePreloader","status","image","Spinner","renderVideo","videoClassNames","ResponsiveVideo","renderMediaContent","dialogClassName","bodyClassNames","mediaContentClassNames","mediaTitle","mediaSubtitle","Dialog","jsxs","Fragment"],"mappings":"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"}

package/components/dialog/OnboardingDialog.d.ts

@@ -1,5 +1,5 @@
-import type React from 'react';
-import { type BaseDialogProps } from './Dialog';
+import { default as React } from 'react';
+import { BaseDialogProps } from './Dialog';
 export type OnboardingDialogProps = Pick<BaseDialogProps, 'show' | 'onClose' | 'className'> & {
     /**
      * The source URL of the image to be displayed in the dialog.

package/components/dialog/OnboardingDialog.js

@@ -1,9 +1,63 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Dialog from "./Dialog.js";
-import Button from "../button/Button.js";
-const OnboardingDialog = (props) => {
-    const { className, show, onClose, onStartTour, imageSrc, imageAlt, title = 'Welcome to the RIO UIKIT!', description = (_jsxs("span", { children: [_jsx("span", { className: 'text-medium', children: "Get started with a quick tour to explore UIKIT and discover its key features." }), ' ', _jsx("span", { children: "It's the easiest way to get familiar with the service and make the most of your experience." })] })), onboardingRestartHint = 'Not ready to start now?', onboardingRestartDescription = 'You can always start the onboarding tour later from the service info option in the application header.', skipButtonText = 'Skip', tourButtonText = 'Start the tour', ...remainingProps } = props;
-    const dialogClassName = `${className ? className : ''} onboarding-dialog`;
-    return (_jsx(Dialog, { ...remainingProps, show: show, bsSize: 'sm', onClose: onClose, onEsc: onClose, bodyClassName: 'padding-0', className: dialogClassName, showCloseButton: false, body: _jsxs("div", { children: [_jsx("div", { children: _jsx("img", { className: 'img-responsive rounded-top-right-extra-large rounded-top-left-extra-large', src: imageSrc, alt: imageAlt }) }), _jsxs("div", { className: 'position-relative padding-20 margin-top-10 margin-x-20', children: [_jsx("div", { className: 'margin-bottom-15 margin-right-20 text-color-darkest', children: _jsx("div", { className: 'text-size-h3 text-medium', children: title }) }), _jsx("div", { className: 'text-color-darker', children: _jsx("p", { className: 'text-size-16', children: description }) }), _jsxs("div", { className: 'text-color-darker', children: [_jsx("div", { className: 'margin-top-25 text-medium', children: onboardingRestartHint }), _jsx("p", { className: 'text-color-darker padding-bottom-15 margin-top-5', children: onboardingRestartDescription })] }), _jsxs("div", { className: 'btn-toolbar justify-content-end margin-y-20', children: [_jsx(Button, { bsStyle: Button.MUTED, onClick: onClose, children: skipButtonText }), _jsx(Button, { bsStyle: Button.PRIMARY, onClick: onStartTour, children: tourButtonText })] })] })] }) }));
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import b from "./Dialog.js";
+import a from "../button/Button.js";
+const y = (r) => {
+  const {
+    className: o,
+    show: s,
+    onClose: i,
+    onStartTour: n,
+    imageSrc: l,
+    imageAlt: d,
+    title: c = "Welcome to the RIO UIKIT!",
+    description: m = /* @__PURE__ */ t("span", { children: [
+      /* @__PURE__ */ e("span", { className: "text-medium", children: "Get started with a quick tour to explore UIKIT and discover its key features." }),
+      " ",
+      /* @__PURE__ */ e("span", { children: "It's the easiest way to get familiar with the service and make the most of your experience." })
+    ] }),
+    onboardingRestartHint: h = "Not ready to start now?",
+    onboardingRestartDescription: g = "You can always start the onboarding tour later from the service info option in the application header.",
+    skipButtonText: p = "Skip",
+    tourButtonText: u = "Start the tour",
+    ...x
+  } = r, N = `${o || ""} onboarding-dialog`;
+  return /* @__PURE__ */ e(
+    b,
+    {
+      ...x,
+      show: s,
+      bsSize: "sm",
+      onClose: i,
+      onEsc: i,
+      bodyClassName: "padding-0",
+      className: N,
+      showCloseButton: !1,
+      body: /* @__PURE__ */ t("div", { children: [
+        /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+          "img",
+          {
+            className: "img-responsive rounded-top-right-extra-large rounded-top-left-extra-large",
+            src: l,
+            alt: d
+          }
+        ) }),
+        /* @__PURE__ */ t("div", { className: "position-relative padding-20 margin-top-10 margin-x-20", children: [
+          /* @__PURE__ */ e("div", { className: "margin-bottom-15 margin-right-20 text-color-darkest", children: /* @__PURE__ */ e("div", { className: "text-size-h3 text-medium", children: c }) }),
+          /* @__PURE__ */ e("div", { className: "text-color-darker", children: /* @__PURE__ */ e("p", { className: "text-size-16", children: m }) }),
+          /* @__PURE__ */ t("div", { className: "text-color-darker", children: [
+            /* @__PURE__ */ e("div", { className: "margin-top-25 text-medium", children: h }),
+            /* @__PURE__ */ e("p", { className: "text-color-darker padding-bottom-15 margin-top-5", children: g })
+          ] }),
+          /* @__PURE__ */ t("div", { className: "btn-toolbar justify-content-end margin-y-20", children: [
+            /* @__PURE__ */ e(a, { bsStyle: a.MUTED, onClick: i, children: p }),
+            /* @__PURE__ */ e(a, { bsStyle: a.PRIMARY, onClick: n, children: u })
+          ] })
+        ] })
+      ] })
+    }
+  );
 };
-export default OnboardingDialog;
+export {
+  y as default
+};
+//# sourceMappingURL=OnboardingDialog.js.map

package/components/dialog/OnboardingDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OnboardingDialog.js","sources":["../../../src/components/dialog/OnboardingDialog.tsx"],"sourcesContent":["import type React from 'react';\n\nimport Dialog, { type BaseDialogProps } from './Dialog';\nimport Button from '../button/Button';\n\nexport type OnboardingDialogProps = Pick<BaseDialogProps, 'show' | 'onClose' | 'className'> & {\n    /**\n     * The source URL of the image to be displayed in the dialog.\n     */\n    imageSrc: string;\n\n    /**\n     * Alternative text for the image, used for accessibility.\n     */\n    imageAlt?: string;\n\n    /**\n     * The title of the dialog. A welcome message.\n     */\n    title?: string | React.ReactNode;\n\n    /**\n     * A short description of the service and it's onboarding.\n     */\n    description?: string | React.ReactNode;\n\n    /**\n     * Hint text for restarting the onboarding process.\n     */\n    onboardingRestartHint?: string | React.ReactNode;\n\n    /**\n     * Detailed description for restarting the onboarding process.\n     */\n    onboardingRestartDescription?: string | React.ReactNode;\n\n    /**\n     * Text for the skip button\n     */\n    skipButtonText?: string | React.ReactNode;\n\n    /**\n     * Text for the button to start the tour\n     */\n    tourButtonText?: string | React.ReactNode;\n\n    /**\n     * Callback function to be called when the tour starts.\n     *\n     * @returns\n     */\n    onStartTour: () => void;\n};\n\nconst OnboardingDialog = (props: OnboardingDialogProps) => {\n    const {\n        className,\n        show,\n        onClose,\n        onStartTour,\n        imageSrc,\n        imageAlt,\n        title = 'Welcome to the RIO UIKIT!',\n        description = (\n            <span>\n                <span className='text-medium'>\n                    Get started with a quick tour to explore UIKIT and discover its key features.\n                </span>{' '}\n                <span>It's the easiest way to get familiar with the service and make the most of your experience.</span>\n            </span>\n        ),\n        onboardingRestartHint = 'Not ready to start now?',\n        onboardingRestartDescription = 'You can always start the onboarding tour later from the service info option in the application header.',\n        skipButtonText = 'Skip',\n        tourButtonText = 'Start the tour',\n        ...remainingProps\n    } = props;\n\n    const dialogClassName = `${className ? className : ''} onboarding-dialog`;\n\n    return (\n        <Dialog\n            {...remainingProps}\n            show={show}\n            bsSize='sm'\n            onClose={onClose}\n            onEsc={onClose}\n            bodyClassName='padding-0'\n            className={dialogClassName}\n            showCloseButton={false}\n            body={\n                <div>\n                    <div>\n                        <img\n                            className='img-responsive rounded-top-right-extra-large rounded-top-left-extra-large'\n                            src={imageSrc}\n                            alt={imageAlt}\n                        />\n                    </div>\n                    <div className='position-relative padding-20 margin-top-10 margin-x-20'>\n                        <div className='margin-bottom-15 margin-right-20 text-color-darkest'>\n                            <div className='text-size-h3 text-medium'>{title}</div>\n                        </div>\n                        <div className='text-color-darker'>\n                            <p className='text-size-16'>{description}</p>\n                        </div>\n                        <div className='text-color-darker'>\n                            <div className='margin-top-25 text-medium'>{onboardingRestartHint}</div>\n                            <p className='text-color-darker padding-bottom-15 margin-top-5'>\n                                {onboardingRestartDescription}\n                            </p>\n                        </div>\n                        <div className='btn-toolbar justify-content-end margin-y-20'>\n                            <Button bsStyle={Button.MUTED} onClick={onClose}>\n                                {skipButtonText}\n                            </Button>\n                            <Button bsStyle={Button.PRIMARY} onClick={onStartTour}>\n                                {tourButtonText}\n                            </Button>\n                        </div>\n                    </div>\n                </div>\n            }\n        />\n    );\n};\n\nexport default OnboardingDialog;\n"],"names":["OnboardingDialog","props","className","show","onClose","onStartTour","imageSrc","imageAlt","title","description","jsx","onboardingRestartHint","onboardingRestartDescription","skipButtonText","tourButtonText","remainingProps","dialogClassName","Dialog","jsxs","Button"],"mappings":";;;AAsDA,MAAMA,IAAmB,CAACC,MAAiC;AACvD,QAAM;AAAA,IACF,WAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,aAAAC,sBACK,QAAA,EACG,UAAA;AAAA,MAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,eAAc,UAAA,iFAE9B;AAAA,MAAQ;AAAA,MACR,gBAAAA,EAAC,UAAK,UAAA,8FAAA,CAA2F;AAAA,IAAA,GACrG;AAAA,IAEJ,uBAAAC,IAAwB;AAAA,IACxB,8BAAAC,IAA+B;AAAA,IAC/B,gBAAAC,IAAiB;AAAA,IACjB,gBAAAC,IAAiB;AAAA,IACjB,GAAGC;AAAA,EAAA,IACHd,GAEEe,IAAkB,GAAGd,KAAwB,EAAE;AAErD,SACI,gBAAAQ;AAAA,IAACO;AAAA,IAAA;AAAA,MACI,GAAGF;AAAA,MACJ,MAAAZ;AAAA,MACA,QAAO;AAAA,MACP,SAAAC;AAAA,MACA,OAAOA;AAAA,MACP,eAAc;AAAA,MACd,WAAWY;AAAA,MACX,iBAAiB;AAAA,MACjB,wBACK,OAAA,EACG,UAAA;AAAA,QAAA,gBAAAN,EAAC,OAAA,EACG,UAAA,gBAAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAU;AAAA,YACV,KAAKJ;AAAA,YACL,KAAKC;AAAA,UAAA;AAAA,QAAA,GAEb;AAAA,QACA,gBAAAW,EAAC,OAAA,EAAI,WAAU,0DACX,UAAA;AAAA,UAAA,gBAAAR,EAAC,OAAA,EAAI,WAAU,uDACX,UAAA,gBAAAA,EAAC,SAAI,WAAU,4BAA4B,aAAM,EAAA,CACrD;AAAA,UACA,gBAAAA,EAAC,SAAI,WAAU,qBACX,4BAAC,KAAA,EAAE,WAAU,gBAAgB,UAAAD,EAAA,CAAY,EAAA,CAC7C;AAAA,UACA,gBAAAS,EAAC,OAAA,EAAI,WAAU,qBACX,UAAA;AAAA,YAAA,gBAAAR,EAAC,OAAA,EAAI,WAAU,6BAA6B,UAAAC,GAAsB;AAAA,YAClE,gBAAAD,EAAC,KAAA,EAAE,WAAU,oDACR,UAAAE,EAAA,CACL;AAAA,UAAA,GACJ;AAAA,UACA,gBAAAM,EAAC,OAAA,EAAI,WAAU,+CACX,UAAA;AAAA,YAAA,gBAAAR,EAACS,KAAO,SAASA,EAAO,OAAO,SAASf,GACnC,UAAAS,GACL;AAAA,8BACCM,GAAA,EAAO,SAASA,EAAO,SAAS,SAASd,GACrC,UAAAS,EAAA,CACL;AAAA,UAAA,EAAA,CACJ;AAAA,QAAA,EAAA,CACJ;AAAA,MAAA,EAAA,CACJ;AAAA,IAAA;AAAA,EAAA;AAIhB;"}

package/components/dialog/ReleaseNotesDialog.d.ts

@@ -1,4 +1,4 @@
-import { type ReleaseNotesData } from '../releaseNotes/ReleaseNotes';
+import { ReleaseNotesData } from '../releaseNotes/ReleaseNotes';
 export type ReleaseNotesDialogProps = {
     /**
      * Decides if the dialog is opened.

package/components/dialog/ReleaseNotesDialog.js

@@ -1,14 +1,25 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import ReleaseNotes from "../releaseNotes/ReleaseNotes.js";
-import Button from "../button/Button.js";
-import Dialog from "./Dialog.js";
-const setReleaseNotesItem = (props) => {
-    window.localStorage.setItem(props.RELEASE_NOTES_ITEM, props.currentVersion);
-    props.setShowReleaseNotes(false);
+import { jsx as o } from "react/jsx-runtime";
+import i from "../releaseNotes/ReleaseNotes.js";
+import m from "../button/Button.js";
+import c from "./Dialog.js";
+const l = (e) => {
+  window.localStorage.setItem(e.RELEASE_NOTES_ITEM, e.currentVersion), e.setShowReleaseNotes(!1);
+}, N = (e, t) => /* @__PURE__ */ o("span", { children: e || t }), R = (e) => {
+  const { moduleName: t, whatsNewTitle: s, closeButtonText: a, translatedReleaseNotes: r, useOverflow: n = !0 } = e;
+  return /* @__PURE__ */ o(
+    c,
+    {
+      show: e.showReleaseNotes,
+      useOverflow: n,
+      title: N(t, s),
+      subtitle: t && s,
+      body: /* @__PURE__ */ o(i, { releaseNotes: r }),
+      footer: /* @__PURE__ */ o(m, { onClick: () => l(e), children: a || "Close" }),
+      onClose: () => l(e)
+    }
+  );
 };
-const getModuleName = (moduleName, whatsNew) => (_jsx("span", { children: moduleName ? moduleName : whatsNew }));
-const ReleaseNotesDialog = (props) => {
-    const { moduleName, whatsNewTitle, closeButtonText, translatedReleaseNotes, useOverflow = true } = props;
-    return (_jsx(Dialog, { show: props.showReleaseNotes, useOverflow: useOverflow, title: getModuleName(moduleName, whatsNewTitle), subtitle: moduleName && whatsNewTitle, body: _jsx(ReleaseNotes, { releaseNotes: translatedReleaseNotes }), footer: _jsx(Button, { onClick: () => setReleaseNotesItem(props), children: closeButtonText || 'Close' }), onClose: () => setReleaseNotesItem(props) }));
+export {
+  R as default
 };
-export default ReleaseNotesDialog;
+//# sourceMappingURL=ReleaseNotesDialog.js.map

package/components/dialog/ReleaseNotesDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReleaseNotesDialog.js","sources":["../../../src/components/dialog/ReleaseNotesDialog.tsx"],"sourcesContent":["import ReleaseNotes, { type ReleaseNotesData } from '../releaseNotes/ReleaseNotes';\n\nimport Button from '../button/Button';\nimport Dialog from './Dialog';\n\nconst setReleaseNotesItem = (props: ReleaseNotesDialogProps) => {\n    window.localStorage.setItem(props.RELEASE_NOTES_ITEM, props.currentVersion);\n    props.setShowReleaseNotes(false);\n};\n\nconst getModuleName = (moduleName: string | undefined, whatsNew: string | undefined) => (\n    <span>{moduleName ? moduleName : whatsNew}</span>\n);\n\nexport type ReleaseNotesDialogProps = {\n    /**\n     * Decides if the dialog is opened.\n     */\n    showReleaseNotes: boolean;\n\n    /**\n     * Callback set showReleaseNotes state\n     * @param show\n     * @returns\n     */\n    setShowReleaseNotes: (show: boolean) => void;\n\n    /**\n     * Translated text for \"What`s new?\"\n     */\n    whatsNewTitle?: string;\n\n    /**\n     * The translated modulename.\n     */\n    moduleName?: string;\n\n    /**\n     * Translated text for the close button.\n     */\n    closeButtonText?: string;\n\n    /**\n     * Translated release notes.\n     *\n     * @example\n     *\n     * ```tsx\n     * {\n     *     \"0.1.2\": {\n     *         date: '20.10.2023',\n     *         content: (\n     *             <div className='padding-left-15'>\n     *                 Summary\n     *                 • Feature 1\n     *                 • Feature 2\n     *             </div>\n     *         ),\n     *     }\n     * }\n     * ```\n     */\n    translatedReleaseNotes: ReleaseNotesData;\n\n    /**\n     * Specifies the current module version.\n     */\n    currentVersion: string;\n\n    /**\n     * Specifies the item in the localStorage that is used to save the last read module version.\n     */\n    RELEASE_NOTES_ITEM: string;\n\n    /**\n     * Enables the content of the dialog to scroll when it overflows.\n     * This means the dialog body scrolls instead of the entire dialog.\n     */\n    useOverflow?: boolean;\n};\n\nconst ReleaseNotesDialog = (props: ReleaseNotesDialogProps) => {\n    const { moduleName, whatsNewTitle, closeButtonText, translatedReleaseNotes, useOverflow = true } = props;\n\n    return (\n        <Dialog\n            show={props.showReleaseNotes}\n            useOverflow={useOverflow}\n            title={getModuleName(moduleName, whatsNewTitle)}\n            subtitle={moduleName && whatsNewTitle}\n            body={<ReleaseNotes releaseNotes={translatedReleaseNotes} />}\n            footer={<Button onClick={() => setReleaseNotesItem(props)}>{closeButtonText || 'Close'}</Button>}\n            onClose={() => setReleaseNotesItem(props)}\n        />\n    );\n};\n\nexport default ReleaseNotesDialog;\n"],"names":["setReleaseNotesItem","props","getModuleName","moduleName","whatsNew","ReleaseNotesDialog","whatsNewTitle","closeButtonText","translatedReleaseNotes","useOverflow","jsx","Dialog","ReleaseNotes","Button"],"mappings":";;;;AAKA,MAAMA,IAAsB,CAACC,MAAmC;AAC5D,SAAO,aAAa,QAAQA,EAAM,oBAAoBA,EAAM,cAAc,GAC1EA,EAAM,oBAAoB,EAAK;AACnC,GAEMC,IAAgB,CAACC,GAAgCC,wBAClD,QAAA,EAAM,UAAAD,KAA0BC,GAAS,GAsExCC,IAAqB,CAACJ,MAAmC;AAC3D,QAAM,EAAE,YAAAE,GAAY,eAAAG,GAAe,iBAAAC,GAAiB,wBAAAC,GAAwB,aAAAC,IAAc,OAASR;AAEnG,SACI,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,MAAMV,EAAM;AAAA,MACZ,aAAAQ;AAAA,MACA,OAAOP,EAAcC,GAAYG,CAAa;AAAA,MAC9C,UAAUH,KAAcG;AAAA,MACxB,MAAM,gBAAAI,EAACE,GAAA,EAAa,cAAcJ,EAAA,CAAwB;AAAA,MAC1D,0BAASK,GAAA,EAAO,SAAS,MAAMb,EAAoBC,CAAK,GAAI,UAAAM,KAAmB,QAAA,CAAQ;AAAA,MACvF,SAAS,MAAMP,EAAoBC,CAAK;AAAA,IAAA;AAAA,EAAA;AAGpD;"}

package/components/dialog/SaveDialog.d.ts

@@ -1,5 +1,5 @@
-import type React from 'react';
-import { type BaseDialogProps } from './Dialog';
+import { default as React } from 'react';
+import { BaseDialogProps } from './Dialog';
 export type SaveDialogProps = BaseDialogProps & {
     /**
      * The content of the dialog body itself.