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

package/components/fade/FadeExpander.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FadeExpander.js","sources":["../../../src/components/fade/FadeExpander.tsx"],"sourcesContent":["import { useState, useEffect, type PropsWithChildren, useRef } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\n\ntype FadeExpanderProps = {\n    /**\n     * Defines if the content is shown or not.\n     *\n     * @default false\n     */\n    show: boolean;\n\n    /**\n     * Allows customization of animation duration.\n     *\n     * @default 0.2\n     */\n    duration?: number;\n\n    /**\n     * Delay in seconds before starting the animation.\n     *\n     * @default 0\n     */\n    delay?: number;\n\n    /**\n     * Additional classes set to the wrapper element.\n     */\n    className?: string;\n};\n\nconst THRESHOLD_TIMEOUT_MS = 200;\n\nconst FadeExpander = (props: PropsWithChildren<FadeExpanderProps>) => {\n    const { children, show = false, duration = 0.2, delay = 0, className = '' } = props;\n\n    const [isVisible, setIsVisible] = useState(show);\n    const [overflow, setOverflow] = useState('hidden'); // Start with hidden overflow\n\n    const durationRef = useRef(duration);\n\n    // Effect to manage visibility based on show prop\n    useEffect(() => {\n        if (show) {\n            // Set to visible when show is true\n            setIsVisible(true);\n        } else {\n            // Set overflow to hidden immediately when show is false\n            setOverflow('hidden');\n\n            // Delay setting isVisible to false so the overflow can change before\n            setTimeout(() => {\n                setIsVisible(false);\n            }, 0);\n        }\n    }, [show]);\n\n    const handleAnimationComplete = () => {\n        if (show) {\n            // Set overflow to visible after animation is done\n            setTimeout(() => setOverflow('visible'), durationRef.current * 1000 + THRESHOLD_TIMEOUT_MS);\n        }\n    };\n\n    return (\n        // @ts-ignore\n        <AnimatePresence onExitComplete={() => setOverflow('hidden')}>\n            {isVisible && (\n                <motion.div\n                    initial={{ height: 0, opacity: 0 }}\n                    animate={{ height: 'auto', opacity: 1 }}\n                    exit={{ height: 0, opacity: 0 }}\n                    transition={{\n                        height: { duration, delay },\n                        opacity: { duration, delay },\n                        ease: 'easeIn',\n                    }}\n                    // To ensures smooth height transition, the overflow should be \"hidden\" during the animation\n                    style={{ overflow }}\n                    onAnimationComplete={handleAnimationComplete}\n                    className={className}\n                >\n                    {children}\n                </motion.div>\n            )}\n        </AnimatePresence>\n    );\n};\n\nexport default FadeExpander;\n"],"names":["THRESHOLD_TIMEOUT_MS","FadeExpander","props","children","show","duration","delay","className","isVisible","setIsVisible","useState","overflow","setOverflow","durationRef","useRef","useEffect","handleAnimationComplete","AnimatePresence","jsx","motion"],"mappings":";;;AA+BA,MAAMA,IAAuB,KAEvBC,IAAe,CAACC,MAAgD;AAClE,QAAM,EAAE,UAAAC,GAAU,MAAAC,IAAO,IAAO,UAAAC,IAAW,KAAK,OAAAC,IAAQ,GAAG,WAAAC,IAAY,GAAA,IAAOL,GAExE,CAACM,GAAWC,CAAY,IAAIC,EAASN,CAAI,GACzC,CAACO,GAAUC,CAAW,IAAIF,EAAS,QAAQ,GAE3CG,IAAcC,EAAOT,CAAQ;AAGnC,EAAAU,EAAU,MAAM;AACZ,IAAIX,IAEAK,EAAa,EAAI,KAGjBG,EAAY,QAAQ,GAGpB,WAAW,MAAM;AACb,MAAAH,EAAa,EAAK;AAAA,IACtB,GAAG,CAAC;AAAA,EAEZ,GAAG,CAACL,CAAI,CAAC;AAET,QAAMY,IAA0B,MAAM;AAClC,IAAIZ,KAEA,WAAW,MAAMQ,EAAY,SAAS,GAAGC,EAAY,UAAU,MAAOb,CAAoB;AAAA,EAElG;AAEA;AAAA;AAAA,sBAEKiB,GAAA,EAAgB,gBAAgB,MAAML,EAAY,QAAQ,GACtD,UAAAJ,KACG,gBAAAU;AAAA,MAACC,EAAO;AAAA,MAAP;AAAA,QACG,SAAS,EAAE,QAAQ,GAAG,SAAS,EAAA;AAAA,QAC/B,SAAS,EAAE,QAAQ,QAAQ,SAAS,EAAA;AAAA,QACpC,MAAM,EAAE,QAAQ,GAAG,SAAS,EAAA;AAAA,QAC5B,YAAY;AAAA,UACR,QAAQ,EAAE,UAAAd,GAAU,OAAAC,EAAA;AAAA,UACpB,SAAS,EAAE,UAAAD,GAAU,OAAAC,EAAA;AAAA,UACrB,MAAM;AAAA,QAAA;AAAA,QAGV,OAAO,EAAE,UAAAK,EAAA;AAAA,QACT,qBAAqBK;AAAA,QACrB,WAAAT;AAAA,QAEC,UAAAJ;AAAA,MAAA;AAAA,IAAA,EACL,CAER;AAAA;AAER;"}

package/components/fade/FadeUp.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentProps, type PropsWithChildren } from 'react';
+import { ComponentProps, PropsWithChildren } from 'react';
 type FadeUpProps = Omit<ComponentProps<'div'>, 'onAnimationStart' | 'onDragStart' | 'onDragEnd' | 'onDrag'> & {
     /**
      * Defines the time the animation should wait until it starts.

package/components/fade/FadeUp.js

@@ -1,27 +1,35 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
-import { motion } from 'motion/react';
-import useOnScreen from "../../hooks/useOnScreen.js";
-const FadeUp = (props) => {
-    const { delay = 0, duration = 0.4, className = '', offset = 15, children, ...remainingProps } = props;
-    const ref = useRef(null);
-    const isInView = useOnScreen(ref);
-    const [isVisible, setIsVisible] = useState(false);
-    const variants = {
-        hidden: {
-            opacity: 0,
-            y: offset,
-        },
-        visible: {
-            opacity: 1,
-            y: 0,
-        },
-    };
-    useEffect(() => {
-        if (isInView && !isVisible) {
-            setIsVisible(true);
-        }
-    }, [isInView, isVisible]);
-    return (_jsx(motion.div, { ref: ref, variants: variants, initial: 'hidden', animate: isVisible ? 'visible' : 'hidden', transition: { delay, type: 'spring', duration }, ...remainingProps, className: className, children: children }));
+import { jsx as m } from "react/jsx-runtime";
+import { useRef as p, useState as u, useEffect as y } from "react";
+import { motion as b } from "motion/react";
+import h from "../../hooks/useOnScreen.js";
+const I = (s) => {
+  const { delay: n = 0, duration: o = 0.4, className: r = "", offset: a = 15, children: f, ...c } = s, e = p(null), t = h(e), [i, d] = u(!1), l = {
+    hidden: {
+      opacity: 0,
+      y: a
+    },
+    visible: {
+      opacity: 1,
+      y: 0
+    }
+  };
+  return y(() => {
+    t && !i && d(!0);
+  }, [t, i]), /* @__PURE__ */ m(
+    b.div,
+    {
+      ref: e,
+      variants: l,
+      initial: "hidden",
+      animate: i ? "visible" : "hidden",
+      transition: { delay: n, type: "spring", duration: o },
+      ...c,
+      className: r,
+      children: f
+    }
+  );
 };
