@atom-learning/components 2.11.1 → 2.12.0

package/CHANGELOG.md

@@ -1,9 +1,10 @@
-## [2.11.1](https://github.com/Atom-Learning/components/compare/v2.11.0...v2.11.1) (2022-11-02)
+# [2.12.0](https://github.com/Atom-Learning/components/compare/v2.11.1...v2.12.0) (2022-11-09)
 
 
-### Bug Fixes
+### Features
 
-* **tooltip:** override white-space style to make sure the text inside always wraps ([7705fc7](https://github.com/Atom-Learning/components/commit/7705fc7dbcca190259c3d467eef0ad334158f493))
+* added noCapsize prop to Text based components, added fix for overflowing text in button ([b85db94](https://github.com/Atom-Learning/components/commit/b85db943729d93fedfe9768b9891770278827b3a))
+* set noCapsize to true by default for List (to match previous version) ([0ac351a](https://github.com/Atom-Learning/components/commit/0ac351af60917f9fedfd31b646f14b4f46292573))
 
 # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
 

package/dist/components/chip/Chip.js

@@ -1 +1 @@
-import*as e from"react";import{Box as x}from"../box/Box.js";import{Flex as z}from"../flex/Flex.js";import{Icon as d}from"../icon/Icon.js";import{textVariantSize as a}from"../text/Text.js";import{styled as m}from"../../stitches.js";import{overrideStitchesVariantValue as g}from"../../utilities/override-stitches-variant-value/overrideStitchesVariantValue.js";const c={overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},h=m("span",{display:"inline-flex",alignItems:"center",px:"$1",flexGrow:1,...c,"& > *:not(:last-child)":{mr:"$1"}}),$={sm:"sm",md:"sm",lg:"md"},y=m(d,{flexShrink:0}),l=({...r})=>{const i=e.useContext(p),{size:t}=i,n=e.useMemo(()=>g(t,o=>$[o]),[t]);return e.createElement(y,{...r,size:n})},u=({children:r,...i})=>{const t=e.Children.toArray(r),n=t.length<=1;return e.createElement(h,{...i},t.map(o=>!n&&typeof o=="string"?e.createElement(x,{as:"span",css:c,key:o},o):e.isValidElement(o)&&o.type===d?e.createElement(l,{...o.props}):o))},f=m(z,{px:"$2",border:"1px solid",borderRadius:"$0",alignItems:"center",fontFamily:"$body",maxWidth:"100%",borderColor:"$primary",color:"$primaryMid",bg:"$primaryLight","&[data-disabled]":{opacity:"0.3",pointerEvents:"none"},variants:{size:{sm:{height:"$2",...a({applyCapsize:!0}).sm},md:{height:"$3",...a({applyCapsize:!0}).sm},lg:{height:"$4",...a({applyCapsize:!0}).md}}}}),p=e.createContext({}),C=({size:r,children:i})=>{const t=e.useMemo(()=>({size:r}),[r]);return e.createElement(p.Provider,{value:t},i)},E=e.forwardRef(({asWorkaround:r,size:i="md",...t},n)=>e.createElement(C,{size:i},e.createElement(f,{ref:n,as:r,size:i,...t}))),s=E;s.Content=u,s.Icon=l,s.displayName="Chip";export{s as Chip,l as ChipIcon,p as ChipRootContext,C as ChipRootProvider,h as StyledChipContent,y as StyledChipIcon,f as StyledRoot};
+import*as e from"react";import{Box as C}from"../box/Box.js";import{Flex as g}from"../flex/Flex.js";import{Icon as c}from"../icon/Icon.js";import{getTextVariant as a}from"../text/Text.js";import{styled as m}from"../../stitches.js";import{overrideStitchesVariantValue as z}from"../../utilities/override-stitches-variant-value/overrideStitchesVariantValue.js";const d={overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},h=m("span",{display:"inline-flex",alignItems:"center",px:"$1",flexGrow:1,...d,"& > *:not(:last-child)":{mr:"$1"}}),$={sm:"sm",md:"sm",lg:"md"},f=m(c,{flexShrink:0}),l=({...r})=>{const i=e.useContext(p),{size:t}=i,n=e.useMemo(()=>z(t,o=>$[o]),[t]);return e.createElement(f,{...r,size:n})},u=({children:r,...i})=>{const t=e.Children.toArray(r),n=t.length<=1;return e.createElement(h,{...i},t.map(o=>!n&&typeof o=="string"?e.createElement(C,{as:"span",css:d,key:o},o):e.isValidElement(o)&&o.type===c?e.createElement(l,{...o.props}):o))},x=m(g,{px:"$2",border:"1px solid",borderRadius:"$0",alignItems:"center",fontFamily:"$body",maxWidth:"100%",borderColor:"$primary",color:"$primaryMid",bg:"$primaryLight","&[data-disabled]":{opacity:"0.3",pointerEvents:"none"},variants:{size:{sm:{height:"$2",...a({size:"sm"})},md:{height:"$3",...a({size:"sm"})},lg:{height:"$4",...a({size:"md"})}}}}),p=e.createContext({}),y=({size:r,children:i})=>{const t=e.useMemo(()=>({size:r}),[r]);return e.createElement(p.Provider,{value:t},i)},E=e.forwardRef(({asWorkaround:r,size:i="md",...t},n)=>e.createElement(y,{size:i},e.createElement(x,{ref:n,as:r,size:i,...t}))),s=E;s.Content=u,s.Icon=l,s.displayName="Chip";export{s as Chip,l as ChipIcon,p as ChipRootContext,y as ChipRootProvider,h as StyledChipContent,f as StyledChipIcon,x as StyledRoot};

package/dist/components/empty-state/EmptyStateBody.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 export declare const EmptyStateBody: import("@stitches/react/types/styled-component").StyledComponent<import("react").ForwardRefExoticComponent<Omit<Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "key" | keyof import("react").HTMLAttributes<HTMLParagraphElement>> & {
     ref?: ((instance: HTMLParagraphElement | null) => void) | import("react").RefObject<HTMLParagraphElement> | null | undefined;
-}, "size" | "css"> & import("@stitches/react/types/styled-component").TransformProps<{
-    size?: ("sm" | "md" | "lg" | "xl" | "xs") | undefined;
+}, "size" | "css" | "noCapsize"> & import("@stitches/react/types/styled-component").TransformProps<{
+    size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+    noCapsize?: boolean | "true" | undefined;
 }, {
     sm: string;
     md: string;

package/dist/components/heading/Heading.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import type { Override } from '../../utilities';
 export declare const StyledHeading: import("@stitches/react/types/styled-component").StyledComponent<"h2", {
     size?: "sm" | "md" | "lg" | "xl" | "xs" | "xxl" | undefined;
+    noCapsize?: boolean | "true" | undefined;
 }, {
     sm: string;
     md: string;

package/dist/components/heading/Heading.js

@@ -1 +1 @@
-import*as i from"react";import{styled as a}from"../../stitches.js";import{capsize as e}from"../../utilities/style/capsize.js";const t=a("h2",{color:"$tonal600",fontFamily:"$display",fontWeight:700,m:0,variants:{size:{xs:{fontFamily:"$body",fontWeight:600,fontSize:"$md",lineHeight:1.5,...e(.3864)},sm:{fontSize:"$lg",lineHeight:1.14,...e(.2174,.2254)},md:{fontSize:"$xl",lineHeight:1.14,...e(.2174,.2254)},lg:{fontSize:"$2xl",lineHeight:1.08,...e(.1865,.1945)},xl:{fontSize:"$3xl",lineHeight:1.12,...e(.206,.214)},xxl:{fontSize:"$4xl",lineHeight:1.06,...e(.1793,.1873)}}}}),o=i.forwardRef(({size:l="md",...n},f)=>i.createElement(t,{ref:f,size:l,...n}));o.displayName="Heading";export{o as Heading,t as StyledHeading};
+import*as i from"react";import{styled as f}from"../../stitches.js";import{capsize as e}from"../../utilities/style/capsize.js";const t=f("h2",{color:"$tonal600",fontFamily:"$display",fontWeight:700,m:0,variants:{size:{xs:{fontFamily:"$body",fontWeight:600,fontSize:"$md",lineHeight:1.5,...e(.3864)},sm:{fontSize:"$lg",lineHeight:1.14,...e(.2174,.2254)},md:{fontSize:"$xl",lineHeight:1.14,...e(.2174,.2254)},lg:{fontSize:"$2xl",lineHeight:1.08,...e(.1865,.1945)},xl:{fontSize:"$3xl",lineHeight:1.12,...e(.206,.214)},xxl:{fontSize:"$4xl",lineHeight:1.06,...e(.1793,.1873)}},noCapsize:{true:{"&::before, &::after":{display:"none"}}}}}),o=i.forwardRef(({size:n="md",...l},a)=>i.createElement(t,{ref:a,size:n,...l}));o.displayName="Heading";export{o as Heading,t as StyledHeading};

package/dist/components/label/Label.js

@@ -1 +1 @@
-import*as e from"react";import{styled as t}from"../../stitches.js";import{textVariantSize as d}from"../text/Text.js";const{sm:p,md:y}=d(),f=t("label",{color:"$tonal500",fontFamily:"$body",m:0,variants:{size:{sm:p,md:y},type:{block:{display:"block",fontWeight:600},inline:{display:"flex",fontWeight:400,maxWidth:"max-content"}},align:{start:{},center:{}},direction:{reverse:{},row:{}}},compoundVariants:[{type:"inline",align:"start",css:{alignItems:"flex-start"}},{type:"inline",align:"center",css:{alignItems:"center"}},{type:"inline",direction:"reverse",css:{flexDirection:"row-reverse"}},{type:"inline",direction:"row",css:{flexDirection:"row"}}]}),g=t("span",{color:"$danger",ml:"$1",fontWeight:400}),i=({align:n="start",as:r="label",direction:a="row",size:o="md",type:l="block",children:s,required:c,...m})=>e.createElement(f,{as:r,size:o,type:l,align:n,direction:a,...m},s,c&&e.createElement(g,{"aria-hidden":!0},"*"));i.displayName="Label";export{i as Label};
+import*as e from"react";import{styled as i}from"../../stitches.js";import{getTextVariant as t}from"../text/Text.js";const p=i("label",{color:"$tonal500",fontFamily:"$body",m:0,variants:{size:{sm:t({size:"sm"}),md:t({size:"md"})},type:{block:{display:"block",fontWeight:600},inline:{display:"flex",fontWeight:400,maxWidth:"max-content"}},align:{start:{},center:{}},direction:{reverse:{},row:{}}},compoundVariants:[{type:"inline",align:"start",css:{alignItems:"flex-start"}},{type:"inline",align:"center",css:{alignItems:"center"}},{type:"inline",direction:"reverse",css:{flexDirection:"row-reverse"}},{type:"inline",direction:"row",css:{flexDirection:"row"}}]}),y=i("span",{color:"$danger",ml:"$1",fontWeight:400}),n=({align:r="start",as:a="label",direction:o="row",size:l="md",type:s="block",children:c,required:m,...d})=>e.createElement(p,{as:a,size:l,type:s,align:r,direction:o,...d},c,m&&e.createElement(y,{"aria-hidden":!0},"*"));n.displayName="Label";export{n as Label};

package/dist/components/link/Link.d.ts

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { NavigatorActions } from '../../types';
 import { Override } from '../../utilities';
 export declare const StyledLink: import("@stitches/react/types/styled-component").StyledComponent<"a", {
-    size?: ("sm" | "md" | "lg" | "xl" | "xs") | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+    noCapsize?: boolean | "true" | undefined;
 }, {
     sm: string;
     md: string;

package/dist/components/link/Link.js

@@ -1 +1 @@
-import*as e from"react";import{styled as f}from"../../stitches.js";import{StyledHeading as l}from"../heading/Heading.js";import{StyledLi as s}from"../list/List.js";import{StyledText as c,textVariantSize as d}from"../text/Text.js";const r=f("a",{bg:"unset",border:"unset",p:"unset",color:"$primary",cursor:"pointer",fontFamily:"$body",textDecoration:"none","&:focus, &:hover":{color:"$primaryMid",textDecoration:"underline"},"&:active":{color:"$primaryDark"},[`${c} > &, ${l} > &, ${s} > &`]:{fontSize:"100%",lineHeight:1,"&::before, &::after":{content:"none"}},variants:{size:d()}}),a=e.forwardRef(({size:o="md",onClick:m,href:t,...i},n)=>t?e.createElement(r,{size:o,...i,ref:n,href:t}):e.createElement(r,{as:"button",size:o,...i,ref:n,onClick:m}));a.displayName="Link";export{a as Link,r as StyledLink};
+import*as e from"react";import{styled as l}from"../../stitches.js";import{StyledHeading as c}from"../heading/Heading.js";import{StyledLi as f}from"../list/List.js";import{StyledText as d,textVariants as p}from"../text/Text.js";const y=l("span",{position:"relative"}),t=l("a",{bg:"unset",border:"unset",p:"unset",color:"$primary",cursor:"pointer",fontFamily:"$body",textDecoration:"none","&:focus, &:hover":{color:"$primaryMid",textDecoration:"underline"},"&:active":{color:"$primaryDark"},[`${d} > &, ${c} > &, ${f} > &`]:{fontSize:"100%",lineHeight:1,"&::before, &::after":{content:"none"}},variants:p}),m=e.forwardRef(({children:r,size:o="md",onClick:s,href:i,...n},a)=>i?e.createElement(t,{size:o,...n,ref:a,href:i},r):e.createElement(t,{as:"button",size:o,...n,ref:a,onClick:s},e.createElement(y,null,r)));m.displayName="Link";export{m as Link,t as StyledLink};

package/dist/components/list/List.d.ts

@@ -266,8 +266,9 @@ export declare const StyledLi: import("@stitches/react/types/styled-component").
     };
 }>>;
 export declare const StyledList: import("@stitches/react/types/styled-component").StyledComponent<"ul", {
-    size?: ("sm" | "md" | "lg" | "xl" | "xs") | undefined;
     as?: "ol" | "ul" | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+    noCapsize?: boolean | "true" | undefined;
 }, {
     sm: string;
     md: string;

package/dist/components/list/List.js

@@ -1 +1 @@
-import*as e from"react";import{styled as l}from"../../stitches.js";import{textVariantSize as d}from"../text/Text.js";const t=l("li",{}),i=l("ul",{fontFamily:"$body",m:"unset",p:"unset",[`& > ${t}`]:{"&:not(:last-child)":{mb:"$2"},"&:last-child":{mb:0}},variants:{size:d({applyCapsize:!1}),as:{ol:{pl:"$4",listStyle:"decimal",[`& > ${t}`]:{pl:"$1","&::marker":{fontSize:"$sm",fontWeight:"bold"}}},ul:{pl:"$3",[`& > ${t}`]:{pl:"$2","&::marker":{content:"\u2022",fontWeight:"bold"}}}}}}),o=e.forwardRef(({size:r="md",ordered:s,...a},m)=>e.createElement(i,{ref:m,as:s?"ol":"ul",size:r,...a}));o.Item=t;export{o as List,t as StyledLi,i as StyledList};
+import*as e from"react";import{styled as l}from"../../stitches.js";import{textVariants as d}from"../text/Text.js";const t=l("li",{}),o=l("ul",{fontFamily:"$body",m:"unset",p:"unset",[`& > ${t}`]:{"&:not(:last-child)":{mb:"$2"},"&:last-child":{mb:0}},variants:{...d,as:{ol:{pl:"$4",listStyle:"decimal",[`& > ${t}`]:{pl:"$1","&::marker":{fontSize:"$sm",fontWeight:"bold"}}},ul:{pl:"$3",[`& > ${t}`]:{pl:"$2","&::marker":{content:"\u2022",fontWeight:"bold"}}}}}}),i=e.forwardRef(({size:r="md",noCapsize:s=!0,ordered:a,...m},n)=>e.createElement(o,{ref:n,as:a?"ol":"ul",size:r,noCapsize:s,...m}));i.Item=t;export{i as List,t as StyledLi,o as StyledList};

package/dist/components/navigation/NavigationMenuItem.d.ts

@@ -2,8 +2,9 @@ import React from 'react';
 import { CSS } from '../../stitches';
 export declare const NavigationMenuDropdownItemTitle: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "key" | keyof React.HTMLAttributes<HTMLParagraphElement>> & {
     ref?: ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | null | undefined;
-}, "size" | "css"> & import("@stitches/react/types/styled-component").TransformProps<{
-    size?: ("sm" | "md" | "lg" | "xl" | "xs") | undefined;
+}, "size" | "css" | "noCapsize"> & import("@stitches/react/types/styled-component").TransformProps<{
+    size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+    noCapsize?: boolean | "true" | undefined;
 }, {
     sm: string;
     md: string;

package/dist/components/stepper/Stepper.js

@@ -1 +1 @@
-import S from"invariant";import*as r from"react";import{Box as c}from"../box/Box.js";import{StepperProvider as h}from"./stepper-context/StepperContext.js";import{StepperStepBack as f}from"./StepperStepBack.js";import{StepperStepForward as u}from"./StepperStepForward.js";import{StepperSteps as C}from"./StepperSteps.js";const e=({children:i,stepCount:o,allowSkip:s,onComplete:n,onStepChange:l,direction:a="horizontal",steps:t,hideLabels:m=!1,css:d})=>{S(!(o&&t),"`Stepper` should only be given one of `stepCount` or `steps`. When both are provided, `steps` will be used and `stepCount` will be ignored.");const p=(t==null?void 0:t.length)||o||0;return r.createElement(h,{stepCount:p,allowSkip:s,onComplete:n,onStepChange:o?l:void 0,direction:a,steps:t||Array(p).fill(""),hideLabels:m},r.createElement(c,{"aria-label":"progress",css:{width:"100%",...d}},i))};e.StepBack=f,e.StepForward=u,e.Steps=C,e.displayName="Stepper";export{e as Stepper};
+import c from"invariant";import*as r from"react";import{Box as h}from"../box/Box.js";import{StepperProvider as C}from"./stepper-context/StepperContext.js";import{StepperStepBack as f}from"./StepperStepBack.js";import{StepperStepForward as w}from"./StepperStepForward.js";import{StepperSteps as u}from"./StepperSteps.js";const e=({children:s,stepCount:t,allowSkip:i,onComplete:n,onStepChange:l,direction:a="horizontal",steps:o,hideLabels:m=!1,showCompletedIcons:d=!1,css:S})=>{c(!(t&&o),"`Stepper` should only be given one of `stepCount` or `steps`. When both are provided, `steps` will be used and `stepCount` will be ignored.");const p=(o==null?void 0:o.length)||t||0;return r.createElement(C,{stepCount:p,allowSkip:i,onComplete:n,onStepChange:t?l:void 0,direction:a,steps:o||Array(p).fill(""),hideLabels:m,showCompletedIcons:d},r.createElement(h,{"aria-label":"progress",css:{width:"100%",...S}},s))};e.StepBack=f,e.StepForward=w,e.Steps=u,e.displayName="Stepper";export{e as Stepper};

package/dist/components/stepper/StepperStepBullet.js

@@ -1 +1 @@
-import{styled as e}from"../../stitches.js";import{Flex as o}from"../flex/Flex.js";const r=e(o,{position:"relative",p:"$2",justifyContent:"center",alignItems:"center",size:"$3",borderRadius:"50%",border:"none",bg:"$tonal50",zIndex:1,flex:"none",variants:{status:{default:{bg:"$tonal50",color:"$tonal300"},active:{bg:"white",color:"$primaryMid",border:"2px solid",borderColor:"currentColor"},viewed:{bg:"white",border:"2px solid $tonal200",color:"$tonal600"},completed:{bg:"$primary",color:"white"},reviewed:{bg:"$primaryMid",color:"white"},success:{bg:"$success",color:"white"}}}});export{r as StepperStepBullet};
+import{styled as e}from"../../stitches.js";import{Flex as o}from"../flex/Flex.js";const r=e(o,{position:"relative",p:"$2",justifyContent:"center",alignItems:"center",size:"$3",borderRadius:"50%",border:"none",bg:"$tonal100",zIndex:1,flex:"none",variants:{status:{default:{bg:"$tonal100",color:"$tonal300"},active:{bg:"white",color:"$primaryMid",border:"2px solid",borderColor:"currentColor"},viewed:{bg:"white",border:"2px solid $tonal200",color:"$tonal600"},completed:{bg:"$primary",color:"white"},reviewed:{bg:"$primaryMid",color:"white"},success:{bg:"$success",color:"white"}}}});export{r as StepperStepBullet};

package/dist/components/stepper/StepperStepContainer.d.ts

@@ -264,8 +264,9 @@ export declare const StepperStepContainer: import("@stitches/react/types/styled-
         };
     };
 }>>, {
+    canInteract?: boolean | "true" | undefined;
     direction?: "horizontal" | "vertical" | undefined;
-    separator?: "success" | "default" | "active" | undefined;
+    separator?: "success" | "default" | "active" | "viewed" | undefined;
     status?: "success" | "default" | "active" | "viewed" | "completed" | "reviewed" | undefined;
 }, {
     sm: string;

package/dist/components/stepper/StepperStepContainer.js

@@ -1 +1 @@
-import{styled as t}from"../../stitches.js";import{Flex as i}from"../flex/Flex.js";const o=t(i,{position:"relative",fontFamily:"$body",fontWeight:600,fontSize:"$md",alignItems:"center","&:not(:last-child)::after":{content:"",position:"absolute"},"&:focus-visible":{outline:"none"},variants:{direction:{vertical:{py:"$3",flexDirection:"row","&:not(:last-child)::after":{height:"100%",width:"4px",left:"14px",top:"50%"}},horizontal:{px:"$2",flexDirection:"column","&:not(:last-child)::after":{width:"100%",height:"4px",left:"50%",top:"14px"}}},separator:{default:{"&:not(:last-child)::after":{bg:"$tonal50"}},active:{"&:not(:last-child)::after":{bg:"$primary"}},success:{"&:not(:last-child)::after":{bg:"$success"}}},status:{completed:{"&:hover":{"& :first-child":{bg:"$primaryMid",color:"white !important"},"& :last-child":{color:"$primaryMid"}},"&:focus-visible":{"& :first-child":{outline:"2px solid $primary",outlineOffset:"2px"}}},active:{"&:hover":{"& :first-child":{borderColor:"$tonal400",color:"$tonal600"},"& :last-child":{color:"$tonal600"}},"&:focus-visible":{"& :first-child":{outline:"2px solid $primary",outlineOffset:"2px"}}},default:{},viewed:{"&:focus-visible":{"& :first-child":{outline:"2px solid $primary !important",outlineOffset:"2px !important"}}},success:{},reviewed:{"&:focus-visible":{"& :first-child":{outline:"2px solid $primary !important",outlineOffset:"2px !important"}}}}}});export{o as StepperStepContainer};
+import{styled as t}from"../../stitches.js";import{Flex as i}from"../flex/Flex.js";const o=t(i,{position:"relative",fontFamily:"$body",fontWeight:600,fontSize:"$md",alignItems:"center","&:not(:last-child)::after":{content:"",position:"absolute"},"&:focus-visible":{outline:"none"},variants:{canInteract:{true:{}},direction:{vertical:{py:"$3",flexDirection:"row","&:not(:last-child)::after":{height:"100%",width:"4px",left:"14px",top:"50%"}},horizontal:{px:"$2",flexDirection:"column","&:not(:last-child)::after":{width:"100%",height:"4px",left:"50%",top:"14px"}}},separator:{default:{"&:not(:last-child)::after":{bg:"$tonal100"}},active:{"&:not(:last-child)::after":{bg:"$primary"}},success:{"&:not(:last-child)::after":{bg:"$success"}},viewed:{"&:not(:last-child)::after":{bg:"$tonal200"}}},status:{completed:{},active:{},default:{},viewed:{},success:{},reviewed:{}}},compoundVariants:[{canInteract:!0,status:"completed",css:{"&:hover":{"& :first-child":{bg:"$primaryMid",color:"white !important"},"& :last-child":{color:"$primaryMid"}},"&:focus-visible":{"& :first-child":{outline:"2px solid $primary",outlineOffset:"2px"}}}},{canInteract:!0,status:"active",css:{"&:hover":{"& :first-child":{borderColor:"$tonal400",color:"$tonal600"},"& :last-child":{color:"$tonal600"}},"&:focus-visible":{"& :first-child":{outline:"2px solid $primary",outlineOffset:"2px"}}}},{canInteract:!0,status:"viewed",css:{"&:hover":{"& :first-child":{borderColor:"$tonal400",color:"$tonal600"},"& :last-child":{color:"$tonal600"}},"&:focus-visible":{"& :first-child":{outline:"2px solid $primary !important",outlineOffset:"2px !important"}}}},{canInteract:!0,status:"reviewed",css:{"&:focus-visible":{"& :first-child":{outline:"2px solid $primary !important",outlineOffset:"2px !important"}}}}]});export{o as StepperStepContainer};

package/dist/components/stepper/StepperStepLabel.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 export declare const StepperStepLabel: import("@stitches/react/types/styled-component").StyledComponent<import("react").ForwardRefExoticComponent<Omit<Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "key" | keyof import("react").HTMLAttributes<HTMLParagraphElement>> & {
     ref?: ((instance: HTMLParagraphElement | null) => void) | import("react").RefObject<HTMLParagraphElement> | null | undefined;
-}, "size" | "css"> & import("@stitches/react/types/styled-component").TransformProps<{
-    size?: ("sm" | "md" | "lg" | "xl" | "xs") | undefined;
+}, "size" | "css" | "noCapsize"> & import("@stitches/react/types/styled-component").TransformProps<{
+    size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+    noCapsize?: boolean | "true" | undefined;
 }, {
     sm: string;
     md: string;

package/dist/components/stepper/StepperSteps.js

@@ -1 +1 @@
-import{Ok as f}from"@atom-learning/icons";import*as i from"react";import{styled as b}from"../../stitches.js";import{Flex as h}from"../flex/Flex.js";import{Icon as v}from"../icon/Icon.js";import{useStepper as g}from"./stepper-context/StepperContext.js";import{StepperStepBullet as D}from"./StepperStepBullet.js";import{StepperStepContainer as I}from"./StepperStepContainer.js";import{StepperStepLabel as U}from"./StepperStepLabel.js";import{Status as r}from"./types.js";const x=b(h,{justifyContent:"space-between",variants:{direction:{vertical:{flexDirection:"column"},horizontal:{flexDirection:"row"}}}}),T=({css:u})=>{const{steps:s,goToStep:m,activeStep:l,viewedSteps:n,allowSkip:c,direction:a,hideLabels:S,completedSteps:p}=g(),d=e=>{const t=s[e];return t.status?t.status:p.length===s.length?r.SUCCESS:l===e&&p.includes(l)?r.REVIEWED:l===e?r.ACTIVE:p.includes(e)?r.COMPLETED:n.includes(e)?r.VIEWED:r.DEFAULT},E=e=>{var t;const o=(t=s[e])==null?void 0:t.status;return p.length===s.length?r.SUCCESS:o===r.SUCCESS?r.SUCCESS:o===r.VIEWED||e<Math.max(...n)?r.ACTIVE:r.DEFAULT};return i.createElement(x,{css:u,direction:a},s.map((e,t)=>{const o=d(t),C=E(t);return i.createElement(I,{tabIndex:0,key:`step_${t}`,direction:a,separator:C,status:o,css:a==="horizontal"?{width:`calc(100% / ${s.length})`}:{height:`calc(100% / ${s.length})`}},i.createElement(D,{as:c?"button":"div",onClick:()=>c&&n.includes(t)?m==null?void 0:m(t):void 0,status:o,"aria-current":t===l?"step":void 0,"aria-label":e.label?"":`step ${t+1}`,"aria-labelledby":e.label?`step-${t}`:void 0,css:{cursor:c&&n.includes(t)?"pointer":"auto"}},e.status==="success"?i.createElement(v,{is:f}):t+1),e.label&&!S&&i.createElement(U,{as:"span",id:`step-${t}`,direction:a,status:o},e.label))}))};export{T as StepperSteps};
+import{Ok as h}from"@atom-learning/icons";import*as n from"react";import{styled as b}from"../../stitches.js";import{Flex as v}from"../flex/Flex.js";import{Icon as D}from"../icon/Icon.js";import{useStepper as I}from"./stepper-context/StepperContext.js";import{StepperStepBullet as g}from"./StepperStepBullet.js";import{StepperStepContainer as T}from"./StepperStepContainer.js";import{StepperStepLabel as w}from"./StepperStepLabel.js";import{Status as t}from"./types.js";const L=b(v,{justifyContent:"space-between",variants:{direction:{vertical:{flexDirection:"column"},horizontal:{flexDirection:"row"}}}}),U=({css:S})=>{const{steps:i,goToStep:m,activeStep:r,viewedSteps:a,allowSkip:l,direction:c,hideLabels:E,completedSteps:p,showCompletedIcons:u}=I(),d=o=>{const e=i[o];return e.status?e.status:p.length===i.length?t.SUCCESS:r===o&&p.includes(r)?t.REVIEWED:r===o?t.ACTIVE:p.includes(o)?t.COMPLETED:a.includes(o)?t.VIEWED:t.DEFAULT},C=o=>{var e;const s=(e=i[o])==null?void 0:e.status;return p.length===i.length?t.SUCCESS:s===t.SUCCESS?t.SUCCESS:s===t.COMPLETED||o<Math.max(...a)?t.ACTIVE:s===t.VIEWED?t.VIEWED:t.DEFAULT};return n.createElement(L,{css:S,direction:c},i.map((o,e)=>{const s=d(e),f=C(e);return n.createElement(T,{tabIndex:0,key:`step_${e}`,direction:c,separator:f,status:s,css:c==="horizontal"?{width:`calc(100% / ${i.length})`}:{height:`calc(100% / ${i.length})`},canInteract:l},n.createElement(g,{as:l?"button":"div",onClick:()=>l&&a.includes(e)?m==null?void 0:m(e):void 0,status:s,"aria-current":e===r?"step":void 0,"aria-label":o.label?"":`step ${e+1}`,"aria-labelledby":o.label?`step-${e}`:void 0,css:{cursor:l&&a.includes(e)?"pointer":"auto"}},o.status===t.SUCCESS||u&&s===t.COMPLETED?n.createElement(D,{is:h}):e+1),o.label&&!E&&n.createElement(w,{as:"span",id:`step-${e}`,direction:c,status:s},o.label))}))};export{U as StepperSteps};

package/dist/components/stepper/stepper-context/StepperContext.js

@@ -1 +1 @@
-import*as o from"react";const c=o.createContext({steps:[],goToPreviousStep:()=>null,goToNextStep:()=>null,goToStep:()=>null,activeStep:0,viewedSteps:[],allowSkip:!1,direction:"horizontal",hideLabels:!1,completedSteps:[]}),P=({children:n,stepCount:r,allowSkip:a,onComplete:p,onStepChange:s,direction:d,steps:v,hideLabels:h})=>{const[e,l]=o.useState(0),[w,m]=o.useState([0]),[g,f]=o.useState([]),u=!r;o.useEffect(()=>{m(t=>t.includes(e)?t:[...t,e]),s==null||s(e)},[e,s]);const T=()=>{const t=p&&e===r-1,S=e<r-1;if((p||S)&&f(i=>i.includes(e)?i:[...i,e]),t)return p==null?void 0:p();if(S)return l(i=>i+1)},x=()=>{l(t=>t-1)},C=t=>{l(t)};return o.createElement(c.Provider,{value:{steps:v||Array(r).fill(""),goToPreviousStep:u?void 0:x,goToNextStep:u?void 0:T,goToStep:u?void 0:C,activeStep:e,viewedSteps:w,completedSteps:g,allowSkip:a,direction:d,hideLabels:h}},n)},b=()=>{const n=o.useContext(c);if(!n)throw new Error("Ensure that you wrap any components with the root component Stepper");return n};export{P as StepperProvider,b as useStepper};
+import*as o from"react";const d=o.createContext({steps:[],goToPreviousStep:()=>null,goToNextStep:()=>null,goToStep:()=>null,activeStep:0,viewedSteps:[],allowSkip:!1,direction:"horizontal",hideLabels:!1,completedSteps:[],showCompletedIcons:!1}),b=({children:s,stepCount:i,allowSkip:S,onComplete:p,onStepChange:l,direction:a,steps:h,hideLabels:v,showCompletedIcons:w})=>{const[e,r]=o.useState(0),[m,g]=o.useState([0]),[C,f]=o.useState([]),c=!i;o.useEffect(()=>{g(t=>t.includes(e)?t:[...t,e]),l==null||l(e)},[e,l]);const T=()=>{const t=p&&e===i-1,u=e<i-1;if((p||u)&&f(n=>n.includes(e)?n:[...n,e]),t)return p==null?void 0:p();if(u)return r(n=>n+1)},x=()=>{r(t=>t-1)},P=t=>{r(t)};return o.createElement(d.Provider,{value:{steps:h||Array(i).fill(""),goToPreviousStep:c?void 0:x,goToNextStep:c?void 0:T,goToStep:c?void 0:P,activeStep:e,viewedSteps:m,completedSteps:C,allowSkip:S,direction:a,hideLabels:v,showCompletedIcons:w}},s)},E=()=>{const s=o.useContext(d);if(!s)throw new Error("Ensure that you wrap any components with the root component Stepper");return s};export{b as StepperProvider,E as useStepper};

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

@@ -23,6 +23,7 @@ export declare type Context = {
     allowSkip?: boolean;
     direction?: Direction;
     hideLabels: boolean;
+    showCompletedIcons: boolean;
 };
 export declare type StepperProviderProps = {
     stepCount: number;
@@ -32,6 +33,7 @@ export declare type StepperProviderProps = {
     direction?: Direction;
     steps: Step[];
     hideLabels: boolean;
+    showCompletedIcons: boolean;
 };
 export interface IStepperProps {
     css?: CSS;
@@ -42,6 +44,7 @@ export interface IStepperProps {
     direction?: Direction;
     steps?: Step[];
     hideLabels?: boolean;
+    showCompletedIcons?: boolean;
 }
 export interface IStepperNavigateProps {
     label?: (currentStep?: number) => string;

package/dist/components/text/Text.d.ts

@@ -1,12 +1,44 @@
 import * as React from 'react';
 import { CSS } from '../../stitches';
 import type { Override } from '../../utilities';
-declare type TextSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export declare const textVariantSize: ({ applyCapsize }?: {
-    applyCapsize?: boolean | undefined;
-}) => Record<TextSizes, CSS>;
+export declare const textVariants: {
+    size: {
+        xs: {
+            fontSize: string;
+            lineHeight: number;
+        };
+        sm: {
+            fontSize: string;
+            lineHeight: number;
+        };
+        md: {
+            fontSize: string;
+            lineHeight: number;
+        };
+        lg: {
+            fontSize: string;
+            lineHeight: number;
+        };
+        xl: {
+            fontSize: string;
+            lineHeight: number;
+        };
+    };
+    noCapsize: {
+        true: {
+            '&::before, &::after': {
+                display: string;
+            };
+        };
+    };
+};
+export declare const getTextVariant: (options: {
+    size: keyof typeof textVariants.size;
+    noCapsize?: boolean;
+}) => CSS;
 export declare const StyledText: import("@stitches/react/types/styled-component").StyledComponent<"p", {
-    size?: TextSizes | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+    noCapsize?: boolean | "true" | undefined;
 }, {
     sm: string;
     md: string;

package/dist/components/text/Text.js

@@ -1 +1 @@
-import*as t from"react";import{styled as f}from"../../stitches.js";import{capsize as i}from"../../utilities/style/capsize.js";const o=({applyCapsize:e=!0}={})=>({xs:{fontSize:"$xs",lineHeight:1.6,...e?i(.4364):{}},sm:{fontSize:"$sm",lineHeight:1.53,...e?i(.4056):{}},md:{fontSize:"$md",lineHeight:1.5,...e?i(.3864):{}},lg:{fontSize:"$lg",lineHeight:1.52,...e?i(.3983):{}},xl:{fontSize:"$xl",lineHeight:1.42,...e?i(.3506):{}}}),n=f("p",{color:"$tonal600",fontFamily:"$body",fontWeight:400,margin:0,"& > &":{"&:before, &:after":{display:"none"}},variants:{size:o()}}),l=t.forwardRef(({size:e="md",...a},r)=>t.createElement(n,{size:e,...a,ref:r}));l.displayName="Text";export{n as StyledText,l as Text,o as textVariantSize};
+import*as n from"react";import{styled as l}from"../../stitches.js";import{capsize as e}from"../../utilities/style/capsize.js";const f="md",t={size:{xs:{fontSize:"$xs",lineHeight:1.6,...e(.4364)},sm:{fontSize:"$sm",lineHeight:1.53,...e(.4056)},md:{fontSize:"$md",lineHeight:1.5,...e(.3864)},lg:{fontSize:"$lg",lineHeight:1.52,...e(.3983)},xl:{fontSize:"$xl",lineHeight:1.42,...e(.3506)}},noCapsize:{true:{"&::before, &::after":{display:"none"}}}},m=({size:i,noCapsize:o})=>({...t.size[i],...t.noCapsize[`${o}`]}),a=l("p",{color:"$tonal600",fontFamily:"$body",fontWeight:400,margin:0,"& > &":{"&:before, &:after":{display:"none"}},variants:t}),s=n.forwardRef(({size:i=f,...o},r)=>n.createElement(a,{size:i,...o,ref:r}));s.displayName="Text";export{a as StyledText,s as Text,m as getTextVariant,t as textVariants};

package/dist/components/top-bar/TopBarBrand.d.ts

@@ -11,8 +11,9 @@ export declare const TopBarBrandLogo: {
 };
 export declare const TopBarBrandName: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "key" | keyof React.HTMLAttributes<HTMLParagraphElement>> & {
     ref?: ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | null | undefined;
-}, "size" | "css"> & import("@stitches/react/types/styled-component").TransformProps<{
-    size?: ("sm" | "md" | "lg" | "xl" | "xs") | undefined;
+}, "size" | "css" | "noCapsize"> & import("@stitches/react/types/styled-component").TransformProps<{
+    size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+    noCapsize?: boolean | "true" | undefined;
 }, {
     sm: string;
     md: string;