@onepercentio/one-ui 0.29.0 → 0.29.2

package/dist-ts/components/Transition/Transition.js

@@ -0,0 +1,292 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { createRef, forwardRef, useEffect, useMemo, useRef, useState, } from "react";
+import Styles from "./Transition.module.scss";
+function TransitionClasses(type) {
+    switch (type) {
+        case TransitionAnimationTypes.COIN_FLIP:
+            return {
+                backward: {
+                    elementExiting: Styles.flipBottomUpOut,
+                    elementEntering: Styles.flipBottomUpIn,
+                },
+                forward: {
+                    elementExiting: Styles.flipBottomUpOut,
+                    elementEntering: Styles.flipBottomUpIn,
+                },
+            };
+        case TransitionAnimationTypes.FADE:
+            return {
+                backward: {
+                    elementExiting: Styles.fadeOutAbsolute,
+                    elementEntering: Styles.fadeInDelayed,
+                },
+                forward: {
+                    elementExiting: Styles.fadeOutAbsolute,
+                    elementEntering: Styles.fadeInDelayed,
+                },
+            };
+        case TransitionAnimationTypes.SLIDE:
+            return {
+                backward: {
+                    elementEntering: Styles.entranceLeft,
+                    elementExiting: "",
+                },
+                forward: {
+                    elementEntering: "",
+                    elementExiting: Styles.exitLeft,
+                },
+            };
+        case TransitionAnimationTypes.POP_FROM_CLICK_ORIGIN:
+        case TransitionAnimationTypes.POP_FROM_ELEMENT_ID:
+            return {
+                backward: {
+                    elementEntering: Styles.fadeIn,
+                    elementExiting: Styles.scaleOut,
+                },
+                forward: {
+                    elementEntering: Styles.scaleIn,
+                    elementExiting: Styles.fadeOut,
+                },
+            };
+        case TransitionAnimationTypes.MASK:
+            return {
+                backward: {
+                    elementEntering: Styles.stubEntering,
+                    elementExiting: Styles.stub,
+                },
+                forward: {
+                    elementEntering: Styles.stubEntering,
+                    elementExiting: Styles.stub,
+                },
+            };
+    }
+}
+function ChildrenWrapperFactory(func, key, externalPropsContainer, 
+/** This is used to prevent newer "duplicated" keys from being removed after the new element finished animation */
+timestamp, toRemoveKeys) {
+    func.createdAt = timestamp;
+    func.associatedKey = key;
+    func.toRemoveKeys = toRemoveKeys;
+    func.externalProps = externalPropsContainer;
+    return func;
+}
+function _Transition({ step, contentStyle, contentClassName = "", children, className, onDiscardStep, lockTransitionWidth = false, lockTransitionHeight = false, ...props }, _containerRef) {
+    const containerRef = useMemo(() => _containerRef || createRef(), [_containerRef]);
+    const preTransitionDetails = useRef({
+        transformOrigin: "initial",
+    });
+    const [childrenWrappers, setChildrenWrappers] = useState(() => {
+        const externalProps = {
+            "data-testid": "transition-container",
+            key: String(children[step]?.key || step),
+            style: contentStyle,
+            className: contentClassName,
+        };
+        const func = ChildrenWrapperFactory(({ children }) => _jsx("div", { ...externalProps, children: children }), children[step].key || step, externalProps, Date.now(), []);
+        return [func];
+    });
+    const prevStep = useRef(step);
+    const prevChild = useRef(children[step]);
+    useEffect(() => () => {
+        prevChild.current = children[step];
+    });
+    useEffect(() => {
+        containerRef.current.style.overflow = "hidden";
+        const transitionClasses = props.transitionType === TransitionAnimationTypes.CUSTOM
+            ? props.config
+            : TransitionClasses(props.transitionType || TransitionAnimationTypes.SLIDE);
+        if (prevChild.current !== null &&
+            children[step]?.key === prevChild.current?.key // I'm rendering the same screen
+        ) {
+            return () => {
+                prevStep.current = step;
+            };
+        }
+        const key = children[step]?.key || step;
+        if (prevStep.current !== step && lockTransitionWidth)
+            containerRef.current.style.width = `${containerRef.current.clientWidth}px`;
+        if (prevStep.current !== step && lockTransitionHeight)
+            containerRef.current.style.height = `${containerRef.current.clientHeight}px`;
+        const transitionMask = props.transitionType === TransitionAnimationTypes.MASK
+            ? props.maskFactory(containerRef.current)
+            : "";
+        const insertedAt = Date.now();
+        /** This runs on backwards */
+        if (prevStep.current > step) {
+            const stepToRemove = prevStep.current;
+            const prevKeyToRemove = prevChild.current?.key || stepToRemove;
+            setChildrenWrappers((screensBeforeChangingStep) => {
+                const enteringScreenRef = createRef();
+                const [FirstNextScreen, ...restOfScreens] = screensBeforeChangingStep.filter((a) => a?.associatedKey !== String(key));
+                if (FirstNextScreen) {
+                    Object.assign(FirstNextScreen.externalProps, {
+                        "data-testid": "transition-container",
+                        style: { ...contentStyle, WebkitMaskImage: transitionMask },
+                        className: `${transitionClasses.backward.elementExiting}`,
+                    });
+                }
+                function animationEndListener(event) {
+                    if (event.target !== event.currentTarget)
+                        return;
+                    const isAnimationFromExpectedState = enteringScreenRef.current?.classList.contains(transitionClasses.backward.elementEntering);
+                    enteringScreenRef.current?.classList.remove(transitionClasses.backward.elementEntering);
+                    setChildrenWrappers((screensAfterTheCurrentStepEntered) => {
+                        if (onDiscardStep) {
+                            if (isAnimationFromExpectedState)
+                                onDiscardStep(prevKeyToRemove, insertedAt);
+                            if (FirstNextScreen && FirstNextScreen.toRemoveKeys)
+                                FirstNextScreen.toRemoveKeys.forEach(onDiscardStep);
+                        }
+                        return screensAfterTheCurrentStepEntered.filter((s) => {
+                            const shouldKeep = (s?.associatedKey !== String(prevKeyToRemove) &&
+                                !FirstNextScreen?.toRemoveKeys?.some((k) => String(k) === String(s?.associatedKey))) ||
+                                s.createdAt > insertedAt;
+                            return shouldKeep;
+                        });
+                    });
+                    event.currentTarget.removeEventListener("animationend", animationEndListener);
+                }
+                const propsContainer = {
+                    ref: enteringScreenRef,
+                    "data-testid": "transition-container",
+                    key,
+                    className: `${transitionClasses.backward.elementEntering} ${contentClassName}`,
+                    style: {
+                        ...contentStyle,
+                    },
+                    onAnimationEnd: animationEndListener,
+                };
+                const newWrapper = ChildrenWrapperFactory(({ children }) => {
+                    return _jsx("div", { ...propsContainer, children: children });
+                }, key, propsContainer, insertedAt, [prevKeyToRemove, ...(FirstNextScreen?.toRemoveKeys || [])]);
+                if (FirstNextScreen)
+                    return [
+                        newWrapper,
+                        FirstNextScreen ||
+                            ChildrenWrapperFactory(() => _jsx(React.Fragment, {}), "", {}, insertedAt),
+                        ...restOfScreens,
+                    ];
+                else
+                    return [newWrapper];
+            });
+        }
+        else if (prevStep.current < step) {
+            const stepToDelete = prevStep.current;
+            const prevKeyToRemove = String(prevChild.current?.key || stepToDelete);
+            setChildrenWrappers((screensBeforeChangingStep) => {
+                const lastIndex = screensBeforeChangingStep.length - 1;
+                const lastWrapper = screensBeforeChangingStep[lastIndex];
+                const nextScreenRef = createRef();
+                if (lastWrapper) {
+                    Object.assign(lastWrapper.externalProps, {
+                        "data-testid": "transition-container",
+                        style: { ...contentStyle, WebkitMaskImage: transitionMask },
+                        className: `${contentClassName} ${transitionClasses.forward.elementExiting}`,
+                        onAnimationEnd: (e) => {
+                            if (e.target !== e.currentTarget)
+                                return;
+                            if (transitionClasses.forward.elementEntering)
+                                nextScreenRef.current?.classList.remove(transitionClasses.forward.elementEntering);
+                            if (onDiscardStep)
+                                onDiscardStep(prevKeyToRemove, insertedAt);
+                            setChildrenWrappers((screensAfterTheCurrentStepEntered) => {
+                                const nextState = screensAfterTheCurrentStepEntered.filter((s) => {
+                                    const shouldMantain = s?.associatedKey !== String(prevKeyToRemove) ||
+                                        s.createdAt > insertedAt;
+                                    return shouldMantain;
+                                });
+                                return nextState;
+                            });
+                        },
+                    });
+                }
+                const propsContainer = {
+                    ref: nextScreenRef,
+                    "data-testid": "transition-container",
+                    key,
+                    style: {
+                        ...contentStyle,
+                    },
+                    className: `${contentClassName} ${transitionClasses.forward.elementEntering}`,
+                };
+                const newWrapper = ChildrenWrapperFactory(({ children }) => {
+                    return _jsx("div", { ...propsContainer, children: children });
+                }, key, propsContainer, insertedAt);
+                return [
+                    ...screensBeforeChangingStep.slice(0, lastIndex),
+                    lastWrapper ||
+                        ChildrenWrapperFactory(() => _jsx(React.Fragment, {}), "fallback", {}, insertedAt),
+                    newWrapper,
+                ];
+            });
+        }
+        return () => {
+            prevStep.current = step;
+        };
+    }, [step]);
+    useEffect(() => {
+        if (childrenWrappers.length === 1 && lockTransitionWidth)
+            containerRef.current.style.width = "";
+        if (childrenWrappers.length === 1 && lockTransitionHeight)
+            containerRef.current.style.height = "";
+    }, [childrenWrappers.length !== 1]);
+    useEffect(() => {
+        if (props.transitionType === TransitionAnimationTypes.POP_FROM_ELEMENT_ID &&
+            "elementId" in props) {
+            const element = document.querySelector(`#${props.elementId}`);
+            if (element) {
+                const { clientWidth, clientHeight } = containerRef.current;
+                const offsetX = element.clientLeft + element.offsetLeft + element.clientWidth / 2;
+                const offsetY = element.clientTop + element.offsetTop + element.clientHeight / 2;
+                const percentX = (offsetX * 100) / clientWidth;
+                const percentY = (offsetY * 100) / clientHeight;
+                preTransitionDetails.current.transformOrigin = `${percentX}% ${percentY}%`;
+                Object.assign(containerRef.current.style, {
+                    transformOrigin: `${percentX}% ${percentY}%`,
+                });
+            }
+        }
+        else {
+            Object.assign(containerRef.current.style, preTransitionDetails.current);
+        }
+        if (childrenWrappers.length === 1) {
+            containerRef.current.style.overflow = "";
+        }
+    }, [childrenWrappers.length]);
+    const propsToSpread = { ...props };
+    delete propsToSpread.transitionType;
+    delete propsToSpread.config;
+    return (_jsx(_Fragment, { children: _jsx("section", { ...propsToSpread, onClick: (e) => {
+                const { currentTarget: { offsetTop, offsetLeft, clientWidth, clientHeight }, clientX, clientY, } = e;
+                const offsetX = clientX - offsetLeft;
+                const offsetY = clientY - offsetTop;
+                const percentX = (offsetX * 100) / clientWidth;
+                const percentY = (offsetY * 100) / clientHeight;
+                if (props.transitionType ===
+                    TransitionAnimationTypes.POP_FROM_ELEMENT_ID ||
+                    props.transitionType ===
+                        TransitionAnimationTypes.POP_FROM_CLICK_ORIGIN)
+                    preTransitionDetails.current.transformOrigin = `${percentX}% ${percentY}%`;
+                if (props.onClick)
+                    props.onClick(e);
+            }, "data-testid": "transition-controller", ref: containerRef, className: `${Styles.section} ${className}`, children: childrenWrappers.map((Wrapper) => {
+                const childToRender = children.find((a, i) => (a?.key || i) === Wrapper?.associatedKey);
+                return (_jsx(Wrapper, { children: _jsx(_Fragment, { children: childToRender }) }, `${Wrapper.associatedKey} ${Wrapper.createdAt}`));
+            }) }) }));
+}
+export var TransitionAnimationTypes;
+(function (TransitionAnimationTypes) {
+    TransitionAnimationTypes[TransitionAnimationTypes["SLIDE"] = 0] = "SLIDE";
+    TransitionAnimationTypes[TransitionAnimationTypes["POP_FROM_CLICK_ORIGIN"] = 1] = "POP_FROM_CLICK_ORIGIN";
+    TransitionAnimationTypes[TransitionAnimationTypes["POP_FROM_ELEMENT_ID"] = 2] = "POP_FROM_ELEMENT_ID";
+    TransitionAnimationTypes[TransitionAnimationTypes["FADE"] = 3] = "FADE";
+    TransitionAnimationTypes[TransitionAnimationTypes["COIN_FLIP"] = 4] = "COIN_FLIP";
+    TransitionAnimationTypes[TransitionAnimationTypes["MASK"] = 5] = "MASK";
+    TransitionAnimationTypes[TransitionAnimationTypes["CUSTOM"] = 6] = "CUSTOM";
+})(TransitionAnimationTypes || (TransitionAnimationTypes = {}));
+/**
+ * Handles the transition between multiple children and recycling of elements
+ **/
+const Transition = forwardRef(_Transition);
+export default Transition;
+//# sourceMappingURL=Transition.js.map