-export default FadeUp;
+export {
+  I as default
+};
+//# sourceMappingURL=FadeUp.js.map

package/components/fade/FadeUp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FadeUp.js","sources":["../../../src/components/fade/FadeUp.tsx"],"sourcesContent":["import { type ComponentProps, type PropsWithChildren, useEffect, useRef, useState } from 'react';\nimport { motion } from 'motion/react';\n\nimport useOnScreen from '../../hooks/useOnScreen';\n\ntype FadeUpProps = Omit<ComponentProps<'div'>, 'onAnimationStart' | 'onDragStart' | 'onDragEnd' | 'onDrag'> & {\n    /**\n     * Defines the time the animation should wait until it starts.\n     *\n     * @default 0\n     */\n    delay?: number;\n\n    /**\n     * Defines the duration in seconds of the fade up animation.\n     *\n     * @default 0.4\n     */\n    duration?: number;\n\n    /**\n     * Defines the y offset from the bottom where the element starts to fade in.\n     *\n     * @default 15\n     */\n    offset?: number;\n\n    /**\n     * Additional classes names added to the motion div wrapper.\n     */\n    className?: string;\n};\n\nconst FadeUp = (props: PropsWithChildren<FadeUpProps>) => {\n    const { delay = 0, duration = 0.4, className = '', offset = 15, children, ...remainingProps } = props;\n\n    const ref = useRef(null);\n    const isInView = useOnScreen(ref);\n    const [isVisible, setIsVisible] = useState(false);\n\n    const variants = {\n        hidden: {\n            opacity: 0,\n            y: offset,\n        },\n        visible: {\n            opacity: 1,\n            y: 0,\n        },\n    };\n\n    useEffect(() => {\n        if (isInView && !isVisible) {\n            setIsVisible(true);\n        }\n    }, [isInView, isVisible]);\n\n    return (\n        <motion.div\n            ref={ref}\n            variants={variants}\n            initial='hidden'\n            animate={isVisible ? 'visible' : 'hidden'}\n            transition={{ delay, type: 'spring', duration }}\n            {...remainingProps}\n            className={className}\n        >\n            {children}\n        </motion.div>\n    );\n};\n\nexport default FadeUp;\n"],"names":["FadeUp","props","delay","duration","className","offset","children","remainingProps","ref","useRef","isInView","useOnScreen","isVisible","setIsVisible","useState","variants","useEffect","jsx","motion"],"mappings":";;;;AAiCA,MAAMA,IAAS,CAACC,MAA0C;AACtD,QAAM,EAAE,OAAAC,IAAQ,GAAG,UAAAC,IAAW,KAAK,WAAAC,IAAY,IAAI,QAAAC,IAAS,IAAI,UAAAC,GAAU,GAAGC,EAAA,IAAmBN,GAE1FO,IAAMC,EAAO,IAAI,GACjBC,IAAWC,EAAYH,CAAG,GAC1B,CAACI,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAE1CC,IAAW;AAAA,IACb,QAAQ;AAAA,MACJ,SAAS;AAAA,MACT,GAAGV;AAAA,IAAA;AAAA,IAEP,SAAS;AAAA,MACL,SAAS;AAAA,MACT,GAAG;AAAA,IAAA;AAAA,EACP;AAGJ,SAAAW,EAAU,MAAM;AACZ,IAAIN,KAAY,CAACE,KACbC,EAAa,EAAI;AAAA,EAEzB,GAAG,CAACH,GAAUE,CAAS,CAAC,GAGpB,gBAAAK;AAAA,IAACC,EAAO;AAAA,IAAP;AAAA,MACG,KAAAV;AAAA,MACA,UAAAO;AAAA,MACA,SAAQ;AAAA,MACR,SAASH,IAAY,YAAY;AAAA,MACjC,YAAY,EAAE,OAAAV,GAAO,MAAM,UAAU,UAAAC,EAAA;AAAA,MACpC,GAAGI;AAAA,MACJ,WAAAH;AAAA,MAEC,UAAAE;AAAA,IAAA;AAAA,EAAA;AAGb;"}

package/components/feedback/FeedbackInlineButtons.d.ts

@@ -1,5 +1,4 @@
-import type React from 'react';
-import type { ComponentProps } from 'react';
+import { default as React, ComponentProps } from 'react';
 type FeedbackInlineButtonsProps = ComponentProps<'div'> & {
     /**
      * Optional headline inlined with the buttons.

package/components/feedback/FeedbackInlineButtons.js

@@ -1,6 +1,19 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const FeedbackInlineButtons = (props) => {
-    const { buttons = [], headline, ...remainingProps } = props;
-    return (_jsxs("div", { ...remainingProps, className: 'display-flex flex-wrap align-items-center column-gap-15 row-gap-5 user-select-none', children: [headline && _jsx("div", { className: 'text-color-dark', children: headline }), _jsx("div", { className: 'btn-toolbar gap-5', children: buttons.map(button => button) })] }));
+import { jsxs as t, jsx as a } from "react/jsx-runtime";
+const i = (n) => {
+  const { buttons: s = [], headline: e, ...l } = n;
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      ...l,
+      className: "display-flex flex-wrap align-items-center column-gap-15 row-gap-5 user-select-none",
+      children: [
+        e && /* @__PURE__ */ a("div", { className: "text-color-dark", children: e }),
+        /* @__PURE__ */ a("div", { className: "btn-toolbar gap-5", children: s.map((r) => r) })
+      ]
+    }
+  );
 };
-export default FeedbackInlineButtons;
+export {
+  i as default
+};
+//# sourceMappingURL=FeedbackInlineButtons.js.map

