@stamcat/craftsman 0.0.23-alpha.7 → 0.0.23-alpha.9

package/AGENTS.md

@@ -0,0 +1,162 @@
+# AI Agent Integration Guide for @stamcat/craftsman
+
+This document explains how code-generation agents should use this library safely and correctly.
+
+## What This Package Currently Exports
+
+The package is currently built with component-level entry points only.
+
+Use these imports:
+
+```tsx
+import { Button } from "@stamcat/craftsman/Button";
+import { Input } from "@stamcat/craftsman/Input";
+import { Loader } from "@stamcat/craftsman/Loader";
+```
+
+Do not assume a root export like `@stamcat/craftsman` unless that export is explicitly added to package `exports`.
+
+## Hard Rules for Agents
+
+1. Never deep-import from package internals (for example `@stamcat/craftsman/src/...`).
+2. Only use documented component entry points.
+3. Do not import storybook files or internal style utilities from consuming applications.
+4. Prefer standard React props first; use custom props only when required.
+
+## Component Contracts
+
+### Button
+
+Import:
+
+```tsx
+import { Button } from "@stamcat/craftsman/Button";
+```
+
+Props:
+
+- Inherits all native `<button>` props.
+- `variant?: "primary" | "default" | "text"` (default: `"default"`)
+- `styles?: SerializedStyles` (Emotion override)
+
+Behavior notes:
+
+- `type` defaults to `"button"`.
+- For `variant !== "default"`, variant is appended to `className` (for example `"primary"`).
+
+Example:
+
+```tsx
+<Button variant="primary" onClick={onSave}>Save</Button>
+```
+
+### Input
+
+Import:
+
+```tsx
+import { Input } from "@stamcat/craftsman/Input";
+```
+
+Props:
+
+- Pure passthrough of native `<input>` props.
+
+Example:
+
+```tsx
+<Input type="email" placeholder="you@company.com" required />
+```
+
+### Loader
+
+Import:
+
+```tsx
+import { Loader } from "@stamcat/craftsman/Loader";
+```
+
+Props:
+
+- Inherits all native `<div>` props.
+- `type` is required and must be one of:
+  - `"dots"`
+  - `"dots-trace"`
+  - `"dots-bounce"`
+  - `"dots-orbit"`
+  - `"dashes"`
+  - `"spinner"`
+  - `"swirl"`
+  - `"ball"`
+  - `"boxy"`
+  - `"factory"`
+- `color?: string` (default: `"black"`)
+- `width?: number` (optional, variant-dependent default behavior)
+- `styles?: SerializedStyles` (Emotion override)
+
+Example:
+
+```tsx
+<Loader type="spinner" color="var(--blue500)" width={40} aria-label="Loading" />
+```
+
+## Styling Expectations
+
+- Components are built with Emotion and class-based variant hooks.
+- If your app does not include this package's global CSS variable setup, visual output may differ.
+- Agents should avoid hard-coding assumptions about token names beyond what the consumer app already defines.
+
+## Utility Functions
+
+### `isEmpty`
+
+The package exports an `isEmpty` utility. **Always use it instead of writing inline empty checks.**
+
+Import:
+
+```ts
+import { isEmpty } from "@stamcat/craftsman/utilities/validations";
+```
+
+It returns `true` for:
+
+- `undefined`
+- `null`
+- empty objects — `{}`
+- strings that are empty or whitespace-only — `""`, `" "`
+- arrays with no elements — `[]`
+
+Examples:
+
+```ts
+// DO — use isEmpty
+if (isEmpty(value)) { ... }
+if (!isEmpty(items)) { ... }
+
+// DO NOT — write these manually
+if (value === undefined || value === null) { ... }
+if (typeof value === "string" && value.trim().length === 0) { ... }
+if (Object.keys(obj).length === 0) { ... }
+if (arr.length === 0) { ... }
+```
+
+## Code Generation Patterns to Prefer
+
+1. Generate fully typed React usage examples.
+2. Keep accessibility props in place (`aria-label`, `disabled`, semantic `type`).
+3. Use `variant="primary"` for main actions and `variant="text"` for low-emphasis actions.
+4. For loading states, pair `Loader` with accessible status text where needed.
+
+## Known Limitations (Current Package State)
+
+1. README is minimal; treat this guide as the source of truth for agent usage.
+2. Theme utilities exist in source but are not guaranteed public package exports.
+3. Additional components in source (for example `Progress`) may not yet be exported.
+
+## Safe Fallback Strategy for Agents
+
+If uncertain about available exports:
+
+1. Use only `Button`, `Input`, and `Loader` from their component entry points.
+2. Do not invent package APIs.
+3. Prefer native HTML elements for anything not explicitly exported.

