welcome-ui 0.32.2 → 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

@@ -0,0 +1,18 @@
+"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"]},
+        ${e["primary-40"]} 100%
+      );
+      background-repeat: no-repeat;
+      background-size: 100% 50%;
+      background-position-y: calc(200% - 2px);
+      transition:
+        background-position-y 250ms,
+        background-size 250ms,
+        color 250ms;
+    `,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"},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

@@ -0,0 +1,421 @@
+"use client";
+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;
+  const o = { ...e };
+  for (const l in t)
+    t.hasOwnProperty(l) && (o[l] = d(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",
+  // brand
+  "blue-50": "#27A5D0",
+  "blue-60": "#057AA3",
+  "blue-70": "#025A79",
+  "blue-80": "#013C50",
+  "blue-90": "#00202B",
+  "green-10": "#EAFFD4",
+  "green-20": "#D6F6B4",
+  "green-30": "#BADE94",
+  // brand
+  "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",
+  // brand
+  "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",
+  // brand
+  "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",
+  // brand
+  "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",
+  // brand
+  "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"
+}, p = (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)"
+}), 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}`]
+  };
+}, {}), w = {
+  ...c,
+  ...p(b)
+}, J = {
+  colors: w
+}, A = (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"
+    }
+  ]
+}), E = (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)
+  };
+}, y = ({
+  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
+}), D = {
+  regular: 400,
+  medium: 500,
+  bold: 600
+}, T = ({
+  defaultLetterSpacing: e,
+  toRem: t
+}) => ({
+  html: e,
+  h0: t(-1.7),
+  h1: t(-1.2),
+  h2: t(-1),
+  h3: t(-0.9),
+  h4: t(-0.6),
+  h5: t(-0.5),
+  h6: t(-0.5),
+  lg: e,
+  md: e,
+  sm: e,
+  xs: t(-0.2),
+  "subtitle-md": t(-0.2),
+  "subtitle-sm": t(-0.2)
+}), B = (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
+  };
+}, v = (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: g,
+    textsTextTransform: u
+  } = e;
+  return Object.keys(t).reduce((s, r) => ({
+    ...s,
+    [r]: {
+      color: n[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
+    }
+  }), {});
+}, k = (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)"
+}, S = {
+  slow: `500ms ${a.tertiary}`,
+  medium: `300ms ${a.primary}`,
+  fast: `100ms ${a.secondary}`
+}, U = ({ colors: e }) => ({
+  default: m`
+      background-image: linear-gradient(
+        0deg,
+        ${e["primary-40"]},
+        ${e["primary-40"]} 100%
+      );
+      background-repeat: no-repeat;
+      background-size: 100% 50%;
+      background-position-y: calc(200% - 2px);
+      transition:
+        background-position-y 250ms,
+        background-size 250ms,
+        color 250ms;
+    `,
+  hover: m`
+      opacity: 1;
+      background-position-y: 100%;
+      background-size: 100% 100%;
+    `
+}), N = (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%"
+}), W = {
+  sm: "1px",
+  md: "2px",
+  lg: "3px"
+}, L = {
+  xs: 0,
+  sm: 480,
+  md: 736,
+  lg: 980,
+  xl: 1280,
+  xxl: 1440,
+  "3xl": 1620,
+  "4xl": 1920
+}, O = {
+  sm: "1px 2px 4px 0 rgba(0,0,0,0.05)",
+  md: "3px 4px 10px 0 rgba(0,0,0,0.07)"
+}, I = (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)
+}), z = (e) => ({
+  backgroundColor: e.colors["primary-40"],
+  color: e.colors["neutral-90"]
+}), H = ({ colors: e }) => {
+  function t(o = e["primary-40"]) {
+    return {
+      boxShadow: `0 0 0 2px ${o}`
+    };
+  }
+  return t;
+}, 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 = 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 = { ...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 {
+  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;