package/components/feedback/FeedbackInlineButtons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeedbackInlineButtons.js","sources":["../../../src/components/feedback/FeedbackInlineButtons.tsx"],"sourcesContent":["import type React from 'react';\nimport type { ComponentProps } from 'react';\n\ntype FeedbackInlineButtonsProps = ComponentProps<'div'> & {\n    /**\n     * Optional headline inlined with the buttons.\n     */\n    headline?: React.ReactNode;\n\n    /**\n     * List of buttons to be shown.\n     */\n    buttons?: React.ReactNode[];\n};\n\nconst FeedbackInlineButtons = (props: FeedbackInlineButtonsProps) => {\n    const { buttons = [], headline, ...remainingProps } = props;\n\n    return (\n        <div\n            {...remainingProps}\n            className='display-flex flex-wrap align-items-center column-gap-15 row-gap-5 user-select-none'\n        >\n            {headline && <div className='text-color-dark'>{headline}</div>}\n            <div className='btn-toolbar gap-5'>{buttons.map(button => button)}</div>\n        </div>\n    );\n};\n\nexport default FeedbackInlineButtons;\n"],"names":["FeedbackInlineButtons","props","buttons","headline","remainingProps","jsxs","jsx","button"],"mappings":";AAeA,MAAMA,IAAwB,CAACC,MAAsC;AACjE,QAAM,EAAE,SAAAC,IAAU,CAAA,GAAI,UAAAC,GAAU,GAAGC,MAAmBH;AAEtD,SACI,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGD;AAAA,MACJ,WAAU;AAAA,MAET,UAAA;AAAA,QAAAD,KAAY,gBAAAG,EAAC,OAAA,EAAI,WAAU,mBAAmB,UAAAH,GAAS;AAAA,QACxD,gBAAAG,EAAC,SAAI,WAAU,qBAAqB,YAAQ,IAAI,CAAAC,MAAUA,CAAM,EAAA,CAAE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG9E;"}

package/components/feedback/FeedbackRating.d.ts

@@ -1,5 +1,5 @@
-import React, { type ComponentProps } from 'react';
-import type { BUTTON_SIZE, BUTTON_STYLE, BUTTON_VARIANT } from '../button/Button';
+import { default as React, ComponentProps } from 'react';
+import { BUTTON_SIZE, BUTTON_STYLE, BUTTON_VARIANT } from '../button/Button';
 type FeedbackRatingProps = ComponentProps<'div'> & {
     /**
      * Optional headline

package/components/feedback/FeedbackRating.js

@@ -1,21 +1,63 @@
-import { createElement as _createElement } from "react";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import classNames from 'classnames';
-import ToggleButton from "../button/ToggleButton.js";
-const FeedbackRating = (props) => {
-    const { headline, count = 1, circleButtons = false, buttonLabels, buttonStyles, buttonClassName = '', leftLabel, rightLabel, leadingIcon, trailingIcon, onRatingChanged = () => { }, ...remainingProps } = props;
-    const [rating, setRating] = useState();
-    const handleRating = (value) => {
-        setRating(value);
-        onRatingChanged(value);
-    };
-    const hasSubLabels = !!leftLabel || !!rightLabel;
-    const buttonWrapperClasses = classNames('display-flex gap-10', hasSubLabels ? 'align-items-start' : 'align-items-center', 'text-size-14', 'margin-bottom-25');
-    const leadingTrailingIconClasses = classNames('display-flex align-items-center', 'text-size-200pct', hasSubLabels && 'padding-top-3');
-    return (_jsxs("div", { ...remainingProps, className: 'FeedbackRating', children: [headline && _jsx("div", { className: 'text-medium text-size-16 margin-bottom-10', children: headline }), _jsxs("div", { className: buttonWrapperClasses, children: [leadingIcon && _jsx("div", { className: leadingTrailingIconClasses, children: leadingIcon }), _jsxs("div", { children: [_jsx("div", { className: 'display-flex flex-wrap gap-10', children: Array.from({ length: count }, (_, index) => {
-                                    const indexNumber = index + 1;
-                                    return (_createElement(ToggleButton, { ...buttonStyles?.[index], key: indexNumber, active: rating === indexNumber, onClick: (toggled) => handleRating(toggled ? indexNumber : undefined), className: `${circleButtons ? 'rounded-circle aspect-ratio-1' : ''} ${buttonClassName} ${buttonStyles?.[index].className ?? ''}` }, buttonLabels?.[index] ?? indexNumber));
-                                }) }), hasSubLabels && (_jsxs("div", { className: 'display-flex justify-content-between margin-top-5 gap-25', children: [leftLabel ? _jsx("label", { className: 'word-wrap text-color-dark', children: leftLabel }) : _jsx("div", {}), rightLabel ? _jsx("label", { className: 'word-wrap text-color-dark', children: rightLabel }) : _jsx("div", {})] }))] }), trailingIcon && _jsx("div", { className: leadingTrailingIconClasses, children: trailingIcon })] })] }));
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { useState as L, createElement as j } from "react";
+import p from "classnames";
+import z from "../button/ToggleButton.js";
+const F = (b) => {
+  const {
+    headline: c,
+    count: h = 1,
+    circleButtons: u = !1,
+    buttonLabels: f,
+    buttonStyles: o,
+    buttonClassName: N = "",
+    leftLabel: i,
+    rightLabel: l,
+    leadingIcon: d,
+    trailingIcon: m,
+    onRatingChanged: x = () => {
+    },
+    ...v
+  } = b, [y, k] = L(), w = (r) => {
+    k(r), x(r);
+  }, n = !!i || !!l, C = p(
+    "display-flex gap-10",
+    n ? "align-items-start" : "align-items-center",
+    "text-size-14",
+    "margin-bottom-25"
+  ), g = p(
+    "display-flex align-items-center",
+    "text-size-200pct",
+    n && "padding-top-3"
+  );
+  return /* @__PURE__ */ s("div", { ...v, className: "FeedbackRating", children: [
+    c && /* @__PURE__ */ e("div", { className: "text-medium text-size-16 margin-bottom-10", children: c }),
+    /* @__PURE__ */ s("div", { className: C, children: [
+      d && /* @__PURE__ */ e("div", { className: g, children: d }),
+      /* @__PURE__ */ s("div", { children: [
+        /* @__PURE__ */ e("div", { className: "display-flex flex-wrap gap-10", children: Array.from({ length: h }, (r, a) => {
+          const t = a + 1;
+          return /* @__PURE__ */ j(
+            z,
+            {
+              ...o?.[a],
+              key: t,
+              active: y === t,
+              onClick: (R) => w(R ? t : void 0),
+              className: `${u ? "rounded-circle aspect-ratio-1" : ""} ${N} ${o?.[a].className ?? ""}`
+            },
+            f?.[a] ?? t
+          );
+        }) }),
+        n && /* @__PURE__ */ s("div", { className: "display-flex justify-content-between margin-top-5 gap-25", children: [
+          i ? /* @__PURE__ */ e("label", { className: "word-wrap text-color-dark", children: i }) : /* @__PURE__ */ e("div", {}),
+          l ? /* @__PURE__ */ e("label", { className: "word-wrap text-color-dark", children: l }) : /* @__PURE__ */ e("div", {})
+        ] })
+      ] }),
+      m && /* @__PURE__ */ e("div", { className: g, children: m })
+    ] })
+  ] });
 };
-export default FeedbackRating;
+export {
+  F as default
+};
+//# sourceMappingURL=FeedbackRating.js.map

