@lets-events/react 12.4.1 → 12.5.0

package/src/components/ButtonGroup.tsx

@@ -1,485 +1,485 @@
-import { ComponentProps } from "react";
-import { styled } from "../styles";
-import { Button, Flex } from "@radix-ui/themes";
-
-export const ButtonItemStyled = styled(Button, {
-  fontFamily: '$default',
-  letterSpacing: 0,
-  border: 0,
-  transition: 'all 300ms ease-out',
-  cursor: 'pointer',
-  boxSizing: 'border-box',
-  variants: {
-    active: {
-      true: {
-      },
-    }
-  },
-});
-
-export const ButtonGroupStyled = styled(Flex, {
-  display: 'flex',
-  borderRadius: '$md',
-  overflow: 'hidden',
-  variants: {
-    color: {
-      brand: {},
-      neutral: {},
-      purple: {},
-      green: {},
-      blue: {},
-      red: {},
-    },
-    variant: {
-      text: {
-        [`& ${ButtonItemStyled}`]: {
-          backgroundColor: 'transparent',
-          boxShadow: 'none',
-          padding: 0,
-          border: 0,
-        },
-      },
-      contained: {
-        [`& ${ButtonItemStyled}`]: {
-          borderWidth: '1px',
-          borderStyle: 'solid',
-          '&:disabled': {
-            boxShadow: 'none',
-          }
-        }
-      },
-      outlined: {
-        [`& ${ButtonItemStyled}`]: {
-          borderWidth: '1px',
-          borderStyle: 'solid',
-          '&:disabled': {
-            color: '$neutral400',
-          }
-        }
-      },
-    },
-    typography: {
-      buttonLarge: {
-        [`& ${ButtonItemStyled}`]: {
-          padding: '$13 $20',
-          fontSize: '$buttonLarge',
-          lineHeight: '$buttonLarge',
-          '&:not(:first-child)': {
-            borderLeft: 'none',
-          },
-          '&:first-child': {
-            borderTopLeftRadius: '$lg',
-            borderBottomLeftRadius: '$lg',
-          },
-          '&:last-child': {
-            borderTopRightRadius: '$lg',
-            borderBottomRightRadius: '$lg',
-          },
-        }
-      },
-      buttonMedium: {
-        [`& ${ButtonItemStyled}`]: {
-          padding: '$12 $16',
-          fontSize: '$buttonMedium',
-          lineHeight: '$buttonMedium',
-          '&:not(:first-child)': {
-            borderLeft: 'none',
-          },
-          '&:first-child': {
-            borderTopLeftRadius: '$md',
-            borderBottomLeftRadius: '$md',
-          },
-          '&:last-child': {
-            borderTopRightRadius: '$md',
-            borderBottomRightRadius: '$md',
-          },
-        }
-      },
-      buttonSmall: {
-        [`& ${ButtonItemStyled}`]: {
-          padding: '$8 $14',
-          fontSize: '$buttonSmall',
-          lineHeight: '$buttonSmall',
-          '&:not(:first-child)': {
-            borderLeft: 'none',
-          },
-          '&:first-child': {
-            borderTopLeftRadius: '$sm',
-            borderBottomLeftRadius: '$sm',
-          },
-          '&:last-child': {
-            borderTopRightRadius: '$sm',
-            borderBottomRightRadius: '$sm',
-          },
-        }
-      },
-      buttonExtraSmall: {
-        [`& ${ButtonItemStyled}`]: {
-          padding: '$6 $12',
-          fontSize: '$buttonExtraSmall',
-          lineHeight: '$buttonExtraSmall',
-          '&:not(:first-child)': {
-            borderLeft: 'none',
-          },
-          '&:first-child': {
-            borderTopLeftRadius: '$xs',
-            borderBottomLeftRadius: '$xs',
-          },
-          '&:last-child': {
-            borderTopRightRadius: '$xs',
-            borderBottomRightRadius: '$xs',
-          },
-        }
-      },
-    },
-    fontWeight: {
-      regular: { [`& ${ButtonItemStyled}`]: { fontWeight: '$regular' } },
-      medium: { [`& ${ButtonItemStyled}`]: { fontWeight: '$medium' } },
-      semibold: { [`& ${ButtonItemStyled}`]: { fontWeight: '$semibold' } },
-      bold: { [`& ${ButtonItemStyled}`]: { fontWeight: '$bold' } },
-    },
-  },
-
-  compoundVariants: [
-    // text
-    {
-      variant: 'text',
-      color: 'brand',
-      css: {
-        [`& ${ButtonItemStyled}`]: {
-          color: '$brand500',
-          '&:hover': { color: '$brand600' },
-          '&:focus': { color: '$brand700' },
-          '&:active': { color: '$brand500' },
-          '&:disabled': { color: '$dark400' },
-        },
-        [`& ${ButtonItemStyled}.active`]: {
-          color: '$brand700',
-          '&:hover': { color: '$brand700' },
-          '&:focus': { color: '$brand700' },
-          '&:active': { color: '$brand700' },
-        },
-      }
-    },
-    {
-      variant: 'text',
-      color: 'neutral',
-      css: {
-        [`& ${ButtonItemStyled}`]: {
-          color: '$neutral600',
-          '&:hover': { color: '$neutral700' },
-          '&:focus': { color: '$neutral800' },
-          '&:active': { color: '$neutral500' },
-          '&:disabled': { color: '$dark400' },
-        },
-        [`& ${ButtonItemStyled}.active`]: {
-          color: '$neutral800',
-          '&:hover': { color: '$neutral800' },
-          '&:focus': { color: '$neutral800' },
-          '&:active': { color: '$neutral800' },
-        },
-      }
-    },
-    {
-      variant: 'text',
-      color: 'purple',
-      css: {
-        [`& ${ButtonItemStyled}`]: {
-          color: '$purple500',
-          '&:hover': { color: '$purple600' },
-          '&:focus': { color: '$purple700' },
-          '&:active': { color: '$purple500' },
-          '&:disabled': { color: '$dark400' },
-        },
-        [`& ${ButtonItemStyled}.active`]: {
-          color: '$purple700',
-          '&:hover': { color: '$purple700' },
-          '&:focus': { color: '$purple700' },
-          '&:active': { color: '$purple700' },
-        },
-      }
-    },
-    {
-      variant: 'text',
-      color: 'green',
-      css: {
-        [`& ${ButtonItemStyled}`]: {
-          color: '$green500',
-          '&:hover': { color: '$green600' },
-          '&:focus': { color: '$green700' },
-          '&:active': { color: '$green500' },
-          '&:disabled': { color: '$dark400' },
-        },
-        [`& ${ButtonItemStyled}.active`]: {
-          color: '$green700',
-          '&:hover': { color: '$green700' },
-          '&:focus': { color: '$green700' },
-          '&:active': { color: '$green700' },
-        },
-      }
-    },
-    {
-      variant: 'text',
-      color: 'blue',
-      css: {
-        [`& ${ButtonItemStyled}`]: {
-          color: '$blue500',
-          '&:hover': { color: '$blue600' },
-          '&:focus': { color: '$blue700' },
-          '&:active': { color: '$blue500' },
-          '&:disabled': { color: '$dark400' },
-        },
-        [`& ${ButtonItemStyled}.active`]: {
-          color: '$blue700',
-          '&:hover': { color: '$blue700' },
-          '&:focus': { color: '$blue700' },
-          '&:active': { color: '$blue700' },
-        },
-      }
-    },
-    {
-      variant: 'text',
-      color: 'red',
-      css: {
-        [`& ${ButtonItemStyled}`]: {
-          color: '$red500',
-          '&:hover': { color: '$red600' },
-          '&:focus': { color: '$red700' },
-          '&:active': { color: '$red500' },
-          '&:disabled': { color: '$dark400' },
-        },
-        [`& ${ButtonItemStyled}.active`]: {
-          color: '$red700',
-          '&:hover': { color: '$red700' },
-          '&:focus': { color: '$red700' },
-          '&:active': { color: '$red700' },
-        },
-      }
-    },
-
-    // contained
-    {
-      variant: 'contained',
-      color: 'brand',
-      css: {
-        [`& ${ButtonItemStyled}`]: {
-          color: '$grey50',
-          backgroundColor: '$brand500',
-          borderColor: '$brand500',
-          '&:hover': {
-            backgroundColor: '$blue600',
-          },
-          '&:focus': {
-            backgroundColor: '$blue700',
-          },
-          '&:active': {
-            backgroundColor: '$blue500',
-          },
-          '&:disabled': {
-            backgroundColor: '$brand50',
-            color: '$neutral400',
-          }
-        },
-        [`& ${ButtonItemStyled}.active`]: {
-          backgroundColor: '$brand700',
-          '&:hover': { backgroundColor: '$brand700' },
-          '&:focus': { backgroundColor: '$brand700' },
-          '&:active': { backgroundColor: '$brand700' },
-        },
-      }
-    },
-    {
-      variant: 'contained',
-      color: 'neutral',
-      css: {
-        [`& ${ButtonItemStyled}`]: {
-          backgroundColor: '$neutral600',
-          color: '$grey50',
-          '&:hover': {
-            backgroundColor: '$neutral700',
-            borderColor: '$neutral800',
-          },
-          '&:focus': {
-            backgroundColor: '$neutral800',
-          },
-          '&:active': {
-            backgroundColor: '$neutral500',
-            borderColor: '$neutral400',
-          },
-          '&:disabled': {
-            backgroundColor: '$neutral50',
-            borderColor: '$neutral200',
-            color: '$neutral400',
-          }
-        },
-        [`& ${ButtonItemStyled}.active`]: {
-          backgroundColor: '$neutral800',
-          '&:hover': { backgroundColor: '$neutral800' },
-          '&:focus': { backgroundColor: '$neutral800' },
-          '&:active': { backgroundColor: '$neutral800' },
-        },
-      }
-    },
-    {
-      variant: 'contained',
-      color: 'purple',
-      css: {
-        [`& ${ButtonItemStyled}`]: {
-          backgroundColor: '$purple500',
-          color: '$grey50',
-          '&:hover': {
-            backgroundColor: '$purple600',
-            borderColor: '$purple700',
-          },
-          '&:focus': {
-            backgroundColor: '$purple700',
-          },
-          '&:active': {
-            borderColor: '$purple300',
-            backgroundColor: '$purple500',
-          },
-          '&:disabled': {
-            borderColor: '$purple200',
-            backgroundColor: '$purple200',
-            color: '$neutral400',
-          }
-        },
-        [`& ${ButtonItemStyled}.active`]: {
-          backgroundColor: '$purple700',
-          '&:hover': { backgroundColor: '$purple700' },
-          '&:focus': { backgroundColor: '$purple700' },
-          '&:active': { backgroundColor: '$purple700' },
-        },
-      }
-    },
-    // outlined
-    {
-      variant: 'outlined',
-      color: 'brand',
-      css: {
-        [`& ${ButtonItemStyled}`]: {
-          color: '$brand500',
-          borderColor: '$brand300',
-          backgroundColor: '$grey50',
-          '&:hover': {
-            borderColor: '$brand400',
-            backgroundColor: '$brand50',
-          },
-          '&:focus': {
-            borderColor: '$brand400',
-            backgroundColor: '$brand50',
-          },
-          '&:active': {
-            borderColor: '$brand300',
-            backgroundColor: '$grey50',
-          },
-          '&:disabled': {
-            borderColor: '$brand200',
-            backgroundColor: '$neutral200',
-            color: '$neutral400',
-          }
-        },
-        [`& ${ButtonItemStyled}.active`]: {
-          color: '$brand700',
-          borderColor: '$brand600',
-          backgroundColor: '$brand50',
-          '&:hover': { backgroundColor: '$brand50', borderColor: '$brand600' },
-          '&:focus': { backgroundColor: '$brand50', borderColor: '$brand600' },
-          '&:active': { backgroundColor: '$brand50', borderColor: '$brand600' },
-        },
-      }
-    },
-    {
-      variant: 'outlined',
-      color: 'neutral',
-      css: {
-        [`& ${ButtonItemStyled}`]: {
-          color: '$neutral600',
-          borderColor: '$neutral300',
-          backgroundColor: '$grey50',
-          '&:hover': {
-            borderColor: '$neutral400',
-            backgroundColor: '$grey100',
-          },
-          '&:focus': {
-            borderColor: '$neutral400',
-            backgroundColor: '$grey100',
-          },
-          '&:active': {
-            borderColor: '$neutral300',
-            backgroundColor: '$grey50',
-          },
-          '&:disabled': {
-            borderColor: '$neutral200',
-            backgroundColor: '$neutral200',
-            color: '$neutral400',
-          }
-        },
-        [`& ${ButtonItemStyled}.active`]: {
-          color: '$neutral800',
-          borderColor: '$neutral600',
-          backgroundColor: '$grey100',
-          '&:hover': { backgroundColor: '$grey100', borderColor: '$neutral600' },
-          '&:focus': { backgroundColor: '$grey100', borderColor: '$neutral600' },
-          '&:active': { backgroundColor: '$grey100', borderColor: '$neutral600' },
-        },
-      }
-    },
-    {
-      variant: 'outlined',
-      color: 'purple',
-      css: {
-        [`& ${ButtonItemStyled}`]: {
-          color: '$purple500',
-          borderColor: '$purple300',
-          backgroundColor: '$grey50',
-          '&:hover': {
-            borderColor: '$purple400',
-            backgroundColor: '$purple50',
-          },
-          '&:focus': {
-            borderColor: '$purple400',
-            backgroundColor: '$purple50',
-          },
-          '&:active': {
-            borderColor: '$purple300',
-            backgroundColor: '$grey50',
-          },
-          '&:disabled': {
-            borderColor: '$purple200',
-            backgroundColor: '$neutral200',
-            color: '$neutral400',
-          }
-        },
-        [`& ${ButtonItemStyled}.active`]: {
-          color: '$purple700',
-          borderColor: '$purple600',
-          backgroundColor: '$purple50',
-          '&:hover': { backgroundColor: '$purple50', borderColor: '$purple600' },
-          '&:focus': { backgroundColor: '$purple50', borderColor: '$purple600' },
-          '&:active': { backgroundColor: '$purple50', borderColor: '$purple600' },
-        },
-      }
-    },
-
-  ],
-
-  defaultVariants: {
-    variant: 'contained',
-    typography: 'buttonMedium',
-    fontWeight: 'medium',
-    color: 'brand',
-  }
-});
-
-export interface ButtonItemProps extends ComponentProps<typeof ButtonItemStyled> { }
-
-export type ButtonGroupProps = ComponentProps<typeof ButtonGroupStyled>
-
-export function ButtonItem({ children, active, ...props }: ButtonItemProps) {
-  return <ButtonItemStyled className={active ? 'active' : ''} {...props}>{children}</ButtonItemStyled>;
-}
-
-export function ButtonGroup({ children, ...props }: ButtonGroupProps) {
-  return <ButtonGroupStyled {...props}>{children}</ButtonGroupStyled>;
+import { ComponentProps } from "react";
+import { styled } from "../styles";
+import { Button, Flex } from "@radix-ui/themes";
+
+export const ButtonItemStyled = styled(Button, {
+  fontFamily: '$default',
+  letterSpacing: 0,
+  border: 0,
+  transition: 'all 300ms ease-out',
+  cursor: 'pointer',
+  boxSizing: 'border-box',
+  variants: {
+    active: {
+      true: {
+      },
+    }
+  },
+});
+
+export const ButtonGroupStyled = styled(Flex, {
+  display: 'flex',
+  borderRadius: '$md',
+  overflow: 'hidden',
+  variants: {
+    color: {
+      brand: {},
+      neutral: {},
+      purple: {},
+      green: {},
+      blue: {},
+      red: {},
+    },
+    variant: {
+      text: {
+        [`& ${ButtonItemStyled}`]: {
+          backgroundColor: 'transparent',
+          boxShadow: 'none',
+          padding: 0,
+          border: 0,
+        },
+      },
+      contained: {
+        [`& ${ButtonItemStyled}`]: {
+          borderWidth: '1px',
+          borderStyle: 'solid',
+          '&:disabled': {
+            boxShadow: 'none',
+          }
+        }
+      },
+      outlined: {
+        [`& ${ButtonItemStyled}`]: {
+          borderWidth: '1px',
+          borderStyle: 'solid',
+          '&:disabled': {
+            color: '$neutral400',
+          }
+        }
+      },
+    },
+    typography: {
+      buttonLarge: {
+        [`& ${ButtonItemStyled}`]: {
+          padding: '$13 $20',
+          fontSize: '$buttonLarge',
+          lineHeight: '$buttonLarge',
+          '&:not(:first-child)': {
+            borderLeft: 'none',
+          },
+          '&:first-child': {
+            borderTopLeftRadius: '$lg',
+            borderBottomLeftRadius: '$lg',
+          },
+          '&:last-child': {
+            borderTopRightRadius: '$lg',
+            borderBottomRightRadius: '$lg',
+          },
+        }
+      },
+      buttonMedium: {
+        [`& ${ButtonItemStyled}`]: {
+          padding: '$12 $16',
+          fontSize: '$buttonMedium',
+          lineHeight: '$buttonMedium',
+          '&:not(:first-child)': {
+            borderLeft: 'none',
+          },
+          '&:first-child': {
+            borderTopLeftRadius: '$md',
+            borderBottomLeftRadius: '$md',
+          },
+          '&:last-child': {
+            borderTopRightRadius: '$md',
+            borderBottomRightRadius: '$md',
+          },
+        }
+      },
+      buttonSmall: {
+        [`& ${ButtonItemStyled}`]: {
+          padding: '$8 $14',
+          fontSize: '$buttonSmall',
+          lineHeight: '$buttonSmall',
+          '&:not(:first-child)': {
+            borderLeft: 'none',
+          },
+          '&:first-child': {
+            borderTopLeftRadius: '$sm',
+            borderBottomLeftRadius: '$sm',
+          },
+          '&:last-child': {
+            borderTopRightRadius: '$sm',
+            borderBottomRightRadius: '$sm',
+          },
+        }
+      },
+      buttonExtraSmall: {
+        [`& ${ButtonItemStyled}`]: {
+          padding: '$6 $12',
+          fontSize: '$buttonExtraSmall',
+          lineHeight: '$buttonExtraSmall',
+          '&:not(:first-child)': {
+            borderLeft: 'none',
+          },
+          '&:first-child': {
+            borderTopLeftRadius: '$xs',
+            borderBottomLeftRadius: '$xs',
+          },
+          '&:last-child': {
+            borderTopRightRadius: '$xs',
+            borderBottomRightRadius: '$xs',
+          },
+        }
+      },
+    },
+    fontWeight: {
+      regular: { [`& ${ButtonItemStyled}`]: { fontWeight: '$regular' } },
+      medium: { [`& ${ButtonItemStyled}`]: { fontWeight: '$medium' } },
+      semibold: { [`& ${ButtonItemStyled}`]: { fontWeight: '$semibold' } },
+      bold: { [`& ${ButtonItemStyled}`]: { fontWeight: '$bold' } },
+    },
+  },
+
+  compoundVariants: [
+    // text
+    {
+      variant: 'text',
+      color: 'brand',
+      css: {
+        [`& ${ButtonItemStyled}`]: {
+          color: '$brand500',
+          '&:hover': { color: '$brand600' },
+          '&:focus': { color: '$brand700' },
+          '&:active': { color: '$brand500' },
+          '&:disabled': { color: '$dark400' },
+        },
+        [`& ${ButtonItemStyled}.active`]: {
+          color: '$brand700',
+          '&:hover': { color: '$brand700' },
+          '&:focus': { color: '$brand700' },
+          '&:active': { color: '$brand700' },
+        },
+      }
+    },
+    {
+      variant: 'text',
+      color: 'neutral',
+      css: {
+        [`& ${ButtonItemStyled}`]: {
+          color: '$neutral600',
+          '&:hover': { color: '$neutral700' },
+          '&:focus': { color: '$neutral800' },
+          '&:active': { color: '$neutral500' },
+          '&:disabled': { color: '$dark400' },
+        },
+        [`& ${ButtonItemStyled}.active`]: {
+          color: '$neutral800',
+          '&:hover': { color: '$neutral800' },
+          '&:focus': { color: '$neutral800' },
+          '&:active': { color: '$neutral800' },
+        },
+      }
+    },
+    {
+      variant: 'text',
+      color: 'purple',
+      css: {
+        [`& ${ButtonItemStyled}`]: {
+          color: '$purple500',
+          '&:hover': { color: '$purple600' },
+          '&:focus': { color: '$purple700' },
+          '&:active': { color: '$purple500' },
+          '&:disabled': { color: '$dark400' },
+        },
+        [`& ${ButtonItemStyled}.active`]: {
+          color: '$purple700',
+          '&:hover': { color: '$purple700' },
+          '&:focus': { color: '$purple700' },
+          '&:active': { color: '$purple700' },
+        },
+      }
+    },
+    {
+      variant: 'text',
+      color: 'green',
+      css: {
+        [`& ${ButtonItemStyled}`]: {
+          color: '$green500',
+          '&:hover': { color: '$green600' },
+          '&:focus': { color: '$green700' },
+          '&:active': { color: '$green500' },
+          '&:disabled': { color: '$dark400' },
+        },
+        [`& ${ButtonItemStyled}.active`]: {
+          color: '$green700',
+          '&:hover': { color: '$green700' },
+          '&:focus': { color: '$green700' },
+          '&:active': { color: '$green700' },
+        },
+      }
+    },
+    {
+      variant: 'text',
+      color: 'blue',
+      css: {
+        [`& ${ButtonItemStyled}`]: {
+          color: '$blue500',
+          '&:hover': { color: '$blue600' },
+          '&:focus': { color: '$blue700' },
+          '&:active': { color: '$blue500' },
+          '&:disabled': { color: '$dark400' },
+        },
+        [`& ${ButtonItemStyled}.active`]: {
+          color: '$blue700',
+          '&:hover': { color: '$blue700' },
+          '&:focus': { color: '$blue700' },
+          '&:active': { color: '$blue700' },
+        },
+      }
+    },
+    {
+      variant: 'text',
+      color: 'red',
+      css: {
+        [`& ${ButtonItemStyled}`]: {
+          color: '$red500',
+          '&:hover': { color: '$red600' },
+          '&:focus': { color: '$red700' },
+          '&:active': { color: '$red500' },
+          '&:disabled': { color: '$dark400' },
+        },
+        [`& ${ButtonItemStyled}.active`]: {
+          color: '$red700',
+          '&:hover': { color: '$red700' },
+          '&:focus': { color: '$red700' },
+          '&:active': { color: '$red700' },
+        },
+      }
+    },
+
+    // contained
+    {
+      variant: 'contained',
+      color: 'brand',
+      css: {
+        [`& ${ButtonItemStyled}`]: {
+          color: '$grey50',
+          backgroundColor: '$brand500',
+          borderColor: '$brand500',
+          '&:hover': {
+            backgroundColor: '$blue600',
+          },
+          '&:focus': {
+            backgroundColor: '$blue700',
+          },
+          '&:active': {
+            backgroundColor: '$blue500',
+          },
+          '&:disabled': {
+            backgroundColor: '$brand50',
+            color: '$neutral400',
+          }
+        },
+        [`& ${ButtonItemStyled}.active`]: {
+          backgroundColor: '$brand700',
+          '&:hover': { backgroundColor: '$brand700' },
+          '&:focus': { backgroundColor: '$brand700' },
+          '&:active': { backgroundColor: '$brand700' },
+        },
+      }
+    },
+    {
+      variant: 'contained',
+      color: 'neutral',
+      css: {
+        [`& ${ButtonItemStyled}`]: {
+          backgroundColor: '$neutral600',
+          color: '$grey50',
+          '&:hover': {
+            backgroundColor: '$neutral700',
+            borderColor: '$neutral800',
+          },
+          '&:focus': {
+            backgroundColor: '$neutral800',
+          },
+          '&:active': {
+            backgroundColor: '$neutral500',
+            borderColor: '$neutral400',
+          },
+          '&:disabled': {
+            backgroundColor: '$neutral50',
+            borderColor: '$neutral200',
+            color: '$neutral400',
+          }
+        },
+        [`& ${ButtonItemStyled}.active`]: {
+          backgroundColor: '$neutral800',
+          '&:hover': { backgroundColor: '$neutral800' },
+          '&:focus': { backgroundColor: '$neutral800' },
+          '&:active': { backgroundColor: '$neutral800' },
+        },
+      }
+    },
+    {
+      variant: 'contained',
+      color: 'purple',
+      css: {
+        [`& ${ButtonItemStyled}`]: {
+          backgroundColor: '$purple500',
+          color: '$grey50',
+          '&:hover': {
+            backgroundColor: '$purple600',
+            borderColor: '$purple700',
+          },
+          '&:focus': {
+            backgroundColor: '$purple700',
+          },
+          '&:active': {
+            borderColor: '$purple300',
+            backgroundColor: '$purple500',
+          },
+          '&:disabled': {
+            borderColor: '$purple200',
+            backgroundColor: '$purple200',
+            color: '$neutral400',
+          }
+        },
+        [`& ${ButtonItemStyled}.active`]: {
+          backgroundColor: '$purple700',
+          '&:hover': { backgroundColor: '$purple700' },
+          '&:focus': { backgroundColor: '$purple700' },
+          '&:active': { backgroundColor: '$purple700' },
+        },
+      }
+    },
+    // outlined
+    {
+      variant: 'outlined',
+      color: 'brand',
+      css: {
+        [`& ${ButtonItemStyled}`]: {
+          color: '$brand500',
+          borderColor: '$brand300',
+          backgroundColor: '$grey50',
+          '&:hover': {
+            borderColor: '$brand400',
+            backgroundColor: '$brand50',
+          },
+          '&:focus': {
+            borderColor: '$brand400',
+            backgroundColor: '$brand50',
+          },
+          '&:active': {
+            borderColor: '$brand300',
+            backgroundColor: '$grey50',
+          },
+          '&:disabled': {
+            borderColor: '$brand200',
+            backgroundColor: '$neutral200',
+            color: '$neutral400',
+          }
+        },
+        [`& ${ButtonItemStyled}.active`]: {
+          color: '$brand700',
+          borderColor: '$brand600',
+          backgroundColor: '$brand50',
+          '&:hover': { backgroundColor: '$brand50', borderColor: '$brand600' },
+          '&:focus': { backgroundColor: '$brand50', borderColor: '$brand600' },
+          '&:active': { backgroundColor: '$brand50', borderColor: '$brand600' },
+        },
+      }
+    },
+    {
+      variant: 'outlined',
+      color: 'neutral',
+      css: {
+        [`& ${ButtonItemStyled}`]: {
+          color: '$neutral600',
+          borderColor: '$neutral300',
+          backgroundColor: '$grey50',
+          '&:hover': {
+            borderColor: '$neutral400',
+            backgroundColor: '$grey100',
+          },
+          '&:focus': {
+            borderColor: '$neutral400',
+            backgroundColor: '$grey100',
+          },
+          '&:active': {
+            borderColor: '$neutral300',
+            backgroundColor: '$grey50',
+          },
+          '&:disabled': {
+            borderColor: '$neutral200',
+            backgroundColor: '$neutral200',
+            color: '$neutral400',
+          }
+        },
+        [`& ${ButtonItemStyled}.active`]: {
+          color: '$neutral800',
+          borderColor: '$neutral600',
+          backgroundColor: '$grey100',
+          '&:hover': { backgroundColor: '$grey100', borderColor: '$neutral600' },
+          '&:focus': { backgroundColor: '$grey100', borderColor: '$neutral600' },
+          '&:active': { backgroundColor: '$grey100', borderColor: '$neutral600' },
+        },
+      }
+    },
+    {
+      variant: 'outlined',
+      color: 'purple',
+      css: {
+        [`& ${ButtonItemStyled}`]: {
+          color: '$purple500',
+          borderColor: '$purple300',
+          backgroundColor: '$grey50',
+          '&:hover': {
+            borderColor: '$purple400',
+            backgroundColor: '$purple50',
+          },
+          '&:focus': {
+            borderColor: '$purple400',
+            backgroundColor: '$purple50',
+          },
+          '&:active': {
+            borderColor: '$purple300',
+            backgroundColor: '$grey50',
+          },
+          '&:disabled': {
+            borderColor: '$purple200',
+            backgroundColor: '$neutral200',
+            color: '$neutral400',
+          }
+        },
+        [`& ${ButtonItemStyled}.active`]: {
+          color: '$purple700',
+          borderColor: '$purple600',
+          backgroundColor: '$purple50',
+          '&:hover': { backgroundColor: '$purple50', borderColor: '$purple600' },
+          '&:focus': { backgroundColor: '$purple50', borderColor: '$purple600' },
+          '&:active': { backgroundColor: '$purple50', borderColor: '$purple600' },
+        },
+      }
+    },
+
+  ],
+
+  defaultVariants: {
+    variant: 'contained',
+    typography: 'buttonMedium',
+    fontWeight: 'medium',
+    color: 'brand',
+  }
+});
+
+export interface ButtonItemProps extends ComponentProps<typeof ButtonItemStyled> { }
+
+export type ButtonGroupProps = ComponentProps<typeof ButtonGroupStyled>
+
+export function ButtonItem({ children, active, ...props }: ButtonItemProps) {
+  return <ButtonItemStyled className={active ? 'active' : ''} {...props}>{children}</ButtonItemStyled>;
+}
+
+export function ButtonGroup({ children, ...props }: ButtonGroupProps) {
+  return <ButtonGroupStyled {...props}>{children}</ButtonGroupStyled>;
 }