@atom-learning/components 5.12.0 → 5.13.0-beta.0

package/dist/components/text/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","sources":["../../../src/components/text/Text.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS, styled } from '~/stitches'\nimport type { Override } from '~/utilities'\nimport { capsize } from '~/utilities'\n\nexport const textVariants = {\n  size: {\n    xs: { fontSize: '$xs', lineHeight: 1.6, ...capsize(0.4364) },\n    sm: { fontSize: '$sm', lineHeight: 1.53, ...capsize(0.4056) },\n    md: { fontSize: '$md', lineHeight: 1.5, ...capsize(0.3864) },\n    lg: { fontSize: '$lg', lineHeight: 1.52, ...capsize(0.3983) },\n    xl: { fontSize: '$xl', lineHeight: 1.42, ...capsize(0.3506) }\n  },\n  noCapsize: {\n    true: {\n      '&::before, &::after': { display: 'none !important' }\n    }\n  }\n}\n\nexport const getTextVariant: (options: {\n  size: keyof typeof textVariants.size\n  noCapsize?: boolean\n}) => CSS = ({ size, noCapsize }) => ({\n  ...textVariants.size[size],\n  ...textVariants.noCapsize[`${noCapsize}`]\n})\n\nexport const StyledText = styled('p', {\n  m: 0,\n  /** Allow nesting `<Text />` inside `<Text />` without forcing a new line and spacing. */\n  '& > &': {\n    '&:before, &:after': { display: 'none' }\n  },\n  variants: {\n    ...textVariants,\n    weight: {\n      normal: { fontWeight: 400 },\n      bold: { fontWeight: 600 }\n    },\n    family: {\n      body: { fontFamily: '$body' },\n      display: { fontFamily: '$display' },\n      mono: { fontFamily: '$mono' }\n    }\n  }\n})\n\ntype TextProps = Override<\n  React.ComponentProps<typeof StyledText>,\n  {\n    as?:\n      | 'blockquote'\n      | 'caption'\n      | 'dd'\n      | 'dt'\n      | 'figcaption'\n      | 'li'\n      | 'p'\n      | 'span'\n      | 'legend'\n      | React.ComponentType\n      | React.ElementType\n  }\n>\n\nexport const Text: React.ForwardRefExoticComponent<TextProps> =\n  React.forwardRef(\n    ({ size = 'md', family = 'body', ...remainingProps }, ref) => (\n      <StyledText size={size} family={family} {...remainingProps} ref={ref} />\n    )\n  )\n\nText.displayName = 'Text'\n"],"names":["textVariants","capsize","getTextVariant","size","noCapsize","StyledText","styled","Text","React","family","remainingProps","ref"],"mappings":"sTAMa,MAAAA,EAAe,CAC1B,KAAM,CACJ,GAAI,CAAE,SAAU,MAAO,WAAY,IAAK,GAAGC,EAAQ,KAAM,CAAE,EAC3D,GAAI,CAAE,SAAU,MAAO,WAAY,KAAM,GAAGA,EAAQ,KAAM,CAAE,EAC5D,GAAI,CAAE,SAAU,MAAO,WAAY,IAAK,GAAGA,EAAQ,KAAM,CAAE,EAC3D,GAAI,CAAE,SAAU,MAAO,WAAY,KAAM,GAAGA,EAAQ,KAAM,CAAE,EAC5D,GAAI,CAAE,SAAU,MAAO,WAAY,KAAM,GAAGA,EAAQ,KAAM,CAAE,CAC9D,EACA,UAAW,CACT,KAAM,CACJ,sBAAuB,CAAE,QAAS,iBAAkB,CACtD,CACF,CACF,EAEaC,EAGD,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,KAAO,CACpC,GAAGJ,EAAa,KAAKG,GACrB,GAAGH,EAAa,UAAU,GAAGI,IAC/B,GAEaC,EAAaC,EAAO,IAAK,CACpC,EAAG,EAEH,QAAS,CACP,oBAAqB,CAAE,QAAS,MAAO,CACzC,EACA,SAAU,CACR,GAAGN,EACH,OAAQ,CACN,OAAQ,CAAE,WAAY,GAAI,EAC1B,KAAM,CAAE,WAAY,GAAI,CAC1B,EACA,OAAQ,CACN,KAAM,CAAE,WAAY,OAAQ,EAC5B,QAAS,CAAE,WAAY,UAAW,EAClC,KAAM,CAAE,WAAY,OAAQ,CAC9B,CACF,CACF,CAAC,EAoBYO,EACXC,EAAM,WACJ,CAAC,CAAE,KAAAL,EAAO,KAAM,OAAAM,EAAS,UAAWC,CAAe,EAAGC,IACpDH,EAAA,cAACH,EAAW,CAAA,KAAMF,EAAM,OAAQM,EAAS,GAAGC,EAAgB,IAAKC,EAAK,CAE1E,EAEFJ,EAAK,YAAc"}
+{"version":3,"file":"Text.js","sources":["../../../src/components/text/Text.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS, styled } from '~/stitches'\nimport type { Override } from '~/utilities'\nimport { capsize } from '~/utilities'\n\nexport const textVariants = {\n  size: {\n    xs: {\n      fontSize: '$xs',\n      lineHeight: 1.6,\n      ...capsize(0.4364)\n    },\n    sm: {\n      fontSize: '$sm',\n      lineHeight: 1.53,\n      ...capsize(0.4056)\n    },\n    md: {\n      fontSize: '$md',\n      lineHeight: 1.5,\n      ...capsize(0.3864)\n    },\n    lg: {\n      fontSize: '$lg',\n      lineHeight: 1.52,\n      ...capsize(0.3983)\n    },\n    xl: {\n      fontSize: '$xl',\n      lineHeight: 1.42,\n      ...capsize(0.3506)\n    }\n  },\n  noCapsize: {\n    true: {\n      '&::before, &::after': {\n        display: 'none !important'\n      }\n    }\n  }\n}\n\nexport const getTextVariant: (options: {\n  size: keyof typeof textVariants.size\n  noCapsize?: boolean\n}) => CSS = ({ size, noCapsize }) => ({\n  ...textVariants.size[size],\n  ...textVariants.noCapsize[`${noCapsize}`]\n})\n\nexport const StyledText = styled('p', {\n  m: 0,\n  /** Allow nesting `<Text />` inside `<Text />` without forcing a new line and spacing. */\n  '& > &': {\n    '&:before, &:after': { display: 'none' }\n  },\n  variants: {\n    ...textVariants,\n    weight: {\n      normal: { fontWeight: 400 },\n      bold: { fontWeight: 600 }\n    },\n    family: {\n      body: { fontFamily: '$body' },\n      display: { fontFamily: '$display' },\n      mono: { fontFamily: '$mono' }\n    }\n  }\n})\n\ntype TextProps = Override<\n  React.ComponentProps<typeof StyledText>,\n  {\n    as?:\n      | 'blockquote'\n      | 'caption'\n      | 'dd'\n      | 'dt'\n      | 'figcaption'\n      | 'li'\n      | 'p'\n      | 'span'\n      | 'legend'\n      | React.ComponentType\n      | React.ElementType\n  }\n>\n\nexport const Text: React.ForwardRefExoticComponent<TextProps> =\n  React.forwardRef(\n    ({ size = 'md', family = 'body', ...remainingProps }, ref) => (\n      <StyledText size={size} family={family} {...remainingProps} ref={ref} />\n    )\n  )\n\nText.displayName = 'Text'\n"],"names":["textVariants","capsize","getTextVariant","size","noCapsize","StyledText","styled","Text","React","family","remainingProps","ref"],"mappings":"sTAMa,MAAAA,EAAe,CAC1B,KAAM,CACJ,GAAI,CACF,SAAU,MACV,WAAY,IACZ,GAAGC,EAAQ,KAAM,CACnB,EACA,GAAI,CACF,SAAU,MACV,WAAY,KACZ,GAAGA,EAAQ,KAAM,CACnB,EACA,GAAI,CACF,SAAU,MACV,WAAY,IACZ,GAAGA,EAAQ,KAAM,CACnB,EACA,GAAI,CACF,SAAU,MACV,WAAY,KACZ,GAAGA,EAAQ,KAAM,CACnB,EACA,GAAI,CACF,SAAU,MACV,WAAY,KACZ,GAAGA,EAAQ,KAAM,CACnB,CACF,EACA,UAAW,CACT,KAAM,CACJ,sBAAuB,CACrB,QAAS,iBACX,CACF,CACF,CACF,EAEaC,EAGD,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,KAAO,CACpC,GAAGJ,EAAa,KAAKG,GACrB,GAAGH,EAAa,UAAU,GAAGI,IAC/B,GAEaC,EAAaC,EAAO,IAAK,CACpC,EAAG,EAEH,QAAS,CACP,oBAAqB,CAAE,QAAS,MAAO,CACzC,EACA,SAAU,CACR,GAAGN,EACH,OAAQ,CACN,OAAQ,CAAE,WAAY,GAAI,EAC1B,KAAM,CAAE,WAAY,GAAI,CAC1B,EACA,OAAQ,CACN,KAAM,CAAE,WAAY,OAAQ,EAC5B,QAAS,CAAE,WAAY,UAAW,EAClC,KAAM,CAAE,WAAY,OAAQ,CAC9B,CACF,CACF,CAAC,EAoBYO,EACXC,EAAM,WACJ,CAAC,CAAE,KAAAL,EAAO,KAAM,OAAAM,EAAS,UAAWC,CAAe,EAAGC,IACpDH,EAAA,cAACH,EAAW,CAAA,KAAMF,EAAM,OAAQM,EAAS,GAAGC,EAAgB,IAAKC,EAAK,CAE1E,EAEFJ,EAAK,YAAc"}

package/dist/components/textarea/Textarea.d.ts