package/components/feedback/FeedbackRating.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeedbackRating.js","sources":["../../../src/components/feedback/FeedbackRating.tsx"],"sourcesContent":["import React, { type ComponentProps, useState } from 'react';\nimport classNames from 'classnames';\n\nimport ToggleButton from '../button/ToggleButton';\nimport type { BUTTON_SIZE, BUTTON_STYLE, BUTTON_VARIANT } from '../button/Button';\n\ntype FeedbackRatingProps = ComponentProps<'div'> & {\n    /**\n     * Optional headline\n     */\n    headline?: React.ReactNode;\n\n    /**\n     * The amount of toggle buttons used to rate.\n     *\n     * @default 1\n     */\n    count: number;\n\n    /**\n     * Defines whether the buttons are round.\n     *\n     * @default false\n     */\n    circleButtons?: boolean;\n\n    /**\n     * Optional class names applied to all the buttons.\n     * If you need more control on styling individual buttons, see `buttonStyles`.\n     */\n    buttonClassName?: string;\n\n    /**\n     * Array of button labels that will be used instead of the index.\n     * There needs to be a label for each button defined.\n     */\n    buttonLabels?: React.ReactNode[];\n\n    /**\n     * Array of button styles to individually define the button size, style and variant.\n     * There needs to be a item for each button defined.\n     */\n    buttonStyles?: { bsSize?: BUTTON_SIZE; bsStyle?: BUTTON_STYLE; variant?: BUTTON_VARIANT; className?: string }[];\n\n    /**\n     * Left aligned label to name the lowest rating option.\n     */\n    leftLabel?: React.ReactNode;\n\n    /**\n     * Right aligned label to name the highest rating option.\n     */\n    rightLabel?: React.ReactNode;\n\n    /**\n     * Additional icon placed in front of the rating buttons.\n     */\n    leadingIcon?: React.ReactNode;\n\n    /**\n     * Additional icon placed after the rating buttons.\n     */\n    trailingIcon?: React.ReactNode;\n\n    /**\n     * Callback triggered when the rating changes.\n     *\n     * @param rating The rating value. Undefined, when a toggle is unchecked.\n     * @returns\n     */\n    onRatingChanged?: (rating: number | undefined) => void;\n};\n\nconst FeedbackRating = (props: FeedbackRatingProps) => {\n    const {\n        headline,\n        count = 1,\n        circleButtons = false,\n        buttonLabels,\n        buttonStyles,\n        buttonClassName = '',\n        leftLabel,\n        rightLabel,\n        leadingIcon,\n        trailingIcon,\n        onRatingChanged = () => {},\n        ...remainingProps\n    } = props;\n\n    const [rating, setRating] = useState<number>();\n\n    const handleRating = (value: number | undefined) => {\n        setRating(value);\n        onRatingChanged(value);\n    };\n\n    const hasSubLabels = !!leftLabel || !!rightLabel;\n\n    const buttonWrapperClasses = classNames(\n        'display-flex gap-10',\n        hasSubLabels ? 'align-items-start' : 'align-items-center',\n        'text-size-14',\n        'margin-bottom-25'\n    );\n\n    const leadingTrailingIconClasses = classNames(\n        'display-flex align-items-center',\n        'text-size-200pct',\n        hasSubLabels && 'padding-top-3'\n    );\n\n    return (\n        <div {...remainingProps} className='FeedbackRating'>\n            {headline && <div className='text-medium text-size-16 margin-bottom-10'>{headline}</div>}\n            <div className={buttonWrapperClasses}>\n                {leadingIcon && <div className={leadingTrailingIconClasses}>{leadingIcon}</div>}\n                <div>\n                    <div className='display-flex flex-wrap gap-10'>\n                        {Array.from({ length: count }, (_, index) => {\n                            const indexNumber = index + 1;\n                            return (\n                                <ToggleButton\n                                    {...buttonStyles?.[index]}\n                                    key={indexNumber}\n                                    active={rating === indexNumber}\n                                    onClick={(toggled: boolean) => handleRating(toggled ? indexNumber : undefined)}\n                                    className={`${circleButtons ? 'rounded-circle aspect-ratio-1' : ''} ${buttonClassName} ${buttonStyles?.[index].className ?? ''}`}\n                                >\n                                    {buttonLabels?.[index] ?? indexNumber}\n                                </ToggleButton>\n                            );\n                        })}\n                    </div>\n                    {hasSubLabels && (\n                        <div className='display-flex justify-content-between margin-top-5 gap-25'>\n                            {leftLabel ? <label className='word-wrap text-color-dark'>{leftLabel}</label> : <div />}\n                            {rightLabel ? <label className='word-wrap text-color-dark'>{rightLabel}</label> : <div />}\n                        </div>\n                    )}\n                </div>\n                {trailingIcon && <div className={leadingTrailingIconClasses}>{trailingIcon}</div>}\n            </div>\n        </div>\n    );\n};\n\nexport default FeedbackRating;\n"],"names":["FeedbackRating","props","headline","count","circleButtons","buttonLabels","buttonStyles","buttonClassName","leftLabel","rightLabel","leadingIcon","trailingIcon","onRatingChanged","remainingProps","rating","setRating","useState","handleRating","value","hasSubLabels","buttonWrapperClasses","classNames","leadingTrailingIconClasses","jsxs","jsx","_","index","indexNumber","createElement","ToggleButton","toggled"],"mappings":";;;;AAyEA,MAAMA,IAAiB,CAACC,MAA+B;AACnD,QAAM;AAAA,IACF,UAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,eAAAC,IAAgB;AAAA,IAChB,cAAAC;AAAA,IACA,cAAAC;AAAA,IACA,iBAAAC,IAAkB;AAAA,IAClB,WAAAC;AAAA,IACA,YAAAC;AAAA,IACA,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,iBAAAC,IAAkB,MAAM;AAAA,IAAC;AAAA,IACzB,GAAGC;AAAA,EAAA,IACHZ,GAEE,CAACa,GAAQC,CAAS,IAAIC,EAAA,GAEtBC,IAAe,CAACC,MAA8B;AAChD,IAAAH,EAAUG,CAAK,GACfN,EAAgBM,CAAK;AAAA,EACzB,GAEMC,IAAe,CAAC,CAACX,KAAa,CAAC,CAACC,GAEhCW,IAAuBC;AAAA,IACzB;AAAA,IACAF,IAAe,sBAAsB;AAAA,IACrC;AAAA,IACA;AAAA,EAAA,GAGEG,IAA6BD;AAAA,IAC/B;AAAA,IACA;AAAA,IACAF,KAAgB;AAAA,EAAA;AAGpB,SACI,gBAAAI,EAAC,OAAA,EAAK,GAAGV,GAAgB,WAAU,kBAC9B,UAAA;AAAA,IAAAX,KAAY,gBAAAsB,EAAC,OAAA,EAAI,WAAU,6CAA6C,UAAAtB,GAAS;AAAA,IAClF,gBAAAqB,EAAC,OAAA,EAAI,WAAWH,GACX,UAAA;AAAA,MAAAV,KAAe,gBAAAc,EAAC,OAAA,EAAI,WAAWF,GAA6B,UAAAZ,GAAY;AAAA,wBACxE,OAAA,EACG,UAAA;AAAA,QAAA,gBAAAc,EAAC,OAAA,EAAI,WAAU,iCACV,UAAA,MAAM,KAAK,EAAE,QAAQrB,EAAA,GAAS,CAACsB,GAAGC,MAAU;AACzC,gBAAMC,IAAcD,IAAQ;AAC5B,iBACI,gBAAAE;AAAA,YAACC;AAAA,YAAA;AAAA,cACI,GAAGvB,IAAeoB,CAAK;AAAA,cACxB,KAAKC;AAAA,cACL,QAAQb,MAAWa;AAAA,cACnB,SAAS,CAACG,MAAqBb,EAAaa,IAAUH,IAAc,MAAS;AAAA,cAC7E,WAAW,GAAGvB,IAAgB,kCAAkC,EAAE,IAAIG,CAAe,IAAID,IAAeoB,CAAK,EAAE,aAAa,EAAE;AAAA,YAAA;AAAA,YAE7HrB,IAAeqB,CAAK,KAAKC;AAAA,UAAA;AAAA,QAGtC,CAAC,EAAA,CACL;AAAA,QACCR,KACG,gBAAAI,EAAC,OAAA,EAAI,WAAU,4DACV,UAAA;AAAA,UAAAf,sBAAa,SAAA,EAAM,WAAU,6BAA6B,UAAAA,GAAU,sBAAY,OAAA,CAAA,CAAI;AAAA,UACpFC,sBAAc,SAAA,EAAM,WAAU,6BAA6B,UAAAA,EAAA,CAAW,sBAAY,OAAA,CAAA,CAAI;AAAA,QAAA,EAAA,CAC3F;AAAA,MAAA,GAER;AAAA,MACCE,KAAgB,gBAAAa,EAAC,OAAA,EAAI,WAAWF,GAA6B,UAAAX,EAAA,CAAa;AAAA,IAAA,EAAA,CAC/E;AAAA,EAAA,GACJ;AAER;"}

