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

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 'es-toolkit/function';
-import { createButtonRipple } from "../../utils/buttonEffect.js";
-import useMergeRefs from "../../hooks/useMergeRefs.js";
-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, 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.js";
-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.js";
-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 type React from 'react';
+import { default as React } from 'react';
 export type CalendarStripeProps = {
     /**
      * The minimum width in pixel of a single day column

package/components/calendarStripe/CalendarStripe.js

@@ -1,120 +1,119 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useRef, useState } from 'react';
-import classNames from 'classnames';
-import { AnimatePresence, motion } from 'motion/react';
-import { noop } from 'es-toolkit/compat';
-import useAfterMount from "../../hooks/useAfterMount.js";
-import useElementSize from "../../hooks/useElementSize.js";
-import usePrevious from "../../hooks/usePrevious.js";
-import { hasAlignItemsClass, hasAlignSelfClass, hasBgClass, hasBorderClass, hasCursorClass, hasDisplayClass, hasFlexClass, hasHoverScaleClass, hasHoverTextColorClass, hasOverflowClass, hasPaddingClass, hasRoundedClass, hasSpaceClass, hasTextColorClass, hasTextSizeClass, hasUserSelectClass, } from "../../utils/hasUtilityClass.js";
-const DEFAULT_MIN_WITH = 200;
-const DEFAULT_MIN_DAYS = 1;
-const DEFAULT_MAX_DAYS = 7;
-const ANIMATION_DURATION = 0.2;
-const ANIMATION_NEXT = 'page';
-const ANIMATION_BACK = 'pageBack';
-const ITEM_NAME = 'ColumnItem';
-const variants = {
-    pageEnter: (pageDirection) => ({
-        x: pageDirection === ANIMATION_NEXT ? '60%' : '-60%',
-        opacity: 0,
-    }),
-    pageCenter: () => ({ x: 0, opacity: 1 }),
-};
-const getDateString = (date) => date.toISOString().split('T').at(0);
-const getFirstColumnItem = (node) => {
-    if ([...node.classList].includes(ITEM_NAME)) {
-        return node;
-    }
-    return getFirstColumnItem(node.children[0]);
-};
-const CalendarStripe = forwardRef((props, ref) => {
-    const { minDayWith = DEFAULT_MIN_WITH, minDays = DEFAULT_MIN_DAYS, maxDays = DEFAULT_MAX_DAYS, renderDay, skipWeekends = false, startDate = new Date(), onNextClick = noop, onPreviousClick = noop, buttonClassName = '', className = '', daysWrapperClassName = '', dayWrapperClassName = '', } = props;
-    if (!renderDay) {
-        console.error('CalendarStripe component is missing the required "renderDay" prop');
+import { jsxs as Z, jsx as n } from "react/jsx-runtime";
+import { forwardRef as ee, useState as h, useRef as se, useEffect as te } from "react";
+import f from "classnames";
+import { AnimatePresence as ae, motion as ne } from "motion/react";
+import { noop as E } from "es-toolkit/compat";
+import re from "../../hooks/useAfterMount.js";
+import oe from "../../hooks/useElementSize.js";
+import ie from "../../hooks/usePrevious.js";
+import { hasDisplayClass as v, hasAlignItemsClass as k, hasOverflowClass as le, hasBgClass as ce, hasBorderClass as me, hasRoundedClass as de, hasHoverScaleClass as pe, hasHoverTextColorClass as ue, hasPaddingClass as he, hasCursorClass as fe, hasTextColorClass as Ce, hasTextSizeClass as ge, hasAlignSelfClass as De, hasSpaceClass as F, hasUserSelectClass as M, hasFlexClass as Ne } from "../../utils/hasUtilityClass.js";
+const ye = 200, ve = 1, xe = 7, Ae = 0.2, _ = "page", Se = "pageBack", B = "ColumnItem", we = {
+  pageEnter: (t) => ({
+    x: t === _ ? "60%" : "-60%",
+    opacity: 0
+  }),
+  pageCenter: () => ({ x: 0, opacity: 1 })
+}, i = (t) => t.toISOString().split("T").at(0), O = (t) => [...t.classList].includes(B) ? t : O(t.children[0]), be = ee((t, b) => {
+  const {
+    minDayWith: x = ye,
+    minDays: P = ve,
+    maxDays: R = xe,
+    renderDay: C,
+    skipWeekends: L = !1,
+    startDate: l = /* @__PURE__ */ new Date(),
+    onNextClick: U = E,
+    onPreviousClick: z = E,
+    buttonClassName: s = "",
+    className: o = "",
+    daysWrapperClassName: m = "",
+    dayWrapperClassName: d = ""
+  } = t;
+  C || console.error('CalendarStripe component is missing the required "renderDay" prop');
+  const [r, g] = h(l), [a, A] = h(1), [H, j] = h(!1), c = se(null), [S] = oe(c), V = ie(i(r)), w = i(r) > V ? _ : Se, [X, Y] = h(l);
+  i(l) !== i(X) && (g(l), Y(l)), re(() => {
+    j(!0);
+  }, []), te(() => {
+    if (!c.current)
+      return;
+    const e = O(c.current.children[0]);
+    if (!e)
+      return;
+    const D = e.getBoundingClientRect().width, N = a - 1 >= P, u = a + 1 <= R, Q = N && D <= x;
+    if (u && (a + 1) * x <= S) {
+      const y = a + 1;
+      A(y);
+      return;
     }
-    const [firstDate, setFirstDate] = useState(startDate);
-    const [amountOfDaysToShow, setAmountOfDaysToShow] = useState(1);
-    const [enableInitialAnimation, setEnableInitialAnimation] = useState(false);
-    // The base for reacting on changing width of the wrapping element.
-    // It uses a ResizeObserver under the hood.
-    const columnWrapperRef = useRef(null);
-    const [columnWrapperWidth] = useElementSize(columnWrapperRef);
-    const previous = usePrevious(getDateString(firstDate));
-    const animationDirection = getDateString(firstDate) > previous ? ANIMATION_NEXT : ANIMATION_BACK;
-    // Update startDate from outside
-    const [previousStartDate, setPreviousStartDate] = useState(startDate);
-    if (getDateString(startDate) !== getDateString(previousStartDate)) {
-        setFirstDate(startDate);
-        setPreviousStartDate(startDate);
+    if (Q) {
+      const y = a - 1;
+      A(y);
+      return;
     }
-    useAfterMount(() => {
-        setEnableInitialAnimation(true);
-    }, []);
-    useEffect(() => {
-        if (!columnWrapperRef.current) {
-            return;
-        }
-        const firstItem = getFirstColumnItem(columnWrapperRef.current.children[0]);
-        if (!firstItem) {
-            return;
-        }
-        // Get the width of the first column to calculate how many columns fit on one page
-        // according to the given minWidth per column
-        const columnWidth = firstItem.getBoundingClientRect().width;
-        // Limit columns per page for given min and max values
-        const allowForLessColumns = amountOfDaysToShow - 1 >= minDays;
-        const allowForMoreColumns = amountOfDaysToShow + 1 <= maxDays;
-        const goSmaller = allowForLessColumns && columnWidth <= minDayWith;
-        const goBigger = allowForMoreColumns && (amountOfDaysToShow + 1) * minDayWith <= columnWrapperWidth;
-        if (goBigger) {
-            const newValue = amountOfDaysToShow + 1;
-            setAmountOfDaysToShow(newValue);
-            return;
-        }
-        if (goSmaller) {
-            const newValue = amountOfDaysToShow - 1;
-            setAmountOfDaysToShow(newValue);
-            return;
-        }
-    }, [columnWrapperWidth, columnWrapperRef.current, amountOfDaysToShow, firstDate]);
-    const handleNext = () => {
-        const newFirstDate = new Date(firstDate);
-        newFirstDate.setDate(newFirstDate.getDate() + amountOfDaysToShow);
-        setFirstDate(newFirstDate);
-        onNextClick(newFirstDate);
-    };
-    const handlePrev = () => {
-        const newFirstDate = new Date(firstDate);
-        newFirstDate.setDate(newFirstDate.getDate() - amountOfDaysToShow);
-        setFirstDate(newFirstDate);
-        onPreviousClick(newFirstDate);
-    };
-    // Re-calculate the dates to show depending on the amount of days to show
-    const dates = [];
-    let addDays = true;
-    let index = 1;
-    while (addDays) {
-        const currentDate = new Date(firstDate);
-        currentDate.setDate(firstDate.getDate() + index);
-        const isSaturday = currentDate.getDay() === 6;
-        const isSunday = currentDate.getDay() === 0;
-        const isWeekend = isSaturday || isSunday;
-        if (isWeekend && !skipWeekends) {
-            dates.push(currentDate);
-        }
-        else if (!isWeekend) {
-            dates.push(currentDate);
-        }
-        index++;
-        if (dates.length === amountOfDaysToShow) {
-            addDays = false;
-        }
-    }
-    const wrapperClassNames = classNames('CalenderStripe', !hasDisplayClass(className) && 'display-flex', !hasAlignItemsClass(className) && 'align-items-center', !hasOverflowClass(className) && 'overflow-hidden', !hasBgClass(className) && 'bg-white', !hasBorderClass(className) && 'border', !hasRoundedClass(className) && 'rounded', className);
-    const baseButtonClassNames = classNames(!hasAlignItemsClass(buttonClassName) && 'align-items-center', !hasDisplayClass(buttonClassName) && 'display-flex', !hasHoverScaleClass(buttonClassName) && 'hover-scale-105', !hasHoverTextColorClass(buttonClassName) && 'hover-text-color-darkest', !hasPaddingClass(buttonClassName) && 'padding-10', !hasCursorClass(buttonClassName) && 'cursor-pointer', !hasTextColorClass(buttonClassName) && 'text-color-darker', !hasTextSizeClass(buttonClassName) && 'text-size-12', !hasAlignSelfClass(buttonClassName) && 'align-self-stretch', buttonClassName);
-    const daysWrapperClassNames = classNames(!hasDisplayClass(daysWrapperClassName) && 'display-flex', !hasSpaceClass(daysWrapperClassName) && 'space-x--1', !hasUserSelectClass(daysWrapperClassName) && 'user-select-none', daysWrapperClassName);
-    const dayWrapperClassNames = classNames(ITEM_NAME, !hasFlexClass(dayWrapperClassName) && 'flex-1-1-0', !hasSpaceClass(dayWrapperClassName) && 'space-x--1', !hasUserSelectClass(dayWrapperClassName) && 'user-select-none', dayWrapperClassName);
-    return (_jsxs("div", { ref: ref, className: wrapperClassNames, children: [_jsx("div", { className: baseButtonClassNames, onClick: handlePrev, children: _jsx("span", { className: 'rioglyph rioglyph-chevron-left' }) }), _jsx("div", { className: 'flex-1-1 overflow-hidden', ref: columnWrapperRef, children: _jsx(AnimatePresence, { mode: 'wait', custom: animationDirection, children: _jsx(motion.div, { variants: variants, initial: enableInitialAnimation ? 'pageEnter' : false, animate: 'pageCenter', custom: animationDirection, transition: { duration: ANIMATION_DURATION }, children: _jsx("div", { className: daysWrapperClassNames, children: dates.map(date => (_jsx("div", { className: dayWrapperClassNames, children: renderDay ? renderDay(date) : null }, `${getDateString(date)}`))) }) }, getDateString(firstDate)) }) }), _jsx("div", { className: baseButtonClassNames, onClick: handleNext, children: _jsx("span", { className: 'rioglyph rioglyph-chevron-right' }) })] }));
+  }, [S, c.current, a, r]);
+  const q = () => {
+    const e = new Date(r);
+    e.setDate(e.getDate() + a), g(e), U(e);
+  }, K = () => {
+    const e = new Date(r);
+    e.setDate(e.getDate() - a), g(e), z(e);
+  }, p = [];
+  let I = !0, T = 1;
+  for (; I; ) {
+    const e = new Date(r);
+    e.setDate(r.getDate() + T);
+    const D = e.getDay() === 6, N = e.getDay() === 0, u = D || N;
+    u && !L ? p.push(e) : u || p.push(e), T++, p.length === a && (I = !1);
+  }
+  const $ = f(
+    "CalenderStripe",
+    !v(o) && "display-flex",
+    !k(o) && "align-items-center",
+    !le(o) && "overflow-hidden",
+    !ce(o) && "bg-white",
+    !me(o) && "border",
+    !de(o) && "rounded",
+    o
+  ), W = f(
+    !k(s) && "align-items-center",
+    !v(s) && "display-flex",
+    !pe(s) && "hover-scale-105",
+    !ue(s) && "hover-text-color-darkest",
+    !he(s) && "padding-10",
+    !fe(s) && "cursor-pointer",
+    !Ce(s) && "text-color-darker",
+    !ge(s) && "text-size-12",
+    !De(s) && "align-self-stretch",
+    s
+  ), G = f(
+    !v(m) && "display-flex",
+    !F(m) && "space-x--1",
+    !M(m) && "user-select-none",
+    m
+  ), J = f(
+    B,
+    !Ne(d) && "flex-1-1-0",
+    !F(d) && "space-x--1",
+    !M(d) && "user-select-none",
+    d
+  );
+  return /* @__PURE__ */ Z("div", { ref: b, className: $, children: [
+    /* @__PURE__ */ n("div", { className: W, onClick: K, children: /* @__PURE__ */ n("span", { className: "rioglyph rioglyph-chevron-left" }) }),
+    /* @__PURE__ */ n("div", { className: "flex-1-1 overflow-hidden", ref: c, children: /* @__PURE__ */ n(ae, { mode: "wait", custom: w, children: /* @__PURE__ */ n(
+      ne.div,
+      {
+        variants: we,
+        initial: H ? "pageEnter" : !1,
+        animate: "pageCenter",
+        custom: w,
+        transition: { duration: Ae },
+        children: /* @__PURE__ */ n("div", { className: G, children: p.map((e) => /* @__PURE__ */ n("div", { className: J, children: C ? C(e) : null }, `${i(e)}`)) })
+      },
+      i(r)
+    ) }) }),
+    /* @__PURE__ */ n("div", { className: W, onClick: q, children: /* @__PURE__ */ n("span", { className: "rioglyph rioglyph-chevron-right" }) })
+  ] });
 });
-export default CalendarStripe;
+export {
+  be as default
+};
+//# sourceMappingURL=CalendarStripe.js.map