@rio-cloud/rio-uikit 2.5.1 → 3.0.0-beta.1

package/components/bottomSheet/BottomSheet.js

@@ -1,97 +1,73 @@
-import { jsxs as n, Fragment as I, jsx as e } from "react/jsx-runtime";
-import { useState as g, useEffect as M } from "react";
-import { createPortal as j } from "react-dom";
-import { motion as R } from "motion/react";
-import { isFunction as V } from "es-toolkit/predicate";
-import f from "../../utils/classNames.js";
-import { getOrCreatePortalRoot as _ } from "../../utils/portalRoot.js";
-const $ = -1e3, r = 15, J = (u) => {
-  const {
-    show: o = !1,
-    onClose: l,
-    width: w,
-    height: h,
-    title: c,
-    detach: s = !1,
-    detachOffset: A = r,
-    hasBackdrop: x = !1,
-    showCloseButton: N = !0,
-    showMaximizeButton: y = !1,
-    onHeightChange: C = () => {
-    },
-    bodyRef: v,
-    bodyClassName: d,
-    className: m,
-    children: k,
-    onBackdropClick: B = () => {
-    },
-    ...F
-  } = u, [t, p] = g(o), [i, S] = g(!1);
-  M(() => p(o), [o]);
-  const O = _(), b = () => {
-    const a = !t;
-    V(l) ? l(a) : p(a);
-  }, H = () => {
-    B(), b();
-  }, P = () => {
-    S(!i), C();
-  }, T = f(
-    "bottom-sheet",
-    "position-fixed left-0",
-    !h && !i && "height-auto",
-    "bg-white",
-    "shadow-hard",
-    s ? "rounded" : "rounded-top-left rounded-top-right",
-    m && m
-  ), z = f("bottom-sheet-body", "height-100pct", d && d), E = i ? window.innerHeight : h;
-  return j(
-    /* @__PURE__ */ n(I, { children: [
-      /* @__PURE__ */ n(
-        R.div,
-        {
-          ...F,
-          className: T,
-          style: {
-            width: w,
-            maxWidth: s ? `calc(100% - ${r * 2}px)` : "100%",
-            margin: s ? `${r}px` : 0
-          },
-          initial: { opacity: 0 },
-          animate: {
-            opacity: t ? 1 : 0,
-            y: 0,
-            bottom: t ? 0 : $,
-            height: t ? E : 0
-          },
-          children: [
-            /* @__PURE__ */ n("div", { className: "bottom-sheet-header", children: [
-              c && /* @__PURE__ */ e(
-                "div",
-                {
-                  className: "bottom-sheet-title display-flex justify-content-between padding-15 border border-top-none border-left-none border-right-none border-color-lighter",
-                  children: /* @__PURE__ */ e("div", { className: "text-size-18", children: c })
-                }
-              ),
-              N && /* @__PURE__ */ e("div", { className: "bottom-sheet-close position-absolute top-10 right-10", children: /* @__PURE__ */ e("button", { type: "button", className: "btn btn-muted btn-sm btn-icon-only", onClick: b, children: /* @__PURE__ */ e("span", { className: "rioglyph rioglyph-remove" }) }) }),
-              y && /* @__PURE__ */ e(
-                "div",
-                {
-                  className: "bottom-sheet-maximize height-30 position-absolute top-5 left-50pct translate-x-50 cursor-pointer",
-                  onClick: P,
-                  children: /* @__PURE__ */ e("div", { className: "height-5 width-40 rounded bg-lighter" })
-                }
-              )
-            ] }),
-            /* @__PURE__ */ e("div", { className: z, ref: v, children: t && k })
-          ]
-        }
-      ),
-      x && t && /* @__PURE__ */ e("div", { className: "bottom-sheet-backdrop", onClick: H })
-    ] }),
-    O
-  );
+import e from "../../utils/classNames.js";
+import { getOrCreatePortalRoot as t } from "../../utils/portalRoot.js";
+import { useEffect as n, useState as r } from "react";
+import { isFunction as i } from "es-toolkit/predicate";
+import { motion as a } from "motion/react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { createPortal as l } from "react-dom";
+//#region src/components/bottomSheet/BottomSheet.tsx
+var u = -1e3, d = 15, f = (f) => {
+	let { show: p = !1, onClose: m, width: h, height: g, title: _, detach: v = !1, detachOffset: y = d, hasBackdrop: b = !1, closeOnBackdropClick: x = !0, showCloseButton: S = !0, showMaximizeButton: C = !1, onHeightChange: w = () => {}, bodyRef: T, bodyClassName: E, className: D, children: O, onBackdropClick: k, ...A } = f, [j, M] = r(p), [N, P] = r(!1);
+	n(() => M(p), [p]);
+	let F = t(), I = () => {
+		let e = !j;
+		i(m) ? m(e) : M(e);
+	}, L = (e) => {
+		k?.(e), x && I();
+	}, R = () => {
+		P(!N), w();
+	}, z = e("bottom-sheet", "position-fixed left-0", !g && !N && "height-auto", "bg-white", "shadow-hard", v ? "rounded" : "rounded-top-left rounded-top-right", D && D), B = e("bottom-sheet-body", "height-100pct", E && E), V = N ? window.innerHeight : g;
+	return l(/* @__PURE__ */ c(o, { children: [/* @__PURE__ */ c(a.div, {
+		...A,
+		className: z,
+		style: {
+			width: h,
+			maxWidth: v ? `calc(100% - ${d * 2}px)` : "100%",
+			margin: v ? `${d}px` : 0
+		},
+		initial: { opacity: 0 },
+		animate: {
+			opacity: +!!j,
+			y: 0,
+			bottom: j ? 0 : u,
+			height: j ? V : 0
+		},
+		children: [/* @__PURE__ */ c("div", {
+			className: "bottom-sheet-header",
+			children: [
+				_ && /* @__PURE__ */ s("div", {
+					className: "bottom-sheet-title display-flex justify-content-between padding-15 border border-top-none border-left-none border-right-none border-color-lighter",
+					children: /* @__PURE__ */ s("div", {
+						className: "text-size-18",
+						children: _
+					})
+				}),
+				S && /* @__PURE__ */ s("div", {
+					className: "bottom-sheet-close position-absolute top-10 right-10",
+					children: /* @__PURE__ */ s("button", {
+						type: "button",
+						className: "btn btn-muted btn-sm btn-icon-only",
+						onClick: I,
+						children: /* @__PURE__ */ s("span", { className: "uikit-icon icon-remove" })
+					})
+				}),
+				C && /* @__PURE__ */ s("div", {
+					className: "bottom-sheet-maximize height-30 position-absolute top-5 left-50pct translate-x-50 cursor-pointer",
+					onClick: R,
+					children: /* @__PURE__ */ s("div", { className: "height-5 width-40 rounded bg-lighter" })
+				})
+			]
+		}), /* @__PURE__ */ s("div", {
+			className: B,
+			ref: T,
+			children: j && O
+		})]
+	}), b && j && /* @__PURE__ */ s("div", {
+		className: "bottom-sheet-backdrop",
+		onClick: L
+	})] }), F);
 };
-export {
-  J as default
-};
-//# sourceMappingURL=BottomSheet.js.map
+//#endregion
+export { f as default };
+
+//# sourceMappingURL=BottomSheet.js.map

package/components/bottomSheet/BottomSheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.js","sources":["../../../src/components/bottomSheet/BottomSheet.tsx"],"sourcesContent":["import {\n    type MutableRefObject,\n    type PropsWithChildren,\n    type ReactElement,\n    type ReactNode,\n    useEffect,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { motion } from 'motion/react';\nimport { isFunction } from 'es-toolkit/predicate';\n\nimport classNames from '../../utils/classNames';\nimport { getOrCreatePortalRoot } from '../../utils/portalRoot';\n\nconst OFFSET_POSITION = -1000;\nconst DEFAULT_OFFSET_PX = 15;\n\nexport type BottomSheetProps = {\n    /**\n     * Set the visibility of the bottom sheet. The component is already mounted and just moved offscreen.\n     *\n     * @default false\n     */\n    show: boolean;\n\n    /**\n     * Callback for when the sheet closes.\n     */\n    onClose?: (isShown: boolean) => void;\n\n    /**\n     * The width of the bottom sheet. This is useful for desktop when not using the entire screen width.\n     * When no width is given it will take the width of the content and maximum `100%` of the screen.\n     * So it this case you might want to apply a `max-width-xxx` via `className` to control it better.\n     */\n    width?: number | string;\n\n    /**\n     * The height of the bottom sheet. If no height is given, the height is automatically\n     * calculated from the content.\n     */\n    height?: number | string;\n\n    /**\n     * The title content shown in the header. If no title is given, the bottom sheet header is not shown.\n     */\n    title?: string | ReactNode;\n\n    /**\n     * Defines whether or not the close button is shown.\n     * @default true\n     */\n    showCloseButton?: boolean;\n\n    /**\n     * Defines whether or not the maximize button in the header is shown.\n     * @default false\n     */\n    showMaximizeButton?: boolean;\n\n    /**\n     * The callback function triggered when the maximize button is clicked and the height changes.\n     *\n     * @default () => {}\n     */\n    onHeightChange?: VoidFunction;\n\n    /**\n     * Set to `true` to detach the bottom sheet from the left side and the bottom and create a little offset.\n     *\n     * @default false\n     */\n    detach?: boolean;\n\n    /**\n     * Defines the amount of pixels for the sheet.\n     *\n     * @default 15\n     */\n    detachOffset?: number;\n\n    /**\n     * Set to `true` to render a modal like backdrop to emphasize the bottom sheet.\n     *\n     * @default false\n     */\n    hasBackdrop?: boolean;\n\n    /**\n     * Callback function triggered when the backdrop is clicked. Usually used to close the bottom sheet.\n     *\n     * @default () => {}\n     */\n    onBackdropClick?: VoidFunction;\n\n    /**\n     * A react ref added to the bottom sheet body.\n     */\n    bodyRef?: MutableRefObject<HTMLDivElement | null>;\n\n    /**\n     * Additional classes to be set on the body element.\n     */\n    bodyClassName?: string;\n\n    /**\n     * Additional classes to be set on the wrapping element.\n     */\n    className?: string;\n};\n\nconst BottomSheet = (props: BottomSheetProps & PropsWithChildren) => {\n    const {\n        show = false,\n        onClose,\n        width,\n        height,\n        title,\n        detach = false,\n        detachOffset = DEFAULT_OFFSET_PX,\n        hasBackdrop = false,\n        showCloseButton = true,\n        showMaximizeButton = false,\n        onHeightChange = () => {},\n        bodyRef,\n        bodyClassName,\n        className,\n        children,\n        onBackdropClick = () => {},\n        ...remainingProps\n    } = props;\n\n    const [isShown, setIsShown] = useState(show);\n    const [isMaxHeight, setIsMaxHeight] = useState(false);\n\n    useEffect(() => setIsShown(show), [show]);\n\n    const modalRoot = getOrCreatePortalRoot();\n\n    const handleToggle = () => {\n        const newValue = !isShown;\n        if (isFunction(onClose)) {\n            onClose(newValue);\n        } else {\n            setIsShown(newValue);\n        }\n    };\n\n    const handleBackdropClick = () => {\n        onBackdropClick();\n        handleToggle();\n    };\n\n    const handleMaximize = () => {\n        const newValue = !isMaxHeight;\n        setIsMaxHeight(newValue);\n        onHeightChange();\n    };\n\n    const sheetClasses = classNames(\n        'bottom-sheet',\n        'position-fixed left-0',\n        !height && !isMaxHeight && 'height-auto',\n        'bg-white',\n        'shadow-hard',\n        detach ? 'rounded' : 'rounded-top-left rounded-top-right',\n        className && className\n    );\n\n    const sheetBodyClasses = classNames('bottom-sheet-body', 'height-100pct', bodyClassName && bodyClassName);\n\n    const sheetHeight = isMaxHeight ? window.innerHeight : height;\n\n    // Note: we always have to kep the body element in the DOM as there might be a ref assigned to it.\n    // Unmounting it will lead to losing the reference and breaking the functionality that is implemented on that ref.\n    // That is the reason why there is no \"AnimatePresence\" with an \"exit\" animation here.\n    // Instead, we change the \"animate\" values.\n\n    return createPortal(\n        <>\n            <motion.div\n                {...remainingProps}\n                className={sheetClasses}\n                style={{\n                    width,\n                    maxWidth: detach ? `calc(100% - ${DEFAULT_OFFSET_PX * 2}px)` : '100%',\n                    margin: detach ? `${DEFAULT_OFFSET_PX}px` : 0,\n                }}\n                initial={{ opacity: 0 }}\n                animate={{\n                    opacity: isShown ? 1 : 0,\n                    y: 0,\n                    bottom: isShown ? 0 : OFFSET_POSITION,\n                    height: isShown ? sheetHeight : 0,\n                }}\n            >\n                <div className='bottom-sheet-header'>\n                    {title && (\n                        <div\n                            className={\n                                'bottom-sheet-title display-flex justify-content-between padding-15 ' +\n                                'border border-top-none border-left-none border-right-none border-color-lighter'\n                            }\n                        >\n                            <div className='text-size-18'>{title}</div>\n                        </div>\n                    )}\n                    {showCloseButton && (\n                        <div className='bottom-sheet-close position-absolute top-10 right-10'>\n                            <button type='button' className='btn btn-muted btn-sm btn-icon-only' onClick={handleToggle}>\n                                <span className='rioglyph rioglyph-remove' />\n                            </button>\n                        </div>\n                    )}\n                    {showMaximizeButton && (\n                        <div\n                            className={\n                                'bottom-sheet-maximize height-30 ' +\n                                'position-absolute top-5 left-50pct translate-x-50 cursor-pointer'\n                            }\n                            onClick={handleMaximize}\n                        >\n                            <div className='height-5 width-40 rounded bg-lighter' />\n                        </div>\n                    )}\n                </div>\n                <div className={sheetBodyClasses} ref={bodyRef}>\n                    {isShown && children}\n                </div>\n            </motion.div>\n\n            {hasBackdrop && isShown && <div className='bottom-sheet-backdrop' onClick={handleBackdropClick} />}\n        </>,\n        modalRoot\n    ) as ReactElement;\n};\n\nexport default BottomSheet;\n"],"names":["OFFSET_POSITION","DEFAULT_OFFSET_PX","BottomSheet","props","show","onClose","width","height","title","detach","detachOffset","hasBackdrop","showCloseButton","showMaximizeButton","onHeightChange","bodyRef","bodyClassName","className","children","onBackdropClick","remainingProps","isShown","setIsShown","useState","isMaxHeight","setIsMaxHeight","useEffect","modalRoot","getOrCreatePortalRoot","handleToggle","newValue","isFunction","handleBackdropClick","handleMaximize","sheetClasses","classNames","sheetBodyClasses","sheetHeight","createPortal","jsxs","Fragment","motion","jsx"],"mappings":"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"}
+{"version":3,"file":"BottomSheet.js","names":[],"sources":["../../../src/components/bottomSheet/BottomSheet.tsx"],"sourcesContent":["import {\n    type MutableRefObject,\n    type MouseEvent,\n    type PropsWithChildren,\n    type ReactElement,\n    type ReactNode,\n    useEffect,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { motion } from 'motion/react';\nimport { isFunction } from 'es-toolkit/predicate';\n\nimport classNames from '../../utils/classNames';\nimport { getOrCreatePortalRoot } from '../../utils/portalRoot';\n\nconst OFFSET_POSITION = -1000;\nconst DEFAULT_OFFSET_PX = 15;\n\nexport type BottomSheetProps = {\n    /**\n     * Set the visibility of the bottom sheet. The component is already mounted and just moved offscreen.\n     *\n     * @default false\n     */\n    show: boolean;\n\n    /**\n     * Callback for when the sheet closes.\n     */\n    onClose?: (isShown: boolean) => void;\n\n    /**\n     * The width of the bottom sheet. This is useful for desktop when not using the entire screen width.\n     * When no width is given it will take the width of the content and maximum `100%` of the screen.\n     * So it this case you might want to apply a `max-width-xxx` via `className` to control it better.\n     */\n    width?: number | string;\n\n    /**\n     * The height of the bottom sheet. If no height is given, the height is automatically\n     * calculated from the content.\n     */\n    height?: number | string;\n\n    /**\n     * The title content shown in the header. If no title is given, the bottom sheet header is not shown.\n     */\n    title?: string | ReactNode;\n\n    /**\n     * Defines whether or not the close button is shown.\n     * @default true\n     */\n    showCloseButton?: boolean;\n\n    /**\n     * Defines whether or not the maximize button in the header is shown.\n     * @default false\n     */\n    showMaximizeButton?: boolean;\n\n    /**\n     * The callback function triggered when the maximize button is clicked and the height changes.\n     *\n     * @default () => {}\n     */\n    onHeightChange?: VoidFunction;\n\n    /**\n     * Set to `true` to detach the bottom sheet from the left side and the bottom and create a little offset.\n     *\n     * @default false\n     */\n    detach?: boolean;\n\n    /**\n     * Defines the amount of pixels for the sheet.\n     *\n     * @default 15\n     */\n    detachOffset?: number;\n\n    /**\n     * Set to `true` to render a modal like backdrop to emphasize the bottom sheet.\n     *\n     * @default false\n     */\n    hasBackdrop?: boolean;\n\n    /**\n     * Defines whether or not the bottom sheet closes when the backdrop is clicked.\n     *\n     * @default true\n     */\n    closeOnBackdropClick?: boolean;\n\n    /**\n     * Callback function triggered when the backdrop is clicked.\n     *\n     * @default undefined\n     */\n    onBackdropClick?: (event: MouseEvent<HTMLDivElement>) => void;\n\n    /**\n     * A react ref added to the bottom sheet body.\n     */\n    bodyRef?: MutableRefObject<HTMLDivElement | null>;\n\n    /**\n     * Additional classes to be set on the body element.\n     */\n    bodyClassName?: string;\n\n    /**\n     * Additional classes to be set on the wrapping element.\n     */\n    className?: string;\n};\n\nconst BottomSheet = (props: BottomSheetProps & PropsWithChildren) => {\n    const {\n        show = false,\n        onClose,\n        width,\n        height,\n        title,\n        detach = false,\n        detachOffset = DEFAULT_OFFSET_PX,\n        hasBackdrop = false,\n        closeOnBackdropClick = true,\n        showCloseButton = true,\n        showMaximizeButton = false,\n        onHeightChange = () => {},\n        bodyRef,\n        bodyClassName,\n        className,\n        children,\n        onBackdropClick,\n        ...remainingProps\n    } = props;\n\n    const [isShown, setIsShown] = useState(show);\n    const [isMaxHeight, setIsMaxHeight] = useState(false);\n\n    useEffect(() => setIsShown(show), [show]);\n\n    const modalRoot = getOrCreatePortalRoot();\n\n    const handleToggle = () => {\n        const newValue = !isShown;\n        if (isFunction(onClose)) {\n            onClose(newValue);\n        } else {\n            setIsShown(newValue);\n        }\n    };\n\n    const handleBackdropClick = (event: MouseEvent<HTMLDivElement>) => {\n        onBackdropClick?.(event);\n        if (closeOnBackdropClick) {\n            handleToggle();\n        }\n    };\n\n    const handleMaximize = () => {\n        const newValue = !isMaxHeight;\n        setIsMaxHeight(newValue);\n        onHeightChange();\n    };\n\n    const sheetClasses = classNames(\n        'bottom-sheet',\n        'position-fixed left-0',\n        !height && !isMaxHeight && 'height-auto',\n        'bg-white',\n        'shadow-hard',\n        detach ? 'rounded' : 'rounded-top-left rounded-top-right',\n        className && className\n    );\n\n    const sheetBodyClasses = classNames('bottom-sheet-body', 'height-100pct', bodyClassName && bodyClassName);\n\n    const sheetHeight = isMaxHeight ? window.innerHeight : height;\n\n    // Note: we always have to kep the body element in the DOM as there might be a ref assigned to it.\n    // Unmounting it will lead to losing the reference and breaking the functionality that is implemented on that ref.\n    // That is the reason why there is no \"AnimatePresence\" with an \"exit\" animation here.\n    // Instead, we change the \"animate\" values.\n\n    return createPortal(\n        <>\n            <motion.div\n                {...remainingProps}\n                className={sheetClasses}\n                style={{\n                    width,\n                    maxWidth: detach ? `calc(100% - ${DEFAULT_OFFSET_PX * 2}px)` : '100%',\n                    margin: detach ? `${DEFAULT_OFFSET_PX}px` : 0,\n                }}\n                initial={{ opacity: 0 }}\n                animate={{\n                    opacity: isShown ? 1 : 0,\n                    y: 0,\n                    bottom: isShown ? 0 : OFFSET_POSITION,\n                    height: isShown ? sheetHeight : 0,\n                }}\n            >\n                <div className='bottom-sheet-header'>\n                    {title && (\n                        <div\n                            className={\n                                'bottom-sheet-title display-flex justify-content-between padding-15 ' +\n                                'border border-top-none border-left-none border-right-none border-color-lighter'\n                            }\n                        >\n                            <div className='text-size-18'>{title}</div>\n                        </div>\n                    )}\n                    {showCloseButton && (\n                        <div className='bottom-sheet-close position-absolute top-10 right-10'>\n                            <button type='button' className='btn btn-muted btn-sm btn-icon-only' onClick={handleToggle}>\n                                <span className='uikit-icon icon-remove' />\n                            </button>\n                        </div>\n                    )}\n                    {showMaximizeButton && (\n                        <div\n                            className={\n                                'bottom-sheet-maximize height-30 ' +\n                                'position-absolute top-5 left-50pct translate-x-50 cursor-pointer'\n                            }\n                            onClick={handleMaximize}\n                        >\n                            <div className='height-5 width-40 rounded bg-lighter' />\n                        </div>\n                    )}\n                </div>\n                <div className={sheetBodyClasses} ref={bodyRef}>\n                    {isShown && children}\n                </div>\n            </motion.div>\n\n            {hasBackdrop && isShown && <div className='bottom-sheet-backdrop' onClick={handleBackdropClick} />}\n        </>,\n        modalRoot\n    ) as ReactElement;\n};\n\nexport default BottomSheet;\n"],"mappings":";;;;;;;;AAgBA,IAAM,IAAkB,MAClB,IAAoB,IAuGpB,KAAe,MAAgD;CACjE,IAAM,EACF,UAAO,IACP,YACA,UACA,WACA,UACA,YAAS,IACT,kBAAe,GACf,iBAAc,IACd,0BAAuB,IACvB,qBAAkB,IAClB,wBAAqB,IACrB,0BAAuB,CAAC,GACxB,YACA,kBACA,cACA,aACA,oBACA,GAAG,MACH,GAEE,CAAC,GAAS,KAAc,EAAS,CAAI,GACrC,CAAC,GAAa,KAAkB,EAAS,EAAK;CAEpD,QAAgB,EAAW,CAAI,GAAG,CAAC,CAAI,CAAC;CAExC,IAAM,IAAY,EAAsB,GAElC,UAAqB;EACvB,IAAM,IAAW,CAAC;EAClB,AAAI,EAAW,CAAO,IAClB,EAAQ,CAAQ,IAEhB,EAAW,CAAQ;CAE3B,GAEM,KAAuB,MAAsC;EAE/D,AADA,IAAkB,CAAK,GACnB,KACA,EAAa;CAErB,GAEM,UAAuB;EAGzB,AADA,EAAe,CADG,CACK,GACvB,EAAe;CACnB,GAEM,IAAe,EACjB,gBACA,yBACA,CAAC,KAAU,CAAC,KAAe,eAC3B,YACA,eACA,IAAS,YAAY,sCACrB,KAAa,CACjB,GAEM,IAAmB,EAAW,qBAAqB,iBAAiB,KAAiB,CAAa,GAElG,IAAc,IAAc,OAAO,cAAc;CAOvD,OAAO,EACH,kBAAA,GAAA,EAAA,UAAA,CACI,kBAAC,EAAO,KAAR;EACI,GAAI;EACJ,WAAW;EACX,OAAO;GACH;GACA,UAAU,IAAS,eAAe,IAAoB,EAAE,OAAO;GAC/D,QAAQ,IAAS,GAAG,EAAkB,MAAM;EAChD;EACA,SAAS,EAAE,SAAS,EAAE;EACtB,SAAS;GACL,SAAS;GACT,GAAG;GACH,QAAQ,IAAU,IAAI;GACtB,QAAQ,IAAU,IAAc;EACpC;YAdJ,CAgBI,kBAAC,OAAD;GAAK,WAAU;aAAf;IACK,KACG,kBAAC,OAAD;KACI,WACI;eAIJ,kBAAC,OAAD;MAAK,WAAU;gBAAgB;KAAW,CAAA;IACzC,CAAA;IAER,KACG,kBAAC,OAAD;KAAK,WAAU;eACX,kBAAC,UAAD;MAAQ,MAAK;MAAS,WAAU;MAAqC,SAAS;gBAC1E,kBAAC,QAAD,EAAM,WAAU,yBAA0B,CAAA;KACtC,CAAA;IACP,CAAA;IAER,KACG,kBAAC,OAAD;KACI,WACI;KAGJ,SAAS;eAET,kBAAC,OAAD,EAAK,WAAU,uCAAwC,CAAA;IACtD,CAAA;GAER;MACL,kBAAC,OAAD;GAAK,WAAW;GAAkB,KAAK;aAClC,KAAW;EACX,CAAA,CACG;KAEX,KAAe,KAAW,kBAAC,OAAD;EAAK,WAAU;EAAwB,SAAS;CAAsB,CAAA,CACnG,EAAA,CAAA,GACF,CACJ;AACJ"}

package/components/bottomSheet/TimedBottomSheet.js

@@ -1,51 +1,36 @@
-import { jsx as i } from "react/jsx-runtime";
-import { useState as l, useEffect as D } from "react";
-import { noop as H } from "es-toolkit/function";
-import U from "./BottomSheet.js";
-import m from "../../hooks/useTimeout.js";
-import { useLocalStorage as y } from "../../hooks/useStorage.js";
-const L = 0, N = 36e5, _ = (t) => `${t.charAt(0).toUpperCase()}${t.slice(1)}`.replaceAll(" ", ""), b = (t) => {
-  const {
-    dismissed: e = !1,
-    featureName: n,
-    showAfter: s = L,
-    hideAfter: d = N,
-    alwaysOn: f = !1,
-    showCloseButton: c = !0,
-    width: h,
-    cleanupLocalStorage: r = !1,
-    onClose: u = H,
-    bodyClassName: p = "padding-25 margin-right-25",
-    localStoragePrefix: S = "",
-    className: B,
-    children: g,
-    ...A
-  } = t, [w, o] = l(!1), [C, a, E] = y(
-    `${S}hide${_(n)}`,
-    !1
-  ), [F, T] = l(e);
-  return e && e !== F && (T(e), a(!0), o(!1)), m(() => {
-    !e && !C && !r && o(!0);
-  }, s), m(() => o(!!f), s + d), D(() => {
-    r && E();
-  }, []), /* @__PURE__ */ i("div", { ...A, children: /* @__PURE__ */ i(
-    U,
-    {
-      show: w,
-      width: h,
-      detach: !0,
-      showCloseButton: c,
-      onClose: () => {
-        o(!1), a(!0), u();
-      },
-      className: B,
-      bodyClassName: p,
-      children: g
-    }
-  ) });
+import e from "../../hooks/useTimeout.js";
+import { useLocalStorage as t } from "../../hooks/useStorage.js";
+import "../../useLocalStorage.js";
+import n from "./BottomSheet.js";
+import { useEffect as r, useState as i } from "react";
+import { noop as a } from "es-toolkit/function";
+import { jsx as o } from "react/jsx-runtime";
+//#region src/components/bottomSheet/TimedBottomSheet.tsx
+var s = 0, c = 36e5, l = (e) => `${e.charAt(0).toUpperCase()}${e.slice(1)}`.replaceAll(" ", ""), u = (u) => {
+	let { dismissed: d = !1, featureName: f, showAfter: p = s, hideAfter: m = c, alwaysOn: h = !1, showCloseButton: g = !0, width: _, cleanupLocalStorage: v = !1, onClose: y = a, bodyClassName: b = "padding-25 margin-right-25", localStoragePrefix: x = "", className: S, children: C, ...w } = u, [T, E] = i(!1), [D, O, k] = t(`${x}hide${l(f)}`, !1), [A, j] = i(d);
+	d && d !== A && (j(d), O(!0), E(!1)), e(() => {
+		!d && !D && !v && E(!0);
+	}, p), e(() => E(!!h), p + m), r(() => {
+		v && k();
+	}, []);
+	let M = () => {
+		E(!1), O(!0), y();
+	};
+	return /* @__PURE__ */ o("div", {
+		...w,
+		children: /* @__PURE__ */ o(n, {
+			show: T,
+			width: _,
+			detach: !0,
+			showCloseButton: g,
+			onClose: M,
+			className: S,
+			bodyClassName: b,
+			children: C
+		})
+	});
 };
-export {
-  b as TimedBottomSheet,
-  b as default
-};
-//# sourceMappingURL=TimedBottomSheet.js.map
+//#endregion
+export { u as TimedBottomSheet, u as default };
+
+//# sourceMappingURL=TimedBottomSheet.js.map

package/components/bottomSheet/TimedBottomSheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimedBottomSheet.js","sources":["../../../src/components/bottomSheet/TimedBottomSheet.tsx"],"sourcesContent":["import { useState, useEffect, type PropsWithChildren } from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport BottomSheet from './BottomSheet';\nimport useTimeout from '../../hooks/useTimeout';\nimport useLocalStorage from '../../useLocalStorage';\n\nconst DEFAULT_SHOW_AFTER = 0; // immediately after mount\nconst DEFAULT_HIDE_AFTER = 3_600_000; // after 1 hour\n\n// Features:\n// [x] show delayed\n// [x] option to hide automatically after x\n// [x] store closed user state in localStorage\n// [x] don't show when user has clicked to hide - per feature\n// [x] Cleanup localStorage feature\n// [x] hide on click inside of content (button or link, etc.) - control from outside\n// [-] GA tracking of user hide click - should be done outside\n\ntype TimedBottomSheetProps = {\n    /**\n     * The `dismissed` flag can be used to tell this component that the user has clicked on the content\n     * of the component like a button or a link. In this case, the bottom sheet will store a flag in the\n     * localStorage to hide the bottom sheet for the next time and it will close the sheet right away.\n     *\n     * @default false\n     */\n    dismissed?: boolean;\n\n    /**\n     * The `featureName` prop is used to name the localStorage flag that is used to control the visibility.\n     * It should be unique to avoid conflicts with other timed bottom sheets.\n     */\n    featureName: string;\n\n    /**\n     * Defines the time in milliseconds when the bottom sheet shall be shown. Default value is 0 to show it right away.\n     *\n     * @default 0\n     */\n    showAfter?: number;\n\n    /**\n     * Defines the time in milliseconds when the bottom sheet hides itself automatically. Default value is 3_600_000\n     * to hide it after 1 hour. In this case, the localStorage flag is not set and the bottom sheet will be shown\n     * on the next page load.\n     *\n     * @default 3_600_000\n     */\n    hideAfter?: number;\n\n    /**\n     * With this enabled, the BottomSheet will not hide automatically.\n     *\n     * @default false\n     */\n    alwaysOn?: boolean;\n\n    /**\n     * Enables or disabled the close button.\n     *\n     * @default true\n     */\n    showCloseButton?: boolean;\n\n    /**\n     * Optional width of the bottom sheet. Alternatively, you can set a `max-width-xxx` via className instead.\n     */\n    width?: number;\n\n    /**\n     * Flag to allow to remove the localStorage flag again once the component is not needed anymore.\n     *\n     * @default false\n     */\n    cleanupLocalStorage?: boolean;\n\n    /**\n     * A prefix that will be used for the local storage flag to store whether the bottom sheet should be hidden.\n     *\n     * Use this prefix for your service name for instance.\n     */\n    localStoragePrefix?: string;\n\n    /**\n     * Callback function that gets triggered when the user closed the bottom sheet with the close button.\n     *\n     * @default () => {}\n     * @returns void\n     */\n    onClose?: () => void;\n\n    /**\n     * Optional className to be set on the body.\n     *\n     * @default 'padding-25 margin-right-25'\n     */\n    bodyClassName?: string;\n\n    /**\n     * Optional className to be set on the component. Use this to define a max-width value.\n     */\n    className?: string;\n};\n\nconst sanitizeFeatureName = (value: string) => `${value.charAt(0).toUpperCase()}${value.slice(1)}`.replaceAll(' ', '');\n\n/**\n * A wrapper component for the BottomSheet that allows to control it's visibility via timers and to use\n * the localStorage to save user interaction.\n *\n * Don't forget to cleanup the localStorage for the user when removing a feature\n * by setting \"cleanupLocalStorage\" to \"true\" and deploy it like this.\n * The cleanup will remove the localStorage flag on mount and will not show the bottom sheet.\n *\n * @example\n    const [isDismissed, setIsDismissed] = useState(false);\n\n    const handleClose = () => { // If needed trigger Google Analytics here };\n\n    return (\n        <TimedBottomSheet\n            dismissed={isDismissed}\n            featureName='dummyBottomSheet'\n            showAfter={1_000}\n            hideAfter={15_000}\n            className='max-width-500'\n            onClose={handleClose}\n        >\n            <div className='display-flex align-items-center gap-20'>\n                Lorem ipsum dolor sit amet\n                <Button bsStyle={Button.PRIMARY} onClick={() => setIsDismissed(true)}>\n                    Got it\n                </Button>\n            </div>\n        </TimedBottomSheet>\n    );\n */\nexport const TimedBottomSheet = (props: PropsWithChildren<TimedBottomSheetProps>) => {\n    const {\n        dismissed = false,\n        featureName,\n        showAfter = DEFAULT_SHOW_AFTER,\n        hideAfter = DEFAULT_HIDE_AFTER,\n        alwaysOn = false,\n        showCloseButton = true,\n        width,\n        cleanupLocalStorage = false,\n        onClose = noop,\n        bodyClassName = 'padding-25 margin-right-25',\n        localStoragePrefix = '',\n        className,\n        children,\n        ...remainingProps\n    } = props;\n\n    const [showBottomSheet, setShowBottomSheet] = useState(false);\n\n    const [isHiddenByUser, setIsHiddenByUser, removeIsHiddenFlag] = useLocalStorage(\n        `${localStoragePrefix}hide${sanitizeFeatureName(featureName)}`,\n        false\n    );\n\n    // In case the visibility is controlled by the outside, means the user clicked on the\n    // content of the bottom sheet, close the sheet and set the localStorage flag for not\n    // showing it again\n    const [prevDismissed, setPrevDismissed] = useState(dismissed);\n    if (dismissed && dismissed !== prevDismissed) {\n        setPrevDismissed(dismissed);\n        setIsHiddenByUser(true);\n        setShowBottomSheet(false);\n    }\n\n    // Show the bottom sheet automatically after a given amount of time\n    useTimeout(() => {\n        if (!dismissed && !isHiddenByUser && !cleanupLocalStorage) {\n            setShowBottomSheet(true);\n        }\n    }, showAfter);\n\n    // Hide the bottom sheet automatically after a given amount of time\n    useTimeout(() => setShowBottomSheet(alwaysOn ? true : false), showAfter + hideAfter);\n\n    // Cleanup functionality. The cleanup will remove the localStorage flag on mount\n    // and will not show the bottom sheet.\n    useEffect(() => {\n        if (cleanupLocalStorage) {\n            removeIsHiddenFlag();\n        }\n    }, []);\n\n    const handleCloseBottomSheet = () => {\n        setShowBottomSheet(false);\n        setIsHiddenByUser(true);\n        onClose();\n    };\n\n    return (\n        <div {...remainingProps}>\n            <BottomSheet\n                show={showBottomSheet}\n                width={width}\n                detach\n                showCloseButton={showCloseButton}\n                onClose={handleCloseBottomSheet}\n                className={className}\n                bodyClassName={bodyClassName}\n            >\n                {children}\n            </BottomSheet>\n        </div>\n    );\n};\n\nexport default TimedBottomSheet;\n"],"names":["DEFAULT_SHOW_AFTER","DEFAULT_HIDE_AFTER","sanitizeFeatureName","value","TimedBottomSheet","props","dismissed","featureName","showAfter","hideAfter","alwaysOn","showCloseButton","width","cleanupLocalStorage","onClose","noop","bodyClassName","localStoragePrefix","className","children","remainingProps","showBottomSheet","setShowBottomSheet","useState","isHiddenByUser","setIsHiddenByUser","removeIsHiddenFlag","useLocalStorage","prevDismissed","setPrevDismissed","useTimeout","useEffect","jsx","BottomSheet"],"mappings":";;;;;;AAOA,MAAMA,IAAqB,GACrBC,IAAqB,MAiGrBC,IAAsB,CAACC,MAAkB,GAAGA,EAAM,OAAO,CAAC,EAAE,YAAA,CAAa,GAAGA,EAAM,MAAM,CAAC,CAAC,GAAG,WAAW,KAAK,EAAE,GAiCxGC,IAAmB,CAACC,MAAoD;AACjF,QAAM;AAAA,IACF,WAAAC,IAAY;AAAA,IACZ,aAAAC;AAAA,IACA,WAAAC,IAAYR;AAAA,IACZ,WAAAS,IAAYR;AAAA,IACZ,UAAAS,IAAW;AAAA,IACX,iBAAAC,IAAkB;AAAA,IAClB,OAAAC;AAAA,IACA,qBAAAC,IAAsB;AAAA,IACtB,SAAAC,IAAUC;AAAA,IACV,eAAAC,IAAgB;AAAA,IAChB,oBAAAC,IAAqB;AAAA,IACrB,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHf,GAEE,CAACgB,GAAiBC,CAAkB,IAAIC,EAAS,EAAK,GAEtD,CAACC,GAAgBC,GAAmBC,CAAkB,IAAIC;AAAA,IAC5D,GAAGV,CAAkB,OAAOf,EAAoBK,CAAW,CAAC;AAAA,IAC5D;AAAA,EAAA,GAME,CAACqB,GAAeC,CAAgB,IAAIN,EAASjB,CAAS;AAC5D,SAAIA,KAAaA,MAAcsB,MAC3BC,EAAiBvB,CAAS,GAC1BmB,EAAkB,EAAI,GACtBH,EAAmB,EAAK,IAI5BQ,EAAW,MAAM;AACb,IAAI,CAACxB,KAAa,CAACkB,KAAkB,CAACX,KAClCS,EAAmB,EAAI;AAAA,EAE/B,GAAGd,CAAS,GAGZsB,EAAW,MAAMR,EAAmB,EAAAZ,CAAuB,GAAGF,IAAYC,CAAS,GAInFsB,EAAU,MAAM;AACZ,IAAIlB,KACAa,EAAA;AAAA,EAER,GAAG,CAAA,CAAE,GASD,gBAAAM,EAAC,OAAA,EAAK,GAAGZ,GACL,UAAA,gBAAAY;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,MAAMZ;AAAA,MACN,OAAAT;AAAA,MACA,QAAM;AAAA,MACN,iBAAAD;AAAA,MACA,SAbmB,MAAM;AACjC,QAAAW,EAAmB,EAAK,GACxBG,EAAkB,EAAI,GACtBX,EAAA;AAAA,MACJ;AAAA,MAUY,WAAAI;AAAA,MACA,eAAAF;AAAA,MAEC,UAAAG;AAAA,IAAA;AAAA,EAAA,GAET;AAER;"}
+{"version":3,"file":"TimedBottomSheet.js","names":[],"sources":["../../../src/components/bottomSheet/TimedBottomSheet.tsx"],"sourcesContent":["import { useState, useEffect, type PropsWithChildren } from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport BottomSheet from './BottomSheet';\nimport useTimeout from '../../hooks/useTimeout';\nimport useLocalStorage from '../../useLocalStorage';\n\nconst DEFAULT_SHOW_AFTER = 0; // immediately after mount\nconst DEFAULT_HIDE_AFTER = 3_600_000; // after 1 hour\n\n// Features:\n// [x] show delayed\n// [x] option to hide automatically after x\n// [x] store closed user state in localStorage\n// [x] don't show when user has clicked to hide - per feature\n// [x] Cleanup localStorage feature\n// [x] hide on click inside of content (button or link, etc.) - control from outside\n// [-] GA tracking of user hide click - should be done outside\n\ntype TimedBottomSheetProps = {\n    /**\n     * The `dismissed` flag can be used to tell this component that the user has clicked on the content\n     * of the component like a button or a link. In this case, the bottom sheet will store a flag in the\n     * localStorage to hide the bottom sheet for the next time and it will close the sheet right away.\n     *\n     * @default false\n     */\n    dismissed?: boolean;\n\n    /**\n     * The `featureName` prop is used to name the localStorage flag that is used to control the visibility.\n     * It should be unique to avoid conflicts with other timed bottom sheets.\n     */\n    featureName: string;\n\n    /**\n     * Defines the time in milliseconds when the bottom sheet shall be shown. Default value is 0 to show it right away.\n     *\n     * @default 0\n     */\n    showAfter?: number;\n\n    /**\n     * Defines the time in milliseconds when the bottom sheet hides itself automatically. Default value is 3_600_000\n     * to hide it after 1 hour. In this case, the localStorage flag is not set and the bottom sheet will be shown\n     * on the next page load.\n     *\n     * @default 3_600_000\n     */\n    hideAfter?: number;\n\n    /**\n     * With this enabled, the BottomSheet will not hide automatically.\n     *\n     * @default false\n     */\n    alwaysOn?: boolean;\n\n    /**\n     * Enables or disabled the close button.\n     *\n     * @default true\n     */\n    showCloseButton?: boolean;\n\n    /**\n     * Optional width of the bottom sheet. Alternatively, you can set a `max-width-xxx` via className instead.\n     */\n    width?: number;\n\n    /**\n     * Flag to allow to remove the localStorage flag again once the component is not needed anymore.\n     *\n     * @default false\n     */\n    cleanupLocalStorage?: boolean;\n\n    /**\n     * A prefix that will be used for the local storage flag to store whether the bottom sheet should be hidden.\n     *\n     * Use this prefix for your service name for instance.\n     */\n    localStoragePrefix?: string;\n\n    /**\n     * Callback function that gets triggered when the user closed the bottom sheet with the close button.\n     *\n     * @default () => {}\n     * @returns void\n     */\n    onClose?: () => void;\n\n    /**\n     * Optional className to be set on the body.\n     *\n     * @default 'padding-25 margin-right-25'\n     */\n    bodyClassName?: string;\n\n    /**\n     * Optional className to be set on the component. Use this to define a max-width value.\n     */\n    className?: string;\n};\n\nconst sanitizeFeatureName = (value: string) => `${value.charAt(0).toUpperCase()}${value.slice(1)}`.replaceAll(' ', '');\n\n/**\n * A wrapper component for the BottomSheet that allows to control it's visibility via timers and to use\n * the localStorage to save user interaction.\n *\n * Don't forget to cleanup the localStorage for the user when removing a feature\n * by setting \"cleanupLocalStorage\" to \"true\" and deploy it like this.\n * The cleanup will remove the localStorage flag on mount and will not show the bottom sheet.\n *\n * @example\n    const [isDismissed, setIsDismissed] = useState(false);\n\n    const handleClose = () => { // If needed trigger Google Analytics here };\n\n    return (\n        <TimedBottomSheet\n            dismissed={isDismissed}\n            featureName='dummyBottomSheet'\n            showAfter={1_000}\n            hideAfter={15_000}\n            className='max-width-500'\n            onClose={handleClose}\n        >\n            <div className='display-flex align-items-center gap-20'>\n                Lorem ipsum dolor sit amet\n                <Button bsStyle={Button.PRIMARY} onClick={() => setIsDismissed(true)}>\n                    Got it\n                </Button>\n            </div>\n        </TimedBottomSheet>\n    );\n */\nexport const TimedBottomSheet = (props: PropsWithChildren<TimedBottomSheetProps>) => {\n    const {\n        dismissed = false,\n        featureName,\n        showAfter = DEFAULT_SHOW_AFTER,\n        hideAfter = DEFAULT_HIDE_AFTER,\n        alwaysOn = false,\n        showCloseButton = true,\n        width,\n        cleanupLocalStorage = false,\n        onClose = noop,\n        bodyClassName = 'padding-25 margin-right-25',\n        localStoragePrefix = '',\n        className,\n        children,\n        ...remainingProps\n    } = props;\n\n    const [showBottomSheet, setShowBottomSheet] = useState(false);\n\n    const [isHiddenByUser, setIsHiddenByUser, removeIsHiddenFlag] = useLocalStorage(\n        `${localStoragePrefix}hide${sanitizeFeatureName(featureName)}`,\n        false\n    );\n\n    // In case the visibility is controlled by the outside, means the user clicked on the\n    // content of the bottom sheet, close the sheet and set the localStorage flag for not\n    // showing it again\n    const [prevDismissed, setPrevDismissed] = useState(dismissed);\n    if (dismissed && dismissed !== prevDismissed) {\n        setPrevDismissed(dismissed);\n        setIsHiddenByUser(true);\n        setShowBottomSheet(false);\n    }\n\n    // Show the bottom sheet automatically after a given amount of time\n    useTimeout(() => {\n        if (!dismissed && !isHiddenByUser && !cleanupLocalStorage) {\n            setShowBottomSheet(true);\n        }\n    }, showAfter);\n\n    // Hide the bottom sheet automatically after a given amount of time\n    useTimeout(() => setShowBottomSheet(alwaysOn ? true : false), showAfter + hideAfter);\n\n    // Cleanup functionality. The cleanup will remove the localStorage flag on mount\n    // and will not show the bottom sheet.\n    useEffect(() => {\n        if (cleanupLocalStorage) {\n            removeIsHiddenFlag();\n        }\n    }, []);\n\n    const handleCloseBottomSheet = () => {\n        setShowBottomSheet(false);\n        setIsHiddenByUser(true);\n        onClose();\n    };\n\n    return (\n        <div {...remainingProps}>\n            <BottomSheet\n                show={showBottomSheet}\n                width={width}\n                detach\n                showCloseButton={showCloseButton}\n                onClose={handleCloseBottomSheet}\n                className={className}\n                bodyClassName={bodyClassName}\n            >\n                {children}\n            </BottomSheet>\n        </div>\n    );\n};\n\nexport default TimedBottomSheet;\n"],"mappings":";;;;;;;;AAOA,IAAM,IAAqB,GACrB,IAAqB,MAiGrB,KAAuB,MAAkB,GAAG,EAAM,OAAO,CAAC,CAAC,CAAC,YAAY,IAAI,EAAM,MAAM,CAAC,IAAI,WAAW,KAAK,EAAE,GAiCxG,KAAoB,MAAoD;CACjF,IAAM,EACF,eAAY,IACZ,gBACA,eAAY,GACZ,eAAY,GACZ,cAAW,IACX,qBAAkB,IAClB,UACA,yBAAsB,IACtB,aAAU,GACV,mBAAgB,8BAChB,wBAAqB,IACrB,cACA,aACA,GAAG,MACH,GAEE,CAAC,GAAiB,KAAsB,EAAS,EAAK,GAEtD,CAAC,GAAgB,GAAmB,KAAsB,EAC5D,GAAG,EAAmB,MAAM,EAAoB,CAAW,KAC3D,EACJ,GAKM,CAAC,GAAe,KAAoB,EAAS,CAAS;CAmB5D,AAlBI,KAAa,MAAc,MAC3B,EAAiB,CAAS,GAC1B,EAAkB,EAAI,GACtB,EAAmB,EAAK,IAI5B,QAAiB;EACb,AAAI,CAAC,KAAa,CAAC,KAAkB,CAAC,KAClC,EAAmB,EAAI;CAE/B,GAAG,CAAS,GAGZ,QAAiB,EAAmB,GAAuB,GAAG,IAAY,CAAS,GAInF,QAAgB;EACZ,AAAI,KACA,EAAmB;CAE3B,GAAG,CAAC,CAAC;CAEL,IAAM,UAA+B;EAGjC,AAFA,EAAmB,EAAK,GACxB,EAAkB,EAAI,GACtB,EAAQ;CACZ;CAEA,OACI,kBAAC,OAAD;EAAK,GAAI;YACL,kBAAC,GAAD;GACI,MAAM;GACC;GACP,QAAA;GACiB;GACjB,SAAS;GACE;GACI;GAEd;EACQ,CAAA;CACZ,CAAA;AAEb"}

package/components/button/Button.d.ts

@@ -1,5 +1,6 @@
 import { default as React, ForwardRefExoticComponent, HTMLProps, PropsWithChildren, RefAttributes } from 'react';
 import { ObjectValues } from '../../utils/ObjectValues';
+import { IconType } from '../icon/Icon';
 export declare const STYLES_MAP: {
     readonly DEFAULT: "default";
     readonly UNSTYLED: "unstyled";
@@ -82,14 +83,27 @@ type BaseButtonProps = {
      */
     iconRight?: boolean;
     /**
-     * Optional RIOglyph icon class name that comes in handy for icon-only buttons without adding
-     * a separate icon span.
+     * Optional UIKIT icon that comes in handy for icon-only buttons without adding a separate icon span.
      *
-     * Use only exact existing `rioglyph-*` classes from the generated UIKIT icon contract,
-     * for example `rioglyph-download`. Do not compose or guess semantic icon names; an unknown
-     * icon class renders as a filled rectangle.
+     * Prefer an unprefixed name such as `download`. Existing `icon-*` and legacy names remain supported.
      */
-    iconName?: string;
+    iconName?: IconType;
+    /**
+     * Replaces the icon while the button is hovered.
+     */
+    hoverIconName?: IconType;
+    /**
+     * Legacy alias for `iconName`.
+     *
+     * @deprecated Use `iconName` instead.
+     */
+    icon?: IconType;
+    /**
+     * Legacy alias for `hoverIconName`.
+     *
+     * @deprecated Use `hoverIconName` instead.
+     */
+    hoverIcon?: IconType;
     /**
      * Defines whether the button text break into multiple lines when the button space exceeds.
      *
@@ -144,6 +158,17 @@ type BaseButtonProps = {
      * Additional classes to be set on the button element.
      */
     className?: string;
+    /**
+     * Optional tooltip content rendered as a SimpleTooltip around the button.
+     *
+     * Pass a string for plain text, or a React element for translated text such as FormattedMessage.
+     * To customize tooltip behavior or styling, such as delay, placement, width or trigger, wrap the Button with
+     * SimpleTooltip instead.
+     *
+     * @example 'Open settings' or <FormattedMessage id='settings.open' />
+     *
+     */
+    tooltip?: React.ReactNode;
 };
 type NativeButtonProps = Omit<HTMLProps<HTMLButtonElement>, 'as' | 'type' | 'onClick' | 'ref'> & BaseButtonProps & {
     /**