package/Components.esm.js

@@ -1,3 +1,5 @@
-import { Button as e } from "./Button.esm.js";
-import { Input as t } from "./Input.esm.js";
-export { e as Button, t as Input };
+import { Button as e } from "./src/components/Button.esm.js";
+import { Input as t } from "./src/components/Input.esm.js";
+import { Loader as n } from "./src/components/Loader.esm.js";
+import { Modal as r } from "./src/components/Modal.esm.js";
+export { e as Button, t as Input, n as Loader, r as Modal };

package/components/Button.d.ts

@@ -1,2 +1,7 @@
-export type ButtonProps = React.ComponentProps<"button">;
+import { SerializedStyles } from '@emotion/react';
+import { ButtonType } from '../styles/global/components/button';
+export type ButtonProps = React.ComponentProps<"button"> & {
+    variant?: ButtonType;
+    styles?: SerializedStyles;
+};
 export declare const Button: React.FC<ButtonProps>;

package/components/Loader.d.ts

@@ -0,0 +1,9 @@
+import { LoaderStyle } from '../styles/global/components/loaders';
+import { SerializedStyles } from '@emotion/react';
+export type LoaderProps = React.ComponentProps<"div"> & {
+    type: LoaderStyle;
+    color?: string;
+    width?: number;
+    styles?: SerializedStyles;
+};
+export declare const Loader: React.FC<LoaderProps>;

package/components/Modal.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+import { SerializedStyles } from '@emotion/react';
+export type ModalType = "dialog" | "panel";
+export interface ModalProps extends React.ComponentPropsWithoutRef<"div"> {
+    visible?: boolean;
+    onDismiss?: () => void;
+    type?: ModalType;
+    header?: string | React.ReactNode;
+    backgroundDismiss?: boolean;
+    hideDismissIcon?: boolean;
+    footer?: React.ReactNode;
+    styles?: SerializedStyles;
+}
+type ModalState = {
+    isClosing: boolean;
+};
+export declare class Modal extends React.PureComponent<ModalProps, ModalState> {
+    readonly state: ModalState;
+    onDismiss: () => void;
+    onClickBackground: () => void;
+    render(): React.JSX.Element | null;
+}
+export {};

package/components/Progress.d.ts

@@ -0,0 +1 @@
+export {};

package/components/index.d.ts

@@ -1,2 +1,4 @@
 export { Button } from './Button';
 export { Input } from './Input';
+export { Loader } from './Loader';
+export { Modal } from './Modal';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stamcat/craftsman",
-  "version": "0.0.23-alpha.7",
+  "version": "0.0.23-alpha.9",
   "type": "module",
   "description": "A powerful, lightweight framework for design systems",
   "repository": {
@@ -31,7 +31,10 @@
     "react-date-picker": "12.0.2",
     "react-datetime-picker": "7.0.2",
     "react-dom": "19.2.7",
+    "react-icons": "5.7.0",
     "react-international-phone": "4.8.0",
+    "react-toastify": "11.1.0",
+    "sass-embedded": "1.100.0",
     "zod": "4.4.3"
   },
   "devDependencies": {},
@@ -43,6 +46,14 @@
     "./Input": {
       "types": "./Input.d.ts",
       "default": "./Input.es.js"
+    },
+    "./Loader": {
+      "types": "./Loader.d.ts",
+      "default": "./Loader.es.js"
+    },
+    "./Modal": {
+      "types": "./Modal.d.ts",
+      "default": "./Modal.es.js"
     }
   }
 }

