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

package/components/bottomSheet/TimedBottomSheet.js

@@ -1,76 +1,51 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
-import noop from 'lodash/fp/noop';
-import BottomSheet from './BottomSheet';
-import useTimeout from '../../hooks/useTimeout';
-import useLocalStorage from '../../useLocalStorage';
-const DEFAULT_SHOW_AFTER = 0; // immediately after mount
-const DEFAULT_HIDE_AFTER = 3_600_000; // after 1 hour
-const sanitizeFeatureName = (value) => `${value.charAt(0).toUpperCase()}${value.slice(1)}`.replaceAll(' ', '');
-/**
- * A wrapper component for the BottomSheet that allows to control it's visibility via timers and to use
- * the localStorage to save user interaction.
- *
- * Don't forget to cleanup the localStorage for the user when removing a feature
- * by setting "cleanupLocalStorage" to "true" and deploy it like this.
- * The cleanup will remove the localStorage flag on mount and will not show the bottom sheet.
- *
- * @example
-    const [isDismissed, setIsDismissed] = useState(false);
-
-    const handleClose = () => { // If needed trigger Google Analytics here };
-
-    return (
-        <TimedBottomSheet
-            dismissed={isDismissed}
-            featureName='dummyBottomSheet'
-            showAfter={1_000}
-            hideAfter={15_000}
-            className='max-width-500'
-            onClose={handleClose}
-        >
-            <div className='display-flex align-items-center gap-20'>
-                Lorem ipsum dolor sit amet
-                <Button bsStyle={Button.PRIMARY} onClick={() => setIsDismissed(true)}>
-                    Got it
-                </Button>
-            </div>
-        </TimedBottomSheet>
-    );
- */
-export const TimedBottomSheet = (props) => {
-    const { dismissed = false, featureName, showAfter = DEFAULT_SHOW_AFTER, hideAfter = DEFAULT_HIDE_AFTER, alwaysOn = false, showCloseButton = true, width, cleanupLocalStorage = false, onClose = noop, bodyClassName = 'padding-25 margin-right-25', localStoragePrefix = '', className, children, ...remainingProps } = props;
-    const [showBottomSheet, setShowBottomSheet] = useState(false);
-    const [isHiddenByUser, setIsHiddenByUser, removeIsHiddenFlag] = useLocalStorage(`${localStoragePrefix}hide${sanitizeFeatureName(featureName)}`, false);
-    // In case the visibility is controlled by the outside, means the user clicked on the
-    // content of the bottom sheet, close the sheet and set the localStorage flag for not
-    // showing it again
-    const [prevDismissed, setPrevDismissed] = useState(dismissed);
-    if (dismissed && dismissed !== prevDismissed) {
-        setPrevDismissed(dismissed);
-        setIsHiddenByUser(true);
-        setShowBottomSheet(false);
+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
     }
-    // Show the bottom sheet automatically after a given amount of time
-    useTimeout(() => {
-        if (!dismissed && !isHiddenByUser && !cleanupLocalStorage) {
-            setShowBottomSheet(true);
-        }
-    }, showAfter);
-    // Hide the bottom sheet automatically after a given amount of time
-    useTimeout(() => setShowBottomSheet(alwaysOn ? true : false), showAfter + hideAfter);
-    // Cleanup functionality. The cleanup will remove the localStorage flag on mount
-    // and will not show the bottom sheet.
-    useEffect(() => {
-        if (cleanupLocalStorage) {
-            removeIsHiddenFlag();
-        }
-    }, []);
-    const handleCloseBottomSheet = () => {
-        setShowBottomSheet(false);
-        setIsHiddenByUser(true);
-        onClose();
-    };
-    return (_jsx("div", { ...remainingProps, children: _jsx(BottomSheet, { show: showBottomSheet, width: width, detach: true, showCloseButton: showCloseButton, onClose: handleCloseBottomSheet, className: className, bodyClassName: bodyClassName, children: children }) }));
+  ) });
 };
-export default TimedBottomSheet;
+export {
+  b as TimedBottomSheet,
+  b as default
+};
+//# sourceMappingURL=TimedBottomSheet.js.map

