@atom-learning/components 2.19.0 → 2.21.0

package/CHANGELOG.md

@@ -1,36 +1,10 @@
-# [2.19.0](https://github.com/Atom-Learning/components/compare/v2.18.0...v2.19.0) (2022-12-01)
-
-
-### Bug Fixes
-
-* sidedrawer - content/footer position ([60e5a01](https://github.com/Atom-Learning/components/commit/60e5a019e201b1b49120f150faee24ad8cb7c67b))
-* sidedrawer - ts validation fix. types fix + aria-label ([88130a4](https://github.com/Atom-Learning/components/commit/88130a4de9df779e03d793ce1dcb53c1f1ceabc3))
+# [2.21.0](https://github.com/Atom-Learning/components/compare/v2.20.0...v2.21.0) (2022-12-05)
 
 
 ### Features
 
-* sidedrawer - accordion item simplified ([219c2a8](https://github.com/Atom-Learning/components/commit/219c2a8452e60458b5db5cf994b1436fa87942e3))
-* sidedrawer - accordion removed from item. overlay and footer improvements ([33e4278](https://github.com/Atom-Learning/components/commit/33e42782d524eaa96663e8e3d5835825918b449b))
-* sidedrawer - accordion root simplified, open/close changes ([3158955](https://github.com/Atom-Learning/components/commit/315895506f21af0f0eaa84184483608a90cd52c9))
-* sidedrawer - accordion usage simplified, accordion.item error handling, styles cleanup ([0de86a8](https://github.com/Atom-Learning/components/commit/0de86a84d4e1a92f9c09745365472ea4d5cc9927))
-* sidedrawer - accordtion item animation ([c6fa5bd](https://github.com/Atom-Learning/components/commit/c6fa5bd227bbf748149f1cad2d4c1dc4d1ff0dee))
-* sidedrawer - accordtion root renders automatically. mdx docs added ([1b97feb](https://github.com/Atom-Learning/components/commit/1b97feb4e09893f7fdcd68d8ec5ad711ee06732b))
-* sidedrawer - active item styles improvements. trigger children improvements ([d26fd08](https://github.com/Atom-Learning/components/commit/d26fd0849306cabf1b9d8133843d51b11045bcd7))
-* sidedrawer - api update to support sidedrawer.trigger ([65f3b08](https://github.com/Atom-Learning/components/commit/65f3b085000c268484ec98d3b27f5f2bd6dc5352))
-* sidedrawer - cleanup accordion item render ([a989ba2](https://github.com/Atom-Learning/components/commit/a989ba267f2a280d50262626189ae6b79836c4f0))
-* sidedrawer - close added, header and footer css improvements ([b92c64b](https://github.com/Atom-Learning/components/commit/b92c64b2f1d1ec0cba0fcccac7040169e5aa9bbd))
-* sidedrawer - close on escape key, onClose passed to overlay. docs update ([fa670d5](https://github.com/Atom-Learning/components/commit/fa670d577a5e2e18275a3d18618ecde759c3a98b))
-* sidedrawer - core components foundations ([3c95835](https://github.com/Atom-Learning/components/commit/3c958357fda36aaad68963ad39c43af1a2510a8a))
-* sidedrawer - css and props improvements, animations moved to shared ([97680c5](https://github.com/Atom-Learning/components/commit/97680c51efc93f4800013e297e6a5d748c7db25b))
-* sidedrawer - disabled state + accordion item props improvement ([8f70379](https://github.com/Atom-Learning/components/commit/8f70379e3b44707191a4c157321926f4d908fe2b))
-* sidedrawer - item and accordion ([80abac3](https://github.com/Atom-Learning/components/commit/80abac3bb0355728c7e4967e72e46dcd04f4a39e))
-* sidedrawer - overlay animation fix ([ee8bed2](https://github.com/Atom-Learning/components/commit/ee8bed26fb9fd11a5b24c902cfeb25e2f4635a4c))
-* sidedrawer - render overlay always ([4b629b5](https://github.com/Atom-Learning/components/commit/4b629b526848e7d7e3a19c4af26e0d421e623e7b))
-* sidedrawer docs preview ([5a4e895](https://github.com/Atom-Learning/components/commit/5a4e8957d2df6fa2e3ac21ef38931f6af2c3902a))
-* sidedrawer docs update ([a3dc286](https://github.com/Atom-Learning/components/commit/a3dc2866cd961f990a0cf8ce42fd8d5936cdbf48))
-* sidedrawer foundations change - use dialog ([3927ff5](https://github.com/Atom-Learning/components/commit/3927ff5ea8a16a77706a4f2cccce3f753cea39d9))
-* sidedrawer props simplified ([6871e6b](https://github.com/Atom-Learning/components/commit/6871e6b1b26a7d63e67ff9013f82356b3c6092cd))
-* sidedrawer unit tests ([b7530b3](https://github.com/Atom-Learning/components/commit/b7530b31f45f67df79a340190b78cd21b028a993))
+* remove all uses of color inherit when used with Text or Heading ([9dde805](https://github.com/Atom-Learning/components/commit/9dde805856befa95f6def3c22d521fd585bf8dd3))
+* remove hardcoded color from Text and Heading ([676f382](https://github.com/Atom-Learning/components/commit/676f3824fd6cbaaad4bf011349b67b76119606de))
 
 # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
 

package/dist/components/heading/Heading.js

@@ -1 +1 @@
-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};
+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",{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"}}}}}),n=i.forwardRef(({size:o="md",...l},f)=>i.createElement(t,{ref:f,size:o,...l}));n.displayName="Heading";export{n as Heading,t as StyledHeading};

package/dist/components/inline-message/InlineMessage.js

@@ -1 +1 @@
-import*as e from"react";import{INLINE_MESSAGE_THEMES as c,INLINE_MESSAGE_ICONS as a}from"./InlineMessage.config.js";import{Flex as E}from"../flex/Flex.js";import{Text as l}from"../text/Text.js";import{Icon as f}from"../icon/Icon.js";import{styled as t}from"../../stitches.js";const p=t(E,{variants:{theme:c}}),I=t(f,{flexShrink:"0",mr:"$2"}),h=({css:s,showIcon:o=!0,theme:r="error",size:m="sm",children:i,...n})=>e.createElement(p,{theme:r,css:s,...n},o&&e.createElement(I,{size:"sm",is:a[r]}),e.createElement(l,{as:"span",size:m,css:{color:"inherit",transform:"translateY($space$0)"}},i));export{h as InlineMessage};
+import*as e from"react";import{INLINE_MESSAGE_THEMES as a,INLINE_MESSAGE_ICONS as c}from"./InlineMessage.config.js";import{Flex as E}from"../flex/Flex.js";import{Text as f}from"../text/Text.js";import{Icon as l}from"../icon/Icon.js";import{styled as s}from"../../stitches.js";const p=s(E,{variants:{theme:a}}),I=s(l,{flexShrink:"0",mr:"$2"}),S=({css:t,showIcon:m=!0,theme:r="error",size:o="sm",children:n,...i})=>e.createElement(p,{theme:r,css:t,...i},m&&e.createElement(I,{size:"sm",is:c[r]}),e.createElement(f,{as:"span",size:o,css:{transform:"translateY($space$0)"}},n));export{S as InlineMessage};

package/dist/components/markdown-content/components/MarkdownHeading.d.ts

@@ -1,10 +1,8 @@
 import { Content, Heading as HeadingType } from 'mdast';
 import * as React from 'react';
-import { CSS } from '../../../stitches';
 declare type MarkdownHeadingProps = {
     node: HeadingType;
     handleNode: (node: Content) => React.ReactElement;
-    css?: CSS;
 };
 export declare const MarkdownHeading: React.FC<MarkdownHeadingProps>;
 export {};

package/dist/components/markdown-content/components/MarkdownHeading.js

@@ -1 +1 @@
-import*as i from"react";import{Heading as o}from"../../heading/Heading.js";const c=s=>{switch(s){case 1:return{size:"xl",as:"h1"};case 2:return{size:"lg",as:"h2"};case 3:return{size:"md",as:"h3"};case 4:return{size:"sm",as:"h4"};case 5:return{size:"xs",as:"h5"};default:return{size:"xs",as:"h6"}}},d=({node:s,handleNode:r,css:a})=>{var e;const{as:n,size:t}=c(s.depth);return i.createElement(o,{as:n,size:t,css:{color:"inherit",...a}},(e=s.children)==null?void 0:e.map(r))};export{d as MarkdownHeading};
+import*as i from"react";import{Heading as o}from"../../heading/Heading.js";const d=e=>{switch(e){case 1:return{size:"xl",as:"h1"};case 2:return{size:"lg",as:"h2"};case 3:return{size:"md",as:"h3"};case 4:return{size:"sm",as:"h4"};case 5:return{size:"xs",as:"h5"};default:return{size:"xs",as:"h6"}}},c=({node:e,handleNode:r,...a})=>{var s;const{as:t,size:n}=d(e.depth);return i.createElement(o,{as:t,size:n,...a},(s=e.children)==null?void 0:s.map(r))};export{c as MarkdownHeading};

package/dist/components/markdown-content/components/MarkdownParagraph.d.ts

@@ -1,10 +1,8 @@
 import { Content, Paragraph } from 'mdast';
 import * as React from 'react';
-import { CSS } from '../../../stitches';
 declare type MarkdownParagraphProps = {
     node: Paragraph;
     handleNode: (node: Content) => React.ReactElement;
-    css?: CSS;
 };
 export declare const MarkdownParagraph: React.FC<MarkdownParagraphProps>;
 export {};

package/dist/components/markdown-content/components/MarkdownParagraph.js

@@ -1 +1 @@
-import*as n from"react";import{Text as t}from"../../text/Text.js";const c=({node:o,handleNode:e,css:a})=>{var r;return n.createElement(t,{css:{color:"inherit",...a}},(r=o.children)==null?void 0:r.map(e))};export{c as MarkdownParagraph};
+import*as n from"react";import{Text as t}from"../../text/Text.js";const d=({node:e,handleNode:o,...a})=>{var r;return n.createElement(t,{...a},(r=e.children)==null?void 0:r.map(o))};export{d as MarkdownParagraph};

package/dist/components/text/Text.js

@@ -1 +1 @@
-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};
+import*as o from"react";import{styled as f}from"../../stitches.js";import{capsize as e}from"../../utilities/style/capsize.js";const i={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"}}}},l=({size:t,noCapsize:n})=>({...i.size[t],...i.noCapsize[`${n}`]}),a=f("p",{fontFamily:"$body",fontWeight:400,margin:0,"& > &":{"&:before, &:after":{display:"none"}},variants:i}),s=o.forwardRef(({size:t="md",...n},r)=>o.createElement(a,{size:t,...n,ref:r}));s.displayName="Text";export{a as StyledText,s as Text,l as getTextVariant,i as textVariants};

package/dist/components/toast/Toast.js

@@ -1 +1 @@
-import{Error as g,Close as h}from"@atom-learning/icons";import*as t from"react";import{toast as $}from"react-hot-toast";import{keyframes as i,styled as a}from"../../stitches.js";import{ActionIcon as v}from"../action-icon/ActionIcon.js";import{Icon as s}from"../icon/Icon.js";import{Loader as y}from"../loader/Loader.js";import{Text as w}from"../text/Text.js";const n=400,x=i({"0%":{transform:"translate3d(0,-100%,0)",opacity:0},"100%":{transform:"translate3d(0,0,0)",opacity:1}}),E=i({"0%":{transform:"translate3d(0,0,0)",opacity:1},"100%":{transform:"translate3d(0,-100%,0)",opacity:0}}),k=a("div",{position:"absolute",width:"100%",variants:{visible:{true:{"@allowMotion":{animation:`${x} 250ms cubic-bezier(0.22, 1, 0.36, 1)`}},false:{opacity:0,"@allowMotion":{animation:`${E} 250ms cubic-bezier(0.22, 1, 0.36, 1)`}}}}}),I=a("div",{pointerEvents:"auto",alignItems:"center",borderRadius:"$0",boxShadow:"$1",boxSizing:"border-box",color:"white",display:"flex",minHeight:"$5",pl:"$4",position:"relative",pr:"$6",py:"$4",transition:"background-color 50ms ease-out",width:"100%","@sm":{width:n},"@allowMotion":{transition:"background-color 50ms ease-out, transform 150ms ease-out"},variants:{status:{blank:{bg:"$primary"},error:{bg:"$danger"},loading:{bg:"$primary"},success:{bg:"$success"}}}}),T=t.memo(({ariaLive:l,height:m,id:e,message:c,role:p,type:o="blank",visible:d,calculateOffset:u,updateHeight:b})=>{const f=u(e,{reverseOrder:!0,margin:8});return t.createElement(k,{visible:d},t.createElement(I,{ref:r=>{r&&m===void 0&&b(e,r.getBoundingClientRect().height)},status:o,role:p,"aria-live":l,style:{transform:`translateY(${f}px)`}},o==="error"&&t.createElement(s,{size:"sm",css:{mr:"$3",flex:"0 0 auto"},is:g}),t.createElement(w,{css:{color:"inherit"}},c),o==="loading"?t.createElement(y,{css:{flex:"0 0 auto",ml:"auto"}}):t.createElement(v,{css:{position:"absolute",top:"$2",right:"$2",color:"white","&:hover,&:focus":{color:"white",opacity:.5}},label:"Close alert",onClick:()=>$.dismiss(e)},t.createElement(s,{is:h}))))});export{n as TOAST_WIDTH,T as Toast};
+import{Error as g,Close as $}from"@atom-learning/icons";import*as t from"react";import{toast as h}from"react-hot-toast";import{keyframes as a,styled as i}from"../../stitches.js";import{ActionIcon as v}from"../action-icon/ActionIcon.js";import{Icon as s}from"../icon/Icon.js";import{Loader as y}from"../loader/Loader.js";import{Text as w}from"../text/Text.js";const n=400,x=a({"0%":{transform:"translate3d(0,-100%,0)",opacity:0},"100%":{transform:"translate3d(0,0,0)",opacity:1}}),E=a({"0%":{transform:"translate3d(0,0,0)",opacity:1},"100%":{transform:"translate3d(0,-100%,0)",opacity:0}}),k=i("div",{position:"absolute",width:"100%",variants:{visible:{true:{"@allowMotion":{animation:`${x} 250ms cubic-bezier(0.22, 1, 0.36, 1)`}},false:{opacity:0,"@allowMotion":{animation:`${E} 250ms cubic-bezier(0.22, 1, 0.36, 1)`}}}}}),I=i("div",{pointerEvents:"auto",alignItems:"center",borderRadius:"$0",boxShadow:"$1",boxSizing:"border-box",color:"white",display:"flex",minHeight:"$5",pl:"$4",position:"relative",pr:"$6",py:"$4",transition:"background-color 50ms ease-out",width:"100%","@sm":{width:n},"@allowMotion":{transition:"background-color 50ms ease-out, transform 150ms ease-out"},variants:{status:{blank:{bg:"$primary"},error:{bg:"$danger"},loading:{bg:"$primary"},success:{bg:"$success"}}}}),T=t.memo(({ariaLive:l,height:m,id:e,message:c,role:p,type:o="blank",visible:d,calculateOffset:u,updateHeight:b})=>{const f=u(e,{reverseOrder:!0,margin:8});return t.createElement(k,{visible:d},t.createElement(I,{ref:r=>{r&&m===void 0&&b(e,r.getBoundingClientRect().height)},status:o,role:p,"aria-live":l,style:{transform:`translateY(${f}px)`}},o==="error"&&t.createElement(s,{size:"sm",css:{mr:"$3",flex:"0 0 auto"},is:g}),t.createElement(w,null,c),o==="loading"?t.createElement(y,{css:{flex:"0 0 auto",ml:"auto"}}):t.createElement(v,{css:{position:"absolute",top:"$2",right:"$2",color:"white","&:hover,&:focus":{color:"white",opacity:.5}},label:"Close alert",onClick:()=>h.dismiss(e)},t.createElement(s,{is:$}))))});export{n as TOAST_WIDTH,T as Toast};