@plitzi/sdk-style 0.33.1 → 0.34.0

package/dist/StyleReducer.mjs

@@ -1,5 +1,5 @@
-import e from "./StyleMap/index.mjs";
-import { generateCache as t } from "./StyleHelper.mjs";
+import { generateCache as e } from "./StyleHelper.mjs";
+import t from "./StyleMap/index.mjs";
 import { get as n, set as r } from "@plitzi/plitzi-ui/helpers";
 import { produce as i } from "immer";
 //#region src/StyleReducer.ts
@@ -15,6 +15,9 @@ var a = {
 	STYLE_ADD_VARIABLE: "STYLE_ADD_VARIABLE",
 	STYLE_UPDATE_VARIABLE: "STYLE_UPDATE_VARIABLE",
 	STYLE_REMOVE_VARIABLE: "STYLE_REMOVE_VARIABLE",
+	STYLE_ADD_FONT: "STYLE_ADD_FONT",
+	STYLE_UPDATE_FONT: "STYLE_UPDATE_FONT",
+	STYLE_REMOVE_FONT: "STYLE_REMOVE_FONT",
 	STYLE_ADD_TEMPLATE: "STYLE_ADD_TEMPLATE",
 	STYLE_UPDATE_SETTINGS: "STYLE_UPDATE_SETTINGS"
 }, o = (o, s) => {
@@ -26,73 +29,91 @@ var a = {
 		case a.STYLE_ADD_SELECTOR: {
 			let { displayMode: n, selectorType: a, selector: c, path: l, value: u, params: d } = s;
 			return i(o, (i) => {
-				e.addSelector(i, n, c, a, l, u, d) && r(i, "cache", t(i));
+				t.addSelector(i, n, c, a, l, u, d) && r(i, "cache", e(i));
 			});
 		}
 		case a.STYLE_UPDATE_SELECTOR: {
 			let { displayMode: n, selector: a, path: c, value: l, params: u } = s;
 			return i(o, (i) => {
-				e.updateSelector(i, n, a, c, l, u) && r(i, "cache", t(i));
+				t.updateSelector(i, n, a, c, l, u) && r(i, "cache", e(i));
 			});
 		}
 		case a.STYLE_REMOVE_SELECTOR: {
 			let { displayMode: n, selector: a } = s;
 			return i(o, (i) => {
-				e.removeSelector(i, n, a) && r(i, "cache", t(i));
+				t.removeSelector(i, n, a) && r(i, "cache", e(i));
 			});
 		}
 		case a.STYLE_REMOVE_SELECTORS: {
 			let { displayMode: n, selectors: a } = s;
 			return i(o, (i) => {
-				a.reduce((t, r) => e.removeSelector(i, n, r) || t, !1) && r(i, "cache", t(i));
+				a.reduce((e, r) => t.removeSelector(i, n, r) || e, !1) && r(i, "cache", e(i));
 			});
 		}
 		case a.STYLE_ADD_SELECTOR_VARIABLE: {
 			let { displayMode: n, selector: a, category: c, name: l, value: u } = s;
 			return i(o, (i) => {
-				e.addSelectorVariable(i, n, a, c, l, u) && r(i, "cache", t(i));
+				t.addSelectorVariable(i, n, a, c, l, u) && r(i, "cache", e(i));
 			});
 		}
 		case a.STYLE_UPDATE_SELECTOR_VARIABLE: {
 			let { displayMode: n, selector: a, category: c, name: l, value: u } = s;
 			return i(o, (i) => {
-				e.updateSelectorVariable(i, n, a, c, l, u) && r(i, "cache", t(i));
+				t.updateSelectorVariable(i, n, a, c, l, u) && r(i, "cache", e(i));
 			});
 		}
 		case a.STYLE_REMOVE_SELECTOR_VARIABLE: {
 			let { displayMode: n, selector: a, category: c, name: l } = s;
 			return i(o, (i) => {
-				e.removeSelectorVariable(i, n, a, c, l) && r(i, "cache", t(i));
+				t.removeSelectorVariable(i, n, a, c, l) && r(i, "cache", e(i));
 			});
 		}
 		case a.STYLE_ADD_VARIABLE: {
 			let { category: n, name: a, value: c } = s;
 			return i(o, (i) => {
-				e.addVariable(i, n, a, c) && r(i, "cache", t(i));
+				t.addVariable(i, n, a, c) && r(i, "cache", e(i));
 			});
 		}
 		case a.STYLE_UPDATE_VARIABLE: {
 			let { category: n, name: a, value: c } = s;
 			return i(o, (i) => {
-				e.updateVariable(i, n, a, c) && r(i, "cache", t(i));
+				t.updateVariable(i, n, a, c) && r(i, "cache", e(i));
 			});
 		}
 		case a.STYLE_REMOVE_VARIABLE: {
 			let { category: n, name: a } = s;
 			return i(o, (i) => {
-				e.removeVariable(i, n, a) && r(i, "cache", t(i));
+				t.removeVariable(i, n, a) && r(i, "cache", e(i));
+			});
+		}
+		case a.STYLE_ADD_FONT: {
+			let { font: e } = s;
+			return i(o, (n) => {
+				t.addFont(n, e);
+			});
+		}
+		case a.STYLE_UPDATE_FONT: {
+			let { family: e, font: n } = s;
+			return i(o, (r) => {
+				t.updateFont(r, e, n);
+			});
+		}
+		case a.STYLE_REMOVE_FONT: {
+			let { family: e } = s;
+			return i(o, (n) => {
+				t.removeFont(n, e);
 			});
 		}
 		case a.STYLE_ADD_TEMPLATE: {
-			let { platform: e } = s;
+			let { platform: t } = s;
 			return i(o, (r) => {
 				let i = n(r, "platform", {});
-				Object.keys(e).forEach((t) => {
-					i[t] = {
-						...n(i, t, {}),
-						...e[t]
+				Object.keys(t).forEach((e) => {
+					i[e] = {
+						...n(i, e, {}),
+						...t[e]
 					};
-				}), r.platform = i, r.cache = t(r);
+				}), r.platform = i, r.cache = e(r);
 			});
 		}
 		case a.STYLE_UPDATE_SETTINGS: {

package/dist/components/InputEasing/InputEasing.mjs

@@ -1,9 +1,9 @@
 import e from "./Curve.mjs";
 import t from "./Grid.mjs";
 import n from "./Progress.mjs";
-import r from "clsx";
-import { Component as i, createRef as a } from "react";
-import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Component as r, createRef as i } from "react";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import c from "clsx";
 //#region src/components/InputEasing/InputEasing.tsx
 var l = [
 	.25,
@@ -15,12 +15,12 @@ var l = [
 	5,
 	25,
 	18
-], d = class extends i {
+], d = class extends r {
 	props;
 	state;
 	constructor(e) {
 		super(e), this.props = e, this.state = {
-			inputRef: a(),
+			inputRef: i(),
 			handle: void 0
 		};
 	}
@@ -59,53 +59,53 @@ var l = [
 		window.removeEventListener("mousemove", this.handleMouseMove), window.removeEventListener("mouseup", this.handleMouseUp);
 	};
 	render() {
-		let { children: i, value: a = l, width: u = 300, height: d = 300, handleRadius: f = 5, className: p = "", progress: m = 0, readOnly: h = !1 } = this.props, { inputRef: g } = this.state, _ = {
+		let { children: r, value: i = l, width: u = 300, height: d = 300, handleRadius: f = 5, className: p = "", progress: m = 0, readOnly: h = !1 } = this.props, { inputRef: g } = this.state, _ = {
 			xFrom: this.x(0),
 			yFrom: this.y(0),
 			xTo: this.x(1),
 			yTo: this.y(1)
-		}, v = this.x(0), y = this.y(0), b = this.x(a[0]), x = this.y(a[1]), S = Math.atan2(x - y, b - v), C = b - f * Math.cos(S), w = x - f * Math.sin(S), T = this.x(1), E = this.y(1), D = this.x(a[2]), O = this.y(a[3]), k = Math.atan2(O - E, D - T), A = D - f * Math.cos(k), j = O - f * Math.sin(k);
-		return /* @__PURE__ */ c("svg", {
-			className: r("overflow-visible select-none", p),
+		}, v = this.x(0), y = this.y(0), b = this.x(i[0]), x = this.y(i[1]), S = Math.atan2(x - y, b - v), C = b - f * Math.cos(S), w = x - f * Math.sin(S), T = this.x(1), E = this.y(1), D = this.x(i[2]), O = this.y(i[3]), k = Math.atan2(O - E, D - T), A = D - f * Math.cos(k), j = O - f * Math.sin(k);
+		return /* @__PURE__ */ s("svg", {
+			className: c("overflow-visible select-none", p),
 			ref: g,
 			width: u,
 			height: d,
 			children: [
-				/* @__PURE__ */ s(t, { ..._ }),
-				/* @__PURE__ */ s(n, {
+				/* @__PURE__ */ o(t, { ..._ }),
+				/* @__PURE__ */ o(n, {
 					..._,
-					value: a,
+					value: i,
 					progress: m
 				}),
-				/* @__PURE__ */ s(e, {
+				/* @__PURE__ */ o(e, {
 					..._,
-					value: a
+					value: i
 				}),
-				i,
-				!h && /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ c("g", {
+				r,
+				!h && /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ s("g", {
 					className: "group",
-					children: [/* @__PURE__ */ s("line", {
+					children: [/* @__PURE__ */ o("line", {
 						x1: C,
 						y1: w,
 						x2: v,
 						y2: y,
 						className: "stroke-blue-400 stroke-[3px] group-hover:stroke-[4px]"
-					}), /* @__PURE__ */ s("circle", {
+					}), /* @__PURE__ */ o("circle", {
 						cx: b,
 						cy: x,
 						r: f,
 						onMouseDown: this.handleMouseDown("bottom"),
 						className: "cursor-pointer fill-blue-400 stroke-blue-400 stroke-[3px] group-hover:fill-white group-hover:stroke-[6px]"
 					})]
-				}), /* @__PURE__ */ c("g", {
+				}), /* @__PURE__ */ s("g", {
 					className: "group",
-					children: [/* @__PURE__ */ s("line", {
+					children: [/* @__PURE__ */ o("line", {
 						x1: A,
 						y1: j,
 						x2: T,
 						y2: E,
 						className: "stroke-blue-400 stroke-[3px] group-hover:stroke-[4px]"
-					}), /* @__PURE__ */ s("circle", {
+					}), /* @__PURE__ */ o("circle", {
 						cx: D,
 						cy: O,
 						r: f,

package/dist/components/InputEasing/InputEasingButton.mjs

@@ -1,12 +1,12 @@
-import e from "clsx";
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
+import t from "clsx";
 //#region src/components/InputEasing/InputEasingButton.tsx
-var n = ({ children: n, title: r = "", className: i = "", onClick: a }) => /* @__PURE__ */ t("button", {
+var n = ({ children: n, title: r = "", className: i = "", onClick: a }) => /* @__PURE__ */ e("button", {
 	type: "button",
 	title: r,
 	onClick: a,
-	className: e("m-1 h-6 w-6 rounded-sm p-1 hover:bg-gray-100", i),
-	children: /* @__PURE__ */ t("svg", {
+	className: t("m-1 h-6 w-6 rounded-sm p-1 hover:bg-gray-100", i),
+	children: /* @__PURE__ */ e("svg", {
 		viewBox: "0 0 30 30",
 		className: "overflow-visible",
 		children: n

package/dist/components/InputEasing/InputEasingList.mjs

@@ -1,57 +1,57 @@
 import e from "./InputEasingButton.mjs";
-import t from "clsx";
-import { useCallback as n } from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useCallback as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import i from "clsx";
 //#region src/components/InputEasing/InputEasingList.tsx
 var a = ({ className: a = "", onChange: o }) => {
-	let s = n((e) => () => o?.(e), [o]);
-	return /* @__PURE__ */ i("div", {
-		className: t("flex flex-col border-r border-gray-300", a),
+	let s = t((e) => () => o?.(e), [o]);
+	return /* @__PURE__ */ r("div", {
+		className: i("flex flex-col border-r border-gray-300", a),
 		children: [
-			/* @__PURE__ */ i("div", {
+			/* @__PURE__ */ r("div", {
 				className: "flex flex-col",
-				children: [/* @__PURE__ */ r("div", {
+				children: [/* @__PURE__ */ n("div", {
 					className: "bg-blue-400 p-1 text-xs text-white",
 					children: "Default"
-				}), /* @__PURE__ */ i("div", {
+				}), /* @__PURE__ */ r("div", {
 					className: "flex flex-wrap",
 					children: [
-						/* @__PURE__ */ r(e, {
+						/* @__PURE__ */ n(e, {
 							title: "Linear",
 							onClick: s("linear"),
-							children: /* @__PURE__ */ r("path", {
+							children: /* @__PURE__ */ n("path", {
 								d: "M30,0 C22.5,7.5 7.5,22.5 0,30",
 								className: "fill-transparent stroke-current stroke-2"
 							})
 						}),
-						/* @__PURE__ */ r(e, {
+						/* @__PURE__ */ n(e, {
 							title: "Ease",
 							onClick: s("ease"),
-							children: /* @__PURE__ */ r("path", {
+							children: /* @__PURE__ */ n("path", {
 								d: "M30,0 C7.5,0 7.5,27 0,30",
 								className: "fill-transparent stroke-current stroke-2"
 							})
 						}),
-						/* @__PURE__ */ r(e, {
+						/* @__PURE__ */ n(e, {
 							title: "Ease-in",
 							onClick: s("ease-in"),
-							children: /* @__PURE__ */ r("path", {
+							children: /* @__PURE__ */ n("path", {
 								d: "M30,0 C30,0 12.6,30 0,30",
 								className: "fill-transparent stroke-current stroke-2"
 							})
 						}),
-						/* @__PURE__ */ r(e, {
+						/* @__PURE__ */ n(e, {
 							title: "Ease-out",
 							onClick: s("ease-out"),
-							children: /* @__PURE__ */ r("path", {
+							children: /* @__PURE__ */ n("path", {
 								d: "M30,0 C17.4,0 0,30 0,30",
 								className: "fill-transparent stroke-current stroke-2"
 							})
 						}),
-						/* @__PURE__ */ r(e, {
+						/* @__PURE__ */ n(e, {
 							title: "Ease-in-out",
 							onClick: s("ease-in-out"),
-							children: /* @__PURE__ */ r("path", {
+							children: /* @__PURE__ */ n("path", {
 								d: "M30,0 C17.4,0 12.6,30 0,30",
 								className: "fill-transparent stroke-current stroke-2"
 							})
@@ -59,74 +59,74 @@ var a = ({ className: a = "", onChange: o }) => {
 					]
 				})]
 			}),
-			/* @__PURE__ */ i("div", {
+			/* @__PURE__ */ r("div", {
 				className: "flex flex-col",
-				children: [/* @__PURE__ */ r("div", {
+				children: [/* @__PURE__ */ n("div", {
 					className: "bg-blue-400 p-1 text-xs text-white",
 					children: "Ease In"
-				}), /* @__PURE__ */ i("div", {
+				}), /* @__PURE__ */ r("div", {
 					className: "flex flex-wrap",
 					children: [
-						/* @__PURE__ */ r(e, {
+						/* @__PURE__ */ n(e, {
 							title: "Ease In Quad",
 							onClick: s("easeInQuad"),
-							children: /* @__PURE__ */ r("path", {
+							children: /* @__PURE__ */ n("path", {
 								d: "M30,0 C20.400000000000002,14.1 16.5,27.45 0,30",
 								className: "fill-transparent stroke-current stroke-2"
 							})
 						}),
-						/* @__PURE__ */ r(e, {
+						/* @__PURE__ */ n(e, {
 							title: "Ease In Cubic",
 							onClick: s("easeInCubic"),
-							children: /* @__PURE__ */ r("path", {
+							children: /* @__PURE__ */ n("path", {
 								d: "M30,0 C20.25,24.3 16.5,28.35 0,30",
 								className: "fill-transparent stroke-current stroke-2"
 							})
 						}),
-						/* @__PURE__ */ r(e, {
+						/* @__PURE__ */ n(e, {
 							title: "Ease In Quart",
 							onClick: s("easeInQuart"),
-							children: /* @__PURE__ */ r("path", {
+							children: /* @__PURE__ */ n("path", {
 								d: "M30,0 C25.65,28.2 22.65,28.5 0,30",
 								className: "fill-transparent stroke-current stroke-2"
 							})
 						}),
-						/* @__PURE__ */ r(e, {
+						/* @__PURE__ */ n(e, {
 							title: "Ease In Quint",
 							onClick: s("easeInQuint"),
-							children: /* @__PURE__ */ r("path", {
+							children: /* @__PURE__ */ n("path", {
 								d: "M30,0 C25.65,28.2 22.65,28.5 0,30",
 								className: "fill-transparent stroke-current stroke-2"
 							})
 						}),
-						/* @__PURE__ */ r(e, {
+						/* @__PURE__ */ n(e, {
 							title: "Ease In Sine",
 							onClick: s("easeInSine"),
-							children: /* @__PURE__ */ r("path", {
+							children: /* @__PURE__ */ n("path", {
 								d: "M30,0 C22.35,8.55 14.1,30 0,30",
 								className: "fill-transparent stroke-current stroke-2"
 							})
 						}),
-						/* @__PURE__ */ r(e, {
+						/* @__PURE__ */ n(e, {
 							title: "Ease In Expo",
 							onClick: s("easeInExpo"),
-							children: /* @__PURE__ */ r("path", {
+							children: /* @__PURE__ */ n("path", {
 								d: "M30,0 C23.85,28.95 28.5,28.5 0,30",
 								className: "fill-transparent stroke-current stroke-2"
 							})
 						}),
-						/* @__PURE__ */ r(e, {
+						/* @__PURE__ */ n(e, {
 							title: "Ease In Circ",
 							onClick: s("easeInCirc"),
-							children: /* @__PURE__ */ r("path", {
+							children: /* @__PURE__ */ n("path", {
 								d: "M30,0 C29.4,19.95 18,28.8 0,30",
 								className: "fill-transparent stroke-current stroke-2"
 							})
 						}),
-						/* @__PURE__ */ r(e, {
+						/* @__PURE__ */ n(e, {
 							title: "Ease In Back",
 							onClick: s("easeInBack"),
-							children: /* @__PURE__ */ r("path", {
+							children: /* @__PURE__ */ n("path", {
 								d: "M30,0 C22.05,28.65 18,38.4 0,30",
 								className: "fill-transparent stroke-current stroke-2"
 							})
@@ -134,74 +134,74 @@ var a = ({ className: a = "", onChange: o }) => {
 					]
 				})]
 			}),
-			/* @__PURE__ */ i("div", {
+			/* @__PURE__ */ r("div", {
 				className: "flex flex-col",
-				children: [/* @__PURE__ */ r("div", {
+				children: [/* @__PURE__ */ n("div", {
 					className: "bg-blue-400 p-1 text-xs text-white",
 					children: "Ease Out"
-				}), /* @__PURE__ */ i("div", {
+				}), /* @__PURE__ */ r("div", {
 					className: "flex flex-wrap",
 					children: [
-						/* @__PURE__ */ r(e, {
+						/* @__PURE__ */ n(e, {
 							title: "Ease Out Quad",
 							onClick: s("easeOutQuad"),
-							children: /* @__PURE__ */ r("path", {
+							children: /* @__PURE__ */ n("path", {
 								d: "M30,0 C13.5,1.8000000000000007 7.5,16.2 0,30",
 								className: "fill-transparent stroke-current stroke-2"
 							})
 						}),
-						/* @__PURE__ */ r(e, {
+						/* @__PURE__ */ n(e, {
 							title: "Ease Out Cubic",
 							onClick: s("easeOutCubic"),
-							children: /* @__PURE__ */ r("path", {
+							children: /* @__PURE__ */ n("path", {
 								d: "M30,0 C10.649999999999999,0 6.45,11.7 0,30",
 								className: "fill-transparent stroke-current stroke-2"
 							})
 						}),
-						/* @__PURE__ */ r(e, {
+						/* @__PURE__ */ n(e, {
 							title: "Ease Out Quart",
 							onClick: s("easeOutQuart"),
-							children: /* @__PURE__ */ r("path", {
+							children: /* @__PURE__ */ n("path", {
 								d: "M30,0 C13.2,0 4.95,4.800000000000001 0,30",
 								className: "fill-transparent stroke-current stroke-2"
 							})
 						}),
-						/* @__PURE__ */ r(e, {
+						/* @__PURE__ */ n(e, {
 							title: "Ease Out Quint",
 							onClick: s("easeOutQuint"),
-							children: /* @__PURE__ */ r("path", {
+							children: /* @__PURE__ */ n("path", {
 								d: "M30,0 C9.6,0 6.9,0 0,30",
 								className: "fill-transparent stroke-current stroke-2"
 							})
 						}),
-						/* @__PURE__ */ r(e, {
+						/* @__PURE__ */ n(e, {
 							title: "Ease Out Sine",
 							onClick: s("easeOutSine"),
-							children: /* @__PURE__ */ r("path", {
+							children: /* @__PURE__ */ n("path", {
 								d: "M30,0 C16.95,0 11.700000000000001,12.75 0,30",
 								className: "fill-transparent stroke-current stroke-2"
 							})
 						}),
-						/* @__PURE__ */ r(e, {
+						/* @__PURE__ */ n(e, {
 							title: "Ease Out Expo",
 							onClick: s("easeOutExpo"),
-							children: /* @__PURE__ */ r("path", {
+							children: /* @__PURE__ */ n("path", {
 								d: "M30,0 C6.6,0 5.7,0 0,30",
 								className: "fill-transparent stroke-current stroke-2"
 							})
 						}),
-						/* @__PURE__ */ r(e, {
+						/* @__PURE__ */ n(e, {
 							title: "Ease Out Circ",
 							onClick: s("easeOutCirc"),
-							children: /* @__PURE__ */ r("path", {
+							children: /* @__PURE__ */ n("path", {
 								d: "M30,0 C4.95,0 2.25,5.400000000000002 0,30",
 								className: "fill-transparent stroke-current stroke-2"
 							})
 						}),
-						/* @__PURE__ */ r(e, {
+						/* @__PURE__ */ n(e, {
 							title: "Ease Out Back",
 							onClick: s("easeOutBack"),
-							children: /* @__PURE__ */ r("path", {
+							children: /* @__PURE__ */ n("path", {
 								d: "M30,0 C9.6,-8.25 5.25,3.4499999999999993 0,30",
 								className: "fill-transparent stroke-current stroke-2"
 							})
@@ -209,74 +209,74 @@ var a = ({ className: a = "", onChange: o }) => {
 					]
 				})]
 			}),
-			/* @__PURE__ */ i("div", {
+			/* @__PURE__ */ r("div", {
 				className: "flex flex-col",
-				children: [/* @__PURE__ */ r("div", {
+				children: [/* @__PURE__ */ n("div", {
 					className: "bg-blue-400 p-1 text-xs text-white",
 					children: "Ease In Out"
-				}), /* @__PURE__ */ i("div", {
+				}), /* @__PURE__ */ r("div", {
 					className: "flex flex-wrap",
 					children: [
-						/* @__PURE__ */ r(e, {
+						/* @__PURE__ */ n(e, {
 							title: "Ease In Out Quad",
 							onClick: s("easeInOutQuad"),
-							children: /* @__PURE__ */ r("path", {
+							children: /* @__PURE__ */ n("path", {
 								d: "M30,0 C15.450000000000001,1.3500000000000014 13.65,29.1 0,30",
 								className: "fill-transparent stroke-current stroke-2"
 							})
 						}),
-						/* @__PURE__ */ r(e, {
+						/* @__PURE__ */ n(e, {
 							title: "Ease In Out Cubic",
 							onClick: s("easeInOutCubic"),
-							children: /* @__PURE__ */ r("path", {
+							children: /* @__PURE__ */ n("path", {
 								d: "M30,0 C10.649999999999999,0 19.35,28.65 0,30",
 								className: "fill-transparent stroke-current stroke-2"
 							})
 						}),
-						/* @__PURE__ */ r(e, {
+						/* @__PURE__ */ n(e, {
 							title: "Ease In Out Quart",
 							onClick: s("easeInOutQuart"),
-							children: /* @__PURE__ */ r("path", {
+							children: /* @__PURE__ */ n("path", {
 								d: "M30,0 C5.25,0 23.1,30 0,30",
 								className: "fill-transparent stroke-current stroke-2"
 							})
 						}),
-						/* @__PURE__ */ r(e, {
+						/* @__PURE__ */ n(e, {
 							title: "Ease In Out Quint",
 							onClick: s("easeInOutQuint"),
-							children: /* @__PURE__ */ r("path", {
+							children: /* @__PURE__ */ n("path", {
 								d: "M30,0 C2.1,0 25.8,30 0,30",
 								className: "fill-transparent stroke-current stroke-2"
 							})
 						}),
-						/* @__PURE__ */ r(e, {
+						/* @__PURE__ */ n(e, {
 							title: "Ease In Out Sine",
 							onClick: s("easeInOutSine"),
-							children: /* @__PURE__ */ r("path", {
+							children: /* @__PURE__ */ n("path", {
 								d: "M30,0 C16.5,1.5 13.35,28.5 0,30",
 								className: "fill-transparent stroke-current stroke-2"
 							})
 						}),
-						/* @__PURE__ */ r(e, {
+						/* @__PURE__ */ n(e, {
 							title: "Ease In Out Expo",
 							onClick: s("easeInOutExpo"),
-							children: /* @__PURE__ */ r("path", {
+							children: /* @__PURE__ */ n("path", {
 								d: "M30,0 C0,0 30,30 0,30",
 								className: "fill-transparent stroke-current stroke-2"
 							})
 						}),
-						/* @__PURE__ */ r(e, {
+						/* @__PURE__ */ n(e, {
 							title: "Ease In Out Circ",
 							onClick: s("easeInOutCirc"),
-							children: /* @__PURE__ */ r("path", {
+							children: /* @__PURE__ */ n("path", {
 								d: "M30,0 C4.5,4.199999999999999 23.55,25.95 0,30",
 								className: "fill-transparent stroke-current stroke-2"
 							})
 						}),
-						/* @__PURE__ */ r(e, {
+						/* @__PURE__ */ n(e, {
 							title: "Ease In Out Back",
 							onClick: s("easeInOutBack"),
-							children: /* @__PURE__ */ r("path", {
+							children: /* @__PURE__ */ n("path", {
 								d: "M30,0 C7.95,-16.5 20.400000000000002,46.5 0,30",
 								className: "fill-transparent stroke-current stroke-2"
 							})