package/src/components/Button.esm.js

@@ -0,0 +1,20 @@
+import { useTheme as e } from "@emotion/react";
+import t from "@emotion/styled";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/Button.tsx
+var r = t.button`
+    ${(e) => e.styles}
+`, i = (t) => {
+	let { type: i = "button", variant: a = "default", className: o, ...s } = t, c = e(), l = typeof c?.components?.button == "string" ? c.components.button : void 0;
+	return /* @__PURE__ */ n(r, {
+		type: i,
+		className: [
+			a === "default" ? void 0 : a,
+			l,
+			o
+		].filter(Boolean).join(" ") || void 0,
+		...s
+	});
+};
+//#endregion
+export { i as Button };

package/src/components/Loader.esm.js

@@ -0,0 +1,19 @@
+import { loaders as e } from "../styles/global/components/loaders.esm.js";
+import t from "../styles/global/components/loaders.module.esm.js";
+import n from "@emotion/styled";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/Loader.tsx
+var i = n.div`
+    ${(t) => e[t.type](t.color, t.width)}
+    ${(e) => e.styles}
+`, a = (e) => {
+	let { type: n, color: a = "black", ...o } = e;
+	return /* @__PURE__ */ r(i, {
+		className: t[n],
+		type: n,
+		color: a || "black",
+		...o
+	});
+};
+//#endregion
+export { a as Loader };

package/src/components/Modal.esm.js

@@ -0,0 +1,156 @@
+import { Button as e } from "./Button.esm.js";
+import { breakpoint as t } from "../styles/utilities/layout.esm.js";
+import { LuX as n } from "../../node_modules/react-icons/lu/index.esm.js";
+import { color as r } from "../styles/utilities/color.esm.js";
+import { css as i, keyframes as a } from "@emotion/react";
+import o from "@emotion/styled";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import u from "react";
+//#region src/components/Modal.tsx
+var d = a`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`, f = a`
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+`, p = a`
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+`, m = a`
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(100%);
+  }
+`, h = o.div`
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1000;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    ${(e) => e.styles}
+`, g = o.div`
+    background-color: rgba(0, 0, 0, 0.5);
+    animation: ${(e) => e.isClosing ? f : d} 0.3s ease-in-out;
+    animation-fill-mode: forwards;
+     position: fixed;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1001;
+`, _ = i`
+    width: 100%;
+    height: 100%;
+`, v = i`
+    width: calc(var(--w-column) * 4);
+`, y = i`
+    width: calc(var(--w-column) * 4);
+    ${t("tablet", i`
+        width: calc(var(--w-column) * 6);
+    `)}
+    ${t("desktop", i`
+        width: calc(var(--w-column) * 8);
+    `)}
+`, b = i`
+    position: fixed;
+    top: 0;
+    right: 0;
+    height: 100%;
+    ${t("mobileOnly", _)}
+    ${t("tablet", v)}
+`, x = i`
+    border-radius: 8px;
+    ${t("mobileOnly", _)}
+    ${t("tablet", y)}
+`, S = o.div`
+    padding: calc(var(--w-gutter));
+    z-index: 1002;
+    background-color: var(--white);
+    max-height: 80vh;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    touch-action: pan-y;
+    animation: ${(e) => e.isClosing ? m : p} 0.3s ease-in-out;
+    animation-fill-mode: forwards;
+    ${(e) => e.type === "panel" && b}
+    ${(e) => e.type === "dialog" && x}
+    header {
+        display: inline-flex;
+        width: 100%;
+        justify-content: space-between;
+        margin-bottom: calc(var(--w-gutter) * 0.5);
+    }
+`, C = i`
+    text-decoration: none;
+    // padding: 0 calc(var(--w-gutter) * 0.25) 0 var(--w-gutter);
+    height: 36px;
+    width: 36px;
+    border-radius: 50%;
+`, w = o.footer`
+    margin-top: calc(var(--w-gutter) * 2);
+    background-color:var(--white);
+    height: fit-content;
+    display: flex;
+    gap: var(--w-gutter);
+`, T = class extends u.PureComponent {
+	state = { isClosing: !1 };
+	onDismiss = () => {
+		this.props.onDismiss && (this.setState({ isClosing: !0 }), setTimeout(() => {
+			this.props.onDismiss && this.props.onDismiss(), this.setState({ isClosing: !1 });
+		}, 280));
+	};
+	onClickBackground = () => {
+		let e = this.props.backgroundDismiss;
+		(e === !0 || e === void 0) && this.onDismiss();
+	};
+	render() {
+		return this.props.visible ? /* @__PURE__ */ l(h, {
+			styles: this.props.styles,
+			children: [/* @__PURE__ */ l(S, {
+				type: this.props.type || "dialog",
+				isClosing: this.state.isClosing,
+				children: [
+					/* @__PURE__ */ l("header", { children: [this.props.header && /* @__PURE__ */ c(s, { children: this.props.header }), !this.props.hideDismissIcon && /* @__PURE__ */ c(e, {
+						variant: "primary",
+						styles: C,
+						onClick: this.onDismiss,
+						children: /* @__PURE__ */ c(n, {
+							fill: r("white"),
+							viewBox: "6 8 14 14",
+							size: 24
+						})
+					})] }),
+					/* @__PURE__ */ c("section", { children: this.props.children }),
+					this.props.footer && /* @__PURE__ */ c(w, { children: this.props.footer })
+				]
+			}), /* @__PURE__ */ c(g, {
+				isClosing: this.state.isClosing,
+				onClick: this.onClickBackground
+			})]
+		}) : null;
+	}
+};
+//#endregion
+export { T as Modal };

