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

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};

package/dist/components/toggle-group/ToggleGroupButton.d.ts

@@ -0,0 +1,534 @@
+import * as React from 'react';
+export declare const StyledButton: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-toggle-group").ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>>, {}, {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    reducedMotion: string;
+    allowMotion: string;
+    hover: string;
+}, import("@stitches/react/types/css-util").CSS<{
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    reducedMotion: string;
+    allowMotion: string;
+    hover: string;
+}, {
+    colors: {
+        textForeground: any;
+        textSubtle: any;
+        textPlaceholder: any;
+        background: any;
+        backgroundAccent: any;
+        tonal50: any;
+        tonal100: any;
+        tonal200: any;
+        tonal300: any;
+        tonal400: any;
+        tonal500: any;
+        tonal600: any;
+        alpha100: any;
+        alpha150: any;
+        alpha200: any;
+        alpha250: any;
+        alpha600: any;
+        primaryLight: any;
+        primary: any;
+        primaryMid: any;
+        primaryDark: any;
+        secondary: any;
+        brandRed: any;
+        brandRedAccent: any;
+        brandGreen: any;
+        brandGreenAccent: any;
+        brandPurple: any;
+        brandPurpleAccent: any;
+        brandYellow: any;
+        brandYellowAccent: any;
+        successLight: any;
+        success: any;
+        successMid: any;
+        successDark: any;
+        dangerLight: any;
+        danger: any;
+        dangerMid: any;
+        dangerDark: any;
+        warningLight: any;
+        warning: any;
+        warningMid: any;
+        warningDark: any;
+        subjectEnglish: any;
+        subjectMaths: any;
+        subjectScience: any;
+        subjectVerbalReasoning: any;
+        subjectNonVerbalReasoning: any;
+        subjectCreativeWriting: any;
+        subjectExamSkills: any;
+    };
+    space: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        "4": any;
+        "5": any;
+        "6": any;
+        "7": any;
+        "8": any;
+        "9": any;
+    };
+    fontSizes: {
+        xs: any;
+        sm: any;
+        md: any;
+        lg: any;
+        xl: any;
+        "2xl": any;
+        "3xl": any;
+        "4xl": any;
+    };
+    fonts: {
+        sans: any;
+        mono: any;
+        display: any;
+        body: any;
+    };
+    sizes: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        "4": any;
+        "5": any;
+        "6": any;
+        "7": any;
+        "8": any;
+    };
+    radii: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        round: any;
+    };
+    shadows: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+    };
+}, import("@stitches/react/types/config").DefaultThemeMap, {
+    bg: (value: {
+        readonly [$$PropertyValue]: "background";
+    }) => {
+        background: {
+            readonly [$$PropertyValue]: "background";
+        };
+    };
+    inset: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        top: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        right: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        bottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        left: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    size: (value: string | number | {
+        readonly [$$ScaleValue]: "size";
+    }) => {
+        height: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
+        width: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
+    };
+    p: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        padding: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pl: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    px: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    py: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    m: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        margin: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    ml: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mx: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    my: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+}>>, {
+    size?: "sm" | "md" | "lg" | undefined;
+    isIconOnly?: boolean | "true" | undefined;
+}, {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    reducedMotion: string;
+    allowMotion: string;
+    hover: string;
+}, import("@stitches/react/types/css-util").CSS<{
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    reducedMotion: string;
+    allowMotion: string;
+    hover: string;
+}, {
+    colors: {
+        textForeground: any;
+        textSubtle: any;
+        textPlaceholder: any;
+        background: any;
+        backgroundAccent: any;
+        tonal50: any;
+        tonal100: any;
+        tonal200: any;
+        tonal300: any;
+        tonal400: any;
+        tonal500: any;
+        tonal600: any;
+        alpha100: any;
+        alpha150: any;
+        alpha200: any;
+        alpha250: any;
+        alpha600: any;
+        primaryLight: any;
+        primary: any;
+        primaryMid: any;
+        primaryDark: any;
+        secondary: any;
+        brandRed: any;
+        brandRedAccent: any;
+        brandGreen: any;
+        brandGreenAccent: any;
+        brandPurple: any;
+        brandPurpleAccent: any;
+        brandYellow: any;
+        brandYellowAccent: any;
+        successLight: any;
+        success: any;
+        successMid: any;
+        successDark: any;
+        dangerLight: any;
+        danger: any;
+        dangerMid: any;
+        dangerDark: any;
+        warningLight: any;
+        warning: any;
+        warningMid: any;
+        warningDark: any;
+        subjectEnglish: any;
+        subjectMaths: any;
+        subjectScience: any;
+        subjectVerbalReasoning: any;
+        subjectNonVerbalReasoning: any;
+        subjectCreativeWriting: any;
+        subjectExamSkills: any;
+    };
+    space: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        "4": any;
+        "5": any;
+        "6": any;
+        "7": any;
+        "8": any;
+        "9": any;
+    };
+    fontSizes: {
+        xs: any;
+        sm: any;
+        md: any;
+        lg: any;
+        xl: any;
+        "2xl": any;
+        "3xl": any;
+        "4xl": any;
+    };
+    fonts: {
+        sans: any;
+        mono: any;
+        display: any;
+        body: any;
+    };
+    sizes: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        "4": any;
+        "5": any;
+        "6": any;
+        "7": any;
+        "8": any;
+    };
+    radii: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        round: any;
+    };
+    shadows: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+    };
+}, import("@stitches/react/types/config").DefaultThemeMap, {
+    bg: (value: {
+        readonly [$$PropertyValue]: "background";
+    }) => {
+        background: {
+            readonly [$$PropertyValue]: "background";
+        };
+    };
+    inset: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        top: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        right: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        bottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        left: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    size: (value: string | number | {
+        readonly [$$ScaleValue]: "size";
+    }) => {
+        height: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
+        width: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
+    };
+    p: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        padding: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pl: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    px: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    py: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    m: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        margin: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    ml: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mx: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    my: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+}>>;
+export declare const ToggleGroupButton: React.FC<React.ComponentProps<typeof StyledButton>>;

