@everlywell/ui-kit 0.0.2 → 0.2.0-next

package/index.d.mts

@@ -1,4 +1,8 @@
-export { default as Button, type ButtonProps, } from './lib/theme/forms/Button/Button';
-export { ChakraBaseProvider as ThemeProvider, extendBaseTheme as extendTheme, } from '@chakra-ui/react';
+export { default as Button, type ButtonProps, } from './lib/theme/actions/Button/Button';
+export { default as Box, type BoxProps } from './lib/theme/layout/Box/Box';
+export { Grid, GridItem, type GridProps, type GridItemProps, } from './lib/theme/layout/Grid';
+export { default as Heading, type HeadingProps, } from './lib/theme/typography/Heading/Heading';
+export { default as ThemeProvider } from './lib/components/ThemeProvider';
+export { extendBaseTheme as extendTheme } from '@chakra-ui/react';
 export { default as styled } from '@emotion/styled';
 export { theme } from './lib/theme';

package/index.d.ts

@@ -1,4 +1,8 @@
-export { default as Button, type ButtonProps, } from './lib/theme/forms/Button/Button';
-export { ChakraBaseProvider as ThemeProvider, extendBaseTheme as extendTheme, } from '@chakra-ui/react';
+export { default as Button, type ButtonProps, } from './lib/theme/actions/Button/Button';
+export { default as Box, type BoxProps } from './lib/theme/layout/Box/Box';
+export { Grid, GridItem, type GridProps, type GridItemProps, } from './lib/theme/layout/Grid';
+export { default as Heading, type HeadingProps, } from './lib/theme/typography/Heading/Heading';
+export { default as ThemeProvider } from './lib/components/ThemeProvider';
+export { extendBaseTheme as extendTheme } from '@chakra-ui/react';
 export { default as styled } from '@emotion/styled';
 export { theme } from './lib/theme';

package/index.js

