@atom-learning/components 3.10.0 → 3.11.0

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

@@ -1,17 +1,17 @@
 import * as React from 'react';
 declare const toastVariants: {
-    readonly blank: {
-        readonly bg: "$primary";
-    };
-    readonly error: {
-        readonly bg: "$danger";
-    };
     readonly loading: {
-        readonly bg: "$primary";
+        readonly bg: "$info";
+    };
+    readonly blank: {
+        readonly bg: "$info";
     };
     readonly success: {
         readonly bg: "$success";
     };
+    readonly error: {
+        readonly bg: "$danger";
+    };
 };
 export declare const StyledToast: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"div", {
     direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | "revert-layer" | undefined;
@@ -37,9 +37,10 @@ export declare const StyledToast: import("@stitches/react/types/styled-component
     hover: string;
 }, {
     colors: {
-        textForeground: any;
+        textBold: any;
+        textRegular: any;
         textSubtle: any;
-        textPlaceholder: any;
+        textMinimal: any;
         background: any;
         backgroundAccent: any;
         grey100: any;
@@ -186,11 +187,6 @@ export declare const StyledToast: import("@stitches/react/types/styled-component
         alpha200: any;
         alpha250: any;
         alpha600: any;
-        primaryLight: any;
-        primary: any;
-        primaryMid: any;
-        primaryDark: any;
-        secondary: any;
         brandRed: any;
         brandRedAccent: any;
         brandGreen: any;
@@ -199,6 +195,10 @@ export declare const StyledToast: import("@stitches/react/types/styled-component
         brandPurpleAccent: any;
         brandYellow: any;
         brandYellowAccent: any;
+        infoLight: any;
+        info: any;
+        infoMid: any;
+        infoDark: any;
         successLight: any;
         success: any;
         successMid: any;
@@ -222,6 +222,18 @@ export declare const StyledToast: import("@stitches/react/types/styled-component
         glBlueLight: any;
         glBluePrimary: any;
         glBlueDark: any;
+        primary100: any;
+        primary200: any;
+        primary300: any;
+        primary400: any;
+        primary500: any;
+        primary600: any;
+        primary700: any;
+        primary800: any;
+        primary900: any;
+        primary1000: any;
+        primary1100: any;
+        primary1200: any;
     };
     space: {
         "0": any;
@@ -357,9 +369,10 @@ export declare const StyledToast: import("@stitches/react/types/styled-component
     hover: string;
 }, {
     colors: {
-        textForeground: any;
+        textBold: any;
+        textRegular: any;
         textSubtle: any;
-        textPlaceholder: any;
+        textMinimal: any;
         background: any;
         backgroundAccent: any;
         grey100: any;
@@ -506,11 +519,6 @@ export declare const StyledToast: import("@stitches/react/types/styled-component
         alpha200: any;
         alpha250: any;
         alpha600: any;
-        primaryLight: any;
-        primary: any;
-        primaryMid: any;
-        primaryDark: any;
-        secondary: any;
         brandRed: any;
         brandRedAccent: any;
         brandGreen: any;
@@ -519,6 +527,10 @@ export declare const StyledToast: import("@stitches/react/types/styled-component
         brandPurpleAccent: any;
         brandYellow: any;
         brandYellowAccent: any;
+        infoLight: any;
+        info: any;
+        infoMid: any;
+        infoDark: any;
         successLight: any;
         success: any;
         successMid: any;
@@ -542,6 +554,18 @@ export declare const StyledToast: import("@stitches/react/types/styled-component
         glBlueLight: any;
         glBluePrimary: any;
         glBlueDark: any;
+        primary100: any;
+        primary200: any;
+        primary300: any;
+        primary400: any;
+        primary500: any;
+        primary600: any;
+        primary700: any;
+        primary800: any;
+        primary900: any;
+        primary1000: any;
+        primary1100: any;
+        primary1200: any;
     };
     space: {
         "0": any;
@@ -686,9 +710,10 @@ export declare const Toast: {
             hover: string;
         }, {
             colors: {
-                textForeground: any;
+                textBold: any;
+                textRegular: any;
                 textSubtle: any;
-                textPlaceholder: any;
+                textMinimal: any;
                 background: any;
                 backgroundAccent: any;
                 grey100: any;
@@ -835,11 +860,6 @@ export declare const Toast: {
                 alpha200: any;
                 alpha250: any;
                 alpha600: any;
-                primaryLight: any;
-                primary: any;
-                primaryMid: any;
-                primaryDark: any;
-                secondary: any;
                 brandRed: any;
                 brandRedAccent: any;
                 brandGreen: any;
@@ -848,6 +868,10 @@ export declare const Toast: {
                 brandPurpleAccent: any;
                 brandYellow: any;
                 brandYellowAccent: any;
+                infoLight: any;
+                info: any;
+                infoMid: any;
+                infoDark: any;
                 successLight: any;
                 success: any;
                 successMid: any;
@@ -871,6 +895,18 @@ export declare const Toast: {
                 glBlueLight: any;
                 glBluePrimary: any;
                 glBlueDark: any;
+                primary100: any;
+                primary200: any;
+                primary300: any;
+                primary400: any;
+                primary500: any;
+                primary600: any;
+                primary700: any;
+                primary800: any;
+                primary900: any;
+                primary1000: any;
+                primary1100: any;
+                primary1200: any;
             };
             space: {
                 "0": any;

package/dist/components/toast/Toast.js

@@ -1,2 +1,2 @@
-import*as s from"react";import{styled as a}from"../../stitches.js";import{Flex as n}from"../flex/Flex.js";import{ToastCloseButton as i}from"./ToastCloseButton.js";import{ToastIcon as m}from"./ToastIcon.js";import{useToastContext as p}from"./ToastProvider.js";const c={blank:{bg:"$primary"},error:{bg:"$danger"},loading:{bg:"$primary"},success:{bg:"$success"}},r=a(n,{pointerEvents:"auto",borderRadius:"$0",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:c}}),o=t=>{const{type:e}=p();return s.createElement(r,{align:"center",type:t.type||e,...t})};o.Icon=m,o.Close=i;export{r 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 p={loading:{bg:"$info"},blank:{bg:"$info"},success:{bg:"$success"},error:{bg:"$danger"}},e=n(a,{pointerEvents:"auto",borderRadius:"$0",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};
 //# 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  blank: { bg: '$primary' },\n  error: { bg: '$danger' },\n  loading: { bg: '$primary' },\n  success: { bg: '$success' }\n} as const\n\nexport const StyledToast = styled(Flex, {\n  pointerEvents: 'auto',\n  borderRadius: '$0',\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,MAAO,CAAE,GAAI,UAAW,EACxB,MAAO,CAAE,GAAI,SAAU,EACvB,QAAS,CAAE,GAAI,UAAW,EAC1B,QAAS,CAAE,GAAI,UAAW,CAC5B,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\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: '$0',\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"}

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

@@ -17,9 +17,10 @@ export declare const StyledButton: import("@stitches/react/types/styled-componen
     hover: string;
 }, {
     colors: {
-        textForeground: any;
+        textBold: any;
+        textRegular: any;
         textSubtle: any;
-        textPlaceholder: any;
+        textMinimal: any;
         background: any;
         backgroundAccent: any;
         grey100: any;
@@ -166,11 +167,6 @@ export declare const StyledButton: import("@stitches/react/types/styled-componen
         alpha200: any;
         alpha250: any;
         alpha600: any;
-        primaryLight: any;
-        primary: any;
-        primaryMid: any;
-        primaryDark: any;
-        secondary: any;
         brandRed: any;
         brandRedAccent: any;
         brandGreen: any;
@@ -179,6 +175,10 @@ export declare const StyledButton: import("@stitches/react/types/styled-componen
         brandPurpleAccent: any;
         brandYellow: any;
         brandYellowAccent: any;
+        infoLight: any;
+        info: any;
+        infoMid: any;
+        infoDark: any;
         successLight: any;
         success: any;
         successMid: any;
@@ -202,6 +202,18 @@ export declare const StyledButton: import("@stitches/react/types/styled-componen
         glBlueLight: any;
         glBluePrimary: any;
         glBlueDark: any;
+        primary100: any;
+        primary200: any;
+        primary300: any;
+        primary400: any;
+        primary500: any;
+        primary600: any;
+        primary700: any;
+        primary800: any;
+        primary900: any;
+        primary1000: any;
+        primary1100: any;
+        primary1200: any;
     };
     space: {
         "0": any;
@@ -338,9 +350,10 @@ export declare const StyledButton: import("@stitches/react/types/styled-componen
     hover: string;
 }, {
     colors: {
-        textForeground: any;
+        textBold: any;
+        textRegular: any;
         textSubtle: any;
-        textPlaceholder: any;
+        textMinimal: any;
         background: any;
         backgroundAccent: any;
         grey100: any;
@@ -487,11 +500,6 @@ export declare const StyledButton: import("@stitches/react/types/styled-componen
         alpha200: any;
         alpha250: any;
         alpha600: any;
-        primaryLight: any;
-        primary: any;
-        primaryMid: any;
-        primaryDark: any;
-        secondary: any;
         brandRed: any;
         brandRedAccent: any;
         brandGreen: any;
@@ -500,6 +508,10 @@ export declare const StyledButton: import("@stitches/react/types/styled-componen
         brandPurpleAccent: any;
         brandYellow: any;
         brandYellowAccent: any;
+        infoLight: any;
+        info: any;
+        infoMid: any;
+        infoDark: any;
         successLight: any;
         success: any;
         successMid: any;
@@ -523,6 +535,18 @@ export declare const StyledButton: import("@stitches/react/types/styled-componen
         glBlueLight: any;
         glBluePrimary: any;
         glBlueDark: any;
+        primary100: any;
+        primary200: any;
+        primary300: any;
+        primary400: any;
+        primary500: any;
+        primary600: any;
+        primary700: any;
+        primary800: any;
+        primary900: any;
+        primary1000: any;
+        primary1100: any;
+        primary1200: any;
     };
     space: {
         "0": any;

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

@@ -18,9 +18,10 @@ export declare const StyledItem: import("@stitches/react/types/styled-component"
     hover: string;
 }, {
     colors: {
-        textForeground: any;
+        textBold: any;
+        textRegular: any;
         textSubtle: any;
-        textPlaceholder: any;
+        textMinimal: any;
         background: any;
         backgroundAccent: any;
         grey100: any;
@@ -167,11 +168,6 @@ export declare const StyledItem: import("@stitches/react/types/styled-component"
         alpha200: any;
         alpha250: any;
         alpha600: any;
-        primaryLight: any;
-        primary: any;
-        primaryMid: any;
-        primaryDark: any;
-        secondary: any;
         brandRed: any;
         brandRedAccent: any;
         brandGreen: any;
@@ -180,6 +176,10 @@ export declare const StyledItem: import("@stitches/react/types/styled-component"
         brandPurpleAccent: any;
         brandYellow: any;
         brandYellowAccent: any;
+        infoLight: any;
+        info: any;
+        infoMid: any;
+        infoDark: any;
         successLight: any;
         success: any;
         successMid: any;
@@ -203,6 +203,18 @@ export declare const StyledItem: import("@stitches/react/types/styled-component"
         glBlueLight: any;
         glBluePrimary: any;
         glBlueDark: any;
+        primary100: any;
+        primary200: any;
+        primary300: any;
+        primary400: any;
+        primary500: any;
+        primary600: any;
+        primary700: any;
+        primary800: any;
+        primary900: any;
+        primary1000: any;
+        primary1100: any;
+        primary1200: any;
     };
     space: {
         "0": any;
@@ -337,9 +349,10 @@ export declare const ToggleGroupItem: import("@stitches/react/types/styled-compo
     hover: string;
 }, {
     colors: {
-        textForeground: any;
+        textBold: any;
+        textRegular: any;
         textSubtle: any;
-        textPlaceholder: any;
+        textMinimal: any;
         background: any;
         backgroundAccent: any;
         grey100: any;
@@ -486,11 +499,6 @@ export declare const ToggleGroupItem: import("@stitches/react/types/styled-compo
         alpha200: any;
         alpha250: any;
         alpha600: any;
-        primaryLight: any;
-        primary: any;
-        primaryMid: any;
-        primaryDark: any;
-        secondary: any;
         brandRed: any;
         brandRedAccent: any;
         brandGreen: any;
@@ -499,6 +507,10 @@ export declare const ToggleGroupItem: import("@stitches/react/types/styled-compo
         brandPurpleAccent: any;
         brandYellow: any;
         brandYellowAccent: any;
+        infoLight: any;
+        info: any;
+        infoMid: any;
+        infoDark: any;
         successLight: any;
         success: any;
         successMid: any;
@@ -522,6 +534,18 @@ export declare const ToggleGroupItem: import("@stitches/react/types/styled-compo
         glBlueLight: any;
         glBluePrimary: any;
         glBlueDark: any;
+        primary100: any;
+        primary200: any;
+        primary300: any;
+        primary400: any;
+        primary500: any;
+        primary600: any;
+        primary700: any;
+        primary800: any;
+        primary900: any;
+        primary1000: any;
+        primary1100: any;
+        primary1200: any;
     };
     space: {
         "0": any;

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,{bg:"white",color:"$tonal400",border:"1px solid $tonal200",cursor:"pointer","&::before":{background:"$tonal200"},"&:not([disabled])":{'&:hover, &:focus-visible, &[data-state="on"]':{"&::before":{background:"none"}},"&:hover":{borderColor:"currentColor !important",color:"$primaryMid"},"&:focus-visible":{...o(),'&[data-state="off"]':{borderColor:"$tonal200 !important"},'&[data-state="on"]':{boxShadow:`inset currentColor 0px 0px 0px 1px, ${o().boxShadow}`}}},"&[disabled]":{opacity:.3,cursor:"not-allowed"},'&[data-state="on"]':{color:"$primary",borderColor:"currentColor !important",boxShadow:"inset currentColor 0px 0px 0px 1px"}}),a=r;export{r as StyledItem,a as ToggleGroupItem};
+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,{bg:"white",color:"$tonal400",border:"1px solid $tonal200",cursor:"pointer","&::before":{background:"$tonal200"},"&:not([disabled])":{'&:hover, &:focus-visible, &[data-state="on"]':{"&::before":{background:"none"}},"&:hover":{borderColor:"currentColor !important",color:"$primary900"},"&:focus-visible":{...o(),'&[data-state="off"]':{borderColor:"$tonal200 !important"},'&[data-state="on"]':{boxShadow:`inset currentColor 0px 0px 0px 1px, ${o().boxShadow}`}}},"&[disabled]":{opacity:.3,cursor:"not-allowed"},'&[data-state="on"]':{color:"$primary800",borderColor:"currentColor !important",boxShadow:"inset currentColor 0px 0px 0px 1px"}}),a=r;export{r as StyledItem,a 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  bg: 'white',\n  color: '$tonal400',\n  border: '1px solid $tonal200',\n  cursor: 'pointer',\n  '&::before': {\n    background: '$tonal200'\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: '$primaryMid'\n    },\n    '&:focus-visible': {\n      ...focusVisibleStyleBlock(),\n      '&[data-state=\"off\"]': {\n        borderColor: '$tonal200 !important'\n      },\n      '&[data-state=\"on\"]': {\n        boxShadow: `inset currentColor 0px 0px 0px 1px, ${\n          focusVisibleStyleBlock().boxShadow\n        }`\n      }\n    }\n  },\n  '&[disabled]': {\n    opacity: 0.3,\n    cursor: 'not-allowed'\n  },\n  '&[data-state=\"on\"]': {\n    color: '$primary',\n    borderColor: 'currentColor !important',\n    boxShadow: 'inset currentColor 0px 0px 0px 1px'\n  }\n})\n\nexport const ToggleGroupItem = StyledItem\n"],"names":["StyledItem","styled","ToggleGroup","focusVisibleStyleBlock","ToggleGroupItem"],"mappings":"8WAKO,MAAMA,EAAaC,EAAOC,EAAY,KAAM,CACjD,GAAI,QACJ,MAAO,YACP,OAAQ,sBACR,OAAQ,UACR,YAAa,CACX,WAAY,WACd,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,sBACf,EACA,qBAAsB,CACpB,UAAW,uCACTA,IAAyB,WAE7B,CACF,CACF,EACA,cAAe,CACb,QAAS,GACT,OAAQ,aACV,EACA,qBAAsB,CACpB,MAAO,WACP,YAAa,0BACb,UAAW,oCACb,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'\nimport { focusVisibleStyleBlock } from '~/utilities'\n\nexport const StyledItem = styled(ToggleGroup.Item, {\n  bg: 'white',\n  color: '$tonal400',\n  border: '1px solid $tonal200',\n  cursor: 'pointer',\n  '&::before': {\n    background: '$tonal200'\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: '$tonal200 !important'\n      },\n      '&[data-state=\"on\"]': {\n        boxShadow: `inset currentColor 0px 0px 0px 1px, ${\n          focusVisibleStyleBlock().boxShadow\n        }`\n      }\n    }\n  },\n  '&[disabled]': {\n    opacity: 0.3,\n    cursor: 'not-allowed'\n  },\n  '&[data-state=\"on\"]': {\n    color: '$primary800',\n    borderColor: 'currentColor !important',\n    boxShadow: 'inset currentColor 0px 0px 0px 1px'\n  }\n})\n\nexport const ToggleGroupItem = StyledItem\n"],"names":["StyledItem","styled","ToggleGroup","focusVisibleStyleBlock","ToggleGroupItem"],"mappings":"8WAKO,MAAMA,EAAaC,EAAOC,EAAY,KAAM,CACjD,GAAI,QACJ,MAAO,YACP,OAAQ,sBACR,OAAQ,UACR,YAAa,CACX,WAAY,WACd,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,sBACf,EACA,qBAAsB,CACpB,UAAW,uCACTA,IAAyB,WAE7B,CACF,CACF,EACA,cAAe,CACb,QAAS,GACT,OAAQ,aACV,EACA,qBAAsB,CACpB,MAAO,cACP,YAAa,0BACb,UAAW,oCACb,CACF,CAAC,EAEYC,EAAkBJ"}

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

@@ -28,9 +28,10 @@ export declare const StyledRoot: import("@stitches/react/types/styled-component"
     hover: string;
 }, {
     colors: {
-        textForeground: any;
+        textBold: any;
+        textRegular: any;
         textSubtle: any;
-        textPlaceholder: any;
+        textMinimal: any;
         background: any;
         backgroundAccent: any;
         grey100: any;
@@ -177,11 +178,6 @@ export declare const StyledRoot: import("@stitches/react/types/styled-component"
         alpha200: any;
         alpha250: any;
         alpha600: any;
-        primaryLight: any;
-        primary: any;
-        primaryMid: any;
-        primaryDark: any;
-        secondary: any;
         brandRed: any;
         brandRedAccent: any;
         brandGreen: any;
@@ -190,6 +186,10 @@ export declare const StyledRoot: import("@stitches/react/types/styled-component"
         brandPurpleAccent: any;
         brandYellow: any;
         brandYellowAccent: any;
+        infoLight: any;
+        info: any;
+        infoMid: any;
+        infoDark: any;
         successLight: any;
         success: any;
         successMid: any;
@@ -213,6 +213,18 @@ export declare const StyledRoot: import("@stitches/react/types/styled-component"
         glBlueLight: any;
         glBluePrimary: any;
         glBlueDark: any;
+        primary100: any;
+        primary200: any;
+        primary300: any;
+        primary400: any;
+        primary500: any;
+        primary600: any;
+        primary700: any;
+        primary800: any;
+        primary900: any;
+        primary1000: any;
+        primary1100: any;
+        primary1200: any;
     };
     space: {
         "0": any;