melonykit 0.1.1 → 0.2.0

package/dist/index.js

@@ -732,8 +732,8 @@ q.merge, q.getRegisteredStyles;
 var Je = q.injectGlobal, Ye = q.keyframes, Y = q.css;
 q.sheet, q.cache;
 //#endregion
-//#region src/components/_theme.js
-var Xe = new URL("./assets/manrope.woff2", import.meta.url).href ?? "/fonts/manrope.woff2", X = {
+//#region \0virtual:svg-sprite
+var Xe = "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"position:absolute;width:0;height:0;\" id=\"svg-sprite\"><symbol xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" color=\"currentColor\" id=\"icon-check\" viewBox=\"0 0 24 24\"><path d=\"m5 13.26 2.586 2.697C8.252 16.652 8.586 17 9 17s.748-.348 1.414-1.043L19 7\"/></symbol><symbol xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" color=\"currentColor\" id=\"icon-exclamation-triangle\" viewBox=\"0 0 24 24\"><path d=\"M13.925 21h-3.85c-4.63 0-6.945 0-7.799-1.506-.853-1.506.331-3.503 2.7-7.495L6.9 8.753C9.176 4.918 10.313 3 12 3s2.824 1.918 5.1 5.753L19.023 12c2.369 3.992 3.553 5.989 2.7 7.495C20.87 21 18.555 21 13.924 21\"/><path d=\"M12 9v4\"/><path d=\"M12.125 16.75H12m.25 0a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0\"/></symbol><symbol xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" color=\"currentColor\" id=\"icon-plus\" viewBox=\"0 0 24 24\"><path d=\"M11.992 4v16m8-8h-16\"/></symbol><symbol xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" color=\"currentColor\" id=\"icon-x\" viewBox=\"0 0 24 24\"><path d=\"m18 6-6 6m0 0-6 6m6-6 6 6m-6-6L6 6\"/></symbol><symbol xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-width=\"1.5\" color=\"currentColor\" id=\"icon-trash\" viewBox=\"0 0 24 24\"><path d=\"m19.5 5.5-.62 10.025c-.158 2.561-.237 3.842-.88 4.763a4 4 0 0 1-1.2 1.128c-.957.584-2.24.584-4.806.584-2.57 0-3.855 0-4.814-.585a4 4 0 0 1-1.2-1.13c-.642-.922-.72-2.205-.874-4.77L4.5 5.5\"/><path d=\"M3 5.5h18m-4.944 0-.683-1.408c-.453-.936-.68-1.403-1.071-1.695a2 2 0 0 0-.275-.172C13.594 2 13.074 2 12.035 2c-1.066 0-1.599 0-2.04.234a2 2 0 0 0-.278.18c-.395.303-.616.788-1.058 1.757L8.053 5.5\"/><path d=\"M9.5 16.5v-6\"/><path d=\"M14.5 16.5v-6\"/></symbol><symbol xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-linejoin=\"round\" stroke-width=\"1.5\" color=\"currentColor\" id=\"icon-play\" viewBox=\"0 0 24 24\"><path d=\"M18.89 12.846c-.353 1.343-2.023 2.292-5.364 4.19-3.23 1.835-4.845 2.752-6.146 2.384a3.25 3.25 0 0 1-1.424-.841C5 17.614 5 15.743 5 12s0-5.614.956-6.579a3.25 3.25 0 0 1 1.424-.84c1.301-.37 2.916.548 6.146 2.383 3.34 1.898 5.011 2.847 5.365 4.19a3.3 3.3 0 0 1 0 1.692Z\"/></symbol><symbol xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" color=\"currentColor\" id=\"icon-eye\" viewBox=\"0 0 24 24\"><path d=\"M21.544 11.045c.304.426.456.64.456.955 0 .316-.152.529-.456.955C20.178 14.871 16.689 19 12 19c-4.69 0-8.178-4.13-9.544-6.045C2.152 12.529 2 12.315 2 12c0-.316.152-.529.456-.955C3.822 9.129 7.311 5 12 5c4.69 0 8.178 4.13 9.544 6.045Z\"/><path d=\"M15 12a3 3 0 1 0-6 0 3 3 0 0 0 6 0Z\"/></symbol><symbol xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" color=\"currentColor\" id=\"icon-hourglass\" viewBox=\"0 0 24 24\"><path d=\"M17.201 2H6.8c-1.458 0-2.737.985-2.795 2.404-.074 1.785 1.182 2.97 2.5 4.083 1.825 1.54 2.737 2.31 2.832 3.284q.023.229 0 .458c-.095.975-1.007 1.744-2.832 3.284-1.355 1.143-2.578 2.207-2.5 4.083C4.062 21.016 5.34 22 6.799 22H17.2c1.458 0 2.737-.985 2.796-2.404.046-1.13-.373-2.254-1.262-3.036-.405-.357-.826-.698-1.24-1.047-1.824-1.54-2.736-2.31-2.831-3.284a2.3 2.3 0 0 1 0-.458c.095-.975 1.008-1.744 2.832-3.284 1.34-1.131 2.577-2.229 2.5-4.083C19.939 2.984 18.66 2 17.202 2Z\"/><path stroke-linecap=\"round\" d=\"M9 21.638c0-.442 0-.663.088-.856a1 1 0 0 1 .046-.09c.107-.183.288-.312.65-.571 1.006-.719 1.51-1.078 2.081-1.116q.135-.009.27 0c.572.038 1.075.397 2.08 1.116.363.259.544.388.651.571q.026.045.046.09c.088.193.088.414.088.856V22H9z\"/></symbol></svg>", Ze = !1, Qe = new URL("./assets/manrope.woff2", import.meta.url).href ?? "/fonts/manrope.woff2", X = {
 	baseUnit: 16,
 	maxWidth: 67.5,
 	fontFamily: "Manrope",
@@ -771,11 +771,11 @@ var Xe = new URL("./assets/manrope.woff2", import.meta.url).href ?? "/fonts/manr
 		horizontalCenter: "\n            position: absolute;\n            left: 50%;\n            transform: translateX(-50%);\n        ",
 		stretch: "\n            position: absolute;\n            top: 0;\n            right: 0;\n            bottom: 0;\n            left: 0;\n        "
 	},
-	loadResets() {
-		Je(`
+	load() {
+		Ze || typeof document > "u" || (Je(`
             @font-face {
                 font-family: 'Manrope';
-                src: url('${Xe}') format('woff2');
+                src: url('${Qe}') format('woff2');
                 font-weight: 100 900;
                 font-style: normal;
                 font-display: swap;
@@ -790,7 +790,7 @@ var Xe = new URL("./assets/manrope.woff2", import.meta.url).href ?? "/fonts/manr
             }
 
             html {
-                // Prevent Safari font flickering while animations
+                /* Prevent Safari font flickering while animations */
                 width: 100%;
                 height: 100%;
                 line-height: 1.15;
@@ -802,12 +802,14 @@ var Xe = new URL("./assets/manrope.woff2", import.meta.url).href ?? "/fonts/manr
             body {
                 overflow-x: hidden;
                 overflow-y: scroll;
-                // background: linear-gradient(
-                //     to top left,
-                //     ${this.colors.freshSnow} 0%,
-                //     ${this.colors.freshSnow} 25%,
-                //     #eef8fb 60%
-                // );
+                /*
+                 background: linear-gradient(
+                     to top left,
+                     ${this.colors.freshSnow} 0%,
+                     ${this.colors.freshSnow} 25%,
+                     #eef8fb 60%
+                 );
+                */
             }
 
             img { border-style: none; }
@@ -861,9 +863,9 @@ var Xe = new URL("./assets/manrope.woff2", import.meta.url).href ?? "/fonts/manr
 
                 &:active { transform: scale(.95); }
             }
-        `);
+        `), !(document.getElementById("svg-sprite") || !document.body) && (document.body.insertAdjacentHTML("afterbegin", Xe), Ze = !0));
 	}
