@salty-css/react 0.0.1-alpha.2 → 0.0.1-alpha.200

package/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("./keyframes.cjs"),n=require("./media.cjs"),a=r=>`{${r}}`,o=(...r)=>r.flat().reduce((t,e)=>e!=null&&e._current?{...t,...e._current}:{...t,...e},{});exports.keyframes=u.keyframes;exports.MediaQueryFactory=n.MediaQueryFactory;exports.media=n.media;exports.mergeStyles=o;exports.token=a;

package/index.d.ts

@@ -0,0 +1 @@
+export * from '@salty-css/core/css';

package/index.js

@@ -0,0 +1,10 @@
+import { keyframes as m } from "./keyframes.js";
+import { MediaQueryFactory as c, media as d } from "./media.js";
+const n = (e) => `{${e}}`, t = (...e) => e.flat().reduce((o, r) => r != null && r._current ? { ...o, ...r._current } : { ...o, ...r }, {});
+export {
+  c as MediaQueryFactory,
+  m as keyframes,
+  d as media,
+  t as mergeStyles,
+  n as token
+};

package/keyframes.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("./parse-styles-hwxJnxKJ.cjs"),j=({animationName:m,params:l,appendInitialStyles:f,...t})=>{const r=m||u.toHash(t),o=(n={})=>{const{duration:e="500ms",easing:s="ease-in-out",delay:a="0s",iterationCount:i="1",direction:d="normal",fillMode:g="forwards",playState:p="running"}={...l,...n},c=`${r} ${e} ${s} ${a} ${i} ${d} ${g} ${p}`;if(!f)return c;const $=t.from||t["0%"];if(!$)return c;const b=u.parseStyles($,"");return`${c};${b}`},y=Object.entries(t).reduce((n,[e,s])=>{if(!s)return n;const a=u.parseStyles(s,""),i=typeof e=="number"?`${e}%`:e;return`${n}${i}{${a}}`},""),S=`@keyframes ${r} {${y}}`;return Object.assign(o,{toString:o,isKeyframes:!0,animationName:r,css:S,keyframes:t}),o};exports.keyframes=j;

package/keyframes.d.ts

@@ -0,0 +1 @@
+export * from '@salty-css/core/css/keyframes';

package/keyframes.js

@@ -0,0 +1,33 @@
+import { t as j, p as m } from "./parse-styles-p4rBqcpk.js";
+const N = ({ animationName: u, params: f, appendInitialStyles: l, ...t }) => {
+  const e = u || j(t), o = (s = {}) => {
+    const {
+      duration: n = "500ms",
+      easing: r = "ease-in-out",
+      delay: a = "0s",
+      iterationCount: i = "1",
+      direction: y = "normal",
+      fillMode: g = "forwards",
+      playState: S = "running"
+    } = { ...f, ...s }, $ = `${e} ${n} ${r} ${a} ${i} ${y} ${g} ${S}`;
+    if (!l) return $;
+    const c = t.from || t["0%"];
+    if (!c) return $;
+    const b = m(c, "");
+    return `${$};${b}`;
+  }, p = Object.entries(t).reduce((s, [n, r]) => {
+    if (!r) return s;
+    const a = m(r, ""), i = typeof n == "number" ? `${n}%` : n;
+    return `${s}${i}{${a}}`;
+  }, ""), d = `@keyframes ${e} {${p}}`;
+  return Object.assign(o, {
+    toString: o,
+    isKeyframes: !0,
+    animationName: e,
+    css: d,
+    keyframes: t
+  }), o;
+};
+export {
+  N as keyframes
+};

package/media.cjs

