@atom-learning/components 1.17.1 → 1.17.2-beta.0

package/dist/components/accordion/Accordion.d.ts

@@ -267,12 +267,13 @@ declare const StyledRoot: import("@stitches/react/types/styled-component").Style
         };
     };
 }>>;
-declare type AccordionProps = React.ComponentProps<typeof StyledRoot> & {
+declare type AccordionPropsType = React.ComponentProps<typeof StyledRoot> & {
     type: 'single' | 'multiple';
 };
-export declare const Accordion: React.FC<AccordionProps> & {
+declare type AccordionType = React.ForwardRefExoticComponent<AccordionPropsType> & {
     Item: typeof AccordionItem;
     Content: typeof AccordionContent;
     Trigger: typeof AccordionTrigger;
 };
+export declare const Accordion: AccordionType;
 export {};

package/dist/components/accordion/Accordion.js

@@ -1 +1 @@
-import{Root as i}from"@radix-ui/react-accordion";import m from"react";import{styled as c}from"../../stitches.js";import{AccordionContent as n}from"./AccordionContent.js";import{AccordionItem as d}from"./AccordionItem.js";import{AccordionTrigger as p}from"./AccordionTrigger.js";const f=c(i,{width:"100%"}),o=({type:r="single",children:t,...e})=>m.createElement(f,{type:r,...e},t);o.Item=d,o.Content=n,o.Trigger=p,o.displayName="Accordion";export{o as Accordion};
+import{Root as c}from"@radix-ui/react-accordion";import r from"react";import{styled as n}from"../../stitches.js";import{AccordionContent as d}from"./AccordionContent.js";import{AccordionItem as f}from"./AccordionItem.js";import{AccordionTrigger as p}from"./AccordionTrigger.js";const a=n(c,{width:"100%"}),o=r.forwardRef(({type:t="single",children:e,...i},m)=>r.createElement(a,{ref:m,type:t,...i},e));o.Item=f,o.Content=d,o.Trigger=p,o.displayName="Accordion";export{o as Accordion};

package/dist/components/divider/Divider.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-declare const StyledDivider: import("@stitches/react/types/styled-component").StyledComponent<"hr", {
+export declare const StyledDivider: import("@stitches/react/types/styled-component").StyledComponent<"hr", {
     orientation?: "horizontal" | "vertical" | undefined;
 }, {
     sm: string;
@@ -267,4 +267,3 @@ declare const StyledDivider: import("@stitches/react/types/styled-component").St
     };
 }>>;
 export declare const Divider: React.FC<React.ComponentProps<typeof StyledDivider>>;
-export {};

package/dist/components/divider/Divider.js

@@ -1 +1 @@
-import r from"react";import{styled as e}from"../../stitches.js";const o=e("hr",{border:0,bg:"$tonal200",variants:{orientation:{horizontal:{height:1,width:"100%"},vertical:{height:"100%",width:1,minHeight:"$3"}}}}),n=({orientation:t="horizontal",...i})=>r.createElement(o,{orientation:t,...i});export{n as Divider};
+import t from"react";import{styled as n}from"../../stitches.js";const r=n("hr",{border:0,bg:"$tonal200",variants:{orientation:{horizontal:{height:1,width:"100%"},vertical:{height:"100%",width:1,minHeight:"$3"}}}}),a=t.forwardRef(({orientation:e="horizontal",...i},o)=>t.createElement(r,{ref:o,orientation:e,...i}));export{a as Divider,r as StyledDivider};

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

@@ -267,7 +267,7 @@ export declare const StyledHeading: import("@stitches/react/types/styled-compone
         };
     };
 }>>;