package/components/bottomSheet/TimedBottomSheet.js.map

@@ -0,0 +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    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     * @default false\n     */\n    alwaysOn?: boolean;\n\n    /**\n     * Enables or disabled the close button.\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    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     * @returns void\n     */\n    onClose?: () => void;\n\n    /**\n     * Optional className to be set on the body.\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,MAuFrBC,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;"}

package/components/button/Button.d.ts

@@ -1,5 +1,5 @@
-import React, { type ForwardRefExoticComponent, type HTMLProps, type PropsWithChildren, type RefAttributes } from 'react';
-import type { ObjectValues } from '../../utils/ObjectValues';
+import { default as React, ForwardRefExoticComponent, HTMLProps, PropsWithChildren, RefAttributes } from 'react';
+import { ObjectValues } from '../../utils/ObjectValues';
 export declare const STYLES_MAP: {
     readonly DEFAULT: "default";
     readonly UNSTYLED: "unstyled";

package/components/button/Button.js

@@ -1,66 +1,99 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useRef, useState, } from 'react';
-import classNames from 'classnames';
-import noop from 'lodash/fp/noop';
-import { createButtonRipple } from '../../utils/buttonEffect';
-import useMergeRefs from '../../hooks/useMergeRefs';
-export const STYLES_MAP = {
-    DEFAULT: 'default',
-    UNSTYLED: 'unstyled',
-    PRIMARY: 'primary',
-    SECONDARY: 'secondary',
-    INFO: 'info',
-    WARNING: 'warning',
-    DANGER: 'danger',
-    SUCCESS: 'success',
-    MUTED: 'muted',
-    MUTED_FILLED: 'muted-filled',
-};
-export const VARIANTS_MAP = {
-    VARIANT_LINK: 'link',
-    VARIANT_LINK_INLINE: 'link-inline',
-    VARIANT_OUTLINE: 'outline',
-    VARIANT_ACTION: 'action',
-};
-export const SIZES_MAP = {
-    XS: 'xs',
-    SM: 'sm',
-    MD: 'md',
-    LG: 'lg',
-};
-const Button = forwardRef((props, ref) => {
-    const { active = false, disabled = false, asToggle = false, onClick = noop, bsStyle = 'default', bsSize, variant, iconOnly = false, iconName, iconRight = false, multiline = false, block = false, className = '', noRippleEffect = false, type = 'button', tabIndex = 0, children, ...remainingProps } = props;
-    const [isToggled, setIsToggled] = useState(active);
-    const btnRef = useRef(null);
-    const buttonRef = useMergeRefs(btnRef, ref);
-    // Update internal toggle state when used as controlled component and outside toggle state changes
-    // Note, using the usePrevious hook resulted in an endless loop, hence the useState here
-    const [previousActive, setPreviousActive] = useState(active);
-    if (active !== previousActive) {
-        setIsToggled(active);
-        setPreviousActive(active);
+import { jsxs as v, jsx as U } from "react/jsx-runtime";
+import { forwardRef as h, useState as b, useRef as P } from "react";
+import j from "classnames";
+import { noop as x } from "es-toolkit/function";
+import { createButtonRipple as K } from "../../utils/buttonEffect.js";
+import Y from "../../hooks/useMergeRefs.js";
+const w = {
+  DEFAULT: "default",
+  UNSTYLED: "unstyled",
+  PRIMARY: "primary",
+  SECONDARY: "secondary",
+  INFO: "info",
+  WARNING: "warning",
+  DANGER: "danger",
+  SUCCESS: "success",
+  MUTED: "muted",
+  MUTED_FILLED: "muted-filled"
+}, t = {
+  VARIANT_LINK: "link",
+  VARIANT_LINK_INLINE: "link-inline",
+  VARIANT_OUTLINE: "outline",
+  VARIANT_ACTION: "action"
+}, F = {
+  XS: "xs",
+  SM: "sm",
+  MD: "md",
+  LG: "lg"
+}, o = h((I, m) => {
+  const {
+    active: n = !1,
+    disabled: u = !1,
+    asToggle: l = !1,
+    onClick: a = x,
+    bsStyle: T = "default",
+    bsSize: c,
+    variant: e,
+    iconOnly: g = !1,
+    iconName: r,
+    iconRight: R = !1,
+    multiline: d = !1,
+    block: p = !1,
+    className: E = "",
+    noRippleEffect: S = !1,
+    type: L = "button",
+    tabIndex: _ = 0,
+    children: k,
+    ...O
+  } = I, [N, f] = b(n), A = P(null), C = Y(A, m), [M, V] = b(n);
+  n !== M && (f(n), V(n));
+  const y = (s) => {
+    if (S || K(s.nativeEvent, s.currentTarget), l) {
+      const i = !N;
+      f(i), i && A.current?.blur(), a(i);
+    } else
+      a(s);
+  }, D = j(
+    "btn",
+    `btn-${T}`,
+    e === t.VARIANT_LINK && "btn-link",
+    e === t.VARIANT_LINK_INLINE && "btn-link btn-link-inline",
+    e === t.VARIANT_OUTLINE && "btn-outline",
+    e === t.VARIANT_ACTION && "btn-action",
+    c && `btn-${c}`,
+    l && "btn-toggle",
+    N && "active",
+    g && "btn-icon-only",
+    R && "btn-icon-right",
+    d && "btn-multiline",
+    p && "btn-block",
+    "btn-component",
+    E
+  );
+  return /* @__PURE__ */ v(
+    "button",
+    {
+      ref: C,
+      type: L,
+      ...O,
+      className: D,
+      onClick: y,
+      disabled: u,
+      tabIndex: _,
+      children: [
+        r && /* @__PURE__ */ U("span", { className: `rioglyph ${r}` }),
+        k
+      ]
     }
-    const handleClick = (event) => {
-        if (!noRippleEffect) {
-            createButtonRipple(event.nativeEvent, event.currentTarget);
-        }
-        if (asToggle) {
-            // Intercept click handler only for toggle button to update internal state and blur after click
-            const newIsToggled = !isToggled;
-            setIsToggled(newIsToggled);
-            if (newIsToggled) {
-                btnRef.current?.blur();
-            }
-            onClick(newIsToggled);
-        }
-        else {
-            onClick(event);
-        }
-    };
-    const buttonClassNames = classNames('btn', `btn-${bsStyle}`, variant === VARIANTS_MAP.VARIANT_LINK && 'btn-link', variant === VARIANTS_MAP.VARIANT_LINK_INLINE && 'btn-link btn-link-inline', variant === VARIANTS_MAP.VARIANT_OUTLINE && 'btn-outline', variant === VARIANTS_MAP.VARIANT_ACTION && 'btn-action', bsSize && `btn-${bsSize}`, asToggle && 'btn-toggle', isToggled && 'active', iconOnly && 'btn-icon-only', iconRight && 'btn-icon-right', multiline && 'btn-multiline', block && 'btn-block', 'btn-component', className);
-    return (_jsxs("button", { ref: buttonRef, type: type, ...remainingProps, className: buttonClassNames, onClick: handleClick, disabled: disabled, tabIndex: tabIndex, children: [iconName && _jsx("span", { className: `rioglyph ${iconName}` }), children] }));
+  );
 });
