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

package/components/fade/Fade.js

@@ -1,95 +1,106 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import { AnimatePresence, motion } from 'framer-motion';
-import isArray from 'lodash/fp/isArray';
-import head from 'lodash/fp/head';
-import noop from 'lodash/noop';
-import useAfterMount from '../../useAfterMount';
-const animationPropsForStyle = {
-    fromLeft: {
-        initial: { x: -10, y: 0, opacity: 0 },
-        animate: { x: 0, y: 0, opacity: 1 },
-        exit: { x: -10, y: 0, opacity: 0 },
-    },
-    fromRight: {
-        initial: { x: 10, y: 0, opacity: 0 },
-        animate: { x: 0, y: 0, opacity: 1 },
-        exit: { x: 10, y: 0, opacity: 0 },
-    },
-    fromTop: {
-        initial: { y: -10, x: 0, opacity: 0 },
-        animate: { y: 0, x: 0, opacity: 1 },
-        exit: { y: -10, x: 0, opacity: 0 },
-    },
-    fromBottom: {
-        initial: { y: 10, x: 0, opacity: 0 },
-        animate: { y: 0, x: 0, opacity: 1 },
-        exit: { y: 10, x: 0, opacity: 0 },
-    },
-    fade: {
-        initial: { x: 0, y: 0, opacity: 0 },
-        animate: { x: 0, y: 0, opacity: 1 },
-        exit: { x: 0, y: 0, opacity: 0 },
-    },
-    tabs: {
-        initial: { x: 2, y: 0, opacity: 0 },
-        animate: { x: 0, y: 0, opacity: 1 },
-        exit: { x: -2, y: 0, opacity: 0 },
-    },
-    page: {
-        initial: 'pageEnter',
-        animate: 'pageCenter',
-        exit: 'pageExit',
-    },
-    pageBack: {
-        initial: 'pageEnter',
-        animate: 'pageCenter',
-        exit: 'pageExit',
-    },
-};
-const getPageDirection = (animationStyle) => animationStyle === 'pageBack' ? -1 : 1;
-const pageTransitionVariants = {
-    pageEnter: (pageDirection) => ({ x: `${pageDirection * 60}%`, opacity: 0 }),
-    pageCenter: { x: 0, opacity: 1 },
-    pageExit: (pageDirection) => ({ zIndex: 0, x: `${-pageDirection * 60}%`, opacity: 0 }),
-};
-const Fade = (props) => {
-    const { show = true, initial = false, duration = 0.2, exitBeforeEnter = false, animationStyle = 'fade', animatePresenceProps, motionProps, onExitComplete = noop, children, } = props;
-    const [allowInitialAnimation, setAllowInitialAnimation] = useState(initial);
-    useAfterMount(() => {
-        if (!allowInitialAnimation) {
-            setAllowInitialAnimation(true);
-        }
-    });
-    let motionDivKey = 'fade';
-    // If there are multiple children that are conditionally rendered like
-    // in case of a tabbed content - get the current visible child key
-    // to update the motion.div key to animate different children
-    if (isArray(children)) {
-        const currentChild = head(children.filter(child => Boolean(child)));
-        motionDivKey = `fade-${currentChild.key}`;
+import { jsx as y } from "react/jsx-runtime";
+import { useState as F } from "react";
+import { AnimatePresence as O, motion as R } from "motion/react";
+import { noop as h } from "es-toolkit/compat";
+import C from "../../hooks/useAfterMount.js";
+const M = {
+  fromLeft: {
+    initial: { x: -10, y: 0, opacity: 0 },
+    animate: { x: 0, y: 0, opacity: 1 },
+    exit: { x: -10, y: 0, opacity: 0 }
+  },
+  fromRight: {
+    initial: { x: 10, y: 0, opacity: 0 },
+    animate: { x: 0, y: 0, opacity: 1 },
+    exit: { x: 10, y: 0, opacity: 0 }
+  },
+  fromTop: {
+    initial: { y: -10, x: 0, opacity: 0 },
+    animate: { y: 0, x: 0, opacity: 1 },
+    exit: { y: -10, x: 0, opacity: 0 }
+  },
+  fromBottom: {
+    initial: { y: 10, x: 0, opacity: 0 },
+    animate: { y: 0, x: 0, opacity: 1 },
+    exit: { y: 10, x: 0, opacity: 0 }
+  },
+  fade: {
+    initial: { x: 0, y: 0, opacity: 0 },
+    animate: { x: 0, y: 0, opacity: 1 },
+    exit: { x: 0, y: 0, opacity: 0 }
+  },
+  tabs: {
+    initial: { x: 2, y: 0, opacity: 0 },
+    animate: { x: 0, y: 0, opacity: 1 },
+    exit: { x: -2, y: 0, opacity: 0 }
+  },
+  page: {
+    initial: "pageEnter",
+    animate: "pageCenter",
+    exit: "pageExit"
+  },
+  pageBack: {
+    initial: "pageEnter",
+    animate: "pageCenter",
+    exit: "pageExit"
+  }
+}, k = (i) => i === "pageBack" ? -1 : 1, I = {
+  pageEnter: (i) => ({ x: `${i * 60}%`, opacity: 0 }),
+  pageCenter: { x: 0, opacity: 1 },
+  pageExit: (i) => ({ zIndex: 0, x: `${-i * 60}%`, opacity: 0 })
+}, t = (i) => {
+  const {
+    show: s = !0,
+    initial: m = !1,
+    duration: l = 0.2,
+    exitBeforeEnter: x = !1,
+    animationStyle: a = "fade",
+    animatePresenceProps: f,
+    motionProps: g,
+    onExitComplete: d = h,
+    children: e
+  } = i, [o, A] = F(m);
+  C(() => {
+    o || A(!0);
+  });
+  let n = "fade";
+  if (Array.isArray(e)) {
+    const [T] = e.filter(Boolean);
+    n = `fade-${T.key}`;
+  }
+  const r = a === "page" || a === "pageBack", P = k(a), p = r ? P : null, u = r ? { variants: I } : null, c = M[a], E = o ? c.initial : !1, B = { ...c, initial: E };
+  return /* @__PURE__ */ y(
+    O,
+    {
+      initial: o,
+      mode: x ? "wait" : "sync",
+      onExitComplete: d,
+      custom: p,
+      ...f,
+      children: s && /* @__PURE__ */ y(
+        R.div,
+        {
+          transition: { duration: l },
+          custom: p,
+          ...B,
+          ...u,
+          ...g,
+          children: e
+        },
+        n
+      )
     }
-    // In case the animation is a page transition, use custom variants and add a custom pageDirection variable
-    // to animate in the right direction
-    const isPageTransition = animationStyle === 'page' || animationStyle === 'pageBack';
-    const pageDirection = getPageDirection(animationStyle);
-    const custom = isPageTransition ? pageDirection : null;
-    const pageTransitionProps = isPageTransition ? { variants: pageTransitionVariants } : null;
-    const selectedAnimationProps = animationPropsForStyle[animationStyle];
-    // Disable initial animation on mount. After mount the initial animation step is needed to enable
-    // the "fade-in" animation, otherwise it just appears
-    const selectedInitial = allowInitialAnimation ? selectedAnimationProps.initial : false;
-    const animationProps = { ...selectedAnimationProps, initial: selectedInitial };
-    return (
-    // @ts-ignore-next-line
-    _jsx(AnimatePresence, { initial: allowInitialAnimation, exitBeforeEnter: exitBeforeEnter, onExitComplete: onExitComplete, custom: custom, ...animatePresenceProps, children: show && (_jsx(motion.div, { transition: { duration }, custom: custom, ...animationProps, ...pageTransitionProps, ...motionProps, children: children }, motionDivKey)) }));
+  );
+};
+t.FADE = "fade";
+t.FROM_LEFT = "fromLeft";
+t.FROM_RIGHT = "fromRight";
+t.FROM_TOP = "fromTop";
+t.FROM_BOTTOM = "fromBottom";
+t.TABS = "tabs";
+t.PAGE = "page";
+t.PAGE_BACK = "pageBack";
+export {
+  t as default
 };
-Fade.FADE = 'fade';
-Fade.FROM_LEFT = 'fromLeft';
-Fade.FROM_RIGHT = 'fromRight';
-Fade.FROM_TOP = 'fromTop';
-Fade.FROM_BOTTOM = 'fromBottom';
-Fade.TABS = 'tabs';
-Fade.PAGE = 'page';
-Fade.PAGE_BACK = 'pageBack';
-export default Fade;
+//# sourceMappingURL=Fade.js.map

package/components/fade/Fade.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fade.js","sources":["../../../src/components/fade/Fade.tsx"],"sourcesContent":["import { type PropsWithChildren, useState } from 'react';\nimport { AnimatePresence, motion } from 'motion/react';\nimport { noop } from 'es-toolkit/compat';\n\nimport useAfterMount from '../../useAfterMount';\n\ntype AnimationValue = { x: number; y: number; opacity: number };\n\ntype AnimationProp = {\n    initial: 'pageEnter' | AnimationValue | false;\n    animate: 'pageCenter' | AnimationValue;\n    exit: 'pageExit' | AnimationValue;\n};\n\nexport type FadeAnimationStyle =\n    | 'fade'\n    | 'tabs'\n    | 'page'\n    | 'pageBack'\n    | 'fromLeft'\n    | 'fromRight'\n    | 'fromTop'\n    | 'fromBottom';\n\nconst animationPropsForStyle: Record<FadeAnimationStyle, AnimationProp> = {\n    fromLeft: {\n        initial: { x: -10, y: 0, opacity: 0 },\n        animate: { x: 0, y: 0, opacity: 1 },\n        exit: { x: -10, y: 0, opacity: 0 },\n    },\n    fromRight: {\n        initial: { x: 10, y: 0, opacity: 0 },\n        animate: { x: 0, y: 0, opacity: 1 },\n        exit: { x: 10, y: 0, opacity: 0 },\n    },\n    fromTop: {\n        initial: { y: -10, x: 0, opacity: 0 },\n        animate: { y: 0, x: 0, opacity: 1 },\n        exit: { y: -10, x: 0, opacity: 0 },\n    },\n    fromBottom: {\n        initial: { y: 10, x: 0, opacity: 0 },\n        animate: { y: 0, x: 0, opacity: 1 },\n        exit: { y: 10, x: 0, opacity: 0 },\n    },\n    fade: {\n        initial: { x: 0, y: 0, opacity: 0 },\n        animate: { x: 0, y: 0, opacity: 1 },\n        exit: { x: 0, y: 0, opacity: 0 },\n    },\n    tabs: {\n        initial: { x: 2, y: 0, opacity: 0 },\n        animate: { x: 0, y: 0, opacity: 1 },\n        exit: { x: -2, y: 0, opacity: 0 },\n    },\n    page: {\n        initial: 'pageEnter',\n        animate: 'pageCenter',\n        exit: 'pageExit',\n    },\n    pageBack: {\n        initial: 'pageEnter',\n        animate: 'pageCenter',\n        exit: 'pageExit',\n    },\n} as const;\n\ntype PageDirection = -1 | 1;\n\nconst getPageDirection = (animationStyle: FadeAnimationStyle): PageDirection =>\n    animationStyle === 'pageBack' ? -1 : 1;\n\nconst pageTransitionVariants = {\n    pageEnter: (pageDirection: PageDirection) => ({ x: `${pageDirection * 60}%`, opacity: 0 }),\n    pageCenter: { x: 0, opacity: 1 },\n    pageExit: (pageDirection: PageDirection) => ({ zIndex: 0, x: `${-pageDirection * 60}%`, opacity: 0 }),\n};\n\nexport type FadeProps = {\n    /**\n     * Defines whether to show the content.\n     *\n     * @default true\n     */\n    show?: boolean;\n\n    /**\n     * Duration of the fade animation in seconds.\n     *\n     * @default 0.2\n     */\n    duration?: number;\n\n    /**\n     * Defines whether the animation is triggered initially when showing the content.\n     *\n     * @default false\n     */\n    initial?: boolean;\n\n    /**\n     * Defines the desired animation style.\n     *\n     * Possible values are:\n     * - `fade`\n     * - `tabs`\n     * - `page`\n     * - `pageBack`\n     * - `fromLeft`\n     * - `fromRight`\n     * - `fromTop`\n     * - `fromBottom`\n     *\n     * @default 'fade'\n     */\n    animationStyle?: FadeAnimationStyle;\n\n    /**\n     * If set to true, only one component will be rendered at a time.\n     *\n     * The exiting component will finish its exit animation before the entering component is rendered.\n     *\n     * @default false\n     */\n    exitBeforeEnter?: boolean;\n\n    /**\n     * Fires when all exiting nodes have completed animating out.\n     *\n     * @default noop\n     */\n    onExitComplete?: VoidFunction;\n\n    /**\n     * Additional custom props for the underlying Framer motion AnimatePresence component.\n     *\n     * Use this for additional customizations.\n     */\n    animatePresenceProps?: object;\n\n    /**\n     * Additional custom props for the underlying Framer motion &lt;motion.div&gt; component.\n     *\n     * Use this for additional customizations.\n     */\n    motionProps?: object;\n};\n\nconst Fade = (props: PropsWithChildren<FadeProps>) => {\n    const {\n        show = true,\n        initial = false,\n        duration = 0.2,\n        exitBeforeEnter = false,\n        animationStyle = 'fade',\n        animatePresenceProps,\n        motionProps,\n        onExitComplete = noop,\n        children,\n    } = props;\n\n    const [allowInitialAnimation, setAllowInitialAnimation] = useState(initial);\n\n    useAfterMount(() => {\n        if (!allowInitialAnimation) {\n            setAllowInitialAnimation(true);\n        }\n    });\n\n    let motionDivKey = 'fade';\n\n    // If there are multiple children that are conditionally rendered like\n    // in case of a tabbed content - get the current visible child key\n    // to update the motion.div key to animate different children\n    if (Array.isArray(children)) {\n        const [currentChild] = children.filter(Boolean);\n        motionDivKey = `fade-${currentChild.key}`;\n    }\n\n    // In case the animation is a page transition, use custom variants and add a custom pageDirection variable\n    // to animate in the right direction\n    const isPageTransition = animationStyle === 'page' || animationStyle === 'pageBack';\n    const pageDirection = getPageDirection(animationStyle);\n    const custom = isPageTransition ? pageDirection : null;\n    const pageTransitionProps = isPageTransition ? { variants: pageTransitionVariants } : null;\n\n    const selectedAnimationProps = animationPropsForStyle[animationStyle];\n\n    // Disable initial animation on mount. After mount the initial animation step is needed to enable\n    // the \"fade-in\" animation, otherwise it just appears\n    const selectedInitial = allowInitialAnimation ? selectedAnimationProps.initial : false;\n    const animationProps = { ...selectedAnimationProps, initial: selectedInitial };\n\n    return (\n        <AnimatePresence\n            initial={allowInitialAnimation}\n            mode={exitBeforeEnter ? 'wait' : 'sync'}\n            onExitComplete={onExitComplete}\n            custom={custom}\n            {...animatePresenceProps}\n        >\n            {show && (\n                <motion.div\n                    key={motionDivKey}\n                    transition={{ duration }}\n                    custom={custom}\n                    {...animationProps}\n                    {...pageTransitionProps}\n                    {...motionProps}\n                >\n                    {children}\n                </motion.div>\n            )}\n        </AnimatePresence>\n    );\n};\n\nFade.FADE = 'fade' as const;\nFade.FROM_LEFT = 'fromLeft' as const;\nFade.FROM_RIGHT = 'fromRight' as const;\nFade.FROM_TOP = 'fromTop' as const;\nFade.FROM_BOTTOM = 'fromBottom' as const;\nFade.TABS = 'tabs' as const;\nFade.PAGE = 'page' as const;\nFade.PAGE_BACK = 'pageBack' as const;\n\nexport default Fade;\n"],"names":["animationPropsForStyle","getPageDirection","animationStyle","pageTransitionVariants","pageDirection","Fade","props","show","initial","duration","exitBeforeEnter","animatePresenceProps","motionProps","onExitComplete","noop","children","allowInitialAnimation","setAllowInitialAnimation","useState","useAfterMount","motionDivKey","currentChild","isPageTransition","custom","pageTransitionProps","selectedAnimationProps","selectedInitial","animationProps","jsx","AnimatePresence","motion"],"mappings":"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"}

package/components/fade/FadeExpander.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 type FadeExpanderProps = {
     /**
      * Defines if the content is shown or not.

package/components/fade/FadeExpander.js

@@ -1,41 +1,38 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState, useEffect, useRef } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-const THRESHOLD_TIMEOUT_MS = 200;
-const FadeExpander = (props) => {
-    const { children, show = false, duration = 0.2, delay = 0, className = '' } = props;
-    const [isVisible, setIsVisible] = useState(show);
-    const [overflow, setOverflow] = useState('hidden'); // Start with hidden overflow
-    const durationRef = useRef(duration);
-    // Effect to manage visibility based on show prop
-    useEffect(() => {
-        if (show) {
-            // Set to visible when show is true
-            setIsVisible(true);
-        }
-        else {
-            // Set overflow to hidden immediately when show is false
-            setOverflow('hidden');
-            // Delay setting isVisible to false so the overflow can change before
-            setTimeout(() => {
-                setIsVisible(false);
-            }, 0);
-        }
-    }, [show]);
-    const handleAnimationComplete = () => {
-        if (show) {
-            // Set overflow to visible after animation is done
-            setTimeout(() => setOverflow('visible'), durationRef.current * 1000 + THRESHOLD_TIMEOUT_MS);
-        }
-    };
-    return (
+import { jsx as s } from "react/jsx-runtime";
+import { useState as a, useRef as p, useEffect as u } from "react";
+import { AnimatePresence as y, motion as x } from "motion/react";
+const E = 200, b = (r) => {
+  const { children: l, show: e = !1, duration: t = 0.2, delay: o = 0, className: c = "" } = r, [m, n] = a(e), [d, i] = a("hidden"), h = p(t);
+  u(() => {
+    e ? n(!0) : (i("hidden"), setTimeout(() => {
+      n(!1);
+    }, 0));
+  }, [e]);
+  const f = () => {
+    e && setTimeout(() => i("visible"), h.current * 1e3 + E);
+  };
+  return (
     // @ts-ignore
-    _jsx(AnimatePresence, { onExitComplete: () => setOverflow('hidden'), children: isVisible && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: 'auto', opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: {
-                height: { duration, delay },
-                opacity: { duration, delay },
-                ease: 'easeIn',
-            }, 
-            // To ensures smooth height transition, the overflow should be "hidden" during the animation
-            style: { overflow }, onAnimationComplete: handleAnimationComplete, className: className, children: children })) }));
+    /* @__PURE__ */ s(y, { onExitComplete: () => i("hidden"), children: m && /* @__PURE__ */ s(
+      x.div,
+      {
+        initial: { height: 0, opacity: 0 },
+        animate: { height: "auto", opacity: 1 },
+        exit: { height: 0, opacity: 0 },
+        transition: {
+          height: { duration: t, delay: o },
+          opacity: { duration: t, delay: o },
+          ease: "easeIn"
+        },
+        style: { overflow: d },
+        onAnimationComplete: f,
+        className: c,
+        children: l
+      }
+    ) })
+  );
 };
-export default FadeExpander;
+export {
+  b as default
+};
+//# sourceMappingURL=FadeExpander.js.map

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 'framer-motion';
-import useOnScreen from '../../hooks/useOnScreen';
-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,4 +1,4 @@
-import React, { 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';
-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.