package/dist-ts/components/Transition/Transition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Transition.js","sourceRoot":"","sources":["../../../src/components/Transition/Transition.tsx"],"names":[],"mappings":"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"}

package/dist-ts/components/Transition/Transition.module.scss

@@ -0,0 +1,211 @@
+@import "../../assets/styles/index.scss";
+
+.section {
+  * {
+    box-sizing: border-box;
+  }
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  > div {
+    display: flex;
+    flex-direction: column;
+    min-height: inherit;
+    min-width: 100%;
+    animation-duration: var(--animation-speed-transition, $fast);
+    animation-timing-function: var(--animation-timing-transition, initial);
+    animation-fill-mode: forwards;
+    transform-origin: inherit;
+  }
+}
+
+div.stub {
+  animation-name: stub;
+  position: absolute;
+  pointer-events: none;
+}
+
+div.stubEntering {
+  animation-name: stub;
+  z-index: -1;
+}
+@keyframes stub {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+div.entranceLeft {
+  animation-name: entranceLeft;
+}
+div.exitLeft {
+  animation-name: exitLeft;
+}
+
+@keyframes entranceLeft {
+  0% {
+    margin-left: -100%;
+  }
+  100% {
+    margin-left: 0%;
+  }
+}
+@keyframes exitLeft {
+  0% {
+    margin-left: 0%;
+  }
+  100% {
+    margin-left: -100%;
+  }
+}
+
+div.fadeOut {
+  animation-name: fadeOut;
+  position: absolute;
+}
+
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+div.scaleIn {
+  animation-fill-mode: forwards;
+  animation-name: scaleIn;
+}
+
+@keyframes scaleIn {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+div.scaleOut {
+  animation-fill-mode: initial;
+  animation-name: scaleOut;
+}
+
+@keyframes scaleOut {
+  0% {
+    position: absolute;
+    transform: scale(1);
+  }
+  100% {
+    position: absolute;
+    transform: scale(0);
+  }
+}
+
+div.fadeIn {
+  animation-name: fadeIn;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeInDelayed {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.1;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes fadeOutDelayed {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.fadeInDelayed {
+  animation-name: fadeInDelayed;
+}
+
+.fadeOutAbsolute {
+  position: absolute;
+  animation-name: fadeOutDelayed;
+}
+
+@keyframes flip {
+  0% {
+    transform: rotateX(0deg);
+  }
+
+  25% {
+    transform: rotateX(36deg);
+  }
+
+  50% {
+    transform: rotateX(90deg);
+  }
+
+  75% {
+    transform: rotateX(90deg);
+  }
+
+  100% {
+    transform: rotateX(90deg);
+  }
+}
+@keyframes flipIn {
+  0% {
+    transform: rotateX(0deg);
+    opacity: 0;
+  }
+
+  25% {
+    transform: rotateX(0deg);
+  }
+
+  50% {
+    transform: rotateX(90deg);
+    opacity: 0;
+  }
+  51% {
+    opacity: 1;
+  }
+
+  75% {
+    transform: rotateX(36deg);
+  }
+
+  100% {
+    transform: rotateX(0deg);
+  }
+}
+.flipBottomUpOut {
+  transform-origin: 50% 50% !important;
+  position: absolute !important;
+  animation-name: flip;
+  animation-timing-function: linear !important;
+}
+.flipBottomUpIn {
+  transform-origin: 50% 50% !important;
+  animation-name: flipIn;
+  animation-timing-function: linear !important;
+}

package/dist-ts/components/Transition/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Transition";
+export * from "./Transition";

package/dist-ts/components/Transition/index.js

@@ -0,0 +1,3 @@
+export { default } from "./Transition";
+export * from "./Transition";
+//# sourceMappingURL=index.js.map

package/dist-ts/components/Transition/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Transition/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,cAAc,cAAc,CAAC"}

package/dist-ts/components/UncontrolledTransition/UncontrolledTransition.ai.md

@@ -0,0 +1,9 @@
+# Animating component transition
+
+When the key changes, a the transition between components will be controlled by UncontrolledTransition
+
+```tsx
+<UncontrolledTransition>
+    <AComponent key={DYNAMIC_KEY}>
+</UncontrolledTransition>
+```

package/dist-ts/components/UncontrolledTransition/UncontrolledTransition.d.ts

@@ -0,0 +1,17 @@
+import React, { Key, RefObject } from "react";
+import { TransitionProps, TransitionTypeDefinitions } from "../Transition/Transition";
+/**
+ * This component receives child with key and applies a transition when the key changes, allowing to swap elements with a fine transition.
+ **/
+export declare const UncontrolledTransition: React.ForwardRefExoticComponent<({
+    className?: string | undefined;
+    contentClassName?: string | undefined;
+    children?: React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | undefined;
+    lockTransitionWidth?: boolean | undefined;
+    lockTransitionHeight?: boolean | undefined;
+    onDiscardStep?: ((key: Key) => void) | undefined;
+} & Pick<TransitionProps, "contentStyle"> & TransitionTypeDefinitions & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, any>, "children" | "ref" | "className">) & React.RefAttributes<{
+    setOrientation: (orientation: "forward" | "backward") => void;
+    sectionRef: RefObject<HTMLDivElement | null>;
+}>>;
+export default UncontrolledTransition;

package/dist-ts/components/UncontrolledTransition/UncontrolledTransition.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, } from "react";
+import Transition from "../Transition";
+function _UncontrolledTransition({ className = "", contentClassName, children = _jsx(React.Fragment, {}, "default"), lockTransitionWidth = true, lockTransitionHeight = false, contentStyle, onDiscardStep, ...props }, ref) {
+    const sectionRef = useRef(null);
+    const [{ childStack, offset }, setChildStack] = useState(() => ({
+        childStack: [{ ...children, createdAt: Date.now() }],
+        offset: 1,
+    }));
+    const orientation = useRef("forward");
+    function setOrientation(a) {
+        orientation.current = a;
+    }
+    useImperativeHandle(ref, () => ({
+        setOrientation,
+        sectionRef,
+    }), []);
+    useLayoutEffect(() => {
+        if (process.env.NODE_ENV !== "production" && !children.key)
+            throw new Error("The provided child should have a key property, please provide it");
+        if (childStack.length === 1 && childStack[0].key === children.key)
+            return;
+        if (orientation.current === "forward")
+            setChildStack((p) => ({
+                ...p,
+                childStack: [...p.childStack, { ...children, createdAt: Date.now() }],
+            }));
+        else
+            setChildStack((p) => ({
+                ...p,
+                childStack: [{ ...children, createdAt: Date.now() }, ...p.childStack],
+            }));
+    }, [children.key]);
+    useEffect(() => {
+        if (orientation.current === "backward") {
+            setChildStack((prev) => {
+                return {
+                    ...prev,
+                    offset: prev.childStack.length,
+                };
+            });
+        }
+    }, [childStack.length]);
+    childStack.forEach((a, i, arr) => {
+        if (a.key === children.key)
+            arr[i] = { ...children, createdAt: a.createdAt };
+    });
+    const predictedStep = childStack.length - offset;
+    return (_jsx(_Fragment, { children: childStack.length ? (_jsx(Transition, { ref: sectionRef, contentStyle: contentStyle, className: className, step: predictedStep, onDiscardStep: (discardedKey, animatedAt) => {
+                setTimeout(() => {
+                    if (onDiscardStep)
+                        onDiscardStep(discardedKey);
+                    orientation.current = "forward";
+                    setChildStack((prev) => {
+                        return {
+                            childStack: prev.childStack.filter((a) => {
+                                return a.key !== discardedKey || a.createdAt > animatedAt;
+                            }),
+                            offset: prev.offset === 1 ? 1 : prev.offset - 1,
+                        };
+                    });
+                }, 0);
+            }, lockTransitionWidth: lockTransitionWidth, lockTransitionHeight: lockTransitionHeight, contentClassName: contentClassName, ...props, children: childStack })) : null }));
+}
+/**
+ * This component receives child with key and applies a transition when the key changes, allowing to swap elements with a fine transition.
+ **/
+export const UncontrolledTransition = forwardRef(_UncontrolledTransition);
+export default UncontrolledTransition;
+//# sourceMappingURL=UncontrolledTransition.js.map

package/dist-ts/components/UncontrolledTransition/UncontrolledTransition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UncontrolledTransition.js","sourceRoot":"","sources":["../../../src/components/UncontrolledTransition/UncontrolledTransition.tsx"],"names":[],"mappings":"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"}

package/dist-ts/components/UncontrolledTransition/UncontrolledTransition.sample.d.ts

@@ -0,0 +1 @@
+export default function Example(): import("react/jsx-runtime").JSX.Element;

package/dist-ts/components/UncontrolledTransition/UncontrolledTransition.sample.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import UncontrolledTransition from "../UncontrolledTransition";
+import Button from "../Button";
+function colorGen() {
+    return [255 * Math.random(), 255 * Math.random(), 255 * Math.random()];
+}
+export default function Example() {
+    const [color, setColor] = useState(colorGen);
+    const rgb = `rgb(${color.join(",")})`;
+    return (_jsx(UncontrolledTransition, { children: _jsxs("div", { style: {
+                width: "100vw",
+                height: "100vh",
+                backgroundColor: rgb,
+                textAlign: "center",
+            }, children: [_jsx(Button, { variant: "filled", onClick: () => setColor(colorGen()), children: "Click to transition" }), _jsx("h2", { children: "RGB" }), _jsx("p", { children: color[0].toFixed(0) }), _jsx("p", { children: color[1].toFixed(0) }), _jsx("p", { children: color[2].toFixed(0) })] }, color.join("")) }));
+}
+//# sourceMappingURL=UncontrolledTransition.sample.js.map

package/dist-ts/components/UncontrolledTransition/UncontrolledTransition.sample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UncontrolledTransition.sample.js","sourceRoot":"","sources":["../../../src/components/UncontrolledTransition/UncontrolledTransition.sample.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,sBAAsB,MAAM,2BAA2B,CAAC;AAC/D,OAAO,MAAM,MAAM,WAAW,CAAC;AAE/B,SAAS,QAAQ;IACf,OAAO,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM,EAAE,EAAE,GAAG,GAAG,IAAI,CAAC,MAAM,EAAE,EAAE,GAAG,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;AACzE,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC7C,MAAM,GAAG,GAAG,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC;IACtC,OAAO,CACL,KAAC,sBAAsB,cACrB,eAEE,KAAK,EAAE;gBACL,KAAK,EAAE,OAAO;gBACd,MAAM,EAAE,OAAO;gBACf,eAAe,EAAE,GAAG;gBACpB,SAAS,EAAE,QAAQ;aACpB,aAED,KAAC,MAAM,IAAC,OAAO,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC,oCAEnD,EACT,+BAAY,EACZ,sBAAI,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAK,EAC5B,sBAAI,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAK,EAC5B,sBAAI,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAK,KAdvB,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAef,GACiB,CAC1B,CAAC;AACJ,CAAC"}