@@ -26,6 +26,8 @@ declare const StyledTextarea: import("@atom-learning/stitches-react/types/styled
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/tile/Tile.d.ts

@@ -28,6 +28,8 @@ export declare const StyledTile: import("@atom-learning/stitches-react/types/sty
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/tile/TileGroup.d.ts

@@ -1,8 +1,8 @@
 export declare const TileGroup: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"div", {
-    direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | "revert-layer" | undefined;
-    wrap?: "inherit" | "initial" | "revert" | "unset" | "wrap" | "nowrap" | "wrap-reverse" | "revert-layer" | undefined;
-    justify?: "left" | "right" | "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | "flex-end" | "flex-start" | "normal" | "revert-layer" | "unsafe" | "safe" | undefined;
-    align?: "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "end" | "start" | "flex-end" | "flex-start" | "baseline" | "normal" | "self-end" | "self-start" | "revert-layer" | "unsafe" | "safe" | "first baseline" | "last baseline" | undefined;
+    direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "row-reverse" | "column" | "column-reverse" | "revert-layer" | undefined;
+    wrap?: "inherit" | "initial" | "revert" | "unset" | "revert-layer" | "wrap" | "nowrap" | "wrap-reverse" | undefined;
+    justify?: "left" | "right" | "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "revert-layer" | "normal" | "unsafe" | "safe" | "start" | "end" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | undefined;
+    align?: "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "revert-layer" | "normal" | "unsafe" | "safe" | "start" | "end" | "flex-start" | "flex-end" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline" | undefined;
     gap?: number | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | undefined;
 }, {
     sm: string;
@@ -28,6 +28,8 @@ export declare const TileGroup: import("@atom-learning/stitches-react/types/styl
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/tile-interactive/TileInteractive.d.ts

@@ -31,6 +31,8 @@ declare const StyledTileInteractive: import("@atom-learning/stitches-react/types
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -402,6 +404,8 @@ declare const StyledTileInteractive: import("@atom-learning/stitches-react/types
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/tile-interactive/TileInteractive.js

@@ -1,2 +1,2 @@
-import r from"react";import{Tile as l}from"../tile/Tile.js";import"../flex/Flex.js";import{styled as c}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as p}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";const m=c.withConfig({shouldForwardStitchesProp:t=>["as"].includes(t)})(l,{"&[disabled]":{opacity:.3,cursor:"not-allowed"},"&:not([disabled])":{cursor:"pointer",transform:"translateY(0)",transition:"transform 250ms ease","&::after":{content:"",position:"absolute",inset:0,boxShadow:"$2",opacity:0,transition:"opacity 250ms ease-out",borderRadius:"inherit",pointerEvents:"none"},"&:hover":{transform:"translateY(-$space$0)","&::after":{opacity:1}},"&:active":{bg:"$base2"},"&:focus-visible":{...p()}}}),i=r.forwardRef(({onClick:t,href:o,type:a="button",as:e,...s},n)=>r.createElement(m,{...s,...o?{as:e||"a",href:o,onClick:void 0}:{as:e||"button",type:a,onClick:t},ref:n}));i.displayName="TileInteractive";export{i as TileInteractive};
+import i from"react";import{Tile as p}from"../tile/Tile.js";import"../flex/Flex.js";import{styled as l}from"../../stitches.js";const c=l.withConfig({shouldForwardStitchesProp:t=>["as"].includes(t)})(p,{"&[disabled]":{opacity:.3,cursor:"not-allowed"},"&:not([disabled])":{cursor:"pointer",transform:"translateY(0)",transition:"transform 250ms ease","&::after":{content:"",position:"absolute",inset:0,boxShadow:"$2",opacity:0,transition:"opacity 250ms ease-out",borderRadius:"inherit",pointerEvents:"none"},"&:hover":{transform:"translateY(-$space$0)","&::after":{opacity:1}},"&:active":{bg:"$base2"},"&:focus-visible":{outline:"none",position:"relative",zIndex:1,boxShadow:"white 0px 0px 0px 2px, $colors$primary800 0px 0px 0px 4px"}}}),r=i.forwardRef(({onClick:t,href:o,type:a="button",as:e,...n},s)=>i.createElement(c,{...n,...o?{as:e||"a",href:o,onClick:void 0}:{as:e||"button",type:a,onClick:t},ref:s}));r.displayName="TileInteractive";export{r as TileInteractive};
 //# sourceMappingURL=TileInteractive.js.map

package/dist/components/tile-interactive/TileInteractive.js.map

@@ -1 +1 @@
-{"version":3,"file":"TileInteractive.js","sources":["../../../src/components/tile-interactive/TileInteractive.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Tile } from '~/components/tile'\nimport { styled } from '~/stitches'\nimport { NavigatorActions } from '~/types'\nimport { focusVisibleStyleBlock } from '~/utilities'\n\nconst StyledTileInteractive = styled.withConfig({\n  shouldForwardStitchesProp: (propName) => ['as'].includes(propName)\n})(Tile, {\n  '&[disabled]': {\n    opacity: 0.3,\n    cursor: 'not-allowed'\n  },\n  '&:not([disabled])': {\n    cursor: 'pointer',\n    transform: 'translateY(0)',\n    transition: 'transform 250ms ease',\n    '&::after': {\n      content: '',\n      position: 'absolute',\n      inset: 0,\n      boxShadow: '$2',\n      opacity: 0,\n      transition: 'opacity 250ms ease-out',\n      borderRadius: 'inherit',\n      pointerEvents: 'none'\n    },\n    '&:hover': {\n      transform: 'translateY(-$space$0)',\n      '&::after': {\n        opacity: 1\n      }\n    },\n    '&:active': {\n      bg: '$base2'\n    },\n    '&:focus-visible': {\n      ...focusVisibleStyleBlock()\n    }\n  }\n})\n\ntype TTileInteractiveProps = React.ComponentProps<\n  typeof StyledTileInteractive\n> & {\n  as?: React.ComponentType | React.ElementType\n} & React.ButtonHTMLAttributes<HTMLButtonElement> &\n  NavigatorActions\n\nexport const TileInteractive: React.ForwardRefExoticComponent<TTileInteractiveProps> =\n  React.forwardRef(({ onClick, href, type = 'button', as, ...rest }, ref) => {\n    const isLink = !!href\n    const elementSpecificProps = isLink\n      ? {\n          as: as || ('a' as React.ElementType),\n          href,\n          onClick: undefined\n        }\n      : { as: as || ('button' as React.ElementType), type, onClick }\n\n    return (\n      <StyledTileInteractive {...rest} {...elementSpecificProps} ref={ref} />\n    )\n  })\n\nTileInteractive.displayName = 'TileInteractive'\n"],"names":["StyledTileInteractive","styled","propName","Tile","focusVisibleStyleBlock","TileInteractive","React","onClick","href","type","as","rest","ref"],"mappings":"mZAOA,MAAMA,EAAwBC,EAAO,WAAW,CAC9C,0BAA4BC,GAAa,CAAC,IAAI,EAAE,SAASA,CAAQ,CACnE,CAAC,EAAEC,EAAM,CACP,cAAe,CACb,QAAS,GACT,OAAQ,aACV,EACA,oBAAqB,CACnB,OAAQ,UACR,UAAW,gBACX,WAAY,uBACZ,WAAY,CACV,QAAS,GACT,SAAU,WACV,MAAO,EACP,UAAW,KACX,QAAS,EACT,WAAY,yBACZ,aAAc,UACd,cAAe,MACjB,EACA,UAAW,CACT,UAAW,wBACX,WAAY,CACV,QAAS,CACX,CACF,EACA,WAAY,CACV,GAAI,QACN,EACA,kBAAmB,CACjB,GAAGC,EAAuB,CAC5B,CACF,CACF,CAAC,EASYC,EACXC,EAAM,WAAW,CAAC,CAAE,QAAAC,EAAS,KAAAC,EAAM,KAAAC,EAAO,SAAU,GAAAC,KAAOC,CAAK,EAAGC,IAW/DN,EAAA,cAACN,EAAA,CAAuB,GAAGW,EAAO,GAVnBH,EAEb,CACE,GAAIE,GAAO,IACX,KAAAF,EACA,QAAS,MACX,EACA,CAAE,GAAIE,GAAO,SAAgC,KAAAD,EAAM,QAAAF,CAAQ,EAGF,IAAKK,CAAAA,CAAK,CAExE,EAEHP,EAAgB,YAAc"}
+{"version":3,"file":"TileInteractive.js","sources":["../../../src/components/tile-interactive/TileInteractive.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Tile } from '~/components/tile'\nimport { styled } from '~/stitches'\nimport { NavigatorActions } from '~/types'\n\nconst StyledTileInteractive = styled.withConfig({\n  shouldForwardStitchesProp: (propName) => ['as'].includes(propName)\n})(Tile, {\n  '&[disabled]': {\n    opacity: 0.3,\n    cursor: 'not-allowed'\n  },\n  '&:not([disabled])': {\n    cursor: 'pointer',\n    transform: 'translateY(0)',\n    transition: 'transform 250ms ease',\n    '&::after': {\n      content: '',\n      position: 'absolute',\n      inset: 0,\n      boxShadow: '$2',\n      opacity: 0,\n      transition: 'opacity 250ms ease-out',\n      borderRadius: 'inherit',\n      pointerEvents: 'none'\n    },\n    '&:hover': {\n      transform: 'translateY(-$space$0)',\n      '&::after': {\n        opacity: 1\n      }\n    },\n    '&:active': {\n      bg: '$base2'\n    },\n    '&:focus-visible': {\n      outline: 'none',\n      position: 'relative',\n      zIndex: 1,\n      boxShadow: `white 0px 0px 0px 2px, $colors$primary800 0px 0px 0px 4px`\n    }\n  }\n})\n\ntype TTileInteractiveProps = React.ComponentProps<\n  typeof StyledTileInteractive\n> & {\n  as?: React.ComponentType | React.ElementType\n} & React.ButtonHTMLAttributes<HTMLButtonElement> &\n  NavigatorActions\n\nexport const TileInteractive: React.ForwardRefExoticComponent<TTileInteractiveProps> =\n  React.forwardRef(({ onClick, href, type = 'button', as, ...rest }, ref) => {\n    const isLink = !!href\n    const elementSpecificProps = isLink\n      ? {\n          as: as || ('a' as React.ElementType),\n          href,\n          onClick: undefined\n        }\n      : { as: as || ('button' as React.ElementType), type, onClick }\n\n    return (\n      <StyledTileInteractive {...rest} {...elementSpecificProps} ref={ref} />\n    )\n  })\n\nTileInteractive.displayName = 'TileInteractive'\n"],"names":["StyledTileInteractive","styled","propName","Tile","TileInteractive","React","onClick","href","type","as","rest","ref"],"mappings":"+HAMA,MAAMA,EAAwBC,EAAO,WAAW,CAC9C,0BAA4BC,GAAa,CAAC,IAAI,EAAE,SAASA,CAAQ,CACnE,CAAC,EAAEC,EAAM,CACP,cAAe,CACb,QAAS,GACT,OAAQ,aACV,EACA,oBAAqB,CACnB,OAAQ,UACR,UAAW,gBACX,WAAY,uBACZ,WAAY,CACV,QAAS,GACT,SAAU,WACV,MAAO,EACP,UAAW,KACX,QAAS,EACT,WAAY,yBACZ,aAAc,UACd,cAAe,MACjB,EACA,UAAW,CACT,UAAW,wBACX,WAAY,CACV,QAAS,CACX,CACF,EACA,WAAY,CACV,GAAI,QACN,EACA,kBAAmB,CACjB,QAAS,OACT,SAAU,WACV,OAAQ,EACR,UAAW,2DACb,CACF,CACF,CAAC,EASYC,EACXC,EAAM,WAAW,CAAC,CAAE,QAAAC,EAAS,KAAAC,EAAM,KAAAC,EAAO,SAAU,GAAAC,KAAOC,CAAK,EAAGC,IAW/DN,EAAA,cAACL,EAAA,CAAuB,GAAGU,EAAO,GAVnBH,EAEb,CACE,GAAIE,GAAO,IACX,KAAAF,EACA,QAAS,MACX,EACA,CAAE,GAAIE,GAAO,SAAgC,KAAAD,EAAM,QAAAF,CAAQ,EAGF,IAAKK,CAAAA,CAAK,CAExE,EAEHP,EAAgB,YAAc"}

package/dist/components/tile-toggle-group/TileToggleGroupItem.d.ts

@@ -31,6 +31,8 @@ declare const StyledTileToggleGroupItem: import("@atom-learning/stitches-react/t
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -403,6 +405,8 @@ declare const StyledTileToggleGroupItem: import("@atom-learning/stitches-react/t
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -774,6 +778,8 @@ declare const StyledTileToggleGroupItem: import("@atom-learning/stitches-react/t
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/toast/Toast.d.ts

@@ -1,23 +1,9 @@
 import * as React from 'react';
-declare const toastVariants: {
-    readonly loading: {
-        readonly bg: "$info";
-    };
-    readonly blank: {
-        readonly bg: "$info";
-    };
-    readonly success: {
-        readonly bg: "$success";
-    };
-    readonly error: {
-        readonly bg: "$danger";
-    };
-};
 export declare const StyledToast: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"div", {
-    direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | "revert-layer" | undefined;
-    wrap?: "inherit" | "initial" | "revert" | "unset" | "wrap" | "nowrap" | "wrap-reverse" | "revert-layer" | undefined;
-    justify?: "left" | "right" | "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | "flex-end" | "flex-start" | "normal" | "revert-layer" | "unsafe" | "safe" | undefined;
-    align?: "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "end" | "start" | "flex-end" | "flex-start" | "baseline" | "normal" | "self-end" | "self-start" | "revert-layer" | "unsafe" | "safe" | "first baseline" | "last baseline" | undefined;
+    direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "row-reverse" | "column" | "column-reverse" | "revert-layer" | undefined;
+    wrap?: "inherit" | "initial" | "revert" | "unset" | "revert-layer" | "wrap" | "nowrap" | "wrap-reverse" | undefined;
+    justify?: "left" | "right" | "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "revert-layer" | "normal" | "unsafe" | "safe" | "start" | "end" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | undefined;
+    align?: "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "revert-layer" | "normal" | "unsafe" | "safe" | "start" | "end" | "flex-start" | "flex-end" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline" | undefined;
     gap?: number | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | undefined;
 }, {
     sm: string;
@@ -43,6 +29,8 @@ export declare const StyledToast: import("@atom-learning/stitches-react/types/st
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;
@@ -413,6 +401,8 @@ export declare const StyledToast: import("@atom-learning/stitches-react/types/st
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;
@@ -758,12 +748,8 @@ export declare const StyledToast: import("@atom-learning/stitches-react/types/st
         marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
     };
 }>>;
-type ToastProps = Omit<React.ComponentProps<typeof StyledToast>, 'type'> & {
-    type?: keyof typeof toastVariants;
-};
 export declare const Toast: {
-    (props: ToastProps): JSX.Element;
+    (props: React.ComponentProps<typeof StyledToast>): React.JSX.Element;
     Icon: (props: React.ComponentProps<typeof import("..").Icon>) => JSX.Element;
     Close: ({ onDismiss, label, ...rest }: import("./ToastCloseButton").ToastCloseButtonProps) => JSX.Element;
 };
-export {};

package/dist/components/toast/Toast.js

@@ -1,2 +1,2 @@
-import*as s from"react";import{styled as n}from"../../stitches.js";import{Flex as a}from"../flex/Flex.js";import{ToastCloseButton as i}from"./ToastCloseButton.js";import{ToastIcon as m}from"./ToastIcon.js";import{useToastContext as c}from"./ToastProvider.js";const p={loading:{bg:"$info"},blank:{bg:"$info"},success:{bg:"$success"},error:{bg:"$danger"}},e=n(a,{pointerEvents:"auto",borderRadius:"$3",boxShadow:"$1",boxSizing:"border-box",color:"white",minHeight:"$5",position:"relative",px:"$4",py:"$1",transition:"background-color 50ms ease-out","@allowMotion":{transition:"background-color 50ms ease-out, transform 150ms ease-out"},variants:{type:p}}),o=t=>{const{type:r}=c();return s.createElement(e,{align:"center",type:t.type||r,...t})};o.Icon=m,o.Close=i;export{e as StyledToast,o as Toast};
+import*as s from"react";import{styled as n}from"../../stitches.js";import{Flex as a}from"../flex/Flex.js";import{ToastCloseButton as i}from"./ToastCloseButton.js";import{ToastIcon as m}from"./ToastIcon.js";import{useToastContext as c}from"./ToastProvider.js";const e=n(a,{pointerEvents:"auto",borderRadius:"$3",boxShadow:"$1",boxSizing:"border-box",color:"white",minHeight:"$5",position:"relative",px:"$4",py:"$1",transition:"background-color 125ms ease-out","@allowMotion":{transition:"background-color 125ms ease-out, transform 125ms ease-out"},variants:{type:{loading:{bg:"$info"},blank:{bg:"$info"},success:{bg:"$success"},error:{bg:"$danger"}}}}),o=t=>{const{type:r}=c();return s.createElement(e,{align:"center",type:t.type||r,...t})};o.Icon=m,o.Close=i;export{e as StyledToast,o as Toast};
 //# sourceMappingURL=Toast.js.map

package/dist/components/toast/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","sources":["../../../src/components/toast/Toast.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Flex } from '../flex'\nimport { ToastCloseButton } from './ToastCloseButton'\nimport { ToastIcon } from './ToastIcon'\nimport { useToastContext } from './ToastProvider'\n\nconst toastVariants = {\n  loading: { bg: '$info' },\n  blank: { bg: '$info' },\n  success: { bg: '$success' },\n  error: { bg: '$danger' }\n} as const\n\nexport const StyledToast = styled(Flex, {\n  pointerEvents: 'auto',\n  borderRadius: '$3',\n  boxShadow: '$1',\n  boxSizing: 'border-box',\n  color: 'white',\n  minHeight: '$5',\n  position: 'relative',\n  px: '$4',\n  py: '$1',\n  transition: 'background-color 50ms ease-out',\n  '@allowMotion': {\n    transition: 'background-color 50ms ease-out, transform 150ms ease-out'\n  },\n  variants: {\n    type: toastVariants\n  }\n})\n\ntype ToastProps = Omit<React.ComponentProps<typeof StyledToast>, 'type'> & {\n  type?: keyof typeof toastVariants\n}\n\nexport const Toast = (props: ToastProps): JSX.Element => {\n  const { type } = useToastContext()\n  return <StyledToast align=\"center\" type={props.type || type} {...props} />\n}\n\nToast.Icon = ToastIcon\nToast.Close = ToastCloseButton\n"],"names":["toastVariants","StyledToast","styled","Flex","Toast","props","type","useToastContext","React","ToastIcon","ToastCloseButton"],"mappings":"mQASA,MAAMA,EAAgB,CACpB,QAAS,CAAE,GAAI,OAAQ,EACvB,MAAO,CAAE,GAAI,OAAQ,EACrB,QAAS,CAAE,GAAI,UAAW,EAC1B,MAAO,CAAE,GAAI,SAAU,CACzB,EAEaC,EAAcC,EAAOC,EAAM,CACtC,cAAe,OACf,aAAc,KACd,UAAW,KACX,UAAW,aACX,MAAO,QACP,UAAW,KACX,SAAU,WACV,GAAI,KACJ,GAAI,KACJ,WAAY,iCACZ,eAAgB,CACd,WAAY,0DACd,EACA,SAAU,CACR,KAAMH,CACR,CACF,CAAC,EAMYI,EAASC,GAAmC,CACvD,KAAM,CAAE,KAAAC,CAAK,EAAIC,EACjB,EAAA,OAAOC,EAAA,cAACP,EAAY,CAAA,MAAM,SAAS,KAAMI,EAAM,MAAQC,EAAO,GAAGD,CAAAA,CAAO,CAC1E,EAEAD,EAAM,KAAOK,EACbL,EAAM,MAAQM"}
+{"version":3,"file":"Toast.js","sources":["../../../src/components/toast/Toast.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Flex } from '../flex'\nimport { ToastCloseButton } from './ToastCloseButton'\nimport { ToastIcon } from './ToastIcon'\nimport { useToastContext } from './ToastProvider'\n\nexport const StyledToast = styled(Flex, {\n  pointerEvents: 'auto',\n  borderRadius: '$3',\n  boxShadow: '$1',\n  boxSizing: 'border-box',\n  color: 'white',\n  minHeight: '$5',\n  position: 'relative',\n  px: '$4',\n  py: '$1',\n  transition: 'background-color 125ms ease-out',\n  '@allowMotion': {\n    transition: 'background-color 125ms ease-out, transform 125ms ease-out'\n  },\n  variants: {\n    type: {\n      loading: { bg: '$info' },\n      blank: { bg: '$info' },\n      success: { bg: '$success' },\n      error: { bg: '$danger' }\n    }\n  }\n})\n\nexport const Toast = (props: React.ComponentProps<typeof StyledToast>) => {\n  const { type } = useToastContext()\n  return <StyledToast align=\"center\" type={props.type || type} {...props} />\n}\n\nToast.Icon = ToastIcon\nToast.Close = ToastCloseButton\n"],"names":["StyledToast","styled","Flex","Toast","props","type","useToastContext","React","ToastIcon","ToastCloseButton"],"mappings":"mQASa,MAAAA,EAAcC,EAAOC,EAAM,CACtC,cAAe,OACf,aAAc,KACd,UAAW,KACX,UAAW,aACX,MAAO,QACP,UAAW,KACX,SAAU,WACV,GAAI,KACJ,GAAI,KACJ,WAAY,kCACZ,eAAgB,CACd,WAAY,2DACd,EACA,SAAU,CACR,KAAM,CACJ,QAAS,CAAE,GAAI,OAAQ,EACvB,MAAO,CAAE,GAAI,OAAQ,EACrB,QAAS,CAAE,GAAI,UAAW,EAC1B,MAAO,CAAE,GAAI,SAAU,CACzB,CACF,CACF,CAAC,EAEYC,EAASC,GAAoD,CACxE,KAAM,CAAE,KAAAC,CAAK,EAAIC,EAAAA,EACjB,OAAOC,EAAA,cAACP,EAAA,CAAY,MAAM,SAAS,KAAMI,EAAM,MAAQC,EAAO,GAAGD,CAAO,CAAA,CAC1E,EAEAD,EAAM,KAAOK,EACbL,EAAM,MAAQM"}

package/dist/components/toast/ToastProvider.js

@@ -1,2 +1,2 @@
-import{Error as n}from"@atom-learning/icons";import*as e from"react";import{useToaster as h}from"react-hot-toast";import{default as j}from"react-hot-toast";import{styled as s,keyframes as l}from"../../stitches.js";import{MAX_Z_INDEX as g}from"../../constants/zIndices.js";import{Spacer as T}from"../spacer/Spacer.js";import{Text as w}from"../text/Text.js";import{Toast as a}from"./Toast.js";const C="$2",P=400,M=s("div",{position:"fixed",zIndex:g,inset:C,pointerEvents:"none","@sm":{top:"$3"}}),$=l({"0%":{transform:"translateY(-100%)",opacity:0},"100%":{transform:"translateY(0)",opacity:1}}),I=l({"0%":{transform:"translateY(0)",opacity:1},"100%":{transform:"translateY(-100%)",opacity:0}}),z=s("div",{position:"absolute",width:"100%",display:"flex",justifyContent:"center",alignItems:"center",borderRadius:"$0",boxSizing:"border-box",minHeight:"$5",variants:{visible:{true:{"@allowMotion":{animation:`${$} 250ms cubic-bezier(0.22, 1, 0.36, 1)`}},false:{opacity:0,"@allowMotion":{animation:`${I} 250ms cubic-bezier(0.22, 1, 0.36, 1)`}}}}}),m=e.createContext(null),c=({children:o,css:u})=>{const{toasts:d,handlers:p}=h(),{startPause:f,endPause:v,calculateOffset:E,updateHeight:y}=p;return e.createElement(e.Fragment,null,e.createElement(M,{onMouseEnter:f,onMouseLeave:v,css:u},d.map(t=>{const{message:r}=t,b=E(t.id,{reverseOrder:!0,margin:8}),x=i=>{i&&t.height===void 0&&y(t.id,i.getBoundingClientRect().height)};return e.createElement(z,{key:t.id,ref:x,visible:t.visible,role:t.role,"aria-live":t.ariaLive,css:{top:b}},e.createElement(m.Provider,{value:t},typeof r=="function"?r(t):e.isValidElement(r)?r:e.createElement(a,{css:{width:P}},t.type==="error"&&e.createElement(a.Icon,{is:n}),e.createElement(w,null,r),e.createElement(T,null),e.createElement(a.Close,null))))})),o)},Y=()=>{const o=e.useContext(m);if(!o)throw new n("useToastContext must be used within a ToastProvider");return o};c.displayName="ToastProvider";export{c as ToastProvider,j as toast,Y as useToastContext};
+import{Error as i}from"@atom-learning/icons";import*as e from"react";import{useToaster as g}from"react-hot-toast";import{default as S}from"react-hot-toast";import{styled as n,keyframes as l}from"../../stitches.js";import{Spacer as h}from"../spacer/Spacer.js";import{Text as T}from"../text/Text.js";import{Toast as a}from"./Toast.js";const w=n("div",{position:"fixed",zIndex:2147483647,inset:"$2",pointerEvents:"none","@sm":{top:"$3"}}),$=l({"0%":{transform:"translateY(-100%)",opacity:0},"100%":{transform:"translateY(0)",opacity:1}}),C=l({"0%":{transform:"translateY(0)",opacity:1},"100%":{transform:"translateY(-100%)",opacity:0}}),P=n("div",{position:"absolute",width:"100%",display:"flex",justifyContent:"center",alignItems:"center",borderRadius:"$0",boxSizing:"border-box",minHeight:"$5",variants:{visible:{true:{"@allowMotion":{animation:`${$} 250ms cubic-bezier(0.22, 1, 0.36, 1)`}},false:{opacity:0,"@allowMotion":{animation:`${C} 250ms cubic-bezier(0.22, 1, 0.36, 1)`}}}}}),m=e.createContext(null),c=({children:o,css:u})=>{const{toasts:d,handlers:f}=g(),{startPause:p,endPause:v,calculateOffset:x,updateHeight:y}=f;return e.createElement(e.Fragment,null,e.createElement(w,{onMouseEnter:p,onMouseLeave:v,css:u},d.map(t=>{const{message:r}=t,b=x(t.id,{reverseOrder:!0,margin:8}),E=s=>{s&&t.height===void 0&&y(t.id,s.getBoundingClientRect().height)};return e.createElement(P,{key:t.id,ref:E,visible:t.visible,role:t.role,"aria-live":t.ariaLive,style:{"--offset":`${b}px`},css:{top:"var(--offset)"}},e.createElement(m.Provider,{value:t},typeof r=="function"?r(t):e.isValidElement(r)?r:e.createElement(a,{css:{width:"400px"}},t.type==="error"&&e.createElement(a.Icon,{is:i}),e.createElement(T,null,r),e.createElement(h,null),e.createElement(a.Close,null))))})),o)},z=()=>{const o=e.useContext(m);if(!o)throw new i("useToastContext must be used within a ToastProvider");return o};c.displayName="ToastProvider";export{c as ToastProvider,S as toast,z as useToastContext};
 //# sourceMappingURL=ToastProvider.js.map

package/dist/components/toast/ToastProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastProvider.js","sources":["../../../src/components/toast/ToastProvider.tsx"],"sourcesContent":["import { Error } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { useToaster } from 'react-hot-toast'\n\nimport { CSS, keyframes, styled } from '~/stitches'\nexport { default as toast } from 'react-hot-toast'\nimport type { Toast as ToastType } from 'react-hot-toast/dist/core/types'\n\nimport { MAX_Z_INDEX } from '~/constants/zIndices'\n\nimport { Flex } from '../flex'\nimport { Spacer } from '../spacer'\nimport { Text } from '../text'\nimport { Toast } from './Toast'\n\nconst DEFAULT_OFFSET = '$2'\nconst TOAST_WIDTH = 400\n\nconst ToastProviderBase = styled('div', {\n  position: 'fixed',\n  zIndex: MAX_Z_INDEX,\n  inset: DEFAULT_OFFSET,\n  pointerEvents: 'none',\n  '@sm': {\n    top: '$3'\n  }\n})\n\nconst slideIn = keyframes({\n  '0%': { transform: 'translateY(-100%)', opacity: 0 },\n  '100%': { transform: `translateY(0)`, opacity: 1 }\n})\n\nconst slideOut = keyframes({\n  '0%': { transform: `translateY(0)`, opacity: 1 },\n  '100%': { transform: `translateY(-100%)`, opacity: 0 }\n})\n\nconst ToastWrapper = styled('div', {\n  position: 'absolute',\n  width: '100%',\n  display: 'flex',\n  justifyContent: 'center',\n  alignItems: 'center',\n  borderRadius: '$0',\n  boxSizing: 'border-box',\n  minHeight: '$5',\n  variants: {\n    visible: {\n      true: {\n        '@allowMotion': {\n          animation: `${slideIn} 250ms cubic-bezier(0.22, 1, 0.36, 1)`\n        }\n      },\n      false: {\n        opacity: 0,\n        '@allowMotion': {\n          animation: `${slideOut} 250ms cubic-bezier(0.22, 1, 0.36, 1)`\n        }\n      }\n    }\n  }\n})\n\nconst ToastContext = React.createContext<Pick<\n  ToastType,\n  'type' | 'id' | 'message'\n> | null>(null)\n\nexport const ToastProvider = ({\n  children,\n  css\n}: React.PropsWithChildren<{ css?: CSS }>) => {\n  const { toasts, handlers } = useToaster()\n  const { startPause, endPause, calculateOffset, updateHeight } = handlers\n\n  return (\n    <>\n      <ToastProviderBase\n        onMouseEnter={startPause}\n        onMouseLeave={endPause}\n        css={css}\n      >\n        {toasts.map((toast) => {\n          const { message: children } = toast\n\n          const offset = calculateOffset(toast.id, {\n            reverseOrder: true,\n            margin: 8\n          })\n\n          const ref = (el: HTMLDivElement | null) => {\n            if (el && toast.height === undefined) {\n              updateHeight(toast.id, el.getBoundingClientRect().height)\n            }\n          }\n\n          return (\n            <ToastWrapper\n              key={toast.id}\n              ref={ref}\n              visible={toast.visible}\n              role={toast.role}\n              aria-live={toast.ariaLive}\n              css={{ top: offset }}\n            >\n              <ToastContext.Provider value={toast}>\n                {typeof children === 'function' ? (\n                  children(toast)\n                ) : React.isValidElement(children) ? (\n                  children\n                ) : (\n                  <Toast css={{ width: TOAST_WIDTH }}>\n                    {toast.type === 'error' && <Toast.Icon is={Error} />}\n                    <Text>{children}</Text>\n                    <Spacer />\n                    <Toast.Close />\n                  </Toast>\n                )}\n              </ToastContext.Provider>\n            </ToastWrapper>\n          )\n        })}\n      </ToastProviderBase>\n      {children}\n    </>\n  )\n}\n\nexport const useToastContext = () => {\n  const context = React.useContext(ToastContext)\n\n  if (!context) {\n    throw new Error('useToastContext must be used within a ToastProvider')\n  }\n\n  return context\n}\n\nToastProvider.displayName = 'ToastProvider'\n"],"names":["DEFAULT_OFFSET","TOAST_WIDTH","ToastProviderBase","styled","MAX_Z_INDEX","slideIn","keyframes","slideOut","ToastWrapper","ToastContext","React","ToastProvider","children","css","toasts","handlers","useToaster","startPause","endPause","calculateOffset","updateHeight","toast","offset","ref","el","Toast","Error","Text","Spacer","useToastContext","context"],"mappings":"uYAeA,MAAMA,EAAiB,KACjBC,EAAc,IAEdC,EAAoBC,EAAO,MAAO,CACtC,SAAU,QACV,OAAQC,EACR,MAAOJ,EACP,cAAe,OACf,MAAO,CACL,IAAK,IACP,CACF,CAAC,EAEKK,EAAUC,EAAU,CACxB,KAAM,CAAE,UAAW,oBAAqB,QAAS,CAAE,EACnD,OAAQ,CAAE,UAAW,gBAAiB,QAAS,CAAE,CACnD,CAAC,EAEKC,EAAWD,EAAU,CACzB,KAAM,CAAE,UAAW,gBAAiB,QAAS,CAAE,EAC/C,OAAQ,CAAE,UAAW,oBAAqB,QAAS,CAAE,CACvD,CAAC,EAEKE,EAAeL,EAAO,MAAO,CACjC,SAAU,WACV,MAAO,OACP,QAAS,OACT,eAAgB,SAChB,WAAY,SACZ,aAAc,KACd,UAAW,aACX,UAAW,KACX,SAAU,CACR,QAAS,CACP,KAAM,CACJ,eAAgB,CACd,UAAW,GAAGE,wCAChB,CACF,EACA,MAAO,CACL,QAAS,EACT,eAAgB,CACd,UAAW,GAAGE,wCAChB,CACF,CACF,CACF,CACF,CAAC,EAEKE,EAAeC,EAAM,cAGjB,IAAI,EAEDC,EAAgB,CAAC,CAC5B,SAAAC,EACA,IAAAC,CACF,IAA8C,CAC5C,KAAM,CAAE,OAAAC,EAAQ,SAAAC,CAAS,EAAIC,EAAAA,EACvB,CAAE,WAAAC,EAAY,SAAAC,EAAU,gBAAAC,EAAiB,aAAAC,CAAa,EAAIL,EAEhE,OACEL,EAAA,cAAAA,EAAA,SACEA,KAAAA,EAAA,cAACR,EAAA,CACC,aAAce,EACd,aAAcC,EACd,IAAKL,GAEJC,EAAO,IAAKO,GAAU,CACrB,KAAM,CAAE,QAAST,CAAS,EAAIS,EAExBC,EAASH,EAAgBE,EAAM,GAAI,CACvC,aAAc,GACd,OAAQ,CACV,CAAC,EAEKE,EAAOC,GAA8B,CACrCA,GAAMH,EAAM,SAAW,QACzBD,EAAaC,EAAM,GAAIG,EAAG,sBAAsB,EAAE,MAAM,CAE5D,EAEA,OACEd,EAAA,cAACF,EAAA,CACC,IAAKa,EAAM,GACX,IAAKE,EACL,QAASF,EAAM,QACf,KAAMA,EAAM,KACZ,YAAWA,EAAM,SACjB,IAAK,CAAE,IAAKC,CAAO,CAEnBZ,EAAAA,EAAA,cAACD,EAAa,SAAb,CAAsB,MAAOY,CAC3B,EAAA,OAAOT,GAAa,WACnBA,EAASS,CAAK,EACZX,EAAM,eAAeE,CAAQ,EAC/BA,EAEAF,EAAA,cAACe,EAAA,CAAM,IAAK,CAAE,MAAOxB,CAAY,CAAA,EAC9BoB,EAAM,OAAS,SAAWX,EAAA,cAACe,EAAM,KAAN,CAAW,GAAIC,CAAO,CAAA,EAClDhB,EAAA,cAACiB,EAAA,KAAMf,CAAS,EAChBF,EAAA,cAACkB,EAAA,IAAO,EACRlB,EAAA,cAACe,EAAM,MAAN,IAAY,CACf,CAEJ,CACF,CAEJ,CAAC,CACH,EACCb,CACH,CAEJ,EAEaiB,EAAkB,IAAM,CACnC,MAAMC,EAAUpB,EAAM,WAAWD,CAAY,EAE7C,GAAI,CAACqB,EACH,MAAM,IAAIJ,EAAM,qDAAqD,EAGvE,OAAOI,CACT,EAEAnB,EAAc,YAAc"}
+{"version":3,"file":"ToastProvider.js","sources":["../../../src/components/toast/ToastProvider.tsx"],"sourcesContent":["import { Error } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { useToaster } from 'react-hot-toast'\n\nimport { CSS, keyframes, styled } from '~/stitches'\nexport { default as toast } from 'react-hot-toast'\nimport type { Toast as ToastType } from 'react-hot-toast/dist/core/types'\n\nimport { Spacer } from '../spacer'\nimport { Text } from '../text'\nimport { Toast } from './Toast'\n\nconst ToastProviderBase = styled('div', {\n  position: 'fixed',\n  zIndex: 2147483647,\n  inset: '$2',\n  pointerEvents: 'none',\n  '@sm': {\n    top: '$3'\n  }\n})\n\nconst slideIn = keyframes({\n  '0%': { transform: 'translateY(-100%)', opacity: 0 },\n  '100%': { transform: `translateY(0)`, opacity: 1 }\n})\n\nconst slideOut = keyframes({\n  '0%': { transform: `translateY(0)`, opacity: 1 },\n  '100%': { transform: `translateY(-100%)`, opacity: 0 }\n})\n\nconst ToastWrapper = styled('div', {\n  position: 'absolute',\n  width: '100%',\n  display: 'flex',\n  justifyContent: 'center',\n  alignItems: 'center',\n  borderRadius: '$0',\n  boxSizing: 'border-box',\n  minHeight: '$5',\n  variants: {\n    visible: {\n      true: {\n        '@allowMotion': {\n          animation: `${slideIn} 250ms cubic-bezier(0.22, 1, 0.36, 1)`\n        }\n      },\n      false: {\n        opacity: 0,\n        '@allowMotion': {\n          animation: `${slideOut} 250ms cubic-bezier(0.22, 1, 0.36, 1)`\n        }\n      }\n    }\n  }\n})\n\nconst ToastContext = React.createContext<Pick<\n  ToastType,\n  'type' | 'id' | 'message'\n> | null>(null)\n\nexport const ToastProvider = ({\n  children,\n  css\n}: React.PropsWithChildren<{ css?: CSS }>) => {\n  const { toasts, handlers } = useToaster()\n  const { startPause, endPause, calculateOffset, updateHeight } = handlers\n\n  return (\n    <>\n      <ToastProviderBase\n        onMouseEnter={startPause}\n        onMouseLeave={endPause}\n        css={css}\n      >\n        {toasts.map((toast) => {\n          const { message: children } = toast\n\n          const offset = calculateOffset(toast.id, {\n            reverseOrder: true,\n            margin: 8\n          })\n\n          const ref = (el: HTMLDivElement | null) => {\n            if (el && toast.height === undefined) {\n              updateHeight(toast.id, el.getBoundingClientRect().height)\n            }\n          }\n\n          return (\n            <ToastWrapper\n              key={toast.id}\n              ref={ref}\n              visible={toast.visible}\n              role={toast.role}\n              aria-live={toast.ariaLive}\n              style={{ '--offset': `${offset}px` }}\n              css={{ top: 'var(--offset)' }}\n            >\n              <ToastContext.Provider value={toast}>\n                {typeof children === 'function' ? (\n                  children(toast)\n                ) : React.isValidElement(children) ? (\n                  children\n                ) : (\n                  <Toast css={{ width: '400px' }}>\n                    {toast.type === 'error' && <Toast.Icon is={Error} />}\n                    <Text>{children}</Text>\n                    <Spacer />\n                    <Toast.Close />\n                  </Toast>\n                )}\n              </ToastContext.Provider>\n            </ToastWrapper>\n          )\n        })}\n      </ToastProviderBase>\n      {children}\n    </>\n  )\n}\n\nexport const useToastContext = () => {\n  const context = React.useContext(ToastContext)\n\n  if (!context) {\n    throw new Error('useToastContext must be used within a ToastProvider')\n  }\n\n  return context\n}\n\nToastProvider.displayName = 'ToastProvider'\n"],"names":["ToastProviderBase","styled","slideIn","keyframes","slideOut","ToastWrapper","ToastContext","React","ToastProvider","children","css","toasts","handlers","useToaster","startPause","endPause","calculateOffset","updateHeight","toast","offset","ref","el","Toast","Error","Text","Spacer","useToastContext","context"],"mappings":"6UAYA,MAAMA,EAAoBC,EAAO,MAAO,CACtC,SAAU,QACV,OAAQ,WACR,MAAO,KACP,cAAe,OACf,MAAO,CACL,IAAK,IACP,CACF,CAAC,EAEKC,EAAUC,EAAU,CACxB,KAAM,CAAE,UAAW,oBAAqB,QAAS,CAAE,EACnD,OAAQ,CAAE,UAAW,gBAAiB,QAAS,CAAE,CACnD,CAAC,EAEKC,EAAWD,EAAU,CACzB,KAAM,CAAE,UAAW,gBAAiB,QAAS,CAAE,EAC/C,OAAQ,CAAE,UAAW,oBAAqB,QAAS,CAAE,CACvD,CAAC,EAEKE,EAAeJ,EAAO,MAAO,CACjC,SAAU,WACV,MAAO,OACP,QAAS,OACT,eAAgB,SAChB,WAAY,SACZ,aAAc,KACd,UAAW,aACX,UAAW,KACX,SAAU,CACR,QAAS,CACP,KAAM,CACJ,eAAgB,CACd,UAAW,GAAGC,wCAChB,CACF,EACA,MAAO,CACL,QAAS,EACT,eAAgB,CACd,UAAW,GAAGE,wCAChB,CACF,CACF,CACF,CACF,CAAC,EAEKE,EAAeC,EAAM,cAGjB,IAAI,EAEDC,EAAgB,CAAC,CAC5B,SAAAC,EACA,IAAAC,CACF,IAA8C,CAC5C,KAAM,CAAE,OAAAC,EAAQ,SAAAC,CAAS,EAAIC,EAAW,EAClC,CAAE,WAAAC,EAAY,SAAAC,EAAU,gBAAAC,EAAiB,aAAAC,CAAa,EAAIL,EAEhE,OACEL,EAAA,cAAAA,EAAA,SAAA,KACEA,EAAA,cAACP,EAAA,CACC,aAAcc,EACd,aAAcC,EACd,IAAKL,CAEJC,EAAAA,EAAO,IAAKO,GAAU,CACrB,KAAM,CAAE,QAAST,CAAS,EAAIS,EAExBC,EAASH,EAAgBE,EAAM,GAAI,CACvC,aAAc,GACd,OAAQ,CACV,CAAC,EAEKE,EAAOC,GAA8B,CACrCA,GAAMH,EAAM,SAAW,QACzBD,EAAaC,EAAM,GAAIG,EAAG,sBAAwB,EAAA,MAAM,CAE5D,EAEA,OACEd,EAAA,cAACF,EAAA,CACC,IAAKa,EAAM,GACX,IAAKE,EACL,QAASF,EAAM,QACf,KAAMA,EAAM,KACZ,YAAWA,EAAM,SACjB,MAAO,CAAE,WAAY,GAAGC,KAAW,EACnC,IAAK,CAAE,IAAK,eAAgB,CAE5BZ,EAAAA,EAAA,cAACD,EAAa,SAAb,CAAsB,MAAOY,CAC3B,EAAA,OAAOT,GAAa,WACnBA,EAASS,CAAK,EACZX,EAAM,eAAeE,CAAQ,EAC/BA,EAEAF,EAAA,cAACe,EAAA,CAAM,IAAK,CAAE,MAAO,OAAQ,CAAA,EAC1BJ,EAAM,OAAS,SAAWX,EAAA,cAACe,EAAM,KAAN,CAAW,GAAIC,CAAO,CAAA,EAClDhB,EAAA,cAACiB,EAAA,KAAMf,CAAS,EAChBF,EAAA,cAACkB,EAAA,IAAO,EACRlB,EAAA,cAACe,EAAM,MAAN,IAAY,CACf,CAEJ,CACF,CAEJ,CAAC,CACH,EACCb,CACH,CAEJ,EAEaiB,EAAkB,IAAM,CACnC,MAAMC,EAAUpB,EAAM,WAAWD,CAAY,EAE7C,GAAI,CAACqB,EACH,MAAM,IAAIJ,EAAM,qDAAqD,EAGvE,OAAOI,CACT,EAEAnB,EAAc,YAAc"}

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

@@ -25,6 +25,8 @@ export declare const StyledButton: import("@atom-learning/stitches-react/types/s
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;
@@ -397,6 +399,8 @@ export declare const StyledButton: import("@atom-learning/stitches-react/types/s
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroupButton.js","sources":["../../../src/components/toggle-group/ToggleGroupButton.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Icon } from '../icon'\nimport { StyledItem } from './ToggleGroupItem'\n\nconst minHeight = {\n  sm: '32px',\n  md: '40px',\n  lg: '48px'\n}\n\nconst px = {\n  sm: '$4',\n  md: '$5',\n  lg: '$5'\n}\n\nconst spacingBetweenElements = {\n  sm: '$2',\n  md: '$3',\n  lg: '$3'\n}\n\nconst getSizeVariant = (size: string) => ({\n  fontSize: `$${size}`,\n  px: px[size],\n  minHeight: minHeight[size],\n  '& > *:not(:last-child)': {\n    mr: spacingBetweenElements[size]\n  }\n})\n\nexport const StyledButton = styled(StyledItem, {\n  flexGrow: 1,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  fontWeight: 600,\n  lineHeight: 1,\n  py: '$1',\n  variants: {\n    size: {\n      sm: getSizeVariant('sm'),\n      md: getSizeVariant('md'),\n      lg: getSizeVariant('lg')\n    },\n    isIconOnly: {\n      true: {}\n    },\n    theme: {\n      standard: {},\n      modern: {}\n    }\n  },\n  compoundVariants: [\n    {\n      isIconOnly: true,\n      size: 'sm',\n      css: {\n        minWidth: minHeight.sm,\n        p: 0\n      }\n    },\n    {\n      isIconOnly: true,\n      size: 'md',\n      css: {\n        minWidth: minHeight.md,\n        p: 0\n      }\n    },\n    {\n      isIconOnly: true,\n      size: 'lg',\n      css: {\n        minWidth: minHeight.lg,\n        p: 0\n      }\n    },\n    {\n      isIconOnly: true,\n      size: 'sm',\n      theme: 'modern',\n      css: {\n        minWidth: minHeight.md,\n        p: 0\n      }\n    },\n    {\n      isIconOnly: true,\n      size: 'md',\n      theme: 'modern',\n      css: {\n        minWidth: minHeight.lg,\n        p: 0\n      }\n    },\n    {\n      isIconOnly: true,\n      size: 'lg',\n      theme: 'modern',\n      css: {\n        minWidth: '60px',\n        p: 0\n      }\n    }\n  ]\n})\n\nexport const ToggleGroupButton: React.ForwardRefExoticComponent<\n  React.ComponentProps<typeof StyledButton>\n> = React.forwardRef(\n  ({ size = 'md', theme = 'standard', children, ...rest }, ref) => {\n    const childrenArray = React.Children.toArray(children)\n    const isSingleChild = childrenArray.length <= 1\n    const isIconOnly =\n      isSingleChild &&\n      React.isValidElement(childrenArray[0]) &&\n      childrenArray[0]?.type === Icon\n\n    return (\n      <StyledButton\n        ref={ref}\n        size={size}\n        isIconOnly={isIconOnly}\n        theme={theme}\n        {...rest}\n      >\n        {\n          childrenArray.map((child) => {\n            if (\n              !isSingleChild &&\n              (typeof child === 'string' || typeof child === 'number')\n            )\n              return <span key={child}>{child}</span>\n            if (React.isValidElement(child)) {\n              if (child?.type === Icon)\n                return React.cloneElement(child, { ...child.props, size })\n            }\n            return child\n          }) as React.ReactElement[]\n        }\n      </StyledButton>\n    )\n  }\n)\n"],"names":["minHeight","px","spacingBetweenElements","getSizeVariant","size","StyledButton","styled","StyledItem","ToggleGroupButton","React","theme","children","rest","ref","_a","childrenArray","isSingleChild","isIconOnly","Icon","child"],"mappings":"4JAOA,MAAMA,EAAY,CAChB,GAAI,OACJ,GAAI,OACJ,GAAI,MACN,EAEMC,EAAK,CACT,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEMC,EAAyB,CAC7B,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEMC,EAAkBC,IAAkB,CACxC,SAAU,IAAIA,IACd,GAAIH,EAAGG,GACP,UAAWJ,EAAUI,GACrB,yBAA0B,CACxB,GAAIF,EAAuBE,EAC7B,CACF,GAEaC,EAAeC,EAAOC,EAAY,CAC7C,SAAU,EACV,QAAS,OACT,WAAY,SACZ,eAAgB,SAChB,WAAY,IACZ,WAAY,EACZ,GAAI,KACJ,SAAU,CACR,KAAM,CACJ,GAAIJ,EAAe,IAAI,EACvB,GAAIA,EAAe,IAAI,EACvB,GAAIA,EAAe,IAAI,CACzB,EACA,WAAY,CACV,KAAM,CACR,CAAA,EACA,MAAO,CACL,SAAU,CAAA,EACV,OAAQ,CAAA,CACV,CACF,EACA,iBAAkB,CAChB,CACE,WAAY,GACZ,KAAM,KACN,IAAK,CACH,SAAUH,EAAU,GACpB,EAAG,CACL,CACF,EACA,CACE,WAAY,GACZ,KAAM,KACN,IAAK,CACH,SAAUA,EAAU,GACpB,EAAG,CACL,CACF,EACA,CACE,WAAY,GACZ,KAAM,KACN,IAAK,CACH,SAAUA,EAAU,GACpB,EAAG,CACL,CACF,EACA,CACE,WAAY,GACZ,KAAM,KACN,MAAO,SACP,IAAK,CACH,SAAUA,EAAU,GACpB,EAAG,CACL,CACF,EACA,CACE,WAAY,GACZ,KAAM,KACN,MAAO,SACP,IAAK,CACH,SAAUA,EAAU,GACpB,EAAG,CACL,CACF,EACA,CACE,WAAY,GACZ,KAAM,KACN,MAAO,SACP,IAAK,CACH,SAAU,OACV,EAAG,CACL,CACF,CACF,CACF,CAAC,EAEYQ,EAETC,EAAM,WACR,CAAC,CAAE,KAAAL,EAAO,KAAM,MAAAM,EAAQ,WAAY,SAAAC,KAAaC,CAAK,EAAGC,IAAQ,CAlHnE,IAAAC,EAmHI,MAAMC,EAAgBN,EAAM,SAAS,QAAQE,CAAQ,EAC/CK,EAAgBD,EAAc,QAAU,EACxCE,EACJD,GACAP,EAAM,eAAeM,EAAc,EAAE,KACrCD,EAAAC,EAAc,KAAd,KAAAD,OAAAA,EAAkB,QAASI,EAE7B,OACET,EAAA,cAACJ,EACC,CAAA,IAAKQ,EACL,KAAMT,EACN,WAAYa,EACZ,MAAOP,EACN,GAAGE,CAGFG,EAAAA,EAAc,IAAKI,GAEf,CAACH,IACA,OAAOG,GAAU,UAAY,OAAOA,GAAU,UAExCV,EAAA,cAAC,OAAK,CAAA,IAAKU,GAAQA,CAAM,EAC9BV,EAAM,eAAeU,CAAK,IACxBA,GAAA,KAAAA,OAAAA,EAAO,QAASD,EACXT,EAAM,aAAaU,EAAO,CAAE,GAAGA,EAAM,MAAO,KAAAf,CAAK,CAAC,EAEtDe,CACR,CAEL,CAEJ,CACF"}
+{"version":3,"file":"ToggleGroupButton.js","sources":["../../../src/components/toggle-group/ToggleGroupButton.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Icon } from '../icon'\nimport { StyledItem } from './ToggleGroupItem'\n\nexport const StyledButton = styled(StyledItem, {\n  flexGrow: 1,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  fontWeight: 600,\n  lineHeight: 1,\n  py: '$1',\n  variants: {\n    size: {\n      sm: {\n        fontSize: `$sm`,\n        px: '$4',\n        minHeight: '32px',\n        '& > *:not(:last-child)': {\n          mr: '$2'\n        }\n      },\n      md: {\n        fontSize: `$md`,\n        px: '$5',\n        minHeight: '40px',\n        '& > *:not(:last-child)': {\n          mr: '$3'\n        }\n      },\n      lg: {\n        fontSize: `$lg`,\n        px: '$5',\n        minHeight: '48px',\n        '& > *:not(:last-child)': {\n          mr: '$3'\n        }\n      }\n    },\n    isIconOnly: {\n      true: {}\n    },\n    theme: {\n      standard: {},\n      modern: {}\n    }\n  },\n  compoundVariants: [\n    {\n      isIconOnly: true,\n      size: 'sm',\n      css: {\n        minWidth: '32px',\n        p: 0\n      }\n    },\n    {\n      isIconOnly: true,\n      size: 'md',\n      css: {\n        minWidth: '40px',\n        p: 0\n      }\n    },\n    {\n      isIconOnly: true,\n      size: 'lg',\n      css: {\n        minWidth: '48px',\n        p: 0\n      }\n    },\n    {\n      isIconOnly: true,\n      size: 'sm',\n      theme: 'modern',\n      css: {\n        minWidth: '40px',\n        p: 0\n      }\n    },\n    {\n      isIconOnly: true,\n      size: 'md',\n      theme: 'modern',\n      css: {\n        minWidth: '48px',\n        p: 0\n      }\n    },\n    {\n      isIconOnly: true,\n      size: 'lg',\n      theme: 'modern',\n      css: {\n        minWidth: '60px',\n        p: 0\n      }\n    }\n  ]\n})\n\nexport const ToggleGroupButton: React.ForwardRefExoticComponent<\n  React.ComponentProps<typeof StyledButton>\n> = React.forwardRef(\n  ({ size = 'md', theme = 'standard', children, ...rest }, ref) => {\n    const childrenArray = React.Children.toArray(children)\n    const isSingleChild = childrenArray.length <= 1\n    const isIconOnly =\n      isSingleChild &&\n      React.isValidElement(childrenArray[0]) &&\n      childrenArray[0]?.type === Icon\n\n    return (\n      <StyledButton\n        ref={ref}\n        size={size}\n        isIconOnly={isIconOnly}\n        theme={theme}\n        {...rest}\n      >\n        {\n          childrenArray.map((child) => {\n            if (\n              !isSingleChild &&\n              (typeof child === 'string' || typeof child === 'number')\n            )\n              return <span key={child}>{child}</span>\n            if (React.isValidElement(child)) {\n              if (child?.type === Icon)\n                return React.cloneElement(child, { ...child.props, size })\n            }\n            return child\n          }) as React.ReactElement[]\n        }\n      </StyledButton>\n    )\n  }\n)\n"],"names":["StyledButton","styled","StyledItem","ToggleGroupButton","React","size","theme","children","rest","ref","_a","childrenArray","isSingleChild","isIconOnly","Icon","child"],"mappings":"4JAOa,MAAAA,EAAeC,EAAOC,EAAY,CAC7C,SAAU,EACV,QAAS,OACT,WAAY,SACZ,eAAgB,SAChB,WAAY,IACZ,WAAY,EACZ,GAAI,KACJ,SAAU,CACR,KAAM,CACJ,GAAI,CACF,SAAU,MACV,GAAI,KACJ,UAAW,OACX,yBAA0B,CACxB,GAAI,IACN,CACF,EACA,GAAI,CACF,SAAU,MACV,GAAI,KACJ,UAAW,OACX,yBAA0B,CACxB,GAAI,IACN,CACF,EACA,GAAI,CACF,SAAU,MACV,GAAI,KACJ,UAAW,OACX,yBAA0B,CACxB,GAAI,IACN,CACF,CACF,EACA,WAAY,CACV,KAAM,CAAA,CACR,EACA,MAAO,CACL,SAAU,CACV,EAAA,OAAQ,CACV,CAAA,CACF,EACA,iBAAkB,CAChB,CACE,WAAY,GACZ,KAAM,KACN,IAAK,CACH,SAAU,OACV,EAAG,CACL,CACF,EACA,CACE,WAAY,GACZ,KAAM,KACN,IAAK,CACH,SAAU,OACV,EAAG,CACL,CACF,EACA,CACE,WAAY,GACZ,KAAM,KACN,IAAK,CACH,SAAU,OACV,EAAG,CACL,CACF,EACA,CACE,WAAY,GACZ,KAAM,KACN,MAAO,SACP,IAAK,CACH,SAAU,OACV,EAAG,CACL,CACF,EACA,CACE,WAAY,GACZ,KAAM,KACN,MAAO,SACP,IAAK,CACH,SAAU,OACV,EAAG,CACL,CACF,EACA,CACE,WAAY,GACZ,KAAM,KACN,MAAO,SACP,IAAK,CACH,SAAU,OACV,EAAG,CACL,CACF,CACF,CACF,CAAC,EAEYC,EAETC,EAAM,WACR,CAAC,CAAE,KAAAC,EAAO,KAAM,MAAAC,EAAQ,WAAY,SAAAC,KAAaC,CAAK,EAAGC,IAAQ,CA5GnE,IAAAC,EA6GI,MAAMC,EAAgBP,EAAM,SAAS,QAAQG,CAAQ,EAC/CK,EAAgBD,EAAc,QAAU,EACxCE,EACJD,GACAR,EAAM,eAAeO,EAAc,EAAE,KACrCD,EAAAC,EAAc,KAAd,KAAAD,OAAAA,EAAkB,QAASI,EAE7B,OACEV,EAAA,cAACJ,EACC,CAAA,IAAKS,EACL,KAAMJ,EACN,WAAYQ,EACZ,MAAOP,EACN,GAAGE,CAAAA,EAGFG,EAAc,IAAKI,GAEf,CAACH,IACA,OAAOG,GAAU,UAAY,OAAOA,GAAU,UAExCX,EAAA,cAAC,QAAK,IAAKW,CAAAA,EAAQA,CAAM,EAC9BX,EAAM,eAAeW,CAAK,IACxBA,GAAA,KAAAA,OAAAA,EAAO,QAASD,EACXV,EAAM,aAAaW,EAAO,CAAE,GAAGA,EAAM,MAAO,KAAAV,CAAK,CAAC,EAEtDU,CACR,CAEL,CAEJ,CACF"}

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

@@ -25,6 +25,8 @@ export declare const StyledItem: import("@atom-learning/stitches-react/types/sty
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;
@@ -396,6 +398,8 @@ export declare const ToggleGroupItem: import("@atom-learning/stitches-react/type
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

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

@@ -1,2 +1,2 @@
-import*as t from"@radix-ui/react-toggle-group";import{styled as e}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as o}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";const r=e(t.Item,{cursor:"pointer","&[disabled]":{opacity:.3,cursor:"not-allowed"},variants:{theme:{standard:{bg:"white",color:"$grey800",border:"1px solid $grey600","&::before":{background:"$grey600"},"&:not([disabled])":{'&:hover, &:focus-visible, &[data-state="on"]':{"&::before":{background:"none"}},"&:hover":{borderColor:"currentColor !important",color:"$primary900"},"&:focus-visible":{...o(),'&[data-state="off"]':{borderColor:"$grey600 !important"},'&[data-state="on"]':{boxShadow:`inset currentColor 0px 0px 0px 1px, ${o().boxShadow}`}}},'&[data-state="on"]':{color:"$primary800",borderColor:"currentColor !important",boxShadow:"inset currentColor 0px 0px 0px 1px"}},modern:{bg:"$grey200",borderRadius:"$1",overflow:"hidden",border:"0","&:not([disabled])":{"&:hover":{color:"$primary900"},"&:focus-visible":{...o(),'&[data-state="off"]':{borderColor:"$grey600 !important"},'&[data-state="on"]':{boxShadow:`inset currentColor 0px 0px 0px 1px ${o().boxShadow}`}}},'&[data-state="on"]':{color:"$grey800",border:"1px solid $grey200 !important",bg:"white",boxShadow:"none !important"}}}}}),a=r;export{r as StyledItem,a as ToggleGroupItem};
+import*as r from"@radix-ui/react-toggle-group";import{styled as e}from"../../stitches.js";const o=e(r.Item,{cursor:"pointer","&[disabled]":{opacity:.3,cursor:"not-allowed"},variants:{theme:{standard:{bg:"white",color:"$grey800",border:"1px solid $grey600","&::before":{background:"$grey600"},"&:not([disabled])":{'&:hover, &:focus-visible, &[data-state="on"]':{"&::before":{background:"none"}},"&:hover":{borderColor:"currentColor !important",color:"$primary900"},"&:focus-visible":{outline:"none",position:"relative",zIndex:1,boxShadow:"white 0px 0px 0px 2px, $colors$primary800 0px 0px 0px 4px",'&[data-state="off"]':{borderColor:"$grey600 !important"},'&[data-state="on"]':{boxShadow:"inset currentColor 0px 0px 0px 1px, white 0px 0px 0px 2px, $colors$primary800 0px 0px 0px 4px"}}},'&[data-state="on"]':{color:"$primary800",borderColor:"currentColor !important",boxShadow:"inset currentColor 0px 0px 0px 1px"}},modern:{bg:"$grey200",borderRadius:"$1",overflow:"hidden",border:"0","&:not([disabled])":{"&:hover":{color:"$primary900"},"&:focus-visible":{outline:"none",position:"relative",zIndex:1,boxShadow:"white 0px 0px 0px 2px, $colors$primary800 0px 0px 0px 4px",'&[data-state="off"]':{borderColor:"$grey600 !important"},'&[data-state="on"]':{boxShadow:"inset currentColor 0px 0px 0px 1px white 0px 0px 0px 2px, $colors$primary800 0px 0px 0px 4px"}}},'&[data-state="on"]':{color:"$grey800",border:"1px solid $grey200 !important",bg:"white",boxShadow:"none !important"}}}}}),t=o;export{o as StyledItem,t as ToggleGroupItem};
 //# sourceMappingURL=ToggleGroupItem.js.map

package/dist/components/toggle-group/ToggleGroupItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroupItem.js","sources":["../../../src/components/toggle-group/ToggleGroupItem.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\n\nimport { styled } from '~/stitches'\nimport { focusVisibleStyleBlock } from '~/utilities'\n\nexport const StyledItem = styled(ToggleGroup.Item, {\n  cursor: 'pointer',\n  '&[disabled]': {\n    opacity: 0.3,\n    cursor: 'not-allowed'\n  },\n  variants: {\n    theme: {\n      standard: {\n        bg: 'white',\n        color: '$grey800',\n        border: '1px solid $grey600',\n        '&::before': {\n          background: '$grey600'\n        },\n        '&:not([disabled])': {\n          '&:hover, &:focus-visible, &[data-state=\"on\"]': {\n            '&::before': {\n              background: 'none'\n            }\n          },\n          '&:hover': {\n            borderColor: 'currentColor !important',\n            color: '$primary900'\n          },\n          '&:focus-visible': {\n            ...focusVisibleStyleBlock(),\n            '&[data-state=\"off\"]': {\n              borderColor: '$grey600 !important'\n            },\n            '&[data-state=\"on\"]': {\n              boxShadow: `inset currentColor 0px 0px 0px 1px, ${\n                focusVisibleStyleBlock().boxShadow\n              }`\n            }\n          }\n        },\n        '&[data-state=\"on\"]': {\n          color: '$primary800',\n          borderColor: 'currentColor !important',\n          boxShadow: 'inset currentColor 0px 0px 0px 1px'\n        }\n      },\n      modern: {\n        bg: '$grey200',\n        borderRadius: '$1',\n        overflow: 'hidden',\n        border: '0',\n        '&:not([disabled])': {\n          '&:hover': {\n            color: '$primary900'\n          },\n          '&:focus-visible': {\n            ...focusVisibleStyleBlock(),\n            '&[data-state=\"off\"]': {\n              borderColor: '$grey600 !important'\n            },\n            '&[data-state=\"on\"]': {\n              boxShadow: `inset currentColor 0px 0px 0px 1px ${\n                focusVisibleStyleBlock().boxShadow\n              }`\n            }\n          }\n        },\n        '&[data-state=\"on\"]': {\n          color: '$grey800',\n          border: '1px solid $grey200 !important',\n          bg: 'white',\n          boxShadow: 'none !important'\n        }\n      }\n    }\n  }\n})\n\nexport const ToggleGroupItem = StyledItem\n"],"names":["StyledItem","styled","ToggleGroup","focusVisibleStyleBlock","ToggleGroupItem"],"mappings":"8WAKO,MAAMA,EAAaC,EAAOC,EAAY,KAAM,CACjD,OAAQ,UACR,cAAe,CACb,QAAS,GACT,OAAQ,aACV,EACA,SAAU,CACR,MAAO,CACL,SAAU,CACR,GAAI,QACJ,MAAO,WACP,OAAQ,qBACR,YAAa,CACX,WAAY,UACd,EACA,oBAAqB,CACnB,+CAAgD,CAC9C,YAAa,CACX,WAAY,MACd,CACF,EACA,UAAW,CACT,YAAa,0BACb,MAAO,aACT,EACA,kBAAmB,CACjB,GAAGC,EAAAA,EACH,sBAAuB,CACrB,YAAa,qBACf,EACA,qBAAsB,CACpB,UAAW,uCACTA,EAAuB,EAAE,WAE7B,CACF,CACF,EACA,qBAAsB,CACpB,MAAO,cACP,YAAa,0BACb,UAAW,oCACb,CACF,EACA,OAAQ,CACN,GAAI,WACJ,aAAc,KACd,SAAU,SACV,OAAQ,IACR,oBAAqB,CACnB,UAAW,CACT,MAAO,aACT,EACA,kBAAmB,CACjB,GAAGA,IACH,sBAAuB,CACrB,YAAa,qBACf,EACA,qBAAsB,CACpB,UAAW,sCACTA,EAAuB,EAAE,WAE7B,CACF,CACF,EACA,qBAAsB,CACpB,MAAO,WACP,OAAQ,gCACR,GAAI,QACJ,UAAW,iBACb,CACF,CACF,CACF,CACF,CAAC,EAEYC,EAAkBJ"}
+{"version":3,"file":"ToggleGroupItem.js","sources":["../../../src/components/toggle-group/ToggleGroupItem.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\n\nimport { styled } from '~/stitches'\n\nexport const StyledItem = styled(ToggleGroup.Item, {\n  cursor: 'pointer',\n  '&[disabled]': {\n    opacity: 0.3,\n    cursor: 'not-allowed'\n  },\n  variants: {\n    theme: {\n      standard: {\n        bg: 'white',\n        color: '$grey800',\n        border: '1px solid $grey600',\n        '&::before': {\n          background: '$grey600'\n        },\n        '&:not([disabled])': {\n          '&:hover, &:focus-visible, &[data-state=\"on\"]': {\n            '&::before': {\n              background: 'none'\n            }\n          },\n          '&:hover': {\n            borderColor: 'currentColor !important',\n            color: '$primary900'\n          },\n          '&:focus-visible': {\n            outline: 'none',\n            position: 'relative',\n            zIndex: 1,\n            boxShadow: `white 0px 0px 0px 2px, $colors$primary800 0px 0px 0px 4px`,\n            '&[data-state=\"off\"]': {\n              borderColor: '$grey600 !important'\n            },\n            '&[data-state=\"on\"]': {\n              boxShadow: `inset currentColor 0px 0px 0px 1px, white 0px 0px 0px 2px, $colors$primary800 0px 0px 0px 4px`\n            }\n          }\n        },\n        '&[data-state=\"on\"]': {\n          color: '$primary800',\n          borderColor: 'currentColor !important',\n          boxShadow: 'inset currentColor 0px 0px 0px 1px'\n        }\n      },\n      modern: {\n        bg: '$grey200',\n        borderRadius: '$1',\n        overflow: 'hidden',\n        border: '0',\n        '&:not([disabled])': {\n          '&:hover': {\n            color: '$primary900'\n          },\n          '&:focus-visible': {\n            outline: 'none',\n            position: 'relative',\n            zIndex: 1,\n            boxShadow: `white 0px 0px 0px 2px, $colors$primary800 0px 0px 0px 4px`,\n            '&[data-state=\"off\"]': {\n              borderColor: '$grey600 !important'\n            },\n            '&[data-state=\"on\"]': {\n              boxShadow: `inset currentColor 0px 0px 0px 1px white 0px 0px 0px 2px, $colors$primary800 0px 0px 0px 4px`\n            }\n          }\n        },\n        '&[data-state=\"on\"]': {\n          color: '$grey800',\n          border: '1px solid $grey200 !important',\n          bg: 'white',\n          boxShadow: 'none !important'\n        }\n      }\n    }\n  }\n})\n\nexport const ToggleGroupItem = StyledItem\n"],"names":["StyledItem","styled","ToggleGroup","ToggleGroupItem"],"mappings":"0FAIO,MAAMA,EAAaC,EAAOC,EAAY,KAAM,CACjD,OAAQ,UACR,cAAe,CACb,QAAS,GACT,OAAQ,aACV,EACA,SAAU,CACR,MAAO,CACL,SAAU,CACR,GAAI,QACJ,MAAO,WACP,OAAQ,qBACR,YAAa,CACX,WAAY,UACd,EACA,oBAAqB,CACnB,+CAAgD,CAC9C,YAAa,CACX,WAAY,MACd,CACF,EACA,UAAW,CACT,YAAa,0BACb,MAAO,aACT,EACA,kBAAmB,CACjB,QAAS,OACT,SAAU,WACV,OAAQ,EACR,UAAW,4DACX,sBAAuB,CACrB,YAAa,qBACf,EACA,qBAAsB,CACpB,UAAW,+FACb,CACF,CACF,EACA,qBAAsB,CACpB,MAAO,cACP,YAAa,0BACb,UAAW,oCACb,CACF,EACA,OAAQ,CACN,GAAI,WACJ,aAAc,KACd,SAAU,SACV,OAAQ,IACR,oBAAqB,CACnB,UAAW,CACT,MAAO,aACT,EACA,kBAAmB,CACjB,QAAS,OACT,SAAU,WACV,OAAQ,EACR,UAAW,4DACX,sBAAuB,CACrB,YAAa,qBACf,EACA,qBAAsB,CACpB,UAAW,8FACb,CACF,CACF,EACA,qBAAsB,CACpB,MAAO,WACP,OAAQ,gCACR,GAAI,QACJ,UAAW,iBACb,CACF,CACF,CACF,CACF,CAAC,EAEYC,EAAkBH"}

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

@@ -35,6 +35,8 @@ export declare const StyledRoot: import("@atom-learning/stitches-react/types/sty
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

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

@@ -1,2 +1,2 @@
-import*as t from"react";import{Flex as f}from"../flex/Flex.js";import{styled as u}from"../../stitches.js";import{ToggleGroup as b}from"../../utilities/radix-overrides/toggle-group/index.js";import{StyledItem as o}from"./ToggleGroupItem.js";const n=u(b.Root,{width:"fit-content",variants:{isFullWidth:{true:{width:"100%",[`& ${o}`]:{flexBasis:0,flexGrow:1}},false:{width:"auto"}},hasGap:{true:{[`& ${o}`]:{borderRadius:"$1"}},false:{borderRadius:"$1",[`& ${o}`]:{position:"relative","&:not(:last-child)::before":{content:"",position:"absolute"}}}},direction:{column:{},row:{}},theme:{standard:{},modern:{bg:"$grey200"}}},compoundVariants:[{hasGap:!1,direction:"row",theme:"standard",css:{[`& ${o}`]:{borderRadius:0,"&:not(:last-child)::before":{top:"-1px",height:"calc(100% + 2px)",width:"1px",right:"0",transform:"translateX(150%)"},"&:not(:first-child)":{borderLeftColor:"transparent"},"&:not(:last-child)":{borderRightColor:"transparent"},"&:first-child":{borderTopLeftRadius:"$1",borderBottomLeftRadius:"$1"},"&:last-child":{borderTopRightRadius:"$1",borderBottomRightRadius:"$1"}}}},{hasGap:!1,direction:"column",theme:"standard",css:{[`& ${o}`]:{"&:not(:last-child)::before":{bottom:0,left:"-1px",height:"1px",width:"calc(100% + 2px)",transform:"translateY(150%)"},"&:first-child":{borderTopLeftRadius:"$0",borderTopRightRadius:"$0"},"&:last-child":{borderBottomLeftRadius:"$0",borderBottomRightRadius:"$0"},"&:not(:first-child)":{borderTopColor:"transparent"},"&:not(:last-child)":{borderBottomColor:"transparent"}}}},{hasGap:!1,theme:"modern",css:{}},{hasGap:!1,theme:"standard",css:{bg:"white",[`& ${o}`]:{bg:"transparent",borderRadius:0}}}]}),R=r=>r==="horizontal"?"row":"column",g=t.forwardRef(({orientation:r="horizontal",gap:a,isFullWidth:l,children:h,theme:i="standard",wrap:p,...m},c)=>{const d=typeof a=="number",s=R(r);return t.createElement(n,{ref:c,direction:s,hasGap:d,isFullWidth:l,orientation:r,theme:i,...m},t.createElement(f,{direction:s,gap:d?a:void 0,wrap:p||"nowrap"},t.Children.toArray(h).map(e=>t.isValidElement(e)?t.cloneElement(e,{...e.props,theme:i}):e)))});export{n as StyledRoot,g as ToggleGroupRoot};
+import*as t from"react";import{Flex as p}from"../flex/Flex.js";import{styled as f}from"../../stitches.js";import{ToggleGroup as u}from"../../utilities/radix-overrides/toggle-group/index.js";const n=f(u.Root,{width:"fit-content",variants:{isFullWidth:{true:{width:"100%","& [data-radix-collection-item]":{flexBasis:0,flexGrow:1}},false:{width:"auto"}},hasGap:{true:{"& [data-radix-collection-item]":{borderRadius:"$1"}},false:{borderRadius:"$1","& [data-radix-collection-item]":{position:"relative","&:not(:last-child)":{"&::before":{content:"",position:"absolute"}}}}},direction:{column:{},row:{}},theme:{standard:{},modern:{bg:"$grey200"}}},compoundVariants:[{hasGap:!1,direction:"row",theme:"standard",css:{"& [data-radix-collection-item]":{borderRadius:0,"&:not(:last-child)::before":{top:"-1px",height:"calc(100% + 2px)",width:"1px",right:"0",transform:"translateX(150%)"},"&:not(:first-child)":{borderLeftColor:"transparent"},"&:not(:last-child)":{borderRightColor:"transparent"},"&:first-child":{borderTopLeftRadius:"$1",borderBottomLeftRadius:"$1"},"&:last-child":{borderTopRightRadius:"$1",borderBottomRightRadius:"$1"}}}},{hasGap:!1,direction:"column",theme:"standard",css:{"& [data-radix-collection-item]":{"&:not(:last-child)::before":{bottom:0,left:"-1px",height:"1px",width:"calc(100% + 2px)",transform:"translateY(150%)"},"&:first-child":{borderTopLeftRadius:"$0",borderTopRightRadius:"$0"},"&:last-child":{borderBottomLeftRadius:"$0",borderBottomRightRadius:"$0"},"&:not(:first-child)":{borderTopColor:"transparent"},"&:not(:last-child)":{borderBottomColor:"transparent"}}}},{hasGap:!1,theme:"modern",css:{}},{hasGap:!1,theme:"standard",css:{bg:"white","& [data-radix-collection-item]":{bg:"transparent",borderRadius:0}}}]}),b=o=>o==="horizontal"?"row":"column",R=t.forwardRef(({orientation:o="horizontal",gap:e,isFullWidth:s,children:l,theme:a="standard",wrap:c,...h},m)=>{const i=typeof e=="number",d=b(o);return t.createElement(n,{ref:m,direction:d,hasGap:i,isFullWidth:s,orientation:o,theme:a,...h},t.createElement(p,{direction:d,gap:i?e:void 0,wrap:c||"nowrap"},t.Children.toArray(l).map(r=>t.isValidElement(r)?t.cloneElement(r,{...r.props,theme:a}):r)))});export{n as StyledRoot,R as ToggleGroupRoot};
 //# sourceMappingURL=ToggleGroupRoot.js.map

package/dist/components/toggle-group/ToggleGroupRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroupRoot.js","sources":["../../../src/components/toggle-group/ToggleGroupRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Flex } from '~/components/flex'\nimport { styled } from '~/stitches'\nimport { ToggleGroup } from '~/utilities/radix-overrides/toggle-group'\n\nimport { StyledItem } from './ToggleGroupItem'\n\ntype RootType = {\n  orientation?: 'horizontal' | 'vertical'\n  isFullWidth?: boolean\n}\n\nexport const StyledRoot = styled(ToggleGroup.Root, {\n  width: 'fit-content',\n  variants: {\n    isFullWidth: {\n      true: {\n        width: '100%',\n        [`& ${StyledItem}`]: {\n          flexBasis: 0,\n          flexGrow: 1\n        }\n      },\n      false: {\n        width: 'auto'\n      }\n    },\n    hasGap: {\n      true: {\n        [`& ${StyledItem}`]: {\n          borderRadius: '$1'\n        }\n      },\n      false: {\n        borderRadius: '$1',\n        [`& ${StyledItem}`]: {\n          position: 'relative',\n          '&:not(:last-child)::before': {\n            content: '',\n            position: 'absolute'\n          }\n        }\n      }\n    },\n    direction: {\n      column: {},\n      row: {}\n    },\n    theme: {\n      standard: {},\n      modern: { bg: '$grey200' }\n    }\n  },\n  compoundVariants: [\n    {\n      hasGap: false,\n      direction: 'row',\n      theme: 'standard',\n      css: {\n        [`& ${StyledItem}`]: {\n          borderRadius: 0,\n          '&:not(:last-child)::before': {\n            top: '-1px',\n            height: 'calc(100% + 2px)',\n            width: '1px',\n            right: '0',\n            transform: 'translateX(150%)'\n          },\n          '&:not(:first-child)': {\n            borderLeftColor: 'transparent'\n          },\n          '&:not(:last-child)': {\n            borderRightColor: 'transparent'\n          },\n          '&:first-child': {\n            borderTopLeftRadius: '$1',\n            borderBottomLeftRadius: '$1'\n          },\n          '&:last-child': {\n            borderTopRightRadius: '$1',\n            borderBottomRightRadius: '$1'\n          }\n        }\n      }\n    },\n    {\n      hasGap: false,\n      direction: 'column',\n      theme: 'standard',\n      css: {\n        [`& ${StyledItem}`]: {\n          '&:not(:last-child)::before': {\n            bottom: 0,\n            left: '-1px',\n            height: '1px',\n            width: 'calc(100% + 2px)',\n            transform: 'translateY(150%)'\n          },\n          '&:first-child': {\n            borderTopLeftRadius: '$0',\n            borderTopRightRadius: '$0'\n          },\n          '&:last-child': {\n            borderBottomLeftRadius: '$0',\n            borderBottomRightRadius: '$0'\n          },\n          '&:not(:first-child)': {\n            borderTopColor: 'transparent'\n          },\n          '&:not(:last-child)': {\n            borderBottomColor: 'transparent'\n          }\n        }\n      }\n    },\n    {\n      hasGap: false,\n      theme: 'modern',\n      css: {}\n    },\n    {\n      hasGap: false,\n      theme: 'standard',\n      css: {\n        bg: 'white',\n        [`& ${StyledItem}`]: {\n          bg: 'transparent',\n          borderRadius: 0\n        }\n      }\n    }\n  ]\n})\n\nconst orientationToDirection = (orientation) =>\n  orientation === 'horizontal' ? 'row' : 'column'\n\nexport const ToggleGroupRoot: React.ForwardRefExoticComponent<\n  Pick<React.ComponentProps<typeof Flex>, 'gap' | 'wrap'> &\n    React.ComponentProps<typeof StyledRoot> &\n    RootType\n> = React.forwardRef(\n  (\n    {\n      orientation = 'horizontal',\n      gap,\n      isFullWidth,\n      children,\n      theme = 'standard',\n      wrap,\n      ...rest\n    },\n    ref\n  ) => {\n    const hasGap = typeof gap === 'number'\n    const direction = orientationToDirection(orientation)\n    return (\n      <StyledRoot\n        ref={ref}\n        direction={direction}\n        hasGap={hasGap}\n        isFullWidth={isFullWidth}\n        orientation={orientation}\n        theme={theme}\n        {...rest}\n      >\n        <Flex\n          direction={direction}\n          gap={hasGap ? gap : undefined}\n          wrap={wrap || 'nowrap'}\n        >\n          {\n            React.Children.toArray(children).map((child) => {\n              if (React.isValidElement(child)) {\n                return React.cloneElement(child, { ...child.props, theme })\n              }\n              return child\n            }) as React.ReactElement[]\n          }\n        </Flex>\n      </StyledRoot>\n    )\n  }\n)\n"],"names":["StyledRoot","styled","ToggleGroup","StyledItem","orientationToDirection","orientation","ToggleGroupRoot","React","gap","isFullWidth","children","theme","wrap","rest","ref","hasGap","direction","Flex","child"],"mappings":"gPAaO,MAAMA,EAAaC,EAAOC,EAAY,KAAM,CACjD,MAAO,cACP,SAAU,CACR,YAAa,CACX,KAAM,CACJ,MAAO,OACP,CAAC,KAAKC,KAAe,CACnB,UAAW,EACX,SAAU,CACZ,CACF,EACA,MAAO,CACL,MAAO,MACT,CACF,EACA,OAAQ,CACN,KAAM,CACJ,CAAC,KAAKA,KAAe,CACnB,aAAc,IAChB,CACF,EACA,MAAO,CACL,aAAc,KACd,CAAC,KAAKA,KAAe,CACnB,SAAU,WACV,6BAA8B,CAC5B,QAAS,GACT,SAAU,UACZ,CACF,CACF,CACF,EACA,UAAW,CACT,OAAQ,CAAA,EACR,IAAK,CACP,CAAA,EACA,MAAO,CACL,SAAU,GACV,OAAQ,CAAE,GAAI,UAAW,CAC3B,CACF,EACA,iBAAkB,CAChB,CACE,OAAQ,GACR,UAAW,MACX,MAAO,WACP,IAAK,CACH,CAAC,KAAKA,KAAe,CACnB,aAAc,EACd,6BAA8B,CAC5B,IAAK,OACL,OAAQ,mBACR,MAAO,MACP,MAAO,IACP,UAAW,kBACb,EACA,sBAAuB,CACrB,gBAAiB,aACnB,EACA,qBAAsB,CACpB,iBAAkB,aACpB,EACA,gBAAiB,CACf,oBAAqB,KACrB,uBAAwB,IAC1B,EACA,eAAgB,CACd,qBAAsB,KACtB,wBAAyB,IAC3B,CACF,CACF,CACF,EACA,CACE,OAAQ,GACR,UAAW,SACX,MAAO,WACP,IAAK,CACH,CAAC,KAAKA,KAAe,CACnB,6BAA8B,CAC5B,OAAQ,EACR,KAAM,OACN,OAAQ,MACR,MAAO,mBACP,UAAW,kBACb,EACA,gBAAiB,CACf,oBAAqB,KACrB,qBAAsB,IACxB,EACA,eAAgB,CACd,uBAAwB,KACxB,wBAAyB,IAC3B,EACA,sBAAuB,CACrB,eAAgB,aAClB,EACA,qBAAsB,CACpB,kBAAmB,aACrB,CACF,CACF,CACF,EACA,CACE,OAAQ,GACR,MAAO,SACP,IAAK,CAAA,CACP,EACA,CACE,OAAQ,GACR,MAAO,WACP,IAAK,CACH,GAAI,QACJ,CAAC,KAAKA,KAAe,CACnB,GAAI,cACJ,aAAc,CAChB,CACF,CACF,CACF,CACF,CAAC,EAEKC,EAA0BC,GAC9BA,IAAgB,aAAe,MAAQ,SAE5BC,EAITC,EAAM,WACR,CACE,CACE,YAAAF,EAAc,aACd,IAAAG,EACA,YAAAC,EACA,SAAAC,EACA,MAAAC,EAAQ,WACR,KAAAC,KACGC,CACL,EACAC,IACG,CACH,MAAMC,EAAS,OAAOP,GAAQ,SACxBQ,EAAYZ,EAAuBC,CAAW,EACpD,OACEE,EAAA,cAACP,EAAA,CACC,IAAKc,EACL,UAAWE,EACX,OAAQD,EACR,YAAaN,EACb,YAAaJ,EACb,MAAOM,EACN,GAAGE,GAEJN,EAAA,cAACU,EAAA,CACC,UAAWD,EACX,IAAKD,EAASP,EAAM,OACpB,KAAMI,GAAQ,QAAA,EAGZL,EAAM,SAAS,QAAQG,CAAQ,EAAE,IAAKQ,GAChCX,EAAM,eAAeW,CAAK,EACrBX,EAAM,aAAaW,EAAO,CAAE,GAAGA,EAAM,MAAO,MAAAP,CAAM,CAAC,EAErDO,CACR,CAEL,CACF,CAEJ,CACF"}
+{"version":3,"file":"ToggleGroupRoot.js","sources":["../../../src/components/toggle-group/ToggleGroupRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Flex } from '~/components/flex'\nimport { styled } from '~/stitches'\nimport { ToggleGroup } from '~/utilities/radix-overrides/toggle-group'\n\nimport { StyledItem } from './ToggleGroupItem'\n\ntype RootType = {\n  orientation?: 'horizontal' | 'vertical'\n  isFullWidth?: boolean\n}\n\nexport const StyledRoot = styled(ToggleGroup.Root, {\n  width: 'fit-content',\n  variants: {\n    isFullWidth: {\n      true: {\n        width: '100%',\n        '& [data-radix-collection-item]': {\n          flexBasis: 0,\n          flexGrow: 1\n        }\n      },\n      false: {\n        width: 'auto'\n      }\n    },\n    hasGap: {\n      true: {\n        '& [data-radix-collection-item]': {\n          borderRadius: '$1'\n        }\n      },\n      false: {\n        borderRadius: '$1',\n        '& [data-radix-collection-item]': {\n          position: 'relative',\n          '&:not(:last-child)': {\n            '&::before': {\n              content: '',\n              position: 'absolute'\n            }\n          }\n        }\n      }\n    },\n    direction: {\n      column: {},\n      row: {}\n    },\n    theme: {\n      standard: {},\n      modern: { bg: '$grey200' }\n    }\n  },\n  compoundVariants: [\n    {\n      hasGap: false,\n      direction: 'row',\n      theme: 'standard',\n      css: {\n        '& [data-radix-collection-item]': {\n          borderRadius: 0,\n          '&:not(:last-child)::before': {\n            top: '-1px',\n            height: 'calc(100% + 2px)',\n            width: '1px',\n            right: '0',\n            transform: 'translateX(150%)'\n          },\n          '&:not(:first-child)': {\n            borderLeftColor: 'transparent'\n          },\n          '&:not(:last-child)': {\n            borderRightColor: 'transparent'\n          },\n          '&:first-child': {\n            borderTopLeftRadius: '$1',\n            borderBottomLeftRadius: '$1'\n          },\n          '&:last-child': {\n            borderTopRightRadius: '$1',\n            borderBottomRightRadius: '$1'\n          }\n        }\n      }\n    },\n    {\n      hasGap: false,\n      direction: 'column',\n      theme: 'standard',\n      css: {\n        '& [data-radix-collection-item]': {\n          '&:not(:last-child)::before': {\n            bottom: 0,\n            left: '-1px',\n            height: '1px',\n            width: 'calc(100% + 2px)',\n            transform: 'translateY(150%)'\n          },\n          '&:first-child': {\n            borderTopLeftRadius: '$0',\n            borderTopRightRadius: '$0'\n          },\n          '&:last-child': {\n            borderBottomLeftRadius: '$0',\n            borderBottomRightRadius: '$0'\n          },\n          '&:not(:first-child)': {\n            borderTopColor: 'transparent'\n          },\n          '&:not(:last-child)': {\n            borderBottomColor: 'transparent'\n          }\n        }\n      }\n    },\n    {\n      hasGap: false,\n      theme: 'modern',\n      css: {}\n    },\n    {\n      hasGap: false,\n      theme: 'standard',\n      css: {\n        bg: 'white',\n        '& [data-radix-collection-item]': {\n          bg: 'transparent',\n          borderRadius: 0\n        }\n      }\n    }\n  ]\n})\n\nconst orientationToDirection = (orientation) =>\n  orientation === 'horizontal' ? 'row' : 'column'\n\nexport const ToggleGroupRoot: React.ForwardRefExoticComponent<\n  Pick<React.ComponentProps<typeof Flex>, 'gap' | 'wrap'> &\n    React.ComponentProps<typeof StyledRoot> &\n    RootType\n> = React.forwardRef(\n  (\n    {\n      orientation = 'horizontal',\n      gap,\n      isFullWidth,\n      children,\n      theme = 'standard',\n      wrap,\n      ...rest\n    },\n    ref\n  ) => {\n    const hasGap = typeof gap === 'number'\n    const direction = orientationToDirection(orientation)\n    return (\n      <StyledRoot\n        ref={ref}\n        direction={direction}\n        hasGap={hasGap}\n        isFullWidth={isFullWidth}\n        orientation={orientation}\n        theme={theme}\n        {...rest}\n      >\n        <Flex\n          direction={direction}\n          gap={hasGap ? gap : undefined}\n          wrap={wrap || 'nowrap'}\n        >\n          {\n            React.Children.toArray(children).map((child) => {\n              if (React.isValidElement(child)) {\n                return React.cloneElement(child, { ...child.props, theme })\n              }\n              return child\n            }) as React.ReactElement[]\n          }\n        </Flex>\n      </StyledRoot>\n    )\n  }\n)\n"],"names":["StyledRoot","styled","ToggleGroup","orientationToDirection","orientation","ToggleGroupRoot","React","gap","isFullWidth","children","theme","wrap","rest","ref","hasGap","direction","Flex","child"],"mappings":"8LAaO,MAAMA,EAAaC,EAAOC,EAAY,KAAM,CACjD,MAAO,cACP,SAAU,CACR,YAAa,CACX,KAAM,CACJ,MAAO,OACP,iCAAkC,CAChC,UAAW,EACX,SAAU,CACZ,CACF,EACA,MAAO,CACL,MAAO,MACT,CACF,EACA,OAAQ,CACN,KAAM,CACJ,iCAAkC,CAChC,aAAc,IAChB,CACF,EACA,MAAO,CACL,aAAc,KACd,iCAAkC,CAChC,SAAU,WACV,qBAAsB,CACpB,YAAa,CACX,QAAS,GACT,SAAU,UACZ,CACF,CACF,CACF,CACF,EACA,UAAW,CACT,OAAQ,CACR,EAAA,IAAK,CACP,CAAA,EACA,MAAO,CACL,SAAU,CAAA,EACV,OAAQ,CAAE,GAAI,UAAW,CAC3B,CACF,EACA,iBAAkB,CAChB,CACE,OAAQ,GACR,UAAW,MACX,MAAO,WACP,IAAK,CACH,iCAAkC,CAChC,aAAc,EACd,6BAA8B,CAC5B,IAAK,OACL,OAAQ,mBACR,MAAO,MACP,MAAO,IACP,UAAW,kBACb,EACA,sBAAuB,CACrB,gBAAiB,aACnB,EACA,qBAAsB,CACpB,iBAAkB,aACpB,EACA,gBAAiB,CACf,oBAAqB,KACrB,uBAAwB,IAC1B,EACA,eAAgB,CACd,qBAAsB,KACtB,wBAAyB,IAC3B,CACF,CACF,CACF,EACA,CACE,OAAQ,GACR,UAAW,SACX,MAAO,WACP,IAAK,CACH,iCAAkC,CAChC,6BAA8B,CAC5B,OAAQ,EACR,KAAM,OACN,OAAQ,MACR,MAAO,mBACP,UAAW,kBACb,EACA,gBAAiB,CACf,oBAAqB,KACrB,qBAAsB,IACxB,EACA,eAAgB,CACd,uBAAwB,KACxB,wBAAyB,IAC3B,EACA,sBAAuB,CACrB,eAAgB,aAClB,EACA,qBAAsB,CACpB,kBAAmB,aACrB,CACF,CACF,CACF,EACA,CACE,OAAQ,GACR,MAAO,SACP,IAAK,CAAA,CACP,EACA,CACE,OAAQ,GACR,MAAO,WACP,IAAK,CACH,GAAI,QACJ,iCAAkC,CAChC,GAAI,cACJ,aAAc,CAChB,CACF,CACF,CACF,CACF,CAAC,EAEKC,EAA0BC,GAC9BA,IAAgB,aAAe,MAAQ,SAE5BC,EAITC,EAAM,WACR,CACE,CACE,YAAAF,EAAc,aACd,IAAAG,EACA,YAAAC,EACA,SAAAC,EACA,MAAAC,EAAQ,WACR,KAAAC,KACGC,CACL,EACAC,IACG,CACH,MAAMC,EAAS,OAAOP,GAAQ,SACxBQ,EAAYZ,EAAuBC,CAAW,EACpD,OACEE,EAAA,cAACN,GACC,IAAKa,EACL,UAAWE,EACX,OAAQD,EACR,YAAaN,EACb,YAAaJ,EACb,MAAOM,EACN,GAAGE,CAEJN,EAAAA,EAAA,cAACU,EAAA,CACC,UAAWD,EACX,IAAKD,EAASP,EAAM,OACpB,KAAMI,GAAQ,QAGZL,EAAAA,EAAM,SAAS,QAAQG,CAAQ,EAAE,IAAKQ,GAChCX,EAAM,eAAeW,CAAK,EACrBX,EAAM,aAAaW,EAAO,CAAE,GAAGA,EAAM,MAAO,MAAAP,CAAM,CAAC,EAErDO,CACR,CAEL,CACF,CAEJ,CACF"}

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

@@ -25,6 +25,8 @@ export declare const ToggleGroup: {
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -397,6 +399,8 @@ export declare const ToggleGroup: {
                 textMinimal: string;
                 background: string;
                 backgroundAccent: string;
+                black: string;
+                white: string;
                 grey100: string;
                 grey200: string;
                 grey300: string;
@@ -771,6 +775,8 @@ export declare const ToggleGroup: {
                 textMinimal: string;
                 background: string;
                 backgroundAccent: string;
+                black: string;
+                white: string;
                 grey100: string;
                 grey200: string;
                 grey300: string;
@@ -1119,11 +1125,11 @@ export declare const ToggleGroup: {
     }>;
     Root: import("react").ForwardRefExoticComponent<Pick<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-    }, "direction" | "gap" | "css" | "align" | "wrap" | "justify"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
-        direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | "revert-layer" | undefined;
-        wrap?: "inherit" | "initial" | "revert" | "unset" | "wrap" | "nowrap" | "wrap-reverse" | "revert-layer" | undefined;
-        justify?: "left" | "right" | "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | "flex-end" | "flex-start" | "normal" | "revert-layer" | "unsafe" | "safe" | undefined;
-        align?: "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "end" | "start" | "flex-end" | "flex-start" | "baseline" | "normal" | "self-end" | "self-start" | "revert-layer" | "unsafe" | "safe" | "first baseline" | "last baseline" | undefined;
+    }, "direction" | "gap" | "css" | "wrap" | "justify" | "align"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
+        direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "row-reverse" | "column" | "column-reverse" | "revert-layer" | undefined;
+        wrap?: "inherit" | "initial" | "revert" | "unset" | "revert-layer" | "wrap" | "nowrap" | "wrap-reverse" | undefined;
+        justify?: "left" | "right" | "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "revert-layer" | "normal" | "unsafe" | "safe" | "start" | "end" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | undefined;
+        align?: "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "revert-layer" | "normal" | "unsafe" | "safe" | "start" | "end" | "flex-start" | "flex-end" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline" | undefined;
         gap?: number | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | undefined;
     }, {
         sm: string;
@@ -1150,6 +1156,8 @@ export declare const ToggleGroup: {
                 textMinimal: string;
                 background: string;
                 backgroundAccent: string;
+                black: string;
+                white: string;
                 grey100: string;
                 grey200: string;
                 grey300: string;
@@ -1495,7 +1503,7 @@ export declare const ToggleGroup: {
                 marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
             };
         }> | undefined;
-    }, "gap" | "wrap"> & ((Omit<import("@radix-ui/react-toggle-group").ToggleGroupSingleProps & import("react").RefAttributes<HTMLDivElement> & {
+    }, "gap" | "wrap"> & (((Omit<import("@radix-ui/react-toggle-group").ToggleGroupSingleProps & import("react").RefAttributes<HTMLDivElement> & {
         disableDeselect?: boolean;
     }, "direction" | "css" | "theme" | "isFullWidth" | "hasGap"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
         isFullWidth?: boolean | "true" | "false" | undefined;
@@ -1527,6 +1535,8 @@ export declare const ToggleGroup: {
                 textMinimal: string;
                 background: string;
                 backgroundAccent: string;
+                black: string;
+                white: string;
                 grey100: string;
                 grey200: string;
                 grey300: string;
@@ -1904,6 +1914,8 @@ export declare const ToggleGroup: {
                 textMinimal: string;
                 background: string;
                 backgroundAccent: string;
+                black: string;
+                white: string;
                 grey100: string;
                 grey200: string;
                 grey300: string;
@@ -2252,5 +2264,5 @@ export declare const ToggleGroup: {
     })) & {
         orientation?: "horizontal" | "vertical";
         isFullWidth?: boolean;
-    }>;
+    })>;
 };

package/dist/components/tooltip/Tooltip.d.ts

@@ -32,6 +32,8 @@ export declare const Tooltip: {
                 textMinimal: string;
                 background: string;
                 backgroundAccent: string;
+                black: string;
+                white: string;
                 grey100: string;
                 grey200: string;
                 grey300: string;
@@ -402,6 +404,8 @@ export declare const Tooltip: {
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;