package/src/styles/global/components/loaders.esm.js

@@ -0,0 +1,65 @@
+import { css as e } from "@emotion/react";
+import t from "zod";
+t.enum([
+	"dots",
+	"dots-trace",
+	"dots-bounce",
+	"dots-orbit",
+	"dashes",
+	"spinner",
+	"swirl",
+	"ball",
+	"boxy",
+	"factory"
+]);
+var n = {
+	dots: (t, n = 100) => e`
+        --_l5c: ${t};
+        --_l5w: ${Math.round(n * .125)}px;
+        --_l5w2: ${Math.round(n * .16666)}px;
+        --_l5w3: ${Math.round(n * -.16666)}px;
+    `,
+	"dots-bounce": (t, n = 60) => e`
+        --_g: no-repeat radial-gradient(circle closest-side, ${t} 90%, #0000);
+        --_gw: ${n}px;
+    `,
+	"dots-trace": (t, n = 60) => e`
+        --_dtc: ${t};
+        --_dtw: ${n}px;
+    `,
+	"dots-orbit": (t, n = 17) => e`
+        --_doc: ${t};
+        --_dow: ${n}px;
+    `,
+	dashes: (t, n = 40) => e`
+        --_dshc: ${t};
+        --_dshw: ${n}px;
+        --_dshw2: ${Math.round(n / 4)}px;
+    `,
+	spinner: (t, n = 50) => e`
+        --_spnc: ${t};
+        --_spnw: ${n}px;
+        --_spnw2: ${Math.round(n * .16)}px;
+    `,
+	swirl: (t, n = 50) => e`
+        --_swrlc: ${t};
+        --_swrlw: ${n}px;
+        --_swrlw2: ${Math.round(n * .16)}px;
+    `,
+	ball: (t, n = 50) => e`
+        --_ballc: ${t};
+        --_ballw: ${n}px;
+        --_ballw2: ${Math.round(n * .24)}px;
+    `,
+	boxy: (t, n = 120) => e`
+        --_boxc: ${t};
+        --_boxw: ${n}px;
+        --_boxw2: ${Math.round(n * .16666)}px;
+    `,
+	factory: (t, n = 0) => e`
+        --_ftyc: ${t};
+        --_ftyw: ${n};
+    `
+};
+//#endregion
+export { n as loaders };

