welcome-ui 1.0.0-beta.1 → 1.0.0-beta.2

package/dist/box.js

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),o=require("@xstyled/styled-components"),c=require("./system.js"),n=c.forwardRef((e,t)=>r.createElement(o.x.div,{ref:t,...e}));exports.Box=n;

package/dist/box.mjs

@@ -0,0 +1,8 @@
+"use client";
+import o from "react";
+import { x as t } from "@xstyled/styled-components";
+import { forwardRef as m } from "./system.mjs";
+const n = m((r, e) => /* @__PURE__ */ o.createElement(t.div, { ref: e, ...r }));
+export {
+  n as Box
+};

package/dist/index.js

@@ -1,4 +1,4 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("@xstyled/styled-components"),b=require("./Test.js"),p=require("./WuiProvider.js"),f=e=>{const{colors:t}=e;return{default:{backgroundColor:t["primary-50"]}}};function m(e,t){if(typeof e!="object"||e===null)return t;if(typeof t!="object"||t===null)return e;const o={...e};for(const l in t)t.hasOwnProperty(l)&&(o[l]=m(o[l],t[l]));return o}const x={"beige-10":"#FBF9F7","beige-20":"#F6F3EF","beige-30":"#EAE4DE","beige-40":"#D2CBC3","beige-50":"#A7A096","beige-60":"#605B55","beige-70":"#4D4944","beige-80":"#33302D","beige-90":"#1E1C1A","blue-10":"#E0F5FF","blue-20":"#BBEAFF","blue-30":"#9BDEF7","blue-40":"#55C3E9","blue-50":"#27A5D0","blue-60":"#057AA3","blue-70":"#025A79","blue-80":"#013C50","blue-90":"#00202B","green-10":"#EAFFD4","green-20":"#D6F6B4","green-30":"#BADE94","green-40":"#9FC873","green-50":"#83AD57","green-60":"#5A8034","green-70":"#40611F","green-80":"#2A4210","green-90":"#142603","neutral-10":"#FFFFFF","neutral-20":"#F3F3F3","neutral-30":"#DEDEDE","neutral-40":"#BDBDBD","neutral-50":"#989898","neutral-60":"#585858","neutral-70":"#444444","neutral-80":"#212121","neutral-90":"#000000","orange-10":"#FFEBCE","orange-20":"#FFD495","orange-30":"#FFBB59","orange-40":"#FF9F14","orange-50":"#DB860A","orange-60":"#A6670A","orange-70":"#824F06","orange-80":"#573607","orange-90":"#382303","pink-10":"#FFEAF5","pink-20":"#FFD5EB","pink-30":"#FEB7DC","pink-40":"#F696C8","pink-50":"#E468A8","pink-60":"#C24887","pink-70":"#972962","pink-80":"#6D1142","pink-90":"#3C0725","red-10":"#FBDEDC","red-20":"#FCC7C3","red-30":"#FDB3AE","red-40":"#FF9490","red-50":"#FF6165","red-60":"#E1003A","red-70":"#A80029","red-80":"#75001A","red-90":"#450101","red-orange-10":"#FFDED0","red-orange-20":"#FFC9B2","red-orange-30":"#FFB595","red-orange-40":"#FF9868","red-orange-50":"#E67B49","red-orange-60":"#C45927","red-orange-70":"#9F4217","red-orange-80":"#6D2605","red-orange-90":"#451701","teal-10":"#D5FFFA","teal-20":"#AAF4EB","teal-30":"#6DE1D2","teal-40":"#00C7AE","teal-50":"#01AA95","teal-60":"#008070","teal-70":"#00544A","teal-80":"#003D35","teal-90":"#00211D","violet-10":"#F2F2FF","violet-20":"#E0E0FF","violet-30":"#C9C9FF","violet-40":"#ACACFF","violet-50":"#9080F0","violet-60":"#7958D6","violet-70":"#593CAC","violet-80":"#422A86","violet-90":"#1F0E51","yellow-10":"#FFF8D9","yellow-20":"#FFF1B2","yellow-30":"#FFE166","yellow-40":"#FFCD00","yellow-50":"#E5B800","yellow-60":"#B69200","yellow-70":"#846A01","yellow-80":"#604D00","yellow-90":"#423500"},h=e=>({...e,"primary-10":e["yellow-10"],"primary-20":e["yellow-20"],"primary-30":e["yellow-30"],"primary-40":e["yellow-40"],"primary-50":e["yellow-50"],"primary-60":e["yellow-60"],"primary-70":e["yellow-70"],"primary-80":e["yellow-80"],"primary-90":e["yellow-90"],"secondary-blue":e["blue-40"],"secondary-green":e["green-30"],"secondary-orange":e["red-orange-40"],"secondary-pink":e["pink-40"],"secondary-teal":e["teal-40"],"secondary-violet":e["violet-40"],overlay:"rgba(0, 0, 0, 0.55)"}),g=h(x),w=Object.keys(g).reduce((e,t)=>{if(t.startsWith("secondary-")||t==="overlay")return e;const o=100-Number(t.slice(-2)),l=t.slice(0,t.length-2);return{...e,[t]:g[`${l}${o}`]}},{}),A={...g,...h(w)},E={colors:A},y=e=>({"welcome-font":[{url:`${e.fontsUrl}/welcome-font-regular`,weight:"400"},{url:`${e.fontsUrl}/welcome-font-medium`,weight:"500"},{url:`${e.fontsUrl}/welcome-font-bold`,weight:"600"},{url:`${e.fontsUrl}/welcome-font-regular-italic`,style:"italic",weight:"400"},{url:`${e.fontsUrl}/welcome-font-medium-italic`,style:"italic",weight:"500"},{url:`${e.fontsUrl}/welcome-font-bold-italic`,style:"italic",weight:"600"}],"welcome-icon-font":[{url:`${e.fontsUrl}/icon-font/__ICON_FONT_HASH__/welcome-icon-font`,display:"block"}],"work-sans":[{url:`${e.fontsUrl}/work-sans-variable`,isVariable:!0,stretch:"75% 125%",weight:"100 1000"}]}),D=(e,t)=>{const{toEm:o,toRem:l}=t,n=l;return{h0:n(65),h1:n(45),h2:n(36),h3:n(26),h4:n(20),h5:n(16),h6:n(14),lg:n(18),md:n(16),sm:n(14),"subtitle-md":n(13),"subtitle-sm":n(11),xs:n(12)}},T=({defaultLineHeight:e,toRem:t})=>({html:e,h0:t(72),h1:t(48),h2:t(40),h3:t(32),h4:t(24),h5:t(18),h6:t(16),lg:t(24),md:t(18),sm:t(18),xs:t(14),"subtitle-md":e,"subtitle-sm":e}),B={regular:400,medium:500,bold:600},v=({defaultLetterSpacing:e,toRem:t})=>({html:e,h0:t(-1.7),h1:t(-1.2),h2:t(-1),h3:t(-.9),h4:t(-.6),h5:t(-.5),h6:t(-.5),lg:e,md:e,sm:e,xs:t(-.2),"subtitle-md":t(-.2),"subtitle-sm":t(-.2)}),k=e=>{const{fontWeights:t}=e;return{h0:t.bold,h1:t.bold,h2:t.bold,h3:t.bold,h4:t.bold,h5:t.bold,h6:t.bold,lg:t.regular,md:t.regular,sm:t.regular,"subtitle-md":t.bold,"subtitle-sm":t.medium,xs:t.regular}},C=e=>{const{fonts:t}=e;return{h0:t.headings,h1:t.headings,h2:t.headings,h3:t.headings,h4:t.headings,h5:t.headings,h6:t.headings,"subtitle-md":t.headings,"subtitle-sm":t.headings}},_=()=>({"subtitle-md":"uppercase","subtitle-sm":"uppercase"}),$=e=>{const{colors:t}=e;return{h0:t["neutral-90"],h1:t["neutral-90"],h2:t["neutral-90"],h3:t["neutral-90"],h4:t["neutral-90"],h5:t["neutral-90"],h6:t["neutral-90"]}},S=e=>{const{fontSizes:t,letterSpacings:o,lineHeights:l,textsFontColors:n,textsFontFamily:u,textsFontWeights:F,textsTextTransform:d}=e;return Object.keys(t).reduce((s,r)=>({...s,[r]:{color:n[r],fontFamily:u[r]||void 0,fontWeight:F[r],fontSize:t[r],lineHeight:l[r]||l.lg,letterSpacing:o[r]||void 0,textTransform:d[r]||void 0}}),{})},U=(e,t,o)=>({texts:[e,"sans-serif"].join(", "),headings:[t,"sans-serif"].join(", "),icons:o}),a={primary:"ease",secondary:"linear",tertiary:"cubic-bezier(0.41, 0.094, 0.54, 0.07)"},W={slow:`500ms ${a.tertiary}`,medium:`300ms ${a.primary}`,fast:`100ms ${a.secondary}`},N=({colors:e})=>({default:c.css`
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("@xstyled/styled-components"),f=require("./box.js"),s=require("./system.js"),b=require("./wui-provider.js");function p(e,t){if(typeof e!="object"||e===null)return t;if(typeof t!="object"||t===null)return e;const o={...e};for(const l in t)t.hasOwnProperty(l)&&(o[l]=p(o[l],t[l]));return o}const x={"beige-10":"#FBF9F7","beige-20":"#F6F3EF","beige-30":"#EAE4DE","beige-40":"#D2CBC3","beige-50":"#A7A096","beige-60":"#605B55","beige-70":"#4D4944","beige-80":"#33302D","beige-90":"#1E1C1A","blue-10":"#E0F5FF","blue-20":"#BBEAFF","blue-30":"#9BDEF7","blue-40":"#55C3E9","blue-50":"#27A5D0","blue-60":"#057AA3","blue-70":"#025A79","blue-80":"#013C50","blue-90":"#00202B","green-10":"#EAFFD4","green-20":"#D6F6B4","green-30":"#BADE94","green-40":"#9FC873","green-50":"#83AD57","green-60":"#5A8034","green-70":"#40611F","green-80":"#2A4210","green-90":"#142603","neutral-10":"#FFFFFF","neutral-20":"#F3F3F3","neutral-30":"#DEDEDE","neutral-40":"#BDBDBD","neutral-50":"#989898","neutral-60":"#585858","neutral-70":"#444444","neutral-80":"#212121","neutral-90":"#000000","orange-10":"#FFEBCE","orange-20":"#FFD495","orange-30":"#FFBB59","orange-40":"#FF9F14","orange-50":"#DB860A","orange-60":"#A6670A","orange-70":"#824F06","orange-80":"#573607","orange-90":"#382303","pink-10":"#FFEAF5","pink-20":"#FFD5EB","pink-30":"#FEB7DC","pink-40":"#F696C8","pink-50":"#E468A8","pink-60":"#C24887","pink-70":"#972962","pink-80":"#6D1142","pink-90":"#3C0725","red-10":"#FBDEDC","red-20":"#FCC7C3","red-30":"#FDB3AE","red-40":"#FF9490","red-50":"#FF6165","red-60":"#E1003A","red-70":"#A80029","red-80":"#75001A","red-90":"#450101","red-orange-10":"#FFDED0","red-orange-20":"#FFC9B2","red-orange-30":"#FFB595","red-orange-40":"#FF9868","red-orange-50":"#E67B49","red-orange-60":"#C45927","red-orange-70":"#9F4217","red-orange-80":"#6D2605","red-orange-90":"#451701","teal-10":"#D5FFFA","teal-20":"#AAF4EB","teal-30":"#6DE1D2","teal-40":"#00C7AE","teal-50":"#01AA95","teal-60":"#008070","teal-70":"#00544A","teal-80":"#003D35","teal-90":"#00211D","violet-10":"#F2F2FF","violet-20":"#E0E0FF","violet-30":"#C9C9FF","violet-40":"#ACACFF","violet-50":"#9080F0","violet-60":"#7958D6","violet-70":"#593CAC","violet-80":"#422A86","violet-90":"#1F0E51","yellow-10":"#FFF8D9","yellow-20":"#FFF1B2","yellow-30":"#FFE166","yellow-40":"#FFCD00","yellow-50":"#E5B800","yellow-60":"#B69200","yellow-70":"#846A01","yellow-80":"#604D00","yellow-90":"#423500"},h=e=>({...e,"primary-10":e["yellow-10"],"primary-20":e["yellow-20"],"primary-30":e["yellow-30"],"primary-40":e["yellow-40"],"primary-50":e["yellow-50"],"primary-60":e["yellow-60"],"primary-70":e["yellow-70"],"primary-80":e["yellow-80"],"primary-90":e["yellow-90"],"secondary-blue":e["blue-40"],"secondary-green":e["green-30"],"secondary-orange":e["red-orange-40"],"secondary-pink":e["pink-40"],"secondary-teal":e["teal-40"],"secondary-violet":e["violet-40"],overlay:"rgba(0, 0, 0, 0.55)"}),g=h(x),w=Object.keys(g).reduce((e,t)=>{if(t.startsWith("secondary-")||t==="overlay")return e;const o=100-Number(t.slice(-2)),l=t.slice(0,t.length-2);return{...e,[t]:g[`${l}${o}`]}},{}),y={...g,...h(w)},A={colors:y},E=e=>({"welcome-font":[{url:`${e.fontsUrl}/welcome-font-regular`,weight:"400"},{url:`${e.fontsUrl}/welcome-font-medium`,weight:"500"},{url:`${e.fontsUrl}/welcome-font-bold`,weight:"600"},{url:`${e.fontsUrl}/welcome-font-regular-italic`,style:"italic",weight:"400"},{url:`${e.fontsUrl}/welcome-font-medium-italic`,style:"italic",weight:"500"},{url:`${e.fontsUrl}/welcome-font-bold-italic`,style:"italic",weight:"600"}],"welcome-icon-font":[{url:`${e.fontsUrl}/icon-font/__ICON_FONT_HASH__/welcome-icon-font`,display:"block"}],"work-sans":[{url:`${e.fontsUrl}/work-sans-variable`,isVariable:!0,stretch:"75% 125%",weight:"100 1000"}]}),D=(e,t)=>{const{toEm:o,toRem:l}=t,n=l;return{h0:n(65),h1:n(45),h2:n(36),h3:n(26),h4:n(20),h5:n(16),h6:n(14),lg:n(18),md:n(16),sm:n(14),"subtitle-md":n(13),"subtitle-sm":n(11),xs:n(12)}},T=({defaultLineHeight:e,toRem:t})=>({html:e,h0:t(72),h1:t(48),h2:t(40),h3:t(32),h4:t(24),h5:t(18),h6:t(16),lg:t(24),md:t(18),sm:t(18),xs:t(14),"subtitle-md":e,"subtitle-sm":e}),B={regular:400,medium:500,bold:600},v=({defaultLetterSpacing:e,toRem:t})=>({html:e,h0:t(-1.7),h1:t(-1.2),h2:t(-1),h3:t(-.9),h4:t(-.6),h5:t(-.5),h6:t(-.5),lg:e,md:e,sm:e,xs:t(-.2),"subtitle-md":t(-.2),"subtitle-sm":t(-.2)}),S=e=>{const{fontWeights:t}=e;return{h0:t.bold,h1:t.bold,h2:t.bold,h3:t.bold,h4:t.bold,h5:t.bold,h6:t.bold,lg:t.regular,md:t.regular,sm:t.regular,"subtitle-md":t.bold,"subtitle-sm":t.medium,xs:t.regular}},k=e=>{const{fonts:t}=e;return{h0:t.headings,h1:t.headings,h2:t.headings,h3:t.headings,h4:t.headings,h5:t.headings,h6:t.headings,"subtitle-md":t.headings,"subtitle-sm":t.headings}},C=()=>({"subtitle-md":"uppercase","subtitle-sm":"uppercase"}),_=e=>{const{colors:t}=e;return{h0:t["neutral-90"],h1:t["neutral-90"],h2:t["neutral-90"],h3:t["neutral-90"],h4:t["neutral-90"],h5:t["neutral-90"],h6:t["neutral-90"]}},$=e=>{const{fontSizes:t,letterSpacings:o,lineHeights:l,textsFontColors:n,textsFontFamily:F,textsFontWeights:d,textsTextTransform:m}=e;return Object.keys(t).reduce((a,r)=>({...a,[r]:{color:n[r],fontFamily:F[r]||void 0,fontWeight:d[r],fontSize:t[r],lineHeight:l[r]||l.lg,letterSpacing:o[r]||void 0,textTransform:m[r]||void 0}}),{})},U=(e,t,o)=>({texts:[e,"sans-serif"].join(", "),headings:[t,"sans-serif"].join(", "),icons:o}),c={primary:"ease",secondary:"linear",tertiary:"cubic-bezier(0.41, 0.094, 0.54, 0.07)"},W={slow:`500ms ${c.tertiary}`,medium:`300ms ${c.primary}`,fast:`100ms ${c.secondary}`},N=({colors:e})=>({default:u.css`
       background-image: linear-gradient(
         0deg,
         ${e["primary-40"]},
@@ -11,8 +11,8 @@
         background-position-y 250ms,
         background-size 250ms,
         color 250ms;
-    `,hover:c.css`
+    `,hover:u.css`
       opacity: 1;
       background-position-y: 100%;
       background-size: 100% 100%;
-    `}),O=e=>({none:"0",sm:e.toRem(2),md:e.toRem(4),lg:e.toRem(8),xl:e.toRem(16),xxl:e.toRem(24),full:"100%"}),L={sm:"1px",md:"2px",lg:"3px"},I={xs:0,sm:480,md:736,lg:980,xl:1280,xxl:1440,"3xl":1620,"4xl":1920},z={sm:"1px 2px 4px 0 rgba(0,0,0,0.05)",md:"3px 4px 10px 0 rgba(0,0,0,0.07)"},H=e=>({xxs:e.toRem(2),xs:e.toRem(4),sm:e.toRem(8),md:e.toRem(12),lg:e.toRem(16),xl:e.toRem(24),xxl:e.toRem(32),"3xl":e.toRem(48),"4xl":e.toRem(64),"5xl":e.toRem(96),"6xl":e.toRem(128),"7xl":e.toRem(192)}),P=e=>({backgroundColor:e.colors["primary-40"],color:e.colors["neutral-90"]}),M=({colors:e})=>{function t(o=e["primary-40"]){return{boxShadow:`0 0 0 2px ${o}`}}return t},R="work-sans",q=16,G="-0.019rem",Y=1.15,V="https://cdn.welcome-ui.com/fonts",Z="welcome-font",J="welcome-icon-font",K=(e={})=>{const{defaultFontFamily:t=R,defaultFontSize:o=q,defaultLetterSpacing:l=G,defaultLineHeight:n=Y,fontsUrl:u=V,headingFontFamily:F=Z,iconFontFamily:d=J,...s}=e;let r={};return r.transformers={...c.rpxTransformers},r.toEm=i=>`${i/o}em`,r.toRem=i=>`${i/o}rem`,r.toPx=i=>`${i*o}px`,r.colors=g,r.fontsUrl=u,r.fontFaces=y(r),r.fontSizes=D("rem",r),r.defaultLineHeight=n,r.defaultLetterSpacing=l,r.lineHeights=T(r),r.fontWeights=B,r.letterSpacings=v(r),r.fonts=U(t,F,d),r.borderWidths=L,r.screens=I,r.space=H(r),r.inset=r.space,r.radii=O(r),r.transitions=W,r.timingFunction=a,r.shadows=z,r=m(r,s),r.selection=P(r),r.underline=N(r),r.focus=M(r),r.textsFontWeights=k(r),r.textsFontFamily=C(r),r.textsFontColors=$(r),r.textsTextTransform=_(),r.texts=S(r),r.test=f(r),r.states=c.defaultTheme.states,r=m(r,s),r};exports.Test=b.Test;exports.WuiProvider=p.WuiProvider;exports.createTheme=K;exports.darkTheme=E;
+    `}),O=e=>({none:"0",sm:e.toRem(2),md:e.toRem(4),lg:e.toRem(8),xl:e.toRem(16),xxl:e.toRem(24),full:"100%"}),L={sm:"1px",md:"2px",lg:"3px"},P={xs:0,sm:480,md:736,lg:980,xl:1280,xxl:1440,"3xl":1620,"4xl":1920},I={sm:"1px 2px 4px 0 rgba(0,0,0,0.05)",md:"3px 4px 10px 0 rgba(0,0,0,0.07)"},z=e=>({xxs:e.toRem(2),xs:e.toRem(4),sm:e.toRem(8),md:e.toRem(12),lg:e.toRem(16),xl:e.toRem(24),xxl:e.toRem(32),"3xl":e.toRem(48),"4xl":e.toRem(64),"5xl":e.toRem(96),"6xl":e.toRem(128),"7xl":e.toRem(192)}),H=e=>({backgroundColor:e.colors["primary-40"],color:e.colors["neutral-90"]}),R=({colors:e})=>{function t(o=e["primary-40"]){return{boxShadow:`0 0 0 2px ${o}`}}return t},q="work-sans",M=16,G="-0.019rem",Y=1.15,V="https://cdn.welcome-ui.com/fonts",Z="welcome-font",J="welcome-icon-font",K=(e={})=>{const{defaultFontFamily:t=q,defaultFontSize:o=M,defaultLetterSpacing:l=G,defaultLineHeight:n=Y,fontsUrl:F=V,headingFontFamily:d=Z,iconFontFamily:m=J,...a}=e;let r={};return r.transformers={...u.rpxTransformers},r.toEm=i=>`${i/o}em`,r.toRem=i=>`${i/o}rem`,r.toPx=i=>`${i*o}px`,r.colors=g,r.fontsUrl=F,r.fontFaces=E(r),r.fontSizes=D("rem",r),r.defaultLineHeight=n,r.defaultLetterSpacing=l,r.lineHeights=T(r),r.fontWeights=B,r.letterSpacings=v(r),r.fonts=U(t,d,m),r.borderWidths=L,r.screens=P,r.space=z(r),r.inset=r.space,r.radii=O(r),r.transitions=W,r.timingFunction=c,r.shadows=I,r=p(r,a),r.selection=H(r),r.underline=N(r),r.focus=R(r),r.textsFontWeights=S(r),r.textsFontFamily=k(r),r.textsFontColors=_(r),r.textsTextTransform=C(),r.texts=$(r),r.states=u.defaultTheme.states,r=p(r,a),r};exports.Box=f.Box;exports.componentSystem=s.componentSystem;exports.filterSystemProps=s.filterSystemProps;exports.forwardRef=s.forwardRef;exports.shouldForwardProp=s.shouldForwardProp;exports.system=s.system;exports.wrapperSystem=s.wrapperSystem;exports.WuiProvider=b.WuiProvider;exports.createTheme=K;exports.darkTheme=A;

package/dist/index.mjs

@@ -1,15 +1,8 @@
 "use client";
-import { css as m, rpxTransformers as p, defaultTheme as f } from "@xstyled/styled-components";
-import { Test as ee } from "./Test.mjs";
-import { WuiProvider as re } from "./WuiProvider.mjs";
-const b = (e) => {
-  const { colors: t } = e;
-  return {
-    default: {
-      backgroundColor: t["primary-50"]
-    }
-  };
-};
+import { css as m, rpxTransformers as h, defaultTheme as f } from "@xstyled/styled-components";
+import { Box as j } from "./box.mjs";
+import { componentSystem as te, filterSystemProps as re, forwardRef as ne, shouldForwardProp as oe, system as le, wrapperSystem as ie } from "./system.mjs";
+import { WuiProvider as ae } from "./wui-provider.mjs";
 function d(e, t) {
   if (typeof e != "object" || e === null) return t;
   if (typeof t != "object" || t === null) return e;
@@ -124,7 +117,7 @@ const x = {
   "yellow-70": "#846A01",
   "yellow-80": "#604D00",
   "yellow-90": "#423500"
-}, h = (e) => ({
+}, p = (e) => ({
   ...e,
   "primary-10": e["yellow-10"],
   "primary-20": e["yellow-20"],
@@ -142,19 +135,19 @@ const x = {
   "secondary-teal": e["teal-40"],
   "secondary-violet": e["violet-40"],
   overlay: "rgba(0, 0, 0, 0.55)"
-}), c = h(x), w = Object.keys(c).reduce((e, t) => {
+}), c = p(x), b = Object.keys(c).reduce((e, t) => {
   if (t.startsWith("secondary-") || t === "overlay") return e;
   const o = 100 - Number(t.slice(-2)), l = t.slice(0, t.length - 2);
   return {
     ...e,
     [t]: c[`${l}${o}`]
   };
-}, {}), A = {
+}, {}), w = {
   ...c,
-  ...h(w)
-}, K = {
-  colors: A
-}, E = (e) => ({
+  ...p(b)
+}, J = {
+  colors: w
+}, A = (e) => ({
   "welcome-font": [
     {
       url: `${e.fontsUrl}/welcome-font-regular`,
@@ -198,7 +191,7 @@ const x = {
       weight: "100 1000"
     }
   ]
-}), D = (e, t) => {
+}), E = (e, t) => {
   const { toEm: o, toRem: l } = t, n = l;
   return {
     h0: n(65),
@@ -233,11 +226,11 @@ const x = {
   xs: t(14),
   "subtitle-md": e,
   "subtitle-sm": e
-}), T = {
+}), D = {
   regular: 400,
   medium: 500,
   bold: 600
-}, B = ({
+}, T = ({
   defaultLetterSpacing: e,
   toRem: t
 }) => ({
@@ -255,7 +248,7 @@ const x = {
   xs: t(-0.2),
   "subtitle-md": t(-0.2),
   "subtitle-sm": t(-0.2)
-}), v = (e) => {
+}), B = (e) => {
   const { fontWeights: t } = e;
   return {
     h0: t.bold,
@@ -272,7 +265,7 @@ const x = {
     "subtitle-sm": t.medium,
     xs: t.regular
   };
-}, C = (e) => {
+}, v = (e) => {
   const { fonts: t } = e;
   return {
     h0: t.headings,
@@ -285,7 +278,7 @@ const x = {
     "subtitle-md": t.headings,
     "subtitle-sm": t.headings
   };
-}, k = () => ({
+}, C = () => ({
   "subtitle-md": "uppercase",
   "subtitle-sm": "uppercase"
 }), _ = (e) => {
@@ -305,23 +298,23 @@ const x = {
     letterSpacings: o,
     lineHeights: l,
     textsFontColors: n,
-    textsFontFamily: g,
-    textsFontWeights: F,
+    textsFontFamily: F,
+    textsFontWeights: g,
     textsTextTransform: u
   } = e;
   return Object.keys(t).reduce((s, r) => ({
     ...s,
     [r]: {
       color: n[r],
-      fontFamily: g[r] || void 0,
-      fontWeight: F[r],
+      fontFamily: F[r] || void 0,
+      fontWeight: g[r],
       fontSize: t[r],
       lineHeight: l[r] || l.lg,
       letterSpacing: o[r] || void 0,
       textTransform: u[r] || void 0
     }
   }), {});
-}, U = (e, t, o) => ({
+}, k = (e, t, o) => ({
   texts: [e, "sans-serif"].join(", "),
   headings: [t, "sans-serif"].join(", "),
   icons: o
@@ -333,7 +326,7 @@ const x = {
   slow: `500ms ${a.tertiary}`,
   medium: `300ms ${a.primary}`,
   fast: `100ms ${a.secondary}`
-}, N = ({ colors: e }) => ({
+}, U = ({ colors: e }) => ({
   default: m`
       background-image: linear-gradient(
         0deg,
@@ -353,7 +346,7 @@ const x = {
       background-position-y: 100%;
       background-size: 100% 100%;
     `
-}), W = (e) => ({
+}), N = (e) => ({
   none: "0",
   sm: e.toRem(2),
   md: e.toRem(4),
@@ -361,11 +354,11 @@ const x = {
   xl: e.toRem(16),
   xxl: e.toRem(24),
   full: "100%"
-}), L = {
+}), W = {
   sm: "1px",
   md: "2px",
   lg: "3px"
-}, O = {
+}, L = {
   xs: 0,
   sm: 480,
   md: 736,
@@ -374,10 +367,10 @@ const x = {
   xxl: 1440,
   "3xl": 1620,
   "4xl": 1920
-}, I = {
+}, O = {
   sm: "1px 2px 4px 0 rgba(0,0,0,0.05)",
   md: "3px 4px 10px 0 rgba(0,0,0,0.07)"
-}, z = (e) => ({
+}, I = (e) => ({
   xxs: e.toRem(2),
   xs: e.toRem(4),
   sm: e.toRem(8),
@@ -390,33 +383,39 @@ const x = {
   "5xl": e.toRem(96),
   "6xl": e.toRem(128),
   "7xl": e.toRem(192)
-}), H = (e) => ({
+}), z = (e) => ({
   backgroundColor: e.colors["primary-40"],
   color: e.colors["neutral-90"]
-}), P = ({ colors: e }) => {
+}), H = ({ colors: e }) => {
   function t(o = e["primary-40"]) {
     return {
       boxShadow: `0 0 0 2px ${o}`
     };
   }
   return t;
-}, R = "work-sans", G = 16, M = "-0.019rem", Y = 1.15, V = "https://cdn.welcome-ui.com/fonts", Z = "welcome-font", q = "welcome-icon-font", Q = (e = {}) => {
+}, P = "work-sans", R = 16, G = "-0.019rem", M = 1.15, Y = "https://cdn.welcome-ui.com/fonts", V = "welcome-font", Z = "welcome-icon-font", K = (e = {}) => {
   const {
-    defaultFontFamily: t = R,
-    defaultFontSize: o = G,
-    defaultLetterSpacing: l = M,
-    defaultLineHeight: n = Y,
-    fontsUrl: g = V,
-    headingFontFamily: F = Z,
-    iconFontFamily: u = q,
+    defaultFontFamily: t = P,
+    defaultFontSize: o = R,
+    defaultLetterSpacing: l = G,
+    defaultLineHeight: n = M,
+    fontsUrl: F = Y,
+    headingFontFamily: g = V,
+    iconFontFamily: u = Z,
     ...s
   } = e;
   let r = {};
-  return r.transformers = { ...p }, r.toEm = (i) => `${i / o}em`, r.toRem = (i) => `${i / o}rem`, r.toPx = (i) => `${i * o}px`, r.colors = c, r.fontsUrl = g, r.fontFaces = E(r), r.fontSizes = D("rem", r), r.defaultLineHeight = n, r.defaultLetterSpacing = l, r.lineHeights = y(r), r.fontWeights = T, r.letterSpacings = B(r), r.fonts = U(t, F, u), r.borderWidths = L, r.screens = O, r.space = z(r), r.inset = r.space, r.radii = W(r), r.transitions = S, r.timingFunction = a, r.shadows = I, r = d(r, s), r.selection = H(r), r.underline = N(r), r.focus = P(r), r.textsFontWeights = v(r), r.textsFontFamily = C(r), r.textsFontColors = _(r), r.textsTextTransform = k(), r.texts = $(r), r.test = b(r), r.states = f.states, r = d(r, s), r;
+  return r.transformers = { ...h }, r.toEm = (i) => `${i / o}em`, r.toRem = (i) => `${i / o}rem`, r.toPx = (i) => `${i * o}px`, r.colors = c, r.fontsUrl = F, r.fontFaces = A(r), r.fontSizes = E("rem", r), r.defaultLineHeight = n, r.defaultLetterSpacing = l, r.lineHeights = y(r), r.fontWeights = D, r.letterSpacings = T(r), r.fonts = k(t, g, u), r.borderWidths = W, r.screens = L, r.space = I(r), r.inset = r.space, r.radii = N(r), r.transitions = S, r.timingFunction = a, r.shadows = O, r = d(r, s), r.selection = z(r), r.underline = U(r), r.focus = H(r), r.textsFontWeights = B(r), r.textsFontFamily = v(r), r.textsFontColors = _(r), r.textsTextTransform = C(), r.texts = $(r), r.states = f.states, r = d(r, s), r;
 };
 export {
-  ee as Test,
-  re as WuiProvider,
-  Q as createTheme,
-  K as darkTheme
+  j as Box,
+  ae as WuiProvider,
+  te as componentSystem,
+  K as createTheme,
+  J as darkTheme,
+  re as filterSystemProps,
+  ne as forwardRef,
+  oe as shouldForwardProp,
+  le as system,
+  ie as wrapperSystem
 };

package/dist/system.js

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react"),t=require("@xstyled/styled-components");function a(o){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const s in o)if(s!=="default"){const p=Object.getOwnPropertyDescriptor(o,s);Object.defineProperty(r,s,p.get?p:{enumerable:!0,get:()=>o[s]})}}return r.default=o,Object.freeze(r)}const e=a(t),i=t.compose(t.style({prop:"opacity"}),t.style({prop:"overflow"}),t.style({prop:"transition",themeGet:t.getTransition}),t.style({prop:"position"}),t.style({prop:"zIndex",themeGet:t.getZIndex}),t.style({prop:"top",themeGet:t.getPx}),t.style({prop:"right",themeGet:t.getPx}),t.style({prop:"bottom",themeGet:t.getPx}),t.style({prop:"left",themeGet:t.getPx})),l=Object.freeze([e.backgrounds,e.borders,e.boxShadow,e.color,e.display,e.flexboxes,e.grids,e.height,e.maxHeight,e.maxWidth,e.minHeight,e.minWidth,e.space,e.typography,e.verticalAlign,e.width,i]),d=Object.freeze([e.margin,e.marginBottom,e.marginLeft,e.marginRight,e.marginTop,e.mx,e.my,e.width,i]),n=t.compose(...l),c=t.compose(...d),f=n.meta.props.filter(o=>!c.meta.props.includes(o)).map(o=>o==="w"?e.width:o==="h"?e.height:e[o]).filter(Boolean),g=t.compose(...f),y=o=>!n.meta.props.includes(o),u=(o,r)=>r(o),h=o=>m.forwardRef(o);exports.componentSystem=g;exports.filterSystemProps=y;exports.forwardRef=h;exports.shouldForwardProp=u;exports.system=n;exports.wrapperSystem=c;

package/dist/system.mjs

@@ -0,0 +1,51 @@
+"use client";
+import m from "react";
+import * as t from "@xstyled/styled-components";
+import { compose as p, style as o, getTransition as a, getZIndex as c, getPx as r } from "@xstyled/styled-components";
+const i = p(
+  o({ prop: "opacity" }),
+  o({ prop: "overflow" }),
+  o({ prop: "transition", themeGet: a }),
+  o({ prop: "position" }),
+  o({ prop: "zIndex", themeGet: c }),
+  o({ prop: "top", themeGet: r }),
+  o({ prop: "right", themeGet: r }),
+  o({ prop: "bottom", themeGet: r }),
+  o({ prop: "left", themeGet: r })
+), h = Object.freeze([
+  t.backgrounds,
+  t.borders,
+  t.boxShadow,
+  t.color,
+  t.display,
+  t.flexboxes,
+  t.grids,
+  t.height,
+  t.maxHeight,
+  t.maxWidth,
+  t.minHeight,
+  t.minWidth,
+  t.space,
+  t.typography,
+  t.verticalAlign,
+  t.width,
+  i
+]), d = Object.freeze([
+  t.margin,
+  t.marginBottom,
+  t.marginLeft,
+  t.marginRight,
+  t.marginTop,
+  t.mx,
+  t.my,
+  t.width,
+  i
+]), n = p(...h), f = p(...d), g = n.meta.props.filter((e) => !f.meta.props.includes(e)).map((e) => e === "w" ? t.width : e === "h" ? t.height : t[e]).filter(Boolean), w = p(...g), x = (e) => !n.meta.props.includes(e), y = (e, s) => s(e), u = (e) => m.forwardRef(e);
+export {
+  w as componentSystem,
+  x as filterSystemProps,
+  u as forwardRef,
+  y as shouldForwardProp,
+  n as system,
+  f as wrapperSystem
+};

package/dist/types/components/Box/index.d.ts

@@ -0,0 +1,3 @@
+import { CreateWuiProps } from '../System';
+export type BoxProps = Omit<CreateWuiProps<'div'>, 'dataTestId'>;
+export declare const Box: import('../System').CreateWuiComponent<"div", BoxProps>;

package/dist/types/components/System/index.d.ts

@@ -0,0 +1,40 @@
+import { default as React } from 'react';
+import { SystemProps } from '@xstyled/styled-components';
+import { StyledConfig } from 'styled-components';
+import * as S from '@xstyled/styled-components';
+/**
+ * @deprecated use system from @xstyled/syled-components instead
+ */
+export declare const system: S.StyleGenerator<WuiSystemProps>;
+/**
+ * @deprecated use system from @xstyled/syled-components instead
+ */
+export declare const wrapperSystem: S.StyleGenerator<WuiWrapperSystemProps>;
+/**
+ * @deprecated use system from @xstyled/syled-components instead
+ */
+export declare const componentSystem: S.StyleGenerator<unknown>;
+export declare const filterSystemProps: (prop: string) => boolean;
+export declare const shouldForwardProp: StyledConfig['shouldForwardProp'];
+export type WuiOldProps = S.OpacityProps & S.OverflowProps & S.TransitionProps & S.ZIndexProps & S.TopProps & S.RightProps & S.BottomProps & S.LeftProps;
+export type WuiSystemProps = S.BackgroundsProps & S.BorderProps & S.BoxShadowProps & S.ColorProps & S.DisplayProps & S.FlexboxesProps & S.GridsProps & S.HeightProps & S.MaxHeightProps & S.MaxWidthProps & S.MinHeightProps & S.MinWidthProps & S.SpaceProps & S.TypographyProps & S.VerticalAlignProps & S.WidthProps & WuiOldProps;
+export type WuiWrapperSystemProps = S.MarginProps & S.MarginBottomProps & S.MarginLeftProps & S.MarginRightProps & S.MarginTopProps & S.MarginXProps & S.MarginYProps & S.WidthProps & WuiOldProps;
+export interface WuiTestProps {
+    dataTestId?: string;
+}
+export type WuiProps = SystemProps;
+export type As<Props = any> = React.ElementType<Props>;
+export type RightJoinProps<SourceProps, OverrideProps> = Omit<SourceProps, keyof OverrideProps> & OverrideProps;
+export type MergeProps<ComponentProps, Props, WuiProps> = RightJoinProps<ComponentProps, Props> & RightJoinProps<WuiProps, Props>;
+export type CreateWuiProps<Component extends As, Props = {}> = MergeProps<Omit<React.ComponentProps<Component>, keyof WuiProps>, Props, WuiProps & WuiTestProps & {
+    as?: As;
+}>;
+export type CreateWuiComponent<Component extends As, Options = {}> = {
+    <AsComponent extends As>(props: CreateWuiProps<AsComponent, Options> & {
+        as: AsComponent;
+    }): JSX.Element;
+    (props: CreateWuiProps<Component, Options>): JSX.Element;
+    displayName?: string;
+};
+export declare const forwardRef: <Component extends As, Props = {}>(component: React.ForwardRefRenderFunction<any, Props>) => CreateWuiComponent<Component, Props>;
+export type ExtraSize = number | string;

package/dist/types/components/WuiProvider/font.d.ts

@@ -0,0 +1,16 @@
+import { css } from '@xstyled/styled-components';
+import { ThemeValues } from '../../theme';
+type FontVariation = {
+    display?: FontDisplay;
+    extensions?: string[];
+    isVariable?: boolean;
+    style?: string;
+    unicodeRange?: string;
+    url: string;
+    weight?: string;
+};
+export declare function getSource(url: FontVariation['url'], extensions: FontVariation['extensions'], isVariable: FontVariation['isVariable']): string;
+export declare const fonts: () => ({ theme }: {
+    theme: ThemeValues;
+}) => ReturnType<typeof css>;
+export {};

package/dist/types/components/WuiProvider/hide-focus-rings-root.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+export declare const hideFocusRingsDataAttribute = "data-wui-hidefocusrings";
+interface HideFocusRingsRootProps {
+    children?: React.ReactNode;
+    reactRootId: string;
+}
+export declare const HideFocusRingsRoot: React.FC<HideFocusRingsRootProps>;
+export {};

package/dist/types/components/WuiProvider/index.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { ThemeValues } from '../../theme';
+export interface WuiProviderProps {
+    children?: React.ReactNode;
+    hasGlobalStyle?: boolean;
+    reactRootId?: string;
+    shouldHideFocusRingOnClick?: boolean;
+    theme: ThemeValues;
+    useReset?: boolean;
+}
+export declare const WuiProvider: React.FC<WuiProviderProps>;

package/dist/types/components/WuiProvider/styles.d.ts

@@ -0,0 +1,5 @@
+export declare const resetStyles: import('styled-components').FlattenSimpleInterpolation;
+export declare const normalizeStyle: import('styled-components').FlattenSimpleInterpolation;
+export declare const GlobalStyle: import('styled-components').GlobalStyleComponent<{
+    useReset?: boolean;
+}, import('styled-components').DefaultTheme>;

package/dist/types/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Box';
+export * from './System';
+export * from './WuiProvider';

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './theme';
+export * from './components';

package/dist/types/theme/borders.d.ts

@@ -0,0 +1,6 @@
+export type ThemeBorderWidths = {
+    lg: string;
+    md: string;
+    sm: string;
+};
+export declare const borderWidths: ThemeBorderWidths;

package/dist/types/theme/colors.d.ts

@@ -0,0 +1,346 @@
+declare const palette: {
+    'beige-10': string;
+    'beige-20': string;
+    'beige-30': string;
+    'beige-40': string;
+    'beige-50': string;
+    'beige-60': string;
+    'beige-70': string;
+    'beige-80': string;
+    'beige-90': string;
+    'blue-10': string;
+    'blue-20': string;
+    'blue-30': string;
+    'blue-40': string;
+    'blue-50': string;
+    'blue-60': string;
+    'blue-70': string;
+    'blue-80': string;
+    'blue-90': string;
+    'green-10': string;
+    'green-20': string;
+    'green-30': string;
+    'green-40': string;
+    'green-50': string;
+    'green-60': string;
+    'green-70': string;
+    'green-80': string;
+    'green-90': string;
+    'neutral-10': string;
+    'neutral-20': string;
+    'neutral-30': string;
+    'neutral-40': string;
+    'neutral-50': string;
+    'neutral-60': string;
+    'neutral-70': string;
+    'neutral-80': string;
+    'neutral-90': string;
+    'orange-10': string;
+    'orange-20': string;
+    'orange-30': string;
+    'orange-40': string;
+    'orange-50': string;
+    'orange-60': string;
+    'orange-70': string;
+    'orange-80': string;
+    'orange-90': string;
+    'pink-10': string;
+    'pink-20': string;
+    'pink-30': string;
+    'pink-40': string;
+    'pink-50': string;
+    'pink-60': string;
+    'pink-70': string;
+    'pink-80': string;
+    'pink-90': string;
+    'red-10': string;
+    'red-20': string;
+    'red-30': string;
+    'red-40': string;
+    'red-50': string;
+    'red-60': string;
+    'red-70': string;
+    'red-80': string;
+    'red-90': string;
+    'red-orange-10': string;
+    'red-orange-20': string;
+    'red-orange-30': string;
+    'red-orange-40': string;
+    'red-orange-50': string;
+    'red-orange-60': string;
+    'red-orange-70': string;
+    'red-orange-80': string;
+    'red-orange-90': string;
+    'teal-10': string;
+    'teal-20': string;
+    'teal-30': string;
+    'teal-40': string;
+    'teal-50': string;
+    'teal-60': string;
+    'teal-70': string;
+    'teal-80': string;
+    'teal-90': string;
+    'violet-10': string;
+    'violet-20': string;
+    'violet-30': string;
+    'violet-40': string;
+    'violet-50': string;
+    'violet-60': string;
+    'violet-70': string;
+    'violet-80': string;
+    'violet-90': string;
+    'yellow-10': string;
+    'yellow-20': string;
+    'yellow-30': string;
+    'yellow-40': string;
+    'yellow-50': string;
+    'yellow-60': string;
+    'yellow-70': string;
+    'yellow-80': string;
+    'yellow-90': string;
+};
+export declare const getColors: (systemColors: typeof palette) => {
+    'primary-10': string;
+    'primary-20': string;
+    'primary-30': string;
+    'primary-40': string;
+    'primary-50': string;
+    'primary-60': string;
+    'primary-70': string;
+    'primary-80': string;
+    'primary-90': string;
+    'secondary-blue': string;
+    'secondary-green': string;
+    'secondary-orange': string;
+    'secondary-pink': string;
+    'secondary-teal': string;
+    'secondary-violet': string;
+    overlay: string;
+    'beige-10': string;
+    'beige-20': string;
+    'beige-30': string;
+    'beige-40': string;
+    'beige-50': string;
+    'beige-60': string;
+    'beige-70': string;
+    'beige-80': string;
+    'beige-90': string;
+    'blue-10': string;
+    'blue-20': string;
+    'blue-30': string;
+    'blue-40': string;
+    'blue-50': string;
+    'blue-60': string;
+    'blue-70': string;
+    'blue-80': string;
+    'blue-90': string;
+    'green-10': string;
+    'green-20': string;
+    'green-30': string;
+    'green-40': string;
+    'green-50': string;
+    'green-60': string;
+    'green-70': string;
+    'green-80': string;
+    'green-90': string;
+    'neutral-10': string;
+    'neutral-20': string;
+    'neutral-30': string;
+    'neutral-40': string;
+    'neutral-50': string;
+    'neutral-60': string;
+    'neutral-70': string;
+    'neutral-80': string;
+    'neutral-90': string;
+    'orange-10': string;
+    'orange-20': string;
+    'orange-30': string;
+    'orange-40': string;
+    'orange-50': string;
+    'orange-60': string;
+    'orange-70': string;
+    'orange-80': string;
+    'orange-90': string;
+    'pink-10': string;
+    'pink-20': string;
+    'pink-30': string;
+    'pink-40': string;
+    'pink-50': string;
+    'pink-60': string;
+    'pink-70': string;
+    'pink-80': string;
+    'pink-90': string;
+    'red-10': string;
+    'red-20': string;
+    'red-30': string;
+    'red-40': string;
+    'red-50': string;
+    'red-60': string;
+    'red-70': string;
+    'red-80': string;
+    'red-90': string;
+    'red-orange-10': string;
+    'red-orange-20': string;
+    'red-orange-30': string;
+    'red-orange-40': string;
+    'red-orange-50': string;
+    'red-orange-60': string;
+    'red-orange-70': string;
+    'red-orange-80': string;
+    'red-orange-90': string;
+    'teal-10': string;
+    'teal-20': string;
+    'teal-30': string;
+    'teal-40': string;
+    'teal-50': string;
+    'teal-60': string;
+    'teal-70': string;
+    'teal-80': string;
+    'teal-90': string;
+    'violet-10': string;
+    'violet-20': string;
+    'violet-30': string;
+    'violet-40': string;
+    'violet-50': string;
+    'violet-60': string;
+    'violet-70': string;
+    'violet-80': string;
+    'violet-90': string;
+    'yellow-10': string;
+    'yellow-20': string;
+    'yellow-30': string;
+    'yellow-40': string;
+    'yellow-50': string;
+    'yellow-60': string;
+    'yellow-70': string;
+    'yellow-80': string;
+    'yellow-90': string;
+};
+export declare const colors: {
+    'primary-10': string;
+    'primary-20': string;
+    'primary-30': string;
+    'primary-40': string;
+    'primary-50': string;
+    'primary-60': string;
+    'primary-70': string;
+    'primary-80': string;
+    'primary-90': string;
+    'secondary-blue': string;
+    'secondary-green': string;
+    'secondary-orange': string;
+    'secondary-pink': string;
+    'secondary-teal': string;
+    'secondary-violet': string;
+    overlay: string;
+    'beige-10': string;
+    'beige-20': string;
+    'beige-30': string;
+    'beige-40': string;
+    'beige-50': string;
+    'beige-60': string;
+    'beige-70': string;
+    'beige-80': string;
+    'beige-90': string;
+    'blue-10': string;
+    'blue-20': string;
+    'blue-30': string;
+    'blue-40': string;
+    'blue-50': string;
+    'blue-60': string;
+    'blue-70': string;
+    'blue-80': string;
+    'blue-90': string;
+    'green-10': string;
+    'green-20': string;
+    'green-30': string;
+    'green-40': string;
+    'green-50': string;
+    'green-60': string;
+    'green-70': string;
+    'green-80': string;
+    'green-90': string;
+    'neutral-10': string;
+    'neutral-20': string;
+    'neutral-30': string;
+    'neutral-40': string;
+    'neutral-50': string;
+    'neutral-60': string;
+    'neutral-70': string;
+    'neutral-80': string;
+    'neutral-90': string;
+    'orange-10': string;
+    'orange-20': string;
+    'orange-30': string;
+    'orange-40': string;
+    'orange-50': string;
+    'orange-60': string;
+    'orange-70': string;
+    'orange-80': string;
+    'orange-90': string;
+    'pink-10': string;
+    'pink-20': string;
+    'pink-30': string;
+    'pink-40': string;
+    'pink-50': string;
+    'pink-60': string;
+    'pink-70': string;
+    'pink-80': string;
+    'pink-90': string;
+    'red-10': string;
+    'red-20': string;
+    'red-30': string;
+    'red-40': string;
+    'red-50': string;
+    'red-60': string;
+    'red-70': string;
+    'red-80': string;
+    'red-90': string;
+    'red-orange-10': string;
+    'red-orange-20': string;
+    'red-orange-30': string;
+    'red-orange-40': string;
+    'red-orange-50': string;
+    'red-orange-60': string;
+    'red-orange-70': string;
+    'red-orange-80': string;
+    'red-orange-90': string;
+    'teal-10': string;
+    'teal-20': string;
+    'teal-30': string;
+    'teal-40': string;
+    'teal-50': string;
+    'teal-60': string;
+    'teal-70': string;
+    'teal-80': string;
+    'teal-90': string;
+    'violet-10': string;
+    'violet-20': string;
+    'violet-30': string;
+    'violet-40': string;
+    'violet-50': string;
+    'violet-60': string;
+    'violet-70': string;
+    'violet-80': string;
+    'violet-90': string;
+    'yellow-10': string;
+    'yellow-20': string;
+    'yellow-30': string;
+    'yellow-40': string;
+    'yellow-50': string;
+    'yellow-60': string;
+    'yellow-70': string;
+    'yellow-80': string;
+    'yellow-90': string;
+};
+export type ThemeColors = typeof colors;
+declare const enum SecondaryColors {
+    'blue' = 0,
+    'green' = 1,
+    'orange' = 2,
+    'pink' = 3,
+    'teal' = 4,
+    'violet' = 5
+}
+export type ThemeSecondaryColors = keyof typeof SecondaryColors;
+export {};

package/dist/types/theme/dark.d.ts

@@ -0,0 +1,7 @@
+import { ThemeValues } from '.';
+type RecursivePartial<T> = {
+    [P in keyof T]?: T[P] | RecursivePartial<T[P]>;
+};
+export declare const colorsDark: ThemeValues['colors'];
+export declare const darkTheme: RecursivePartial<ThemeValues>;
+export {};

package/dist/types/theme/focus.d.ts

@@ -0,0 +1,10 @@
+import { CSSObject } from '@xstyled/styled-components';
+import { ThemeColors } from './colors';
+export type ThemeFocus = (color?: string) => {
+    boxShadow: CSSObject['boxShadow'];
+};
+export declare const getFocus: ({ colors }: {
+    colors: ThemeColors;
+}) => (color?: string) => {
+    boxShadow: string;
+};

package/dist/types/theme/fonts.d.ts

@@ -0,0 +1,18 @@
+import { ThemeValues } from '.';
+type FontFace = {
+    display?: FontDisplay;
+    extensions?: string[];
+    isVariable?: boolean;
+    stretch?: string;
+    style?: string;
+    uniCodeRange?: string;
+    url: string;
+    weight?: string;
+};
+export type ThemeFontFaces = {
+    'welcome-font': FontFace[];
+    'welcome-icon-font': FontFace[];
+    'work-sans': FontFace[];
+};
+export declare const fontFaces: (theme: ThemeValues) => ThemeFontFaces;
+export {};

package/dist/types/theme/index.d.ts

@@ -0,0 +1,64 @@
+import { CSSScalar, ITheme as StyledComponentDefaultTheme, DefaultTheme as XStyledDefaultTheme } from '@xstyled/styled-components';
+import { darkTheme } from './dark';
+import { ThemeColors } from './colors';
+import { ThemeFontFaces } from './fonts';
+import { ThemeFonts, ThemeFontSizes, ThemeFontWeights, ThemeLetterSpacings, ThemeLineHeights, ThemeTexts, ThemeTextsFontFamily, ThemeTextsFontWeights, ThemeTextsTextTransform } from './typography';
+import { ThemeTimingFunction, ThemeTransitions } from './transitions';
+import { ThemeUnderline } from './underline';
+import { ThemeRadii } from './radii';
+import { ThemeBorderWidths } from './borders';
+import { ThemeScreens } from './screens';
+import { ThemeShadows } from './shadows';
+import { ThemeSpace } from './space';
+import { ThemeSelection } from './selection';
+import { ThemeFocus } from './focus';
+type OverrideKeys = 'colors' | 'radii' | 'borderWidths' | 'fontSizes' | 'lineHeights' | 'fontWeights' | 'letterSpacings' | 'fonts' | 'sizes' | 'screens' | 'space' | 'shadows' | 'texts';
+type XStyledTheme = Omit<XStyledDefaultTheme, OverrideKeys>;
+type StyledComponentsTheme = Omit<StyledComponentDefaultTheme, OverrideKeys>;
+export interface ThemeValues extends XStyledTheme, StyledComponentsTheme {
+    borderWidths: ThemeBorderWidths;
+    colors: ThemeColors;
+    defaultLetterSpacing: string;
+    defaultLineHeight: number;
+    focus: ThemeFocus;
+    fontFaces: ThemeFontFaces;
+    fontSizes: ThemeFontSizes;
+    fontWeights: ThemeFontWeights;
+    fonts: ThemeFonts;
+    fontsUrl: ThemeFontsUrl;
+    inset: ThemeSpace;
+    letterSpacings: ThemeLetterSpacings;
+    lineHeights: ThemeLineHeights;
+    radii: ThemeRadii;
+    screens: ThemeScreens;
+    selection: ThemeSelection;
+    shadows: ThemeShadows;
+    space: ThemeSpace;
+    texts: ThemeTexts;
+    textsFontFamily: ThemeTextsFontFamily;
+    textsFontWeights: ThemeTextsFontWeights;
+    textsTextTransform: ThemeTextsTextTransform;
+    timingFunction: ThemeTimingFunction;
+    toEm: (int: number) => string;
+    toPx: (int: number) => string;
+    toRem: (int: number) => string;
+    transformers: {
+        border: (value: CSSScalar) => CSSScalar;
+        px: (value: CSSScalar) => CSSScalar;
+    };
+    transitions: ThemeTransitions;
+    underline: ThemeUnderline;
+}
+export type ThemeFontsUrl = 'https://cdn.welcome-ui.com/fonts' | 'https://cdn.welcometothejungle.com/fonts' | string;
+export type Options = {
+    [param: string]: unknown;
+    defaultFontFamily?: string;
+    defaultFontSize?: number;
+    defaultLetterSpacing?: string;
+    defaultLineHeight?: number;
+    fontsUrl?: ThemeFontsUrl;
+    headingFontFamily?: string;
+    iconFontFamily?: string;
+};
+export declare const createTheme: (options?: Options) => ThemeValues;
+export { darkTheme };

package/dist/types/theme/radii.d.ts

@@ -0,0 +1,12 @@
+import { ThemeValues } from '.';
+export type ThemeRadii = {
+    [key: number]: string;
+    full: string;
+    lg: string;
+    md: string;
+    none: string;
+    sm: string;
+    xl: string;
+    xxl: string;
+};
+export declare const getRadii: (theme: ThemeValues) => ThemeRadii;

package/dist/types/theme/screens.d.ts

@@ -0,0 +1,13 @@
+export type ThemeScreens = {
+    [key: string]: number;
+    [key: number]: number;
+    '3xl': number;
+    '4xl': number;
+    lg: number;
+    md: number;
+    sm: number;
+    xl: number;
+    xs: number;
+    xxl: number;
+};
+export declare const screens: ThemeScreens;

package/dist/types/theme/selection.d.ts

@@ -0,0 +1,4 @@
+import { CSSObject } from '@xstyled/styled-components';
+import { ThemeValues } from '.';
+export type ThemeSelection = CSSObject;
+export declare const getSelection: (theme: ThemeValues) => ThemeSelection;

package/dist/types/theme/shadows.d.ts

@@ -0,0 +1,5 @@
+export type ThemeShadows = {
+    md: string;
+    sm: string;
+};
+export declare const shadows: ThemeShadows;

package/dist/types/theme/space.d.ts

@@ -0,0 +1,18 @@
+import { ThemeValues } from '.';
+export type ThemeSpace = {
+    [key: string]: string;
+    [key: number]: string;
+    '3xl': string;
+    '4xl': string;
+    '5xl': string;
+    '6xl': string;
+    '7xl': string;
+    lg: string;
+    md: string;
+    sm: string;
+    xl: string;
+    xs: string;
+    xxl: string;
+    xxs: string;
+};
+export declare const getSpace: (theme: ThemeValues) => ThemeSpace;

package/dist/types/theme/transitions.d.ts

@@ -0,0 +1,13 @@
+import { CSSObject } from '@xstyled/styled-components';
+export type ThemeTimingFunction = {
+    primary: CSSObject['transition-timing-function'];
+    secondary: CSSObject['transition-timing-function'];
+    tertiary: CSSObject['transition-timing-function'];
+};
+export declare const timingFunction: ThemeTimingFunction;
+export type ThemeTransitions = {
+    fast: CSSObject['transition'];
+    medium: CSSObject['transition'];
+    slow: CSSObject['transition'];
+};
+export declare const transitions: ThemeTransitions;

package/dist/types/theme/typography.d.ts

@@ -0,0 +1,133 @@
+import { CSSObject } from '@xstyled/styled-components';
+import { Options, ThemeValues } from '.';
+export type ThemeFontSizes = {
+    [key: number]: string;
+    h0: string;
+    h1: string;
+    h2: string;
+    h3: string;
+    h4: string;
+    h5: string;
+    h6: string;
+    lg: string;
+    md: string;
+    sm: string;
+    'subtitle-md': string;
+    'subtitle-sm': string;
+    xs: string;
+};
+export declare const getFontSizes: (unit: string, theme: ThemeValues) => ThemeFontSizes;
+export type ThemeLineHeights = {
+    [key: number]: number | string;
+    h0: number | string;
+    h1: number | string;
+    h2: number | string;
+    h3: number | string;
+    h4: number | string;
+    h5: number | string;
+    h6: number | string;
+    html: number | string;
+    lg: number | string;
+    md: number | string;
+    sm: number | string;
+    'subtitle-md': number | string;
+    'subtitle-sm': number | string;
+    xs: number | string;
+};
+export declare const getLineHeights: ({ defaultLineHeight, toRem, }: {
+    defaultLineHeight: number;
+    toRem: (value: number) => string;
+}) => ThemeLineHeights;
+export type ThemeFontWeights = {
+    [key: string]: number;
+    bold: number;
+    medium: number;
+    regular: number;
+};
+export declare const fontWeights: ThemeFontWeights;
+export type ThemeLetterSpacings = {
+    [key: string]: string;
+    h0: string;
+    h1: string;
+    h2: string;
+    h3: string;
+    h4: string;
+    h5: string;
+    h6: string;
+    html: string;
+    lg: string;
+    md: string;
+    sm: string;
+    'subtitle-md': string;
+    'subtitle-sm': string;
+    xs: string;
+};
+export declare const getLetterSpacings: ({ defaultLetterSpacing, toRem, }: {
+    defaultLetterSpacing: string;
+    toRem: (value: number) => string;
+}) => ThemeLetterSpacings;
+export type ThemeTextsFontWeights = {
+    [key: string]: number;
+    h0: number;
+    h1: number;
+    h2: number;
+    h3: number;
+    h4: number;
+    h5: number;
+    h6: number;
+    lg: number;
+    md: number;
+    sm: number;
+    'subtitle-md': number;
+    'subtitle-sm': number;
+    xs: number;
+};
+export declare const getTextsFontWeights: (theme: ThemeValues) => ThemeTextsFontWeights;
+export type ThemeTextsFontFamily = {
+    [key: string]: string;
+    h0: string;
+    h1: string;
+    h2: string;
+    h3: string;
+    h4: string;
+    h5: string;
+    h6: string;
+    'subtitle-md': string;
+    'subtitle-sm': string;
+};
+export declare const getTextsFontFamily: (theme: ThemeValues) => ThemeTextsFontFamily;
+export type ThemeTextsTextTransform = {
+    [key: string]: string;
+    'subtitle-md': string;
+    'subtitle-sm': string;
+};
+export declare const getTextsTextTransform: () => ThemeTextsTextTransform;
+export type ThemeTextsFontColors = {
+    [key: number]: string;
+    h0: string;
+    h1: string;
+    h2: string;
+    h3: string;
+    h4: string;
+    h5: string;
+    h6: string;
+};
+export declare const getTextFontColors: (theme: ThemeValues) => ThemeTextsFontColors;
+export type ThemeTexts = {
+    [key: string]: Partial<{
+        color: CSSObject['color'];
+        fontFamily: CSSObject['fontFamily'];
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        letterSpacing: CSSObject['letterSpacing'];
+        lineHeight: CSSObject['lineHeight'];
+        textTransform: CSSObject['textTransform'];
+    }>;
+};
+export declare const getTexts: (theme: ThemeValues) => ThemeTexts;
+export type ThemeFonts = {
+    headings: string;
+    icons: string;
+    texts: string;
+};
+export declare const getFonts: (defaultFontFamily: Options["defaultFontFamily"], headingFontFamily: Options["headingFontFamily"], iconFontFamily: Options["iconFontFamily"]) => ThemeFonts;

package/dist/types/theme/underline.d.ts

@@ -0,0 +1,9 @@
+import { css } from '@xstyled/styled-components';
+import { ThemeColors } from './colors';
+export type ThemeUnderline = {
+    default: ReturnType<typeof css>;
+    hover: ReturnType<typeof css>;
+};
+export declare const getUnderline: ({ colors }: {
+    colors: ThemeColors;
+}) => ThemeUnderline;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "welcome-ui",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.2",
   "description": "Customizable design system with react • styled-components • styled-system and ariakit.",
   "files": [
     "dist"
@@ -15,8 +15,8 @@
       "require": "./dist/index.js"
     },
     "./*": {
-      "import": "./dist/*.mjs",
-      "require": "./dist/*.js"
+      "import": "./dist/components/*.mjs",
+      "require": "./dist/components/*.js"
     }
   },
   "scripts": {

package/dist/Test.js

@@ -1,3 +0,0 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),e=require("@xstyled/styled-components"),r=e.divBox`
-  ${e.th("test.default")};
-`,n=({children:t})=>s.createElement(r,null,t);exports.Test=n;

package/dist/Test.mjs

@@ -1,9 +0,0 @@
-"use client";
-import e from "react";
-import o, { th as r } from "@xstyled/styled-components";
-const s = o.divBox`
-  ${r("test.default")};
-`, c = ({ children: t }) => /* @__PURE__ */ e.createElement(s, null, t);
-export {
-  c as Test
-};