-Object.assign(Button, STYLES_MAP);
-Object.assign(Button, VARIANTS_MAP);
-Object.assign(Button, SIZES_MAP);
-export default Button;
+Object.assign(o, w);
+Object.assign(o, t);
+Object.assign(o, F);
+export {
+  F as SIZES_MAP,
+  w as STYLES_MAP,
+  t as VARIANTS_MAP,
+  o as default
+};
+//# sourceMappingURL=Button.js.map

package/components/button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    type ForwardRefExoticComponent,\n    type HTMLProps,\n    type PropsWithChildren,\n    type RefAttributes,\n    type SyntheticEvent,\n    useRef,\n    useState,\n} from 'react';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/function';\n\nimport { createButtonRipple } from '../../utils/buttonEffect';\nimport useMergeRefs from '../../hooks/useMergeRefs';\nimport type { ObjectValues } from '../../utils/ObjectValues';\n\nexport const STYLES_MAP = {\n    DEFAULT: 'default',\n    UNSTYLED: 'unstyled',\n    PRIMARY: 'primary',\n    SECONDARY: 'secondary',\n    INFO: 'info',\n    WARNING: 'warning',\n    DANGER: 'danger',\n    SUCCESS: 'success',\n    MUTED: 'muted',\n    MUTED_FILLED: 'muted-filled',\n} as const;\n\n// export for convenient usage on client side\nexport type BUTTON_STYLE = ObjectValues<typeof STYLES_MAP>;\n\nexport const VARIANTS_MAP = {\n    VARIANT_LINK: 'link',\n    VARIANT_LINK_INLINE: 'link-inline',\n    VARIANT_OUTLINE: 'outline',\n    VARIANT_ACTION: 'action',\n} as const;\n\nexport type BUTTON_VARIANT = ObjectValues<typeof VARIANTS_MAP>;\n\nexport const SIZES_MAP = {\n    XS: 'xs',\n    SM: 'sm',\n    MD: 'md',\n    LG: 'lg',\n} as const;\n\nexport type BUTTON_SIZE = ObjectValues<typeof SIZES_MAP>;\n\n/*\n *  ATTENTION: We're typing the onClick handler based on the value of `asToggle`.\n *\n *  It does not fully work here inside of this file, though. Therefore, we have to apply some explicit casts below.\n *  In code _using_ the Button component, however, the parameter type of the onClick handler must either be a boolean or\n *  a React.MouseEvent, respectively.\n */\n\ntype RegularButton = {\n    /**\n     * Use the button as a toggle button. The toggle state can be controlled via the `active` prop.\n     * @default false\n     */\n    asToggle?: false;\n\n    /**\n     * Callback function triggered when clicking the button.\n     * @param event The MouseEvent that triggered the click.\n     */\n    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n};\n\ntype ToggleButton = {\n    /**\n     * Use the button as a toggle button. The toggle state can be controlled via the `active` prop.\n     * @default false\n     */\n    asToggle: true;\n\n    /**\n     * Callback function triggered when clicking the button.\n     * @param value The new value of the toggle button.\n     */\n    onClick?: (value: boolean) => void;\n};\n\nexport type ButtonProps = Omit<HTMLProps<HTMLButtonElement>, 'type' | 'onClick'> & {\n    /**\n     * Whether the button should be disabled.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Set the button toggled. Should be used in combination with \"asToggle\" prop.\n     * @default false\n     */\n    active?: boolean;\n\n    /**\n     * Defines the type of the button. This may be used for form submit buttons.\n     * @default 'button'\n     */\n    type?: 'button' | 'submit';\n\n    /**\n     * Use when the content of the button is an icon only to adapt the button spacing accordingly.\n     * @default false\n     */\n    iconOnly?: boolean;\n\n    /**\n     * Adds right side spacing for an icon. This should be used when having navigation buttons\n     * that use an icon on the right side.\n     * @default false\n     */\n    iconRight?: boolean;\n\n    /**\n     * Optional rio-glyph icon name that comes in handy for icon only buttons for not adding\n     * a span tag for the icon which reduces boilerplate code.\n     */\n    iconName?: string;\n\n    /**\n     * Defines whether the button text break into multiple lines when the button space exceeds.\n     *\n     * Multiline buttons should be used as exception only.\n     * @default false\n     */\n    multiline?: boolean;\n\n    /**\n     * Defines whether the button takes up the full width of the parent element.\n     * @default false\n     */\n    block?: boolean;\n\n    /**\n     * Sets the button style.\n     * @default \"default\"\n     */\n    bsStyle?: BUTTON_STYLE;\n\n    /**\n     * Sets the button size.\n     */\n    bsSize?: BUTTON_SIZE;\n\n    /**\n     * Sets the button variant.\n     */\n    variant?: BUTTON_VARIANT;\n\n    /**\n     * Whether the \"ripple\" effect should be suppressed on this button.\n     */\n    noRippleEffect?: boolean;\n\n    /**\n     * Number of the index used for keyboard support.\n     * @default 0\n     */\n    tabIndex?: number;\n\n    /**\n     * Additional classes to be set on the button element.\n     */\n    className?: string;\n} & (RegularButton | ToggleButton);\n\ntype Props = PropsWithChildren<ButtonProps>;\n\n// Define statics to be used as \"Button.PRIMARY\"\ntype ButtonType = ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElement>> & {\n    DEFAULT: 'default';\n    UNSTYLED: 'unstyled';\n    PRIMARY: 'primary';\n    SECONDARY: 'secondary';\n    INFO: 'info';\n    WARNING: 'warning';\n    DANGER: 'danger';\n    SUCCESS: 'success';\n    MUTED: 'muted';\n    MUTED_FILLED: 'muted-filled';\n\n    VARIANT_LINK: 'link';\n    VARIANT_LINK_INLINE: 'link-inline';\n    VARIANT_OUTLINE: 'outline';\n    VARIANT_ACTION: 'action';\n\n    XS: 'xs';\n    SM: 'sm';\n    MD: 'md';\n    LG: 'lg';\n};\n\nconst Button = forwardRef<HTMLButtonElement, Props>((props, ref) => {\n    const {\n        active = false,\n        disabled = false,\n        asToggle = false,\n        onClick = noop,\n        bsStyle = 'default',\n        bsSize,\n        variant,\n        iconOnly = false,\n        iconName,\n        iconRight = false,\n        multiline = false,\n        block = false,\n        className = '',\n        noRippleEffect = false,\n        type = 'button',\n        tabIndex = 0,\n        children,\n        ...remainingProps\n    } = props;\n\n    const [isToggled, setIsToggled] = useState(active);\n\n    const btnRef = useRef<HTMLButtonElement>(null);\n\n    const buttonRef = useMergeRefs(btnRef, ref);\n\n    // Update internal toggle state when used as controlled component and outside toggle state changes\n    // Note, using the usePrevious hook resulted in an endless loop, hence the useState here\n    const [previousActive, setPreviousActive] = useState(active);\n    if (active !== previousActive) {\n        setIsToggled(active);\n        setPreviousActive(active);\n    }\n\n    const handleClick = (event: SyntheticEvent<HTMLButtonElement, MouseEvent>) => {\n        if (!noRippleEffect) {\n            createButtonRipple(event.nativeEvent, event.currentTarget);\n        }\n\n        if (asToggle) {\n            // Intercept click handler only for toggle button to update internal state and blur after click\n            const newIsToggled = !isToggled;\n            setIsToggled(newIsToggled);\n\n            if (newIsToggled) {\n                btnRef.current?.blur();\n            }\n\n            (onClick as (x: boolean) => void)(newIsToggled);\n        } else {\n            (onClick as (x: SyntheticEvent<HTMLButtonElement, MouseEvent>) => void)(event);\n        }\n    };\n\n    const buttonClassNames = classNames(\n        'btn',\n        `btn-${bsStyle}`,\n        variant === VARIANTS_MAP.VARIANT_LINK && 'btn-link',\n        variant === VARIANTS_MAP.VARIANT_LINK_INLINE && 'btn-link btn-link-inline',\n        variant === VARIANTS_MAP.VARIANT_OUTLINE && 'btn-outline',\n        variant === VARIANTS_MAP.VARIANT_ACTION && 'btn-action',\n        bsSize && `btn-${bsSize}`,\n        asToggle && 'btn-toggle',\n        isToggled && 'active',\n        iconOnly && 'btn-icon-only',\n        iconRight && 'btn-icon-right',\n        multiline && 'btn-multiline',\n        block && 'btn-block',\n        'btn-component',\n        className\n    );\n\n    return (\n        <button\n            ref={buttonRef}\n            type={type}\n            {...remainingProps}\n            className={buttonClassNames}\n            onClick={handleClick}\n            disabled={disabled}\n            tabIndex={tabIndex}\n        >\n            {iconName && <span className={`rioglyph ${iconName}`} />}\n            {children}\n        </button>\n    );\n}) as ButtonType;\n\nObject.assign(Button, STYLES_MAP);\nObject.assign(Button, VARIANTS_MAP);\nObject.assign(Button, SIZES_MAP);\n\nexport default Button;\n"],"names":["STYLES_MAP","VARIANTS_MAP","SIZES_MAP","Button","forwardRef","props","ref","active","disabled","asToggle","onClick","noop","bsStyle","bsSize","variant","iconOnly","iconName","iconRight","multiline","block","className","noRippleEffect","type","tabIndex","children","remainingProps","isToggled","setIsToggled","useState","btnRef","useRef","buttonRef","useMergeRefs","previousActive","setPreviousActive","handleClick","event","createButtonRipple","newIsToggled","buttonClassNames","classNames","jsxs","jsx"],"mappings":";;;;;;AAiBO,MAAMA,IAAa;AAAA,EACtB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AAAA,EACX,MAAM;AAAA,EACN,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,OAAO;AAAA,EACP,cAAc;AAClB,GAKaC,IAAe;AAAA,EACxB,cAAc;AAAA,EACd,qBAAqB;AAAA,EACrB,iBAAiB;AAAA,EACjB,gBAAgB;AACpB,GAIaC,IAAY;AAAA,EACrB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACR,GAwJMC,IAASC,EAAqC,CAACC,GAAOC,MAAQ;AAChE,QAAM;AAAA,IACF,QAAAC,IAAS;AAAA,IACT,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,IACX,SAAAC,IAAUC;AAAA,IACV,SAAAC,IAAU;AAAA,IACV,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,WAAAC,IAAY;AAAA,IACZ,OAAAC,IAAQ;AAAA,IACR,WAAAC,IAAY;AAAA,IACZ,gBAAAC,IAAiB;AAAA,IACjB,MAAAC,IAAO;AAAA,IACP,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHpB,GAEE,CAACqB,GAAWC,CAAY,IAAIC,EAASrB,CAAM,GAE3CsB,IAASC,EAA0B,IAAI,GAEvCC,IAAYC,EAAaH,GAAQvB,CAAG,GAIpC,CAAC2B,GAAgBC,CAAiB,IAAIN,EAASrB,CAAM;AAC3D,EAAIA,MAAW0B,MACXN,EAAapB,CAAM,GACnB2B,EAAkB3B,CAAM;AAG5B,QAAM4B,IAAc,CAACC,MAAyD;AAK1E,QAJKf,KACDgB,EAAmBD,EAAM,aAAaA,EAAM,aAAa,GAGzD3B,GAAU;AAEV,YAAM6B,IAAe,CAACZ;AACtB,MAAAC,EAAaW,CAAY,GAErBA,KACAT,EAAO,SAAS,KAAA,GAGnBnB,EAAiC4B,CAAY;AAAA,IAClD;AACK,MAAA5B,EAAuE0B,CAAK;AAAA,EAErF,GAEMG,IAAmBC;AAAA,IACrB;AAAA,IACA,OAAO5B,CAAO;AAAA,IACdE,MAAYb,EAAa,gBAAgB;AAAA,IACzCa,MAAYb,EAAa,uBAAuB;AAAA,IAChDa,MAAYb,EAAa,mBAAmB;AAAA,IAC5Ca,MAAYb,EAAa,kBAAkB;AAAA,IAC3CY,KAAU,OAAOA,CAAM;AAAA,IACvBJ,KAAY;AAAA,IACZiB,KAAa;AAAA,IACbX,KAAY;AAAA,IACZE,KAAa;AAAA,IACbC,KAAa;AAAA,IACbC,KAAS;AAAA,IACT;AAAA,IACAC;AAAA,EAAA;AAGJ,SACI,gBAAAqB;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAKV;AAAA,MACL,MAAAT;AAAA,MACC,GAAGG;AAAA,MACJ,WAAWc;AAAA,MACX,SAASJ;AAAA,MACT,UAAA3B;AAAA,MACA,UAAAe;AAAA,MAEC,UAAA;AAAA,QAAAP,KAAY,gBAAA0B,EAAC,QAAA,EAAK,WAAW,YAAY1B,CAAQ,IAAI;AAAA,QACrDQ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGb,CAAC;AAED,OAAO,OAAOrB,GAAQH,CAAU;AAChC,OAAO,OAAOG,GAAQF,CAAY;AAClC,OAAO,OAAOE,GAAQD,CAAS;"}