@@ -0,0 +1 @@
+"use strict";var a=Object.defineProperty;var o=(s,e,t)=>e in s?a(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t;var i=(s,e,t)=>o(s,typeof e!="symbol"?e+"":e,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class r{constructor(e="@media"){i(this,"next",e=>{const t=new String(e);return Object.assign(t,{get isMedia(){return!0},get and(){return new r(`${e} and`)},get or(){return new r(`${e},`)}}),t});this.base=e}custom(e){return this.next(`${this.base} ${e}`)}minWidth(e){const t=typeof e=="number"?`${e}px`:e,n=`${this.base} (min-width: ${t})`;return this.next(n)}maxWidth(e){const t=typeof e=="number"?`${e}px`:e,n=`${this.base} (max-width: ${t})`;return this.next(n)}minHeight(e){const t=typeof e=="number"?`${e}px`:e,n=`${this.base} (min-height: ${t})`;return this.next(n)}maxHeight(e){const t=typeof e=="number"?`${e}px`:e,n=`${this.base} (max-height: ${t})`;return this.next(n)}get portrait(){const e=`${this.base} (orientation: portrait)`;return this.next(e)}get landscape(){const e=`${this.base} (orientation: landscape)`;return this.next(e)}prefersColorScheme(e){const t=`${this.base} (prefers-color-scheme: ${e})`;return this.next(t)}get dark(){return this.prefersColorScheme("dark")}get light(){return this.prefersColorScheme("light")}get print(){const e=`${this.base} print`;return this.next(e)}get screen(){const e=`${this.base} screen`;return this.next(e)}get speech(){const e=`${this.base} speech`;return this.next(e)}get all(){const e=`${this.base} all`;return this.next(e)}get not(){const e=`${this.base} not`;return this.next(e)}get reducedMotion(){const e=`${this.base} (prefers-reduced-motion: reduce)`;return this.next(e)}}const u=new r;exports.MediaQueryFactory=r;exports.media=u;

package/media.d.ts

@@ -0,0 +1 @@
+export * from '@salty-css/core/css/media';

package/media.js

@@ -0,0 +1,88 @@
+var a = Object.defineProperty;
+var o = (s, t, e) => t in s ? a(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
+var i = (s, t, e) => o(s, typeof t != "symbol" ? t + "" : t, e);
+class r {
+  constructor(t = "@media") {
+    i(this, "next", (t) => {
+      const e = new String(t);
+      return Object.assign(e, {
+        get isMedia() {
+          return !0;
+        },
+        get and() {
+          return new r(`${t} and`);
+        },
+        get or() {
+          return new r(`${t},`);
+        }
+      }), e;
+    });
+    this.base = t;
+  }
+  custom(t) {
+    return this.next(`${this.base} ${t}`);
+  }
+  minWidth(t) {
+    const e = typeof t == "number" ? `${t}px` : t, n = `${this.base} (min-width: ${e})`;
+    return this.next(n);
+  }
+  maxWidth(t) {
+    const e = typeof t == "number" ? `${t}px` : t, n = `${this.base} (max-width: ${e})`;
+    return this.next(n);
+  }
+  minHeight(t) {
+    const e = typeof t == "number" ? `${t}px` : t, n = `${this.base} (min-height: ${e})`;
+    return this.next(n);
+  }
+  maxHeight(t) {
+    const e = typeof t == "number" ? `${t}px` : t, n = `${this.base} (max-height: ${e})`;
+    return this.next(n);
+  }
+  get portrait() {
+    const t = `${this.base} (orientation: portrait)`;
+    return this.next(t);
+  }
+  get landscape() {
+    const t = `${this.base} (orientation: landscape)`;
+    return this.next(t);
+  }
+  prefersColorScheme(t) {
+    const e = `${this.base} (prefers-color-scheme: ${t})`;
+    return this.next(e);
+  }
+  get dark() {
+    return this.prefersColorScheme("dark");
+  }
+  get light() {
+    return this.prefersColorScheme("light");
+  }
+  get print() {
+    const t = `${this.base} print`;
+    return this.next(t);
+  }
+  get screen() {
+    const t = `${this.base} screen`;
+    return this.next(t);
+  }
+  get speech() {
+    const t = `${this.base} speech`;
+    return this.next(t);
+  }
+  get all() {
+    const t = `${this.base} all`;
+    return this.next(t);
+  }
+  get not() {
+    const t = `${this.base} not`;
+    return this.next(t);
+  }
+  get reducedMotion() {
+    const t = `${this.base} (prefers-reduced-motion: reduce)`;
+    return this.next(t);
+  }
+}
+const u = new r();
+export {
+  r as MediaQueryFactory,
+  u as media
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salty-css/react",
-  "version": "0.0.1-alpha.2",
+  "version": "0.0.1-alpha.200",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "typings": "./dist/index.d.ts",
@@ -10,18 +10,28 @@
   "publishConfig": {
     "access": "public"
   },
-  "homepage": "https://github.com/margarita-form/salty-css",
+  "description": "React library for Salty CSS",
+  "homepage": "https://salty-css.dev/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/margarita-form/salty-css.git"
+  },
   "bugs": {
     "url": "https://github.com/margarita-form/salty-css/issues"
   },
   "files": [
-    "dist",
+    "**/*",
     "!**/*.tsbuildinfo"
   ],
   "nx": {
+    "sourceRoot": "libs/react/src",
     "name": "react"
   },
   "exports": {
+    ".": {
+      "import": "./index.js",
+      "require": "./index.cjs"
+    },
     "./styled": {
       "import": "./styled.js",
       "require": "./styled.cjs"
@@ -30,6 +40,10 @@
       "import": "./styled-client.js",
       "require": "./styled-client.cjs"
     },
+    "./class-name": {
+      "import": "./class-name.js",
+      "require": "./class-name.cjs"
+    },
     "./keyframes": {
       "import": "./keyframes.js",
       "require": "./keyframes.cjs"
@@ -37,6 +51,19 @@
     "./media": {
       "import": "./media.js",
       "require": "./media.cjs"
+    },
+    "./config": {
+      "import": "./config.js",
+      "require": "./config.cjs"
+    },
+    "./helpers": {
+      "import": "./helpers.js",
+      "require": "./helpers.cjs"
     }
+  },
+  "dependencies": {
+    "@salty-css/core": "^0.0.1-alpha.200",
+    "clsx": ">=2.x",
+    "react": ">=19.x || >=18.3.x"
   }
 }

package/parse-styles-hwxJnxKJ.cjs

@@ -0,0 +1,7 @@
+"use strict";const y=require("./parse-tokens-p68muVgG.cjs"),z=(r,s)=>{if(typeof r!="string")return{result:r};if(!s)return{result:r};const t=[];return Object.values(s).forEach(n=>{const{pattern:p,transform:j}=n;r=r.replace(p,o=>{const{value:$,css:e}=j(o);return e&&t.push(e),$})}),{result:r,additionalCss:t}},E=r=>String.fromCharCode(r+(r>25?39:97)),A=(r,s)=>{let t="",n;for(n=Math.abs(r);n>52;n=n/52|0)t=E(n%52)+t;return t=E(n%52)+t,t.length<s?t=t.padStart(s,"a"):t.length>s&&(t=t.slice(-s)),t},C=(r,s)=>{let t=s.length;for(;t;)r=r*33^s.charCodeAt(--t);return r},H=(r,s=5)=>{const t=C(5381,JSON.stringify(r))>>>0;return A(t,s)},M=["top","right","bottom","left","min-width",/.*width.*/,/^[^line]*height.*/,/padding.*/,/margin.*/,/border.*/,/inset.*/,/.*radius.*/,/.*spacing.*/,/.*gap.*/,/.*indent.*/,/.*offset.*/,/.*size.*/,/.*thickness.*/,/.*font-size.*/],T=(r,s,t)=>{if(M.some(p=>typeof p=="string"?p===r:p.test(r))){const p=(t==null?void 0:t.defaultUnit)||"px";return`${s}${p}`}return`${s}`},U=["Webkit","Moz","ms","O"],q=r=>r.startsWith("-")?r:U.some(s=>r.startsWith(s))?`-${y.dashCase(r)}`:y.dashCase(r),c=(r,s,t)=>{if(!r)return"";const n=[],p=Object.entries(r).reduce((o,[$,e])=>{var P;const i=$.trim(),w=q(i),O=(h,f=";")=>o=`${o}${h}${f}`,b=h=>O(`${w}:${h}`);if(typeof e=="function"&&(e=e()),typeof e=="object"){if(!e)return o;if(e.isColor)return b(e.toString()),o;if(i==="variants")return Object.entries(e).forEach(([u,a])=>{a&&Object.entries(a).forEach(([d,m])=>{if(!m)return;const l=`${s}.${u}-${d}`,S=c(m,l,t);n.push(S)})}),o;if(i==="defaultVariants")return o;if(i==="compoundVariants")return e.forEach(u=>{const{css:a,...d}=u,m=Object.entries(d).reduce((S,[N,x])=>`${S}.${N}-${x}`,s),l=c(a,m,t);n.push(l)}),o;if(i.startsWith("@")){const u=((P=t==null?void 0:t.mediaQueries)==null?void 0:P[i])||i,a=c(e,s,t),d=`${u} {
+ ${a.replace(`
+`,`
+ `)}
+}`;return n.push(d),o}const h=$.includes("&")?i.replace("&",s):i.startsWith(":")?`${s}${i}`:`${s} ${i}`,f=c(e,h,t);return n.push(f),o}if(t!=null&&t.templates&&t.templates[i]){const f=e.split(".").reduce((u,a)=>u[a],t.templates[i]);if(f){const u=c(f,"");return`${o}${u}`}return console.warn(`Template "${i}" with path of "${e}" was not found in config!`),o}if(typeof e=="number"){const h=T(w,e,t);return b(h)}if(typeof e!="string")if("toString"in e)e=e.toString();else return o;const{modifiers:V}=t||{},W=function*(){yield y.parseValueTokens(e),yield z(e,V)}();for(const{result:h,additionalCss:f=[]}of W)e=h,f.forEach(u=>{const a=c(u,"");O(a,"")});return b(e)},"");return p?s?[`${s} { ${p} }`,...n].join(`
+`):p:n.join(`
+`)};exports.parseStyles=c;exports.toHash=H;

package/parse-styles-p4rBqcpk.js

@@ -0,0 +1,118 @@
+import { d as P, p as z } from "./parse-tokens-YUi047xd.js";
+const A = (r, s) => {
+  if (typeof r != "string") return { result: r };
+  if (!s) return { result: r };
+  const t = [];
+  return Object.values(s).forEach((n) => {
+    const { pattern: p, transform: j } = n;
+    r = r.replace(p, (o) => {
+      const { value: $, css: e } = j(o);
+      return e && t.push(e), $;
+    });
+  }), { result: r, additionalCss: t };
+}, E = (r) => String.fromCharCode(r + (r > 25 ? 39 : 97)), M = (r, s) => {
+  let t = "", n;
+  for (n = Math.abs(r); n > 52; n = n / 52 | 0) t = E(n % 52) + t;
+  return t = E(n % 52) + t, t.length < s ? t = t.padStart(s, "a") : t.length > s && (t = t.slice(-s)), t;
+}, U = (r, s) => {
+  let t = s.length;
+  for (; t; ) r = r * 33 ^ s.charCodeAt(--t);
+  return r;
+}, _ = (r, s = 5) => {
+  const t = U(5381, JSON.stringify(r)) >>> 0;
+  return M(t, s);
+}, C = [
+  "top",
+  "right",
+  "bottom",
+  "left",
+  "min-width",
+  /.*width.*/,
+  /^[^line]*height.*/,
+  // Exclude line-height
+  /padding.*/,
+  /margin.*/,
+  /border.*/,
+  /inset.*/,
+  /.*radius.*/,
+  /.*spacing.*/,
+  /.*gap.*/,
+  /.*indent.*/,
+  /.*offset.*/,
+  /.*size.*/,
+  /.*thickness.*/,
+  /.*font-size.*/
+], H = (r, s, t) => {
+  if (C.some((p) => typeof p == "string" ? p === r : p.test(r))) {
+    const p = (t == null ? void 0 : t.defaultUnit) || "px";
+    return `${s}${p}`;
+  }
+  return `${s}`;
+}, Q = ["Webkit", "Moz", "ms", "O"], T = (r) => r.startsWith("-") ? r : Q.some((s) => r.startsWith(s)) ? `-${P(r)}` : P(r), d = (r, s, t) => {
+  if (!r) return "";
+  const n = [], p = Object.entries(r).reduce((o, [$, e]) => {
+    var O;
+    const i = $.trim(), y = T(i), w = (f, a = ";") => o = `${o}${f}${a}`, b = (f) => w(`${y}:${f}`);
+    if (typeof e == "function" && (e = e()), typeof e == "object") {
+      if (!e) return o;
+      if (e.isColor)
+        return b(e.toString()), o;
+      if (i === "variants")
+        return Object.entries(e).forEach(([u, h]) => {
+          h && Object.entries(h).forEach(([c, m]) => {
+            if (!m) return;
+            const l = `${s}.${u}-${c}`, S = d(m, l, t);
+            n.push(S);
+          });
+        }), o;
+      if (i === "defaultVariants")
+        return o;
+      if (i === "compoundVariants")
+        return e.forEach((u) => {
+          const { css: h, ...c } = u, m = Object.entries(c).reduce((S, [x, N]) => `${S}.${x}-${N}`, s), l = d(h, m, t);
+          n.push(l);
+        }), o;
+      if (i.startsWith("@")) {
+        const u = ((O = t == null ? void 0 : t.mediaQueries) == null ? void 0 : O[i]) || i, h = d(e, s, t), c = `${u} {
+ ${h.replace(`
+`, `
+ `)}
+}`;
+        return n.push(c), o;
+      }
+      const f = $.includes("&") ? i.replace("&", s) : i.startsWith(":") ? `${s}${i}` : `${s} ${i}`, a = d(e, f, t);
+      return n.push(a), o;
+    }
+    if (t != null && t.templates && t.templates[i]) {
+      const a = e.split(".").reduce((u, h) => u[h], t.templates[i]);
+      if (a) {
+        const u = d(a, "");
+        return `${o}${u}`;
+      }
+      return console.warn(`Template "${i}" with path of "${e}" was not found in config!`), o;
+    }
+    if (typeof e == "number") {
+      const f = H(y, e, t);
+      return b(f);
+    }
+    if (typeof e != "string")
+      if ("toString" in e) e = e.toString();
+      else return o;
+    const { modifiers: V } = t || {}, W = function* () {
+      yield z(e), yield A(e, V);
+    }();
+    for (const { result: f, additionalCss: a = [] } of W)
+      e = f, a.forEach((u) => {
+        const h = d(u, "");
+        w(h, "");
+      });
+    return b(e);
+  }, "");
+  return p ? s ? [`${s} { ${p} }`, ...n].join(`
+`) : p : n.join(`
+`);
+};
+export {
+  d as p,
+  _ as t
+};

package/parse-tokens-YUi047xd.js

@@ -0,0 +1,8 @@
+function n(e) {
+  return e ? typeof e != "string" ? n(String(e)) : e.replace(/[\s.]/g, "-").replace(/[A-Z](?:(?=[^A-Z])|[A-Z]*(?=[A-Z][^A-Z]|$))/g, (r, t) => (t > 0 ? "-" : "") + r.toLowerCase()) : "";
+}
+const o = (e) => typeof e != "string" ? { result: e } : /\{[^{}]+\}/g.test(e) ? { result: e.replace(/\{([^{}]+)\}/g, (...s) => `var(--${n(s[1].replaceAll(".", "-"))})`) } : { result: e };
+export {
+  n as d,
+  o as p
+};

package/parse-tokens-p68muVgG.cjs

@@ -0,0 +1 @@
+"use strict";function r(e){return e?typeof e!="string"?r(String(e)):e.replace(/[\s.]/g,"-").replace(/[A-Z](?:(?=[^A-Z])|[A-Z]*(?=[A-Z][^A-Z]|$))/g,(t,s)=>(s>0?"-":"")+t.toLowerCase()):""}const a=e=>typeof e!="string"?{result:e}:/\{[^{}]+\}/g.test(e)?{result:e.replace(/\{([^{}]+)\}/g,(...n)=>`var(--${r(n[1].replaceAll(".","-"))})`)}:{result:e};exports.dashCase=r;exports.parseValueTokens=a;

package/styled-client.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("./element-factory-D4kpeFoW.cjs"),n=(e,t,r)=>l.elementFactory(e,t,r);exports.styledClient=n;

package/styled-client.d.ts

@@ -0,0 +1,3 @@
+import { StyledGeneratorClientProps } from '@salty-css/core/generators';
+import { Tag } from '@salty-css/core/types';
+export declare const styledClient: (tagName: Tag<any>, className: string, generatorProps: StyledGeneratorClientProps) => import('react').ForwardRefExoticComponent<Omit<import('@salty-css/core/types').StyledComponentProps, "ref"> & import('react').RefAttributes<any>>;

package/styled-client.js

@@ -0,0 +1,5 @@
+import { e as o } from "./element-factory-C7JVLDq7.js";
+const l = (e, t, r) => o(e, t, r);
+export {
+  l as styledClient
+};

package/styled.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("./styles-generator-DAkA4JnC.cjs"),g=require("./element-factory-D4kpeFoW.cjs");class h extends m.StylesGenerator{constructor(e,t){super(t),this.tagName=e,this._params=t}get priority(){var e;return typeof this.tagName=="function"||typeof this.tagName=="object"?(((e=this.tagName.generator)==null?void 0:e.priority)||0)+1:0}get clientProps(){const{element:e,variants:t={},compoundVariants:a=[],defaultVariants:d={},defaultProps:l={},passProps:u}=this.params,{callerName:y,isProduction:f}=this.buildContext,o=new Set([]),i=s=>{const r=d[s];r!==void 0?o.add(`${s}=${String(r)}`):o.add(s)};Object.keys(t).forEach(i),a.map(s=>Object.keys(s).forEach(i));const c=new Set([]);if(this.params.base){const s=JSON.stringify(this.params.base).match(/\{props\.([\w\d]+)\}/gi);s&&s.forEach(r=>{const p=r.replace(/\{props\.([\w\d]+)\}/gi,"$1");p&&c.add(p)})}return{element:e,variantKeys:[...o],propValueKeys:[...c],passProps:u,defaultProps:l,attr:{"data-component-name":f?void 0:y}}}}const b=(n,e)=>{const t=new h(n,e),a=g.elementFactory(n,t.cssClassName,t.clientProps,{"data-unoptimized-client-component":!0});return Object.assign(a,{generator:t}),a};exports.styled=b;

package/styled.d.ts

@@ -0,0 +1,5 @@
+import { AllHTMLAttributes, JSX, ReactNode } from 'react';
+import { Tag, StyledComponentProps, CreateElementProps, VariantProps, ParentComponentProps, StyledParams, ValueProps, Merge } from '@salty-css/core/types';
+export declare const styled: <const PROPS extends StyledComponentProps, const TAG extends Tag<Required<PROPS>>, const STYLE_PARAMS extends StyledParams>(tagName: TAG, params: STYLE_PARAMS) => ((props: CreateElementProps & (TAG extends string ? {
+    ref?: any;
+} : object) & Merge<ParentComponentProps<TAG> | VariantProps<STYLE_PARAMS>> & ValueProps & Omit<TAG extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[TAG] : TAG extends string ? AllHTMLAttributes<HTMLElement> : object, keyof CreateElementProps>) => ReactNode) & string;

package/styled.js

@@ -0,0 +1,47 @@
+import { S as y } from "./styles-generator-Bae0y6su.js";
+import { e as h } from "./element-factory-C7JVLDq7.js";
+class g extends y {
+  constructor(e, t) {
+    super(t), this.tagName = e, this._params = t;
+  }
+  get priority() {
+    var e;
+    return typeof this.tagName == "function" || typeof this.tagName == "object" ? (((e = this.tagName.generator) == null ? void 0 : e.priority) || 0) + 1 : 0;
+  }
+  get clientProps() {
+    const { element: e, variants: t = {}, compoundVariants: s = [], defaultVariants: d = {}, defaultProps: l = {}, passProps: f } = this.params, { callerName: m, isProduction: u } = this.buildContext, o = /* @__PURE__ */ new Set([]), i = (a) => {
+      const r = d[a];
+      r !== void 0 ? o.add(`${a}=${String(r)}`) : o.add(a);
+    };
+    Object.keys(t).forEach(i), s.map((a) => Object.keys(a).forEach(i));
+    const c = /* @__PURE__ */ new Set([]);
+    if (this.params.base) {
+      const a = JSON.stringify(this.params.base).match(/\{props\.([\w\d]+)\}/gi);
+      a && a.forEach((r) => {
+        const p = r.replace(/\{props\.([\w\d]+)\}/gi, "$1");
+        p && c.add(p);
+      });
+    }
+    return {
+      element: e,
+      variantKeys: [...o],
+      propValueKeys: [...c],
+      passProps: f,
+      defaultProps: l,
+      attr: {
+        "data-component-name": u ? void 0 : m
+      }
+    };
+  }
+}
+const v = (n, e) => {
+  const t = new g(n, e), s = h(n, t.cssClassName, t.clientProps, {
+    "data-unoptimized-client-component": !0
+  });
+  return Object.assign(s, {
+    generator: t
+  }), s;
+};
+export {
+  v as styled
+};

package/styles-generator-Bae0y6su.js

@@ -0,0 +1,35 @@
+var o = Object.defineProperty;
+var n = (a, s, t) => s in a ? o(a, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[s] = t;
+var e = (a, s, t) => n(a, typeof s != "symbol" ? s + "" : s, t);
+import { t as c, p as l } from "./parse-styles-p4rBqcpk.js";
+import { d as m } from "./parse-tokens-YUi047xd.js";
+class f {
+  constructor(s) {
+    e(this, "buildContext", {});
+    this.params = s;
+  }
+  get hash() {
+    return c(this.params.base || this.params);
+  }
+  get cssClassName() {
+    return this.hash;
+  }
+  get classNames() {
+    const s = [this.hash], { className: t } = this.params;
+    return typeof t == "string" && s.push(t), typeof t == "object" && s.push(...t), s.join(" ");
+  }
+  get cssFileName() {
+    const { callerName: s } = this.buildContext;
+    return s ? `cl_${m(s)}-${this.hash}.css` : `${this.hash}.css`;
+  }
+  get css() {
+    const { base: s = {}, variants: t = {}, compoundVariants: r = [] } = this.params, { config: i } = this.buildContext, h = { ...s, variants: t, compoundVariants: r };
+    return l(h, `.${this.cssClassName}`, i);
+  }
+  _withBuildContext(s) {
+    return this.buildContext = s, this;
+  }
+}
+export {
+  f as S
+};

package/styles-generator-DAkA4JnC.cjs

@@ -0,0 +1 @@
+"use strict";var h=Object.defineProperty;var o=(e,s,t)=>s in e?h(e,s,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[s]=t;var a=(e,s,t)=>o(e,typeof s!="symbol"?s+"":s,t);const r=require("./parse-styles-hwxJnxKJ.cjs"),l=require("./parse-tokens-p68muVgG.cjs");class u{constructor(s){a(this,"buildContext",{});this.params=s}get hash(){return r.toHash(this.params.base||this.params)}get cssClassName(){return this.hash}get classNames(){const s=[this.hash],{className:t}=this.params;return typeof t=="string"&&s.push(t),typeof t=="object"&&s.push(...t),s.join(" ")}get cssFileName(){const{callerName:s}=this.buildContext;return s?`cl_${l.dashCase(s)}-${this.hash}.css`:`${this.hash}.css`}get css(){const{base:s={},variants:t={},compoundVariants:i=[]}=this.params,{config:n}=this.buildContext,c={...s,variants:t,compoundVariants:i};return r.parseStyles(c,`.${this.cssClassName}`,n)}_withBuildContext(s){return this.buildContext=s,this}}exports.StylesGenerator=u;