@@ -1 +1,78 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("@chakra-ui/react"),s=require("@emotion/styled"),i=["green","red"],l=o.defineStyleConfig({baseStyle:{fontWeight:"regular",lineHeight:"button",letterSpacing:"normal",borderRadius:"50px",_disabled:{span:{display:"inline-flex"}}},sizes:{sm:{fontSize:"sm",px:[4,5],py:[2,3],".chakra-button__icon > svg":{width:"1.25rem",height:"1.25rem"}},md:{fontSize:"md",px:[5,6],py:[4,5],svg:{width:["1.25rem","1.5rem"],height:["1.25rem","1.5rem"]}},wide:{fontSize:"md",px:9,py:5,width:"100%",".chakra-button__icon > svg":{width:"1.5rem",height:"1.5rem"}}},variants:{solid:a=>{const{colorScheme:t}=a;return i.includes(t)?{bg:`${t}.base`,color:"white.base",":hover, &.hover":{bg:`${t}.dark`},":active, &.active":{bg:`${t}.dark`},":disabled":{bg:"grayscale.lightGrey",color:"grayscale.mediumGrey"}}:{bg:"white.base",color:"black.base",":hover, &.hover":{bg:"green.wash"},":active, &.active":{bg:"green.wash"},":disabled":{bg:"grayscale.lightGrey",color:"grayscale.mediumGrey"}}},outline:a=>{const{colorScheme:t}=a;return i.includes(t)?{color:`${t}.base`,boxShadow:r=>`inset 0 0 0 2px ${r.colors[t].base}`,":hover, &.hover":{color:`${t}.dark`,boxShadow:r=>`inset 0 0 0 2px ${r.colors[t].dark}`},":active, &.active":{color:`${t}.dark`,boxShadow:r=>`inset 0 0 0 2px ${r.colors[t].dark}`},":disabled":{color:"grayscale.lightGrey",boxShadow:r=>`inset 0 0 0 2px ${r.colors.grayscale.lightGrey}`,opacity:.7}}:{color:"white.base",boxShadow:r=>`inset 0 0 0 2px ${r.colors.white.base}`,":hover, &.hover":{color:"white.base",boxShadow:r=>`inset 0 0 0 2px ${r.colors.green.wash}`},":active, &.active":{color:"white.base",boxShadow:r=>`inset 0 0 0 2px ${r.colors.green.wash}`},":disabled":{color:"grayscale.lightGrey",boxShadow:r=>`inset 0 0 0 2px ${r.colors.grayscale.lightGrey}`,opacity:.7}}}},defaultProps:{size:"md",variant:"solid",colorScheme:"green"}}),h={white:{...o.baseTheme.colors.whiteAlpha,base:"#FFFFFF"},black:{...o.baseTheme.colors.blackAlpha,base:"#0F0F0F"},grayscale:{darkGrey:"#545454",grey:"#949494",mediumGrey:"#A9A9A9",lightGrey:"#EEEEEE",darkCream:"#EDEDE8",cream:"#F2F2ED",lightCream:"#F9F9F6"},red:{50:"#FFF4F4",100:"#FFC9C7",200:"#FF9E99",300:"#FF6B62",400:"#FF6B62",500:"#FF6B62",600:"#FF6B62",700:"#FF6B62",800:"#FF6B62",900:"#650500",wash:"#FFF4F4",lighter:"#FFC9C7",light:"#FF9E99",base:"#FF6B62",dark:"#650500"},yellow:{wash:"#FFFEF2",lighter:"#FFF8BC",light:"#FFF386",base:"#FFEC42",dark:"#5C5300"},green:{50:"#EFF9F5",100:"#A1DEC1",200:"#68CA9C",300:"#28724F",400:"#28724F",500:"#28724F",600:"#28724F",700:"#28724F",800:"#28724F",900:"#143927",wash:"#EFF9F5",lighter:"#A1DEC1",light:"#68CA9C",base:"#28724F",dark:"#143927"},lightBlue:{wash:"#F5FBFE",lighter:"#CBECF9",light:"#A1DDF5",base:"#6BCAEF",dark:"#073243"},blue:{wash:"#DFF6FF",lighter:"#61D1FD",light:"#0387BB",base:"#012B3B",dark:"#000C11"},indigo:{wash:"#F5FBFE",lighter:"#CBECF9",light:"#A1DDF5",base:"#6BCAEF",dark:"#073243"},violet:{wash:"#FAEFFF",lighter:"#E6ADFF",light:"#D36BFF",base:"#B917FF",dark:"#380050"}},{semanticTokens:d,sizes:g,space:b,...F}=o.baseTheme,e=a=>`${a/16}rem`,c=a=>a,n=c({...F,fonts:{body:'"EW Nexa", "Helvetica Neue", Helvetica, Arial, sans-serif"',heading:'"EW Nexa", "Helvetica Neue", Helvetica, Arial, sans-serif"',mono:"Menlo, monospace"},fontWeights:{thin:"100",xlight:"200",light:"300",book:"400",regular:"500",bold:"600",xbold:"700"},fontSizes:{xs:e(14),sm:e(16),md:e(18),lg:e(21),xl:e(25),"2xl":e(33),"3xl":e(37),"4xl":e(46)},letterSpacings:{tightest:"0px",tight:"0.2px",normal:"0.25px",wide:"0.5px",widest:"3.16px"},lineHeights:{body:e(29),button:e(24)},sizes:{max:"max-content",min:"min-content",full:"100%"},space:{0:0,1:e(2),2:e(4),3:e(8),4:e(12),5:e(16),6:e(24),7:e(32),8:e(40),9:e(48),10:e(64),11:e(80)},colors:h,components:{Button:l}});Object.defineProperty(exports,"Button",{enumerable:!0,get:()=>o.Button});Object.defineProperty(exports,"ThemeProvider",{enumerable:!0,get:()=>o.ChakraBaseProvider});Object.defineProperty(exports,"extendTheme",{enumerable:!0,get:()=>o.extendBaseTheme});exports.styled=s;exports.theme=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("@chakra-ui/react"),a=require("react/jsx-runtime"),f=require("react"),b=require("@emotion/react"),w=require("@emotion/styled"),y=f.createContext({spacing:0,columns:1}),F=f.forwardRef(({children:o,alignEdges:t=!0,width:n,columns:c=1,spacing:l,...i},m)=>{const d=r.useTheme(),s=l??d.space[5],h=Array.isArray(s)?s.map(x=>-1*x):-1*s;return a.jsx(y.Provider,{value:{spacing:s,columns:c},children:a.jsx(r.Box,{m:t?h:void 0,children:a.jsx(r.Flex,{flexWrap:"wrap",pl:s,pt:s,width:n??"100%",...i,ref:m,children:o})})})});F.displayName="Grid";const p=f.forwardRef(({children:o,width:t,...n},c)=>{const{columns:l,spacing:i}=f.useContext(y),m=Array.isArray(t)?t.map(s=>s==="auto"?1:0):t==="auto"?1:0,d=()=>(Array.isArray(l)?l:[l]).map(h=>`${100/h}%`);return a.jsx(r.Box,{width:t??d()??"100%",pr:i,pb:i,...n,sx:{flexGrow:m,...n.sx},ref:c,children:o})});p.displayName="GridItem";const u=()=>a.jsx(b.Global,{styles:`
+      /* PP Agrandir */
+      /* Agrandir is used for page headers, section titles, brand moments and quotations. */
+      @font-face {
+        font-family: 'PP Agrandir';
+        src: url('https://cdn.everlywell.com/fonts/PP Agrandir/PPAgrandir-Variable.woff2') format('woff2');
+        font-style: normal;
+        font-display: swap;
+      }
+
+      /* DM Sans */
+      /* Used for: Body copy, button copy and smaller sizes. */
+      @font-face {
+        font-family: 'DM Sans';
+        src: url('https://cdn.everlywell.com/fonts/DM Sans/DMSans-Italic-VariableFont_opsz,wght.woff2') format('woff2');
+        font-style: italic;
+        font-stretch: normal;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: 'DM Sans';
+        src: url('https://cdn.everlywell.com/fonts/DM Sans/DMSans-VariableFont_opsz,wght.woff2') format('woff2');
+        font-style: normal;
+        font-stretch: normal;
+        font-display: swap;
+      }
+
+      /* DM Mono */
+      /* Used for: Body copy, button copy and smaller sizes. */
+      @font-face {
+        font-family: 'DM Mono';
+        src: url('https://cdn.everlywell.com/fonts/DM Mono/DMMono-Light.woff2') format('woff2');
+        font-style: normal;
+        font-weight: 300;
+        font-stretch: normal;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: 'DM Mono';
+        src: url('https://cdn.everlywell.com/fonts/DM Mono/DMMono-LightItalic.woff2') format('woff2');
+        font-style: italic;
+        font-weight: 300;
+        font-stretch: normal;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: 'DM Mono';
+        src: url('https://cdn.everlywell.com/fonts/DM Mono/DMMono-Regular.woff2') format('woff2');
+        font-style: normal;
+        font-weight: 400;
+        font-stretch: normal;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: 'DM Mono';
+        src: url('https://cdn.everlywell.com/fonts/DM Mono/DMMono-Italic.woff2') format('woff2');
+        font-style: italic;
+        font-weight: 400;
+        font-stretch: normal;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: 'DM Mono';
+        src: url('https://cdn.everlywell.com/fonts/DM Mono/DMMono-Medium.woff2') format('woff2');
+        font-style: normal;
+        font-weight: 500;
+        font-stretch: normal;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: 'DM Mono';
+        src: url('https://cdn.everlywell.com/fonts/DM Mono/DMMono-MediumItalic.woff2') format('woff2');
+        font-style: italic;
+        font-weight: 500;
+        font-stretch: normal;
+        font-display: swap;
+      }
+      `}),M=({children:o,...t})=>a.jsxs(r.ChakraBaseProvider,{...t,children:[a.jsx(u,{}),o]}),g=["green","red"],S=r.defineStyleConfig({baseStyle:{fontWeight:"medium",lineHeight:"body",letterSpacing:"normal",borderRadius:"50px",_disabled:{span:{display:"inline-flex"}}},sizes:{sm:{fontSize:["md","lg"],px:[4,5],py:[2,3],".chakra-button__icon > svg":{width:"1.25rem",height:"1.25rem"}},md:{fontSize:["lg","xl"],px:[5,6],py:[4,5],svg:{width:["1.25rem","1.5rem"],height:["1.25rem","1.5rem"]}},wide:{fontSize:"xl",px:9,py:5,width:"100%",".chakra-button__icon > svg":{width:"1.5rem",height:"1.5rem"}}},variants:{primary:o=>{const{colorScheme:t}=o;return g.includes(t)?{bg:`${t}.base`,color:"white.base",":hover, &.hover":{bg:`${t}.dark`},":active, &.active":{bg:`${t}.dark`},":disabled":{bg:"grayscale.lightGrey",color:"grayscale.mediumGrey"}}:{bg:"white.base",color:"black.base",":hover, &.hover":{bg:"green.wash"},":active, &.active":{bg:"green.wash"},":disabled":{bg:"grayscale.lightGrey",color:"grayscale.mediumGrey"}}},secondary:o=>{const{colorScheme:t}=o;return g.includes(t)?{color:`${t}.base`,boxShadow:n=>`inset 0 0 0 2px ${n.colors[t].base}`,":hover, &.hover":{color:`${t}.dark`,boxShadow:n=>`inset 0 0 0 2px ${n.colors[t].dark}`},":active, &.active":{color:`${t}.dark`,boxShadow:n=>`inset 0 0 0 2px ${n.colors[t].dark}`},":disabled":{color:"grayscale.lightGrey",boxShadow:n=>`inset 0 0 0 2px ${n.colors.grayscale.lightGrey}`,opacity:.7}}:{color:"white.base",boxShadow:n=>`inset 0 0 0 2px ${n.colors.white.base}`,":hover, &.hover":{color:"white.base",boxShadow:n=>`inset 0 0 0 2px ${n.colors.green.wash}`},":active, &.active":{color:"white.base",boxShadow:n=>`inset 0 0 0 2px ${n.colors.green.wash}`},":disabled":{color:"grayscale.lightGrey",boxShadow:n=>`inset 0 0 0 2px ${n.colors.grayscale.lightGrey}`,opacity:.7}}}},defaultProps:{size:"md",variant:"primary",colorScheme:"green"}}),D=r.defineStyleConfig({baseStyle:{color:"green.base",fontWeight:"normal",_hover:{textDecoration:"underline",cursor:"pointer"}},variants:{},sizes:{sm:{fontSize:["3xs","xs"],lineHeight:"150%"},md:{fontSize:["2xs","sm"],lineHeight:"150%"},lg:{fontSize:["xs","md"],lineHeight:"150%"}},defaultProps:{size:"md"}}),v=r.defineStyleConfig({baseStyle:{fontFamily:o=>`${o.fonts.heading}`,fontWeight:"normal"},sizes:{"3xl":{fontSize:["6xl","11xl"],lineHeight:"shorter"},"2xl":{fontSize:["6xl","9xl"],lineHeight:"shorter"},xl:{fontSize:["4xl","7xl"],lineHeight:"shorter"},lg:{fontFamily:o=>`${o.fonts.body}`,fontWeight:"medium",fontSize:["3xl","6xl"],lineHeight:"short"},md:{fontFamily:o=>`${o.fonts.body}`,fontWeight:"medium",fontSize:["2xl","4xl"],lineHeight:"short"},sm:{fontFamily:o=>`${o.fonts.body}`,fontWeight:"medium",fontSize:["lg","3xl"],lineHeight:"140%"}},defaultProps:{size:"md"}}),C=r.defineStyleConfig({baseStyle:{fontWeight:"normal",lineHeight:"base",letterSpacing:"normal",fontSize:"md",p:0},sizes:{xs:{fontSize:["2xs","xs"]},sm:{fontSize:["xs","sm"]},md:{fontSize:["sm","md"]},lg:{fontSize:["md","lg"]},xl:{fontSize:["lg","2xl"],lineHeight:["short","shorter"]}},defaultProps:{size:"lg"}}),z={white:{...r.baseTheme.colors.whiteAlpha,base:"#FFFFFF"},black:{...r.baseTheme.colors.blackAlpha,base:"#0F0F0F"},grayscale:{darkGrey:"#545454",grey:"#949494",mediumGrey:"#A9A9A9",lightGrey:"#EEEEEE",darkCream:"#EDEDE8",cream:"#F2F2ED",lightCream:"#F9F9F6"},red:{50:"#FFF4F4",100:"#FFC9C7",200:"#FF9E99",300:"#FF6B62",400:"#FF6B62",500:"#FF6B62",600:"#FF6B62",700:"#FF6B62",800:"#FF6B62",900:"#650500",wash:"#FFF4F4",lighter:"#FFC9C7",light:"#FF9E99",base:"#FF6B62",dark:"#650500"},yellow:{wash:"#FFFEF2",lighter:"#FFF8BC",light:"#FFF386",base:"#FFEC42",dark:"#5C5300"},green:{50:"#EFF9F5",100:"#A1DEC1",200:"#68CA9C",300:"#28724F",400:"#28724F",500:"#28724F",600:"#28724F",700:"#28724F",800:"#28724F",900:"#143927",wash:"#EFF9F5",lighter:"#A1DEC1",light:"#68CA9C",base:"#28724F",dark:"#143927"},lightBlue:{wash:"#F5FBFE",lighter:"#CBECF9",light:"#A1DDF5",base:"#6BCAEF",dark:"#073243"},blue:{wash:"#DFF6FF",lighter:"#61D1FD",light:"#0387BB",base:"#012B3B",dark:"#000C11"},indigo:{wash:"#F5FBFE",lighter:"#CBECF9",light:"#A1DDF5",base:"#6BCAEF",dark:"#073243"},violet:{wash:"#FAEFFF",lighter:"#E6ADFF",light:"#D36BFF",base:"#B917FF",dark:"#380050"}},{semanticTokens:k,sizes:P,space:$,...B}=r.baseTheme,e=o=>`${o/16}rem`,A=o=>o,E=A({...B,fonts:{body:"'DM Sans', sans-serif",heading:"PP Agrandir, sans-serif",mono:"DM Mono, monospace"},fontWeights:{thin:"100",xlight:"200",light:"300",normal:"400",medium:"500",semiBold:"600",bold:"700",xbold:"800",black:"900"},fontSizes:{"3xs":e(6),"2xs":e(8),xs:e(10),sm:e(12),md:e(14),lg:e(16),xl:e(18),"2xl":e(20),"3xl":e(24),"4xl":e(28),"5xl":e(32),"6xl":e(36),"7xl":e(40),"9xl":e(48),"10xl":e(56),"11xl":e(68)},letterSpacings:{tighter:"-0.05em",tight:"-0.025em",normal:"0",wide:"0.025em",wider:"0.05em",widest:"0.1em"},lineHeights:{body:1.5,normal:"normal",none:1,shorter:1.1,short:1.3,base:1.5,tall:1.5},sizes:{max:"max-content",min:"min-content",full:"100%"},space:{0:0,1:e(2),2:e(4),3:e(8),4:e(12),5:e(16),6:e(24),7:e(32),8:e(40),9:e(48),10:e(64),11:e(80)},colors:z,components:{Button:S,Link:D,Heading:v,Text:C}});Object.defineProperty(exports,"Box",{enumerable:!0,get:()=>r.Box});Object.defineProperty(exports,"Button",{enumerable:!0,get:()=>r.Button});Object.defineProperty(exports,"Heading",{enumerable:!0,get:()=>r.Heading});Object.defineProperty(exports,"extendTheme",{enumerable:!0,get:()=>r.extendBaseTheme});exports.styled=w;exports.Grid=F;exports.GridItem=p;exports.ThemeProvider=M;exports.theme=E;