-export declare type HeadingProps = Override<React.ComponentPropsWithoutRef<typeof StyledHeading>, {
+export declare type HeadingProps = Override<React.ComponentPropsWithRef<typeof StyledHeading>, {
     as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | React.ComponentType | React.ElementType;
 }>;
 export declare const Heading: React.FC<HeadingProps>;

package/dist/components/heading/Heading.js

@@ -1 +1 @@
-import{createElement as o}from"react";import{styled as m}from"../../stitches.js";import{capsize as e}from"../../utilities/style/capsize.js";const i=m("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)}}}}),t=({size:n="md",...l})=>o(i,{size:n,...l});t.displayName="Heading";export{t as Heading,i as StyledHeading};
+import{forwardRef as f,createElement as m}from"react";import{styled as a}from"../../stitches.js";import{capsize as e}from"../../utilities/style/capsize.js";const i=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)}}}}),t=f(({size:n="md",...o},l)=>m(i,{ref:l,size:n,...o}));t.displayName="Heading";export{t as Heading,i as StyledHeading};

package/dist/components/image/Image.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Override } from '../../utilities/types';
-declare const StyledImage: import("@stitches/react/types/styled-component").StyledComponent<"img", {}, {
+export declare const StyledImage: import("@stitches/react/types/styled-component").StyledComponent<"img", {}, {
     sm: string;
     md: string;
     lg: string;

package/dist/components/image/Image.js

@@ -1 +1 @@
-import{styled as i}from"../../stitches.js";const e=i("img",{verticalAlign:"middle",maxWidth:"100%","&[width]":{width:"auto"},"&[width][height]":{height:"auto"},'&[src$=".svg"]':{width:"100%",height:"auto",maxWidth:"none"}}),t=e;t.displayName="Image";export{t as Image};
+import{styled as e}from"../../stitches.js";const t=e("img",{verticalAlign:"middle",maxWidth:"100%","&[width]":{width:"auto"},"&[width][height]":{height:"auto"},'&[src$=".svg"]':{width:"100%",height:"auto",maxWidth:"none"}}),i=t;i.displayName="Image";export{i as Image,t as StyledImage};

package/dist/components/index.d.ts

@@ -53,6 +53,7 @@ export { Text } from './text';
 export { Textarea } from './textarea';
 export { TextareaField } from './textarea-field';
 export { ToastProvider, toast } from './toast';
+export { ToggleGroup } from './toggle-group';
 export { Tooltip } from './tooltip';
 export { ValidationError } from './validation-error';
 export { Video } from './video';

package/dist/components/link/Link.js

@@ -1 +1 @@
-import{forwardRef as d,createElement as n}from"react";import{styled as l}from"../../stitches.js";import{StyledHeading as c}from"../heading/Heading.js";import{StyledLi as p}from"../list/List.js";import{StyledParagraph as y,textVariantSize as f}from"../text/Text.js";const 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"},[`${y} > &, ${c} > &, ${p} > &`]:{fontSize:"100%",lineHeight:1,"&::before, &::after":{content:"none"}},variants:{size:f()}}),a=d(({size:o="md",onClick:m,href:r,...e},i)=>r?n(t,{size:o,...e,ref:i,href:r}):n(t,{as:"button",size:o,...e,ref:i,onClick:m}));a.displayName="Link";export{a as Link,t as StyledLink};
+import{forwardRef as d,createElement as n}from"react";import{styled as l}from"../../stitches.js";import{StyledHeading as c}from"../heading/Heading.js";import{StyledLi as p}from"../list/List.js";import{StyledText as y,textVariantSize as f}from"../text/Text.js";const 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"},[`${y} > &, ${c} > &, ${p} > &`]:{fontSize:"100%",lineHeight:1,"&::before, &::after":{content:"none"}},variants:{size:f()}}),a=d(({size:o="md",onClick:m,href:e,...r},i)=>e?n(t,{size:o,...r,ref:i,href:e}):n(t,{as:"button",size:o,...r,ref:i,onClick:m}));a.displayName="Link";export{a as Link,t as StyledLink};

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

@@ -264,7 +264,7 @@ export declare const StyledLi: import("@stitches/react/types/styled-component").
         };
     };
 }>>;
