@greensight/gts 1.0.0-alpha.16 → 1.0.0-alpha.17

package/index.mjs

@@ -1,88 +1,88 @@
-var q = Object.defineProperty;
-var D = (n, e, t) => e in n ? q(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
-var y = (n, e, t) => D(n, typeof e != "symbol" ? e + "" : e, t);
+var U = Object.defineProperty;
+var Q = (o, e, r) => e in o ? U(o, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : o[e] = r;
+var g = (o, e, r) => Q(o, typeof e != "symbol" ? e + "" : e, r);
 import m from "path";
-import { tsImport as H } from "ts-import";
-import { existsSync as j } from "node:fs";
-import { readFile as T, mkdir as U, writeFile as Q, rm as X } from "node:fs/promises";
-import { resolve as M } from "node:path";
-const h = class h {
+import { tsImport as Z } from "ts-import";
+import { existsSync as $ } from "node:fs";
+import { readFile as S, mkdir as X, writeFile as Y, rm as _ } from "node:fs/promises";
+import { resolve as T } from "node:path";
+const f = class f {
   static resolveReadPath(e) {
     if (!e || !e.trim())
       throw new Error("File path must be a non-empty string");
-    return M(h.baseDir, e);
+    return T(f.baseDir, e);
   }
-  static resolveWritePath(e, t) {
-    const r = M(h.baseDir, t ?? "");
+  static resolveWritePath(e, r) {
+    const t = T(f.baseDir, r ?? "");
     return {
-      targetDir: r,
-      targetPath: M(r, e)
+      targetDir: t,
+      targetPath: T(t, e)
     };
   }
-  static handleReadError(e, t) {
-    throw e.code === "ENOENT" ? new Error(`File not found: ${t}`) : new Error(
-      `Failed to read file "${t}": ${e.message ?? String(e)}`
+  static handleReadError(e, r) {
+    throw e.code === "ENOENT" ? new Error(`File not found: ${r}`) : new Error(
+      `Failed to read file "${r}": ${e.message ?? String(e)}`
     );
   }
-  static async read(e, t = "utf8") {
-    const r = h.resolveReadPath(e);
+  static async read(e, r = "utf8") {
+    const t = f.resolveReadPath(e);
     try {
-      return await T(r, { encoding: t });
-    } catch (o) {
-      h.handleReadError(o, r);
+      return await S(t, { encoding: r });
+    } catch (n) {
+      f.handleReadError(n, t);
     }
   }
   static async readBuffer(e) {
-    const t = h.resolveReadPath(e);
+    const r = f.resolveReadPath(e);
     try {
-      return await T(t);
-    } catch (r) {
-      h.handleReadError(r, t);
+      return await S(r);
+    } catch (t) {
+      f.handleReadError(t, r);
     }
   }
   static async readJson(e) {
-    const t = h.resolveReadPath(e);
+    const r = f.resolveReadPath(e);
     try {
-      const r = await T(t, { encoding: "utf8" });
+      const t = await S(r, { encoding: "utf8" });
       try {
-        return JSON.parse(r);
-      } catch (o) {
-        throw new Error(`Failed to parse JSON from "${t}": ${o.message}`);
+        return JSON.parse(t);
+      } catch (n) {
+        throw new Error(`Failed to parse JSON from "${r}": ${n.message}`);
       }
-    } catch (r) {
-      h.handleReadError(r, t);
+    } catch (t) {
+      f.handleReadError(t, r);
     }
   }
-  static async write(e, t = "", r = {}) {
-    const { directory: o, overwrite: s = !0 } = r, { targetDir: a, targetPath: i } = h.resolveWritePath(e, o);
-    if (!s && j(i))
-      throw new Error(`File ${i} already exists`);
-    return await U(a, { recursive: !0 }), await Q(i, t, { encoding: "utf8" }), i;
+  static async write(e, r = "", t = {}) {
+    const { directory: n, overwrite: s = !0 } = t, { targetDir: a, targetPath: l } = f.resolveWritePath(e, n);
+    if (!s && $(l))
+      throw new Error(`File ${l} already exists`);
+    return await X(a, { recursive: !0 }), await Y(l, r, { encoding: "utf8" }), l;
   }
-  static async writeWithExtension(e, t, r = "", o) {
-    const s = t.startsWith(".") ? t : `.${t}`, a = `${e}${s}`;
-    return h.write(a, r, o);
+  static async writeWithExtension(e, r, t = "", n) {
+    const s = r.startsWith(".") ? r : `.${r}`, a = `${e}${s}`;
+    return f.write(a, t, n);
   }
   static exists(e) {
-    const t = h.resolveReadPath(e);
-    return j(t);
+    const r = f.resolveReadPath(e);
+    return $(r);
   }
-  static async delete(e, t) {
-    const { targetPath: r } = h.resolveWritePath(e, t);
-    j(r) && await X(r, { force: !0 });
+  static async delete(e, r) {
+    const { targetPath: t } = f.resolveWritePath(e, r);
+    $(t) && await _(t, { recursive: !0, force: !0 });
   }
 };
-y(h, "baseDir", process.cwd());
-let f = h;
+g(f, "baseDir", process.cwd());
+let u = f;
 const b = class b {
   static async create() {
-    if (f.exists(b.configFileName))
+    if (u.exists(b.configFileName))
       throw new Error("The file already exists");
-    await f.write(b.configFileName, "", { overwrite: !1 });
+    await u.write(b.configFileName, "", { overwrite: !1 });
   }
   async load() {
     try {
-      const e = await H.compile(
+      const e = await Z.compile(
         `${m.resolve(process.cwd(), b.configFileName)}`
       );
       if (!e) throw new Error();
@@ -92,61 +92,61 @@ const b = class b {
     }
   }
 };
-y(b, "configFileName", "gts.config.ts");
-let $ = b;
-const Y = (n) => {
+g(b, "configFileName", "gts.config.ts");
+let k = b;
+const ee = (o) => {
   const e = new URLSearchParams();
-  return Object.keys(n).forEach((t) => {
-    Array.isArray(n[t]) ? n[t].forEach((r) => e.append(`${t}[]`, r)) : e.append(t, n[t]);
+  return Object.keys(o).forEach((r) => {
+    Array.isArray(o[r]) ? o[r].forEach((t) => e.append(`${r}[]`, t)) : e.append(r, o[r]);
   }), e;
-}, Z = (n, e = 50) => {
-  const t = [];
-  for (let r = 0; r < n.length; r += e)
-    t.push(n.slice(r, r + e));
-  return t;
+}, te = (o, e = 50) => {
+  const r = [];
+  for (let t = 0; t < o.length; t += e)
+    r.push(o.slice(t, t + e));
+  return r;
 };
-class v {
-  constructor(e, t) {
-    y(this, "figmaToken");
-    y(this, "fileId");
-    y(this, "onTimeMeasureHandler");
-    this.figmaToken = e, this.fileId = t;
+class C {
+  constructor(e, r) {
+    g(this, "figmaToken");
+    g(this, "fileId");
+    g(this, "onTimeMeasureHandler");
+    this.figmaToken = e, this.fileId = r;
   }
   setOnTimeMeasureHandler(e) {
     this.onTimeMeasureHandler = e;
   }
   static async returnJSON(e) {
-    const t = await e.json();
+    const r = await e.json();
     if (!e.ok) {
-      let r = "Request failed";
-      throw new Error(r);
+      let t = "Request failed";
+      throw new Error(t);
     }
-    return t;
+    return r;
   }
-  async performControlledRequest(e, { params: t = {}, timeout: r = 3e4, abortController: o = new AbortController() } = {}) {
-    var p;
+  async performControlledRequest(e, { params: r = {}, timeout: t = 3e4, abortController: n = new AbortController() } = {}) {
+    var h;
     if (!this.figmaToken || !this.fileId)
       throw new Error("Добавьте figmaToken и figmaId");
-    const s = Object.entries(t).reduce((k, [K, C]) => typeof C < "u" ? { ...k, [K]: C } : k, {}), a = `https://api.figma.com/v1${e}${s && Object.keys(s).length ? `?${Y(s)}` : ""}`;
+    const s = Object.entries(r).reduce((M, [H, O]) => typeof O < "u" ? { ...M, [H]: O } : M, {}), a = `https://api.figma.com/v1${e}${s && Object.keys(s).length ? `?${ee(s)}` : ""}`;
     console.log("endpoinWithParams=", a);
-    const i = setTimeout(() => o.abort(), r), l = {
+    const l = setTimeout(() => n.abort(), t), i = {
       "Content-Type": "application/json",
       ...this.figmaToken && { "X-Figma-Token": this.figmaToken }
     }, c = {
       method: "GET",
-      headers: l,
-      signal: o.signal
-    }, u = performance.now(), g = await fetch(`${a}`, c);
-    clearTimeout(i);
-    const d = performance.now() - u;
-    return (p = this.onTimeMeasureHandler) == null || p.call(this, a, l, d), g;
+      headers: i,
+      signal: n.signal
+    }, d = performance.now(), y = await fetch(`${a}`, c);
+    clearTimeout(l);
+    const p = performance.now() - d;
+    return (h = this.onTimeMeasureHandler) == null || h.call(this, a, i, p), y;
   }
-  async request(e, t) {
-    var o;
-    const r = await this.performControlledRequest(e, {
-      ...t
+  async request(e, r) {
+    var n;
+    const t = await this.performControlledRequest(e, {
+      ...r
     });
-    return (o = r.headers.get("content-type")) != null && o.includes("application/json") ? v.returnJSON(r) : r;
+    return (n = t.headers.get("content-type")) != null && n.includes("application/json") ? C.returnJSON(t) : t;
   }
   async getComponents() {
     return this.request(`/files/${this.fileId}/components`);
@@ -155,77 +155,77 @@ class v {
     return this.request(`/files/${this.fileId}/styles`);
   }
   async getNodes(e) {
-    const t = Z(e).map(
+    const r = te(e).map(
       (s) => this.request(`/files/${this.fileId}/nodes`, { params: { ids: s.join(",") } })
-    ), r = await Promise.all(t);
+    ), t = await Promise.all(r);
     return {
-      ...r[0],
-      nodes: r.reduce((s, a) => ({ ...s, ...a.nodes }), {})
+      ...t[0],
+      nodes: t.reduce((s, a) => ({ ...s, ...a.nodes }), {})
     };
   }
 }
-const _ = (n, e) => {
-  const t = Array.isArray(e) ? e : e.split(".");
-  let r = n;
-  for (const o of t) {
-    if (r == null || typeof r != "object") return;
-    r = r[o];
+const re = (o, e) => {
+  const r = Array.isArray(e) ? e : e.split(".");
+  let t = o;
+  for (const n of r) {
+    if (t == null || typeof t != "object") return;
+    t = t[n];
   }
-  return r;
-}, B = (n, e) => {
-  if (!e || typeof e != "object") return n;
-  if (!n || typeof n != "object") return e;
-  const t = { ...n };
-  for (const r in e)
-    e.hasOwnProperty(r) && (typeof e[r] == "object" && e[r] !== null && typeof t[r] == "object" && t[r] !== null ? t[r] = B(t[r], e[r]) : t[r] = e[r]);
   return t;
+}, D = (o, e) => {
+  if (!e || typeof e != "object") return o;
+  if (!o || typeof o != "object") return e;
+  const r = { ...o };
+  for (const t in e)
+    e.hasOwnProperty(t) && (typeof e[t] == "object" && e[t] !== null && typeof r[t] == "object" && r[t] !== null ? r[t] = D(r[t], e[t]) : r[t] = e[t]);
+  return r;
 };
-function E(n, e) {
-  if (n === e)
+function F(o, e) {
+  if (o === e)
     return !0;
-  if (n == null || e == null)
-    return n === e;
-  if (typeof n != typeof e)
+  if (o == null || e == null)
+    return o === e;
+  if (typeof o != typeof e)
     return !1;
-  if (n instanceof Date && e instanceof Date)
-    return n.getTime() === e.getTime();
-  if (n instanceof RegExp && e instanceof RegExp)
-    return n.toString() === e.toString();
-  if (Array.isArray(n) && Array.isArray(e)) {
-    if (n.length !== e.length)
+  if (o instanceof Date && e instanceof Date)
+    return o.getTime() === e.getTime();
+  if (o instanceof RegExp && e instanceof RegExp)
+    return o.toString() === e.toString();
+  if (Array.isArray(o) && Array.isArray(e)) {
+    if (o.length !== e.length)
       return !1;
-    for (let t = 0; t < n.length; t++)
-      if (!E(n[t], e[t]))
+    for (let r = 0; r < o.length; r++)
+      if (!F(o[r], e[r]))
         return !1;
     return !0;
   }
-  if (typeof n == "object" && typeof e == "object") {
-    const t = Object.keys(n), r = Object.keys(e);
-    if (t.length !== r.length)
+  if (typeof o == "object" && typeof e == "object") {
+    const r = Object.keys(o), t = Object.keys(e);
+    if (r.length !== t.length)
       return !1;
-    for (const o of t)
-      if (!r.includes(o) || !E(n[o], e[o]))
+    for (const n of r)
+      if (!t.includes(n) || !F(o[n], e[n]))
         return !1;
     return !0;
   }
   return !1;
 }
-const F = {
+const E = {
   color: {},
   effect: {},
   text: {},
   grid: {}
 };
-class ee {
+class oe {
   constructor(e) {
     // files
-    y(this, "tokensDir");
-    y(this, "manifestPath");
+    g(this, "tokensDir");
+    g(this, "manifestPath");
     // result data
-    y(this, "variables");
-    y(this, "styles");
+    g(this, "variables");
+    g(this, "styles");
     // flags
-    y(this, "loaded", !1);
+    g(this, "loaded", !1);
     this.tokensDir = e || "", this.manifestPath = m.join(this.tokensDir, "manifest.json");
   }
   isLoaded() {
@@ -233,10 +233,10 @@ class ee {
   }
   /** to camelCase */
   normalizeKey(e) {
-    const t = e.trim();
-    return t && t.replace(/[-_\s]+/g, " ").split(" ").filter((r) => r.length).map((r, o) => {
-      const s = r.charAt(0), a = r.slice(1);
-      return o === 0 ? r.toLowerCase() : s.toUpperCase() + a;
+    const r = e.trim();
+    return r && r.replace(/[-_\s]+/g, " ").split(" ").filter((t) => t.length).map((t, n) => {
+      const s = t.charAt(0), a = t.slice(1);
+      return n === 0 ? t.toLowerCase() : s.toUpperCase() + a;
     }).join("");
   }
   /**
@@ -244,10 +244,10 @@ class ee {
    */
   parseVariableString(e) {
     if (typeof e != "string") return e;
-    const t = /^\{(.+)\}$/, r = e.match(t);
-    if (r) {
-      const o = r[1].trim();
-      return `{${this.normalizeKey(o)}}`;
+    const r = /^\{(.+)\}$/, t = e.match(r);
+    if (t) {
+      const n = t[1].trim();
+      return `{${this.normalizeKey(n)}}`;
     }
     return e;
   }
@@ -256,59 +256,59 @@ class ee {
    */
   createVariableFileList(e) {
     return Object.entries(e).flatMap(
-      ([t, r]) => Object.entries(r.modes).flatMap(
-        ([o, s]) => s.map((a) => ({
+      ([r, t]) => Object.entries(t.modes).flatMap(
+        ([n, s]) => s.map((a) => ({
           fileName: a,
-          modeName: this.normalizeKey(o.trim()),
-          collectionName: t
+          modeName: this.normalizeKey(n.trim()),
+          collectionName: r
         }))
       )
     );
   }
   parseValue(e) {
-    return e && (typeof e == "string" ? this.parseVariableString(e) : typeof e != "object" ? e : Array.isArray(e) ? e.map((t) => this.parseValue(t)) : Object.entries(e).reduce((t, [r, o]) => ({ ...t, [r]: this.parseValue(o) }), {}));
+    return e && (typeof e == "string" ? this.parseVariableString(e) : typeof e != "object" ? e : Array.isArray(e) ? e.map((r) => this.parseValue(r)) : Object.entries(e).reduce((r, [t, n]) => ({ ...r, [t]: this.parseValue(n) }), {}));
   }
-  getTokensFromFile(e, t) {
-    return Object.entries(e).reduce((r, [o, s]) => "$type" in s && "$value" in s ? {
-      ...r,
-      [this.normalizeKey(o)]: {
+  getTokensFromFile(e, r) {
+    return Object.entries(e).reduce((t, [n, s]) => "$type" in s && "$value" in s ? {
+      ...t,
+      [this.normalizeKey(n)]: {
         type: s.$type,
         description: s.$description,
-        value: t ? { [this.normalizeKey(t)]: this.parseValue(s.$value) } : this.parseValue(s.$value)
+        value: r ? { [this.normalizeKey(r)]: this.parseValue(s.$value) } : this.parseValue(s.$value)
       }
-    } : { ...r, [this.normalizeKey(o)]: this.getTokensFromFile(s, t) }, {});
+    } : { ...t, [this.normalizeKey(n)]: this.getTokensFromFile(s, r) }, {});
   }
-  processTokensFile(e, t, r) {
-    const o = this.normalizeKey(r), s = this.getTokensFromFile(e, t);
-    return { [o]: s };
+  processTokensFile(e, r, t) {
+    const n = this.normalizeKey(t), s = this.getTokensFromFile(e, r);
+    return { [n]: s };
   }
   /**
    * Loads all variable files in parallel and returns processed results
    */
   async loadVariableFiles(e) {
     return Promise.all(
-      e.map(async ({ fileName: t, modeName: r, collectionName: o }) => {
+      e.map(async ({ fileName: r, modeName: t, collectionName: n }) => {
         try {
-          const s = m.join(this.tokensDir, t), a = await f.readJson(s);
-          return this.processTokensFile(a, r, o);
+          const s = m.join(this.tokensDir, r), a = await u.readJson(s);
+          return this.processTokensFile(a, t, n);
         } catch (s) {
-          return console.warn(`Failed to load variable file: ${m.join(this.tokensDir, t)}`, s), {};
+          return console.warn(`Failed to load variable file: ${m.join(this.tokensDir, r)}`, s), {};
         }
       })
     );
   }
   mergeVariables(e) {
-    return e.reduce((t, r) => B(t, r), {});
+    return e.reduce((r, t) => D(r, t), {});
   }
   /**
    * Loads and processes all token variables from manifest collections
    */
   async loadTokenVariables(e) {
     try {
-      const t = this.createVariableFileList(e), r = await this.loadVariableFiles(t);
-      return this.mergeVariables(r);
-    } catch (t) {
-      throw new Error(`Failed to load token variables from ${this.tokensDir}: ${t}`);
+      const r = this.createVariableFileList(e), t = await this.loadVariableFiles(r);
+      return this.mergeVariables(t);
+    } catch (r) {
+      throw new Error(`Failed to load token variables from ${this.tokensDir}: ${r}`);
     }
   }
   /**
@@ -316,9 +316,9 @@ class ee {
    */
   createStyleFileList(e) {
     return Object.entries(e).flatMap(
-      ([t, r]) => (r == null ? void 0 : r.map((o) => ({
-        styleType: t,
-        fileName: o
+      ([r, t]) => (t == null ? void 0 : t.map((n) => ({
+        styleType: r,
+        fileName: n
       }))) || []
     );
   }
@@ -327,18 +327,18 @@ class ee {
    */
   async loadStyleFiles(e) {
     return (await Promise.all(
-      e.map(async ({ styleType: r, fileName: o }) => {
+      e.map(async ({ styleType: t, fileName: n }) => {
         try {
-          const s = m.join(this.tokensDir, o), a = await f.readJson(s);
-          return { styleType: r, styleTokens: a };
+          const s = m.join(this.tokensDir, n), a = await u.readJson(s);
+          return { styleType: t, styleTokens: a };
         } catch (s) {
-          return console.warn(`Failed to load style file: ${m.join(this.tokensDir, o)}`, s), { styleType: r, styleTokens: {} };
+          return console.warn(`Failed to load style file: ${m.join(this.tokensDir, n)}`, s), { styleType: t, styleTokens: {} };
         }
       })
     )).reduce(
-      (r, o) => ({ ...r, [o.styleType]: this.getTokensFromFile(o.styleTokens, "") }),
+      (t, n) => ({ ...t, [n.styleType]: this.getTokensFromFile(n.styleTokens, "") }),
       {
-        ...F
+        ...E
       }
     );
   }
@@ -346,13 +346,13 @@ class ee {
    * Loads and processes all style tokens from manifest
    */
   async loadStyles(e) {
-    if (!e) return { ...F };
-    const t = this.createStyleFileList(e);
-    return await this.loadStyleFiles(t);
+    if (!e) return { ...E };
+    const r = this.createStyleFileList(e);
+    return await this.loadStyleFiles(r);
   }
   async load() {
     if (this.loaded) return;
-    const e = await f.readJson(this.manifestPath);
+    const e = await u.readJson(this.manifestPath);
     if (!e)
       throw new Error(`Failed to load manifest file from: ${this.manifestPath}`);
     this.variables = await this.loadTokenVariables(e.collections), this.styles = await this.loadStyles(e.styles), this.loaded = !0;
@@ -397,9 +397,9 @@ class ee {
    */
   resolveVariableValue(e) {
     if (typeof e == "object")
-      return Object.keys(e).reduce((t, r) => {
-        const o = e[r], s = this.resolveVariableValueString(o, r);
-        return s && (t[r] = s), t;
+      return Object.keys(e).reduce((r, t) => {
+        const n = e[t], s = this.resolveVariableValueString(n, t);
+        return s && (r[t] = s), r;
       }, {});
   }
   /**
@@ -408,38 +408,38 @@ class ee {
    * @param mode - Mode name to get value for (optional)
    * @returns resolved token variable or undefined if not found or invalid
    */
-  resolveVariableValueString(e, t) {
+  resolveVariableValueString(e, r) {
     if (!this.isVariableReference(e)) return e;
-    const r = this.getVariablePath(e), o = this.getToken(r, t);
-    if (o)
-      return this.resolveVariableValueString(o, t);
+    const t = this.getVariablePath(e), n = this.getToken(t, r);
+    if (n)
+      return this.resolveVariableValueString(n, r);
   }
   /**
    * Gets a nested token value by path, similar to lodash.get
    * @param variablePath - Dot-separated string path or array of path segments
    * @param mode - Mode name to get value for (optional)
    */
-  getToken(e, t) {
+  getToken(e, r) {
     if (!this.loaded || !this.variables)
       throw new Error("Tokens not loaded. Call load() first.");
-    for (const r of Object.values(this.variables)) {
-      const o = _(r, e);
-      if (o != null && o.value && typeof o.value == "object") {
-        if (t) return o.value[t];
+    for (const t of Object.values(this.variables)) {
+      const n = re(t, e);
+      if (n != null && n.value && typeof n.value == "object") {
+        if (r) return n.value[r];
         {
-          const s = Object.keys(o.value)[0];
-          return o.value[s];
+          const s = Object.keys(n.value)[0];
+          return n.value[s];
         }
       }
     }
   }
 }
-const ot = async () => {
-  const e = await new $().load();
+const rt = async () => {
+  const e = await new k().load();
   if (!e)
     throw new Error("Заполнить ошибку через нейронку");
-  const { figmaToken: t, fileId: r, modules: o, manifest: s } = e, a = new v(t, r), i = new ee(s);
-  s && f.exists(s) && await i.load(), await Promise.all(
+  const { figmaToken: r, fileId: t, modules: n, manifest: s } = e, a = new C(r, t), l = new oe(s);
+  s && u.exists(s) && await l.load(), await Promise.all(
     // [
     //     colorsFromTokenManager({
     //         input: {
@@ -492,7 +492,6 @@ const ot = async () => {
     //     }),
     //     typographyFromTokenManager({
     //         input: {
-    //             isModule: true,
     //             breakpoints: {
     //                 desktop: '1440',
     //                 mobile: '768',
@@ -500,515 +499,476 @@ const ot = async () => {
     //             },
     //         },
     //         output: {
-    //             jsonDir: './typography',
-    //             stylesDir: './typography',
+    //             dir: './typography',
     //         },
     //     }),
     // ].map(module => module.executor({ figmaApiClient, tokenManagerClient }))
-    o.map((l) => l.executor({ figmaApiClient: a, tokenManagerClient: i }))
+    // [
+    //     colorsFromTokenManager({
+    //         input: {
+    //             includeVariables: ['colors'],
+    //             // includeStyles: false,
+    //         },
+    //         output: {
+    //             dir: './colors',
+    //         },
+    //     }),
+    //     shadowsFromTokenManager({
+    //         input: {
+    //             // includeVariables: ['colors'],
+    //             // includeStyles: false,
+    //         },
+    //         output: {
+    //             dir: './shadows',
+    //         },
+    //     }),
+    //     typographyFromTokenManager({
+    //         input: {
+    //             breakpoints: {
+    //                 desktop: '1440',
+    //                 mobile: '768',
+    //                 blabla: '761',
+    //             },
+    //             fontFamily: {
+    //                 'Sana Sans Alt': 'var(--sans-sans-alt)',
+    //             },
+    //         },
+    //         output: {
+    //             dir: './typography',
+    //         },
+    //     }),
+    //     breakpointsFromTokenManager({
+    //         input: {
+    //             names: ['xxxl', 'xl', 'lg', 'md', 'sm', 'xs', 'xxs', 'xxxs'],
+    //         },
+    //         output: {
+    //             dir: './breakpoints',
+    //         },
+    //     }),
+    //     containerFromTokenManager({
+    //         input: {
+    //             layer: 'lalala',
+    //         },
+    //         output: {
+    //             dir: './container',
+    //         },
+    //     }),
+    // ].map(module => module.executor({ figmaApiClient, tokenManagerClient }))
+    n.map((i) => i.executor({ figmaApiClient: a, tokenManagerClient: l }))
   );
-}, st = async () => {
-  await $.create(), console.log("\x1B[32m%s\x1B[0m", "✔️ Configuration file created gts.config.ts");
-}, L = ["xxxl", "xxl", "xl", "lg", "md", "sm", "xs", "xxs", "xxxs"], te = (n) => parseInt(n.value, 10), A = (n) => n.reduce(
-  (e, t) => ({
+}, ot = async () => {
+  await k.create(), console.log("\x1B[32m%s\x1B[0m", "✔️ Configuration file created gts.config.ts");
+}, ne = ["xxxl", "xxl", "xl", "lg", "md", "sm", "xs", "xxs", "xxxs"], se = (o) => parseInt(o.value, 10), ae = (o) => o.reduce(
+  (e, r) => ({
     ...e,
-    [t.name]: te(t)
+    [r.name]: se(r)
   }),
   {}
-), re = async (n, e) => {
-  await f.delete(n, e);
-}, ne = async (n, e, t) => {
-  await f.write(n, e, { directory: t });
-}, w = async (n, e, t) => {
-  await re(n, t), await ne(n, e, t);
-}, oe = (n, e) => {
-  if (!e.length) return "";
-  const t = e.map((r) => `    ${r}`).join(`
-`);
-  return `${n} {
-${t}
-}`;
-}, se = (n) => n.length ? n.join(`
-`) : "", ae = (n) => `--${n}`, ie = (n) => `$${n}`, le = (n) => n.map((e) => `${ae(e.name)}: ${e.value}px;`), ce = (n) => n.map((e) => `${ie(e.name)}: ${e.value}px;`), ue = (n) => oe(":root", n), de = (n) => se(n), ge = (n) => {
-  const e = A(n);
-  return JSON.stringify(e);
-}, fe = async (n, e, t, r, o, s, a, i) => {
-  const l = [];
-  l.push(w(s, n, r)), a && e && l.push(w(a, e, o)), i && t && l.push(w(i, t, o)), await Promise.all(l);
-}, pe = async ({
-  breakpointTokens: n,
-  jsonDir: e,
-  stylesDir: t,
-  jsonFileName: r,
-  stylesFileName: o,
-  extensions: s
-}) => {
-  const a = le(n), i = ce(n), l = s.includes("css") ? ue(a) : null, c = s.includes("scss") ? de(i) : null, u = s.includes("css") ? `${o}.css` : null, g = s.includes("scss") ? `${o}.scss` : null, d = ge(n);
-  await fe(
-    d,
-    l,
-    c,
-    e,
-    t,
-    r,
-    u,
-    g
-  );
-}, he = (n, e) => {
-  const t = Object.keys(n).filter((s) => !isNaN(Number(s))).sort((s, a) => Number(s) - Number(a));
-  if (t.length > e.length)
+), ie = async (o, e) => {
+  await u.delete(o, e);
+}, le = async (o, e, r) => {
+  await u.write(o, e, { directory: r });
+}, j = async (o, e, r) => {
+  await ie(o, r), await le(o, e, r);
+}, ce = (o) => {
+  const e = o.map(({ name: r, value: t }) => `    --${r}: ${t};`);
+  return e.length ? `.breakpoint-variables {
+${e.join(`
+`)}
+}
+` : "";
+}, ue = (o) => {
+  var t;
+  const e = o.map(({ name: n, value: s }) => `    ${n}: ${s}`), r = (t = o.at(-1)) == null ? void 0 : t.name;
+  return !e.length || !r ? "" : `$breakpointList: (
+${e.join(`,
+`)}
+);
+
+$defaultBreakpoint: '${r}';
+`;
+}, de = (o) => [
+  `const breakpoints = ${JSON.stringify(o, null, 4)} as const;`,
+  "",
+  "const BREAKPOINTS_NAMES = Object.keys(breakpoints);",
+  "",
+  "type BreakpointsKeysType = keyof typeof breakpoints;",
+  "type AllowMedia = 'all' | BreakpointsKeysType;",
+  "",
+  "export { breakpoints, BREAKPOINTS_NAMES };",
+  "export type { BreakpointsKeysType, AllowMedia };",
+  ""
+].join(`
+`), fe = async ({ breakpointTokens: o, dir: e }) => {
+  const r = ae(o), t = ce(o), n = ue(o), s = de(r);
+  await Promise.all([
+    j("styles.css", t, e),
+    j("styles.scss", n, e),
+    j("index.ts", s, e)
+  ]);
+}, pe = (o, e) => {
+  const r = Object.keys(o).filter((s) => !isNaN(Number(s))).sort((s, a) => Number(s) - Number(a));
+  if (r.length > e.length)
     throw new Error(
-      `Not enough breakpoint names provided. Found ${t.length} breakpoints in data, but only ${e.length} names specified: ${e.join(", ")}`
+      `Not enough breakpoint names provided. Found ${r.length} breakpoints in data, but only ${e.length} names specified: ${e.join(", ")}`
     );
-  const o = Object.keys(n).filter((s) => isNaN(Number(s)));
-  if (o.length > 0)
+  const n = Object.keys(o).filter((s) => isNaN(Number(s)));
+  if (n.length > 0)
     throw new Error(
-      `Found non-numeric breakpoint keys in grid data: ${o.join(", ")}. All breakpoint keys must be numeric values.`
+      `Found non-numeric breakpoint keys in grid data: ${n.join(", ")}. All breakpoint keys must be numeric values.`
     );
-  return t.map((s, a) => ({
+  return r.map((s, a) => ({
     name: e[e.length - 1 - a] || `bp-${s}`,
     value: s
   }));
-}, at = ({
-  input: n = {},
-  output: { jsonDir: e, stylesDir: t, jsonFileName: r = "breakpoints.json", stylesFileName: o = "breakpoints" }
+}, nt = ({
+  input: o = {},
+  output: { dir: e }
 }) => ({
   name: "breakpoints/tokenManager",
-  executor: async ({ tokenManagerClient: s }) => {
+  executor: async ({ tokenManagerClient: r }) => {
     try {
       console.log("[breakpoints/tokenManager] Generating breakpoints from TokenManager...");
-      const { extensions: a = ["css"], names: i = L } = n;
-      if (!s.isLoaded())
+      const { names: t = ne } = o;
+      if (!r.isLoaded())
         throw new Error("TokenManager is not loaded. Tokens must be loaded before using this module.");
-      const l = s.getStyles();
-      if (!l.grid)
+      const n = r.getStyles();
+      if (!n.grid)
         throw new Error("No grid styles found in TokenManager. Grid tokens must be loaded.");
       console.log("[breakpoints/tokenManager] Extracting breakpoints from grid styles...");
-      const c = he(l.grid, i);
-      if (!c.length) {
+      const s = pe(n.grid, t);
+      if (!s.length) {
         console.warn("[breakpoints/tokenManager] No breakpoints found in grid styles.");
         return;
       }
       console.log(
-        `[breakpoints/tokenManager] Found ${c.length} breakpoints: ${c.map((u) => u.name).join(", ")}`
-      ), await pe({
-        breakpointTokens: c,
-        jsonDir: e,
-        stylesDir: t,
-        jsonFileName: r,
-        stylesFileName: o,
-        extensions: a
-      }), console.log("[breakpoints/tokenManager] Breakpoints generated successfully.");
-    } catch (a) {
-      throw console.error("[breakpoints/tokenManager] Error:", a), a;
-    }
-  }
-}), ye = (n) => {
-  const e = A(n), t = Object.entries(e).map(([o, s]) => `    ${o}: ${s}`).join(`,
-`), r = n.length > 0 ? n[n.length - 1].name : "xxxl";
-  return `$breakpointList: (
-${t}
-);
-$defaultBreakpoint: '${r}';`;
-}, me = async (n, e, t) => {
-  await w(t, n, e);
-}, be = async ({
-  breakpointTokens: n,
-  stylesDir: e,
-  fileName: t
-}) => {
-  const r = ye(n);
-  await me(r, e, `${t}.scss`);
-}, ke = (n, e) => {
-  const t = Object.keys(n).filter((r) => !isNaN(Number(r))).sort((r, o) => Number(r) - Number(o));
-  if (t.length > e.length)
-    throw new Error(
-      `Not enough breakpoint names provided. Found ${t.length} breakpoints in data, but only ${e.length} names specified: ${e.join(", ")}`
-    );
-  return t.map((r, o) => ({
-    name: e[e.length - 1 - o] || `bp-${r}`,
-    value: r
-  }));
-}, it = ({
-  input: n = {},
-  output: { stylesDir: e, fileName: t = "breakpointList" }
-}) => ({
-  name: "breakpointsList/tokenManager",
-  executor: async ({ tokenManagerClient: r }) => {
-    try {
-      console.log("[breakpointsList/tokenManager] Generating SCSS breakpoint map...");
-      const { names: o = L } = n;
-      if (!r.isLoaded())
-        throw new Error("TokenManager is not loaded. Tokens must be loaded before using this module.");
-      const s = r.getStyles();
-      if (!s.grid)
-        throw new Error("No grid styles found in TokenManager. Grid tokens must be loaded.");
-      console.log("[breakpointsList/tokenManager] Extracting breakpoints for SCSS map...");
-      const a = ke(s.grid, o);
-      if (!a.length) {
-        console.warn("[breakpointsList/tokenManager] No breakpoints found in grid styles.");
-        return;
-      }
-      console.log(
-        `[breakpointsList/tokenManager] Found ${a.length} breakpoints for map: ${a.map((i) => i.name).join(", ")}`
-      ), await be({
-        breakpointTokens: a,
-        stylesDir: e,
-        fileName: t
-      }), console.log("[breakpointsList/tokenManager] SCSS breakpoint map generated successfully.");
-    } catch (o) {
-      throw console.error("[breakpointsList/tokenManager] Error:", o), o;
+        `[breakpoints/tokenManager] Found ${s.length} breakpoints: ${s.map((a) => a.name).join(", ")}`
+      ), console.log(`[breakpoints/tokenManager] Writing files to ${e}...`), await fe({
+        breakpointTokens: s,
+        dir: e
+      }), console.log("[breakpoints/tokenManager] ✅ Successfully generated breakpoint files");
+    } catch (t) {
+      const n = t instanceof Error ? t.message : String(t);
+      throw console.error("[breakpoints/tokenManager] ❌ Failed to generate breakpoints:", n), t instanceof Error && t.stack && console.error("[breakpoints/tokenManager] Stack trace:", t.stack), t;
     }
   }
-}), V = (n, e) => {
+}), ge = "styles.css", ye = "index.ts", x = (o, e) => {
   if (!e.length) return "";
-  const t = e.map((r) => `    ${r}`).join(`
+  const r = e.map((t) => `    ${t}`).join(`
 `);
-  return `${n} {
-${t}
+  return `${o} {
+${r}
 }`;
-}, we = (n) => `.${n.replace(/\s+/g, "-").toLowerCase()}`, R = (n) => `--${n}`, $e = (n) => n.reduce(
-  (e, t) => {
-    const r = R(t.name);
-    return typeof t.value == "object" ? Object.entries(t.value).forEach(([o, s]) => {
-      e[o] || (e[o] = []), e[o].push(`${r}: ${s};`);
-    }) : e.root.push(`${r}: ${t.value};`), e;
+}, he = (o) => `.${o.replace(/\s+/g, "-").toLowerCase()}`, L = (o) => `--cl-${o}`, me = (o) => o.reduce(
+  (e, r) => {
+    const t = L(r.name);
+    return typeof r.value == "object" ? Object.entries(r.value).forEach(([n, s]) => {
+      e[n] || (e[n] = []), e[n].push(`${t}: ${s};`);
+    }) : e.root.push(`${t}: ${r.value};`), e;
   },
   { root: [] }
-), Se = (n) => {
-  const e = V(".default-colors", n.root), t = Object.entries(n).reduce((r, [o, s]) => {
-    if (o === "root" || !s.length) return r;
-    const a = V(we(`${o}-colors`), s);
-    return a && r.push(a), r;
+), be = (o) => {
+  const e = x(".color-variables", o.root), r = Object.entries(o).reduce((t, [n, s]) => {
+    if (n === "root" || !s.length) return t;
+    const a = x(he(`${n}-color-variables`), s);
+    return a && t.push(a), t;
   }, []).join(`
 
 `);
-  return [e, t].filter(Boolean).join(`
+  return [e, r].filter(Boolean).join(`
 
 `);
-}, je = (n) => {
-  const e = n.reduce((t, r) => ({ ...t, [r.name]: `var(${R(r.name)})` }), {});
-  return JSON.stringify(e);
-}, Te = async (n, e, t, r, o, s) => {
-  await Promise.all([f.delete(o, t), f.delete(s, r)]);
-  const a = f.write(o, n, { directory: t }), i = f.write(s, e, { directory: r });
-  await Promise.all([a, i]);
-}, Me = async ({
-  colorTokens: n,
-  jsonDir: e,
-  stylesDir: t,
-  jsonFileName: r,
-  cssFileName: o
+}, ke = (o) => `${`const colors = {
+${o.map((t) => `    '${t.name}': 'var(${L(t.name)})'`).join(`,
+`)}
+} as const;`}
+
+type ColorsKeysType = keyof typeof colors;
+
+export { colors, type ColorsKeysType };
+`, we = async ({
+  tsContent: o,
+  cssContent: e,
+  dir: r
 }) => {
-  const s = $e(n), a = Se(s), i = je(n);
-  await Te(i, a, e, t, r, o);
-}, S = (n) => n.reduce((e, t) => {
-  const r = Number((t.position * 100).toFixed(1));
-  return [...e, `${t.color}${r > 0 && r < 100 ? ` ${r}%` : ""}`];
-}, []).join(", "), Ee = (n) => {
-  const e = S(n.stops);
-  return `linear-gradient(${n.angle}deg, ${e})`;
-}, ve = (n) => `radial-gradient(circle, ${S(n.stops)})`, Ce = (n) => {
-  const e = S(n.stops);
-  return `conic-gradient(from ${n.angle}deg, ${e})`;
-}, Fe = (n) => {
-  const e = S(n.stops);
-  return `linear-gradient(${n.angle}deg, ${e})`;
-}, O = (n) => typeof n == "string" ? n : n.type === "linear" ? Ee(n) : n.type === "radial" ? ve(n) : n.type === "conic" ? Ce(n) : n.type === "diamond" ? Fe(n) : "", G = (n, e) => Object.keys(n).reduce(
-  (t, r) => {
-    const o = n[r], s = e ? `${e}-${r}` : r;
-    if (o && typeof o == "object" && "type" in o && "value" in o) {
-      const i = Object.keys(o.value), l = i.length > 1 ? o.value : o.value[i[0]], c = typeof l == "object" ? Object.keys(l).reduce(
-        (g, d) => ({
-          ...g,
-          [d]: O(l[d])
+  await u.delete(r);
+  const t = u.write(ye, o, { directory: r }), n = u.write(ge, e, { directory: r });
+  await Promise.all([t, n]);
+}, $e = async ({ colorTokens: o, dir: e }) => {
+  const r = me(o), t = be(r), n = ke(o);
+  await we({ tsContent: n, cssContent: t, dir: e });
+}, w = (o) => o.reduce((e, r) => {
+  const t = Number((r.position * 100).toFixed(1));
+  return [...e, `${r.color}${t > 0 && t < 100 ? ` ${t}%` : ""}`];
+}, []).join(", "), Se = (o) => {
+  const e = w(o.stops);
+  return `linear-gradient(${o.angle}deg, ${e})`;
+}, Te = (o) => `radial-gradient(circle, ${w(o.stops)})`, je = (o) => {
+  const e = w(o.stops);
+  return `conic-gradient(from ${o.angle}deg, ${e})`;
+}, Fe = (o) => {
+  const e = w(o.stops);
+  return `linear-gradient(${o.angle}deg, ${e})`;
+}, V = (o) => typeof o == "string" ? o : o.type === "linear" ? Se(o) : o.type === "radial" ? Te(o) : o.type === "conic" ? je(o) : o.type === "diamond" ? Fe(o) : "", R = (o, e) => Object.keys(o).reduce(
+  (r, t) => {
+    const n = o[t], s = e ? `${e}-${t}` : t;
+    if (n && typeof n == "object" && "type" in n && "value" in n) {
+      const l = Object.keys(n.value), i = l.length > 1 ? n.value : n.value[l[0]], c = typeof i == "object" ? Object.keys(i).reduce(
+        (y, p) => ({
+          ...y,
+          [p]: V(i[p])
         }),
         {}
-      ) : O(l), u = { [s]: c };
-      return { ...t, ...u };
+      ) : V(i), d = { [s]: c };
+      return { ...r, ...d };
     }
-    const a = G(o, s);
-    return { ...t, ...a };
+    const a = R(n, s);
+    return { ...r, ...a };
   },
   {}
-), Ve = (n) => `cl-${n}`, I = (n, e) => Object.keys(n).reduce((t, r) => {
-  const o = n[r];
-  if (o.type && o.type !== "color") return t;
-  if (o.type && o.value) {
-    const a = typeof o.value == "string" ? e.resolveVariableValueString(o.value, r) : e.resolveVariableValue(o.value);
-    return a ? { ...t, [r]: { ...o, value: a } } : t;
+), z = (o, e) => Object.keys(o).reduce((r, t) => {
+  const n = o[t];
+  if (n.type && n.type !== "color") return r;
+  if (n.type && n.value) {
+    const a = typeof n.value == "string" ? e.resolveVariableValueString(n.value, t) : e.resolveVariableValue(n.value);
+    return a ? { ...r, [t]: { ...n, value: a } } : r;
   }
-  const s = I(o, e);
-  return s ? { ...t, [r]: s } : t;
-}, {}), lt = ({
-  input: n = {},
-  output: { jsonDir: e, stylesDir: t, jsonFileName: r = "colors.json", cssFileName: o = "colors.css" }
-}) => ({
+  const s = z(n, e);
+  return s ? { ...r, [t]: s } : r;
+}, {}), st = ({ input: o = {}, output: { dir: e } }) => ({
   name: "colors/tokenManager",
-  executor: async ({ tokenManagerClient: s }) => {
+  executor: async ({ tokenManagerClient: r }) => {
     try {
       console.log("[colors/tokenManager] Generating colors from TokenManager...");
-      const { includeVariables: a, includeStyles: i = !0 } = n;
-      if (!(a != null && a.length) && !i)
+      const { includeVariables: t, includeStyles: n = !0 } = o;
+      if (!(t != null && t.length) && !n)
         throw new Error("Either includeVariables or includeStyles must be enabled");
-      if (!s.isLoaded())
+      if (!r.isLoaded())
         throw new Error("TokenManager is not loaded. Tokens must be loaded before using this module.");
-      const l = [], c = s.getVariables();
-      if (i) {
-        const g = s.getStyles();
-        console.log("[colors/tokenManager] Processing styles for colors..."), g.color && l.push(g.color);
+      const s = [], a = r.getVariables();
+      if (n) {
+        const i = r.getStyles();
+        console.log("[colors/tokenManager] Processing styles for colors..."), i.color && s.push(i.color);
       }
-      if (a != null && a.length) {
-        console.log(`[colors/tokenManager] Processing ${a.length} variable groups...`);
-        const g = a.map((d) => c[d]).filter(Boolean);
-        l.push(...g);
+      if (t != null && t.length) {
+        console.log(`[colors/tokenManager] Processing ${t.length} variable groups...`);
+        const i = t.map((c) => a[c]).filter(Boolean);
+        s.push(...i);
       }
-      const u = l.map((g) => I(g, s)).flatMap(
-        (g) => Object.entries(G(g, "")).reduce(
-          (d, [p, k]) => [...d, { name: Ve(p), value: k }],
+      const l = s.map((i) => z(i, r)).flatMap(
+        (i) => Object.entries(R(i, "")).reduce(
+          (c, [d, y]) => [...c, { name: d, value: y }],
           []
         )
       );
-      if (u.length === 0) {
+      if (l.length === 0) {
         console.warn("[colors/tokenManager] No color tokens generated");
         return;
       }
-      console.log(`[colors/tokenManager] Generated ${u.length} color tokens`), console.log(`[colors/tokenManager] Writing files to ${e} and ${t}...`), await Me({
-        colorTokens: u,
-        jsonDir: e,
-        stylesDir: t,
-        jsonFileName: r,
-        cssFileName: o
+      console.log(`[colors/tokenManager] Generated ${l.length} color tokens`), console.log(`[colors/tokenManager] Writing files to ${e}...`), await $e({
+        colorTokens: l,
+        dir: e
       }), console.log("[colors/tokenManager] ✅ Successfully generated color files");
-    } catch (a) {
-      const i = a instanceof Error ? a.message : String(a);
-      throw console.error("[colors/tokenManager] ❌ Failed to generate colors:", i), a instanceof Error && a.stack && console.error("[colors/tokenManager] Stack trace:", a.stack), a;
+    } catch (t) {
+      const n = t instanceof Error ? t.message : String(t);
+      throw console.error("[colors/tokenManager] ❌ Failed to generate colors:", n), t instanceof Error && t.stack && console.error("[colors/tokenManager] Stack trace:", t.stack), t;
     }
   }
-}), Oe = (n, e) => {
-  if (!e.length) return "";
-  const t = e.map((r) => `    ${r}`).join(`
+}), Ce = (o) => `    @media (width <= ${o.breakpoint}px) {
+        .container {
+            padding-left: ${o.offset};
+            padding-right: ${o.offset};
+        }
+
+        .containerTablet {
+            padding-left: ${o.offset};
+            padding-right: ${o.offset};
+        }
+    }`, Me = (o, e) => {
+  const r = e || "components", t = o.map((n) => Ce(n)).join(`
+
 `);
-  return `${n} {
+  return `@layer ${r} {
 ${t}
 }`;
-}, Pe = (n, e) => {
-  if (!e.length) return "";
-  const t = n - 1, r = e.map((o) => `        ${o}`).join(`
-`);
-  return `@media (max-width: ${t}px) {
-${r}
-    }`;
-}, xe = (n, e) => {
-  const t = [];
-  n.forEach((a, i) => {
-    const l = parseInt(a.name.split("_")[0]), c = [], u = i > 0 ? n[i - 1] : null;
-    if (a.value.alignment === "center" && a.value.width && (c.push(`max-width: ${a.value.width};`), c.push("margin-left: auto;"), c.push("margin-right: auto;"), u && u.value.alignment !== "center" && (c.push("padding-left: 0;"), c.push("padding-right: 0;"))), a.value.alignment === "stretch" && u && u.value.alignment !== "stretch" && (c.push("max-width: none;"), c.push("margin-left: 0;"), c.push("margin-right: 0;")), a.value.alignment === "stretch" && (c.push(`padding-left: ${a.value.margin};`), c.push(`padding-right: ${a.value.margin};`)), c.length > 0) {
-      const d = Oe(".container", c);
-      if (i === 0)
-        t.push(d);
-      else {
-        const p = Pe(l, [d]);
-        t.push(p);
-      }
-    }
-  });
-  const o = t.filter(Boolean).join(`
+}, Oe = () => `import styles from './styles.module.css';
 
-`).replace(/^/gm, "    ");
-  return `@layer ${e || "components"} {
-${o}
-}`;
-}, Ne = async (n, e, t) => {
-  await Be(t, n, e);
-}, Be = async (n, e, t) => {
-  await f.delete(n, t), await f.write(n, e, { directory: t });
-}, Le = async ({
-  containerTokens: n,
-  stylesDir: e,
-  fileName: t,
-  layer: r,
-  isModule: o = !0
-}) => {
-  const s = xe(n, r), a = `${t}${o ? ".module" : ""}.css`;
-  await Ne(s, e, a);
-}, Ae = (n, e, t) => {
-  const r = [];
-  return Object.keys(n).forEach((a) => {
-    const i = n[a];
-    i && i.value && Array.isArray(i.value) && i.value.filter(
-      (c) => c.pattern === "columns" && (c.alignment === "center" || c.alignment === "stretch")
-    ).forEach((c) => {
-      if (c.alignment === "center" && r.push({
-        name: a,
-        value: {
-          alignment: "center",
-          width: t.width,
-          margin: "auto"
-        }
-      }), c.alignment === "stretch") {
-        const u = e.resolveVariableValueString(c.offset);
-        if (!u) return;
-        r.push({
-          name: a,
-          value: {
-            alignment: "stretch",
-            margin: u
-          }
-        });
-      }
-    });
-  }), r.sort((a, i) => {
-    const l = parseInt(a.name);
-    return parseInt(i.name) - l;
-  }).reduce((a, i) => {
-    const l = a[a.length - 1];
-    return l && E(l.value, i.value) || a.push(i), a;
-  }, []);
-}, ct = ({
-  input: n = {},
-  output: { stylesDir: e, fileName: t = "container" }
+export const conatinerClassName = styles.container;
+export const conatinerTabletClassName = styles.containerTablet;
+`, v = async (o, e, r) => {
+  await u.delete(o, r), await u.write(o, e, { directory: r });
+}, Ee = async ({ containerTokens: o, dir: e, layer: r }) => {
+  const t = Me(o, r), n = Oe();
+  await v("styles.module.css", t, e), await v("index.ts", n, e);
+}, xe = (o) => {
+  const e = o.trim().toLowerCase();
+  return e === "0" || e === "0px";
+}, Ve = (o, e) => Object.keys(o).filter((s) => !isNaN(Number(s))).sort((s, a) => Number(a) - Number(s)).reduce((s, a) => {
+  const l = o[a];
+  if (!l || !("value" in l) || !Array.isArray(l.value))
+    return s;
+  const i = l.value.find((d) => d.pattern === "columns");
+  if (!(i != null && i.offset))
+    return s;
+  const c = e.resolveVariableValueString(i.offset);
+  return !c || typeof c != "string" || xe(c) ? s : [
+    ...s,
+    {
+      breakpoint: Number(a),
+      offset: c
+    }
+  ];
+}, []).reduce((s, a) => {
+  const l = s[s.length - 1];
+  return l && F(l.offset, a.offset) || s.push(a), s;
+}, []), at = ({
+  input: o = {},
+  output: { dir: e }
 }) => ({
   name: "container/tokenManager",
   executor: async ({ tokenManagerClient: r }) => {
     try {
       console.log("[container/tokenManager] Generating container styles...");
-      const { containerWidth: o = 1440, layer: s, isModule: a = !0 } = n;
+      const { layer: t } = o;
       if (!r.isLoaded())
         throw new Error("TokenManager is not loaded. Tokens must be loaded before using this module.");
       console.log("[container/tokenManager] Extracting container tokens...");
-      const i = r.getStyles();
-      if (!i.grid)
+      const n = r.getStyles();
+      if (!n.grid)
         throw new Error("No grid styles found in TokenManager. Grid tokens must be loaded.");
-      const l = Ae(i.grid, r, { width: o });
-      if (!l.length) {
+      const s = Ve(n.grid, r);
+      if (!s.length) {
         console.warn("[container/tokenManager] No container tokens found.");
         return;
       }
       console.log(
-        `[container/tokenManager] Found ${l.length} container tokens: ${l.map((c) => c.name).join(", ")}`
-      ), await Le({
-        containerTokens: l,
-        stylesDir: e,
-        fileName: t,
-        layer: s,
-        isModule: a
-      }), console.log("[container/tokenManager] Container styles generated successfully.");
-    } catch (o) {
-      throw console.error("[container/tokenManager] Error:", o), o;
+        `[container/tokenManager] Found ${s.length} container tokens: ${s.map((a) => a.breakpoint).join(", ")}`
+      ), console.log(`[container/tokenManager] Writing files to ${e}...`), await Ee({
+        containerTokens: s,
+        dir: e,
+        layer: t
+      }), console.log("[container/tokenManager] ✅ Successfully generated container files");
+    } catch (t) {
+      const n = t instanceof Error ? t.message : String(t);
+      throw console.error("[container/tokenManager] ❌ Failed to generate container:", n), t instanceof Error && t.stack && console.error("[container/tokenManager] Stack trace:", t.stack), t;
     }
   }
-}), P = (n, e) => {
+}), ve = "styles.css", Pe = "index.ts", P = (o, e) => {
   if (!e.length) return "";
-  const t = e.map((r) => `    ${r}`).join(`
+  const r = e.map((t) => `    ${t}`).join(`
 `);
-  return `${n} {
-${t}
+  return `${o} {
+${r}
 }`;
-}, Re = (n) => `.${n.replace(/\s+/g, "-").toLowerCase()}`, Ge = (n) => `--${n}`, Ie = ({ offsetX: n, offsetY: e, blur: t, spread: r, color: o }) => `${n} ${e} ${t} ${r} ${o}`, Je = (n) => n.reduce(
-  (e, t) => {
-    const r = Ge(t.name);
-    return typeof t.value == "object" ? Object.entries(t.value).forEach(([o, s]) => {
-      e[o] || (e[o] = []), e[o].push(`${r}: ${s};`);
-    }) : e.root.push(`${r}: ${t.value};`), e;
+}, Ne = (o) => `.${o.replace(/\s+/g, "-").toLowerCase()}`, W = (o) => `--${o}`, Ae = ({ offsetX: o, offsetY: e, blur: r, spread: t, color: n }) => `${o} ${e} ${r} ${t} ${n}`, Be = (o) => o.reduce(
+  (e, r) => {
+    const t = W(r.name);
+    return typeof r.value != "object" ? (e.root.push(`${t}: ${r.value};`), e) : Object.entries(r.value).reduce((n, [s, a]) => {
+      const l = n[s] ?? [];
+      return { ...n, [s]: [...l, `${t}: ${a};`] };
+    }, e);
   },
   { root: [] }
-), We = (n) => {
-  const e = P(":root", n.root), t = Object.entries(n).reduce((r, [o, s]) => {
-    if (o === "root" || !s.length) return r;
-    const a = P(Re(o), s);
-    return a && r.push(a), r;
+), Ke = (o) => {
+  const e = P(".shadow-variables", o.root), r = Object.entries(o).reduce((t, [n, s]) => {
+    if (n === "root" || !s.length) return t;
+    const a = P(Ne(`${n}-shadow-variables`), s);
+    return a && t.push(a), t;
   }, []).join(`
 
 `);
-  return [e, t].filter(Boolean).join(`
+  return [e, r].filter(Boolean).join(`
 
 `);
-}, ze = (n) => {
-  const e = n.reduce((t, r) => ({ ...t, [r.name]: r.value }), {});
-  return JSON.stringify(e);
-}, Ke = async (n, e, t, r, o, s) => {
-  await Promise.all([f.delete(o, t), f.delete(s, r)]);
-  const a = f.write(o, n, { directory: t }), i = f.write(s, e, { directory: r });
-  await Promise.all([a, i]);
-}, qe = async ({
-  shadowTokens: n,
-  jsonDir: e,
-  stylesDir: t,
-  jsonFileName: r,
-  cssFileName: o
+}, De = (o) => `${`const shadows = {
+${o.map((t) => `    '${t.name}': 'var(${W(t.name)})'`).join(`,
+`)}
+} as const;`}
+
+type ShadowsKeysType = keyof typeof shadows;
+
+export { shadows, type ShadowsKeysType };
+`, Le = async ({
+  tsContent: o,
+  cssContent: e,
+  dir: r
 }) => {
-  const s = Je(n), a = We(s), i = ze(n);
-  await Ke(i, a, e, t, r, o);
-}, J = (n, e) => Object.keys(n).reduce(
-  (t, r) => {
-    const o = n[r], s = e ? `${e}-${r}` : r;
-    if (o && typeof o == "object" && "type" in o && "value" in o) {
-      const i = {
-        [s]: o.value.map(Ie).join(", ")
+  await u.delete(r);
+  const t = u.write(Pe, o, { directory: r }), n = u.write(ve, e, { directory: r });
+  await Promise.all([t, n]);
+}, Re = async ({ shadowTokens: o, dir: e }) => {
+  const r = Be(o), t = Ke(r), n = De(o);
+  await Le({ tsContent: n, cssContent: t, dir: e });
+}, G = (o, e) => Object.keys(o).reduce(
+  (r, t) => {
+    const n = o[t], s = e ? `${e}-${t}` : t;
+    if (n && typeof n == "object" && "type" in n && "value" in n) {
+      const l = {
+        [s]: n.value.map(Ae).join(", ")
       };
-      return { ...t, ...i };
+      return { ...r, ...l };
     }
-    const a = J(o, s);
-    return { ...t, ...a };
+    const a = G(n, s);
+    return { ...r, ...a };
   },
   {}
-), De = (n) => `sh-${n}`, ut = ({
-  input: n = {},
-  output: { jsonDir: e, stylesDir: t, jsonFileName: r = "shadows.json", cssFileName: o = "shadows.css" }
-}) => ({
+), it = ({ input: o = {}, output: { dir: e } }) => ({
   name: "shadows/tokenManager",
-  executor: async ({ tokenManagerClient: s }) => {
+  executor: async ({ tokenManagerClient: r }) => {
     try {
       console.log("[shadows/tokenManager] Generating shadows from TokenManager...");
-      const { includeVariables: a, includeStyles: i = !0 } = n;
-      if (!(a != null && a.length) && !i)
-        throw new Error("Either includeVariables or includeStyles must be enabled");
-      if (!s.isLoaded())
+      const { includeStyles: t = !0 } = o;
+      if (!t)
+        throw new Error("includeStyles must be enabled for shadows generation");
+      if (!r.isLoaded())
         throw new Error("TokenManager is not loaded. Tokens must be loaded before using this module.");
-      const l = [];
-      if (i) {
-        const u = s.getStyles();
-        console.log("[shadows/tokenManager] Processing styles for shadows..."), u.effect && l.push(u.effect);
+      const n = [];
+      if (t) {
+        const a = r.getStyles();
+        console.log("[shadows/tokenManager] Processing styles for shadows..."), a.effect && n.push(a.effect);
       }
-      const c = l.flatMap(
-        (u) => Object.entries(J(u, "")).reduce(
-          (g, [d, p]) => [...g, { name: De(d), value: p }],
+      const s = n.flatMap(
+        (a) => Object.entries(G(a, "")).reduce(
+          (l, [i, c]) => [...l, { name: i, value: c }],
           []
         )
       );
-      if (console.log("shadowTokens=", c), c.length === 0) {
+      if (s.length === 0) {
         console.warn("[shadows/tokenManager] No shadow tokens generated");
         return;
       }
-      console.log(`[shadows/tokenManager] Generated ${c.length} shadow tokens`), console.log(`[shadows/tokenManager] Writing files to ${e} and ${t}...`), await qe({
-        shadowTokens: c,
-        jsonDir: e,
-        stylesDir: t,
-        jsonFileName: r,
-        cssFileName: o
+      console.log(`[shadows/tokenManager] Generated ${s.length} shadow tokens`), console.log(`[shadows/tokenManager] Writing files to ${e}...`), await Re({
+        shadowTokens: s,
+        dir: e
       }), console.log("[shadows/tokenManager] ✅ Successfully generated shadow files");
-    } catch (a) {
-      const i = a instanceof Error ? a.message : String(a);
-      throw console.error("[shadows/tokenManager] ❌ Failed to generate shadows:", i), a instanceof Error && a.stack && console.error("[shadows/tokenManager] Stack trace:", a.stack), a;
+    } catch (t) {
+      const n = t instanceof Error ? t.message : String(t);
+      throw console.error("[shadows/tokenManager] ❌ Failed to generate shadows:", n), t instanceof Error && t.stack && console.error("[shadows/tokenManager] Stack trace:", t.stack), t;
     }
   }
-}), x = (n) => {
-  const e = {};
-  return Object.entries(n).forEach(([t, r]) => {
-    const o = t.replace(/([A-Z])/g, "-$1").toLowerCase();
-    e[o] = r;
-  }), e;
-}, He = (n, e) => {
-  const t = Object.keys(n.breakpoints), r = x(n.base);
+}), ze = "styles.module.css", We = "index.ts", Ge = "typography.ts", N = "sans-serif", I = (o, e) => {
+  if (typeof o != "string") return o;
+  const r = e[o] ?? o;
+  return r.trim().toLowerCase().endsWith(N) ? r : `${r}, ${N}`;
+}, A = (o, e) => typeof o.fontFamily != "string" ? o : {
+  ...o,
+  fontFamily: I(o.fontFamily, e)
+}, B = (o, e) => {
+  const r = {};
+  return Object.entries(o).forEach(([t, n]) => {
+    const s = t === "fontFamily" ? I(n, e) : n, a = t.replace(/([A-Z])/g, "-$1").toLowerCase();
+    r[a] = s;
+  }), r;
+}, Ie = (o, e, r) => {
+  const t = Object.keys(o.breakpoints), n = B(o.base, r);
   return t.reduce(
-    (o, s, a) => {
-      const i = x(n.breakpoints[s]);
-      return a ? [...o, { breakpoint: Number(e[s]), css: i }] : [
+    (s, a, l) => {
+      const i = B(o.breakpoints[a], r);
+      return l ? [...s, { breakpoint: Number(e[a]), css: i }] : [
         {
           breakpoint: null,
           css: {
-            ...r,
+            ...n,
             ...i
           }
         }
@@ -1017,121 +977,141 @@ ${t}
     [
       {
         breakpoint: null,
-        css: r
+        css: n
       }
     ]
   );
-}, N = (n) => Object.keys(n).reduce((e, t) => {
-  const r = n[t], o = Object.keys(r).map((s) => `${s}: ${r[s]}`).join(";");
-  return e + `.${t}Typography { ${o} }`;
-}, ""), Ue = (n, e) => {
-  const t = n.reduce(
-    (s, a) => (He(a.value, e).forEach(({ breakpoint: l, css: c }) => {
-      l ? (s.breakpoints[l] || (s.breakpoints[l] = {}), s.breakpoints[l][a.name] = c) : s.base[a.name] = c;
-    }), s),
+}, K = (o) => Object.keys(o).reduce((e, r) => {
+  const t = o[r], n = Object.keys(t).map((s) => `${s}: ${t[s]}`).join(";");
+  return e + `.typo-${r} { ${n} }`;
+}, ""), Je = (o, e, r) => {
+  const t = o.reduce(
+    (a, l) => (Ie(l.value, e, r).forEach(({ breakpoint: c, css: d }) => {
+      c ? (a.breakpoints[c] || (a.breakpoints[c] = {}), a.breakpoints[c][l.name] = d) : a.base[l.name] = d;
+    }), a),
     { base: {}, breakpoints: {} }
-  ), r = N(t.base), o = Object.keys(t.breakpoints).reduce((s, a) => {
-    const i = t.breakpoints[a];
-    return s + `@media (max-width: ${a}px) { ${N(i)} }`;
+  ), n = K(t.base), s = Object.keys(t.breakpoints).reduce((a, l) => {
+    const i = t.breakpoints[l];
+    return a + `@media (max-width: ${l}px) { ${K(i)} }`;
   }, "");
-  return r + o;
-}, Qe = (n) => {
-  const e = n.reduce((t, r) => ({ ...t, [r.name]: r.value }), {});
-  return JSON.stringify(e);
-}, Xe = async (n, e, t, r, o, s) => {
-  await Promise.all([f.delete(o, t), f.delete(s, r)]);
-  const a = f.write(o, n, { directory: t }), i = f.write(s, e, { directory: r });
-  await Promise.all([a, i]);
-}, Ye = async ({
-  typographyTokens: n,
-  jsonDir: e,
-  stylesDir: t,
-  jsonFileName: r,
-  cssFileName: o,
-  breakpoints: s,
-  isModule: a
+  return n + s;
+}, qe = (o) => o.length ? `import styles from './styles.module.css';
+import { typography } from './typography';
+
+type TypographyKeysType = keyof typeof typography;
+
+const getTypographyClass = (typographyKey: TypographyKeysType) => styles[\`typo-\${typographyKey}\`];
+
+export { typography, getTypographyClass, type TypographyKeysType };
+` : "", He = (o, e) => o.length ? `const typography = {
+${o.map((t) => {
+  const n = A(t.value.base, e), s = Object.entries(t.value.breakpoints).reduce(
+    (a, [l, i]) => ({
+      ...a,
+      [l]: A(i, e)
+    }),
+    {}
+  );
+  return `    '${t.name}': {
+        base: ${JSON.stringify(n, null, 8).replace(/\n/g, `
+        `)},
+        breakpoints: ${JSON.stringify(s, null, 8).replace(/\n/g, `
+        `)}
+    }`;
+}).join(`,
+`)}
+} as const;
+
+export { typography };
+` : "", Ue = async ({
+  indexTSContent: o,
+  typographyTSContent: e,
+  cssContent: r,
+  dir: t
+}) => {
+  await u.delete(t);
+  const n = u.write(We, o, { directory: t }), s = u.write(Ge, e, { directory: t }), a = u.write(ze, r, { directory: t });
+  await Promise.all([n, s, a]);
+}, Qe = async ({
+  typographyTokens: o,
+  dir: e,
+  breakpoints: r,
+  fontFamily: t
 }) => {
-  const i = Ue(n, s), l = Qe(n), c = `${o}${a ? ".module" : ""}.css`, u = `${r}.json`;
-  await Xe(l, i, e, t, u, c);
-}, W = (n, e, t) => Object.keys(n).reduce((r, o) => {
-  const s = n[o];
-  if (typeof s != "object" || Array.isArray(s)) return r;
+  const n = Je(o, r, t), s = He(o, t), a = qe(o);
+  await Ue({ indexTSContent: a, typographyTSContent: s, cssContent: n, dir: e });
+}, J = (o, e, r) => Object.keys(o).reduce((t, n) => {
+  const s = o[n];
+  if (typeof s != "object" || Array.isArray(s)) return t;
   if (!("type" in s) || !("value" in s))
-    return { ...r, [o]: W(s, e, t) };
-  if (s.type !== "typography") return r;
-  const a = s.value, i = Object.entries(a).reduce(
-    (l, [c, u]) => {
-      const g = Object.keys(t.breakpoints);
-      if (g.length)
-        g.forEach((d) => {
-          const p = e.resolveVariableValueString(u, d);
-          p && (p === u ? l.base = { ...l.base, [c]: p } : l.breakpoints[d] = { ...l.breakpoints[d], [c]: p });
+    return { ...t, [n]: J(s, e, r) };
+  if (s.type !== "typography") return t;
+  const a = s.value, l = Object.entries(a).reduce(
+    (i, [c, d]) => {
+      const y = Object.keys(r.breakpoints);
+      if (y.length)
+        y.forEach((p) => {
+          const h = e.resolveVariableValueString(d, p);
+          h && (h === d ? i.base = { ...i.base, [c]: h } : i.breakpoints[p] = { ...i.breakpoints[p], [c]: h });
         });
       else {
-        const d = e.resolveVariableValueString(u);
-        d && (l.base = { ...l.base, [c]: d });
+        const p = e.resolveVariableValueString(d);
+        p && (i.base = { ...i.base, [c]: p });
       }
-      return l;
+      return i;
     },
     { base: {}, breakpoints: {} }
   );
-  return { ...r, [o]: { type: "typography", value: i } };
-}, {}), z = (n, e) => Object.keys(n).reduce((t, r) => {
-  const o = e ? `${e}-${r}` : r, s = n[r];
+  return { ...t, [n]: { type: "typography", value: l } };
+}, {}), q = (o, e) => Object.keys(o).reduce((r, t) => {
+  const n = e ? `${e}-${t}` : t, s = o[t];
   if (!("type" in s) || !("value" in s))
-    return { ...t, ...z(s, o) };
+    return { ...r, ...q(s, n) };
   const a = s.value;
-  return { ...t, [o]: a };
-}, {}), dt = ({
-  input: n,
-  output: { jsonDir: e, stylesDir: t, jsonFileName: r = "typography", cssFileName: o = "typography" }
-}) => ({
+  return { ...r, [n]: a };
+}, {}), lt = ({ input: o, output: { dir: e } }) => ({
   name: "typography/tokenManager",
-  executor: async ({ tokenManagerClient: s }) => {
+  executor: async ({ tokenManagerClient: r }) => {
     try {
       console.log("[typography/tokenManager] Generating typography from TokenManager...");
-      const { breakpoints: a, isModule: i } = n;
-      if (!s.isLoaded())
+      const { breakpoints: t, fontFamily: n } = o;
+      if (!r.isLoaded())
         throw new Error("TokenManager is not loaded. Tokens must be loaded before using this module.");
-      const l = [], c = s.getStyles();
-      console.log("[typography/tokenManager] Processing styles for typography..."), c.text && l.push(c.text);
-      const u = l.reduce(
-        (d, p) => ({
-          ...d,
-          ...W(p, s, { breakpoints: n.breakpoints })
+      const s = [], a = r.getStyles();
+      console.log("[typography/tokenManager] Processing styles for typography..."), a.text && s.push(a.text);
+      const l = s.reduce(
+        (c, d) => ({
+          ...c,
+          ...J(d, r, { breakpoints: o.breakpoints })
         }),
         {}
-      ), g = Object.entries(z(u)).map(
-        ([d, p]) => ({ name: d, value: p })
+      ), i = Object.entries(q(l)).map(
+        ([c, d]) => ({ name: c, value: d })
       );
-      if (g.length === 0) {
+      if (i.length === 0) {
         console.warn("[typography/tokenManager] No typography tokens generated");
         return;
       }
-      console.log(`[typography/tokenManager] Generated ${g.length} typography tokens`), console.log(`[typography/tokenManager] Writing files to ${e} and ${t}...`), await Ye({
-        typographyTokens: g,
-        jsonDir: e,
-        stylesDir: t,
-        jsonFileName: r,
-        cssFileName: o,
-        breakpoints: a,
-        isModule: i
+      console.log(`[typography/tokenManager] Generated ${i.length} typography tokens`), console.log(`[typography/tokenManager] Writing files to ${e}...`), await Qe({
+        typographyTokens: i,
+        dir: e,
+        breakpoints: t,
+        fontFamily: n || {}
       }), console.log("[typography/tokenManager] ✅ Successfully generated typography files");
-    } catch (a) {
-      const i = a instanceof Error ? a.message : String(a);
-      throw console.error("[typography/tokenManager] ❌ Failed to generate typography:", i), a instanceof Error && a.stack && console.error("[typography/tokenManager] Stack trace:", a.stack), a;
+    } catch (t) {
+      const n = t instanceof Error ? t.message : String(t);
+      throw console.error("[typography/tokenManager] ❌ Failed to generate typography:", n), t instanceof Error && t.stack && console.error("[typography/tokenManager] Stack trace:", t.stack), t;
     }
   }
 });
 export {
-  L as BREAKPOINTS_NAMES,
-  ee as TokenManager,
-  at as breakpointsFromTokenManager,
-  it as breakpointsListFromTokenManager,
-  lt as colorsFromTokenManager,
-  ct as containerFromTokenManager,
-  ot as generate,
-  st as init,
-  ut as shadowsFromTokenManager,
-  dt as typographyFromTokenManager
+  ne as BREAKPOINTS_NAMES,
+  oe as TokenManager,
+  nt as breakpointsFromTokenManager,
+  st as colorsFromTokenManager,
+  at as containerFromTokenManager,
+  rt as generate,
+  ot as init,
+  it as shadowsFromTokenManager,
+  lt as typographyFromTokenManager
 };