package/index.mjs

@@ -1,11 +1,148 @@
-import { defineStyleConfig as i, baseTheme as t } from "@chakra-ui/react";
-import { Button as w, ChakraBaseProvider as y, extendBaseTheme as v } from "@chakra-ui/react";
-import { default as u } from "@emotion/styled";
-const s = ["green", "red"], l = i({
+import { useTheme as x, Box as F, Flex as b, ChakraBaseProvider as u, defineStyleConfig as i, baseTheme as h } from "@chakra-ui/react";
+import { Box as q, Button as J, Heading as K, extendBaseTheme as Q } from "@chakra-ui/react";
+import { jsx as s, jsxs as M } from "react/jsx-runtime";
+import y, { createContext as S, useContext as D } from "react";
+import { Global as v } from "@emotion/react";
+import { default as Y } from "@emotion/styled";
+const p = S({ spacing: 0, columns: 1 }), z = y.forwardRef(
+  ({
+    children: o,
+    alignEdges: t = !0,
+    width: n,
+    columns: f = 1,
+    spacing: a,
+    ...l
+  }, c) => {
+    const d = x(), r = a ?? d.space[5], m = Array.isArray(r) ? r.map((w) => -1 * w) : -1 * r;
+    return /* @__PURE__ */ s(p.Provider, { value: { spacing: r, columns: f }, children: /* @__PURE__ */ s(F, { m: t ? m : void 0, children: /* @__PURE__ */ s(
+      b,
+      {
+        flexWrap: "wrap",
+        pl: r,
+        pt: r,
+        width: n ?? "100%",
+        ...l,
+        ref: c,
+        children: o
+      }
+    ) }) });
+  }
+);
+z.displayName = "Grid";
+const C = y.forwardRef(
+  ({ children: o, width: t, ...n }, f) => {
+    const { columns: a, spacing: l } = D(p), c = Array.isArray(t) ? t.map((r) => r === "auto" ? 1 : 0) : t === "auto" ? 1 : 0;
+    return /* @__PURE__ */ s(
+      F,
+      {
+        width: t ?? (Array.isArray(a) ? a : [a]).map((m) => `${100 / m}%`) ?? "100%",
+        pr: l,
+        pb: l,
+        ...n,
+        sx: {
+          flexGrow: c,
+          ...n.sx
+        },
+        ref: f,
+        children: o
+      }
+    );
+  }
+);
+C.displayName = "GridItem";
+const B = () => /* @__PURE__ */ s(
+  v,
+  {
+    styles: `
+      /* PP Agrandir */
+      /* Agrandir is used for page headers, section titles, brand moments and quotations. */
+      @font-face {
+        font-family: 'PP Agrandir';
+        src: url('https://cdn.everlywell.com/fonts/PP Agrandir/PPAgrandir-Variable.woff2') format('woff2');
+        font-style: normal;
+        font-display: swap;
+      }
+
+      /* DM Sans */
+      /* Used for: Body copy, button copy and smaller sizes. */
+      @font-face {
+        font-family: 'DM Sans';
+        src: url('https://cdn.everlywell.com/fonts/DM Sans/DMSans-Italic-VariableFont_opsz,wght.woff2') format('woff2');
+        font-style: italic;
+        font-stretch: normal;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: 'DM Sans';
+        src: url('https://cdn.everlywell.com/fonts/DM Sans/DMSans-VariableFont_opsz,wght.woff2') format('woff2');
+        font-style: normal;
+        font-stretch: normal;
+        font-display: swap;
+      }
+
+      /* DM Mono */
+      /* Used for: Body copy, button copy and smaller sizes. */
+      @font-face {
+        font-family: 'DM Mono';
+        src: url('https://cdn.everlywell.com/fonts/DM Mono/DMMono-Light.woff2') format('woff2');
+        font-style: normal;
+        font-weight: 300;
+        font-stretch: normal;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: 'DM Mono';
+        src: url('https://cdn.everlywell.com/fonts/DM Mono/DMMono-LightItalic.woff2') format('woff2');
+        font-style: italic;
+        font-weight: 300;
+        font-stretch: normal;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: 'DM Mono';
+        src: url('https://cdn.everlywell.com/fonts/DM Mono/DMMono-Regular.woff2') format('woff2');
+        font-style: normal;
+        font-weight: 400;
+        font-stretch: normal;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: 'DM Mono';
+        src: url('https://cdn.everlywell.com/fonts/DM Mono/DMMono-Italic.woff2') format('woff2');
+        font-style: italic;
+        font-weight: 400;
+        font-stretch: normal;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: 'DM Mono';
+        src: url('https://cdn.everlywell.com/fonts/DM Mono/DMMono-Medium.woff2') format('woff2');
+        font-style: normal;
+        font-weight: 500;
+        font-stretch: normal;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: 'DM Mono';
+        src: url('https://cdn.everlywell.com/fonts/DM Mono/DMMono-MediumItalic.woff2') format('woff2');
+        font-style: italic;
+        font-weight: 500;
+        font-stretch: normal;
+        font-display: swap;
+      }
+      `
+  }
+), R = ({
+  children: o,
+  ...t
+}) => /* @__PURE__ */ M(u, { ...t, children: [
+  /* @__PURE__ */ s(B, {}),
+  o
+] }), g = ["green", "red"], A = i({
   // The styles all button have in common
   baseStyle: {
-    fontWeight: "regular",
-    lineHeight: "button",
+    fontWeight: "medium",
+    lineHeight: "body",
     letterSpacing: "normal",
     borderRadius: "50px",
     // <-- border radius is same for all variants and sizes
@@ -19,7 +156,7 @@ const s = ["green", "red"], l = i({
   // Two sizes: sm and md
   sizes: {
     sm: {
-      fontSize: "sm",
+      fontSize: ["md", "lg"],
       px: [4, 5],
       // <-- px is short for paddingLeft and paddingRight
       py: [2, 3],
@@ -30,7 +167,7 @@ const s = ["green", "red"], l = i({
       }
     },
     md: {
-      fontSize: "md",
+      fontSize: ["lg", "xl"],
       px: [5, 6],
       // <-- px is short for paddingLeft and paddingRight
       py: [4, 5],
@@ -41,7 +178,7 @@ const s = ["green", "red"], l = i({
       }
     },
     wide: {
-      fontSize: "md",
+      fontSize: "xl",
       px: 9,
       // <-- these values are tokens from the design system
       py: 5,
@@ -53,18 +190,18 @@ const s = ["green", "red"], l = i({
       }
     }
   },
-  // Two variants: outline and solid
+  // Two variants: primary and secondary
   variants: {
-    solid: (r) => {
-      const { colorScheme: a } = r;
-      return s.includes(a) ? {
-        bg: `${a}.base`,
+    primary: (o) => {
+      const { colorScheme: t } = o;
+      return g.includes(t) ? {
+        bg: `${t}.base`,
         color: "white.base",
         ":hover, &.hover": {
-          bg: `${a}.dark`
+          bg: `${t}.dark`
         },
         ":active, &.active": {
-          bg: `${a}.dark`
+          bg: `${t}.dark`
         },
         ":disabled": {
           bg: "grayscale.lightGrey",
@@ -85,52 +222,156 @@ const s = ["green", "red"], l = i({
         }
       };
     },
-    outline: (r) => {
-      const { colorScheme: a } = r;
-      return s.includes(a) ? {
-        color: `${a}.base`,
-        boxShadow: (o) => `inset 0 0 0 2px ${o.colors[a].base}`,
+    secondary: (o) => {
+      const { colorScheme: t } = o;
+      return g.includes(t) ? {
+        color: `${t}.base`,
+        boxShadow: (n) => `inset 0 0 0 2px ${n.colors[t].base}`,
         ":hover, &.hover": {
-          color: `${a}.dark`,
-          boxShadow: (o) => `inset 0 0 0 2px ${o.colors[a].dark}`
+          color: `${t}.dark`,
+          boxShadow: (n) => `inset 0 0 0 2px ${n.colors[t].dark}`
         },
         ":active, &.active": {
-          color: `${a}.dark`,
-          boxShadow: (o) => `inset 0 0 0 2px ${o.colors[a].dark}`
+          color: `${t}.dark`,
+          boxShadow: (n) => `inset 0 0 0 2px ${n.colors[t].dark}`
         },
         ":disabled": {
           color: "grayscale.lightGrey",
-          boxShadow: (o) => `inset 0 0 0 2px ${o.colors.grayscale.lightGrey}`,
+          boxShadow: (n) => `inset 0 0 0 2px ${n.colors.grayscale.lightGrey}`,
           opacity: 0.7
         }
       } : {
         color: "white.base",
-        boxShadow: (o) => `inset 0 0 0 2px ${o.colors.white.base}`,
+        boxShadow: (n) => `inset 0 0 0 2px ${n.colors.white.base}`,
         ":hover, &.hover": {
           color: "white.base",
-          boxShadow: (o) => `inset 0 0 0 2px ${o.colors.green.wash}`
+          boxShadow: (n) => `inset 0 0 0 2px ${n.colors.green.wash}`
         },
         ":active, &.active": {
           color: "white.base",
-          boxShadow: (o) => `inset 0 0 0 2px ${o.colors.green.wash}`
+          boxShadow: (n) => `inset 0 0 0 2px ${n.colors.green.wash}`
         },
         ":disabled": {
           color: "grayscale.lightGrey",
-          boxShadow: (o) => `inset 0 0 0 2px ${o.colors.grayscale.lightGrey}`,
+          boxShadow: (n) => `inset 0 0 0 2px ${n.colors.grayscale.lightGrey}`,
           opacity: 0.7
         }
       };
     }
+    // tertiary = text/link button
   },
   // The default size and variant values
   defaultProps: {
     size: "md",
-    variant: "solid",
+    variant: "primary",
     colorScheme: "green"
   }
-}), F = {
-  white: { ...t.colors.whiteAlpha, base: "#FFFFFF" },
-  black: { ...t.colors.blackAlpha, base: "#0F0F0F" },
+}), E = i({
+  baseStyle: {
+    color: "green.base",
+    fontWeight: "normal",
+    _hover: {
+      textDecoration: "underline",
+      cursor: "pointer"
+    }
+  },
+  variants: {},
+  sizes: {
+    sm: {
+      fontSize: ["3xs", "xs"],
+      lineHeight: "150%"
+    },
+    md: {
+      fontSize: ["2xs", "sm"],
+      lineHeight: "150%"
+    },
+    lg: {
+      fontSize: ["xs", "md"],
+      lineHeight: "150%"
+    }
+  },
+  // The default size and variant values
+  defaultProps: {
+    size: "md"
+  }
+}), k = i({
+  baseStyle: {
+    fontFamily: (o) => `${o.fonts.heading}`,
+    fontWeight: "normal"
+  },
+  sizes: {
+    "3xl": {
+      // Home header
+      fontSize: ["6xl", "11xl"],
+      lineHeight: "shorter"
+    },
+    "2xl": {
+      // Section header
+      fontSize: ["6xl", "9xl"],
+      lineHeight: "shorter"
+    },
+    xl: {
+      // Product header
+      fontSize: ["4xl", "7xl"],
+      lineHeight: "shorter"
+    },
+    lg: {
+      // Large title
+      fontFamily: (o) => `${o.fonts.body}`,
+      fontWeight: "medium",
+      fontSize: ["3xl", "6xl"],
+      lineHeight: "short"
+    },
+    md: {
+      // Medium title
+      fontFamily: (o) => `${o.fonts.body}`,
+      fontWeight: "medium",
+      fontSize: ["2xl", "4xl"],
+      lineHeight: "short"
+    },
+    sm: {
+      // Small title
+      fontFamily: (o) => `${o.fonts.body}`,
+      fontWeight: "medium",
+      fontSize: ["lg", "3xl"],
+      lineHeight: "140%"
+    }
+  },
+  defaultProps: {
+    size: "md"
+  }
+}), $ = i({
+  baseStyle: {
+    fontWeight: "normal",
+    lineHeight: "base",
+    letterSpacing: "normal",
+    fontSize: "md",
+    p: 0
+  },
+  sizes: {
+    xs: {
+      fontSize: ["2xs", "xs"]
+    },
+    sm: {
+      fontSize: ["xs", "sm"]
+    },
+    md: {
+      fontSize: ["sm", "md"]
+    },
+    lg: {
+      fontSize: ["md", "lg"]
+    },
+    xl: {
+      fontSize: ["lg", "2xl"],
+      lineHeight: ["short", "shorter"]
+    }
+  },
+  defaultProps: {
+    size: "lg"
+  }
+}), G = {
+  white: { ...h.colors.whiteAlpha, base: "#FFFFFF" },
+  black: { ...h.colors.blackAlpha, base: "#0F0F0F" },
   grayscale: {
     darkGrey: "#545454",
     grey: "#949494",
@@ -229,46 +470,60 @@ const s = ["green", "red"], l = i({
     base: "#B917FF",
     dark: "#380050"
   }
-}, { semanticTokens: d, sizes: g, space: b, ...h } = t, e = (r) => `${r / 16}rem`, c = (r) => r, m = c({
-  ...h,
+}, { semanticTokens: L, sizes: V, space: j, ...P } = h, e = (o) => `${o / 16}rem`, H = (o) => o, N = H({
+  ...P,
   fonts: {
-    body: '"EW Nexa", "Helvetica Neue", Helvetica, Arial, sans-serif"',
-    heading: '"EW Nexa", "Helvetica Neue", Helvetica, Arial, sans-serif"',
-    mono: "Menlo, monospace"
+    body: "'DM Sans', sans-serif",
+    heading: "PP Agrandir, sans-serif",
+    mono: "DM Mono, monospace"
   },
   fontWeights: {
-    // TODO: redefine font weights with design
     thin: "100",
     xlight: "200",
     light: "300",
-    book: "400",
-    regular: "500",
-    bold: "600",
-    xbold: "700"
+    normal: "400",
+    medium: "500",
+    semiBold: "600",
+    bold: "700",
+    xbold: "800",
+    black: "900"
   },
   fontSizes: {
-    // TODO: redefine font sizes with design
-    xs: e(14),
-    sm: e(16),
-    md: e(18),
-    lg: e(21),
-    xl: e(25),
-    "2xl": e(33),
-    "3xl": e(37),
-    "4xl": e(46)
+    "3xs": e(6),
+    "2xs": e(8),
+    xs: e(10),
+    sm: e(12),
+    md: e(14),
+    lg: e(16),
+    xl: e(18),
+    "2xl": e(20),
+    "3xl": e(24),
+    "4xl": e(28),
+    "5xl": e(32),
+    "6xl": e(36),
+    "7xl": e(40),
+    "9xl": e(48),
+    "10xl": e(56),
+    "11xl": e(68)
   },
   letterSpacings: {
     // TODO: redefine letter spacings with design
-    tightest: "0px",
-    tight: "0.2px",
-    normal: "0.25px",
-    wide: "0.5px",
-    widest: "3.16px"
+    tighter: "-0.05em",
+    tight: "-0.025em",
+    normal: "0",
+    wide: "0.025em",
+    wider: "0.05em",
+    widest: "0.1em"
   },
   lineHeights: {
     // TODO: redefine line heights with design
-    body: e(29),
-    button: e(24)
+    body: 1.5,
+    normal: "normal",
+    none: 1,
+    shorter: 1.1,
+    short: 1.3,
+    base: 1.5,
+    tall: 1.5
   },
   sizes: {
     max: "max-content",
@@ -295,15 +550,22 @@ const s = ["green", "red"], l = i({
     10: e(64),
     11: e(80)
   },
-  colors: F,
+  colors: G,
   components: {
-    Button: l
+    Button: A,
+    Link: E,
+    Heading: k,
+    Text: $
   }
 });
 export {
-  w as Button,
-  y as ThemeProvider,
-  v as extendTheme,
-  u as styled,
-  m as theme
+  q as Box,
+  J as Button,
+  z as Grid,
+  C as GridItem,
+  K as Heading,
+  R as ThemeProvider,
+  Q as extendTheme,
+  Y as styled,
+  N as theme
 };

package/lib/components/Fonts/Fonts.d.ts

@@ -0,0 +1,2 @@
+declare const Fonts: () => import("react/jsx-runtime").JSX.Element;
+export default Fonts;

package/lib/components/Fonts/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Fonts';

package/lib/components/ThemeProvider/ThemeProvider.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ChakraProviderProps } from '@chakra-ui/react';
+export type ThemeProviderProps = ChakraProviderProps;
+export declare const ThemeProvider: React.FC<ThemeProviderProps>;
+export default ThemeProvider;

package/lib/components/ThemeProvider/index.d.ts

@@ -0,0 +1 @@
+export { default } from './ThemeProvider';

package/lib/theme/{forms/Button/config.d.ts → actions/Button/Button.config.d.ts}

@@ -13,7 +13,7 @@ declare const _default: {
     } | undefined;
     sizes?: {
         sm: {
-            fontSize: string;
+            fontSize: ("md" | "lg")[];
             px: number[];
             py: number[];
             '.chakra-button__icon > svg': {
@@ -22,7 +22,7 @@ declare const _default: {
             };
         };
         md: {
-            fontSize: string;
+            fontSize: ("lg" | "xl")[];
             px: number[];
             py: number[];
             svg: {
@@ -42,7 +42,7 @@ declare const _default: {
         };
     } | undefined;
     variants?: {
-        solid: (props: StyleFunctionProps) => {
+        primary: (props: StyleFunctionProps) => {
             bg: string;
             color: string;
             ':hover, &.hover': {
@@ -56,7 +56,7 @@ declare const _default: {
                 color: string;
             };
         };
-        outline: (props: StyleFunctionProps) => {
+        secondary: (props: StyleFunctionProps) => {
             color: string;
             boxShadow: (theme: Record<string, any>) => string;
             ':hover, &.hover': {
@@ -76,7 +76,7 @@ declare const _default: {
     } | undefined;
     defaultProps?: {
         size?: "sm" | "md" | "wide" | undefined;
-        variant?: "outline" | "solid" | undefined;
+        variant?: "primary" | "secondary" | undefined;
         colorScheme?: string | undefined;
     } | undefined;
 };

package/lib/theme/index.d.ts

@@ -8,12 +8,16 @@ export declare const theme: {
         thin: string;
         xlight: string;
         light: string;
-        book: string;
-        regular: string;
+        normal: string;
+        medium: string;
+        semiBold: string;
         bold: string;
         xbold: string;
+        black: string;
     };
     fontSizes: {
+        '3xs': string;
+        '2xs': string;
         xs: string;
         sm: string;
         md: string;
@@ -22,17 +26,29 @@ export declare const theme: {
         '2xl': string;
         '3xl': string;
         '4xl': string;
+        '5xl': string;
+        '6xl': string;
+        '7xl': string;
+        '9xl': string;
+        '10xl': string;
+        '11xl': string;
     };
     letterSpacings: {
-        tightest: string;
+        tighter: string;
         tight: string;
         normal: string;
         wide: string;
+        wider: string;
         widest: string;
     };
     lineHeights: {
-        body: string;
-        button: string;
+        body: number;
+        normal: string;
+        none: number;
+        shorter: number;
+        short: number;
+        base: number;
+        tall: number;
     };
     sizes: {
         max: string;
@@ -180,7 +196,7 @@ export declare const theme: {
             } | undefined;
             sizes?: {
                 sm: {
-                    fontSize: string;
+                    fontSize: ("md" | "lg")[];
                     px: number[];
                     py: number[];
                     '.chakra-button__icon > svg': {
@@ -189,7 +205,7 @@ export declare const theme: {
                     };
                 };
                 md: {
-                    fontSize: string;
+                    fontSize: ("lg" | "xl")[];
                     px: number[];
                     py: number[];
                     svg: {
@@ -209,7 +225,7 @@ export declare const theme: {
                 };
             } | undefined;
             variants?: {
-                solid: (props: import("@chakra-ui/styled-system").StyleFunctionProps) => {
+                primary: (props: import("@chakra-ui/styled-system").StyleFunctionProps) => {
                     bg: string;
                     color: string;
                     ':hover, &.hover': {
@@ -223,7 +239,7 @@ export declare const theme: {
                         color: string;
                     };
                 };
-                outline: (props: import("@chakra-ui/styled-system").StyleFunctionProps) => {
+                secondary: (props: import("@chakra-ui/styled-system").StyleFunctionProps) => {
                     color: string;
                     boxShadow: (theme: Record<string, any>) => string;
                     ':hover, &.hover': {
@@ -243,7 +259,118 @@ export declare const theme: {
             } | undefined;
             defaultProps?: {
                 size?: "sm" | "md" | "wide" | undefined;
-                variant?: "outline" | "solid" | undefined;
+                variant?: "primary" | "secondary" | undefined;
+                colorScheme?: string | undefined;
+            } | undefined;
+        };
+        Link: {
+            baseStyle?: {
+                color: string;
+                fontWeight: string;
+                _hover: {
+                    textDecoration: string;
+                    cursor: string;
+                };
+            } | undefined;
+            sizes?: {
+                sm: {
+                    fontSize: ("3xs" | "xs")[];
+                    lineHeight: string;
+                };
+                md: {
+                    fontSize: ("sm" | "2xs")[];
+                    lineHeight: string;
+                };
+                lg: {
+                    fontSize: ("md" | "xs")[];
+                    lineHeight: string;
+                };
+            } | undefined;
+            variants?: {} | undefined;
+            defaultProps?: {
+                size?: "sm" | "md" | "lg" | undefined;
+                variant?: undefined;
+                colorScheme?: string | undefined;
+            } | undefined;
+        };
+        Heading: {
+            baseStyle?: {
+                fontFamily: (theme: Record<string, any>) => string;
+                fontWeight: string;
+            } | undefined;
+            sizes?: {
+                '3xl': {
+                    fontSize: ("6xl" | "11xl")[];
+                    lineHeight: string;
+                };
+                '2xl': {
+                    fontSize: ("6xl" | "9xl")[];
+                    lineHeight: string;
+                };
+                xl: {
+                    fontSize: ("4xl" | "7xl")[];
+                    lineHeight: string;
+                };
+                lg: {
+                    fontFamily: (theme: Record<string, any>) => string;
+                    fontWeight: string;
+                    fontSize: ("3xl" | "6xl")[];
+                    lineHeight: string;
+                };
+                md: {
+                    fontFamily: (theme: Record<string, any>) => string;
+                    fontWeight: string;
+                    fontSize: ("2xl" | "4xl")[];
+                    lineHeight: string;
+                };
+                sm: {
+                    fontFamily: (theme: Record<string, any>) => string;
+                    fontWeight: string;
+                    fontSize: ("lg" | "3xl")[];
+                    lineHeight: string;
+                };
+            } | undefined;
+            variants?: {
+                [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
+            } | undefined;
+            defaultProps?: {
+                size?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | undefined;
+                variant?: string | number | undefined;
+                colorScheme?: string | undefined;
+            } | undefined;
+        };
+        Text: {
+            baseStyle?: {
+                fontWeight: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontSize: string;
+                p: number;
+            } | undefined;
+            sizes?: {
+                xs: {
+                    fontSize: ("2xs" | "xs")[];
+                };
+                sm: {
+                    fontSize: ("sm" | "xs")[];
+                };
+                md: {
+                    fontSize: ("sm" | "md")[];
+                };
+                lg: {
+                    fontSize: ("md" | "lg")[];
+                };
+                xl: {
+                    fontSize: ("lg" | "2xl")[];
+                    lineHeight: ("shorter" | "short")[];
+                };
+            } | undefined;
+            variants?: {
+                [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
+            } | undefined;
+            defaultProps?: {
+                size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+                variant?: string | number | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
         };

package/lib/theme/layout/Box/Box.d.ts

@@ -0,0 +1,3 @@
+import { Box, BoxProps as ChakraButtonProps } from '@chakra-ui/react';
+export type BoxProps = ChakraButtonProps;
+export default Box;

package/lib/theme/layout/Grid/Grid.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import { FlexProps } from '@chakra-ui/react';
+type Spacing = number | Array<number>;
+type NumberFrom1To12 = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+type Columns = NumberFrom1To12 | NumberFrom1To12[];
+type GridContextType = {
+    spacing: Spacing;
+    columns: Columns;
+};
+export declare const GridContext: React.Context<GridContextType>;
+export type GridProps = {
+    /**
+     * Aligns the grid items within the container to the edges.
+     * Essentially removing the spacing around the container
+     */
+    alignEdges?: boolean;
+    /**
+     * Define the spacing between elements using the spacing values defined
+     * in the design system. Default is the theme horizontal page spacing defined
+     * in the app's theme.
+     */
+    spacing?: Spacing;
+    /**
+     * Indicates the number of columns
+    */
+    columns?: Columns;
+} & FlexProps;
+/**
+ * Flexbox Grid component
+ */
+declare const Grid: React.ForwardRefExoticComponent<{
+    /**
+     * Aligns the grid items within the container to the edges.
+     * Essentially removing the spacing around the container
+     */
+    alignEdges?: boolean | undefined;
+    /**
+     * Define the spacing between elements using the spacing values defined
+     * in the design system. Default is the theme horizontal page spacing defined
+     * in the app's theme.
+     */
+    spacing?: Spacing | undefined;
+    /**
+     * Indicates the number of columns
+    */
+    columns?: Columns | undefined;
+} & FlexProps & React.RefAttributes<unknown>>;
+export default Grid;

package/lib/theme/layout/Grid/GridItem.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { BoxProps } from '../Box/Box';
+export type GridItemProps = BoxProps;
+declare const GridItem: React.ForwardRefExoticComponent<import("@chakra-ui/layout/dist/box").BoxProps & React.RefAttributes<unknown>>;
+export default GridItem;

package/lib/theme/layout/Grid/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Grid, type GridProps } from './Grid';
+export { default as GridItem, type GridItemProps } from './GridItem';

package/lib/theme/navigation/Link/Link.config.d.ts

@@ -0,0 +1,31 @@
+declare const _default: {
+    baseStyle?: {
+        color: string;
+        fontWeight: string;
+        _hover: {
+            textDecoration: string;
+            cursor: string;
+        };
+    } | undefined;
+    sizes?: {
+        sm: {
+            fontSize: ("3xs" | "xs")[];
+            lineHeight: string;
+        };
+        md: {
+            fontSize: ("sm" | "2xs")[];
+            lineHeight: string;
+        };
+        lg: {
+            fontSize: ("md" | "xs")[];
+            lineHeight: string;
+        };
+    } | undefined;
+    variants?: {} | undefined;
+    defaultProps?: {
+        size?: "sm" | "md" | "lg" | undefined;
+        variant?: undefined;
+        colorScheme?: string | undefined;
+    } | undefined;
+};
+export default _default;

package/lib/theme/typography/Heading/Heading.config.d.ts

@@ -0,0 +1,47 @@
+declare const _default: {
+    baseStyle?: {
+        fontFamily: (theme: Record<string, any>) => string;
+        fontWeight: string;
+    } | undefined;
+    sizes?: {
+        '3xl': {
+            fontSize: ("6xl" | "11xl")[];
+            lineHeight: string;
+        };
+        '2xl': {
+            fontSize: ("6xl" | "9xl")[];
+            lineHeight: string;
+        };
+        xl: {
+            fontSize: ("4xl" | "7xl")[];
+            lineHeight: string;
+        };
+        lg: {
+            fontFamily: (theme: Record<string, any>) => string;
+            fontWeight: string;
+            fontSize: ("3xl" | "6xl")[];
+            lineHeight: string;
+        };
+        md: {
+            fontFamily: (theme: Record<string, any>) => string;
+            fontWeight: string;
+            fontSize: ("2xl" | "4xl")[];
+            lineHeight: string;
+        };
+        sm: {
+            fontFamily: (theme: Record<string, any>) => string;
+            fontWeight: string;
+            fontSize: ("lg" | "3xl")[];
+            lineHeight: string;
+        };
+    } | undefined;
+    variants?: {
+        [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
+    } | undefined;
+    defaultProps?: {
+        size?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | undefined;
+        variant?: string | number | undefined;
+        colorScheme?: string | undefined;
+    } | undefined;
+};
+export default _default;

package/lib/theme/typography/Heading/Heading.d.ts

@@ -0,0 +1,3 @@
+import { Heading, HeadingProps as ChakraHeadingProps } from "@chakra-ui/react";
+export type HeadingProps = ChakraHeadingProps;
+export default Heading;

package/lib/theme/typography/Text/Text.config.d.ts

@@ -0,0 +1,36 @@
+declare const _default: {
+    baseStyle?: {
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        fontSize: string;
+        p: number;
+    } | undefined;
+    sizes?: {
+        xs: {
+            fontSize: ("2xs" | "xs")[];
+        };
+        sm: {
+            fontSize: ("sm" | "xs")[];
+        };
+        md: {
+            fontSize: ("sm" | "md")[];
+        };
+        lg: {
+            fontSize: ("md" | "lg")[];
+        };
+        xl: {
+            fontSize: ("lg" | "2xl")[];
+            lineHeight: ("shorter" | "short")[];
+        };
+    } | undefined;
+    variants?: {
+        [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
+    } | undefined;
+    defaultProps?: {
+        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+        variant?: string | number | undefined;
+        colorScheme?: string | undefined;
+    } | undefined;
+};
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everlywell/ui-kit",
-  "version": "0.0.2",
+  "version": "0.2.0-next",
   "main": "./index.js",
   "types": "./index.d.ts",
   "exports": {