-}, Ze = ({ type: e = "normal", width: t = "100%", value: i = 0 }) => /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r("div", {
+}, $e = ({ type: e = "normal", width: t = "100%", value: i = 0 }) => /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r("div", {
 	className: Z.base,
 	style: { width: t },
 	children: /* @__PURE__ */ r("div", {
@@ -898,9 +900,9 @@ var Xe = new URL("./assets/manrope.woff2", import.meta.url).href ?? "/fonts/manr
 };
 //#endregion
 //#region src/components/_box.jsx
-function Qe({ className: e, width: t, height: i, children: a }) {
+function et({ className: e, width: t, height: i, children: a }) {
 	return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r("div", {
-		className: J($e.base, e),
+		className: J(tt.base, e),
 		style: {
 			width: t,
 			height: i
@@ -908,17 +910,19 @@ function Qe({ className: e, width: t, height: i, children: a }) {
 		children: a
 	}) });
 }
-var $e = { base: Y`
+var tt = { base: Y`
         position: relative;
         border-radius: 18px;
         border: solid 2px #eee;
         padding: 1.875rem 1.25rem;
         background-color: ${X.colors.back.primary};
         box-shadow: ${X.colors.shadow.primary};
-    ` }, et = new URL("./assets/icons.svg", import.meta.url).href ?? "";
+    ` };
+//#endregion
+//#region src/components/_icon.jsx
 function Q({ className: e, size: t = "1.25rem", color: i = X.colors.fore.primary, iconName: a, isSpinning: o }) {
 	return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r("svg", {
-		className: J(tt.base, e),
+		className: J(nt.base, e),
 		style: {
 			color: i,
 			width: t,
@@ -926,10 +930,10 @@ function Q({ className: e, size: t = "1.25rem", color: i = X.colors.fore.primary
 		},
 		"aria-hidden": "true",
 		"is-spinning": o || void 0,
-		children: /* @__PURE__ */ r("use", { href: `${et}#icon-${a}` })
+		children: /* @__PURE__ */ r("use", { href: `#icon-${a}` })
 	}) });
 }
-var tt = { base: Y`
+var nt = { base: Y`
         fill: currentColor;
         display: inline-block;
         flex-shrink: 0;
@@ -955,7 +959,7 @@ var tt = { base: Y`
     ` };
 //#endregion
 //#region src/components/_button.jsx
-function nt({ type: e = "primary", label: t, iconName: o, isDisabled: s = !1, isLoading: c = !1, onClick: l }) {
+function rt({ type: e = "primary", label: t, iconName: o, isDisabled: s = !1, isLoading: c = !1, onClick: l }) {
 	let u = o || c, d = a(null);
 	function f(e) {
 		if (s || c) return;
@@ -1002,7 +1006,7 @@ function nt({ type: e = "primary", label: t, iconName: o, isDisabled: s = !1, is
 		]
 	}) });
 }
-var rt = Ye`
+var it = Ye`
     from {
         opacity: .4;
         transform: translate(-50%, -50%) scale(0);
@@ -1037,36 +1041,37 @@ var rt = Ye`
         border-radius: 50%;
         pointer-events: none;
         background-color: currentColor;
-        animation: ${rt} .5s ease-out forwards;
+        animation: ${it} .5s ease-out forwards;
     `
 };
 //#endregion
 //#region src/components/_layout.jsx
-function it({ className: e, direction: t = "row", justify: i, align: a, gap: o, children: s }) {
+function at({ className: e, height: t, direction: i = "row", justify: a, align: o, gap: s, children: c }) {
 	return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r("div", {
-		className: J(at.base, e),
+		className: J(ot.base, e),
 		style: {
-			flexDirection: t,
-			justifyContent: i,
-			alignItems: a,
-			gap: o == null ? void 0 : `${o / 2}rem`
+			height: t,
+			flexDirection: i,
+			justifyContent: a,
+			alignItems: o,
+			gap: s == null ? void 0 : `${s / 2}rem`
 		},
-		children: s
+		children: c
 	}) });
 }
-var at = { base: Y`
+var ot = { base: Y`
         display: flex;
     ` };
 //#endregion
 //#region src/components/_text.jsx
-function ot({ as: e = "span", className: t, size: i = "normal", color: a = X.colors.fore.primary, children: o }) {
+function st({ as: e = "span", className: t, size: i = "normal", color: a = X.colors.fore.primary, children: o }) {
 	return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r(e, {
-		className: J(st.base, st[i] ?? st.normal, t),
+		className: J(ct.base, ct[i] ?? ct.normal, t),
 		style: { color: a },
 		children: o
 	}) });
 }
-var st = {
+var ct = {
 	base: Y`
         font-weight: 500;
         letter-spacing: 1px;
@@ -1086,14 +1091,14 @@ var st = {
 };
 //#endregion
 //#region src/components/_headline.jsx
-function ct({ as: e = "h2", className: t, size: i = "normal", color: a = X.colors.fore.primary, children: o }) {
+function lt({ as: e = "h2", className: t, size: i = "normal", color: a = X.colors.fore.primary, children: o }) {
 	return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r(e, {
-		className: J(lt.base, lt[i] ?? lt.normal, t),
+		className: J(ut.base, ut[i] ?? ut.normal, t),
 		style: { color: a },
 		children: o
 	}) });
 }
-var lt = {
+var ut = {
 	base: Y`
         letter-spacing: 1px;
     `,
@@ -1115,7 +1120,7 @@ var lt = {
 };
 //#endregion
 //#region src/components/_space.jsx
-function ut({ size: e = 1 }) {
+function dt({ size: e = 1 }) {
 	return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r("div", {
 		"aria-hidden": "true",
 		style: {
@@ -1126,23 +1131,23 @@ function ut({ size: e = 1 }) {
 }
 //#endregion
 //#region src/components/_text-field.jsx
-function dt({ placeholder: e, value: t, width: o, isDisabled: s, onChange: c }) {
+function ft({ placeholder: e, value: t, width: o, isDisabled: s, onChange: c }) {
 	let l = a(Date.now()), u = a(t);
 	function d({ target: e }) {
 		u.value = e.value, c?.(u.value);
 	}
 	return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ i("div", {
-		className: ft.base,
+		className: pt.base,
 		style: { width: o },
 		"is-disabled": s,
 		children: [!u.value && e && /* @__PURE__ */ r("label", {
-			className: ft.label,
+			className: pt.label,
 			for: l.value,
 			children: e
 		}), /* @__PURE__ */ r("input", {
 			id: l,
 			name: l,
-			className: ft.input,
+			className: pt.input,
 			value: u.value,
 			disabled: s,
 			autocomplete: "off",
@@ -1150,7 +1155,7 @@ function dt({ placeholder: e, value: t, width: o, isDisabled: s, onChange: c })
 		})]
 	}) });
 }
-var ft = {
+var pt = {
 	base: Y`
         position: relative;
     `,
@@ -1179,8 +1184,8 @@ var ft = {
         color: ${X.colors.fore.primary};
         background-color: ${X.colors.back.secondary};
     `
-}, pt = 28, mt = 3, ht = 11;
-function gt({ label: e, isChecked: t, isDisabled: s, onChange: c }) {
+}, mt = 28, ht = 3, gt = 11;
+function _t({ label: e, isChecked: t, isDisabled: s, onChange: c }) {
 	let l = a(Date.now()), u = a(t);
 	o(() => u.value = t, [t]);
 	function d() {
@@ -1188,10 +1193,10 @@ function gt({ label: e, isChecked: t, isDisabled: s, onChange: c }) {
 		u.value = e, c?.(e);
 	}
 	return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ i("div", {
-		className: _t.base,
+		className: vt.base,
 		children: [
 			/* @__PURE__ */ r("label", {
-				className: _t.label,
+				className: vt.label,
 				htmlFor: l.value,
 				"is-disabled": s,
 				children: e
@@ -1199,20 +1204,20 @@ function gt({ label: e, isChecked: t, isDisabled: s, onChange: c }) {
 			/* @__PURE__ */ r("input", {
 				id: l.value,
 				type: "checkbox",
-				className: _t.checkbox,
+				className: vt.checkbox,
 				checked: u.value,
 				disabled: s,
 				onChange: d
 			}),
 			/* @__PURE__ */ r("label", {
-				className: _t.value,
+				className: vt.value,
 				htmlFor: l.value,
 				"is-disabled": s
 			})
 		]
 	}) });
 }
-var _t = {
+var vt = {
 	base: Y`
         position: relative;
         display: flex;
@@ -1236,7 +1241,7 @@ var _t = {
             background-color: #e1e1e1;
 
             &:before {
-                right: ${mt}px;
+                right: ${ht}px;
                 background-color: #3a3a3a;
             }
         }
@@ -1250,7 +1255,7 @@ var _t = {
         cursor: pointer;
         user-select: none;
         transition: background .3s ease;
-        width: ${pt}px;
+        width: ${mt}px;
 
         &:before {
             background-color: #e1e1e1;
@@ -1259,18 +1264,18 @@ var _t = {
             position: absolute;
             transition: background .3s ease, right .3s ease;
             border-radius: 50%;
-            top: ${mt}px;
+            top: ${ht}px;
             right: ${14}px;
-            width: ${ht}px;
-            height: ${ht}px;
+            width: ${gt}px;
+            height: ${gt}px;
         }
     `
 };
 //#endregion
 //#region src/components/_tag.jsx
-function vt({ className: t, variant: a = "normal", iconName: o, label: s }) {
+function yt({ className: t, variant: a = "normal", iconName: o, label: s }) {
 	return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ i("div", {
-		className: J(yt.base, yt[a] ?? yt.normal, t),
+		className: J(bt.base, bt[a] ?? bt.normal, t),
 		"has-icon": !e(o),
 		children: [o && /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r(Q, {
 			className: Y`
@@ -1282,7 +1287,7 @@ function vt({ className: t, variant: a = "normal", iconName: o, label: s }) {
 		}) }), s]
 	}) });
 }
-var yt = { base: Y`
+var bt = { base: Y`
         position: relative;
         display: inline-block;
         padding: .3rem .5rem;
@@ -1298,12 +1303,12 @@ var yt = { base: Y`
     ` };
 //#endregion
 //#region src/components/_icon-button.jsx
-function bt({ iconName: e, color: t, isDisabled: i, onClick: a }) {
+function xt({ iconName: e, color: t, isDisabled: i, onClick: a }) {
 	function o(e) {
 		i || (e.stopPropagation(), e.preventDefault(), a?.(e));
 	}
 	return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r("button", {
-		className: xt.base,
+		className: St.base,
 		"is-disabled": i || void 0,
 		"is-clickable": !!a || void 0,
 		disabled: i,
@@ -1316,7 +1321,7 @@ function bt({ iconName: e, color: t, isDisabled: i, onClick: a }) {
 		})
 	}) });
 }
-var xt = { base: Y`
+var St = { base: Y`
         position: relative;
         width: 2.25rem;
         height: 2.25rem;
@@ -1325,4 +1330,4 @@ var xt = { base: Y`
         background-color: ${X.colors.back.secondary};
     ` };
 //#endregion
-export { Ze as Bar, Qe as Box, nt as Button, ct as Headline, Q as Icon, bt as IconButton, it as Layout, ut as Space, gt as Switch, vt as Tag, ot as Text, dt as TextField, X as Theme };
+export { $e as Bar, et as Box, rt as Button, lt as Headline, Q as Icon, xt as IconButton, at as Layout, dt as Space, _t as Switch, yt as Tag, st as Text, ft as TextField, X as Theme };

package/package.json

@@ -1,7 +1,7 @@
 {
     "author": "Vadim Hermann",
     "name": "melonykit",
-    "version": "0.1.1",
+    "version": "0.2.0",
     "type": "module",
     "description": "Preact based ui and utility functions toolkit",
     "main": "./dist/index.js",
@@ -31,9 +31,9 @@
     },
     "devDependencies": {
         "@pivanov/vite-plugin-svg-sprite": "3.1.8",
-        "@playwright/test": "1.61.1",
+        "@playwright/test": "1.62.1",
         "@preact/preset-vite": "2.10.6",
-        "@preact/signals": "2.10.1",
+        "@preact/signals": "2.11.0",
         "@types/node": "26.1.2",
         "preact": "10.29.8",
         "vite": "8.2.0"

package/dist/assets/icons.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" style="position:absolute;width:0;height:0;" id="svg-sprite"><symbol xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" color="currentColor" id="icon-check" viewBox="0 0 24 24"><path d="m5 13.26 2.586 2.697C8.252 16.652 8.586 17 9 17s.748-.348 1.414-1.043L19 7"/></symbol><symbol xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" color="currentColor" id="icon-exclamation-triangle" viewBox="0 0 24 24"><path d="M13.925 21h-3.85c-4.63 0-6.945 0-7.799-1.506-.853-1.506.331-3.503 2.7-7.495L6.9 8.753C9.176 4.918 10.313 3 12 3s2.824 1.918 5.1 5.753L19.023 12c2.369 3.992 3.553 5.989 2.7 7.495C20.87 21 18.555 21 13.924 21"/><path d="M12 9v4"/><path d="M12.125 16.75H12m.25 0a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0"/></symbol><symbol xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" color="currentColor" id="icon-plus" viewBox="0 0 24 24"><path d="M11.992 4v16m8-8h-16"/></symbol><symbol xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" color="currentColor" id="icon-x" viewBox="0 0 24 24"><path d="m18 6-6 6m0 0-6 6m6-6 6 6m-6-6L6 6"/></symbol><symbol xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" color="currentColor" id="icon-trash" viewBox="0 0 24 24"><path d="m19.5 5.5-.62 10.025c-.158 2.561-.237 3.842-.88 4.763a4 4 0 0 1-1.2 1.128c-.957.584-2.24.584-4.806.584-2.57 0-3.855 0-4.814-.585a4 4 0 0 1-1.2-1.13c-.642-.922-.72-2.205-.874-4.77L4.5 5.5"/><path d="M3 5.5h18m-4.944 0-.683-1.408c-.453-.936-.68-1.403-1.071-1.695a2 2 0 0 0-.275-.172C13.594 2 13.074 2 12.035 2c-1.066 0-1.599 0-2.04.234a2 2 0 0 0-.278.18c-.395.303-.616.788-1.058 1.757L8.053 5.5"/><path d="M9.5 16.5v-6"/><path d="M14.5 16.5v-6"/></symbol><symbol xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.5" color="currentColor" id="icon-play" viewBox="0 0 24 24"><path d="M18.89 12.846c-.353 1.343-2.023 2.292-5.364 4.19-3.23 1.835-4.845 2.752-6.146 2.384a3.25 3.25 0 0 1-1.424-.841C5 17.614 5 15.743 5 12s0-5.614.956-6.579a3.25 3.25 0 0 1 1.424-.84c1.301-.37 2.916.548 6.146 2.383 3.34 1.898 5.011 2.847 5.365 4.19a3.3 3.3 0 0 1 0 1.692Z"/></symbol><symbol xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="1.5" color="currentColor" id="icon-eye" viewBox="0 0 24 24"><path d="M21.544 11.045c.304.426.456.64.456.955 0 .316-.152.529-.456.955C20.178 14.871 16.689 19 12 19c-4.69 0-8.178-4.13-9.544-6.045C2.152 12.529 2 12.315 2 12c0-.316.152-.529.456-.955C3.822 9.129 7.311 5 12 5c4.69 0 8.178 4.13 9.544 6.045Z"/><path d="M15 12a3 3 0 1 0-6 0 3 3 0 0 0 6 0Z"/></symbol><symbol xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="1.5" color="currentColor" id="icon-hourglass" viewBox="0 0 24 24"><path d="M17.201 2H6.8c-1.458 0-2.737.985-2.795 2.404-.074 1.785 1.182 2.97 2.5 4.083 1.825 1.54 2.737 2.31 2.832 3.284q.023.229 0 .458c-.095.975-1.007 1.744-2.832 3.284-1.355 1.143-2.578 2.207-2.5 4.083C4.062 21.016 5.34 22 6.799 22H17.2c1.458 0 2.737-.985 2.796-2.404.046-1.13-.373-2.254-1.262-3.036-.405-.357-.826-.698-1.24-1.047-1.824-1.54-2.736-2.31-2.831-3.284a2.3 2.3 0 0 1 0-.458c.095-.975 1.008-1.744 2.832-3.284 1.34-1.131 2.577-2.229 2.5-4.083C19.939 2.984 18.66 2 17.202 2Z"/><path stroke-linecap="round" d="M9 21.638c0-.442 0-.663.088-.856a1 1 0 0 1 .046-.09c.107-.183.288-.312.65-.571 1.006-.719 1.51-1.078 2.081-1.116q.135-.009.27 0c.572.038 1.075.397 2.08 1.116.363.259.544.388.651.571q.026.045.046.09c.088.193.088.414.088.856V22H9z"/></symbol></svg>