package/components/feedback/FeedbackReactions.d.ts

@@ -1,4 +1,4 @@
-import React, { type ComponentProps } from 'react';
+import { default as React, ComponentProps } from 'react';
 type FeedbackReactionsProps = ComponentProps<'div'> & {
     /**
      * Optional headline inlined with the buttons.

package/components/feedback/FeedbackReactions.js

@@ -1,25 +1,114 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from 'react';
-import classNames from 'classnames';
-import { motion } from 'motion/react';
-import useHover from "../../hooks/useHover.js";
-const FeedbackReactions = (props) => {
-    const { headline, animated, labelUp, labelDown, labelPosition = 'bottom', size = 'md', colorFillUp = '', colorFillDown = '', colorHoverUp = 'primary', colorHoverDown = 'primary', onVoteUp = () => { }, onVoteDown = () => { }, itemClassName, ...remainingProps } = props;
-    const hasLabels = !!labelUp || !!labelDown;
-    const wrapperClassName = classNames(hasLabels ? 'display-grid grid-cols-2' : 'display-flex', 'gap-15', 'padding-top-5', 'user-select-none');
-    return (_jsxs("div", { ...remainingProps, className: wrapperClassName, children: [_jsx(FeedbackItem, { size: size, fillColor: colorFillDown, hoverColor: colorHoverDown, animated: animated, iconName: 'thumbs-down', text: labelDown, labelPosition: labelPosition, onClick: onVoteDown, className: itemClassName }), _jsx(FeedbackItem, { size: size, fillColor: colorFillUp, hoverColor: colorHoverUp, animated: animated, iconName: 'thumbs-up', text: labelUp, labelPosition: labelPosition, onClick: onVoteUp, className: itemClassName })] }));
+import { jsxs as f, jsx as l } from "react/jsx-runtime";
+import { useRef as C } from "react";
+import u from "classnames";
+import { motion as y } from "motion/react";
+import v from "../../hooks/useHover.js";
+const z = (m) => {
+  const {
+    headline: x,
+    animated: s,
+    labelUp: t,
+    labelDown: a,
+    labelPosition: r = "bottom",
+    size: e = "md",
+    colorFillUp: p = "",
+    colorFillDown: d = "",
+    colorHoverUp: h = "primary",
+    colorHoverDown: i = "primary",
+    onVoteUp: o = () => {
+    },
+    onVoteDown: b = () => {
+    },
+    itemClassName: n,
+    ...c
+  } = m, g = u(
+    !!t || !!a ? "display-grid grid-cols-2" : "display-flex",
+    "gap-15",
+    "padding-top-5",
+    "user-select-none"
+  );
+  return /* @__PURE__ */ f("div", { ...c, className: g, children: [
+    /* @__PURE__ */ l(
+      N,
+      {
+        size: e,
+        fillColor: d,
+        hoverColor: i,
+        animated: s,
+        iconName: "thumbs-down",
+        text: a,
+        labelPosition: r,
+        onClick: b,
+        className: n
+      }
+    ),
+    /* @__PURE__ */ l(
+      N,
+      {
+        size: e,
+        fillColor: p,
+        hoverColor: h,
+        animated: s,
+        iconName: "thumbs-up",
+        text: t,
+        labelPosition: r,
+        onClick: o,
+        className: n
+      }
+    )
+  ] });
+}, N = (m) => {
+  const {
+    size: x,
+    text: s,
+    iconName: t,
+    onClick: a,
+    fillColor: r,
+    hoverColor: e,
+    animated: p = !1,
+    labelPosition: d = "bottom",
+    className: h
+  } = m, i = C(null), o = v(i), b = u(
+    x === "sm" ? "width-40" : "width-50",
+    "aspect-ratio-1",
+    "border rounded-circle",
+    r ? `bg-${r} text-color-white` : "bg-lightest",
+    o ? `border-color-${e} text-color-${e}` : "border-color-lightest",
+    "display-grid place-items-center",
+    "text-size-14"
+  ), n = u(
+    "display-flex",
+    "gap-10",
+    d === "bottom" ? "flex-column" : "",
+    "align-items-center",
+    "text-center",
+    "cursor-pointer",
+    h
+  ), c = t.includes("up");
+  return /* @__PURE__ */ f("div", { ref: i, className: n, onClick: a, children: [
+    /* @__PURE__ */ l("div", { className: b, children: /* @__PURE__ */ l(
+      y.span,
+      {
+        initial: { y: 0, rotate: 0 },
+        animate: p && o ? { y: [0, c ? -3 : 3, 0], rotate: [0, c ? -10 : 10, 0] } : { y: 0 },
+        transition: {
+          duration: 0.6,
+          repeat: o ? Number.POSITIVE_INFINITY : 0,
+          repeatType: "loop"
+        },
+        className: `rioglyph rioglyph-${t} text-size-200pct`
+      }
+    ) }),
+    /* @__PURE__ */ l(
+      "div",
+      {
+        className: `text-wrap-balance line-height-125rel text-medium ${o ? `text-color-${e}` : "text-color-darker"}`,
+        children: s
+      }
+    )
+  ] });
 };