package/components/button/ButtonToolbar.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentProps, type PropsWithChildren } from 'react';
+import { ComponentProps, PropsWithChildren } from 'react';
 export type ButtonToolbarProps = ComponentProps<'div'> & {
     /**
      * Align buttons to a defined side or set them apart.

package/components/button/ButtonToolbar.js

@@ -1,8 +1,17 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import classNames from 'classnames';
-const ButtonToolbar = (props) => {
-    const { className = '', alignment, children, ...remainingProps } = props;
-    const classes = classNames(className, 'btn-toolbar', alignment === 'left' && 'justify-content-start', alignment === 'right' && 'justify-content-end', alignment === 'center' && 'justify-content-center', alignment === 'space-between' && 'justify-content-between');
-    return (_jsx("div", { ...remainingProps, className: classes, children: children }));
+import { jsx as a } from "react/jsx-runtime";
+import c from "classnames";
+const m = (e) => {
+  const { className: n = "", alignment: t, children: s, ...o } = e, r = c(
+    n,
+    "btn-toolbar",
+    t === "left" && "justify-content-start",
+    t === "right" && "justify-content-end",
+    t === "center" && "justify-content-center",
+    t === "space-between" && "justify-content-between"
+  );
+  return /* @__PURE__ */ a("div", { ...o, className: r, children: s });
 };
