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

package/components/fade/Fade.js

@@ -1,106 +1,169 @@
-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
-      )
-    }
-  );
+import e from "../../hooks/useAfterMount.js";
+import "../../useAfterMount.js";
+import { useState as t } from "react";
+import { noop as n } from "es-toolkit/compat";
+import { AnimatePresence as r, motion as i } from "motion/react";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/fade/Fade.tsx
+var o = {
+	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"
+	}
+}, s = (e) => e === "pageBack" ? -1 : 1, c = {
+	pageEnter: (e) => ({
+		x: `${e * 60}%`,
+		opacity: 0
+	}),
+	pageCenter: {
+		x: 0,
+		opacity: 1
+	},
+	pageExit: (e) => ({
+		zIndex: 0,
+		x: `${-e * 60}%`,
+		opacity: 0
+	})
+}, l = (l) => {
+	let { show: u = !0, initial: d = !1, duration: f = .2, exitBeforeEnter: p = !1, animationStyle: m = "fade", animatePresenceProps: h, motionProps: g, onExitComplete: _ = n, children: v } = l, [y, b] = t(d);
+	e(() => {
+		y || b(!0);
+	});
+	let x = "fade";
+	if (Array.isArray(v)) {
+		let [e] = v.filter(Boolean);
+		x = `fade-${e.key}`;
+	}
+	let S = m === "page" || m === "pageBack", C = s(m), w = S ? C : null, T = S ? { variants: c } : null, E = o[m], D = y ? E.initial : !1, O = {
+		...E,
+		initial: D
+	};
+	return /* @__PURE__ */ a(r, {
+		initial: y,
+		mode: p ? "wait" : "sync",
+		onExitComplete: _,
+		custom: w,
+		...h,
+		children: u && /* @__PURE__ */ a(i.div, {
+			transition: { duration: f },
+			custom: w,
+			...O,
+			...T,
+			...g,
+			children: v
+		}, x)
+	});
 };
-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
-};
-//# sourceMappingURL=Fade.js.map
+l.FADE = "fade", l.FROM_LEFT = "fromLeft", l.FROM_RIGHT = "fromRight", l.FROM_TOP = "fromTop", l.FROM_BOTTOM = "fromBottom", l.TABS = "tabs", l.PAGE = "page", l.PAGE_BACK = "pageBack";
+//#endregion
+export { l as default };
+
+//# sourceMappingURL=Fade.js.map

package/components/fade/Fade.js.map

@@ -1 +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 () => {}\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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"}
+{"version":3,"file":"Fade.js","names":[],"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 () => {}\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"],"mappings":"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"}

package/components/fade/FadeExpander.js

@@ -1,35 +1,49 @@
-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 /* @__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
-    }
-  ) });
+import { useEffect as e, useRef as t, useState as n } from "react";
+import { AnimatePresence as r, motion as i } from "motion/react";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/fade/FadeExpander.tsx
+var o = 200, s = (s) => {
+	let { children: c, show: l = !1, duration: u = .2, delay: d = 0, className: f = "" } = s, [p, m] = n(l), [h, g] = n("hidden"), _ = t(u);
+	return e(() => {
+		l ? m(!0) : (g("hidden"), setTimeout(() => {
+			m(!1);
+		}, 0));
+	}, [l]), /* @__PURE__ */ a(r, {
+		onExitComplete: () => g("hidden"),
+		children: p && /* @__PURE__ */ a(i.div, {
+			initial: {
+				height: 0,
+				opacity: 0
+			},
+			animate: {
+				height: "auto",
+				opacity: 1
+			},
+			exit: {
+				height: 0,
+				opacity: 0
+			},
+			transition: {
+				height: {
+					duration: u,
+					delay: d
+				},
+				opacity: {
+					duration: u,
+					delay: d
+				},
+				ease: "easeIn"
+			},
+			style: { overflow: h },
+			onAnimationComplete: () => {
+				l && setTimeout(() => g("visible"), _.current * 1e3 + o);
+			},
+			className: f,
+			children: c
+		})
+	});
 };
-export {
-  b as default
-};
-//# sourceMappingURL=FadeExpander.js.map
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=FadeExpander.js.map

package/components/fade/FadeExpander.js.map

@@ -1 +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        <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,2BACKiB,GAAA,EAAgB,gBAAgB,MAAML,EAAY,QAAQ,GACtD,UAAAJ,KACG,gBAAAU;AAAA,IAACC,EAAO;AAAA,IAAP;AAAA,MACG,SAAS,EAAE,QAAQ,GAAG,SAAS,EAAA;AAAA,MAC/B,SAAS,EAAE,QAAQ,QAAQ,SAAS,EAAA;AAAA,MACpC,MAAM,EAAE,QAAQ,GAAG,SAAS,EAAA;AAAA,MAC5B,YAAY;AAAA,QACR,QAAQ,EAAE,UAAAd,GAAU,OAAAC,EAAA;AAAA,QACpB,SAAS,EAAE,UAAAD,GAAU,OAAAC,EAAA;AAAA,QACrB,MAAM;AAAA,MAAA;AAAA,MAGV,OAAO,EAAE,UAAAK,EAAA;AAAA,MACT,qBAAqBK;AAAA,MACrB,WAAAT;AAAA,MAEC,UAAAJ;AAAA,IAAA;AAAA,EAAA,GAGb;AAER;"}
+{"version":3,"file":"FadeExpander.js","names":[],"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        <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"],"mappings":";;;;AA+BA,IAAM,IAAuB,KAEvB,KAAgB,MAAgD;CAClE,IAAM,EAAE,aAAU,UAAO,IAAO,cAAW,IAAK,WAAQ,GAAG,eAAY,OAAO,GAExE,CAAC,GAAW,KAAgB,EAAS,CAAI,GACzC,CAAC,GAAU,KAAe,EAAS,QAAQ,GAE3C,IAAc,EAAO,CAAQ;CAyBnC,OAtBA,QAAgB;EACZ,AAAI,IAEA,EAAa,EAAI,KAGjB,EAAY,QAAQ,GAGpB,iBAAiB;GACb,EAAa,EAAK;EACtB,GAAG,CAAC;CAEZ,GAAG,CAAC,CAAI,CAAC,GAUL,kBAAC,GAAD;EAAiB,sBAAsB,EAAY,QAAQ;YACtD,KACG,kBAAC,EAAO,KAAR;GACI,SAAS;IAAE,QAAQ;IAAG,SAAS;GAAE;GACjC,SAAS;IAAE,QAAQ;IAAQ,SAAS;GAAE;GACtC,MAAM;IAAE,QAAQ;IAAG,SAAS;GAAE;GAC9B,YAAY;IACR,QAAQ;KAAE;KAAU;IAAM;IAC1B,SAAS;KAAE;KAAU;IAAM;IAC3B,MAAM;GACV;GAEA,OAAO,EAAE,YAAS;GAClB,2BArBsB;IAClC,AAAI,KAEA,iBAAiB,EAAY,SAAS,GAAG,EAAY,UAAU,MAAO,CAAoB;GAElG;GAiB2B;GAEV;EACO,CAAA;CAEH,CAAA;AAEzB"}