-const FeedbackItem = (props) => {
-    const { size, text, iconName, onClick, fillColor, hoverColor, animated = false, labelPosition = 'bottom', className, } = props;
-    const ref = useRef(null);
-    const isHover = useHover(ref);
-    const iconClasses = classNames(size === 'sm' ? 'width-40' : 'width-50', 'aspect-ratio-1', 'border rounded-circle', fillColor ? `bg-${fillColor} text-color-white` : 'bg-lightest', isHover ? `border-color-${hoverColor} text-color-${hoverColor}` : 'border-color-lightest', 'display-grid place-items-center', 'text-size-14');
-    const wrapperClassName = classNames('display-flex', 'gap-10', labelPosition === 'bottom' ? 'flex-column' : '', 'align-items-center', 'text-center', 'cursor-pointer', className);
-    const isUp = iconName.includes('up');
-    return (_jsxs("div", { ref: ref, className: wrapperClassName, onClick: onClick, children: [_jsx("div", { className: iconClasses, children: _jsx(motion.span, { initial: { y: 0, rotate: 0 }, animate: animated && isHover ? { y: [0, isUp ? -3 : 3, 0], rotate: [0, isUp ? -10 : 10, 0] } : { y: 0 }, transition: {
-                        duration: 0.6,
-                        repeat: isHover ? Number.POSITIVE_INFINITY : 0,
-                        repeatType: 'loop',
-                    }, className: `rioglyph rioglyph-${iconName} text-size-200pct` }) }), _jsx("div", { className: `text-wrap-balance line-height-125rel text-medium ${isHover ? `text-color-${hoverColor}` : 'text-color-darker'}`, children: text })] }));
+export {
+  z as default
 };
-export default FeedbackReactions;
+//# sourceMappingURL=FeedbackReactions.js.map

package/components/feedback/FeedbackReactions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeedbackReactions.js","sources":["../../../src/components/feedback/FeedbackReactions.tsx"],"sourcesContent":["import React, { type ComponentProps, useRef } from 'react';\nimport classNames from 'classnames';\nimport { motion } from 'motion/react';\n\nimport useHover from '../../hooks/useHover';\n\ntype FeedbackReactionsProps = ComponentProps<'div'> & {\n    /**\n     * Optional headline inlined with the buttons.\n     */\n    headline?: React.ReactNode;\n\n    /**\n     * Size of the reaction buttons.\n     *\n     * @default 'md'\n     */\n    size?: 'sm' | 'md';\n\n    /**\n     * Position of the reaction button labels.\n     *\n     * @default 'bottom'\n     */\n    labelPosition?: 'right' | 'bottom';\n\n    /**\n     * Label for the up button.\n     */\n    labelUp?: React.ReactNode;\n\n    /**\n     * Label for the down button.\n     */\n    labelDown?: React.ReactNode;\n\n    /**\n     * Custom fill color for the up button.\n     *\n     * @default 'bg-lightest'\n     */\n    colorFillUp?: string;\n\n    /**\n     * Custom fill color for the down button.\n     *\n     * @default 'bg-lightest'\n     */\n    colorFillDown?: string;\n\n    /**\n     * Custom hover color for the up button.\n     *\n     * @default 'primary'\n     */\n    colorHoverUp?: string;\n\n    /**\n     * Custom hover color for the down button.\n     *\n     * @default 'primary'\n     */\n    colorHoverDown?: string;\n\n    /**\n     * Callback function triggered on up vote.\n     */\n    onVoteUp?: VoidFunction;\n\n    /**\n     * Callback function triggered on down vote.\n     */\n    onVoteDown?: VoidFunction;\n\n    /**\n     * Additional classes applied to the individual reaction item (button and label).\n     */\n    itemClassName?: string;\n\n    /**\n     * Defines whether the reaction icon is animated.\n     *\n     * @default false\n     */\n    animated?: boolean;\n};\n\nconst FeedbackReactions = (props: FeedbackReactionsProps) => {\n    const {\n        headline,\n        animated,\n        labelUp,\n        labelDown,\n        labelPosition = 'bottom',\n        size = 'md',\n        colorFillUp = '',\n        colorFillDown = '',\n        colorHoverUp = 'primary',\n        colorHoverDown = 'primary',\n        onVoteUp = () => {},\n        onVoteDown = () => {},\n        itemClassName,\n        ...remainingProps\n    } = props;\n\n    const hasLabels = !!labelUp || !!labelDown;\n\n    const wrapperClassName = classNames(\n        hasLabels ? 'display-grid grid-cols-2' : 'display-flex',\n        'gap-15',\n        'padding-top-5',\n        'user-select-none'\n    );\n\n    return (\n        <div {...remainingProps} className={wrapperClassName}>\n            <FeedbackItem\n                size={size}\n                fillColor={colorFillDown}\n                hoverColor={colorHoverDown}\n                animated={animated}\n                iconName='thumbs-down'\n                text={labelDown}\n                labelPosition={labelPosition}\n                onClick={onVoteDown}\n                className={itemClassName}\n            />\n            <FeedbackItem\n                size={size}\n                fillColor={colorFillUp}\n                hoverColor={colorHoverUp}\n                animated={animated}\n                iconName='thumbs-up'\n                text={labelUp}\n                labelPosition={labelPosition}\n                onClick={onVoteUp}\n                className={itemClassName}\n            />\n        </div>\n    );\n};\n\ntype FeedbackItemProps = {\n    text?: React.ReactNode;\n    iconName: string;\n    onClick: VoidFunction;\n    fillColor: string;\n    hoverColor: string;\n    animated?: boolean;\n    labelPosition?: 'right' | 'bottom';\n    size?: 'sm' | 'md';\n    className?: string;\n};\n\nconst FeedbackItem = (props: FeedbackItemProps) => {\n    const {\n        size,\n        text,\n        iconName,\n        onClick,\n        fillColor,\n        hoverColor,\n        animated = false,\n        labelPosition = 'bottom',\n        className,\n    } = props;\n\n    const ref = useRef<HTMLDivElement>(null);\n    const isHover = useHover(ref);\n\n    const iconClasses = classNames(\n        size === 'sm' ? 'width-40' : 'width-50',\n        'aspect-ratio-1',\n        'border rounded-circle',\n        fillColor ? `bg-${fillColor} text-color-white` : 'bg-lightest',\n        isHover ? `border-color-${hoverColor} text-color-${hoverColor}` : 'border-color-lightest',\n        'display-grid place-items-center',\n        'text-size-14'\n    );\n\n    const wrapperClassName = classNames(\n        'display-flex',\n        'gap-10',\n        labelPosition === 'bottom' ? 'flex-column' : '',\n        'align-items-center',\n        'text-center',\n        'cursor-pointer',\n        className\n    );\n\n    const isUp = iconName.includes('up');\n\n    return (\n        <div ref={ref} className={wrapperClassName} onClick={onClick}>\n            <div className={iconClasses}>\n                <motion.span\n                    initial={{ y: 0, rotate: 0 }}\n                    animate={\n                        animated && isHover ? { y: [0, isUp ? -3 : 3, 0], rotate: [0, isUp ? -10 : 10, 0] } : { y: 0 }\n                    }\n                    transition={{\n                        duration: 0.6,\n                        repeat: isHover ? Number.POSITIVE_INFINITY : 0,\n                        repeatType: 'loop',\n                    }}\n                    className={`rioglyph rioglyph-${iconName} text-size-200pct`}\n                />\n            </div>\n            <div\n                className={`text-wrap-balance line-height-125rel text-medium ${isHover ? `text-color-${hoverColor}` : 'text-color-darker'}`}\n            >\n                {text}\n            </div>\n        </div>\n    );\n};\n\nexport default FeedbackReactions;\n"],"names":["FeedbackReactions","props","headline","animated","labelUp","labelDown","labelPosition","size","colorFillUp","colorFillDown","colorHoverUp","colorHoverDown","onVoteUp","onVoteDown","itemClassName","remainingProps","wrapperClassName","classNames","jsxs","jsx","FeedbackItem","text","iconName","onClick","fillColor","hoverColor","className","ref","useRef","isHover","useHover","iconClasses","isUp","motion"],"mappings":"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"}

package/components/filepicker/FilePicker.d.ts

@@ -1,5 +1,5 @@
-import { type ReactNode } from 'react';
-import { type FileRejection } from 'react-dropzone';
+import { ReactNode } from 'react';
+import { FileRejection } from 'react-dropzone';
 type FilePickerRenderProps = {
     isDragActive: boolean;
 };

package/components/filepicker/FilePicker.js

@@ -1,35 +1,52 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef } from 'react';
-import Dropzone from 'react-dropzone';
-import { noop } from 'es-toolkit/compat';
-import Button from "../button/Button.js";
-const FilePicker = (props) => {
-    const { displayMode = 'button', multiple = true, label = 'Select files', maxSize, onPick = noop, className = '', accept, fullHeight = false, children, ...remainingProps } = props;
-    const dropzoneRef = useRef(null);
-    const wrapperRef = useRef(null);
-    const isFull = displayMode === 'full';
-    const showButton = isFull || displayMode === 'button';
-    const showDropzone = isFull || displayMode === 'dropzone';
-    const handleDrop = useCallback((acceptedFiles, rejectedFiles) => {
-        const hasImagesType = accept && Object.keys(accept).some(mimeType => mimeType.startsWith('image'));
-        const files = hasImagesType
-            ? acceptedFiles.map(file => Object.assign(file, { preview: URL.createObjectURL(file) }))
-            : acceptedFiles;
-        onPick(files, rejectedFiles);
-    }, [onPick, accept]);
-    const handleClick = () => dropzoneRef.current?.open();
-    useEffect(() => {
-        // Set height to dropzones inner presentation div where there is no other access to this DOM element.
-        // This comes in handy, when the dropzone should have 100 % height so it can grow.
-        if (wrapperRef.current && fullHeight) {
-            wrapperRef.current.querySelector('.FilePicker > div')?.setAttribute('class', 'height-100pct');
-        }
-    }, [fullHeight, wrapperRef.current]);
-    return (_jsxs("div", { ref: wrapperRef, className: 'FilePicker', children: [showButton && (_jsx(Button, { onClick: handleClick, className: className, children: label })), _jsx(Dropzone, { ...remainingProps, onDrop: handleDrop, accept: accept, multiple: multiple, maxSize: maxSize, ref: dropzoneRef, children: ({ getRootProps, getInputProps, isDragActive }) => {
-                    return (_jsxs("div", { ...getRootProps(), children: [_jsx("input", { ...getInputProps() }), showDropzone && children && children({ isDragActive })] }));
-                } })] }));
+import { jsxs as d, jsx as c } from "react/jsx-runtime";
+import { useRef as h, useCallback as j, useEffect as y } from "react";
+import E from "react-dropzone";
+import { noop as I } from "es-toolkit/compat";
+import v from "../button/Button.js";
+const l = (D) => {
+  const {
+    displayMode: n = "button",
+    multiple: b = !0,
+    label: O = "Select files",
+    maxSize: P,
+    onPick: i = I,
+    className: k = "",
+    accept: e,
+    fullHeight: a = !1,
+    children: p,
+    ...g
+  } = D, u = h(null), t = h(null), m = n === "full", L = m || n === "button", z = m || n === "dropzone", R = j(
+    (o, s) => {
+      const _ = e && Object.keys(e).some((r) => r.startsWith("image")) ? o.map((r) => Object.assign(r, { preview: URL.createObjectURL(r) })) : o;
+      i(_, s);
+    },
+    [i, e]
+  ), S = () => u.current?.open();
+  return y(() => {
+    t.current && a && t.current.querySelector(".FilePicker > div")?.setAttribute("class", "height-100pct");
+  }, [a, t.current]), /* @__PURE__ */ d("div", { ref: t, className: "FilePicker", children: [
+    L && /* @__PURE__ */ c(v, { onClick: S, className: k, children: O }),
+    /* @__PURE__ */ c(
+      E,
+      {
+        ...g,
+        onDrop: R,
+        accept: e,
+        multiple: b,
+        maxSize: P,
+        ref: u,
+        children: ({ getRootProps: o, getInputProps: s, isDragActive: f }) => /* @__PURE__ */ d("div", { ...o(), children: [
+          /* @__PURE__ */ c("input", { ...s() }),
+          z && p && p({ isDragActive: f })
+        ] })
+      }
+    )
+  ] });
 };
-FilePicker.DISPLAY_MODE_BUTTON = 'button';
-FilePicker.DISPLAY_MODE_DROPZONE = 'dropzone';
-FilePicker.DISPLAY_MODE_FULL = 'full';
-export default FilePicker;
+l.DISPLAY_MODE_BUTTON = "button";
+l.DISPLAY_MODE_DROPZONE = "dropzone";
+l.DISPLAY_MODE_FULL = "full";
+export {
+  l as default
+};
+//# sourceMappingURL=FilePicker.js.map

package/components/filepicker/FilePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilePicker.js","sources":["../../../src/components/filepicker/FilePicker.tsx"],"sourcesContent":["import { type ReactNode, useCallback, useEffect, useRef } from 'react';\nimport Dropzone, { type FileRejection, type DropzoneProps, type DropzoneRef } from 'react-dropzone';\nimport { noop } from 'es-toolkit/compat';\n\nimport Button from '../button/Button';\n\ntype FilePickerRenderProps = {\n    isDragActive: boolean;\n};\n\nexport type FilePickerProps = {\n    /**\n     * Defines the file picker display mode.\n     *\n     * Possible values are `'button'` for a single button, `'dropzone'` for a custom dropzone passed as child function,\n     * or `'full'` for showing both.\n     *\n     * @default 'button'\n     */\n    displayMode?: 'button' | 'dropzone' | 'full';\n\n    /**\n     * Indicating if multiple files may be selected.\n     *\n     * @default true\n     */\n    multiple?: boolean; // multi select\n\n    /**\n     * Text to display on Button if displayMode is set to \"button\".\n     *\n     * @default 'Select files'\n     */\n    label?: string | ReactNode;\n\n    /**\n     * Maximum file size in byte. 5 MB = 5,242,880 byte\n     */\n    maxSize?: number;\n\n    /**\n     * Function called after one or multiple files have been picked.\n     */\n    onPick?: (files: File[], rejectedFiles: FileRejection[]) => void;\n\n    /**\n     * Additional classes for the select button.\n     *\n     * @default ''\n     */\n    className?: string;\n\n    /**\n     * Flag to set the dropzone wrapper element to 100% height.\n     *\n     * This comes in handy, when the dropzone should have 100 % height so it can grow.\n     *\n     * @default false\n     */\n    fullHeight?: boolean;\n\n    /**\n     * Object list of accepted Mime Types as keys and file extensions array as value.\n     */\n    accept?: { [mimeType: string]: string[] };\n\n    /**\n     * Pass a custom dropzone element as function receiving some render props.\n     */\n    children?: ({ isDragActive }: FilePickerRenderProps) => React.ReactElement;\n};\n\nconst FilePicker = (props: FilePickerProps) => {\n    const {\n        displayMode = 'button',\n        multiple = true,\n        label = 'Select files',\n        maxSize,\n        onPick = noop,\n        className = '',\n        accept,\n        fullHeight = false,\n        children,\n        ...remainingProps\n    } = props;\n\n    const dropzoneRef = useRef<DropzoneRef>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    const isFull = displayMode === 'full';\n    const showButton = isFull || displayMode === 'button';\n    const showDropzone = isFull || displayMode === 'dropzone';\n\n    const handleDrop: NonNullable<DropzoneProps['onDrop']> = useCallback(\n        (acceptedFiles, rejectedFiles) => {\n            const hasImagesType = accept && Object.keys(accept).some(mimeType => mimeType.startsWith('image'));\n            const files = hasImagesType\n                ? acceptedFiles.map(file => Object.assign(file, { preview: URL.createObjectURL(file) }))\n                : acceptedFiles;\n\n            onPick(files, rejectedFiles);\n        },\n        [onPick, accept]\n    );\n\n    const handleClick = () => dropzoneRef.current?.open();\n\n    useEffect(() => {\n        // Set height to dropzones inner presentation div where there is no other access to this DOM element.\n        // This comes in handy, when the dropzone should have 100 % height so it can grow.\n        if (wrapperRef.current && fullHeight) {\n            wrapperRef.current.querySelector('.FilePicker > div')?.setAttribute('class', 'height-100pct');\n        }\n    }, [fullHeight, wrapperRef.current]);\n\n    return (\n        <div ref={wrapperRef} className='FilePicker'>\n            {showButton && (\n                <Button onClick={handleClick} className={className}>\n                    {label}\n                </Button>\n            )}\n            <Dropzone\n                {...remainingProps}\n                onDrop={handleDrop}\n                accept={accept}\n                multiple={multiple}\n                maxSize={maxSize}\n                ref={dropzoneRef}\n            >\n                {({ getRootProps, getInputProps, isDragActive }) => {\n                    return (\n                        <div {...getRootProps()}>\n                            <input {...getInputProps()} />\n                            {showDropzone && children && children({ isDragActive })}\n                        </div>\n                    );\n                }}\n            </Dropzone>\n        </div>\n    );\n};\n\nFilePicker.DISPLAY_MODE_BUTTON = 'button' as const;\nFilePicker.DISPLAY_MODE_DROPZONE = 'dropzone' as const;\nFilePicker.DISPLAY_MODE_FULL = 'full' as const;\n\nexport default FilePicker;\n"],"names":["FilePicker","props","displayMode","multiple","label","maxSize","onPick","noop","className","accept","fullHeight","children","remainingProps","dropzoneRef","useRef","wrapperRef","isFull","showButton","showDropzone","handleDrop","useCallback","acceptedFiles","rejectedFiles","files","mimeType","file","handleClick","useEffect","jsxs","jsx","Button","Dropzone","getRootProps","getInputProps","isDragActive"],"mappings":";;;;;AAwEA,MAAMA,IAAa,CAACC,MAA2B;AAC3C,QAAM;AAAA,IACF,aAAAC,IAAc;AAAA,IACd,UAAAC,IAAW;AAAA,IACX,OAAAC,IAAQ;AAAA,IACR,SAAAC;AAAA,IACA,QAAAC,IAASC;AAAA,IACT,WAAAC,IAAY;AAAA,IACZ,QAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHX,GAEEY,IAAcC,EAAoB,IAAI,GACtCC,IAAaD,EAAuB,IAAI,GAExCE,IAASd,MAAgB,QACzBe,IAAaD,KAAUd,MAAgB,UACvCgB,IAAeF,KAAUd,MAAgB,YAEzCiB,IAAmDC;AAAA,IACrD,CAACC,GAAeC,MAAkB;AAE9B,YAAMC,IADgBd,KAAU,OAAO,KAAKA,CAAM,EAAE,KAAK,CAAAe,MAAYA,EAAS,WAAW,OAAO,CAAC,IAE3FH,EAAc,IAAI,CAAAI,MAAQ,OAAO,OAAOA,GAAM,EAAE,SAAS,IAAI,gBAAgBA,CAAI,EAAA,CAAG,CAAC,IACrFJ;AAEN,MAAAf,EAAOiB,GAAOD,CAAa;AAAA,IAC/B;AAAA,IACA,CAAChB,GAAQG,CAAM;AAAA,EAAA,GAGbiB,IAAc,MAAMb,EAAY,SAAS,KAAA;AAE/C,SAAAc,EAAU,MAAM;AAGZ,IAAIZ,EAAW,WAAWL,KACtBK,EAAW,QAAQ,cAAc,mBAAmB,GAAG,aAAa,SAAS,eAAe;AAAA,EAEpG,GAAG,CAACL,GAAYK,EAAW,OAAO,CAAC,GAG/B,gBAAAa,EAAC,OAAA,EAAI,KAAKb,GAAY,WAAU,cAC3B,UAAA;AAAA,IAAAE,KACG,gBAAAY,EAACC,GAAA,EAAO,SAASJ,GAAa,WAAAlB,GACzB,UAAAJ,GACL;AAAA,IAEJ,gBAAAyB;AAAA,MAACE;AAAA,MAAA;AAAA,QACI,GAAGnB;AAAA,QACJ,QAAQO;AAAA,QACR,QAAAV;AAAA,QACA,UAAAN;AAAA,QACA,SAAAE;AAAA,QACA,KAAKQ;AAAA,QAEJ,UAAA,CAAC,EAAE,cAAAmB,GAAc,eAAAC,GAAe,cAAAC,QAEzB,gBAAAN,EAAC,OAAA,EAAK,GAAGI,EAAA,GACL,UAAA;AAAA,UAAA,gBAAAH,EAAC,SAAA,EAAO,GAAGI,EAAA,EAAc,CAAG;AAAA,UAC3Bf,KAAgBP,KAAYA,EAAS,EAAE,cAAAuB,GAAc;AAAA,QAAA,GAC1D;AAAA,MAER;AAAA,IAAA;AAAA,EACJ,GACJ;AAER;AAEAlC,EAAW,sBAAsB;AACjCA,EAAW,wBAAwB;AACnCA,EAAW,oBAAoB;"}

package/components/formLabel/FormLabel.d.ts

@@ -1,4 +1,4 @@
-import React, { type PropsWithChildren, type ComponentProps } from 'react';
+import { default as React, PropsWithChildren, ComponentProps } from 'react';
 export type FormLabelProps = ComponentProps<'label'> & {
     /**
      * Additional supporting text displayed next to the label.