-export default ButtonToolbar;
+export {
+  m as default
+};
+//# sourceMappingURL=ButtonToolbar.js.map

package/components/button/ButtonToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonToolbar.js","sources":["../../../src/components/button/ButtonToolbar.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from 'react';\nimport classNames from 'classnames';\n\nexport type ButtonToolbarProps = ComponentProps<'div'> & {\n    /**\n     * Align buttons to a defined side or set them apart.\n     */\n    alignment?: 'left' | 'right' | 'center' | 'space-between';\n\n    /**\n     * Additional classes set to the outer element.\n     */\n    className?: string;\n};\n\nconst ButtonToolbar = (props: PropsWithChildren<ButtonToolbarProps>) => {\n    const { className = '', alignment, children, ...remainingProps } = props;\n\n    const classes = classNames(\n        className,\n        'btn-toolbar',\n        alignment === 'left' && 'justify-content-start',\n        alignment === 'right' && 'justify-content-end',\n        alignment === 'center' && 'justify-content-center',\n        alignment === 'space-between' && 'justify-content-between'\n    );\n\n    return (\n        <div {...remainingProps} className={classes}>\n            {children}\n        </div>\n    );\n};\n\nexport default ButtonToolbar;\n"],"names":["ButtonToolbar","props","className","alignment","children","remainingProps","classes","classNames"],"mappings":";;AAeA,MAAMA,IAAgB,CAACC,MAAiD;AACpE,QAAM,EAAE,WAAAC,IAAY,IAAI,WAAAC,GAAW,UAAAC,GAAU,GAAGC,MAAmBJ,GAE7DK,IAAUC;AAAA,IACZL;AAAA,IACA;AAAA,IACAC,MAAc,UAAU;AAAA,IACxBA,MAAc,WAAW;AAAA,IACzBA,MAAc,YAAY;AAAA,IAC1BA,MAAc,mBAAmB;AAAA,EAAA;AAGrC,2BACK,OAAA,EAAK,GAAGE,GAAgB,WAAWC,GAC/B,UAAAF,GACL;AAER;"}

