lilact 0.10.2 → 0.11.1

package/root/demos/switch-transition.jsx

@@ -1,50 +1,54 @@
 const { useState, SwitchTransition } = Lilact;
 
 Lilact.emotion.injectGlobal(`
-  .switchItem {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 140px;
-    padding: 10px 14px;
-    border-radius: 999px;
-    font-family: system-ui, sans-serif;
-    font-weight: 600;
-    border: 1px solid #ddd;
-  }
-
-  .fadeSlide-enter { opacity: 0; transform: translateY(6px); }
-  .fadeSlide-enter-active { opacity: 1; transform: translateY(0); transition: opacity 300ms ease, transform 300ms ease; }
-  .fadeSlide-exit { opacity: 1; transform: translateY(0); }
-  .fadeSlide-exit-active { opacity: 0; transform: translateY(-6px); transition: opacity 300ms ease, transform 300ms ease; }
-
-  .on { background: #e8fff0; color: #0a7a2f; border-color: #a6efbb; }
-  .off { background: #fff1f1; color: #8a1f1f; border-color: #ffd0d0; }
+.switch-enter,
+.switch-exit {
+  opacity: 0;
+  transform: translateY(-10px) scale(0.98);
+}
+
+.switch-enter-active,
+.switch-exit-active {
+  transition: opacity 300ms ease, transform 300ms ease;
+}
+
+.switch-enter-active, .switch-enter-done {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
 
+.switch-exit-active, .switch-exit-done {
+  opacity: 0;
+  transform: translateY(10px) scale(0.99);
+}
 `);
 
