@teamturing/react-kit 2.0.0 → 2.1.0

package/dist/core/GradientText/index.d.ts

@@ -274,7 +274,7 @@ declare const GradientText: import("styled-components").IStyledComponent<"web",
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
 } & {
     typography?: import("styled-system").ResponsiveValue<"s" | "m" | "xxs" | "xs" | "l" | "xl" | "xxl" | "display1" | "display2" | "display3" | "display4" | "xxl/regular" | "xxl/bold" | "xl/regular" | "xl/bold" | "l/regular" | "l/bold" | "m/regular" | "m/bold" | "s/regular" | "s/bold" | "xs/regular" | "xs/bold" | "xxs/regular" | "xxs/bold"> | undefined;
-} & import("../../utils/styled-system").SxProp & import("../../utils/styled-system").WordBreakProps & import("../../utils/styled-system").WhiteSpaceProps & import("../../utils/styled-system").TextDecorationProps & import("styled-system").FontSizeProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "s" | "m" | "xxs" | "xs" | "l" | "xl" | "xxl" | "display1" | "display2" | "display3" | "display4"> & import("styled-system").FontWeightProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "bold" | "medium" | "regular"> & import("styled-system").LineHeightProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, 2 | 1> & import("styled-system").TextAlignProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "link" | "icon/neutral" | "scale/violet/0" | "scale/violet/1" | "scale/violet/2" | "scale/violet/3" | "scale/violet/4" | "scale/violet/5" | "scale/violet/6" | "scale/violet/7" | "scale/violet/8" | "scale/violet/9" | "dim" | "link/hovered" | "link/pressed" | "link/neutral" | "link/neutral/hovered" | "link/neutral/pressed" | "link/neutral/bold" | "link/neutral/bold/hovered" | "link/neutral/bold/pressed" | "link/disabled" | "icon/neutral/bold" | "icon/neutral/bolder" | "icon/accent/gray" | "icon/accent/blue" | "icon/accent/blue/bold" | "icon/accent/green" | "icon/accent/yellow" | "icon/accent/red" | "icon/inverse" | "icon/disabled" | "icon/disabled/subtler" | "icon/selected/primary" | "icon/selected/neutral" | "icon/primary" | "icon/primary/subtle" | "icon/primary/bold" | "icon/success" | "icon/warning" | "icon/danger" | "border/neutral/subtle" | "border/neutral" | "border/neutral/bolder" | "border/input" | "border/inverse" | "border/disabled" | "border/primary" | "border/hovered" | "border/focused" | "border/danger" | "border/success" | "bg/secondary" | "bg/secondary/hovered" | "bg/secondary/pressed" | "bg/primary" | "bg/primary/hovered" | "bg/primary/pressed" | "bg/neutral/subtler" | "bg/neutral/subtler/hovered" | "bg/neutral/subtler/pressed" | "bg/neutral/subtle" | "bg/neutral/subtle/hovered" | "bg/neutral/subtle/pressed" | "bg/neutral" | "bg/neutral/hovered" | "bg/neutral/pressed" | "bg/neutral/bold" | "bg/neutral/bold/hovered" | "bg/neutral/bold/pressed" | "bg/neutral/bolder" | "bg/neutral/bolder/hovered" | "bg/neutral/bolder/pressed" | "bg/disabled" | "bg/disabled/subtlest" | "bg/input" | "bg/accent/green/subtlest" | "bg/accent/yellow/subtlest" | "bg/accent/red/subtlest" | "bg/accent/red/subtle" | "bg/accent/red" | "bg/accent/gray/subtlest" | "bg/accent/blue/subtlest" | "bg/selected/violet" | "bg/selected/neutral" | "bg/selected/neutral/subtle" | "bg/inverse" | "bg/inverse/subtlest" | "bg/success" | "bg/success/bold" | "bg/warning" | "bg/warning/bold" | "bg/danger" | "bg/danger/bold" | "bg/danger/bold/hovered" | "bg/danger/bold/pressed" | "text/primary" | "text/accent/blue" | "text/accent/green" | "text/accent/yellow" | "text/accent/red" | "text/neutral/subtlest" | "text/neutral/subtler" | "text/neutral/subtle" | "text/neutral" | "text/inverse" | "text/inverse/subtle" | "text/inverse/subtler" | "text/disabled" | "text/success" | "text/warning" | "text/danger" | "text/selected/neutral">, "ref"> & {
+} & import("../../utils/styled-system").SxProp & import("../../utils/styled-system").WordBreakProps & import("../../utils/styled-system").WhiteSpaceProps & import("../../utils/styled-system").TextDecorationProps & import("styled-system").FontSizeProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "s" | "m" | "xxs" | "xs" | "l" | "xl" | "xxl" | "display1" | "display2" | "display3" | "display4"> & import("styled-system").FontWeightProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "bold" | "medium" | "regular"> & import("styled-system").LineHeightProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, 2 | 1> & import("styled-system").TextAlignProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "link" | "icon/neutral" | "scale/violet/0" | "scale/violet/1" | "scale/violet/2" | "scale/violet/3" | "scale/violet/4" | "scale/violet/5" | "scale/violet/6" | "scale/violet/7" | "scale/violet/8" | "scale/violet/9" | "dim" | "link/hovered" | "link/pressed" | "link/neutral" | "link/neutral/hovered" | "link/neutral/pressed" | "link/neutral/bold" | "link/neutral/bold/hovered" | "link/neutral/bold/pressed" | "link/disabled" | "icon/neutral/bold" | "icon/neutral/bolder" | "icon/accent/gray" | "icon/accent/blue" | "icon/accent/blue/bold" | "icon/accent/green" | "icon/accent/yellow" | "icon/accent/red" | "icon/inverse" | "icon/disabled" | "icon/disabled/subtler" | "icon/selected/violet" | "icon/selected" | "icon/primary/subtle" | "icon/primary" | "icon/primary/bold" | "icon/success" | "icon/warning" | "icon/danger" | "border/neutral/subtle" | "border/neutral" | "border/neutral/bolder" | "border/input" | "border/inverse" | "border/selected" | "border/disabled" | "border/primary" | "border/hovered" | "border/focused" | "border/danger" | "border/success" | "bg/secondary" | "bg/secondary/hovered" | "bg/secondary/pressed" | "bg/primary" | "bg/primary/hovered" | "bg/primary/pressed" | "bg/neutral/subtler" | "bg/neutral/subtler/hovered" | "bg/neutral/subtler/pressed" | "bg/neutral/subtle" | "bg/neutral/subtle/hovered" | "bg/neutral/subtle/pressed" | "bg/neutral" | "bg/neutral/hovered" | "bg/neutral/pressed" | "bg/neutral/bold" | "bg/neutral/bold/hovered" | "bg/neutral/bold/pressed" | "bg/neutral/bolder" | "bg/neutral/bolder/hovered" | "bg/neutral/bolder/pressed" | "bg/disabled" | "bg/disabled/subtlest" | "bg/input" | "bg/accent/blue/subtlest" | "bg/accent/green/subtlest" | "bg/accent/yellow/subtlest" | "bg/accent/red/subtlest" | "bg/accent/red/subtle" | "bg/accent/red" | "bg/accent/gray/subtlest" | "bg/selected/violet" | "bg/selected" | "bg/selected/subtle" | "bg/inverse" | "bg/inverse/subtlest" | "bg/success" | "bg/success/bold" | "bg/warning" | "bg/warning/bold" | "bg/danger" | "bg/danger/bold" | "bg/danger/bold/hovered" | "bg/danger/bold/pressed" | "text/primary" | "text/accent/blue" | "text/accent/green" | "text/accent/yellow" | "text/accent/red" | "text/neutral/subtlest" | "text/neutral/subtler" | "text/neutral/subtle" | "text/neutral" | "text/inverse" | "text/inverse/subtle" | "text/inverse/subtler" | "text/disabled" | "text/success" | "text/warning" | "text/danger" | "text/selected">, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
 }, Props>>;
 export default GradientText;