package/components/button/StepButton.d.ts

@@ -1,5 +1,5 @@
-import { type PropsWithChildren } from 'react';
-import { type ButtonProps } from './Button';
+import { PropsWithChildren } from 'react';
+import { ButtonProps } from './Button';
 export type StepButtonProps = ButtonProps & {
     /**
      * Defines the chevron icon for the respective direction.

package/components/button/StepButton.js

@@ -1,8 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import Button from './Button';
-const StepButton = (props) => {
-    const { direction = 'next', ...remainingProps } = props;
-    const iconName = direction === 'next' ? 'rioglyph-chevron-right' : 'rioglyph-chevron-left';
-    return _jsx(Button, { ...remainingProps, iconName: iconName, iconRight: direction === 'next' });
+import { jsx as r } from "react/jsx-runtime";
+import e from "./Button.js";
+const p = (o) => {
+  const { direction: t = "next", ...n } = o;
+  return /* @__PURE__ */ r(e, { ...n, iconName: t === "next" ? "rioglyph-chevron-right" : "rioglyph-chevron-left", iconRight: t === "next" });
 };
-export default StepButton;
+export {
+  p as default
+};
+//# sourceMappingURL=StepButton.js.map

package/components/button/StepButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepButton.js","sources":["../../../src/components/button/StepButton.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\n\nimport Button, { type ButtonProps } from './Button';\n\nexport type StepButtonProps = ButtonProps & {\n    /**\n     * Defines the chevron icon for the respective direction.\n     *\n     * @default 'next'\n     */\n    direction?: 'next' | 'previous';\n};\n\nconst StepButton = (props: PropsWithChildren<StepButtonProps>) => {\n    const { direction = 'next', ...remainingProps } = props;\n\n    const iconName = direction === 'next' ? 'rioglyph-chevron-right' : 'rioglyph-chevron-left';\n\n    return <Button {...remainingProps} iconName={iconName} iconRight={direction === 'next'} />;\n};\n\nexport default StepButton;\n"],"names":["StepButton","props","direction","remainingProps","Button"],"mappings":";;AAaA,MAAMA,IAAa,CAACC,MAA8C;AAC9D,QAAM,EAAE,WAAAC,IAAY,QAAQ,GAAGC,MAAmBF;AAIlD,2BAAQG,GAAA,EAAQ,GAAGD,GAAgB,UAFlBD,MAAc,SAAS,2BAA2B,yBAEZ,WAAWA,MAAc,QAAQ;AAC5F;"}