package/components/fade/FadeUp.js

@@ -1,35 +1,37 @@
-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
-    }
-  );
+import e from "../../hooks/useOnScreen.js";
+import { useEffect as t, useRef as n, useState as r } from "react";
+import { motion as i } from "motion/react";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/fade/FadeUp.tsx
+var o = (o) => {
+	let { delay: s = 0, duration: c = .4, className: l = "", offset: u = 15, children: d, ...f } = o, p = n(null), m = e(p), [h, g] = r(!1), _ = {
+		hidden: {
+			opacity: 0,
+			y: u
+		},
+		visible: {
+			opacity: 1,
+			y: 0
+		}
+	};
+	return t(() => {
+		m && !h && g(!0);
+	}, [m, h]), /* @__PURE__ */ a(i.div, {
+		ref: p,
+		variants: _,
+		initial: "hidden",
+		animate: h ? "visible" : "hidden",
+		transition: {
+			delay: s,
+			type: "spring",
+			duration: c
+		},
+		...f,
+		className: l,
+		children: d
+	});
 };
-export {
-  I as default
-};
-//# sourceMappingURL=FadeUp.js.map
+//#endregion
+export { o as default };
+
+//# sourceMappingURL=FadeUp.js.map

package/components/fade/FadeUp.js.map

@@ -1 +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;"}
+{"version":3,"file":"FadeUp.js","names":[],"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"],"mappings":";;;;;AAiCA,IAAM,KAAU,MAA0C;CACtD,IAAM,EAAE,WAAQ,GAAG,cAAW,IAAK,eAAY,IAAI,YAAS,IAAI,aAAU,GAAG,MAAmB,GAE1F,IAAM,EAAO,IAAI,GACjB,IAAW,EAAY,CAAG,GAC1B,CAAC,GAAW,KAAgB,EAAS,EAAK,GAE1C,IAAW;EACb,QAAQ;GACJ,SAAS;GACT,GAAG;EACP;EACA,SAAS;GACL,SAAS;GACT,GAAG;EACP;CACJ;CAQA,OANA,QAAgB;EACZ,AAAI,KAAY,CAAC,KACb,EAAa,EAAI;CAEzB,GAAG,CAAC,GAAU,CAAS,CAAC,GAGpB,kBAAC,EAAO,KAAR;EACS;EACK;EACV,SAAQ;EACR,SAAS,IAAY,YAAY;EACjC,YAAY;GAAE;GAAO,MAAM;GAAU;EAAS;EAC9C,GAAI;EACO;EAEV;CACO,CAAA;AAEpB"}

package/components/feedback/FeedbackInlineButtons.js

@@ -1,19 +1,20 @@
-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) })
-      ]
-    }
-  );
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/components/feedback/FeedbackInlineButtons.tsx
+var n = (n) => {
+	let { buttons: r = [], headline: i, ...a } = n;
+	return /* @__PURE__ */ t("div", {
+		...a,
+		className: "display-flex flex-wrap align-items-center column-gap-15 row-gap-5 user-select-none",
+		children: [i && /* @__PURE__ */ e("div", {
+			className: "text-color-dark",
+			children: i
+		}), /* @__PURE__ */ e("div", {
+			className: "btn-toolbar gap-5",
+			children: r.map((e) => e)
+		})]
+	});
 };
-export {
-  i as default
-};
-//# sourceMappingURL=FeedbackInlineButtons.js.map
+//#endregion
+export { n as default };
+
+//# sourceMappingURL=FeedbackInlineButtons.js.map

package/components/feedback/FeedbackInlineButtons.js.map

@@ -1 +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;"}
+{"version":3,"file":"FeedbackInlineButtons.js","names":[],"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"],"mappings":";;AAeA,IAAM,KAAyB,MAAsC;CACjE,IAAM,EAAE,aAAU,CAAC,GAAG,aAAU,GAAG,MAAmB;CAEtD,OACI,kBAAC,OAAD;EACI,GAAI;EACJ,WAAU;YAFd,CAIK,KAAY,kBAAC,OAAD;GAAK,WAAU;aAAmB;EAAc,CAAA,GAC7D,kBAAC,OAAD;GAAK,WAAU;aAAqB,EAAQ,KAAI,MAAU,CAAM;EAAO,CAAA,CACtE;;AAEb"}