-declare const StyledList: import("@stitches/react/types/styled-component").StyledComponent<"ul", {
+export declare const StyledList: import("@stitches/react/types/styled-component").StyledComponent<"ul", {
     size?: ("sm" | "md" | "lg" | "xl" | "xs") | undefined;
     as?: "ol" | "ul" | undefined;
 }, {
@@ -532,10 +532,11 @@ declare const StyledList: import("@stitches/react/types/styled-component").Style
         };
     };
 }>>;
-declare type ListProps = React.ComponentProps<typeof StyledList> & {
+declare type ListPropsType = React.ComponentPropsWithRef<typeof StyledList> & {
     ordered?: boolean;
 };
-export declare const List: React.FC<ListProps> & {
+declare type ListType = React.ForwardRefExoticComponent<ListPropsType> & {
     Item: typeof StyledLi;
 };
+export declare const List: ListType;
 export {};

package/dist/components/list/List.js

@@ -1 +1 @@
-import{createElement as m}from"react";import{styled as l}from"../../stitches.js";import{textVariantSize as a}from"../text/Text.js";const t=l("li",{}),n=l("ul",{fontFamily:"$body",m:"unset",p:"unset",[`& > ${t}`]:{"&:not(:last-child)":{mb:"$2"},"&:last-child":{mb:0}},variants:{size:a({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"}}}}}}),e=({size:o="md",ordered:i,...s})=>m(n,{as:i?"ol":"ul",size:o,...s});e.Item=t;export{e as List,t as StyledLi};
+import{forwardRef as r,createElement as n}from"react";import{styled as l}from"../../stitches.js";import{textVariantSize as p}from"../text/Text.js";const t=l("li",{}),e=l("ul",{fontFamily:"$body",m:"unset",p:"unset",[`& > ${t}`]:{"&:not(:last-child)":{mb:"$2"},"&:last-child":{mb:0}},variants:{size:p({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=r(({size:i="md",ordered:s,...a},m)=>n(e,{ref:m,as:s?"ol":"ul",size:i,...a}));o.Item=t;export{o as List,t as StyledLi,e as StyledList};

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

@@ -1 +1 @@
-import{createElement as l}from"react";import{styled as o}from"../../../stitches.js";const m=o("em",{fontStyle:"italic"}),n=({node:e,handleNode:r})=>{var t;return l(m,null,(t=e.children)==null?void 0:t.map(r))};export{n as MarkdownEmphasis};
+import{createElement as o}from"react";import{styled as l}from"../../../stitches.js";const n=l("em",{fontStyle:"italic"}),a=({node:r,handleNode:e})=>{var t;return o(n,null,(t=r.children)==null?void 0:t.map(e))};export{a as MarkdownEmphasis};

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

@@ -1 +1 @@
-import{createElement as n}from"react";import{styled as e}from"../../../stitches.js";const l=e("strong",{fontWeight:600}),m=({node:r,handleNode:o})=>{var t;return n(l,null,(t=r.children)==null?void 0:t.map(o))};export{m as MarkdownStrong};
+import{createElement as n}from"react";import{styled as e}from"../../../stitches.js";const l=e("strong",{fontWeight:600}),a=({node:t,handleNode:o})=>{var r;return n(l,null,(r=t.children)==null?void 0:r.map(o))};export{a as MarkdownStrong};

package/dist/components/stack/Stack.d.ts

@@ -3,9 +3,9 @@ import { CSS } from '../../stitches';
 declare const StyledStack: import("@stitches/react/types/styled-component").StyledComponent<"div", {
     direction?: "row" | "column" | "row-reverse" | undefined;
     wrap?: "wrap" | "wrap-reverse" | "no-wrap" | undefined;
-    justify?: "center" | "end" | "start" | undefined;
-    align?: "center" | "end" | "start" | undefined;
-    gap?: number | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | undefined;
+    justify?: boolean | "center" | "false" | "end" | "start" | undefined;
+    align?: boolean | "center" | "false" | "end" | "start" | undefined;
+    gap?: number | boolean | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "false" | undefined;
 }, {
     sm: string;
     md: string;
@@ -271,8 +271,8 @@ declare const StyledStack: import("@stitches/react/types/styled-component").Styl
         };
     };
 }>>;
-declare type StackProps = React.ComponentProps<typeof StyledStack> & {
+declare type StackPropsType = React.ComponentProps<typeof StyledStack> & {
     css?: CSS;
 };
-export declare const Stack: React.FC<StackProps>;
+export declare const Stack: React.FC<StackPropsType>;
 export {};

package/dist/components/stack/Stack.js

@@ -1 +1 @@
-import{createElement as n}from"react";import{theme as l,styled as i}from"../../stitches.js";import{CSSWrapper as f}from"../../utilities/css-wrapper/CSSWrapper.js";const m=Object.keys(l.space).reduce((t,e)=>({...t,[e]:{mt:`-$space$${e}`,ml:`-$space$${e}`,"& > *":{mt:`$space$${e}`,ml:`$space$${e}`}}}),{}),w=i("div",{display:"flex","& > *":{m:0},variants:{direction:{row:{flexDirection:"row"},"row-reverse":{flexDirection:"row-reverse"},column:{flexDirection:"column"}},wrap:{wrap:{flexWrap:"wrap"},"no-wrap":{flexWrap:"no-wrap"},"wrap-reverse":{flexWrap:"wrap-reverse"}},justify:{start:{justifyContent:"flex-start"},center:{justifyContent:"center"},end:{justifyContent:"flex-end"}},align:{start:{alignItems:"flex-start"},center:{alignItems:"center"},end:{alignItems:"flex-end"}},gap:m}}),s=({css:t,gap:e=2,direction:r="row",wrap:p="wrap",justify:o="start",align:a,...c})=>n(f,{css:t},n(w,{direction:r,gap:e,wrap:p,justify:o,align:typeof a=="undefined"&&r!=="column"?"center":a,...c}));s.displayName="Stack";export{s as Stack};
+import{createElement as n}from"react";import{theme as c,styled as f}from"../../stitches.js";import{CSSWrapper as i}from"../../utilities/css-wrapper/CSSWrapper.js";const m=Object.keys(c.space).reduce((t,e)=>({...t,[e]:{mt:`-$space$${e}`,ml:`-$space$${e}`,"& > *":{mt:`$space$${e}`,ml:`$space$${e}`}}}),{}),w=f("div",{display:"flex","& > *":{m:0},variants:{direction:{row:{flexDirection:"row"},"row-reverse":{flexDirection:"row-reverse"},column:{flexDirection:"column"}},wrap:{wrap:{flexWrap:"wrap"},"no-wrap":{flexWrap:"no-wrap"},"wrap-reverse":{flexWrap:"wrap-reverse"}},justify:{start:{justifyContent:"flex-start"},center:{justifyContent:"center"},end:{justifyContent:"flex-end"},false:{}},align:{start:{alignItems:"flex-start"},center:{alignItems:"center"},end:{alignItems:"flex-end"},false:{}},gap:{...m,false:{}}}}),s=({css:t,gap:e=2,direction:r="row",wrap:p="wrap",justify:l="start",align:a,...o})=>n(i,{css:t},n(w,{direction:r,gap:e,wrap:p,justify:l,align:typeof a=="undefined"&&r!=="column"?"center":a,...o}));s.displayName="Stack";export{s as Stack};

package/dist/components/stack-content/StackContent.js

@@ -1 +1 @@
-import{createElement as e,Children as a,isValidElement as p,cloneElement as s}from"react";import{styled as f}from"../../stitches.js";import{Divider as d}from"../divider/Divider.js";import{Heading as c}from"../heading/Heading.js";import{Image as l}from"../image/Image.js";import{List as k}from"../list/List.js";import"../markdown-content/components/MarkdownCode.js";import"../markdown-content/components/MarkdownEmphasis.js";import{MarkdownHeading as u}from"../markdown-content/components/MarkdownHeading.js";import"../markdown-content/components/MarkdownInlineCode.js";import{MarkdownImage as y}from"../markdown-content/components/MarkdownImage.js";import"../link/Link.js";import{MarkdownList as $}from"../markdown-content/components/MarkdownList.js";import{MarkdownParagraph as g}from"../markdown-content/components/MarkdownParagraph.js";import"../markdown-content/components/MarkdownStrong.js";import{MarkdownThematicBreak as w}from"../markdown-content/components/MarkdownThematicBreak.js";import{Text as C}from"../text/Text.js";const M=f("div",{}),m=(o,i)=>s(o,{css:{...i,...o.props.css?o.props.css:{}}}),n=({children:o,...i})=>e(M,{...i},a.map(o,r=>{if(!p(r))return r;const t=r==null?void 0:r.type;return t===c||t===u?m(r,{maxWidth:"65ch","&:not(:first-child)":{mt:"$5"},"&:not(:last-child)":{mb:"$5"}}):t===C||t===g||t===k||t===$?m(r,{maxWidth:"75ch","&:not(:last-child)":{mb:"$5"}}):t===d||t===w?m(r,{my:"$5"}):t===l||t===y?m(r,{display:"block","&:not(:first-child)":{mt:"$6"},"&:not(:last-child)":{mb:"$6"}}):r}));n.displayName="StackContent";export{n as StackContent};
+import{forwardRef as i,createElement as d}from"react";import{styled as e}from"../../stitches.js";import{StyledDivider as l}from"../divider/Divider.js";import{StyledHeading as r}from"../heading/Heading.js";import{StyledImage as a}from"../image/Image.js";import{StyledList as c}from"../list/List.js";import{StyledText as n}from"../text/Text.js";const h=e("div",{[`& > ${r}`]:{maxWidth:"65ch","&:not(:first-child)":{mt:"$5"},"&:not(:last-child)":{mb:"$5"}},[`& > ${n}`]:{maxWidth:"75ch","&:not(:last-child)":{mb:"$5"}},[`& > ${c}`]:{maxWidth:"75ch","&:not(:last-child)":{mb:"$5"}},[`& > ${l}`]:{my:"$5"},[`& > ${a}`]:{display:"block","&:not(:first-child)":{mt:"$6"},"&:not(:last-child)":{mb:"$6"}}}),t=i((o,m)=>d(h,{ref:m,...o}));t.displayName="StackContent";export{t as StackContent};

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

@@ -5,7 +5,7 @@ declare type TextSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export declare const textVariantSize: ({ applyCapsize }?: {
     applyCapsize?: boolean | undefined;
 }) => Record<TextSizes, CSS>;
-export declare const StyledParagraph: import("@stitches/react/types/styled-component").StyledComponent<"p", {
+export declare const StyledText: import("@stitches/react/types/styled-component").StyledComponent<"p", {
     size?: TextSizes | undefined;
 }, {
     sm: string;
@@ -272,7 +272,7 @@ export declare const StyledParagraph: import("@stitches/react/types/styled-compo
         };
     };
 }>>;
-declare type TextProps = Override<React.ComponentProps<typeof StyledParagraph>, {
+declare type TextProps = Override<React.ComponentProps<typeof StyledText>, {
     as?: 'blockquote' | 'caption' | 'dd' | 'dt' | 'figcaption' | 'li' | 'p' | 'span' | 'legend' | React.ComponentType | React.ElementType;
 }>;
 export declare const Text: React.FC<TextProps>;

package/dist/components/text/Text.js

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