package/dist/components/toggle-group/ToggleGroupButton.js

@@ -0,0 +1 @@
+import{Children as d,isValidElement as m,createElement as l,cloneElement as u}from"react";import{styled as f}from"../../stitches.js";import{StyledIcon as $,Icon as p}from"../icon/Icon.js";import{StyledItem as x}from"./ToggleGroupItem.js";const o={sm:"32px",md:"40px",lg:"48px"},I={sm:"$4",md:"$5",lg:"$5"},S={sm:"$2",md:"$3",lg:"$3"},s=n=>({fontSize:`$${n}`,px:I[n],minHeight:o[n],"& > *:not(:last-child)":{mr:S[n]}}),c=f(x,{flexGrow:1,display:"flex",alignItems:"center",justifyContent:"center",fontWeight:600,lineHeight:1,py:"$1",[`& ${$}`]:{flexShrink:0},variants:{size:{sm:s("sm"),md:s("md"),lg:s("lg")},isIconOnly:{true:{}}},compoundVariants:[{isIconOnly:!0,size:"sm",css:{minWidth:o.sm,p:0}},{isIconOnly:!0,size:"md",css:{minWidth:o.md,p:0}},{isIconOnly:!0,size:"lg",css:{minWidth:o.lg,p:0}}]}),h=({size:n,children:g,...a})=>{var r;const e=d.toArray(g),i=e.length<=1,y=i&&m(e[0])&&((r=e[0])==null?void 0:r.type)===p;return l(c,{size:n,isIconOnly:y,...a},e.map(t=>!i&&typeof t=="string"?l("span",{key:t},t):m(t)&&(t==null?void 0:t.type)===p?u(t,{...t.props,size:n}):t))};export{c as StyledButton,h as ToggleGroupButton};