package/components/button/ToggleButton.d.ts

@@ -1,5 +1,5 @@
-import { type PropsWithChildren } from 'react';
-import { type ButtonProps } from './Button';
+import { PropsWithChildren } from 'react';
+import { ButtonProps } from './Button';
 export type ToggleButtonProps = Omit<ButtonProps, 'onClick'> & {
     /**
      * Callback function triggered when clicking the button.

package/components/button/ToggleButton.js

@@ -1,4 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import Button from './Button';
-const ToggleButton = (props) => _jsx(Button, { ...props, asToggle: true });
-export default ToggleButton;
+import { jsx as t } from "react/jsx-runtime";
+import r from "./Button.js";
+const m = (o) => /* @__PURE__ */ t(r, { ...o, asToggle: !0 });
+export {
+  m as default
+};
+//# sourceMappingURL=ToggleButton.js.map

package/components/button/ToggleButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButton.js","sources":["../../../src/components/button/ToggleButton.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\n\nimport Button, { type ButtonProps } from './Button';\n\nexport type ToggleButtonProps = Omit<ButtonProps, 'onClick'> & {\n    /**\n     * Callback function triggered when clicking the button.\n     * @param value The new value of the toggle button.\n     */\n    onClick?: (value: boolean) => void;\n};\n\nconst ToggleButton = (props: PropsWithChildren<ToggleButtonProps>) => <Button {...props} asToggle />;\n\nexport default ToggleButton;\n"],"names":["ToggleButton","props","jsx","Button"],"mappings":";;AAYA,MAAMA,IAAe,CAACC,MAAgD,gBAAAC,EAACC,KAAQ,GAAGF,GAAO,UAAQ,GAAA,CAAC;"}

package/components/calendarStripe/CalendarStripe.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 export type CalendarStripeProps = {
     /**
      * The minimum width in pixel of a single day column
@@ -20,10 +20,6 @@ export type CalendarStripeProps = {
      * @default 7
      */
     maxDays?: number;
-    /**
-     * @deprecated Please use `renderDay` instead.
-     */
-    render?: React.ReactNode;
     /**
      * A function that renders each individual day to be displayed.
      *