package/src/styles/global/components/loaders.module.css

@@ -0,0 +1 @@
+._dots_1132g_1{aspect-ratio:1;width:var(--_l5w);margin:0 var(--_l5w2);border-radius:50%;animation:1s linear infinite alternate _l5_1132g_1}@keyframes _l5_1132g_1{0%{box-shadow:var(--_l5w2) 0 var(--_l5c), var(--_l5w3) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%);background:var(--_l5c)}33%{box-shadow:var(--_l5w2) 0 var(--_l5c), var(--_l5w3) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%);background:color-mix(in srgb, var(--_l5c) 80%, white 75%)}66%{box-shadow:var(--_l5w2) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%), var(--_l5w3) 0 var(--_l5c);background:color-mix(in srgb, var(--_l5c) 80%, white 75%)}to{box-shadow:var(--_l5w2) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%), var(--_l5w3) 0 var(--_l5c);background:var(--_l5c)}}._dots-bounce_1132g_27{width:var(--_gw);aspect-ratio:2;background:var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;background-size:33.3333% 50%;animation:1s linear infinite _l3_1132g_1}@keyframes _l3_1132g_1{to{transform:rotate(1turn)}}._dots-trace_1132g_49{width:var(--_dtw);aspect-ratio:4;background:radial-gradient(circle closest-side, var(--_dtc) 90%, #0000) 0/33.3333% 100% space;clip-path:inset(0 100% 0 0);animation:1s steps(4,end) infinite _l1_1132g_1}@keyframes _l1_1132g_1{to{clip-path:inset(0 -34% 0 0)}}._dots-orbit_1132g_62{width:var(--_dow);aspect-ratio:1;background:var(--_doc);border-radius:50%;animation:2s linear infinite _l22-0_1132g_1;display:grid}._dots-orbit_1132g_62:before,._dots-orbit_1132g_62:after{content:"";background:inherit;border-radius:50%;grid-area:1/1;margin:15%;animation:1s infinite _l22_1132g_1;transform:rotate(0)translate(150%)}._dots-orbit_1132g_62:after{animation-delay:-.5s}@keyframes _l22-0_1132g_1{to{transform:rotate(1turn)}}@keyframes _l22_1132g_1{to{transform:rotate(1turn)translate(150%)}}._dashes_1132g_93{width:var(--_dshw);height:calc(var(--_dshw) * .3);background:linear-gradient(var(--_dshc) 0 0) left/var(--_dshw2) 4px, linear-gradient(var(--_dshc) 0 0) center/var(--_dshw2) 4px, linear-gradient(var(--_dshc) 0 0) right/var(--_dshw2) 4px;background-repeat:no-repeat;animation:1s linear infinite _dashes_1132g_93}@keyframes _dashes_1132g_93{0%{background-size:var(--_dshw2) 4px, var(--_dshw2) 4px, var(--_dshw2) 4px;opacity:1}33%{background-size:var(--_dshw2) var(--_dshw2), var(--_dshw2) 4px, var(--_dshw2) 4px;opacity:.7}66%{background-size:var(--_dshw2) 4px, var(--_dshw2) var(--_dshw2), var(--_dshw2) 4px;opacity:.7}to{background-size:var(--_dshw2) 4px, var(--_dshw2) 4px, var(--_dshw2) var(--_dshw2);opacity:1}}._spinner_1132g_119{width:var(--_spnw);aspect-ratio:1;border:var(--_spnw2) solid color-mix(in srgb, var(--_spnc) 20%, transparent);border-right-color:var(--_spnc);border-radius:50%;animation:1s linear infinite _l2_1132g_1}@keyframes _l2_1132g_1{to{transform:rotate(1turn)}}._swirl_1132g_133{width:var(--_swrlw);padding:var(--_swrlw2);aspect-ratio:1;background:var(--_swrlc);--_m:conic-gradient(#0000 10%,#000), linear-gradient(#000 0 0) content-box;-webkit-mask:var(--_m);-webkit-mask:var(--_m);mask:var(--_m);-webkit-mask-composite:source-out;border-radius:50%;animation:1s linear infinite _l3_1132g_1;-webkit-mask-composite:source-out;mask-composite:subtract}._ball_1132g_154{width:var(--_ballw);aspect-ratio:1;background:radial-gradient(farthest-side, var(--_ballc) 95%, #0000) 50% 1px/var(--_ballw2) var(--_ballw2) no-repeat, radial-gradient(farthest-side, #0000 calc(100% - var(--_ballw2)), #ccc 0);border-radius:50%;animation:2s linear infinite _l9_1132g_1}@keyframes _l9_1132g_1{to{transform:rotate(1turn)}}._boxy_1132g_167{width:var(--_boxw);height:var(--_boxw2);background:linear-gradient(var(--_boxc) 0 0) left -25% top 0/20% 100% no-repeat #ddd;animation:1s steps(6,end) infinite _l7_1132g_1;-webkit-mask:linear-gradient(90deg,#000 70%,#0000 0) 0/20% 100%}@keyframes _l7_1132g_1{to{background-position:right -25% top 0}}._factory_1132g_180{width:var(--_ftyw);height:var(--_ftyw2);box-shadow:0 3px 0 var(--_ftyc);clip-path:inset(-40px 0 -5px);position:relative}._factory_1132g_180:before{content:"";height:var(--_ftyw3);--g:no-repeat linear-gradient(color-mix(in srgb, var(--_ftyc) 30%, white) 0 0);background:var(--g), var(--g), var(--g), var(--g);background-size:var(--_ftyw4) 14px;animation:2s linear infinite _l7-1_1132g_1,2s linear infinite _l7-2_1132g_1;position:absolute;inset:auto calc(50% - 17px) 0}@keyframes _l7-1_1132g_1{0%,to{background-position:0 -var(--_ftyw3), 100% -var(--_ftyw3)}17.5%{background-position:0 100%, 100% -var(--_ftyw3), 0 -var(--_ftyw3), 100% -var(--_ftyw3)}35%{background-position:0 100%, 100% 100%, 0 -var(--_ftyw3), 100% -var(--_ftyw3)}52.5%{background-position:0 100%, 100% 100%, 0 calc(100% - var(--_ftyw4)), 100% -var(--_ftyw3)}70%,98%{background-position:0 100%, 100% 100%, 0 calc(100% - var(--_ftyw4)), 100% calc(100% - var(--_ftyw4))}}@keyframes _l7-2_1132g_1{0%,70%{transform:translate(0)}to{transform:translate(200%)}}

package/src/styles/global/components/loaders.module.esm.js

@@ -0,0 +1,25 @@
+import './loaders.module.css';//#region src/styles/global/components/loaders.module.scss
+var e = "_dots_1132g_1", t = "_l5_1132g_1", n = "_l3_1132g_1", r = "_l1_1132g_1", i = "_l22_1132g_1", a = "_dashes_1132g_93", o = "_spinner_1132g_119", s = "_l2_1132g_1", c = "_swirl_1132g_133", l = "_ball_1132g_154", u = "_l9_1132g_1", d = "_boxy_1132g_167", f = "_l7_1132g_1", p = "_factory_1132g_180", m = {
+	dots: e,
+	l5: t,
+	"dots-bounce": "_dots-bounce_1132g_27",
+	l3: n,
+	"dots-trace": "_dots-trace_1132g_49",
+	l1: r,
+	"dots-orbit": "_dots-orbit_1132g_62",
+	"l22-0": "_l22-0_1132g_1",
+	l22: i,
+	dashes: a,
+	spinner: o,
+	l2: s,
+	swirl: c,
+	ball: l,
+	l9: u,
+	boxy: d,
+	l7: f,
+	factory: p,
+	"l7-1": "_l7-1_1132g_1",
+	"l7-2": "_l7-2_1132g_1"
+};
+//#endregion
+export { l as ball, d as boxy, a as dashes, m as default, e as dots, p as factory, r as l1, s as l2, i as l22, n as l3, t as l5, f as l7, u as l9, o as spinner, c as swirl };