-module.exports = function SwitchButton() {
+
+function Demo() {
   const [on, setOn] = useState(false);
 
   return (
-    <div style={{ padding: 16 }}>
-      <button
-        onClick={() => setOn((v) => !v)}
-        style={{ cursor: "pointer", marginBottom: 12 }}
-      >
+    <div>
+      <button onClick={()=>setOn(v => !v) }>
         Toggle
       </button>
 
-      <SwitchTransition in={on} mode="out-in" timeout={300} classNames="fadeSlide">
-        {(inState) => (
-          <div
-            key={inState ? "on" : "off"}
-            className={`switchItem ${inState ? "on" : "off"}`}
-          >
-            {inState ? "ON" : "OFF"}
+      <div style={{ position: "relative", height: 80 }}>
+        <SwitchTransition
+          activeKey={on ? "on" : "off"}
+          mode="out-in"
+          timeout={300}
+        >
+          <div key="off" style={{ padding: 12, background: "#fee", borderRadius: 5 }}>
+            OFF panel (state preserved)
           </div>
-        )}
-      </SwitchTransition>
+          <div key="on" style={{ padding: 12, background: "#eef", borderRadius: 5 }}>
+            ON panel (state preserved)
+          </div>
+        </SwitchTransition>
+      </div>
     </div>
   );
 }
+
+module.exports = Demo;

package/root/demos/transition.jsx

@@ -9,7 +9,7 @@ function Demo() {
 
   return <>
           <p>This example doesn't actually change the visibility, but emits the events and
-            updated a text according the transition state. See the console for logs.</p>
+            updates a text according the transition state. See the console for logs.</p>
           <div>
             <button onClick={toggleVisibility}>
               {inProp ? 'Hide Component' : 'Show Component'}

package/root/index.html

@@ -4,7 +4,7 @@
 	<meta charset="utf-8"/>
 	<meta name="viewport" content="width=device-width, initial-scale=1" />
 
-	<title>Lilact Demo</title>
+	<title>Lilact Examples</title>
 	<script src='./lilact.development.min.js' type="module"></script>
 
 	<script src="prismjs/prism.min.js"></script>
@@ -72,7 +72,7 @@ injectGlobal({
 			overflowWrap: "anywhere" 
 		},
 		p: {padding: "10px"},
-		body: { padding: "20px", background: "#262d36", color: "#e7e7e7" },
+		body: { padding: "20px", background: "#1a2d2c", color: "#e7e7e7" },
 		":visited": {color: "#c16480"},
 
 	});
@@ -95,7 +95,7 @@ const collapsible = css({
 	padding: "10px",
     borderRadius: "10px",
     border: "none",
-    margin: "4px",
+    margin: "3px 4px",
 	background:"#ece9ea",
 	color: "#222",
 	":hover": {
@@ -141,7 +141,7 @@ const pane = css({ flex: "1 1 0",
 
 const left = css({ float: "left" });
 const right = css({ float: "right" });
-const demobox = css({ background: "#fff3", borderRadius: "12px", padding: "2px", margin: "4px"});
+const demobox = css({ background: "#fff3", borderRadius: "15px", padding: "4px 2px", margin: "4px"});
 
 
 
@@ -217,6 +217,7 @@ function App()
 		['modal.jsx',						'( useEffect, useRef, useState )'],
 		['pane.jsx',						'( useRef, useState, ResizablePane )'],
 		['css-transition.jsx',		'( CSSTransition, useState, useRef )'],
+		['switch-transition.jsx',		'( SwitchTransition )'],
 		['suspense.jsx',				'( Suspense, Spinner )'],
 		['form-elements.jsx',		'()'],
 		"Error Report and Handling",
@@ -230,7 +231,7 @@ function App()
 	return<>
 						<center>
 						<img src="icon.png" width="128"/><br/>
-						<h1>Lilact Demos</h1>
+						<h1>Lilact Examples</h1>
 
 						<p>These scripts are transpiled and run directly in your browser. You have already loaded Lilact completely!</p>
 

package/root/lilact.development.js

@@ -1404,13 +1404,13 @@ __webpack_require__.d(__webpack_exports__, {
   Routes: () => (/* reexport */ Routes),
   Spinner: () => (/* reexport */ Spinner),
   Suspense: () => (/* reexport */ Suspense),
+  SwitchTransition: () => (/* reexport */ SwitchTransition),
   Transition: () => (/* reexport */ Transition),
   TransitionGroup: () => (/* reexport */ TransitionGroup),
   addWrappedEventListener: () => (/* reexport */ addWrappedEventListener),
   animationFramePromise: () => (/* reexport */ animationFramePromise),
   blocks_info: () => (/* reexport */ blocks_info),
   boolean_html_attributes_set: () => (/* reexport */ boolean_html_attributes_set),
-  classNames: () => (/* reexport */ classNames),
   clearInterval: () => (/* reexport */ timers_clearInterval),
   clearTimeout: () => (/* reexport */ timers_clearTimeout),
   combineReducers: () => (/* reexport */ redux_combineReducers),
@@ -1531,7 +1531,6 @@ __webpack_require__.d(misc_namespaceObject, {
   Children: () => (Children),
   Fragment: () => (misc_Fragment),
   boolean_html_attributes_set: () => (boolean_html_attributes_set),
-  classNames: () => (classNames),
   current_component: () => (current_component),
   deepEqual: () => (deepEqual),
   eval_num: () => (eval_num),
@@ -1616,6 +1615,7 @@ var transition_namespaceObject = {};
 __webpack_require__.r(transition_namespaceObject);
 __webpack_require__.d(transition_namespaceObject, {
   CSSTransition: () => (CSSTransition),
+  SwitchTransition: () => (SwitchTransition),
   Transition: () => (Transition),
   TransitionGroup: () => (TransitionGroup)
 });
@@ -4557,19 +4557,6 @@ function getComponentByPointer()
 }
 
 
-/**
- * Utility for applying one or more class names to an element.
- *
- * @param classes - One or more class name values to combine.
- */
-function classNames(classes) {
-	return Object.entries(classes)
-	.filter(([key, value]) => value)
-	.map(([key, value]) => key)
-	.join(' ');
-}
-
-
 /**
  * Checks whether a collection/set/array is empty.
  *
@@ -4779,7 +4766,7 @@ const boolean_html_attributes_set = new
 			 "hidden","open","loop","muted","controls","playsInline","allowFullScreen"]);
 
 
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL1VzZXJzL2FyYXNoL0Rlc2t0b3AvUHJvamVjdHMvTGlsYWN0L3NyYy9taXNjLmpzeCIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi9Vc2Vycy9hcmFzaC9EZXNrdG9wL1Byb2plY3RzL0xpbGFjdC9zcmMvbWlzYy5qc3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsQUFBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0NBaUNDOzs7Z0JBR2UsV0FBVztFQUN6QjtFQUNBOztrREFFZ0QsbUJBQW1CO3NCQUMvQzsrQkFDUzs7Ozs7O0NBTTlCOztDQUVBOzs7Ozs7K0JBTThCLFdBQVc7Ozs7Q0FJekM7Ozs7Ozs0QkFNMkIsYUFBYTs7RUFFdkM7Ozs7Ozs7Ozs7OztJQVlFLHVEQUF1RDs7OztDQUkxRDs7Ozs7a0NBS2tDLEFBQUQsYUFBYTs7O0NBRzlDOzs7Ozs7Ozt5QkFRd0I7O0NBRXhCOzs7Ozs7TUFNSyxXQUFXOzs7UUFHVCxvQkFBb0I7TUFDdEIsMkNBQTJDO29CQUM3Qjs7O1dBR1QsZ0RBQWdEO29CQUN2Qzs7O01BR2QsTUFBTTtvQkFDUTs7OztLQUlmOzs7O0NBSUo7Ozs7OztTQU1RLFdBQVc7S0FDZixXQUFXO01BQ1Y7Ozs7Ozs7O0NBUUw7Ozs7Ozs7OzJCQVEwQjtDQUMxQjtTQUNRLGVBQWdCLEFBQUQ7Ozs7Q0FJdkI7Ozs7O3NDQUtxQztDQUNyQzs7O3dCQUd1QixDQUFFLGFBQWE7Ozs7d0JBSWYsUUFBUTs7aUNBRUM7NkJBQ0o7Ozs7UUFJckIsa0NBQWtDOzs7O2VBSTNCOzs7Ozt5QkFLVTs7Ozs7O0NBTXhCOzs7OzsyQkFLMEIsVUFBVTt1QkFDZDtTQUNiLEFBQUQ7TUFDRixBQUFEO09BQ0M7Ozs7Q0FJTjs7Ozs7O3dCQU11QixTQUFTO0tBQzVCOzs7OztDQUtKOzs7Ozs7OzZCQU80QixvQkFBb0I7S0FDNUMsTUFBTyxtQkFBbUIsV0FBVTs7OztLQUlwQyxNQUFPLHVCQUFzQjtNQUM1QixrQ0FBa0M7OztzQkFHakIsQUFBRDtZQUNWLE1BQU8sd0JBQXVCO3FCQUNyQixjQUFlLEFBQUQ7WUFDdkIsTUFBTyxzQkFBcUI7d0JBQ2hCLHFCQUFxQjs7Ozs7OztDQU81Qzs7Ozs7OzswQkFPeUIsaUJBQWlCO0tBQ3RDLE1BQU8sbUJBQW1CLFdBQVU7Ozs7S0FJcEMsTUFBTyx1QkFBc0I7TUFDNUIsa0NBQWtDOzs7O3NCQUlqQixBQUFELDJCQUE0QjtZQUN0QyxNQUFPLHdCQUF1QjtNQUNwQyxXQUFZLCtCQUErQixrQkFBaUI7Ozs7cUJBSTdDLGNBQWUsQUFBRDtZQUN0Qjs7WUFFRCxNQUFPLHNCQUFxQjt3QkFDaEIscUJBQXFCOzs7Ozs7OztDQVE1Qzs7Ozs7O3dCQU11QixRQUFRO0VBQzlCO0lBQ0UsQ0FBRTs7SUFFRiw0Q0FBNkM7O21DQUVkOzs7Q0FHbEM7Ozs7Ozt3QkFNdUIsUUFBUTs7OztDQUkvQjs7Ozs7OzJCQU0wQixRQUFRO2tCQUNqQjs7O0NBR2pCOzs7Ozs7d0JBTXVCLFFBQVE7aUVBQ2lDOzs7Q0FHaEU7Ozs7Ozt1QkFNc0IsUUFBUTtLQUMxQjs7S0FFQTs7S0FFQSw0QkFBNEI7cUJBQ1osY0FBYztNQUM3QjtNQUNBOzs7Z0JBR1U7Ozs7Q0FJZjs7Q0FFQTtpQ0FDZ0M7O0NBRWhDOztDQUVBOztDQUVBOytCQUM4QixXQUFZO0NBQzFDO3lCQUN3Qjs7O0NBR3hCO0NBQ0E7O0NBRUE7O0NBRUE7O0NBRUE7O0NBRUE7OztDQUdBOzBDQUN5Qzs7Ozs7Q0FLekM7a0NBQ2lDOzs7Ozs7Ozs7Ozs7Ozs7Ozs7O0NBbUJqQztpREFDZ0Q7Ozs7Ozs7OztDQVNoRDs7S0FFSSJ9
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL1VzZXJzL2FyYXNoL0Rlc2t0b3AvUHJvamVjdHMvTGlsYWN0L3NyYy9taXNjLmpzeCIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi9Vc2Vycy9hcmFzaC9EZXNrdG9wL1Byb2plY3RzL0xpbGFjdC9zcmMvbWlzYy5qc3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsQUFBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0NBaUNDOzs7Z0JBR2UsV0FBVztFQUN6QjtFQUNBOztrREFFZ0QsbUJBQW1CO3NCQUMvQzsrQkFDUzs7Ozs7O0NBTTlCOztDQUVBOzs7Ozs7K0JBTThCLFdBQVc7Ozs7Q0FJekM7Ozs7Ozs0QkFNMkIsYUFBYTs7RUFFdkM7Ozs7Ozs7Ozs7OztJQVlFLHVEQUF1RDs7OztDQUkxRDs7Ozs7a0NBS2tDLEFBQUQsYUFBYTs7O0NBRzlDOzs7Ozs7Ozt5QkFRd0I7O0NBRXhCOzs7Ozs7TUFNSyxXQUFXOzs7UUFHVCxvQkFBb0I7TUFDdEIsMkNBQTJDO29CQUM3Qjs7O1dBR1QsZ0RBQWdEO29CQUN2Qzs7O01BR2QsTUFBTTtvQkFDUTs7OztLQUlmOzs7O0NBSUo7Ozs7OztTQU1RLFdBQVc7S0FDZixXQUFXO01BQ1Y7Ozs7Ozs7O0NBUUw7Ozs7Ozs7OzJCQVEwQjtDQUMxQjtTQUNRLGVBQWdCLEFBQUQ7Ozs7Q0FJdkI7Ozs7O3NDQUtxQztDQUNyQzs7O3dCQUd1QixDQUFFLGFBQWE7Ozs7d0JBSWYsUUFBUTs7aUNBRUM7NkJBQ0o7Ozs7UUFJckIsa0NBQWtDOzs7O2VBSTNCOzs7Ozt5QkFLVTs7Ozs7O0NBTXhCOzs7Ozs7d0JBTXVCLFNBQVM7S0FDNUI7Ozs7O0NBS0o7Ozs7Ozs7NkJBTzRCLG9CQUFvQjtLQUM1QyxNQUFPLG1CQUFtQixXQUFVOzs7O0tBSXBDLE1BQU8sdUJBQXNCO01BQzVCLGtDQUFrQzs7O3NCQUdqQixBQUFEO1lBQ1YsTUFBTyx3QkFBdUI7cUJBQ3JCLGNBQWUsQUFBRDtZQUN2QixNQUFPLHNCQUFxQjt3QkFDaEIscUJBQXFCOzs7Ozs7O0NBTzVDOzs7Ozs7OzBCQU95QixpQkFBaUI7S0FDdEMsTUFBTyxtQkFBbUIsV0FBVTs7OztLQUlwQyxNQUFPLHVCQUFzQjtNQUM1QixrQ0FBa0M7Ozs7c0JBSWpCLEFBQUQsMkJBQTRCO1lBQ3RDLE1BQU8sd0JBQXVCO01BQ3BDLFdBQVksK0JBQStCLGtCQUFpQjs7OztxQkFJN0MsY0FBZSxBQUFEO1lBQ3RCOztZQUVELE1BQU8sc0JBQXFCO3dCQUNoQixxQkFBcUI7Ozs7Ozs7O0NBUTVDOzs7Ozs7d0JBTXVCLFFBQVE7RUFDOUI7SUFDRSxDQUFFOztJQUVGLDRDQUE2Qzs7bUNBRWQ7OztDQUdsQzs7Ozs7O3dCQU11QixRQUFROzs7O0NBSS9COzs7Ozs7MkJBTTBCLFFBQVE7a0JBQ2pCOzs7Q0FHakI7Ozs7Ozt3QkFNdUIsUUFBUTtpRUFDaUM7OztDQUdoRTs7Ozs7O3VCQU1zQixRQUFRO0tBQzFCOztLQUVBOztLQUVBLDRCQUE0QjtxQkFDWixjQUFjO01BQzdCO01BQ0E7OztnQkFHVTs7OztDQUlmOztDQUVBO2lDQUNnQzs7Q0FFaEM7O0NBRUE7O0NBRUE7K0JBQzhCLFdBQVk7Q0FDMUM7eUJBQ3dCOzs7Q0FHeEI7Q0FDQTs7Q0FFQTs7Q0FFQTs7Q0FFQTs7Q0FFQTs7O0NBR0E7MENBQ3lDOzs7OztDQUt6QztrQ0FDaUM7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Q0FtQmpDO2lEQUNnRDs7Ozs7Ozs7O0NBU2hEOztLQUVJIn0=
 ;// ./src/components.jsx
 /*
 
@@ -6899,7 +6886,7 @@ function Transition({
  */
 function CSSTransition({
 	in: inProp,
-	timeout = defaultTransitionTimeout,
+	timeout = Lilact.defaultTransitionTimeout,
 	classNames = "fade",
 	mountOnEnter = false,
 	unmountOnExit = false,
@@ -6928,6 +6915,163 @@ function CSSTransition({
 }
 
 
+
+/**
+ * Switches between keyed children with `CSSTransition`.
+ * Ensures each child key gets its own `CSSTransition` instance to avoid state loss.
+ *
+ * @param {object} props
+ * @param {Array} props.children
+ *   The set of children to switch between. Each child should have a stable `key`
+ *   (or your `key` will fall back to its index).
+ * @param {*} props.activeKey
+ *   The key of the currently active child.
+ * @param {"out-in" | "in-out"} [props.mode="out-in"]
+ *   Controls sequencing when `activeKey` changes:
+ *   - `"out-in"`: outgoing transitions out first, incoming transitions in after exit completes.
+ *   - `"in-out"`: incoming transitions in first, outgoing transitions out after the incoming finishes entering
+ *     (relies on `onEntered`).
+ * @param {number} [props.timeout=Lilact.defaultTransitionTimeout]
+ *   Transition timeout passed to each `CSSTransition`.
+ * @param {string} [props.classNames="switch"]
+ *   Base className(s) used by `CSSTransition` to apply enter/exit classes.
+ * @param {boolean} [props.mountOnEnter=false]
+ *   Whether to mount the transitioning child only when it begins entering.
+ * @param {boolean} [props.unmountOnExit=false]
+ *   Whether to unmount the child after it finishes exiting.
+ * @param {boolean} [props.appear=false]
+ *   Whether to run the initial transition on first mount.
+ *
+ * @param {(isAppearing: boolean) => void} [props.onExited]
+ *   Called when the outgoing child finishes exiting.
+ * @param {(isAppearing: boolean) => void} [props.onEnter]
+ *   Called when a child begins entering.
+ * @param {(isAppearing: boolean) => void} [props.onExiting]
+ *   Called when a child begins exiting.
+ * @param {(isAppearing: boolean) => void} [props.onEntered]
+ *   Called when a child finishes entering. Used to implement `"in-out"` sequencing.
+ *
+ * @param {object} [props.csstProps]
+ *   Any additional props are forwarded to each `CSSTransition` instance.
+ */
+
+
+function SwitchTransition({
+  children,
+  activeKey,
+  mode = "out-in", // "out-in" | "in-out"
+
+  timeout = Lilact.defaultTransitionTimeout,
+  classNames = "switch",
+
+  mountOnEnter = false,
+  unmountOnExit = false,
+  appear = false,
+
+  // callbacks (optional)
+  onExited,
+  onEnter,
+  onExiting,
+  onEntered,
+
+  ...csstProps
+}) {
+  const childArray = useMemo(() => Children.toArray(children), [children]);
+
+  // Outgoing key (the one that should exit) and phase flags
+  const [exitingKey, setExitingKey] = useState(null);
+  const [exitStarted, setExitStarted] = useState(false);
+
+  // Controls whether the incoming (activeKey) is currently "in"
+  const [enterAllowed, setEnterAllowed] = useState(true);
+
+  // Refs to avoid stale closures in callbacks
+  const prevKeyRef = useRef(activeKey);
+  const activeKeyRef = useRef(activeKey);
+  const exitingKeyRef = useRef(exitingKey);
+
+  useLayoutEffect(() => {
+    activeKeyRef.current = activeKey;
+  }, [activeKey]);
+
+  useLayoutEffect(() => {
+    exitingKeyRef.current = exitingKey;
+  }, [exitingKey]);
+
+  useLayoutEffect(() => {
+    const prevKey = prevKeyRef.current;
+    if (prevKey === activeKey) return;
+
+    prevKeyRef.current = activeKey;
+
+    // Start a new switch
+    setExitingKey(prevKey);
+
+    if (mode === "out-in") {
+      // Incoming blocked; outgoing should exit immediately.
+      setEnterAllowed(false);
+      setExitStarted(true); // outgoing in: true -> false => triggers exit
+    } else {
+      // Incoming allowed immediately; outgoing should exit only after incoming has entered.
+      setEnterAllowed(true);
+      setExitStarted(false); // outgoing stays in:true until we flip it later
+    }
+  }, [activeKey, mode]);
+
+  const handleExited = (key) => (node, isAppearing) => {
+    if (typeof onExited === "function") onExited(node, isAppearing);
+
+    if (key === exitingKeyRef.current) {
+      setExitingKey(null);
+
+      // out-in: once outgoing is fully exited, allow incoming to start
+      if (mode === "out-in") {
+        setExitStarted(false);
+        setEnterAllowed(true);
+      }
+      // in-out: incoming already entered; just clean up outgoing
+      if (mode === "in-out") {
+        setExitStarted(false);
+      }
+    }
+  };
+
+  const handleEntered = (key) => (node, isAppearing) => {
+    if (typeof onEntered === "function") onEntered(node, isAppearing);
+
+    if (mode === "in-out") {
+      // Only start outgoing exit when the CURRENT incoming (activeKey) finishes entering.
+      if (key === activeKeyRef.current && exitingKeyRef.current != null) {
+        setExitStarted(true); // outgoing in:true -> false => triggers exit
+      }
+    }
+  };
+
+  return (
+     createComponent( "div", { "style": { position: "relative" } }, childArray.map((child, index) => {
+        const key = child?.props?.key || index;
+
+        const isIncoming = key === activeKey;
+        const isOutgoing = key === exitingKey;
+
+        // Core rule:
+        // - Incoming: in = enterAllowed
+        // - Outgoing: in = !exitStarted
+        // - Others: in = false
+        const inProp = isIncoming
+          ? enterAllowed
+          : isOutgoing
+            ? !exitStarted
+            : false;
+
+        return (
+           createComponent( CSSTransition, { ...csstProps, "key": key, "in": inProp, "timeout": timeout, "classNames": classNames, "mountOnEnter": mountOnEnter, "unmountOnExit": unmountOnExit, "appear": appear, "onEnter": onEnter, "onExiting": onExiting, "onEntered": handleEntered(key), "onExited": handleExited(key) },  createComponent( "div", { "style": { position: "absolute", inset: 0 } }, child ) )
+        );
+      }) )
+  );
+}
+
+
 /**
  * Lilact doesn't need TransitionGroup, so it is the same as a fragment.
  * In Lilact all the transitions and timeouts are automatically grouped.
@@ -6940,7 +7084,7 @@ function TransitionGroup({ children }) {
 }
 
 
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL1VzZXJzL2FyYXNoL0Rlc2t0b3AvUHJvamVjdHMvTGlsYWN0L3NyYy90cmFuc2l0aW9uLmpzeCIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi9Vc2Vycy9hcmFzaC9EZXNrdG9wL1Byb2plY3RzL0xpbGFjdC9zcmMvdHJhbnNpdGlvbi5qc3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsQUFBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0NBOEJDOztDQUVBOzs7Ozs7O1FBT087UUFDQTtRQUNBOztDQUVQOzs7Ozs7Ozs7Ozs7Ozs7OzsyQkFpQjJCLEFBQUQ7Ozs7Ozs7Ozs7Ozs7O0NBY3pCO0NBQ0E7Q0FDQTs7SUFFRTs7Ozs7b0NBS2dDLFFBQVE7Y0FDOUI7OztJQUdWLDBCQUEwQjtNQUN4QjtNQUNBLFNBQVM7Ozs7OztXQU1ILEFBQUQsTUFBTztTQUNSLGtCQUFrQjs7O1dBR2hCLEFBQUQsTUFBTztLQUNaLHFGQUFxRjtZQUM5RTt3QkFDYSxBQUFELE1BQU87ZUFDZjtlQUNBO2dDQUNrQixBQUFELE1BQU87O21CQUVuQjs7Y0FFTDs7Ozs7O1dBTUwsQUFBRCxNQUFPO0tBQ1osU0FBUzs7R0FFWDtNQUNHOztZQUVNOzttQkFFUSxBQUFELE1BQU87ZUFDVjtlQUNBOztnQ0FFa0IsQUFBRCxNQUFPOzttQkFFbkI7O2NBRUw7Ozs7T0FJVDtNQUNEOztXQUVLOzttQkFFUSxDQUFFLE1BQU07Y0FDWjtlQUNDO2dDQUNrQixBQUFELE1BQU87O21CQUVuQjthQUNOO01BQ1AsZ0JBQWdCOzs7b0JBR0Y7Ozs7Ozs7S0FPbEI7O0lBRUQsYUFBYTtNQUNYLHNDQUFzQztNQUN0Qzs7Ozs7V0FLSyxxQ0FBcUM7TUFDMUM7Ozs7O1dBS0s7V0FDQTs7Ozs7O0NBTVY7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs4QkFxQjhCLEFBQUQ7Ozs7Ozs7Ozs7SUFVMUI7O0lBRUEsTUFBTywwQkFBeUI7Z0JBQ3BCOzs7Ozs7Ozs7Ozs7U0FZUDtFQUNOLG1SQWNDOzs7OztDQU1IOzs7Ozs7O2dDQU9nQyxBQUFELGVBQWUifQ==
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL1VzZXJzL2FyYXNoL0Rlc2t0b3AvUHJvamVjdHMvTGlsYWN0L3NyYy90cmFuc2l0aW9uLmpzeCIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi9Vc2Vycy9hcmFzaC9EZXNrdG9wL1Byb2plY3RzL0xpbGFjdC9zcmMvdHJhbnNpdGlvbi5qc3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsQUFBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0NBOEJDOztDQUVBOzs7Ozs7O1FBT087UUFDQTtRQUNBOztDQUVQOzs7Ozs7Ozs7Ozs7Ozs7OzsyQkFpQjJCLEFBQUQ7Ozs7Ozs7Ozs7Ozs7O0NBY3pCO0NBQ0E7Q0FDQTs7SUFFRTs7Ozs7b0NBS2dDLFFBQVE7Y0FDOUI7OztJQUdWLDBCQUEwQjtNQUN4QjtNQUNBLFNBQVM7Ozs7OztXQU1ILEFBQUQsTUFBTztTQUNSLGtCQUFrQjs7O1dBR2hCLEFBQUQsTUFBTztLQUNaLHFGQUFxRjtZQUM5RTt3QkFDYSxBQUFELE1BQU87ZUFDZjtlQUNBO2dDQUNrQixBQUFELE1BQU87O21CQUVuQjs7Y0FFTDs7Ozs7O1dBTUwsQUFBRCxNQUFPO0tBQ1osU0FBUzs7R0FFWDtNQUNHOztZQUVNOzttQkFFUSxBQUFELE1BQU87ZUFDVjtlQUNBOztnQ0FFa0IsQUFBRCxNQUFPOzttQkFFbkI7O2NBRUw7Ozs7T0FJVDtNQUNEOztXQUVLOzttQkFFUSxDQUFFLE1BQU07Y0FDWjtlQUNDO2dDQUNrQixBQUFELE1BQU87O21CQUVuQjthQUNOO01BQ1AsZ0JBQWdCOzs7b0JBR0Y7Ozs7Ozs7S0FPbEI7O0lBRUQsYUFBYTtNQUNYLHNDQUFzQztNQUN0Qzs7Ozs7V0FLSyxxQ0FBcUM7TUFDMUM7Ozs7O1dBS0s7V0FDQTs7Ozs7O0NBTVY7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs4QkFxQjhCLEFBQUQ7Ozs7Ozs7Ozs7SUFVMUI7O0lBRUEsTUFBTywwQkFBeUI7Z0JBQ3BCOzs7Ozs7Ozs7Ozs7U0FZUDtFQUNOLG1SQWNDOzs7Ozs7Q0FPSDs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztpQ0F3Q2lDLEFBQUQ7OzttQkFHYjs7Ozs7Ozs7O0VBU2pCOzs7Ozs7O0lBT0M7NkJBQzBCLEFBQUQsc0JBQXVCOztHQUVqRDsrQ0FDNEM7aURBQ0U7O0dBRTlDO21EQUNnRDs7R0FFaEQ7NEJBQ3lCOzhCQUNFOytCQUNDOztrQkFFWixBQUFELE1BQU87Ozs7a0JBSU4sQUFBRCxNQUFPOzs7O2tCQUlOLEFBQUQsTUFBTzs7T0FFakI7Ozs7SUFJSDtpQkFDYTs7T0FFVixvQkFBb0I7TUFDckI7cUJBQ2U7b0JBQ0QsUUFBUTtXQUNqQjtNQUNMO3FCQUNlO29CQUNELFNBQVM7Ozs7d0JBSU4sU0FBUyx1QkFBdUI7UUFDaEQseUNBQXlDOztRQUV6QyxnQ0FBZ0M7b0JBQ3BCOztPQUViO1VBQ0csb0JBQW9CO3VCQUNQO3dCQUNDOztPQUVqQjtVQUNHLG9CQUFvQjt1QkFDUDs7Ozs7eUJBS0UsU0FBUyx1QkFBdUI7UUFDakQsMkNBQTJDOztRQUUzQyxvQkFBb0I7T0FDckI7VUFDRyxnRUFBZ0U7dUJBQ25ELFFBQVE7Ozs7O1VBS3JCO0lBQ0wsbUNBQ0UsY0FBZ0IsQUFBRCxrQkFBbUI7Ozs7MEJBTWhDO0NBQ0E7O21CQUNBO21CQUNBOzs7Ozs7T0FPTyxXQUNMOzs7NlBBY0UsNkNBQ0U7Ozs7Ozs7Q0FVZDs7Ozs7OztnQ0FPZ0MsQUFBRCxlQUFlIn0=
 ;// ./src/events.jsx
 /*
 
@@ -8674,7 +8818,7 @@ var jsx = __webpack_require__(207);
 const lilact_Lilact = 
 {	
 
-	VERSION: "beta.10",
+	VERSION: "beta.11",
 	
 	// Configuration
 
@@ -10289,13 +10433,13 @@ module.exports = ReactPropTypesSecret;
 /******/ const __webpack_exports__Routes = __webpack_exports__.Routes;
 /******/ const __webpack_exports__Spinner = __webpack_exports__.Spinner;
 /******/ const __webpack_exports__Suspense = __webpack_exports__.Suspense;
+/******/ const __webpack_exports__SwitchTransition = __webpack_exports__.SwitchTransition;
 /******/ const __webpack_exports__Transition = __webpack_exports__.Transition;
 /******/ const __webpack_exports__TransitionGroup = __webpack_exports__.TransitionGroup;
 /******/ const __webpack_exports__addWrappedEventListener = __webpack_exports__.addWrappedEventListener;
 /******/ const __webpack_exports__animationFramePromise = __webpack_exports__.animationFramePromise;
 /******/ const __webpack_exports__blocks_info = __webpack_exports__.blocks_info;
 /******/ const __webpack_exports__boolean_html_attributes_set = __webpack_exports__.boolean_html_attributes_set;
-/******/ const __webpack_exports__classNames = __webpack_exports__.classNames;
 /******/ const __webpack_exports__clearInterval = __webpack_exports__.clearInterval;
 /******/ const __webpack_exports__clearTimeout = __webpack_exports__.clearTimeout;
 /******/ const __webpack_exports__combineReducers = __webpack_exports__.combineReducers;
@@ -10374,7 +10518,7 @@ module.exports = ReactPropTypesSecret;
 /******/ const __webpack_exports__useStore = __webpack_exports__.useStore;
 /******/ const __webpack_exports__useTransition = __webpack_exports__.useTransition;
 /******/ const __webpack_exports__wrapListener = __webpack_exports__.wrapListener;
-/******/ export { __webpack_exports__CSSTransition as CSSTransition, __webpack_exports__Children as Children, __webpack_exports__Component as Component, __webpack_exports__ErrorBoundary as ErrorBoundary, __webpack_exports__Fragment as Fragment, __webpack_exports__HTMLComponent as HTMLComponent, __webpack_exports__HashRouter as HashRouter, __webpack_exports__Lilact as Lilact, __webpack_exports__Link as Link, __webpack_exports__NavLink as NavLink, __webpack_exports__PropTypes as PropTypes, __webpack_exports__Provider as Provider, __webpack_exports__ResizablePane as ResizablePane, __webpack_exports__RootComponent as RootComponent, __webpack_exports__Route as Route, __webpack_exports__Routes as Routes, __webpack_exports__Spinner as Spinner, __webpack_exports__Suspense as Suspense, __webpack_exports__Transition as Transition, __webpack_exports__TransitionGroup as TransitionGroup, __webpack_exports__addWrappedEventListener as addWrappedEventListener, __webpack_exports__animationFramePromise as animationFramePromise, __webpack_exports__blocks_info as blocks_info, __webpack_exports__boolean_html_attributes_set as boolean_html_attributes_set, __webpack_exports__classNames as classNames, __webpack_exports__clearInterval as clearInterval, __webpack_exports__clearTimeout as clearTimeout, __webpack_exports__combineReducers as combineReducers, __webpack_exports__connect as connect, __webpack_exports__createComponent as createComponent, __webpack_exports__createContext as createContext, __webpack_exports__createElement as createElement, __webpack_exports__createRoot as createRoot, __webpack_exports__createSyntheticEvent as createSyntheticEvent, __webpack_exports__current_component as current_component, __webpack_exports__deepEqual as deepEqual, __webpack_exports__default as default, __webpack_exports__emotion as emotion, __webpack_exports__error as error, __webpack_exports__eval_num as eval_num, __webpack_exports__events_set as events_set, __webpack_exports__findDOMNode as findDOMNode, __webpack_exports__forwardRef as forwardRef, __webpack_exports__getComponentByPointer as getComponentByPointer, __webpack_exports__globalErrorHandler as globalErrorHandler, __webpack_exports__grabTimers as grabTimers, __webpack_exports__id_num as id_num, __webpack_exports__isAsync as isAsync, __webpack_exports__isClass as isClass, __webpack_exports__isEmpty as isEmpty, __webpack_exports__isError as isError, __webpack_exports__isThenable as isThenable, __webpack_exports__isValidElement as isValidElement, __webpack_exports__layout_effects as layout_effects, __webpack_exports__lazy as lazy, __webpack_exports__length_css_attributes_set as length_css_attributes_set, __webpack_exports__pauseTimers as pauseTimers, __webpack_exports__redux as redux, __webpack_exports__releaseSyntheticEvent as releaseSyntheticEvent, __webpack_exports__releaseTimers as releaseTimers, __webpack_exports__render as render, __webpack_exports__require as require, __webpack_exports__required_scripts as required_scripts, __webpack_exports__resetTimers as resetTimers, __webpack_exports__resumeTimers as resumeTimers, __webpack_exports__roots as roots, __webpack_exports__run as run, __webpack_exports__runScripts as runScripts, __webpack_exports__scanBlockLabels as scanBlockLabels, __webpack_exports__setInterval as setInterval, __webpack_exports__setTimeout as setTimeout, __webpack_exports__shallowEqual as shallowEqual, __webpack_exports__special_attributes as special_attributes, __webpack_exports__timeoutPromise as timeoutPromise, __webpack_exports__toBool as toBool, __webpack_exports__traceError as traceError, __webpack_exports__transpileJSX as transpileJSX, __webpack_exports__transpilerConfig as transpilerConfig, __webpack_exports__update_cbs as update_cbs, __webpack_exports__update_interval_margin as update_interval_margin, __webpack_exports__update_set as update_set, __webpack_exports__update_timeout as update_timeout, __webpack_exports__useActionState as useActionState, __webpack_exports__useCallback as useCallback, __webpack_exports__useContext as useContext, __webpack_exports__useDeferredValue as useDeferredValue, __webpack_exports__useDispatch as useDispatch, __webpack_exports__useEffect as useEffect, __webpack_exports__useHook as useHook, __webpack_exports__useId as useId, __webpack_exports__useImperativeHandle as useImperativeHandle, __webpack_exports__useLayoutEffect as useLayoutEffect, __webpack_exports__useLocalStorage as useLocalStorage, __webpack_exports__useLocation as useLocation, __webpack_exports__useMemo as useMemo, __webpack_exports__useNavigate as useNavigate, __webpack_exports__useReducer as useReducer, __webpack_exports__useRef as useRef, __webpack_exports__useSelector as useSelector, __webpack_exports__useState as useState, __webpack_exports__useStore as useStore, __webpack_exports__useTransition as useTransition, __webpack_exports__wrapListener as wrapListener };
+/******/ export { __webpack_exports__CSSTransition as CSSTransition, __webpack_exports__Children as Children, __webpack_exports__Component as Component, __webpack_exports__ErrorBoundary as ErrorBoundary, __webpack_exports__Fragment as Fragment, __webpack_exports__HTMLComponent as HTMLComponent, __webpack_exports__HashRouter as HashRouter, __webpack_exports__Lilact as Lilact, __webpack_exports__Link as Link, __webpack_exports__NavLink as NavLink, __webpack_exports__PropTypes as PropTypes, __webpack_exports__Provider as Provider, __webpack_exports__ResizablePane as ResizablePane, __webpack_exports__RootComponent as RootComponent, __webpack_exports__Route as Route, __webpack_exports__Routes as Routes, __webpack_exports__Spinner as Spinner, __webpack_exports__Suspense as Suspense, __webpack_exports__SwitchTransition as SwitchTransition, __webpack_exports__Transition as Transition, __webpack_exports__TransitionGroup as TransitionGroup, __webpack_exports__addWrappedEventListener as addWrappedEventListener, __webpack_exports__animationFramePromise as animationFramePromise, __webpack_exports__blocks_info as blocks_info, __webpack_exports__boolean_html_attributes_set as boolean_html_attributes_set, __webpack_exports__clearInterval as clearInterval, __webpack_exports__clearTimeout as clearTimeout, __webpack_exports__combineReducers as combineReducers, __webpack_exports__connect as connect, __webpack_exports__createComponent as createComponent, __webpack_exports__createContext as createContext, __webpack_exports__createElement as createElement, __webpack_exports__createRoot as createRoot, __webpack_exports__createSyntheticEvent as createSyntheticEvent, __webpack_exports__current_component as current_component, __webpack_exports__deepEqual as deepEqual, __webpack_exports__default as default, __webpack_exports__emotion as emotion, __webpack_exports__error as error, __webpack_exports__eval_num as eval_num, __webpack_exports__events_set as events_set, __webpack_exports__findDOMNode as findDOMNode, __webpack_exports__forwardRef as forwardRef, __webpack_exports__getComponentByPointer as getComponentByPointer, __webpack_exports__globalErrorHandler as globalErrorHandler, __webpack_exports__grabTimers as grabTimers, __webpack_exports__id_num as id_num, __webpack_exports__isAsync as isAsync, __webpack_exports__isClass as isClass, __webpack_exports__isEmpty as isEmpty, __webpack_exports__isError as isError, __webpack_exports__isThenable as isThenable, __webpack_exports__isValidElement as isValidElement, __webpack_exports__layout_effects as layout_effects, __webpack_exports__lazy as lazy, __webpack_exports__length_css_attributes_set as length_css_attributes_set, __webpack_exports__pauseTimers as pauseTimers, __webpack_exports__redux as redux, __webpack_exports__releaseSyntheticEvent as releaseSyntheticEvent, __webpack_exports__releaseTimers as releaseTimers, __webpack_exports__render as render, __webpack_exports__require as require, __webpack_exports__required_scripts as required_scripts, __webpack_exports__resetTimers as resetTimers, __webpack_exports__resumeTimers as resumeTimers, __webpack_exports__roots as roots, __webpack_exports__run as run, __webpack_exports__runScripts as runScripts, __webpack_exports__scanBlockLabels as scanBlockLabels, __webpack_exports__setInterval as setInterval, __webpack_exports__setTimeout as setTimeout, __webpack_exports__shallowEqual as shallowEqual, __webpack_exports__special_attributes as special_attributes, __webpack_exports__timeoutPromise as timeoutPromise, __webpack_exports__toBool as toBool, __webpack_exports__traceError as traceError, __webpack_exports__transpileJSX as transpileJSX, __webpack_exports__transpilerConfig as transpilerConfig, __webpack_exports__update_cbs as update_cbs, __webpack_exports__update_interval_margin as update_interval_margin, __webpack_exports__update_set as update_set, __webpack_exports__update_timeout as update_timeout, __webpack_exports__useActionState as useActionState, __webpack_exports__useCallback as useCallback, __webpack_exports__useContext as useContext, __webpack_exports__useDeferredValue as useDeferredValue, __webpack_exports__useDispatch as useDispatch, __webpack_exports__useEffect as useEffect, __webpack_exports__useHook as useHook, __webpack_exports__useId as useId, __webpack_exports__useImperativeHandle as useImperativeHandle, __webpack_exports__useLayoutEffect as useLayoutEffect, __webpack_exports__useLocalStorage as useLocalStorage, __webpack_exports__useLocation as useLocation, __webpack_exports__useMemo as useMemo, __webpack_exports__useNavigate as useNavigate, __webpack_exports__useReducer as useReducer, __webpack_exports__useRef as useRef, __webpack_exports__useSelector as useSelector, __webpack_exports__useState as useState, __webpack_exports__useStore as useStore, __webpack_exports__useTransition as useTransition, __webpack_exports__wrapListener as wrapListener };
 /******/ 
 
 //# sourceMappingURL=lilact.development.js.map