package/dist/core/ThemeProvider/index.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+type Theme = {
+    [key in string]: any;
+};
+type Props = {
+    theme?: Theme;
+};
+declare const ThemeProvider: ({ theme: propTheme, ...props }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element;
+export default ThemeProvider;

package/dist/index.d.ts

@@ -27,6 +27,7 @@ export { default as StyledIcon } from './core/StyledIcon';
 export type { StyledIconProps } from './core/StyledIcon';
 export { default as Text } from './core/Text';
 export type { TextProps } from './core/Text';
+export { default as ThemeProvider } from './core/ThemeProvider';
 export { default as View } from './core/View';
 export type { ViewProps } from './core/View';
 export { default as UnstyledButton } from './core/_UnstyledButton';
@@ -43,3 +44,7 @@ export { default as useOutsideClick } from './hook/useOutsideClick';
 export { default as useProvidedOrCreatedRef } from './hook/useProvidedOrCreatedRef';
 export { default as useResize } from './hook/useResize';
 export { default as useToggleHandler } from './hook/useToggleHandler';
+/**
+ * theme
+ */
+export { default as theme } from './theme';

package/dist/index.js

@@ -141,7 +141,7 @@ const textColor = {
   'text/success': palette.green500,
   'text/warning': palette.yellow500,
   'text/danger': palette.red500,
-  'text/selected/neutral': palette.gray900
+  'text/selected': palette.gray900
 };
 const bgColor = {
   'bg/secondary': palette.violet50,
@@ -168,16 +168,16 @@ const bgColor = {
   'bg/disabled': palette.gray100,
   'bg/disabled/subtlest': palette.transparent,
   'bg/input': palette.white,
+  'bg/accent/blue/subtlest': palette.blue50,
   'bg/accent/green/subtlest': palette.green50,
   'bg/accent/yellow/subtlest': palette.yellow50,
   'bg/accent/red/subtlest': palette.red50,
   'bg/accent/red/subtle': palette.red400,
   'bg/accent/red': palette.red500,
   'bg/accent/gray/subtlest': palette.gray200,
-  'bg/accent/blue/subtlest': palette.blue50,
   'bg/selected/violet': palette.violet500,
-  'bg/selected/neutral': palette.gray900,
-  'bg/selected/neutral/subtle': palette.gray100,
+  'bg/selected': palette.gray900,
+  'bg/selected/subtle': palette.gray100,
   'bg/inverse': palette.black,
   'bg/inverse/subtlest': palette.white10A,
   'bg/success': palette.green50,
@@ -195,6 +195,7 @@ const borderColor = {
   'border/neutral/bolder': palette.gray300,
   'border/input': palette.gray200,
   'border/inverse': palette.white10A,
+  'border/selected': palette.gray900,
   'border/disabled': palette.gray100,
   'border/primary': palette.violet500,
   'border/hovered': palette.blue300,
@@ -215,10 +216,10 @@ const iconColor = {
   'icon/inverse': palette.white,
   'icon/disabled': palette.gray300,
   'icon/disabled/subtler': palette.gray200,
-  'icon/selected/primary': palette.violet500,
-  'icon/selected/neutral': palette.gray900,
-  'icon/primary': palette.violet500,
+  'icon/selected/violet': palette.violet500,
+  'icon/selected': palette.gray900,
   'icon/primary/subtle': palette.violet300,
+  'icon/primary': palette.violet500,
   'icon/primary/bold': palette.violet700,
   'icon/success': palette.green500,
   'icon/warning': palette.yellow500,
@@ -261,6 +262,65 @@ const color$1 = {
   ...scaleColor
 };
 
+const shadow$1 = {
+  shadowMedium: '0px 0px 1px 0px rgba(0, 0, 0, 0.06), 0px 8px 24px 0px rgba(0, 0, 0, 0.12)'
+};
+
+const surfaceElevation = {
+  'surface': palette.white,
+  'surface/overlay': palette.white
+};
+const shadowElevation = {
+  'shadow/overlay': shadow$1.shadowMedium
+};
+({
+  ...surfaceElevation,
+  ...shadowElevation
+});
+
+const colorStopList = {
+  colorStopListVioletPink: '#8E6CF0, #CF75F3',
+  colorStopListBlackGray: '#0F0E0F, #595959',
+  colorStopListWhite: '#FFFFFF, #FFFFFF00',
+  colorStopListBlack: '#000000, #00000000'
+};
+
+const direction = {
+  directionToRight: 'to right',
+  directionToLeft: 'to left',
+  directionToRightBottom: 'to right bottom',
+  directionToTop: 'to top'
+};
+
+const generateGradientTokenValue = (direction$1, colorStopList$1) => `${direction[direction$1]}, ${colorStopList[colorStopList$1]}`;
+const textGradient = {
+  'text/accent': generateGradientTokenValue('directionToRightBottom', 'colorStopListVioletPink')
+};
+const bgGradient = {
+  'bg/accent/violet': generateGradientTokenValue('directionToRightBottom', 'colorStopListVioletPink'),
+  'bg/accent/neutral': generateGradientTokenValue('directionToRightBottom', 'colorStopListBlackGray')
+};
+const borderGradient = {
+  'border/accent/violet': generateGradientTokenValue('directionToRightBottom', 'colorStopListVioletPink')
+};
+const overlayGradient = {
+  'overlay/subtlest/toright': generateGradientTokenValue('directionToRight', 'colorStopListWhite'),
+  'overlay/subtlest/toleft': generateGradientTokenValue('directionToLeft', 'colorStopListWhite'),
+  'overlay/subtlest/totop': generateGradientTokenValue('directionToTop', 'colorStopListWhite'),
+  'overlay/floating/toright': generateGradientTokenValue('directionToRight', 'colorStopListWhite'),
+  'overlay/floating/toleft': generateGradientTokenValue('directionToLeft', 'colorStopListWhite'),
+  'overlay/floating/totop': generateGradientTokenValue('directionToTop', 'colorStopListWhite'),
+  'overlay/bold/toright': generateGradientTokenValue('directionToRight', 'colorStopListBlack'),
+  'overlay/bold/toleft': generateGradientTokenValue('directionToLeft', 'colorStopListBlack'),
+  'overlay/bold/totop': generateGradientTokenValue('directionToTop', 'colorStopListBlack')
+};
+const gradient = {
+  ...textGradient,
+  ...bgGradient,
+  ...borderGradient,
+  ...overlayGradient
+};
+
 const rounding = {
   rounding0: 0,
   rounding4: 4,
@@ -3014,13 +3074,13 @@ const BaseButton = styled__default.default(UnstyledButton)(({
       '& svg': {
         color: color$1['icon/inverse']
       },
-      ':hover:not(:disabled)': {
+      '&:hover:not(:disabled)': {
         backgroundColor: color$1['bg/primary/hovered']
       },
-      ':active:not(:disabled)': {
+      '&:active:not(:disabled)': {
         backgroundColor: color$1['bg/primary/pressed']
       },
-      ':focus-visible': {
+      '&:focus-visible': {
         outlineColor: color$1['border/focused'],
         outlineStyle: 'solid',
         outlineWidth: 2,
@@ -3040,13 +3100,13 @@ const BaseButton = styled__default.default(UnstyledButton)(({
       '& svg': {
         color: color$1['icon/primary']
       },
-      ':hover:not(:disabled)': {
+      '&:hover:not(:disabled)': {
         backgroundColor: color$1['bg/secondary/hovered']
       },
-      ':active:not(:disabled)': {
+      '&:active:not(:disabled)': {
         backgroundColor: color$1['bg/secondary/pressed']
       },
-      ':focus-visible': {
+      '&:focus-visible': {
         outlineColor: color$1['border/focused'],
         outlineStyle: 'solid',
         outlineWidth: 2,
@@ -3066,13 +3126,13 @@ const BaseButton = styled__default.default(UnstyledButton)(({
       '& svg': {
         color: color$1['icon/accent/gray']
       },
-      ':hover:not(:disabled)': {
+      '&:hover:not(:disabled)': {
         backgroundColor: color$1['bg/neutral/hovered']
       },
-      ':active:not(:disabled)': {
+      '&:active:not(:disabled)': {
         backgroundColor: color$1['bg/neutral/pressed']
       },
-      ':focus-visible': {
+      '&:focus-visible': {
         outlineColor: color$1['border/focused'],
         outlineStyle: 'solid',
         outlineWidth: 2,
@@ -3092,7 +3152,7 @@ const BaseButton = styled__default.default(UnstyledButton)(({
       '& svg': {
         color: color$1['icon/neutral/bolder']
       },
-      ':after': {
+      '&:after': {
         content: '""',
         position: 'absolute',
         top: 0,
@@ -3105,13 +3165,13 @@ const BaseButton = styled__default.default(UnstyledButton)(({
         borderRadius: radii.full,
         boxSizing: 'border-box'
       },
-      ':hover:not(:disabled)': {
+      '&:hover:not(:disabled)': {
         backgroundColor: color$1['bg/neutral/subtler/hovered']
       },
-      ':active:not(:disabled)': {
+      '&:active:not(:disabled)': {
         backgroundColor: color$1['bg/neutral/subtler/pressed']
       },
-      ':focus-visible': {
+      '&:focus-visible': {
         outlineColor: color$1['border/focused'],
         outlineStyle: 'solid',
         outlineWidth: 2,
@@ -3123,7 +3183,7 @@ const BaseButton = styled__default.default(UnstyledButton)(({
         '& svg': {
           color: color$1['icon/disabled']
         },
-        ':after': {
+        '&:after': {
           display: 'none'
         }
       } : {})
@@ -3134,19 +3194,19 @@ const BaseButton = styled__default.default(UnstyledButton)(({
       '& svg': {
         color: color$1['icon/neutral/bolder']
       },
-      ':hover:not(:disabled)': {
+      '&:hover:not(:disabled)': {
         'color': color$1['text/neutral'],
         '& svg': {
           color: color$1['icon/accent/gray']
         }
       },
-      ':active:not(:disabled)': {
+      '&:active:not(:disabled)': {
         'color': color$1['text/neutral'],
         '& svg': {
           color: color$1['icon/accent/gray']
         }
       },
-      ':focus-visible': {
+      '&:focus-visible': {
         outlineColor: color$1['border/focused'],
         outlineStyle: 'solid',
         outlineWidth: 2,
@@ -3166,13 +3226,13 @@ const BaseButton = styled__default.default(UnstyledButton)(({
       '& svg': {
         color: color$1['icon/inverse']
       },
-      ':hover:not(:disabled)': {
+      '&:hover:not(:disabled)': {
         backgroundColor: color$1['bg/danger/bold/hovered']
       },
-      ':active:not(:disabled)': {
+      '&:active:not(:disabled)': {
         backgroundColor: color$1['bg/danger/bold/pressed']
       },
-      ':focus-visible': {
+      '&:focus-visible': {
         outlineColor: color$1['border/focused'],
         outlineStyle: 'solid',
         outlineWidth: 2,
@@ -3320,7 +3380,7 @@ const BaseChip = styled__default.default.span({
       '& svg': {
         color: color$1['icon/primary']
       },
-      ':after': {
+      '&:after': {
         content: '""',
         position: 'absolute',
         top: 0,
@@ -3340,7 +3400,7 @@ const BaseChip = styled__default.default.span({
       '& svg': {
         color: color$1['icon/neutral/bolder']
       },
-      ':after': {
+      '&:after': {
         content: '""',
         position: 'absolute',
         top: 0,
@@ -3594,7 +3654,7 @@ const BaseIconButton = styled__default.default(UnstyledButton)(({
     pointerEvents: 'none'
   },
   'cursor': $loading ? 'progress' : $disabled ? 'not-allowed' : 'pointer',
-  ':focus-visible': {
+  '&:focus-visible': {
     outlineColor: color$1['border/focused'],
     outlineStyle: 'solid',
     outlineWidth: 2,
@@ -3633,10 +3693,10 @@ const BaseIconButton = styled__default.default(UnstyledButton)(({
     'primary': {
       'backgroundColor': color$1['bg/primary'],
       'color': color$1['icon/inverse'],
-      ':hover:not(:disabled)': {
+      '&:hover:not(:disabled)': {
         backgroundColor: color$1['bg/primary/hovered']
       },
-      ':active:not(:disabled)': {
+      '&:active:not(:disabled)': {
         backgroundColor: color$1['bg/primary/pressed']
       },
       ...($disabled ? {
@@ -3647,10 +3707,10 @@ const BaseIconButton = styled__default.default(UnstyledButton)(({
     'secondary': {
       'backgroundColor': color$1['bg/secondary'],
       'color': color$1['icon/primary'],
-      ':hover:not(:disabled)': {
+      '&:hover:not(:disabled)': {
         backgroundColor: color$1['bg/secondary/hovered']
       },
-      ':active:not(:disabled)': {
+      '&:active:not(:disabled)': {
         backgroundColor: color$1['bg/secondary/pressed']
       },
       ...($disabled ? {
@@ -3661,10 +3721,10 @@ const BaseIconButton = styled__default.default(UnstyledButton)(({
     'tertiary': {
       'backgroundColor': color$1['bg/neutral'],
       'color': color$1['icon/accent/gray'],
-      ':hover:not(:disabled)': {
+      '&:hover:not(:disabled)': {
         backgroundColor: color$1['bg/neutral/hovered']
       },
-      ':active:not(:disabled)': {
+      '&:active:not(:disabled)': {
         backgroundColor: color$1['bg/neutral/pressed']
       },
       ...($disabled ? {
@@ -3675,7 +3735,7 @@ const BaseIconButton = styled__default.default(UnstyledButton)(({
     'outlined': {
       'backgroundColor': color$1['bg/neutral/subtler'],
       'color': color$1['icon/neutral/bolder'],
-      ':after': {
+      '&:after': {
         content: '""',
         position: 'absolute',
         top: 0,
@@ -3688,16 +3748,16 @@ const BaseIconButton = styled__default.default(UnstyledButton)(({
         borderRadius: radii.full,
         boxSizing: 'border-box'
       },
-      ':hover:not(:disabled)': {
+      '&:hover:not(:disabled)': {
         backgroundColor: color$1['bg/neutral/subtler/hovered']
       },
-      ':active:not(:disabled)': {
+      '&:active:not(:disabled)': {
         backgroundColor: color$1['bg/neutral/subtler/pressed']
       },
       ...($disabled ? {
         'backgroundColor': color$1['bg/disabled'],
         'color': color$1['icon/disabled'],
-        ':after': {
+        '&:after': {
           display: 'none'
         }
       } : {})
@@ -3705,10 +3765,10 @@ const BaseIconButton = styled__default.default(UnstyledButton)(({
     'plain-bold': {
       'backgroundColor': color$1['bg/neutral/subtler'],
       'color': color$1['icon/neutral/bolder'],
-      ':hover:not(:disabled)': {
+      '&:hover:not(:disabled)': {
         color: color$1['icon/accent/gray']
       },
-      ':active:not(:disabled)': {
+      '&:active:not(:disabled)': {
         color: color$1['icon/accent/gray']
       },
       ...($disabled ? {
@@ -3719,10 +3779,10 @@ const BaseIconButton = styled__default.default(UnstyledButton)(({
     'plain': {
       'backgroundColor': color$1['bg/neutral/subtler'],
       'color': color$1['icon/neutral/bold'],
-      ':hover:not(:disabled)': {
+      '&:hover:not(:disabled)': {
         color: color$1['icon/neutral/bolder']
       },
-      ':active:not(:disabled)': {
+      '&:active:not(:disabled)': {
         color: color$1['icon/neutral/bolder']
       },
       ...($disabled ? {
@@ -3733,10 +3793,10 @@ const BaseIconButton = styled__default.default(UnstyledButton)(({
     'plain-subtle': {
       'backgroundColor': color$1['bg/neutral/subtler'],
       'color': color$1['icon/neutral'],
-      ':hover:not(:disabled)': {
+      '&:hover:not(:disabled)': {
         color: color$1['icon/neutral/bold']
       },
-      ':active:not(:disabled)': {
+      '&:active:not(:disabled)': {
         color: color$1['icon/neutral/bold']
       },
       ...($disabled ? {
@@ -3747,10 +3807,10 @@ const BaseIconButton = styled__default.default(UnstyledButton)(({
     'danger': {
       'backgroundColor': color$1['bg/danger/bold'],
       'color': color$1['icon/inverse'],
-      ':hover:not(:disabled)': {
+      '&:hover:not(:disabled)': {
         backgroundColor: color$1['bg/danger/bold/hovered']
       },
-      ':active:not(:disabled)': {
+      '&:active:not(:disabled)': {
         backgroundColor: color$1['bg/danger/bold/pressed']
       },
       ...($disabled ? {
@@ -3793,7 +3853,7 @@ const BaseIconToggleButton = styled__default.default(UnstyledButton)(({
     display: 'block'
   },
   'cursor': $disabled ? 'not-allowed' : 'pointer',
-  ':focus-visible': {
+  '&:focus-visible': {
     outlineColor: color$1['border/focused'],
     outlineStyle: 'solid',
     outlineWidth: 2,
@@ -3846,7 +3906,7 @@ const BaseIconToggleButton = styled__default.default(UnstyledButton)(({
     plain: {
       backgroundColor: color$1['bg/neutral/subtler'],
       ...(selected ? {
-        color: color$1['icon/selected/primary']
+        color: color$1['icon/selected/violet']
       } : {
         color: color$1['icon/neutral']
       }),
@@ -3951,6 +4011,34 @@ const StyledIcon = ({
   children: /*#__PURE__*/jsxRuntimeExports.jsx(Icon, {})
 });
 
+const theme = {
+  breakpoints,
+  space: space$1,
+  fontWeights,
+  fontSizes,
+  lineHeights,
+  radii,
+  colors: {
+    ...color$1,
+    surfaceElevation
+  },
+  gradients: gradient,
+  shadows: {
+    ...shadowElevation
+  }
+};
+
+const ThemeProvider = ({
+  theme: propTheme,
+  ...props
+}) => {
+  const theme$1 = propTheme ?? theme;
+  return /*#__PURE__*/jsxRuntimeExports.jsx(styled.ThemeProvider, {
+    theme: theme$1,
+    ...props
+  });
+};
+
 const useMediaQuery = query => {
   const getMatches = query => {
     /**
@@ -4587,8 +4675,10 @@ exports.Spinner = Spinner;
 exports.Stack = index;
 exports.StyledIcon = StyledIcon;
 exports.Text = Text;
+exports.ThemeProvider = ThemeProvider;
 exports.UnstyledButton = UnstyledButton;
 exports.View = View;
+exports.theme = theme;
 exports.useDevice = useDevice;
 exports.useOutsideClick = useOutsideClick;
 exports.useProvidedOrCreatedRef = useProvidedOrCreatedRef;